Today’s Readings

Posted on by

Great (albeit simple, which is actually part of what makes it great!) example of sort-order progressive enhancement from , starting with select elements and enhancing with nifty drag-and-drop functionality, while still using the update process from the non-drag-and-drop version…

You may already be familiar with appendChild and insertBefore, but wants to help you also get familiar with insertAdjacentHTML. Thank you Dudley, quite handy!

Not sure how many Vim users there are out there, but hopefully these 10 Time-Saving Tips for UNIX Vim Beginners will help you, even if you are not a beginner anymore…

Don’t know about you, but one of my biggest gripes with Bootstrap is all the damned floats… Yeah, I know they are a really solid way to create layouts, but they feel so old to me… I mean, Flexbox has some pretty amazing support now-days… So Bulma, the CSS framework based on Flexbox looks very enticing to me.

And speaking of Flexbox frameworks, Flexo is a 100% CSS, Flexbox grid system! (Hopefully 12 columns is enough for you and your projects…)

Okay, here is just a bunch more Flexbox stuff from Smashing Magazine, you go read… ;-)

The future of loading CSS by demonstrates a progressive approach to page rendering, allowing for improved perceived page load speeds, and pretty ideally designed for modular design & development…

Then here is an interesting follow-up from Jake. As Jake says, not practical, and probably shouldn’t even be done, but it’s always interesting to push envelopes and see how various options affect things.

Service Worker Precache is a module for generating a service worker that precaches resources. The module is designed for use with gulp or grunt build scripts, though it also provides a command-line interface. The module’s API provides methods for creating a service worker and saving the resulting code to a file.

Very powerful!

Gotta do HTML emails? Sorry sod… But maybe this Responsive HTML email framework will help! Great-looking boilerplate.

Or this Responsive Emails without Media Queries article!

Boy did this site performance article send me down a rabbit hole… Into Ilya’s presentation, into my repo, onto my dev server, and finally this site makes fair use of rel-prefetch. :-) My Analytics, at least for now, says that preconnect, prefetch, and prerender don’t make much sense for me, but it is something I will keep an eye on!

And finally, beyond the wonderful lampooning of such an aggressively arrogant buffoon, trumpdonald.org is a wonderful technical achievement!

Happy reading,
Atg

Top⇪

Today’s Readings

Posted on by

For better or worse, Google’s AMP project is out there now, and as long as it is a thing, then hearing the news that WordPress is AMP-ready, is for the better…

And since we’re already drinking the WordPress Kool-Aid, let’s take a run through “just a few” WPMU DEV posts on how to set-up, tighten, and customize, a WordPress project:

And since we’re already drinking the Build Tool Kool-Aid, let’s have a look at 6 PostCSS plugins for Developers.

And once you’ve got your CSS all nicely modernized, make sure it is as lean as it can be by running it through TestMyCSS. Does a nice job of picking up long selectors, duplicate statements, duplicate selectors, and more! Does not do such a nice job of fetching CSS files from HTTPS, and I don’t see an “upload” option. Bummer, but still a great tool!

And if you’d like, here are a few more CSS tips and tricks, via a very cute delivery method…

Several great options for implementing automatic art-directed cropping for responsive images.

Three more death-blows to Flash…

  1. as the New York Times switches from Flash to HTML5 video players,
  2. media-delivery powerhouse Brightcove switches from Flash to HTML5, and
  3. some company called Google promises to stop running Flash display ads in 2017!

And with the continuing demise of Flash, let us remember that another aging comrade-in-arms is also soon dying: IE. And with that death will come much suddenly-superfluous code… But how to even start that clean-up? Fret not, as SitePoint is here to help with a few post-IE spring cleaning tips!

From The Paciello Group, comes a short note on the use of alt="" and the title attribute on img elements. TL;DR: Use alt, who cares about title?

One more from The Paciello Group, and one more regarding accessibility, here are a few basic screen reader commands for accessibility testing. You know, like we all do, right?

Okay, one more accessibility item, though really more of a browser/testing/support item, is this page of HTML5 elements, all with minimal styling, meant to help with cross-device support testing, as well as a single document to test your new CSS on.

If you’re looking at add a CSP security header to a project, getting the options just right can be a bit of a task, leaving you with either security holes or content/functionality breaking. So let walk you through fine-tuning your CSP header.

And finally, I think someone (read: Not it!) should convert this list of untranslatable words into a Lorem Ipsum-style content generator… :-)

Happy reading,
Atg

Top⇪

Today’s Readings

Posted on by

Pure CSS tribute to Mr. Dylan… Thank you, Mr. Keith… :-)

Nice walk-through of JS‘s classList from . Support is certainly looking good, with only IE10, 11 and Mobile partially supporting it.

continues the theme with these 5 Ways that CSS and JavaScript Interact That You May Not Know About.

Was wondering how long this would take:

Pressure.js… is a JavaScript library that makes dealing with Apple’s Force Touch and 3D Touch simple.

Great collection of Service Worker resources & notes from (and not just because he mentions me… :-P ).

Okay, one more from Jeremy, as he has one more note on Handling redirects with a Service Worker…

And as long as we’re talking about cutting-edge JS, here is an entire battery of articles on getting started, being productive, and moving beyond, with React…

  1. From SitePoint, Building a React Universal Blog App: A Step-by-Step Guide, by , starts from the very beginning (creating the directory), provides the starting package.json file, and marches right through code sample after code sample, to get you completely set-up and running!
  2. From CSS Tricks, I Learned How to be Productive in React in a Week and You Can, Too, by , offers a fresh set of eyes, debunks a few myths about React, and also walks through code sample after code sample to demonstrate how to get up and running!
  3. Then shares 9 things every React.js beginner should know; I always feel like I should read these kinds of lists before I get started with a tech, but then it often makes no sense until I start digging in… You decide your approach.
  4. Next, starts a series on Performance Engineering with React. Always good to know performance DOs from the get-go, I feel.
  5. From Egghead.io, hopefully these React and Redux Cheatsheets will come in handy during early navigation!
  6. And finally, comes MERN, which “is a scaffolding tool which makes it easy to build isomorphic apps using Mongo, Express, React and NodeJS.” Pretty sweet!!

Whew!

Nice series about the Web Animations API. The entire series is complete, so you can binge-read start to finish as soon as you finish reading this! ;-)

is so cool… She wrote an article simply titled The `background-clip` Property and its Use Cases, which indeed begins by explaining background-clip, then showing a few very primitive explanation demos. All very nice. Then she proceeds to just slam us in the face with increasingly awesome examples by adding CSS filters and creating skeuomorphic form controls… Amazing…

And finally, reader shares his article How to Speed Up Your WordPress Blog & Make it Insanely Fast. I think most of these are well-covered, but it cannot hurt to reiterate something so important!

Happy reading,
Atg

Top⇪

Today’s Readings

Posted on by

I recently referenced the Chrome Extension DevTools Author, which lets you theme certain panels. My experience wasn’t perfect, but nice job author of Author, , for reaching out and helping me resolve the issue!

Just in time for the official DevTools dark theme to hit the streets… :-/

I really like the floating label pattern, especially with no JS required! Maximum usability, minimal overhead…

walks us through CSS filters in this awesome live-coding presentation!

And if you’re digging the CSS filters, cssFilters.co is a really fun way to learn more!

From comes a crapload of useful SVG links!

A pretty thorough collection of responsive typography tidbits, culminating in a Sass plugin to help you write less code. There are a few other useful bits scattered throughout the comments, if you can tippy-toe your way around the piles left by the troll…

Then walks us through using SVG to create responsive hero text!

Writing Next Generation Reusable JavaScript Modules in ECMAScript 6 is a great intro to getting your hands dirty with ES6/ES2015 now, as in today, and making it usable by everyone out there.

With all the buzz Service Worker has received as of late, it is easy to see why is so excited about streams! At the very least, we can finally create real progress bars… ;-)

How to: Pure CSS masonry layouts.

How am I only now learning about the HTML5 hidden attribute?? And browser support is pretty slamming!

Great couple quick bits to make scrollable regions more accessible!

And finally, I was just doing a review of an older project where we use a lot of background images and wondered if I could use inline images instead, but the responsive positioning seemed like it would be tricky to match. Until I read this article about object-fit and object-position.

Happy reading,
Atg

Top⇪

Today’s Readings

Posted on by

With the incredibly powerful news that iOS Safari 9.1 will finally support the picture element, support will soon take a huge leap forward, making art direction implementations a much more available option!

There are a couple other features worth noting in the 9.1 release notes, including the removal of the hated 350ms tap delay, and adding support for CSS variables and the will-change CSS property!

Also pretty powerful news that AWS is now offering free SSL certificates!

And speaking of AWS, here are a few best-practices for using AWS’ IAM.

Yet another nice, simple, easy-to-follow “use Flexbox for your complex layout” demo. Though published by WPMU DEV, there is nothing specifically having to do with WordPress here, everything in the article is applicable everywhere…

And as long as we’re playing with Flexbox, the Flexbox Playground CodePen is an awesome way to play with, get to know, and be awed by, all the various flexbox properties and attributes… It’s almost too powerful to fully grasp, when you consider all the combinations you can create…

The great shows us How Tabs Should Work (UI tabs, not browser tabs). Considering his impressive list of requirements near the top of the article, a wonderful solution to a very common, and commonly-troubled, UI pattern! (Note that he even offers a non-jQuery version near the bottom!)

And while we’re re-thinking UI patterns, here is a great walk-through on the thinking of, and designing, a new mobile navigation menu for PlayStation.com. As the first commenter states, it is always nice to see the thought that goes behind design.

A very nice, easy-to-follow Part 1 of JavaScript Modules: A Beginner’s Guide. Looking forward to Part 2!

And since the previous article started talking about ES2015 (formerly ES6), this ES6 Cheatsheet might also be useful… :-)

The Responsive Breakpoints Generator certainly got a lot of attention in the last couple weeks, and deservedly so. This Smashing Magazine article does a nice job of explaining the problem this tool solves, and how to best go about using it.

A Gulp-Based External SVG Symbol Sprite Icon System. As the author, , admits, it’s a horrible title, but it’s a great article on the subject!

And sticking with Una for a sec, I have to admit that I understand very little of what she is saying in her dotCSS 2015 presentation, but the effects she gets solely using CSS Blend Modes, Filters and Gradients, are amazing…

And finally, I have mentioned before that I basically have no interest in computer game playing. But I cannot deny the power of the technologies used, and the impressive visuals that are created within them. So if you are interested in game development, check-out this HTML 5 game development video series!

Happy reading,
Atg

Top⇪