Bookmarks

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.

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.

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

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.

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.

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.