← Back to WatchStarFork

wsf-xli

Published

News

Web Push. One of the standout features in Safari 16.4, now in beta, is its support for push notifications on iOS and iPadOS, along with other APIs useful for Progressive Web App developers. The Web Push feature will only be available once the user adds the website to their Home Screen, an action that's currently not very discoverable.

Style goals. I love the concept of celebrating CSS features when they become available across major browser engines. To that end, there's a newly interoperable tag on web.dev to which you can subscribe via RSS.

Articles

Easing curves, and better CSS transitions and animations, a guide to cubic-bezier() timing functions by Josh Collinsworth.

Representation of style Steve Faulkner: although the HTML specification attempts to make a distinction between <b> & <strong>, and <i> & <em>; the general fuzz and fudge of their specification, historical and current use, UI implementations & style representations, coalesce to make attempts to distinguish them futile. BIUS (Bold, Italic, Underline, Strikethrough) Toolbars and Markdown syntax are just two examples of how ubiquitous user interfaces stand in the way of establishing a distinction in these elements. In hindsight, them defaulting to <em> and <strong> probably did not help the cause.

Adrian Roselli documents a set of issues screen readers have with <table> headers which span multiple rows and columns, and concludes: Avoid Spanning Table Headers.

How Shadow DOM and accessibility are in conflict by Alice Boxhall: Shadow DOM encapsulation essentially makes children of a shadow root "private" to any siblings or ancestors of the shadow host. This means that any HTML feature which creates a relationship between elements can't work when a relationship needs to be expressed between an element within a shadow root and one outside of it.

In What to expect from your framework, Johan Halse reminds us there's much more to a web application than rendering libraries.

React Is Holding Me Hostage, a report from the trenches on the ergonomic limitations of React's reactivity model (managing forms, sharing state), and how that model is hard to optimize for. The article ends with praise for signals, a form of fine-grained reactivity that the new generation of libraries has embraced.

Let's build a Chrome extension that steals everything, a lighthearted but sobering read from Matt Frisbie. Manifest v3 may have taken some of the juice out of browser extensions, but I think there is still plenty left in the tank. To prove it, let’s build a Chrome extension that steals as much data as possible. I’m talking kitchen sink, whole enchilada, Grinch-plundering-Whoville levels of data theft.

Oscar de Lama on developing a RAW photo file 'by hand' in a fascinating two-part article. Here's the first part and the followup.

In Noodling on WordPress in 2023, Chris Coyier notes the vibe shift in WordPress development precipitated by the Gutenberg Block Editor seeping into every aspect of site-building. In the past few years I've found my local maximum with Timber + ACF, but I'm keen to find out how much of a mental leap there is to block themes.

Tools and resources

iOS Access for All, Shelly Brisbin's book on using accessibility features across Apple mobile devices, has been updated for iOS 16.

Web.dev's expert-written courses have been enriched with Learn Privacy by Stuart Langridge and the second half of Learn HTML by Estelle Weyl.

In How The Post is replacing Mapbox with open source solutions, Kevin Schaul assembles a toolbox for making interactive maps for Washington Post:

Poline by David Aerne is is an enigmatic color palette generator, that harnesses the mystical witchcraft of polar coordinates. Its methodology, defying conventional color science, is steeped in the esoteric knowledge of the early 20th century. This magical technology defies explanation, drawing lines between anchors to produce visually striking and otherworldly palettes. It is an indispensable tool for the modern generative sorcerer, and a delight for the eye.

webperf-snippets is a curated list of snippets to get Web Performance metrics to use in the browser console by Joan León.

awesome-computational-geometry by Aaron Kirtland is a curated list of awesome computational geometry visualizations, frameworks, and resources.

google/swissgl by Alexander Mordvintsev is a wrapper on top of the WebGL 2 JavaScript API that's designed to reduce the amount of boilerplate code required to manage GLSL shaders, textures and framebuffers when making procedural visualizations or simulations.

Quick tips

Find unused JavaScript files. If you're using esbuild to bundle your JavaScript project, the JSON metafile it can produce along the build is very useful. For example, you can list the individual files that were bundled:

jq '.inputs | keys | .[]' dist/meta.json -r | sort

Comparing that to the list of all JavaScript files in the src/ folder, we can obtain a list of unimported JavaScript files:

join -v 1 \
	<(find src -name '*.js' | sort) \
	<(jq '.inputs | keys | .[]' dist/meta.json -r | sort)

Matching against Regular Expressions. For a new Culori release I rewrote the color parsing code to make it more robust than the previous regex-only solution. The new parser checks the input character by character, doing things like matching digits, which can be expressed in (at least) two styles:

if (ch.match(/\d/)) { /* it's a digit */ }

if (/\d/.test(ch)) { /* it's a digit */ }

Instinctively I tend to write if string matches pattern without giving it a second thought, because it just reads more naturally. It was only while benchmarking and looking for opportunities to optimize that I realized RegExp.prototype.test is much faster because it does less work. The former needs to return an Array of matches, while the latter returns a simple Boolean. In performance-sensitive contexts, where the operation is performed several times, the difference is significant.

Soundtrack: Depeche Mode — Ghosts Again