WSF 44

Published Jul 2, 2023

News

Safari 17 will support Progressive Web Apps on the Mac, complete with Web Push and Badging, as presented by Rachel Ginsberg in the What’s new in web apps WWDC23 video. Thomas Steiner has documented the experience of installing and using Web Apps on macOS Sonoma 14 Beta.

For more details, check out the announcement post News from WWDC23: WebKit Features in Safari 17 beta. I’ve cherry-picked some features below.

This version ships improvements to the font-size-adjust property which harmonizes the metrics of different fonts. The two-value syntax and the from-font keyword are now supported, along with the related @font-face/size-adjust descriptor.

JavaScript Set objects get new methods for performing set operations, such as union(), intersection(), and difference(). And URLs can now be validated without throwing with URL.canParse().

More significantly, Safari 17 adds support for the popover attribute, which opens an element above all other elements in the so-called “top layer”.

Chrome 114 has also shipped the popover API, the first stable browser to do so.

Una Kravets gives the rundown in Introducing the popover API. Hidde de Vries explains how to assign the proper ARIA roles to popover elements in Semantics and the popover attribute: what to use when?.

Web API removals. Mutation events have been deprecated for a good while, but they will be removed altogether from Chrome in July 2024, so now is a good time to update or replace any code that still uses them. On a shorter timeframe: Migrate away from data URLs in SVG <use> element.

MDN has introduced a code playground, which is pretty much what you expect it to be — a simple way to preview HTML, CSS, and JavaScript.

Articles

CSS, new frontiers in

Modern methods. Get up to speed with Modern CSS For Dynamic Component-Based Architecture by Stephanie Eckles, based on her talk at CSS Day 2023, as well as with Chris Coyier’s whirlwind tour of Modern CSS in Real Life.

Roman Komarov expands on the space toggle hack by taking advantage of the fact that custom properties that depend on each other become invalid: Cyclic Dependency Space Toggles.

Future animation. Complex movement that used to be the preserve of JavaScript can now be approximated in CSS with the linear() easing function, as explained by Ollie Williams in Using linear() for better animation. The feature has been recently released in Chrome and Firefox, and has positive signals from Safari.

Another nice addition to CSS Transitions is the @starting-style declaration that defines the element’s initial styles the moment it’s added to the DOM [CSSWG#8174]. You can produce a CSS-only insert effect, as demonstrated by Bramus in The Yellow Fade Technique with Modern CSS using @starting-style. The feature has been prototyped in Chrome Canary 115 behind the Experimental Web Platform Features flag.

Then there’s a piece of JavaScript code I’ve been ardently looking forward to deleting in favor of a CSS alternative: Scroll-driven animations promise to offer a simple, declarative way to bind an animation’s timeline to the scroll position of a container via the animation-timeline property. Bramus has created a gallery of demos, complemented by an explainer.

In Future CSS: Wishes Granted by Scroll-driven Animations, Roman Komarov explores a few possible use cases, including an easier way to detect the stuck state of sticky elements. In subsequent articles, Roman stretches the feature to achieve Fit-to-Width Text and Position-Driven Styles. Sprinkle some style queries on top and you can also create animations that are triggered by elements becoming visible in their scroll container, as shown by Bramus in Creating Scroll-Triggered Animations.

Web APIs

The ability to animate page navigations has been one of the reasons designers & developers have opted for JavaScript-driven, or JavaScript-enhanced, websites. Thankfully, as Jeremy Keith shows, you won’t need any of that to add view transitions to your website.

View transitions can also be used to animate interface changes within the same page, as shown by Paul Hebert in Animating Slack reminders with the View Transitions API.

While the <selectmenu> element has aspects that still need sorting out before it’s ready to ship, the styling possibilities it opens up are pretty impressive. In Advanced Form Control Styling With Selectmenu And Anchoring API, Brecht De Ruyte will walk through an early implementation of this new experimental element by creating a pattern that you would never have thought possible with CSS alone — a radial selection menu.

The capable web. Thomas Steiner has co-written a series of articles on how web apps benefited from new APIs: how the game editor Construct 3 uses the File System Access API to let users save their games with Ashley Gullen, how vector image editing app Boxy SVG uses the Local Font Access API to let users pick their favorite local fonts with Jarek Foksa, and how Photoshop solved working with files larger than can fit into memory with Nabeel Al-Shamma.

Felt, makers of a mapmaking web app, have been documenting their switch from SVG to <canvas> to improve performance (Making Felt faster), a process that entails bringing your own event system (A new way of building interactions), among other things.

Assorted topics

Marc Edwards compares Adobe Illustrator’s Shape builder vs. pathfinder: The pathfinder panel was added to Illustrator in 2001, and the shape builder tool was added in 2010. Given shape builder is newer, many people assume it’s better. They’re both useful, but work in different ways. (Also available in video format)

In An Introduction to Parser Combinators, Varun Ramesh builds from scratch a command parser inspired by old-school text adventures.

Mitchell Hashimoto’s Approach to Building Large Technical Projects prioritizes demos and using your own software as driving forces against stagnation.

Stephen Coles introduces the collection of 26,000 items of printed ephemera that are to join the Letterform Archive: Coming Soon: The Richard Sheaff Ephemera Collection.

Tools and resources

wp-now streamlines the process of setting up a local WordPress environment. It uses the WordPress Playground, which runs PHP and SQLite inside the browser via WASM, so it’s really easy to set up and launch from within a theme or plugin folder. See the announcement post: wp-now: Launch a Local Environment in Seconds.

npm install --save-dev @wp-now/wp-now
npx wp-now start

Watch this (design)space. Fontra by Just van Rossum and Black[Foundry] is an open-source, browser-based font editor, currently in development.

Google Fonts Guide aims to help people navigate the requirements and recommendations for contributing to Google Fonts. It gathers various font engineering tips that are useful even outside GF workflows.

A Multiple Master based method for scaling glyphs without changing the stroke characteristics (PDF), an essay by Tim Ahrens, originally written in 2006 as part of the MA Typeface Design programme at the University of Reading, which goes into the math behind Font Remix Tools.

Primarium, A Global View On Handwriting Education, a public lecture with Veronica Burian and José Scaglione of TypeTogether, a snapshot of their ongoing research into how handwriting is taught: The experience of handwriting education in primary schools around the world is not one-size-fits-all; there is great diversity in how handwriting is taught, and approaches to it are constantly evolving. Part of the Typographics 2023 design festival.

Dina Chaumont is a lively typeface designed by baldinger•vu-huu for the city of Chaumont. Intending to make every letter a poster, b•v-h type has designed a monospace display typeface, which fits into this DIN A format. This format can be used in portrait or landscape, so two different sign widths coexist. The fonts are offered as a free download.

As part of the X Cicéro type design workshop at ÉSAD Valence, a series of fonts created by students based on the school’s collection of wooden typefaces are made available under the OFL license (via Fonts in Use).

Typoteka is an index of typefaces created by authors associated with Poland.

A new game by the New York Times called Connections invites you to group words that share a common thread.

Soundtrack: Eluvium — (Whirring Marvels In) Consensus Reality is shaping up to be one of my favorite albums of the year.