Journal
itty.bitty
Here’s an interesting tool for creating and sharing small-ish web pages without having to build a website or organise hosting.
itty.bitty takes html (or other data), compresses it into a URL fragment, and provides a link that can be shared. When it is opened, it inflates that data on the receiver’s side.
When there is no content between headings
When you use a heading element, you set the expectation of content.
The Social Dilemma
I watched Netflix’s documentary The Social Dilemma the other night.
The difference between aria-label and aria-labelledby (Tink - Léonie Watson)
The
aria-labelandaria-labelledbyattributes do the same thing but in different ways. Sometimes the two attributes are confused and this has unintended results. This post describes the differences between them and how to choose the right one.
Tenet, revisited
Introducing Rome
We’re excited to announce the first beta release and general availability of the Rome linter for JavaScript and TypeScript. This is the beginning of an entire suite of tools. Rome is not only a linter, but also a compiler, bundler, test runner, and more, for JavaScript, TypeScript, HTML, JSON, Markdown, and CSS. We aim to unify the entire frontend development toolchain.
Create a line break while maintaining inline status (on Piccalilli)
Sometimes you want to create a line break after an inline element, while retaining that inline element’s inline status.
Jakarta Sans Typeface
Jakarta Sans is a nice-looking Open Source (so free to use) typeface which I reckon I could use at some point.
Daniel Post shared a really cool performance-optimisation trick for Eleventy on Twitter the other day. When statically generating your site you can loop through your pages and, for each, use PurgeCSS to find the required CSS, then inline that into the <head>. This way, each page contains only the CSS it needs and no more!
I’ve just installed this on my personal site. I was already inlining my CSS into the <head> but the promise of only including the minimum CSS that each specific page needs was too good to resist.
Turned out it was a breeze to get working, a nice introduction to Eleventy transforms, and so far it’s working great!
Thoughts on inline JavaScript event handlers in the <head>
I’ve been thinking about Scott Jehl’s “simplest way to load external CSS asynchronously” technique. I’m interested in its use of an inline (onload) event handler for running JavaScript-based enhancements in the <head>, in the context of some broader ruminations on how best to progressively enhance UI elements with JavaScript (for example adding toggle show/hide) without causing layout jank.