This will be my last Friday Frontend of 2019; I’ll be off the next two weeks, and then the newsletter will pick up again on January 10th. I hope you have a holiday break in front of you, and are able to unplug and enjoy it!

In the meantime, this week we’ve got a set of great articles, many of them retrospectives looking back not just one year, but 10 or even 15. There’s also some fascinating info in the State of JS Survey results, and some solid tutorials.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

The Origin Story of Container Queries

An interesting look back at the origins of one of the most-desired not-yet-implemented CSS features. There are some interesting backstory pieces about why element-level media queries are so hard, but it is kind of surprising that not even a deliberately limited version of this exists now almost 10 years after folk started talking about them.


A History of CSS Through Fifteen Years of 24 ways

Fascinating look back through not only how CSS has evolved, but how one of the thinking of an expert in the field has evolved with it. I love how it highlights the ways our solutions have evolved with the spec.


Why CSS HSL Colors are Better!

A dive into how by combining CSS variables with HSL formatted colors you can create incredibly concise, readable, and adaptive color schemes.


7 Uses for CSS Custom Properties

Great quick roundup of use cases for CSS Custom Properties. I particularly like the staggered animations example. I’d love to take that further - what other properties of animations could we vary based on custom properties?


JavaScript

State of JS 2019 Results

A very interesting look at the state of the JavaScript ecosystem today. CAVEAT: The respondents are almost certainly not representative of the entire ecosystem; it skews heavily male, heavily US, and based on prior years more heavily comes from the React community than any others. So don’t draw too deep of conclusions, but still fascinating to explore. My favorite stat - JSParty is on the list for most listened-to podcasts. Not as high as I’d like, but last year didn’t make a showing, so it’s moving up! :)


🚀⚙️ JavaScript Visualized: the JavaScript Engine

Short and sweet, with some wonderful animated visuals, this post gets into the basics of what’s going on behind the scenes to run the JavaScript code you write.


Thoughts On Svelte.

Given one of my predictions for 2020 is the continued rise of precompilation-based tooling and frameworks like Svelte, I’m on the lookout for interesting takes on it. I appreciate that the author highlights the way that competition is improving the entire frontend framework ecosystem, and whether or not Svelte wins increased precompilation is going to be spreading more and more.


Portal – a new feature in Vue 3

This is an innovation from the React world that I’m super excited to see come to Vue. While a purely-nested component tree is great for a very large percentage of the problems we solve on the front-end, there are times (the canonical example being modals) where the logical place and the right place in the DOM are different. Portals give us a way to handle that.


Other Awesomeness

"The Decade of Design”: How the last 10 years transformed design’s role in tech

This is fun - not just “end of year” look-backs, but also “end-of-decade”. This one in particular highlights a trend that I think has been huge - the rise of design as both a differentiator and a requirement in technology projects. The bars for both “minimum viable” and “well designed” have gone wayyyyy up, even as the complexity of different device types and formats has also exploded.


Design APIs: The Evolution of Design Systems

Hmm… I’m not sure I agree with the author about where this is going, but I do find this a fascinating look at one of the ways we could further standardize the ways in which design and design systems interact and are used within software.


CSS 3D transformations & SVG

Super exciting look at the future of SVG. I’ve long felt like SVG is underutilized, and one of the reasons is that while it looks an awful lot like HTML, and in many cases works like it, there are lots of subtle cases where it doesn’t. This article explores one of the underlying reasons, why there’s now a chance to eliminate those discrepancies, and some of the power unveiled when you do.


Average Page Load Times for 2020 – Are you faster?

Quick look at the state of the web when it comes to load-time - how fast are things, how heavy, and how many different resources are being loaded?