Bookmarks

Write five, then synthesize: good engineering strategy is boring.

Simple and effective advice for getting started with writing engineering strategies that are grounded in reality and therefore actually useful. A must-read.

22 days ago
Migrations: the sole scalable fix to tech debt

An oldie but a goodie, a nice summary of why (large scale) migrations are important and how to carry them effectively. I think the point about recognition for completion is an under-considered but important point.

23 days ago
Creating Static SVGs from GeoJSON

Timely and useful post about generating SVGs from GeoJSON, using D3's map primitives. Demonstrates a client only version, then a completely static file based solution.

30 days ago
Relatively New Things You Should Know about HTML Heading Into 2025

Chris Coyier does it again with a really great write up of new HTML (and some CSS) features coming soon. A lot of them are pretty exciting.

30 days ago
Easing Wizard

Generator tool for creating easing animations (basically movement-based animations, e.g. responding to clicks etc).

30 days ago
Making this website respond to your local energy grid

Ferhad's more detailed write up of how he's using new Grid Aware tools from Green Web Foundation (based on Cloudflare Workers) on his own Eleventy site.

30 days ago
Learn Wardley Mapping

Found via Will Larson's blogs about strategy, this seems like a useful online course and book for understanding Wardley Maps (a tool for building & planning technology strategies). The course is apparently only 75 mins so seems digestable. The intro video on the page is pretty good by itself.

15 days ago
Introducing Background Fetch

Intro to a Chrome-only web API that allows downloading (and access to the downloaded files via JS) of files that survive through bad & disconnected connections or quitting the browser entirely.

29 days ago
What is Pseudo Translation

Concise summary of a globalisation/internationalisation technique from Aaron Presley (who I gave a training workshop that I attended recently), to harden a software system in preparation for adding translations. He also includes a NPM module that to automate creation of pseudo translations (see a in-browser version here: https://aaronpresley.com/demos/pseudo-translation) as well as a Figma plugin (https://www.figma.com/community/plugin/937106647604992352/G11N-Utilities)

1 hour ago
Don't Sleep on AbortController

Some ways of using AbortController that I didn't know about - for example, event listeners can be disabled using an AbortController - handy if you need to disable several event listeners together.

20 days ago
MDN: CustomStateSet

Documentation of a built-in DOM interface that allows web components to define a custom state (or states) that the web component is in. The real magic here though is that you can access those states in CSS via the :state(foo-state) selector. Found via David Darnes' Mastodon post: https://mastodon.design/@DavidDarnes/113147905121075998, where he implemented a is-playing web component that allows a audio/video element to be styled when it is playing using a :state(playing) selector.

26 days ago
Letting iOS “Text Size” Setting Affect Font Size on the Web

It's possible to allow fonts within iOS browsers follow the OS-wide font size setting, just by splitting out how you set up fonts in CSS. Nice little accessibility win.

27 days ago
A background-image trick most people don't know about

Really clever CSS trick to give a "hover highlight" effect but constrained within some boxes. By using background-attachment: fixed, an image is positioned relative the *viewport* instead of the box it's in. If you then use a gradient to generate the image, and control the positioning of the gradient using JS tracking the mouse you get the effect.

27 days ago
Alternatives to Using Pure Black (#000000) for Text and Backgrounds

The article has a lot of explanation around why pure black/white is a bad idea, but the really useful thing is a nice collection of off-black colours listed at the bottom of the article.

yesterday
Including user interaction in website carbon estimates

Clever approach to measuring CO2 emissions from frontend apps: gathering resource usage via th PerformanceResourceTiming API, then passing it through CO2.js. I'm still slightly skeptical that the mapping of resource size to emissions really holds for all types of sites but I think this a more realistic model.

3 days ago
In detail: 1.4.11 Non-Text Contrast (User Interface Components)

Detailed look into precise details of how colour contrast applies to components - specifically how a border around an input field interacts with background colour - and how exactly the WCAG requirements work. My takeaway is that it only matters that there is 1 aspect of the component that is contrasting, as it means that component can be recognised.

4 days ago
Uplevel your managers with Mini-M support groups

Series of posts describing the Mini-M style of meetings, designed to support and grow managers (in a larger org, where there are at least 3 - 4 managers across Engineering-adjacent departments). It's structured as a support group where managers can help each other and develop each other's ideas. I like the framing of it being a "cabal" that work together to implement changes across the org, but question how effective that would realistically be.

4 days ago
Working with stacked branches in Git is easier with --update-refs

Walkthrough of a new option in Git rebasing, why it is helpful for working with "stacked branches" (branch off a branch off a branch) and how to use it. I'm pretty convinced this will be better, as I tend to like working with stacked branches. And as a bonus, it's possible to set it as a default option, so all rebases have this behaviour.

4 days ago
Departure Mono

Interesting pixel-style monospaced font. Surprisingly looks pretty good for code samples.

4 days ago
Practical SVG by Chris Coyier

The entirety of Chris' book on using SVGs on the web. It's a few years old now, but I enjoyed the paper copy and thought it was a good summary of when to reach for SVGs, particularly around icons.

25 days ago