Absolutely freaking gorgeous CSS-only, accessible footnotes. Be sure to read the comments for a few alternatives / suggestions, but the base here is awesome!
Little catch-up on pseudo-classes, pseudo-elements, and proper colon-notation. I really cannot imagine anyone being confused by the difference between pseudo-classes and pseudo-elements in CSS, but then again, I have no idea what’s going to be added in the future, so, as always, depending on whether you need to support IE8 or not, you might want to take heed.
Slick animated sign-up flow, converting a pricing table option directly into the sign-up form itself! “Open wide, now, here comes the airplane!” :-)
Nice helper functions to let us fade something in/out and then have it appear/disappear after the fade, without having to code something like this (from the above article):
$( '.item' ).addClass( 'disappear' ).on( 'webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend', function() {
$( this ).remove();
});
And instead code something like this:
$( '.item' ).addClass( 'disappear' ).onCSSAnimationEnd( function() {
$( this ).remove();
});
There is also a transitionend function and a version with no dependencies… FTW!
Speaking of CSS animation, from Wealthfront Engineering a nice quick exploration of Netflix’s new homepage animation. Pretty simple, once you see the pieces… :-)
My mind was a little blown reading the title CSS Grid Layout is just around the corner (I mean, I’m still getting my head around Flexbox!). Then I took a look at Can I Use. The corner is still pretty far away…
This promises to be a very useful WordPress developer series. Can’t wait!
Nice to know that some people are still trying to get element queries into browsers… Hopefully one day.
And finally, JavaScript: It’s as easy as one little picture…
Happy reading,
Atg