Bookmarks

Controlling the outline styles via CSS variables is a really clever idea: it allows customisation of elements (either on a one-off basis, or as part of the design system).

Looks like Node 18 has a drop-in replacement for Mocha/Jest. Looking at the docs it even supports it.only which isn't mentioned in the article.

We can replace minimist and friends with a built-in Node util now.

Handy little tip from Stefan, I can see this being useful in a number of ways.

Sets out an argument for project planning via "stepping stones" over "milestones". The argument is that avoiding a big plan-up-front (a series of milestones) in favour of stepping stones at each you can stop and chose the next stone allows for demonstrating progress but with flexibility. Each stepping stone has some kind of deliverable and moves towards the overall strategic goal. This sounds a lot like how I approached our migration to React, but frames it a bit better than "flying by the seat of my pants" :D

Explains a neat CSS snippet that gives flexibility to focus outline styles using CSS variables. This allows the focus ring to be restyled based on different contexts (like buttons/form elements etc).

Wide ranging article (adapted from a conference talk) from Modern CSS. Covers some global helpers, layout utilities and some specific components based on the latest CSS features.

Excellent article outlining an overall approach to engineering metrics, with a particular focus on practicality and application over theoretical purity.

Article describing the different (ARIA) roles that should be attached to the new popover attribute.

Examples of handling a table with expanding rows, to show more information, in an accessible way.

Lots of interesting ideas about preventing additional divs when building (largely React-based) design systems. Particularly interested in the ideas around the asChild prop, which is a really interesting workaround for issues with compound components.

Persuasive article on why OKLCH is the best of the "new" colour formats coming to CSS. The arguments are essentially: it retains the "readability" of LCH (it's fairly easy to guess what the colour from the code), it supports a much wider range of colours ("wide-gamut P3"), it prevents issues when changing colours programmatically (e.g. via a darken() function) as it models human colour perception much more closely - which also helps with preventing colour contrast problems.

Quick intro to a CLI tool installed in macOS by default. It can be scripted via JS, specifically the Canvas API. It also seems like it can convert WEBP into PNG fairly simply too.

A typeface designed around the Minecraft font (which is also linked in the README), but monospaced for usage with programming.

Solving the problem of spacing heading appropriately within some prose - spacing is desirable between regular text and the next heading, but not between headers themselves. A clean solution using :has.

Tool that converts any text into the Unicode equivalent for various "formatting" styles, e.g. superscript, strikethrough, "blackletter" (the oldey-timey style letters), etc. Useful to make memes 😂 (although note the disclaimer that heavily using this trick is generally considered inaccessible).

Web-based flamegraph visualiser. It accepts formats from Chrome, Firefox, Safari and Node, so seems like it would useful for comparison across browsers. There's also a couple of interesting options that change how the visualisation works, including one that sorts by the longest time.

Comprehensive list of all spec'ed values to the rel attribute on link or anchor elements. There's quite a lot of interesting and useful stuff in here.

Some surprising results of how screen readers treat various text formatting elements like bold/italics. The short version is that screen readers will only announce formatting if styled with CSS. So using <b> or <strong> doesn't actually matter from a screen reader perspective.

CSS snippet recreating an Android spinner using a couple of gradients and a keyframe animation.