This website is entirely open source. Check it out on GitHub. Read on for details.
My homepage footer shows an an equivalent amount of unique visits per phone charge. I use the EPA’s Greenhouse Gas Equivalencies Calculator to get that figure. They explain the smartphone emissions math here.
Here are some ways I’ve reduced the carbon footprint of my site:
- Subset and optimised fonts
- Aggressively optimised images
- Switched to web hosting that mostly runs on sustainable energy
- Minimised the use of imagery and video
- Cached assets where possible
See Sustainable Web Design for a full list of best practices which I am trying my best to stick to.
I write a lot of technical notes-to-self on this site. Some of them I revisit and improve over time. I also write the occasional musing or experiment.
Assigning a stage to each note frees me up to do both, all in the same space. It’s a solution I’ve copied from Maggie Appleton who calls them growth stages and uses them in a similar way.
Like Maggie, I use three stages:
|The first version of a note, regardless of its length. They all start here.|
|A note that has had some level of refinement.|
|A note that has had several rounds of updates.|
Writing an assumed audience selection frees me up to write unapologetically to a specific audience without preamble or watering the whole thing down.
This is still in flux. Here are the values I use in Utopia at the moment:
- Min: 320px
- Max: 1280px
- Article Max: 720px
The entire site is set in ITC Franklin Gothic, licensed through Paratype. I use Utopia to calculate and handle a fluid type scale. It goes from Minor Third (1.2) to Perfect Fourth (1.333).
See the Fonts section for implementation details.
Read on if you’re a nerd. It’s really just a collection of notes-to-self on how I maintain the website. A style guide, if you will.
Assume everything build-related in this colophon is heavily Eleventy-flavoured.
I exclude drafts by using the following in collection frontmatter:
--- eleventyExcludeFromCollections: true --- Draft blog post contents here.
It’s a simple brute-force way to exclude the file anywhere it might be looped through, such as on the Notes page. This lets me continue working on a draft post whilst seeing it in the browser (at its URL) without needing to set
if statements everywhere to exclude files with some bespoke
item.data.draft frontmatter value.
The Trove is a pinboard-esque section on my homepage that shows off what I’ve ‘pinned’ lately from around the web. I use Raindrop to collect these ‘pins’ and their API to pull them into my site. I use the eleventy-fetch plugin to cache these pins.
In terms of keeping the site ‘fresh’ with Trove data: I no longer use Netlify’s Scheduled Functions and instead just use this tension as healthy pressure to regularly update the site (thus refreshing Trove data along the way).
I made a macOS and iOS Shortcut for manual builds using Netlify’s Build Hooks for the scenario where I want to force a rebuild. That doesn’t visibly change the site if the data has already been refreshed in the last day, given that I have the netlify-plugin-cache package installed.
See the Images section of this page for how I process pinned imagery.
I use Markdown for anything longform on this site: pretty much just notes and this page here. I refer to this content type as
article in code.
You can add blockquotes in Markdown like so:
> Classics cut to fit fifteen-minute radio shows, then cut again to fill a two-minute book column.
But things get messy if you want to add a
cite tag. How is Markdown to know that both that and the quote above it should be treated as a single unit?
I use a raw HTML
figure element to wrap both blockquotes and the occasional accompanying
cite element for semantic reasons described in this CSS-Tricks article.
Here’s what that looks like in my Markdown files:
Regular Markdown content above. <figure class="quote"> <blockquote> <p> Classics cut to fit fifteen-minute radio shows, then cut again to fill a two-minute book column... </p> </blockquote> </figure> Regular Markdown content below.
I could figure out how to have the HTML write itself from Markdown automatically, probably in the same way I sweep up and turn straight quotes into smart quotes. For another day.
I use Graham F. Scott’s Embed Everything plugins for any YouTube and Vimeo video embeds. Graham’s plugins detect media from plain text (such as in your Markdown files) and automatically creates embeds. They look like this:
Here's some Markdown content followed by a YouTube video: https://www.youtube.com/watch?v=_ByEBjf9ktY&t=180s That will be turned into a nicely formatted `<iframe>` during build.
I’ve turned on Paul Irish’s Lite YouTube Embed method for the YouTube embed.
The Trove section of the homepage is an exception to my Cloudinary setup. Instead, I use the eleventy-img plugin to download, reformat, and resize Trove image via the
troveImg shortcode. I like this method because eleventy-img will generate HTML according to what image sizes are available. For example: if the original image for a Trove item is lower resolution than one or more of my desired widths, it will only generate HTML for the ones it can supply.
loading="lazy" to all images except for those above-the-fold.
I use WOFF2 across the board. Fonts have been subset using pyftsubset. I can’t find a record of what I subset the fonts to exactly, but I’m pretty sure it was Latin characters and a subset of common Unicode ones.
I’ll update this section next time I run the subsetting, or when I make the subsetting happen automatically upon build based on what characters are actually used on the site.
See the Typography section for design details.
See feed.njk. It loops through my note collection and excludes drafts.
- Regular CSS now does a lot of the things we used to use Sass for (such as variables and nesting)
- LightningCSS fills in the gaps more elegantly