Watch/Star/Fork

wsf-xv

CSS. Firefox 68 now supports CSS Scroll Snap! Rachel Andrew with more details / Intrinsically Responsive CSS Grid with minmax() and min() by Evan Minto / How to use minmax() Anna Monus / Pixels vs EMs: Users do change font size by Evan Minto / Multi-column manipulation by Heydon Pickering

JavaScript. Implementing an efficient LRU cache by Guillaume Plique / Algebraic effects for the rest of us by Dan Abramov / Is postMessage() slow? by Surma

Toolbox. in-eu, a tiny library for detecting whether the user is in the European Union, based on their timezone and browser language — clever! / turbolinks, noted here because I spent an inordinate amount of time trying to remember the name

React. Next.js Practical Introduction: Pages and Layout by Dan Arias, the first part of a series / Building a component library, a livestream series by Sid Kshetrapal / Front-end, React, and a bridge over the great divide by Brad Frost

Web Components. The Importance of Elegance by Johan Halse / haunted, React hooks API for web components

CMS. Using Parcel.js as a build tool for Gutenberg blocks by Jim Schofield / I made a Timber-based WordPress starter theme called Lathe

UX / Accessibility. Marcy Sutton on what they learned from user testing of accessible client-side routing techniques / Form design: from zero to hero all in one blog post by Adam Silver

Design. Testing for wide gamut on the Bjango blog / The People Part of Design Systems by Magera Moon

Creative coding. Computational Photography: from selfies to black holes by Vasily Zubarev

Fun. Popup Trombone by Matthew Rayfield, a trombone you play by resizing the browser window

Software development. Some thoughts on Yagni (You Ain't Gonna Need It) from Martin Fowler / The Original Apollo 11 Guidance Computer is on GitHub!


Today I learned

Minimal patterns. I love Scott Jehl's thinking on making enhancements to bridge the gap to future browser functionality:

Many of my favorite JavaScript patterns deliberately aim to one day become obsolete. That's not to say scripts built to last are inherently any worse. I just particularly love patterns that are designed to be a bridge to a future where they'll do nothing at all. — Scott Jehl (source)

His latest is a simple pattern for loading CSS asynchronously:

<link
rel="stylesheet"
href="style.css"
media="print"
onload="this.media='all'"
/>

This works because browsers load print stylesheets asynchronously (since, presumably, they're not needed for displaying the page in the browser). All that's left is to flip the switch to media='all' once the stylesheet loads. It has better browser support than the alternative approach, but you might also want to include a plain stylesheet when JavaScript is not enabled:

<!-- Full example -->
<link
rel="stylesheet"
href="style.css"
media="print"
onload="this.media='all'"
/>

<noscript>
<link rel="stylesheet" href="style.css" media="all" />
</noscript>

Soundtrack: Four Tet — Dreamer