Journal
Accessibility Testing (on adactio.com)
In this journal entry, Jeremy Keith argues that when it comes to accessibility testing it’s not just about finding issues—it’s about finding the issues at the right time.
Doppler: Type scale with dynamic line-height
line-height on the web is a tricky thing, but this tool offers a clever solution.
Accessible Color Generator
There are many colour contrast checking tools but I like this one from Erik Kennedy (of Learn UI Design) a lot. It features an intuitive UI using simple, human language that mirrors the task I’m there to achieve, and it’s great that if your target colour doesn’t have sufficient contrast to meet accessibility guidelines it will intelligently suggest alternatives that do.
SVG Gobbler
SVG Gobbler is a browser extension that finds the vector content on the page you’re viewing and gives you the option to download, optimize, copy, view the code, or export it as an image.
Should I use the HTML5 section element and if so, where?
Unlike other HTML5 elements such as header, footer and nav, it’s never been particularly clear to me when is appropriate to use section. This is due in large part to many experts having expressed that it doesn’t quite work as intended.
Use Eleventy templating to include static code demos
Here’s a great tutorial from Eleventy guru Stephanie Eckles in which she explains how to create a page that displays multiple code demos, similar to SmolCSS.dev.
Reusable code snippets and components in Eleventy
There are (at least) three cunning ways in Eleventy to get “reusable snippet” or “reusable component” functionality.
Crafting Component API, Together (by Nathan Curtis, on Medium)
Nathan (of EightShapes) discusses how to unify anatomy and props across code and design tools.
Manage Design Tokens in Eleventy
One interesting aspect of the Duet Design System is that they use Eleventy to not only generate their reference website but also to generate their Design Tokens.
Duet Design System
Here’s a lovely Design System that interestingly uses Eleventy for its reference website and other generated artefacts:
We use Eleventy for both the static documentation and the dynamically generated parts like component playgrounds and design tokens. We don’t currently use a JavaScript framework on the website, except Duet’s own components.