wsf-xxv

Published Aug 11, 2021

CSS. Refactoring CSS, a series by Adrian Bece: Introduction · Strategy, Regression Testing And Maintenance · Optimizing Size And Performance¹ / The world of CSS transforms, a tutorial by Josh W. Comeau / Smooth Shadow, a tool by Philipp Brumm to create a layered CSS box-shadow

JavaScript / Web Components / React. How To Build Resilient JavaScript UIs by Callum Hart / About Web Components, a history by Andrea Giammarchi / Handling properties in custom element upgrades by Nolan Lawson / React Children And Iteration Methods by Arihant Verma / Three Buggy React Code Examples and How to Fix Them by Hugh Haworth

Accessibility. A Deep Dive on Skipping to Content by Paul Ratcliffe / Creating An Accessible Dialog From Scratch by Kitty Giraudel

Performance. Making Reasonable Use of Computer Resources / Improving the responsiveness in text inputs by Nolan Lawson / A performance-focused workflow based on Google tools by Antoine Bisch and Garima Mimani

Tools / Resources. Moved some of my projects to esbuild, loving it so far; it feels knowable and making plugins for it is a breeze / A first release candidate for Parcel 2 was just released / useful-forks and active-forks, two tools to find the most active forks of a GitHub repository / Coding with character by Doug Wilson / Open Type Cookbook, an introduction to OpenType features / Visualizing a codebase by Amelia Wattenberger / Building Developer Tools, a collection of notes by Kunal Bhalla

Parsing things. Make a Markdown Parser with OhmJS by Josh Marinacci

Reading / Writing / Publishing. 640 Pages in 15 Months, Robert Nystrom on preparing a physical version of his Crafting Interpreters book / Buy Music Club, a place for creating and browsing lists of independent music purchasable on Bandcamp

Creative coding. Procedurally generated fish by Lingdong Huang / Constraint Systems, a collection of experimental web-based creative tools by Grant Custer

Today I learned

In Firefox Developer Tools, you can right-click an object logged to the console and choose the Store as global variable option. A definite improvement over doing window.XXX = someObject by hand throughout the code.

In Webpack, you can require an entire folder with require.context(). This came in handy for an icon catalog I was working on in Storybook.js:

// all-icons.js
let ctx = require.context('svgs', true, /\.svg$/);
module.exports = ctx.keys().forEach(k => ctx(k));

(via Šime Vidas) The document.activeElement is not always focused. The Document.hasFocus() method lets you confirm that it is.

¹ Added Aug 31, 2021 after publishing.