Journal
Swipey image grids (on cassie.codes)
A lovely post by Cassie Evans in which she demonstrates that SVG is not just for icons and illustrations. You might also reach for it to create a responsive, animated grid of images.
we have another grid at our disposal. SVG has its own internal coordinate system and it's responsive by design.
Design-ish systems (by Ethan Marcotte)
Here’s an interesting new article from Ethan Marcotte, in which he muses on better ways to think about Design Systems based on his recent experience.
Once you’ve identified the root causes, you’ll be in a far, far better place to choose the right things — and, more importantly, to create a system that finally supports your design.
Diffchecker - Online diff tool
Diffchecker is a diff tool to compare text differences between two text files.
Building a resilient frontend using progressive enhancement (on GOV.UK)
GOV.UK’s guidance on developing using progressive enhancement is pretty great in all departments. It begins with this solid advice:
you should start by making your page work with just HTML, before adding anything else like Cascading Style Sheets (CSS) and JavaScript. This is because HTML is the most resilient layer. If the HTML fails there’s no web page. Should the CSS or JavaScript fail, the HTML will still render correctly.
I’ve started reading Recursion by Blake Crouch.
Encapsulated Eleventy/Nunjucks components with macros (by Trys Mudford)
Trys shows us how to use the Nunjucks macro to create encapsulated components. This works out less leaky and more predictable than an include preceded by variables assigned with set.
In Praise of the Unambiguous Click Menu (on CSS-Tricks)
Mark Root-Wiley explains why navigation menus that appear on click rather than hover are better.
How to Favicon in 2021 (on CSS-Tricks)
Some excellent favicon tips from Chris Coyier, referencing Andrey Sitnik’s recent article of the same name.
I always appreciate someone looking into and re-evaluating the best practices of something that literally every website needs and has a complex set of requirements.
How I subset web fonts
On my personal website I currently use three web fonts from the Source Sans 3 group: regular, italic and semibold. I self-host my fonts because that’s a good practice. Additionally I use a variety of special characters to add some typographic life to the text.
When self-hosting it’s important from a performance perspective to minimise the weight of the font files your visitors must download. To achieve this I subset my fonts so as to include only the characters my pages use but no more. Here’s how I do it.
I’ve started reading The Rise of the Ultra Runners, by Adharanand Finn.