To anyone still shying away from flexbox, or confused by the various unintuitive names and values, Dudley Storey has a fantastic intro primer for a basic flexbox layout.

And if you’re worried about browsers that don’t support flexbox (and you should), you can obviously choose when to switch to flexbox using something like Modernizr, or simply use a JS fallback, like Osvaldas Valutis did!

Walk-through of the simple and subtle click-ripple effect from the Google Design site.

And once you have a basic grasp on SVG animation, you can apply that to clipPath to make some cool UI effects.

Or to make a sweet little animated burger icon!

Or add some rad image filters via SVG (please do not create text filters like these…).

Of course, you can also do cool image transitions using CSS blend modes…

Some time ago people started talking about, and then Google’s PageSpeed started recommending that, dividing your CSS into above- and below-the-fold, and adding you above-the-fold CSS right in the page. I get the idea, and it’s a great idea, but I’ve never bitten the bullet to try it. Thank goodness someone else did, and wrote about it! I love the web!! :-)

Or you could just use auto-magically extract and inline your above-the-fold CSS with Critical and Gulp. I was curious how they would handle varying screen sizes, then was a little dismayed that you have to manually specify width and height in the init, but I’m really not sure how else you would do it… I guess for a single-site-for-all-devices site you might want to go with the max screen sizes… Still better than naught, I would say!

And for CSS help from another angle, StyleStats will parse your CSS, analyze against a URL, and give you a run-down of what is used how often, and more. I do wish the URL box would accept simply “aarontgrogg.com” and add the “http://” if I didn’t (or at least not clear the box after the error!), and some kind of tooltip explaining what each section title means (like “Unqualified Attribute Selectors”) would be nice enhancements. (Would also be nice if the input and “Parse” button worked by just hitting Enter…)

A couple neat hacks for first ideally avoiding specificity issues, and then inevitably dealing with them.

More CSS tricks! (Some silly ones, of course, but also some really cool ones, including how to do XSS using nothing but CSS… Wha???)

And even more CSS tricks, these specifically for mobile!

Cross-browser, CSS-only, native-looking select elements! A lot of work went into this, so really impressive!

Must-watch videos about javascript. Indeed! Going all the way back to 2009!

Tappy is a minimal, normalized “tap” event that works with touch, mouse, keyboard, and more.

Works with (actually, requires) jQuery, eliminates the 300ms delay, and will even fire for mouse, enter key or space bar interactions.

16 really useful responsive design tutorials. From the classic Smashing Magazine article Responsive Web Design: What It Is and How To Use It, to grids, typography, images, video, and JavaScript.

Nice, quick run-through on the similarities, differences and semantics of the a, input and button tags.

And finally, I’ve been through some tricky launches before, but nothing like the one that happened Top⇪