WSF 45
I was caught up with IRL things these past couple of months, so today’s edition packs almost a hundred links… oops!
News
Firefox. I was surprised to find among the Firefox 115 release notes some movement around editing, a powerful yet slow-progressing web platform feature that’s still rife with underdocumented behavior:
The builtin editor now behaves similarly to other browsers with
contenteditableanddesignModewhen splitting a node, e.g. typing Enter to split a paragraph, and also when joining two nodes, e.g. typing Backspace at the start of a paragraph to join the paragraph and the previous one. When a node is split, the builtin editor creates a new node after the original one instead of before, i.e. creates the right node instead of the left node. Similarly, when two nodes are joined, the builtin editor deletes the latter node and moves its children to the end of the preceding node instead of deleting the former node and moving its child to the start of the following node.
Why now? Well, it seems that a few editing issues of particular interest have been included in Interop 2023, which is such great news. I’ll take literally anything that can help bring about more robust rich-text editors to the web. The Mozilla#1819551 meta-issue tracks Firefox’s work towards cross-browser compatibility.
In JavaScript, methods to change arrays by copy provide the missing pieces for a complete non-mutating array API. With Firefox 115, these now have universal browser support.
Firefox 116 fixes the ability to paste files copied from the operating system onto web pages. It only works for one file at a time [Mozilla#1389964], but it’s a solid start.
Firefox 117 brings CSS Nesting, closing the gap on universal browser support for this syntax. It’s also the first browser to feature the relaxed syntax that allows nested selector lists to start with a type selector. Previously the spec required the & selector in front, to disambiguate the type selector from a property name, but the CSS parsing algorithm was adjusted to get rid of the limitation.
Chrome. A first batch of Scroll-driven Animation features landed in Chrome 115. I’ve linked to early explorations from the Canary era of these APIs. More recently, Michelle Barker has built a set of fun demos for the MDN blog in Scroll progress animations in CSS, Dave Rupert has implemented scroll shadows with animation-timeline, and Ryan Mulligan has written about Starting Exploration of Scroll-driven Animations in CSS.
Further animation helpers were enrolled in Chrome 116 and Chrome 117: the display property and elements’ entry and exit from the DOM can now be properly transitioned and keyframed, as summarized by Una Kravets and Joey Arhar in Four new CSS features for smooth entry and exit animations.
Safari 17, whose features I looked at when the beta was announced, was made widely available as part of the iOS 17 release, with macOS to follow in a few days. Here are the WebKit release notes from Jen Simmons & team.
WordPress has turned twenty this year. WordPress 6.3 Lionel is the culmination of years of work from hundreds of contributors, bringing a more powerful and cohesive editing experience for crafting websites with blocks
. Its standout feature is the realization of Full-Site Editing, where all aspects of the website can be tweaked visually. It’s relieving to learn from Matt Mullenweg’s talk on what’s next for Gutenberg that core support for multilingual websites is among the priorities. Still no mention of custom fields, though.
Usability, accessibility
With scroll-driven animations getting native APIs, some research on their usability seems timely. Nielsen Norman Group’s Scrolljacking 101 concludes:
Altering the normal pace or direction of scrolling can contradict user expectations, control, and freedom. If businesses adopt the pattern, they can minimize usability risks by weighing it against functional value, cognitive load, and user efficiency.
Still from NNG, another reminder that you are not your users. They found that across 33 rich countries, only 5% of the population has high computer-related abilities, and only a third of people can complete medium-complexity tasks.
The Distribution of Users’ Computer Skills: Worse Than You Think.
Take, for example, The invisible problem described by Scott Jenson: Text editing on mobile isn’t ok. It’s actually much worse than you think, an invisible problem no one appreciates.
Adrian Roselli demonstrates a pattern for a Progressively Enhanced HTML Accordion based on a set of <details> elements with JavaScript to ensure at most one is open at any time. Exclusive accordions are an active area of exploration for Open UI.
Adrian also explains Where to Put Focus When Deleting a Thing: TL;DR: When deleting something you should generally move focus to the prior equivalent control or its grouping container.
Joel Holmberg: You’ve all seen them, tiny switches that let you toggle a setting. And maybe, just like me, you sometimes pause, thinking …Is it on or off? That’s because toggles suck!
.
Gerardo Rodriguez has written a four-part series on all that goes into building progressively-enhanced form validation. Here’s the first part, with the others linked at the end of the article.
GIF on the web are on their way out, slowly being replaced by better technology. Tyler Sticka shows how to use <video> to build Accessible Animated GIF Alternatives.
Another thing I’d like to give the boot to are my outdated, XHTML-era, markup habits. Jake Archibald makes a compelling case against self-closing tags in HTML.
CSS
The search for idiomatic patterns for sidenotes continues. Eric A. Meyer shows how to turn endnotes into sidenotes with anchor positioning in Nuclear Anchored Sidenotes. The bit of CSS to prevent the anchored notes from overlapping is especially ingenious.
Can We Query the Root Container? by Miriam Suzanne: I spoke about Container Queries at both Smashing Conference (San Francisco) and CSS Day (Amsterdam) – where I recommended setting up a root container to replace most media queries. Since then, Temani Afif pointed out a few issues with that approach, and sent me down a rabbit hole of overlapping specs and browser bugs.
Ahmad Shadeed explores the intricacies of the virtual keyboard API for making sure web content plays nice with the onscreen keyboard on mobile.
Andy Bell has refined A (more) Modern CSS Reset, a succinct set of default style fixes. It motivated me to write down my own snippet.
JavaScript
Things you forgot (or never knew) because of React, Josh Collinsworth on what makes React legacy software: While React undoubtedly helped to proliferate these ideas, it would be silly to consider React the ideal implementation of them. Great things are created through iteration, and for the most part, other choices in the frontend space that came later have the distinct advantage of iterating on top of the core ideas of React.
Use web components for what they’re good at by Nolan Lawson: I think web components have strengths and weaknesses, and you have to understand the tradeoffs before deciding when to use them. So let’s explore some cases where web components really shine, before moving on to where they might fall flat.
Manuel Matuzović outlines the Pros and cons of using Shadow DOM and style encapsulation: I understand that most of the cons described in this post are not critical issues, and there are ways to work around them. The thing is, it's just a lot of stuff we have to consider, and we could avoid that by simply not using Shadow DOM
. Manuel has also documented the accessibility aspects as questions and answers in Web Components Accessibility FAQ.
Enhance vs. Lit vs. WebC or, How to Server-Render a Web Component by Jared White: Let's take a look at how to spin up a simple Node server and use custom elements as templates in three popular formats, and what this means for the future of web components.
Lessons From Linguistics, a guide to internationalization for front-end developers by Lucas Huang. Throughout this post, we’ll look at various ways that English grammar can be internalized in code, leading to errors in translation, and at the end I’ll provide some development best practices to help you avoid these common pitfalls.
Marc Grabanski with a whilwind tour of Patterns for Reactivity with Modern Vanilla JavaScript, from pubsub to signals.
Security
Images, both the raster and the vector kind, have been implicated in recent vulnerabilities. CVE-2023-38633, affecting the librsvg SVG processing library, is detailed by Zac Sims: When URL parsers disagree.
CVE-2023-4863, a vulnerability in the libwebp package for rendering WebP images, has wider-reaching consequences, as explained by Alex Ivanovs in Critical WebP bug: many apps, not just browsers, under threat. I’ve updated macOS, web browsers, and any installed Electron-based applications, which I looked for with:
find /Applications -iname "Electron Framework.framework"Despite the paucity of technical detail in the CVE disclosures, Ben Hawkes has produced a technical analysis and trigger for the overflow error that produces the vulnerability, explained in The WebP 0day.
In other despiriting news: Want to pwn a satellite? Turns out it's surprisingly easy, reports Iain Thomson for The Register.
Performance
A reminder by Jacob Groß: Breaking Up with SVG-in-JS in 2023 (via AR). With the many ways to package and style SVGs available these days, bundling it as JSX is an avoidable performance penalty. My favorite technique is using CSS custom properties, as explained by Florens Verschelde: Using CSS variables in SVG icons.
View Transitions Break Incremental Rendering, warns Eric Portis. Not the feature itself, but the folks prototyping cross-document View Transitions in Chrome are solving this fundamental problem by building and extending features which delay the first paint until the page is ready to transition.
Core Web Vitals for Search Engine Optimisation: What Do We Need to Know? by Harry Roberts: Google’s Core Web Vitals initiative was launched in May of 2020 and, since then, its role in Search has morphed and evolved as roll-outs have been made and feedback has been received. However, to this day, messaging from Google can seem somewhat unclear and, in places, even contradictory. In this post, I am going to distil everything that you actually need to know using fully referenced and cited Google sources.
Typography
Originality in Type Design by Peter Biľak: The article was triggered by the discussions with the late Gerard Unger about the nature of originality in the type design industry, highlighting the importance of historical continuity in creating new works while examining the notions of originality and the boundaries between interpretation and plagiarism.
Leah Spencer on her work on Type Revival for Film & TV: The range of items we create is incredibly broad, and the cool thing about that is it reframes graphic design from an exclusive, professional pursuit into a universal human activity. If everything is design, everyone is a designer. So instead of creating as ‘Leah Spencer, graphic designer,’ I have to create as a shopkeeper, as a sign painter, as a college student, as an accountant, and so on.
There does not exist an official manual for the Riso printer. To fully understand this machine, you’ve got to get your hands dirty and try.
A Riso-printing primer by Marte Verhaegen.
Making software
Retrofitting the Web is an initiative by Dorian Taylor to build an engine that infuses ideas from hypermedia systems back into the web:
Repairing a medium. Hypermedia has been an object of both theory and practice for decades preceding the Web—and even before computers. The Web—now ubiquitous—traded off a lot of really powerful ideas in return for not only easy implementation and deployment but also easy (instantaneous, global) publishing, plus one key capability the others categorically lacked: links that cross both system and organizational boundaries. But, there is nothing in principle preventing those powerful ideas from earlier hypermedia systems—real and imagined—from being grafted back onto the Web. It just needs a clear vision and a little elbow grease.
One of the three points of departure
from the project’s Motivation and rationale.
The reference implementation is called Intertwingler, and you can learn more from Dorian’s presentation (30m video).
Tinkering. I’ve always wanted to make Apple Wallet passes for the various pieces of plastic I have to carry around, and iliana etaoin describes just that in Getting my library cards onto my phone the hard way.
Harley Turan does interesting things with image metadata in Exploring EXIF by putting it in a database, building on top of an earlier exploration by master tinkerer Simon Willison.
Wikipedia search-by-vibes by Lee Butterman is a browser-based search engine for Wikipedia, where you can search for ‘the reddish tall trees on the san francisco coast’ and find results like ‘Sequoia sempervirens’ (a name of a redwood tree). The browser downloads the database, and search happens offline.
New on MDN: This intro-level tutorial walks thru all the steps of building a basic progressive web app, or PWA. We will be using web technologies — HTML, CSS, and JavaScript — to build a period tracking web app called CycleTracker
. Estelle Weyl explains: If you are going to work thru a tutorial, you might as well work through one that is useful.
Boring tech. Timo Tijhof describes An Internet of PHP: PHP is big. The trolls can proclaim its all-but-certain ‘death’ until the cows come home, but no amount of heckling changes that the Internet runs on PHP. The evidence is overwhelming. What follows is a loosely organised collection of precisely that evidence.
An underrated feature of WordPress and other old-school CMSes is they tend to have RSS on by default, and the feeds are often available even when the front-end fails to advertise them. Happy to see some of the tactics that have worked for me in the past listed in RSS for Post-Twitter News and Web Monitoring.
Oh, and although it feels vaguely furtive — like someone has just forgotten to pull the plug on it — you can absolutely still subscribe to YouTube channels via RSS.
New tech. Riccardo Mazzarini on the theoretical background, and implementation details of cola: a text CRDT for real-time collaborative editing written in Rust.
Relatedly, Some notes on Local-First Development by Kyle Mathews.
New Bézier curves for vector graphics, an exploration by Kevin Yin: This article is about how math creates an easier-to-use version of Béziers. We'll show examples of issues with Béziers, then discuss the issues academically, then derive a curve that fixes the problems (and can draw circles!).
Tools and resources
Bricolage Grotesque by Mathieu Triay is a free and open source variable font with French attitude and British mannerisms across 3 axes: weight, width & optical size
.
Gabarito is a light-hearted geometric sans typeface
initially designed in 2017 by Leandro Assis and Álvaro Franca for an online learning platform in Brazil, and released this year under an OFL license. Owing to its original function, Gabarito features things like Logic and Set Theory symbols, scientific inferiors and superiors, extensive math operators, roman numerals and anything else a high-schooler may need for their homework.
A Toolkit for Learning Type History by the Letterform Archive: Curated sets of objects in the Online Archive tell a visual story of typographic design, starting with the Western world.
Primarium is a groundbreaking educational effort by TypeTogether to document different models of handwriting that are taught to primary school students around the world
(previously).
Articles from four of the nine issues of Typography papers, a publication developed by Paul Stiff at the Department of Typography & Graphic Communication at the University of Reading, are now available as PDFs, with more expected in the future.
From Ralf Herrmann, The Letter Library is a community website with the goal to create a catalog of all type specimens published by type foundries—printed or digital, past or present
.
arrowtype/spacing, a collection of resources & recommendations that are helpful for spacing
fonts by Stephen Nixon of ArrowType.
Playbook for universal design, a resource providing easy access to planning and facilitating universal design development work, whether it is short workshops or longer work sessions
.
Mat Marquis’ JavaScript for Web Designers, originally published by A Book Apart in 2016, is available as a free read.
Overture Maps Foundation released its first world-wide open map dataset, including places, buildings, transportation, and administrative boundaries (via Simon Willison).
The ideal viewport doesn’t exist, a visualization by Set Studio. Before you settle on basing design decisions on a handful of strict breakpoints, make sure you consider the vast fragmentation of screen sizes and browser viewports.
A Venn diagram of date and time formats, according to RFC 3339 vs. ISO 8601 vs. HTML.
Giles Turnbull has a Shoebox on his website. This is my digital shoebox: a bit of website for the odds-and-ends. I put things here so that I can delete them from other places.
What a nice idea, might do something similar.
Today I learned
Disallow ChatGPT from crawling your website with these additions to your robots.txt file:
User-agent: GPTBot
Disallow: /
User-agent: ChatGPT-User
Disallow: /
Soundtrack for each month:
- July: Sigur Rós — ÁTTA
- August: Gregory Alan Isakov — Appaloosa Bones
- September: The National — Laugh Track. Honorable mention: Oneohtrix Point Never’s phenomenal track A Barely Lit Path.
Rest in peace Molly E. Holzschlag (1963–2023), author, educator and web standards OG.