wsf-xxxv
News
Astro, the zero JS by default framework for building content-first websites (which is safe to say is most websites), has reached its 1.0 release. Jeff Delaney blitzes through Astro's features in a tightly woven 3-minute video.
CodeMirror 6.0 is a from-scratch implementation based on the experience of building and maintaining versions 1 to 5 for the past 13 years. It aims to be more extensible and accessible than previous versions.
Articles
HTML 🤝 CSS
As I'm slowly making my way towards marking up a whole collection of traditionally typeset treatises myself, I am very sympathetic to Eric A. Meyer's experiments with reproducing some aspects of the printed page on the web. There are three posts so far, on Flexibly Centering an Element with Side-Aligned Content, Recreating “The Effects of Nuclear Weapons” for the Web, and Table Column Alignment with Variable Transforms.
What is the best way to mark up an exclusive button group?, asks Lea Verou. A group of radio inputs seems to offer a lot out of the box, but <button>s and JavaScript better convey the intent. Léonie Watson expands on the thought in Perceived affordances and the functionality mismatch.
Understanding Layout Algorithms, Josh W. Comeau on building an intuition for CSS layout. Speaking of which, I'll have to sleep over what I've just read here, but it seems like very powerful stuff: Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers by Temani Afif.
In The Ballad of Text Overflow, James Edwards makes the case that the text-overflow CSS property should never be used.
How Nordhealth uses Custom Properties in Web Components, David Darnes on using custom CSS properties as an interface to the Shadow DOM.
Bramus has put together a compendium of ways to animate CSS borders, complete with illuminating visuals.
JavaScript, DOM
Tom MacWright writes about Activation, and how some web APIs that browsers only allow as a result of user activation are not straightforward to invoke in asynchronous scenarios.
Part of a series on Node.js shell scripting, Axel Rauschmayer wrote a guide to parsing command line arguments with util.parseArgs(), a function introduced in Node 18.3.
CMS and static sites
Dana Byerly with some considerations on using WordPress as a CMS for an Eleventy website: Part one: WordPress, Part two: Eleventy.
Helpful 404s for Jekyll (and GitHub Pages), a clever trick by Ben Balter for your 404s: fetch sitemap.xml and suggest the most similar URL based its Levenshtein distance to the missing one.
Engineering
The cost of convenience, Surma on designing APIs and the tradeoffs any abstraction introduces. Every abstraction should ideally be optional (opt-in or opt-out) and come with escape hatches. If possible, it should also expose the abstractions below the top layer, so developers are in control and can help themselves.
The tutorial I wish I had when I started working with the command line: The Front-End Developer's Guide to the Terminal by Josh W. Comeau. And still I got to learn a few new keyboard shortcuts!
Security
Jabs at IABs. In iOS Privacy: Instagram and Facebook can track anything you do on any website in their in-app browser Felix Krause shines a light on questionable use of custom, in-app web browsers. Adrian Holovaty: The more I think about it, the more I cannot believe webviews with unfettered JavaScript access to third-party websites ever became a legitimate, accepted technology. It’s bad for users, and it’s bad for websites.
His proposal? Let websites framebust out of native apps. If a website is loaded into a webview, and the website includes the appropriate
. Note that non-hostile apps can choose privacy-protecting alternatives for opening third-party URLs on both iOS (X-Frame-Options header, the mobile OS should immediately stop loading the webview and open the URL in the user’s preferred web browserSFSafariViewController) and Android (Chrome Custom Tabs) that still feel seamless to the user, and many apps already do.
Tools and resources
Some new-to-me developments in interop for rich-text/block editors: the Block Protocol introduced by Jared Spolsky earlier this year and Sanity's Portable Text specification. I'm reminded of Condé Nast's atjson.
Scott O'Hara has helpfully catalogued his thorough implementations for various accessible components. I've built a good handful of accessible markup patterns and widgets at this point. Each is based on testing with users, UX and design needs of past projects, and from following W3C specifications & notes.
Product Planning Prompt Pack, a planning tool for teams that build features
by Anna Debenham.
The Mature Optimization Handbook, a booklet by Carlos Bueno: Performance optimization is, or should be, a cost/benefit decision. It’s made in the same way you decide just how much effort to put into other cross-cutting aspects of a system like security and testing. There is such a thing as too much testing, too much refactoring, too much of anything good.
(via Tom MacWright).
Webhook.fyi, best practices for providing and consuming webhooks.
An interactive guide to color & contrast, a comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast
by Nate Baldwin.
Eighteen fascinating Lectures on Digital Photography by Marc Levoy, with an accompanying website (via Florens Verschelde).
Hypertext experiments. Nutshell, expandable explanations by Nicky Case inspired by Ted Nelson's StretchText. I've also found the mechanics on Andy Matuschak's notes interesting.
Today I learned
wget outta here. Stefan Judis recently asked about tools for finding broken outbound links on your website. With wget being pretty good for finding internal 404s (wget --spider --recursive --level 0 yourwebsite.com), might it work on external links as well? A resounding sort of, a bit too caveaty to recommend as the definitive solution. Not really a one-liner either, but you can find it on my wget recipes page. check-html-links by Thomas Allmer seems to be a better choice, with support for external links coming imminently.
A beautiful typeface. Ploquine, a family by Emma Marichal inspired by wooden type, is the winner of the 2022 Gerard Unger Scholarship. So so good. The author's dissertation is available as a PDF for insights on the design process.
A revived typeface. Speaking of design process, De Aetna is an open (OFL) typeface released by Riccardo Olocco and Michele Patanè as a companion to their handbook Designing type revivals.
A parting thought until next time:
Bookmarking isn't about reading something later, it's about not reading it now — @ReinH