Implement footnotes in HTML with the <ruby> element

Looking for a way to implement footnotes in HTML, Thomas Steiner experimented with using the <ruby> element. The MDN docs describe the ruby element as follows. “The HTML <ruby> element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can …

Alt vs Figcaption

This message by Elaina Natario writing over at Thoughtbot cannot be repeated enough: While both the alt attribute and the figcaption element provide a way to describe images, the way we write for them is different. alt descriptions should be functional; figcaption descriptions should be editorial or illustrative. Examples of both functional and editorial descriptions …

Use an Emoji as the Mouse Cursor on a Website

Recently I saw this tweet by Marco Denic fly by: CSS tip: Did you know that you can use your own image, or even emoji as a cursor? pic.twitter.com/P25wSJ0ui6 — Marko ⚡ Denic (@denicmarko) January 6, 2021 To use an emoji as the cursor you can’t simply type in the emoji though. /* ❌ This …

My stack will outlive yours

Steren (who happens to be PM for the wonderful Cloud Run): My stack requires no maintenance, has perfect Lighthouse scores, will never have any security vulnerability, is based on open standards, is portable, has an instant dev loop, has no build step and… will outlive any other stack. It’s not LAMP, WordPress, Rails, MEAN, Jamstack… …

BlurHash — Low-res Blurred Placeholder Images Represented as Text

If you’re dealing with images it’s quite common to show a small placeholder while the image is loading. You could go with grey placeholders, but a low-res blurred version of the original is preferred. That way you can, in the example use case of a website, use the Blur Up technique once the image is …

Semantically Identify a Heading Subtitle with ARIA role="doc-subtitle"

Over at CSS-Tricks, Chris takes a look at how to mark up a “Double Heading”, a common pattern where you have a big heading with a little one preceding/succeeding it (as pictured above). After going over a few options, the answer comes from a tweet by Steve Faulkner: use role="doc-subtitle" for the secondary heading. As …

Checkboxland – Render anything as HTML checkboxes

Checkboxland is a JavaScript library for rendering anything as HTML checkboxes. You can use it to display animations, text, and arbitrary data. It also supports plugins, so you can build more powerful APIs on top of it. Heh. Can’t quite think of a reason when exactly to use this, but it’s fun nonetheless 😅 Checkboxland …

Limit the colors to choose from in <input type=”color”> with <datalist>

Christian Heilman: The input type colour supports the list attribute, which allows you to define a preset list of options. The colours need to be defined as hexadecimal colours. They can be defined as values or text inside the option tags, but the values take precedence. Pictured at the top of this post is how …