wsf-xxxvii
News
WordPress is getting support for SQLite, which promises to make small websites faster and less resource-intensive, as well as more portable and easier to back up. Relatedly, WordPress Playground lets you experience a WordPress that runs entirely in your browser
, a not entirely clear but nonetheless intriguing proposition (via Geoff Graham).
Articles
Weathering Software Winter by Hundred Rabbits, the transcript of a talk given by Devine Lu Linvega at Handmade Seattle 2022 on software simplicity, personal computing, and digital preservation.
The Performance Inequality Gap, 2023 by Alex Russell. How did this happen? Well, per the new usual, overly optimistic assumptions about the state of the world accreted until folks at the margins were excluded.
A reminder from Rachel Andrew to stop treating all of your content as if it were news. The tension between time-bound vs. evergreen content is something with which I've also struggled when organizing this website not least because, even if RSS feeds can be whatever, they are still time-oriented.
Stephanie Eckles' 12 days of web gathers some great deep-dives into HTML, CSS, and DOM topics from an array of contributors.
When it comes a sticky element, at least two things can happen: either it obscures important content underneath, or you find random elements (which, by virtue of some style declaration, have become stacking contexts) casually floating along on top of it as you scroll. James Edwards offers a JavaScript-based solution for the former case in: Prevent focused elements from being obscured by sticky headers. (See also Firefox#1591940)
Responsive CSS that responds to the wrong thing can cause elements to behave the opposite of what's expected when the user zooms in and out of the page. One such example is fluid typography tied to the viewport width, whose issues Adrian Roselli has helpfully documented. Sensible advice: If you are going to use responsive typography techniques anyway, you must test it by zooming. Zoom across devices, across browsers, across viewport sizes (not everyone surfs full-screen), and across viewport orientations
(via Ruslan Yevych).
A CSS challenge: skewed highlight by Vadim Makeev, using the box-decoration-break CSS property.
Pixel Accurate Atkinson Dithering for Images in HTML, Andrew Stephens on making <as-dithered-image>, a custom element for responsive images dithered on the fly. Probably not something I would deploy in production, but deeply satisfying to look at.
Draw SVG rope using JavaScript, an interactive article by Stanko Tadić.
Riley Cran on Lettermatic's meticulous type design for the game Pentiment, which hopefully gets released for more platforms because it looks like totally my kind of thing.
Unbundling tools for thought by Fernando Borretti: everything I can do with a personal wiki I can do better with a specialized app, and the few remaining use cases are useless. Let’s break it down.
Max Kohler on implementing Add-to-calendar links, a simple, HTML-only way to enhance event websites
. Relatedly, you make passes for your iOS Wallet with the .pkpass format.
Making some sort of ambient thing with e-ink is one of my most unwavering someday projects. Until I get to it, here's another entry in the reference folder: Building an e-ink weather display for our home by Kimmo Brunfeldt.
Tools and Resources
Building Hypermedia Systems, a simpler approach to building applications on the Web and beyond with htmx and HyperView
by Carson Gross, Adam Stepinski, and Deniz Akşimşek.
HTML with Superpowers, a new introduction to Web Components by Dave Rupert that supplements his 4-hour video course.
New patterns for amazing apps, code snippets by Thomas Steiner for working with recent native-like Web APIs.
Marc Edwards now has a YouTube channel with video versions of his Adobe Illustrator icon speedrun articles.
Jean-Paul Delahaye's Dessins géométriques et artistiques avec votre micro-ordinateur (1985), recoded in p5.js by Julien Gachadoat.
Hyperpaper Planner is a fully interlinked dayplanner designed for tablet devices, contained in a single PDF file
. Such an ingenious idea.
Today I Learned
A robust JavaScript method for splitting text into characters (more specifically grapheme clusters or user-perceived characters), words and sentences with the Intl.Segmenter interface (via Stefan Judis). Basic usage:
const segmenter = new Intl.Segmenter('en', { granularity: 'word' });
const segments = segmenter.segment('Hello World!');
[...segments].map(item => item.segment);
// => ["Hello", " ", "World", "!"]Pretty cool for text analysis. And when granularity: "word", each segment comes with an isWordLike boolean to distinguish between actual words and spaces or punctuation.
For the curious: General rules for breaking up text into significant units are defined in Unicode Standard Annex 29, and for breaking text into lines in Annex 14. Language-specific tailorings are provided by the Unicode Common Locale Data Repository Project.
Getting answers out of browser console snippets. For quick-and-dirty text analysis, Intl.Segmenter simplified a couple of snippets I had written for running in the browser console to extract unique words out of books and to count their frequency.
As a way to communicate the result back to the user, console.log() can sometimes be unwieldy. Instead I use the copy() function to put the answer into the clipboard. The obvious downside is that, unless you run it off a bookmarklet, the snippet gets overwritten each time it gets run. I wondered if there's a nicer (but still succinct) way. How about putting the result on a separate webpage?
URL.createObjectURL(
new Blob(
['Știri din țară'],
{ type: 'text/plain'}
)
);
// => blob:https://danburzo.ro/d9dafec6-d590-4c89-8473-b12413888949Close! But this blob: URL is only clickable in Chrome, so in Firefox and Safari you're stuck with either copying the URL to the clipboard (thus negating most of the benefit over copy()) or, with some dexterity, selecting the text and drag-and-dropping it onto the New Tab icon.
More important than ergonomics is what happens when you open the URL of a blob adorned with diacritics:
Știri din țară
Oops! The default character encoding for the text/plain MIME type is actually US-ASCII, so the correct snippet is the one below. Note that Safari 16.2 currently ignores the charset, but it's thankfully fixed in Safari Technology Preview, so it won't matter soon. (Update: it has been fixed in Safari 16.3.)
URL.createObjectURL(
new Blob(
['Știri din țară'],
{ type: 'text/plain;charset=utf8'}
)
);WSF year in review: This year I managed just four issues, fewer than 2021 (ten) but much better than 2020 (zero).
Soundtrack: I must have played this wonderful vocal version of Roger Eno's Bells, featuring Cecily and Lotti Eno, for at least a few dozen times.