wsf-xxxiv
News
Node 18 gets us new features for which external packages were previously needed: a built-in fetch() function could replace node-fetch, and the node:test module has an API similar to tape. Node 18.3 also debuted the util.parseArgs command-line argument parser, which is being iterated on at pkgjs/parseargs; in the meantime opsh will do.
The ARIA Authoring Practices Guide got an excellent makeover by Bocoup.
A neat little update in Firefox Dev Tools lets you debug scrollable overflow. I used to rely on this JavaScript snippet to identify the elements that cause horizontal overflow:
Array.from(document.querySelectorAll('*')).filter(
el => el.getBoundingClientRect().right > window.innerWidth
);Articles
The good markup
With Subheadings, subtitles, alternative titles and taglines in HTML Steve Faulkner offers a conclusive pattern for the common dilemma, using a heading and adjacent paragraphs, all wrapped in an <hgroup>. Still on the topic, Patrick H. Lauke demonstrates a small hack for making VoiceOver play nice with headings made up of several <span> elements.
Write HTML, the HTML Way (Not the XHTML Way), says Jens Oliver Meiert. I still can't omit closing tags without a pang of guilt, but admittedly these tips make writing HTML much less annoying.
Accessible Cards, Kitty Giraudel's take on whole-area tappable cards, with useful links to prior efforts.
CSS
Aspect Ratio is Great: Michelle Barker outlines a few real-life scenarios where the aspect-ratio CSS property is handy.
The :has() CSS selector opens up a whole world of possibilities, and it feels we're still barely scratching the surface. Matthias Ott explores a few of them in CSS :has() A Parent Selector Now.
With the inclusion of wide color gamuts in CSS Color 4, Chris Lilley (one of the specification's editors) takes the opportunity to explain what color gamuts are. Chris and Lea Verou (who co-edits the spec) have also recently cut the initial release of their library Color.js.
All the user-facing states, a useful reference maintained by Eric Bailey.
Web Components
For web components to be resilient to JavaScript issues, they generally need to wrap or extend standard HTML elements. Paul Hebert writes about this in Web Components as Progressive Enhancement. Although extending built-in elements is still not supported in Safari, a tiny polyfill is available.
The ElementInternals API will make it easier to have custom elements participate in forms like standard form elements. Maggie Wachs explores what to do in the meantime in Building forms with custom elements.
David Darnes has written an in-depth guide to Building tabs in Web Components.
Why I don't miss React: a story about using the platform is Jack Franklin's experience moving from a React-heavy gig to the Web Components-enthused Chrome Dev Tools.
JavaScript
Not to say it's an outright mystery how users manage to work with npm-based tools on Windows outside of WSL, but in my own command-line tools it has been a niche concern, of the follow Node conventions and hope it works kind. Axel Rauschmayer's deep-dive on Working with file system paths on Node.js is going to come in handy the next time I have to understand some of the cross-platform gotchas.
In Reactive Data With Modern JavaScript, Alex Russell shows a succinct way to use EventTarget and JavaScript Proxies to have UIs react to data changes.
Adrian Cooney shares a brilliant technique for scraping <div> soups: just grab the data from the browser's memory! Read about the principle, and the dedicated CLI tool, in Web Scraping via JavaScript Runtime Heap Snapshots. For websites that are not hostile to scraping, there's always hred.
Performance
Nolan Lawson has been writing about SPAs (single-page applications) and how they stack up against MPAs (multiple-plage applications). The latest installment, SPAs: theory versus practice, proposes that the core of the debate can be summed up by these truisms: 1. The best SPA is better than the best MPA. 2. The average SPA is worse than the average MPA.
Relatedly: Making the world’s fastest website, and other mistakes, a five-part tour de force / emotional rollercoaster by Taylor Hunt.
In Reflections on software performance, Nelson Elhage has come to believe that the “performance last” model will rarely, if ever, produce truly fast software (and, as discussed above, I believe truly-fast software is a worthwhile target)
, and goes on to explain why that's the case.
When optimizing web fonts, I've always thought the term subsetting risks giving off the wrong idea and that something like splitting would be clearer. Browsers are smart enough that there isn't a good reason to not make available all the glyphs in a font to text that needs it. Paul Hebert outlines two common techniques in Font subsetting strategies: content-based vs. alphabetical but favors splitting the font into alphabets. Richard Rutter shows how to install and use fonttools for the purpose in How to subset a variable font.
Making things
Building data-centric apps with a reactive relational database by Nicholas Schiefer, Geoffrey Litt, Johannes Schickling, and Daniel Jackson: We’re exploring a new way to manage data in apps by storing all app state — including the state of the UI — in a single reactive database. Instead of imperatively fetching data from the database, the user writes reactive queries that update with fresh results whenever their dependencies change.
Still on the research front, I'll be chewing on this Ink & Switch essay for a while: Crosscut: Drawing Dynamic Models.
Shuvomoy Das Gupta has sourced some nuggets from various interviews with the computer scientist in Donald Knuth on work habits, problem solving, and happiness.
Robin Sloan proposes Spring '83, a protocol based on little HTML + CSS vignettes (no images, no JavaScript).
Wouter Groeneveld catalogs all the Cool Things People Do With Their Blogs.
In causal news, concerted efforts towards de-emphasizing the concept of files and the filesystem has made kids-these-days oblivious to their existence. Scott Jenson builds the case for files in The future needs files, and the follow-up The present needs files.
Make games with Derek Yu, maker of Spelunky.
Tools
Facebook's Lexical is a fresh attempt to tackle the hellhole that is extensible rich-text editing on the web. The company's previous framework called Draft has been shelved in the process.
Untrusted .svg files are safe to serve in HTML <img> elements, but they can be unsafe to access directly. Currently an early release, svg-hush aims to make arbitrary SVG files as benign and safe to serve as images in other common Web file formats
.
tilg (tiny logger) by Shu Ding is the spiritual successor to why-did-you-update for debugging React components.
flat-drop-files by Tom MacWright makes working with dragged-n-dropped or pasted files easier by flattening nested folder structures, omitting junk files, and more.
Today I Learned
Change the tab width in GitHub: I didn't know there's a preference in GitHub that controls how much space tab characters take — basically the tab-size CSS property. As we use tabs troughout our codebases, having them narrower makes reviewing PRs much better (h/t James Coyle).
Media
A browser game. Wikitrivia has you arranging historical events on a timeline. The data is fetched from Wikimedia APIs, so the events are delightfully all over the place.
A documentary. The upcoming Graphic Means explores graphic design production of the 1950s through the 1990s — from linecaster to photocomposition, and from paste-up to PDF.
A couple of fun interactive maps. How far can you go by train in 5h? by Benjamin Td shows you how far you can travel from each station in Europe in less than 5 hours
. Notable people by Topi Tjukanov shows the most famous person born in any place around the globe.
Heavy rotation: Constant Smiles — Paragons