← Back to WatchStarFork

WSF 46

Published

In what is probably the heftiest, most profusely procrastinated edition so far, here are some of the links I’ve been hoarding these past few months.

News

WCAG 2.2, the latest version of the Web Content Accessibility Guidelines specification, has been promoted to a W3C Recommendation. It adds nine new success criteria, which Patrick H. Lauke unpacks in What’s new in WCAG 2.2.

Firefox. The CSS math functions abs, sign, round, mod, rem, pow, sqrt, hypot, log, and exp shipped in Firefox 118. A couple of uses come to mind: the sqrt() function is useful for sizing images based on their aspect ratio, and round() can help with rhythmic sizing and positioning while the dedicated spec is still being developed:

.column {
	width: round(100%, 100px);
}

Firefox 120 brings back media queries for <video> sources. Scott Jehl, who submitted the patch, writes about How to Use Responsive HTML Video (...and Audio!).

With this release, the lh and rlh CSS units became supported across major browser engines. A while back I wrote about some possible uses for line-height units.

Also universally available now that Firefox 121 is released:

Something I wasn’t aware A. is a thing B. needs fixing, Date.parse() now accepts more non-standard date formats — probably to align Firefox with other browsers as an Interop goal?

Chrome. With their addition to Chrome 119, the :user-valid and :user-invalid pseudo-classes — like :valid and :invalid, but useful — are now universally supported.

Also included in the release is the relative color syntax for CSS colors. Like Safari 16.4’s implementation earlier this year, Chrome’s has some rough edges, but seems otherwise comprehensive.

Chrome 120 debuts a mechanism to turn <details> elements into exclusive accordion widgets, by having them share the name attribute, as explained by Open UI. This is also the pattern used for grouping form controls.

Safari 17.2 shares some features with recent versions of Firefox and Chrome, shipping with with exclusive accordions, the relaxed syntax for CSS nesting, the lh and rlh units (along with other font-related units), and CSS math functions.

It’s also the first browser to support the new syntax for import attributes.

Speaking of recent releases, Patrick Brosset has made a handy little reference page for tracking browser versions.

Baseline, whose debut a few months ago was met with some apprehension, has revised its labels with a higher (temporal) bar for web features to be considered „safe to use”. Widgets on MDN now show features as:

Newly available. The feature is marked as interoperable from the day the last core browser implements it. It marks the moment when developers can start getting excited and learning about a feature.

Widely available. The feature is marked as having wider support thirty months or 2.5 years later. It marks the moment when it's safe to start using a feature without explicit cross-browser compatibility knowledge.

Adrian Roselli is quick to point out — given that the accessibility story of some web features is often complicated, and not adequately captured in the data used for assigning these labels — that Baseline Does Not Really Cover Baseline Support.

Servo. Having joined the Linux Foundation Europe earlier this year, the experimental web rendering engine written in Rust is seeing steady progress. This month in Servo: better floats, :has(), color-mix(), and more!.

ActivityPub in WordPress. Although the announcement focuses on WordPress .com, self-hosted WordPress instances can join the fediverse through an official plugin.

Kirby, which has fastly become my CMS of choice for projects that require a visual admin interface, has had a new major release with Kirby 4. Solid stuff.

Articles

Software engineering, math

Jake Lazaroff with a three-article series on conflict-free replicated data types (CRDT): from An Interactive Intro to Building a Collaborative Pixel Art Editor and finally Making CRDTs 98% More Efficient.

How to (and how not to) design REST APIs by Jeff Schnitzer: In my career, I have consumed hundreds of REST APIs and produced dozens. Since I often see the same mistakes repeated in API design, I thought it might be nice to write down a set of best practices.

Why can’t you multiply vectors?, a talk by Freya Holmér at Dutch Game Day 2023.

CSS

An absolute unit. Ashlee M Boyer has been exploring how the choice of CSS units affects the accessibility of web pages and has advice: don’t use fixed CSS height or width on buttons, links, or any other text containers, but you should use px units for margin, padding, & other spacing techniques.

Relatedly, I’ve written on why you should prefer ems for media queries.

Šime Vidas looked at the implementations of the small, large and dynamic viewport units to conclude that New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem.

CSS hacks. Jane Ori discovered that while tan(atan2(…)) is still a bit buggy in browsers, it essentially allows CSS type casting to numeric, useful for many techniques.

Clever use of the none keyword in color components lets color-mix() produce relative colors, as shown by Lea Verou in Emulate basic relative color syntax with color-mix() + the none keyword.

Bramus demonstrates how to leverage the scroll speed and direction in scroll-driven animations. Solved by CSS Scroll-Driven Animations: Style an element based on the active Scroll Direction and Scroll Speed.

The new layout. In CSS Findings From Photoshop Web Version, Ahmad Shadeed explores how the app uses flex and grid layout for its interface, most likely powered by Adobe’s Spectrum design system.

Speaking of grid layout, Josh W. Comeau has published An Interactive Guide to CSS Grid, and Lene Saile has explored the topic of CSS subgrids in About subgrid and colored grid lines and “Inheriting” grid dimensions from siblings with subgrid.

Getting started with CSS container queries, a refresher from Michelle Barker.

Performance

The Three Cs: Concatenate, Compress, Cache by Harry Roberts: In the current landscape, bundling is still a very effective strategy. Larger files compress much more effectively and thus download faster at all connection speeds. Further, queueing, scheduling, and latency work against us in a many-file setup. However, one huge bundle would limit our ability to employ an effective caching strategy, so begin to conservatively split out into bundles that are governed largely by how often they’re likely to change. Avoid resending unchanged bytes.

Speeding up the JavaScript ecosystem: The barrel file debacle is the seventh of a series where Marvin Hagemeister looks at performance bottlenecks in JavaScript projects, this time focusing on barrel files, i.e. files that only export other files. So if you work on a project which uses barrel files extensively, there is a free optimization you can apply that makes many tasks 60-80% faster: Get rid of all barrel files.

Usability, accessibility, interaction design

Having tackled scrolljacking in an earlier article, Sara Ramaswamy now turns in the results of user testing for a related affectation: Scroll Fading 101. The summary concedes that when used right, this design pattern can improve brand perception, optimize page loading, and make content more digestible, but the takeaway is that scroll fading can cause serious usability issues when used incorrectly.

Another word of advice from Nielsen Norman Group in The Negative Impact of Mobile-First Web Design on Desktop: Mobile-first web designs cause significant usability issues when viewed on desktop. Content becomes overly dispersed across long scrolling pages with expansive white space and enlarged images and fonts, making it difficult for users to consume and understand the information.

Minimalist Affordances: Making the right tradeoffs by Lea Verou: A common incarnation of form-over-function, is when designers start identifying signifiers and affordances as noise to be eliminated, sacrificing a great deal of learnability for an — often marginal — improvement in aesthetics.

Still from Lea Verou, Eigensolutions: composability as the antidote to overfit: Overfitting happens when solutions don’t generalize sufficiently and is a hallmark of poor design. Eigensolutions are the opposite: solutions that generalize so much they expose links between seemingly unrelated use cases. Designing eigensolutions takes a mindset shift from linear design to composability.

Pirijan shares Kinopio’s Design Principles.

Julia Evans clarifies some Confusing git terminology: I’ve done my best to explain what’s going on with these terms, but they cover basically every single major feature of git. Sounds about right.

The Road to Accessible Drag and Drop, an in-depth, three-part series by James Edwards on developing an inclusive pattern for moving items between lists (e.g. from one column to another on a Kanban board).

HTML, web platform

Significant markup. The UX of HTML by Vasilis van Gemert: Recently I decided to stop using the word semantics. Instead I talk about the UX of HTML. And all of a sudden my students are not allergic to HTML anymore but really interested.

Invokers is an interesting web platform proposal from Keith Cirkel via Open UI. It’s a way to declare behaviors in HTML directly, by having buttons dispatch events to a target with the invoketarget / invokeaction attributes. The first use cases planned for it are controlling popovers and dialogs, which would act upon the InvokeEvents they receive from buttons without any JavaScript code. In the general case, it could also be used as a basic version of custom events that you can hook up declaratively.

Add to dock. Some experiences with the new web app feature in macOS Sonoma / Safari 17: from Jeremy Keith as a user of Websites in the dock, and from Mark Otto as a creator of macOS web apps.

Over on Windows 11, Aaron Gustafson demonstrates how PWAs can provide cards in the dashboard: Widgets!.

The belly of the beast. Nicole Sullivan digs into source code to explain how different browsers assist users in tapping things: Expanding your touch targets.

A bag of (non-obvious) debugging tricks by Alan Norbauer: 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know.

JavaScript, web components

How do you even web dev without node?, a quick introduction to test-driven web development using just the browser by Baldur Bjarnason, a prelude to his upcoming course called Uncluttered Test-Driven Web Development.

The Temporal proposal, now in Stage 3, aims to solve longstanding shortcomings of JavaScript Date objects. Taro gives the rundown in Temporal API is Awesome.

Let’s learn how modern JavaScript frameworks work by building one, an exercise by Nolan Lawson in building a framework from the post-React era from scratch.

HTML Web components. There has been some recent fervor around a particular flavor of web component, one that works by augmenting its HTML content in the Light DOM. After shifting links around for a solid hour in an effort to fit the many recent posts in a coherent sequence, I’ll just defer to Chris Coyier, who has conveniently already done so in Light-DOM-Only Web Components are Sweet.

In Lovely trees, Brian Kardell acknowledges the seeming mismatch between the trade-offs in the design of Shadow DOM and the things people want it to do, while inviting experimentation for figuring out the middle ground(s).

Thomas Wilburn highlights the advantages of Shadow DOM in Chiaroscuro, or Expressive Trees in Web Components: By combining slots, shadow DOM, and markup patterns, we can embed a language in HTML that produces either abstract data structures, user interface, or both. Without adding any browser plugins, we're able to manipulate this tree just using the dev tools, so we can easily experiment with our application, and it's compatible with our existing editor tooling too.

Type design

Unexpected Baskerville: The Story of LoveFrom Serif (video), a Letterform Lecture with Antonio Cavedoni and Chris Wilson that delves into the process of creating a new interpretation of Baskerville’s letters, exploring surviving punches, printed books, and contemporary writing master’s manuals.

The first sanserif type, a slightly revised and newly illustrated version of Caslon’s Egyptian: the first sanserif type, an article by James Mosley originally published in 1988.

Tools and resources

From Greg Wilson of Architecture of Open Source Applications fame, Sofware Design by Example is out in a Python edition, having been previously written with JavaScript examples.

Whole Earth Index, a nearly-complete archive of Whole Earth publications, a series of journals and magazines descended from the Whole Earth Catalog, published by Stewart Brand and the POINT Foundation between 1970 and 2002.

Michael Wörgötter, a Munich-based designer and educator, has donated a boxed set of over 600 typeface cards to the Letterform Archive. They are available on Flickr, and new photographs for the online archive are to follow. More in This Just In: Schriftenkartei, a Typeface Index.

Monaspace is a superfamily of five monospaced typefaces designed to be mixed and matched to lend different voices to bits of source code. OpenType contextual alternates help it achieve a more uniform color, a feature it calls texture healing. It was produced by Lettermatic for GitHub and released under the OFL license.

Playpen Sans is one of the font families produced by TypeTogether after more than two years of primary research into handwriting education for Latin-based languages. It has seven automatic alternates for each character and a built-in shuffler that both ensures variation and avoids repetitive shapes in close proximity. This feature adds to the overall organic, spontaneous, and authentic feel of the handwritten style. More on Making Playpen Sans.

The latest update to Rasmus Andersson’s Inter typeface packs over two years of work.

Ohno Type School, online type design courses from James Edmondson and Colin M. Ford: Teaching has always been important to us, and Ohno Type School is our attempt to open the doors of our studio and share with students how we approach type design projects. Some, like Essential RoboFont, are available free of charge.

Fantastic advice compiled by Stephen Coles: Typeface Selection Resources.

Automerge-Repo: a ‘batteries-included’ toolkit for building local-first applications. Often, the first thing developers ask after discovering Automerge was how to connect it into an actual application.

is-land Web Component by Zach Leatherman: Islands Architecture (apologies for this oversimplification) is turbo-charged lazy loading. It’s a way to initialize components and resources for sections (islands) of your web site when certain conditions are met: the island becomes visible, the page is idle, the viewport is a certain size, on events (click, mouseover, etc), and respecting user preferences (save data, reduce motion, etc).

A Romanian type specimen from 1894 can be downloaded as a PDF from Europeana, digitized from the collection of the Cluj County Library. This may be the first local type specimen to have been made widely available online.

A mind-melting photo of Rembrandt’s “The Night Watch” which you can zoom into for incredible detail. The ultra-high-resolution composite is the result of Rijksmuseum’s Operation Night Watch. It reminds me of Tacita Dean’s Buon fresco.

A handsome notebook ten years in the making: iA Writer in Paper.