Friday Frontend: Friday the Thirteenth 2020 Edition

Hey there,

Hope you all had a good week! I’m not sure what to expect today -- Friday the thirteenth is traditionally an unlucky day, and living through 2020 we’re in what has been the worst year in my lifetime. Maybe they’ll cancel out and today will be unusually good? Here’s hoping.

There’s a number of interesting articles today, but the #1 news to me is the fact that container queries are coming to Chromium, and the followup article for a technique that gets you very close with today’s CSS is super cool. 

Best,

KBall from ZenDev

CSS & SCSS

Container Queries are coming to Chromium!

This is super exciting! Container queries are something that web developers have been talking about and asking for since 2011, with browser vendors declining to implement them for a variety of reasons, many of them linked to implementation complexity. The fact that Chromium is going to take them on means that both we will have access to this incredible tool in most browsers (due to Chromium’s dominance), and that there will be a path to follow for Firefox and any other browsers that happen to come along. 

The Raven Technique: One Step Closer to Container Queries

If you can’t wait for those container queries, check out this cool technique for getting very close to the same capabilities using modern CSS functions such as clamp, min, max, and calc. I have to wonder if the work to get all of these to happen is what has laid the foundation for Chromium to take on container queries for real.=

Flow CSS Utility

Quick hit utility that makes it easy to keep vertical rhythm and flow between elements.

JavaScript

ES2020 Optional Chaining and Dynamic Imports Are Game-Changers. Here’s Why.

I’d actually argue these are fundamentally different in value - dynamic imports enable new capabilities in a straightforward way, while optional chaining saves you a lot of typing (no more a && a.b && a.b.c chains). That said, they are both quite useful, and you should know them.

What's the deal with SvelteKit?

This is a pretty interesting development in the “meta-framework” space -> Frameworks built on top of frameworks. The Svelte team is moving away from the “Next.js-like” approach of Sapper and embracing a serverless-first, native ES-module driven approach for their recommended approach to building Svelte apps. Not sure how it will go but very interested to watch. Svelte continues to be pushing further and faster into modern trends than any of the ‘big three’ frameworks.

Algebraic Effects for React Developers

This was a bit of a mind-bender for me, but as React hooks are an ever-more present part of my workflow, I’m continuing to try to build a better mental model of what they do and why. This core underlying concept of algebraic effects is key, and while this article took me a while to grok, it is definitely helpful in building that mental model.

7 Ways to do Dependency Injection in Functional JavaScript without a Framework

I appreciate that this author takes a concept - dependency injection - and then explores ways to apply it in increasing amounts of complexity and power. I doubt many folks will apply some of the later approaches unless you are writing completely functional JavaScript, but we can all utilize some of the earlier techniques to incrementally make our software more maintainable.

Other Awesomeness

Painting With the Web

I love this idea of using the tools of the web to facilitate creativity and exploration. So much of my work on the web is functional and aimed at business outcomes, but this is another under-utilized site. The web is the new canvas, and it is becoming more powerful and expressive every day.

Average UX Improvements Are Shrinking Over Time

Super interesting look at the impacts of UX improvements on quantitative metrics like conversion rates, and how those impacts have changed over time. Unsurprisingly there is wide variation, but the average impact has gone down, with the authors arguing that is due to the proliferation of better design. Makes sense… if UX is terrible, an improvement will have a large impact, but if UX is mostly good enough, improvements will have a much smaller effect. That said, another possible explanation would be a case of punctuated equilibrium where there were big improvements in our understanding for a while, and then the field has stagnated somewhat, and new breakthroughs could drive the impact up again. What do you think?

Site-Speed Topography

Super interesting explanation of a process for systematically analyzing performance across an entire site and looking for opportunities to improve it.

Designing the Smallest Possible Thing

An exploration of what an “agile” approach to design looks like. What does it mean to “design small”, why is it hard, and how do you do it in a way that doesn’t sacrifice quality?