wsf-xxvi

Published Aug 22, 2021

Creative coding. Math visualizations by Freya Holmér; The Beauty of Bézier Curves is spectacular

UI / Accessibility. A guide to designing accessible, WCAG-compliant focus indicators, a deep-dive by Sara Soueidan / Building a switch component, an overview of how to build a responsive and accessible component by Adam Argyle / Accessibility from the Ground Up by Kitty Giraudel / Collecting my thoughts about notation and user interfaces by Matt Webb / On the <dl>, Ben Myers on the underrated description list element

Security. How to Hack APIs in 2021 by Hakluke and Farah Hawa

Static Sitegen. I've recently used some of Mike Aparicio's Eleventy recipes to make some improvements around here (RSS feed, sitemap, etc.)

Tools / Resources. make ZIP archives in the browser with JSZip / apollo and monocle, two personal search engines / A future for SQL on the web, James Long on persisting SQLite in IndexedDB / OpenType feature database / An Opinionated Guide to xargs by Andy Chu

Performance. Building on Budget, Paul Frazee on the ROI of complex tooling / Atif Afzal warns: Don't attach tooltips to document.body / Does shadow DOM improve style performance? by Nolan Lawson / Why lab and field data can be different (and what to do about it) by Philip Walton

React / Web Components. generic-components, a collection of generic web components with a focus on accessibility, and ease of use, by Pascal Schilp / Components: react-aria by Tom MacWright

Reading / Writing / Publishing. The web browser as a tool of thought / Patterns in confusing explanations by Julia Evans (guilty on multiple counts) / Diátaxis, a systematic framework for technical documentation authoring

A CLI tip. One annoying thing to mark up in HTML is images along with their dimensions. Using ImageMagick you can grab an <img> tag right from the command line with:

magick identify -format '<img src="%i" alt="" width="%w" height="%h"/>\n' ./my-image.png

# Outputs:
# <img src="./my-image.png" alt="" width="800" height="600"/>

Combined with find and xargs to produce markup for all the JPG files in a folder:

find . -type f -iname "*.jpg" | xargs -L1 magick identify -format "<img src='%i' alt='' width='%w' height='%h'/>\n"

A thought. Jared Spool on Twitter:

"Don't let the perfect be the enemy of the good." In UX design, this thinking delivers more damage than benefit. There's usually a LOT of distance between good and perfect. Good leaves room for better, which, when provided by someone else, leaves our designs behind.

A good game. Good Sudoku on iOS is a novel take on the classic game.

Link H/Ts: Simon Willison, Lobste.rs