wsf-xxxviii

Published Jan 27, 2023

News

Chrome 109 ships with support for MathML! Yes, that MathML, the XML-based language to describe math. It took about 25 years to get it done, says Brian Kardell, but hey, we did it. See Igalia's announcement for more details.

Also included in the release is some good news for variable fonts: the font-weight, font-style and font-stretch descriptors get a new auto default value, which reads the appropriate axis range from the font's data. That means you can safely omit these from your @font-face declaration without causing the browser to do the weird font synthesis of which I learned the hard way.

A small but neat addition: the lh CSS unit (short for line-height), which has some interesting properties. Still in niche typographic features, Chrome 110 (now in beta) will support the initial-letter property that replaces the decades-old float:left approach for drop-cap effects. I reckon their release in quick succession means initial-letter uses lh math under Chromium's hood.

Firefox 109 introduces support for the scrollend event, a handy counterpart to the scroll event that replaces unreliable timer-based hacks. The event is also coming in Chrome 111.

Firefox also joins Chrome in supporting the content-visibility property that improves performance by not painting elements that are not relevant to the user.

WebKit's new SVG engine is shaping up nicely. It promises to make rendering snappier, while unifying many aspects with HTML/CSS and unlocking new possibilities, such as z-index for SVG elements.

MDN has added a section that tracks updates in browser support for web platform features, a kind of Can I Use as an RSS feed.

The HTML spec for the <dialog> element was recently expanded to address concerns around initial focus. These updates may tip the scale away from custom solutions, as Scott O'Hara observes in Use the dialog element (reasonably).

Eleventy 2.0 is now in beta. Stephanie Eckles helpfully goes over new features and upgrade considerations, and Lene Saile explains how to use the new i18n plugin for internationalization with Eleventy 2.0 and Netlify. Upgrading this website to the beta seems to have been seamless, but do let me know if you spot anything funky.

Articles

HTML, CSS

Conditional CSS, in which Ahmad Shadeed delineates a set of CSS features that react to variations in state or browsing circumstances.

Data-informed flex-grow for illustration purposes, Hidde de Vries on using CSS flex items to draw books on a bookshelf depending on their page count.

Level Up Your CSS Skills With The :has() Selector, some advanced techniques by Stephanie Eckles.

Robin Rendle observes how container queries make typography no longer a series of cool hacks and instead now a fully fledged citizen in the browser as of 2023.

Three attributes for better web forms by Jeremy Keith: Forms on the web are an opportunity to make big improvements to the user experience with very little effort. The effort can be as little as sprinkling in a smattering of humble HTML attributes. But the result can be a turbo-charged experience for the user, allowing them to sail through their task.

A responsive table with fixed column and row headers and scroll snap, all done with plain old HTML table markup and a sprinkle of newer CSS by Scott Jehl.

Steve Faulkner summarizes real-life Screen Readers support for text level HTML semantics, or how assistive technology responds to the usage of  vs. ,  vs. , , <ins>, <del>, and .

The GOV.UK Design System team have documented their accessibility strategy, about which you can learn more in the introductory post.

A Guide to Understanding What Makes a Typeface Accessible by Gareth Ford Williams. See also: Don’t Believe The Type!.

JavaScript, DOM

Jake Archibald illustrates the gotcha of unhandled promise rejections, which is kind of baking my noodle at this moment in time, but sounds fun to think through.

(Almost) everything about storing data on the web, a summary by Patrick Brosset.

Browsers

Watch Nolan Lawson's deeply researched talk on CSS runtime performance: my main goal was to shine a light on all the heroic work that browser vendors have done over the years to make CSS so performant. Coincidentally, Edge 109 has shipped a Selector Stats section in its DevTools, which Patrick Brosset uses to optimize some expensive CSS selectors.

For your next side project, make a browser extension, Geoffrey Litt on expanding Twitter's functionality with a browser add-on, and on the effort you save by going that route.

In The Safari bug that never was, Oliver Byford tells the story of reporting that Text wraps unnecessarily within intrinsically-sized elements when using certain fonts and the inner HTML of the element contains a new line that is not preceded by a space [WebKit#232939].

Making things

How To Make a Website by Henry Desroches: Write meaningful HTML that communicates the structure of your document before any style or additional interactivity has loaded. Write CSS carefully, reason your methodology and stick to it, and feel empowered to skip frameworks. When it comes time to write JavaScript, write not too much, make sure you know what it all does, and above all, make sure the website works without it.

Front-end is so much more than building designs, in which Andy Bell responds to the hypothetical scenario: a high-fidelity design is plopped on my desk and I’m asked to build it.

Wordle enthused lots of people about word games — and even about maybe inventing one. How hard could it be?, asks The Guardian's David Shariatmadari (via Clive Thompson). The result is Wordiply. Jer Thorp has also made one called Tumbleword.

For a comprehensive list of English words to power your creation, look no further than lorenbrichter/Words, originally compiled for Atebits' Letterpress game.

Speaking of brilliant word games, Codenames has been a hit with basically all friends and family whom I've witnessed play it. Apparently, there's also a free web version with cards in all languages in which the game has been published — a very wholesome move from the creators.

David Aerne, prolific author of color-adjacent tools, gives us a tour of his work in Color — My Journey Through the Spectrum.

Nolan Lawson on retiring Pinafore, a stellar Mastodon web client, after five years: I don’t have the energy to do this anymore. Pinafore has gone from being a fun side project to being a source of dread for me. There is a constant stream of bug reports, feature requests, and pull requests to manage, and I just don’t want to spend my free time doing this anymore. What follows are interesting notes on the impact of tech choices, pockets of unexpected complexity, and lessons learned.

Tools and Resources

Nicholas Rougeux has released a new project: a digital version of Andrea Palladio's seminal sixteenth-century treatise The Four Books of Architecture. As we've come to expect, the project is accompanied by an insightful write-up.

Visual Programming Codex by Ivan Reese: Despite the GUI going mainstream in the 80s, the programming community has largely opted to remain in the era of the terminal. Yet there have always been magnificent visual programming projects at the periphery. This repo exists to shine a light on these alternatives, see what costs and benefits they offer, and reflect on the work of people pushing for a future where programming leverages more of our senses and modalities.

Python for designers, a stylish introduction to creative coding with Python 3 and DrawBot by Roberto Arista.

Lightning-Fast Web Performance, an online course from Scott Jehl that teaches you to analyze site performance, fix issues, monitor for regressions, and deliver fast, responsive designs from the start.

The Book Cover Review by David Pearson, 500-word* reviews of beloved book covers – both new and old – from a range of voices around the world.

Details in typeface licensing. Miles Newlyn points out two widespread misconceptions about the Adobe Fonts license that lose foundries money: (A) that it's okay to host the webfonts yourself, and (B) that you can use your subscription to serve webfonts for clients' websites. Relatedly, Jeff Frankl summarizes foundries' stances toward the subsetting of their webfonts.

Over in OFL-licensed typefaces, I was curious if anyone had fixed the quirky q glyph in Karla, and was happy to find Karmilla addresses it, along with other refinements.

typst/svg2pdf is a Rust crate and CLI tool that converts SVGs to PDF without rasterizing them.

How Fugu is my browser? by Thomas Steiner checks how many native-like web APIs your current browser supports.

Today I Learned

The :has() CSS pseudo-class has been recently changed to be unforgiving, as reported by Geoff Graham, which is to say its argument works like a normal selector list, becoming invalid altogether when any of the selectors in the list is invalid. On the other hand, the :is() and :where() pseudo-classes remain forgiving.

/* invalid */
button, ::buttonlike { … }
form:has(button, ::buttonlike) { … }

/* valid */
:where(button, ::buttonlike) { … }
:is(button, ::buttonlike) { … }

Soundtrack: Fever Ray — Kandy, old-school The Knife vibes.