wsf-xxviii

Published Sep 14, 2021 · Updated Sep 16, 2021

News

Browsers & the web platform

Firefox 92 is out. It joins Chrome and Edge in supporting the accent-color CSS property for form inputs. Trying to stop developers from styling checkboxes and radio buttons is like trying to stop teenagers from having sex. You might as well accept that it’s going to happen and give them contraception so they can at least do it safely. says Jeremy Keith. Ruth John summarizes other new features.

Browser dev tools move pretty fast these days. Patrick Brosset offers an overview of recent additions across browsers.

The W3C Design System is live and is looking mighty fine. Andy Bell's Cube CSS gets a shoutout as an inspiration.

New explainer just dropped: HTML focusgroup attribute aims to help authors implement keyboard navigation for custom controls. Like with other explainers, feedback via GitHub issues is encouraged.

Security updates

Upgrade npm to 6.14.15 or 7.21.0, respectively to prevent malicious packages from potentially overwriting files outside node_modules.

Upgrade to WordPress 5.8.1 to patch some vulns in the REST API and Gutenberg editor. Probably upgrade your plugins for good measure while you're there.

Things to read

Fresh aesthetics with CSS & SVG

Designing Beautiful Shadows in CSS, Josh W. Comeau on overlapping box-shadows for a realistic elevation effect. The drop-shadow() filter also gets a quick mention.

Grainy Gradients by Jimmy Chion, and a companion interactive playground.

Accessibility

ARIA Spec for the Uninitiated, a series by Gerard Cohen on the Deque blog: Part 1, Part 2, and Part 3.

Color and Universal Design by Steven Hoober.

JavaScript

JavaScript Eventing Deep Dive, Stephen Stchur and Thomas Steiner on the nitty-gritty of DOM Events. (One of the mini-projects chronically stuck in my drafts folder is documenting what exactly you prevent when you preventDefault() but, as the authors note, there's a daunting number of combinations to test.)

Building a split-button component, another foundational overview by Adam Argyle, following his write-up on building switches.

Performance

How to write about web performance, in which Nolan Lawson tries to distill some of what I’ve learned over the years to offer as advice to other aspiring tinkerers, benchmarkers, and anyone curious about how browsers actually work when you put them to the test.

Build tools, and doing without

Twitter's div Soup and Uglyfied CSS, Explained by Giuseppe Gurgone. To the eyes of somebody who’s not familiar with the framework, the HTML produced by React Native for Web might look utterly ugly and full of bad practices. In this blog post we will see how to make sense of this source code and why the authors made some unconventional and controversial choices.

Bundling non-JavaScript resources by Ingvar Stepanyan about the new URL('./relative/path', import.meta.url) pattern for loading assets in a way that works for browsers as well as bundlers.

Using the platform by Elise Hein. Working on a codebase with no dependencies has been a way of rediscovering exactly what I get for free in 2021.

Designing & building software

An accessible Introduction to state machines and statecharts by Laura Kalbag, featuring a puppy doing puppy things.

Users Don’t Hate Change. They Hate Our Design Choices. (2018) by Jared Spool. Useful for the next time this meme rears its head in conversation.

The Single-Page-App Morality Play. In the debate between SPA vs. MPAs, an aspect often overlooked is that the problem is management, says Baldur Bjarnason.

Reading, Writing, Publishing

The surprising effectiveness of writing and rewriting, Matt Webb on why getting that first draft out of the way works so well.

Making world-class docs takes effort, says curl creator Daniel Stenberg.

File Systems for Thought by Boris Smus. I'm excited to see a rennaisance in the Tools for Thought space. Hopefully new entrants embrace a more interoperable approach, while still building sustainable businesses. But for now, I have kludged together various pieces that together feel more like a coherent System for Thought, address my specific needs, and allow for interesting experiments in the future.

How New Note-taking Apps Give You Information Management Superpowers by Jorge Arango.

Tools

Color

Okhsv and Okhsl, Two new color spaces for color picking by Björn Ottosson, who has previously released the Oklab color space.

Codemods & semantic search

I wrote an article on using jscodeshift to search for patterns through JavaScript code. Maybe it has influenced my awareness, or the topic happens to be in the zeitgeist, but a couple of related things popped up on my timeline:

tree-grepper by Brian Hicks;
replace-query by Sachin Neravath, which finds jQuery methods and generates vanilla JS alternatives.

Command-line tools for HTML

Two new HTML data extraction tools on my radar: htmlq is like jq, but for HTML, using CSS selectors to extract data from pages. xidel lets you use CSS selectors, XPath 3.0, XQuery 3.0, JSONiq or pattern matching. I've just added them to the list of related tools I collect in the repository for hred, which is my on take on this space.

timefind is a command-line tool by Nathan Manceaux-Panot to find the exact moment that something was added to a website, using the Internet Archive's Wayback Machine.

Smaller & faster

Statoscope is a detailed Webpack bundle analyzer.

SVGOMG, Jake Archibald's online front-end to SVGO, an essential tool for optimizing SVG files, received its first update in a while. For raster images, Squoosh is similarly excellent.

Static sitegen / CMS

I haven't paid close attention so it was news to me, but in December 2020 Kirby 3.5 introduced a block editor. This lightweight CMS may have become just powerful enough to compete with WordPress, and I look forward to trying it on a new project.

Tiptap, the headless editor framework for web artisans, based on ProseMirror.

Wholesome experiments

These physical Golden Ratio Rulers by Brian Suda are simpatico. But then the rulers are used on a tablet! With a digital pen! And it works! (Of course it does, why wouldn't it, but I kind of haven't considered it. I love tiny epiphanies.)

I've tried, at various points in time, to picture the daylight-by-latitude chart in my head and now Dan Bridges has made a lovely Observable notebook for it: Visualizing Seasonal Daylight.

Resources

Design Systems Repo, a frequently updated collection of Design System examples, articles, tools and talks.

A11yAutomation: It can be hard to keep track of the potential accessibility violations in your code. More automation is being created for linting rules and tests — and now there is a single site to track the automation available to developers.

Code Catalog, a collection of code examples from prominent open-source projects, maintained by Anton Emelyanov. Reminds me of the Architecture of Open Source Applications book series.

I can't remember if I was aware of Thoughtwork's Technology Radar before (or whether I'm overlapping O'Reilly Radar onto it), but I enjoy the format. Looking around for familiar tech, I saw sensible commentary, but it's worth taking the advice with a grain of salt: yes, I'm looking at you, micro frontends.

Sources for this edition: CSS Layout News, Joy of Computing, CSS Weekly, Baldur Bjarnason, Matthias Ott, Steve Faulkner, Florens Verschelde, Šime Vidas.