Bookmarks

Glyph.Tools | Tiny Tool For Text Transformation

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).

May 2023
speedscope

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.

May 2023
A Theory of Web Relativity - HTMHell

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.

May 2023
Screen Readers support for text level HTML semantics

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.

May 2023
Conic gradient Android spinner

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

May 2023
Circular gradient stroke chart

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

May 2023
useGlobalState()

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.

May 2023
useSyncExternalStore – React

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

May 2023
Dialogs and popovers seem similar. How are they different? | hidde.blog

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.

May 2023
How to style the select button of file inputs

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">.

May 2023
Dear Console,… - a collection of code snippets to use in the browser console

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

May 2023
Val Town

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.

May 2023
Boxy SVG Editor

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.

May 2023
Introducing Signals

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.

May 2023
ThumbHash

Useful little library from the author of ESBuild that generates a fast-loading but blurry & small image from an existing image. These can then be used as placeholder image to get perceived fast page loads. It claims to produce more detailed images for the same size, and more accurate colours.

May 2023
benbrown/shuttlecraft: a single user activitypub server - join the federation!

Github project to run a simplified ActivityPub/Mastodon server for single user, as opposed to the full-blown Mastodon server. Written in Node and designed to be run via services like Glitch.

May 2023
Keyboard shortcuts need modifier keys

Article pointing out that WCAG specifies that all keyboard shortcuts must be triggered with a modifier key (Cmd/Ctrl) to be accessible. There are 3 exceptions: if you can turn off the functionality; remap the keys or if the shortcut is only active in a limited case (e.g. while a select is open).

May 2023
The navigation timing API includes the type of the current navigation

Interesting little tip, showing that you can detect whether a page was loaded due to clicking a link, reloading, back/forward or pre-rendered.

May 2023
OKRs are hard

A breakdown of some pitfalls with OKRs, specifically around key results. Balanced by positive points about why OKRs are useful, namely that they force you to sit down and think about your strategy.

May 2023
Dark Mode via a Smallish Script in the Head, Avoiding FART

Great solution to the dark mode toggle problem.

May 2023