wsf-xxx
Articles
A Guide To CSS Debugging by Stephanie Eckles. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs.
In Custom properties with defaults: 3+1 strategies Lea Verou outlines ways to provide a styling API for your components using CSS custom properties.
Browsing with a mobile screen reader by Henny Swan. A surprising bit: people who use mobile screen readers are slightly more likely to use a mobile app than a web site to carry out tasks
. See The WebAIM 2021 Screen Reader User Survey for more results.
Jonathan Neal has some test results on the various accessibility-conscious ways to hide content.
In Make your PWA feel more like an app, Thomas Steiner goes through some features of a native app (with Apple Podcasts taken as an example), and shows how do implement the web platform equivalent.
Getting Started with PWAs, a presentation in which Aaron Gustafson will walk you, step-by-step, through the process of turning a website into a PWA.
Safe DOM manipulation with the Sanitizer API by Jack J. The new Sanitizer API (currently in the prototyping phase in Chrome and Firefox) aims to build a robust processor for arbitrary strings to be safely inserted into a page.
Where the native solution is not available, DOMPurify can be used as a polyfill.
Huge if true: How to win at CORS, a definitive guide by Jake Archibald. I'm going to try to explain why CORS is the way it is, by looking at how it came into existence, and how it fits into other kinds of fetches. Wish me luck…
Practical frontend philosophy by Jared Gorski. Since frontend supports the interface between computers and humans, a well-constructed frontend is a vital part of the greater hardware-software-human relationship.
The event listening toolkit: five ways to get out of an event handling mess, Baldur Bjarnasson on an essential area of front-end engineering.
Building a multi-select component, a foundational overview of how to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences
by Adam Argyle
Web Platform Design Principles, a set of design principles to be used when designing Web Platform technologies
, useful for designing other APIs as well.
My Challenge to the Web Performance Community by Philip Walton
HTML with Superpowers, a talk by Dave Rupert on Web Components. I think if you were using Web Components before 2020 you were an early adopter and you probably have some scars to show for it. But in 2021, now that all modern browsers support Web Components, I think they’re worth investigating. They have one superpower that no other JavaScript framework offers called the Shadow DOM which is both powerful but frustrating. But another superpower — the power I’m most excited about — is that you can use them standalone without any frameworks, build tools, or package managers.
A couple of videos from the Jamstack 2021 conference: Have Single-Page Apps Ruined the Web? by Rich Harris, and Astro Lightning Launch: Astro v0.21 by Matthew Phillips.
Tools
MagInkCal, an E-Ink Magic Calendar that automatically syncs to Google Calendar and runs off a battery powered Raspberry Pi Zero
.
Sketch Machine by Casey Reas is a supremely fun animation tool.
TIL
You can copy multiple spans of text in Firefox
I do this all the time in Sublime Text: hold down the ⌘ key and double-click on words to create a multiple selection. The other day I casually did that, without noticing, in Firefox and… it worked?
I think I was aware of this feature before because I vaguely remember being puzzled by Selection.getRangeAt asking for a range index — wait, there's more than one?!
— but the moment felt like discovering it anew. The Selection API spec (currently a draft) has some interesting historical tidbits:
Originally, the Selection interface was a Netscape feature. The original implementation was carried on into Gecko (Firefox), and the feature was later implemented independently by other browser engines. The Netscape implementation always allowed multiple ranges in a single selection, for instance so the user could select a column of a table. However, multi-range selections proved to be an unpleasant corner case that web developers didn't know about and even Gecko developers rarely handled correctly. Other browser engines never implemented the feature, and clamped selections to a single range in various incompatible fashions.
Switching to ESM packages
In the last few months, I've begun noticing more and more major version bumps as I worked my way through updating dependencies for various projects, and a pattern emerged:
Packages are starting to switch to using ES modules natively. The move has been accelerated by Node.js 10, the last version that doesn't support modules out of the box, being taken out of long-term support earlier this year. Since you can't (conveniently) use ESM packages unless your project is also switched over, Rich Harris has astutely pointed out widespread transition will happen sooner rather than later.
I've taken the plunge with new major versions of some of my projects (percollate, culori) that are now ESM-first. In the process, I've started writing down some pointers on switching to native ESM, as part of a new Releasing JavaScript section on this website.
WSF-approved media
Books
Manual of diacritics: The 1990s, a time of rapid growth in digital typography, did not bring the same growth in interest in conceptual language support for typefaces, i.e., the creation of characters with diacritics. This gave rise to a situation well known to all graphic designers: A typeface they wanted to use in their design does not contain all the characters in their language.
(via Robin Rendle)
On writing. The agile comms handbook by Giles Turnbull, helps you use a human tone of voice, and a little creative flair, to get your point across to busy people
. Also out: Docs for Developers: An Engineer’s Field Guide to Technical Writing on Apress.
Ambient ensemble
@0, a compilation of new ambient music whose lineup sounds, frankly, like the perfect music festival, will be released in November. Ninja Tune's proceeds will go to three mental health charities: CALM (Campaign Against Living Miserably), Mind and Black Minds Matter.
Documentaries
Becoming Cousteau, directed by Liz Garbus. Roadrunner, a film about Anthony Bourdain directed by Morgan Neville.