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