Bookmarks

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.

CSS snippet demonstrating a circular "dial" that completes more of the circumference based on a variable.

A really clever idea to allow for globally synced state via a fairly simple custom hook. Using this avoids the need for complex Context nesting or lots of prop drilling.

A useful looking React hook that I was previously unaware of!

Comprehensive article outlining when to use the dialog element and the popover attribute, and sometimes both! Breaks down the expected behavioural differences from an accessibility perspective.

Short article pointing out that the ::file-selector-button pseudo-element exists and can be used to style the "Choose file..." button from <input type="file">.

A collection of JS snippets to copy/paste into dev tools to perform various useful actions.

Really interesting experiment in lambda-like functions. "Val"s are written in JS, and can be called as a JSON API. Each val (written in JS) can "call" other vals (authored by you or others) via a global naming system. You can then "stack up" small bits of functionality across many vals.

Neat-looking web app for editing SVG files in a visual editor (similar to Illustrator etc). Freemium model, seems like saving files to disk is included in the free plan.

Preact article introducing an alternative state mechanism to Hooks. As I understand it they wrap a value, providing a setter that can trigger re-renders. The main argument in their favour seems to be that they don't need memoisation as the "wrapper" itself doesn't change - only the value contained within. Preact takes this further by building Signal optimisations directly into the update cycle, allowing a Signal change to bypass VDOM diffing and just update the DOM directly.