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!

In particular, I want to draw your attention to the first couple of CSS articles - they’re both so simple in concept, but the first solves a lot of common UI issues very simply while the latter enables a delightful effect. There’s also some great JavaScript articles, a super exciting announcement about native lazy loading in the browser, and a wonderful article on engineering lessons learned from non-technical people. Enjoy!

Best,

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

CSS :empty Selector

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.

Staggered CSS Transitions

What a fun little effect! Using the transition-delay property to create staggered CSS animations. Love it!

CSS Units Explained

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 vmin and vmax for using the smallest or largest dimension of the viewport. Some very interesting potential here…

Handling Unused CSS In SASS To Improve Performance

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.

The Differing Perspectives on CSS-in-JS

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.

JavaScript

First-Class Functions in JavaScript

First class functions (functions that can be passed as arguments to other functions) to me is one of the most powerful concepts in functional programming and moving up in your skill as a developer. They’re included in pretty much every modern language, and JavaScript makes them so beautifully simple to use. This post does a good job of both explaining the concept and showing an example of how they can be useful.

JavaScript Promise combinators: .all(), .race(), .allSettled()

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.

All the New ES2019 Tips and Tricks

An update on the latest features in the JavaScript language. Sure, you may already have been using these via babel, but they’re official now and that means browser support is getting good. If you use a service like polyfill.io,you can ship polyfills only to browsers that need them, and take advantage of both lower bundle size & highly optimized browser implementations where they exist.

Modern React testing, part 1: best practices

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.

Getting More Out of Vue Async Components

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.

Other Awesomeness

Native lazy-loading for the web

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.

Time to First Byte: What It Is and Why It Matters

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.

Building a Full-Stack Serverless Application with Cloudflare Workers

This is kind of a trip to read… the author builds what looks code-wise like a relatively traditional node server application. It has routes that run functions that render HTML, etc… but despite the relative familiarity it will run on Cloudflare’s globally distributed CDN using their ‘workers’ serverless platform. Getting you a ‘traditional’ looking app that is 100% serverless, I would expect lightning fast, and extremely inexpensive to run. And all you do is write JavaScript. Mind. Blown.

All the best engineering advice I stole from non-technical people

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.

Happy Friday!

That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html