Design for reading
Read NoteA very clever article (as ever) from Sara on how to ensure the content you create is accessible through RSS feeds and Reader modes (and a host of other …
Search
How to Fix a Broken Embedded Flickr Album
Read ArticleI recently had need to embed a Flickr album, as I've done many times before. When I published the article, however, the album was broken and only showed a single image. Odd, sure, but I figured I had …
Oh, embed!
Read NoteYouTube embeds can be expensive on page load metrics, but what alternative is there? How about loading a thumbnail that hot-swaps itself for an <iframe> when clicked? Sounds great, but wouldn't …
Useful Entry URIs with Headless Craft
Read ArticleWhen using Craft in a headless configuration, your entry URIs will default to the wrong domain and won't be properly configured to match your actual site structure, but that can be fixed.
Lists with Hanging Indent and Custom Counters
Read ArticleCustomising HTML lists often means sacrificing standard browser typesetting bonuses, like hanging indents. But with a little bit of modern CSS, you can get them back again, whilst still getting to use custom counters – like emoji 🚀
Why a skip navigation link is useful
Read NoteI'd never heard of a "skip link" before but it's a neat idea that's clearly been around for some time. Basically, it's a link placed at the very start of the <body> that's …
Netlify redirects and downloads
Read NoteI didn't know that the <a> element had a download attribute, nor that it could rename the file on download for you …
Accessible interactions
Read NoteSo you have a non-page-based navigation: tabs, carousels, accordions, multi-level menus, route changes... we deal with these a lot in modern frontends. Is your "trigger" (the thing you press to make …
Accessible anchor links
Read NoteExcellent write-up by Amber on making accessible anchor links (those little floating chains/hash symbols next to …
A Local Data Store in Astro
Read ArticleA quick (and dirty) way to fetch local data from a JSON file and modify the look of a page in Astro, completely natively.
Inclusive tabbed interfaces
Read NoteI've been digging into tabbed interfaces ("tabs") recently. As usual, Heydon's Inclusive Components has one of the best overviews and write-ups of the techniques used. I particularly love …
Time to rethink mobile-first CSS?
Read NoteAn interesting look at whether the current mobile-first paradigm is problematic. Ultimately, the title feels a little like click-bait; to me the solution proposed remains mobile-first, but suggests …
Semicircular Borders
Read ArticleCreating a border along half of a circular element using CSS gradients and background images.