Accessible D3 donut charts
A solid tutorial on making an accessible donut chart with D3. A couple of options are discussed, along with the pros/cons of each. I personally prefer the first option, where the labels and data are […]
Archives
Smarter SVG filters
An in-depth guide to SVG filters, including colour manipulation, contrast, brightness, sharpening, blur, blend modes, and distortion. Very useful when trying to work out which combination of filters […]
An interactive guide to CSS keyframes
A wonderful overview of how to use keyframe animation in CSS, including some very useful tips on animation state and creating meaningful animation APIs using custom properties and CSS math […]
Unlocking Git with Aliases
A look at how I've been using Git aliases to remove repetitive tasks, automate workflows, and generally optimise working on the command line. They're small tips, but they've had a big impact on me.
An interactive guide to CSS transitions
Once again, Josh has put together an excellent introductory tutorial to a subject that is still packed with useful tips for even the most advanced user; in this case, CSS […]
Improving online readability
Where has this article been my whole life! Andy's posts are often brilliant, but this an absolute gold mine of information, from ideal character lengths to clever type-setting tricks. And I thought I […]
Fluid typography with CSS clamp
A simple and informative example of how the new CSS clamp property can be used to create fluid layouts (in this case, specifically a fluid type […]
Syndicating content to Twitter from Eleventy
I feel like Max is about two years ahead of me on everything 😁 Here I am thinking about getting Twitter syndication working on Netlify, and he wrote a perfect tutorial back in 2019. Definitely […]
In-depth guide to React testing
Very informative beginner's guide to testing React websites using Jest and the React Testing […]
Dark mode in Gatsby
Josh outlines the various steps required to get a dark mode theme working properly in Gatsby. I've been wondering about adding a dark mode at some point and, honestly, I'm amazed by the number of […]
Jumping into webmentions with NextJS
Great overview of how to deal with webmentions on a NextJS site. Should be applicable to other React SSGs like Gatsby. Useful […]
Generate an SEO-friendly sitemap for Gatsby
Josh keeps publishing articles that are both interesting to read and specifically useful to problems that I'm currently working on, but this time his article became the inspiration to solve a problem […]
Lists with Hanging Indent and Custom Counters
Customising 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 🚀
Writing my accessibility statement.
I have to admit: I didn't know what an accessibility statement was until I read Ethan's post 🙋♂️ That's not great. Now I do, so hopefully, in the near future, I'll get around to adding […]
A guide to getting onto the IndieWeb
IndieWebify.Me is the main service I've been using to get my site set up with IndieWeb technologies. It's a great, step-by-step tutorial on how to get involved and helps you easily test your […]
Crafty Aliases & Environment Variables
Craft CMS has the ability to accept environment variables as well as aliases. It can be worthwhile understanding how these two seemingly similar concepts differ, and when you might want to use one over the other.
Adding Search: User Interface (Algolia, Gatsby, Craft CMS - Part 2)
Having hooked up Algolia with my Gatsby build pipeline and populated a search index from my Craft CMS API, the next step was the build a frontend UI to enable users to actually query my posts. It turned out to be a pretty simple process.
Jamstack full course
A solid introduction to the Jamstack, including full build tutorials for an initial SSG setup with Eleventy and Netlify, integrations with the News API service and Open Weather, geolocation checks […]