Journal
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.
“Doing It Right” Podcast, with Dotty Charles
An interview with Ashley ‘Dotty’ Charles, a writer and broadcaster, on the topic of online outrage.
By shouting about the little things, are we neglecting to talk about the bigger issues in modern society? We discuss performative outrage, the role of the social media provocateur and the strange case of Rachel Dolezal.
Hero Patterns: Free repeatable SVG background patterns for your web projects
From Steve Schoger:
A collection of repeatable SVG background patterns for you to use on your web projects.
Inclusive Datepicker (by Tommy Feldt)
A human-friendly datepicker. Supports natural language manual input through Chrono.js. Fully accessible with keyboard and screen reader.
Sign-in form best practices (on web.dev)
Sam Dutton advises how to use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.
Rodney P’s Jazz Funk (on BBC Four)
UK rap legend Rodney P reveals how the first generation of British-born black kids was inspired by the avant-garde musical fusions of black America in the 70s to lay the foundations of modern-day multiculturalism by creating the first black British music culture with the jazz-funk movement.
Three CSS Alternatives to JavaScript Navigation (on CSS-Tricks)
In general this is a decent article on non-JavaScript-based mobile navigation options, but what I found most interesting is the idea of having a separate page for your navigation menu (at the URL /menu, for example).
Who said navigation has to be in the header of every page? If your front end is extremely lightweight or if you have a long list of menu items to display in your navigation, the most practical method might be to create a separate page to list them all.
The Simplest Way to Load CSS Asynchronously (Filament Group)
Scott Jehl of Filament Group demonstrates a one-liner technique for loading external CSS files without them delaying page rendering.
Color Theme Switcher (on mxb.dev)
Max shows us how to build a colour theme switcher to let users customise your website. He uses a combination of Eleventy, JSON, Nunjucks with macros, a data attribute on the html element, CSS custom properties and a JavaScript based switcher.