Bookmarks

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.

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)

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

Great post outlining the concept of a "rhetorical situation", a specific structure that can be used to break down and analyse individual pieces of communication - in the context of software engineering, many of the examples revolve around code review. It could be a useful tool for making communication more effective by ensuring all pieces of the structure have been considered.

One of those tools to generate a range of colours based on starting and ending input colours. Seems like it has quite a lot of pre-written curves to generate the colours.

Pretty much does what it says on the tin. Possibly useful if for some reason an icon isn't viable.

Nice & lightweight icon search across a large number of icon collections.

Good article on increasing touch target sizes, particularly for mobile. There's a big grab bag of potential problems and solutions. The first section in particular is more general UX principles, then going onto looking in detail at CSS implementation details.

Interesting API to provide robots.txt output to block (known) various web scrapers, including those from AI bots.

Clear description of the behaviours of the new popover attribute, particularly focused on the "accessibility guardrails" that it automatically applies. Will be useful reference for what precisely the behaviours are.