Friday Frontend: Delightful CSS Quick Hits Edition
Happy Friday! I’m back home, frying in a heatwave and slowly recovering from jetlag. :P At least there were some cool articles this week!
KBall from ZenDev
P.S. Quick reminder that I recently launched a coaching program for anyone who wants some more 1-on-1 help. I’m happy to work on your technical skills, but also things like communication, career growth, and managing overwhelm. If you think you might be interested, book a free intro call and let’s talk about it!
CSS & SCSS
A simple but under-utilized pseudoselector, the
:empty selector can make your life easier in a number of ways. This is a delightfully easy read that first explains how the selector works, and then highlights quite a few common UI problems it can solve for you.
What a fun little effect! Using the
transition-delay property to create staggered CSS animations. Love it!
Solid overview of CSS units. There’s more here than I realized! For example, did you know that
mm (millimeters) and
in(inches) are valid CSS units? Doesn’t make much sense for the web, but when you consider print stylesheets… very interesting. The other pair that I hadn’t known about were
vmax for using the smallest or largest dimension of the viewport. Some very interesting potential here…
Warning: This is a long article, with a lot to wrap your head around. And for the stated goal (removing unused CSS from a generated spreadsheet) tools like uncss are both simpler and probably better. However. This is a fascinating exploration of meta-programming and dynamic inclusions of different CSS files using SCSS, and got my head spinning about different ways to use this approach when building frameworks, libraries, and toolkits. Worth a readthrough if that type of thing is your jam.
Chris Coyier drawing together the manifold opinions of a number of experts in the field to start fleshing out a little bit more of a roadmap for when CSS-in-JS makes sense and when it doesn’t. This is a fraught topic and he does a great job of bringing a range of perspectives to it.
A great look at the different ways you can combine promises. Digs into the thinking behind them, does some looks at implementation, and highlights uses. A great read for leveling up your skills working with promises and asynchronicity.
I like this article (and the next one in the series here) because they not only dig into the ‘how to’ but also the ‘why to’ test in particular ways, and explore some of the ways in which testing UIs is different than testing backend services, and thus might have different things you chose to optimize for.
An interesting exercise looking at a range of ways of exploiting asynchronous loading to code split & load code as needed. Often this conversation stops and starts with asynchronous components, but they go much deeper than that.
I’m super excited about this! Browser-level lazyloading for images, iframes and more via a simple HTML attribute. Currently shipping only in Chrome, but digging into the whatwg issue there is significant engagement from the Webkit team so I imagine Safari will not be far behind, which at least gets to the vast majority of mobile browsers where this is of the biggest value.
Interesting look into an aspect of performance I haven’t seen discussed much by front-end devs - the pure latency before even a single byte gets back to the client’s browser. Looks at all the factors that can go into that and digs into some new tools available to start breaking this down and improving it.
This is a paywalled medium piece (which I usually try to avoid in this newsletter), but if you’re just looking at 1 they should let you through and it is just too good to skip. Incredible insights that can be applied to engineering, problem solving, or just life in general.