A private podcast for friends

Spent the day making a private website and podcast feed for my friends and I to share audio recordings from our respective parts of the world. Mostly nature. All great.

Eleventy compiles the site using data from a collaborative Airtable base (this is how my friends will be able to upload their audio directly). Netlify is the host, which will likely be configured to re-deploy the site using an IFTTT trigger (once I set this up).

Full write up coming soon, let me know if interested in the meantime!

Loop through an arbitrary number of items in Nunjucks

Loop through an arbitrary number of items using the Nunjucks range function. This is very useful when prototyping to generate dummy markup or content. This example outputs 10 <div> elements:

{% for i in range(0, 10) %}
{% endfor %}

You can also include the index in the output, like so:

{% for i in range(0, 10) %}
  <div>{{ i }}</div>
{% endfor %}

I used this concept all the time when prototypying with Pug, but since I’ve been working with Eleventy more I’ve decided to switch to using Nunjucks where feasible, so I’m re-learning some old techniques. For completeness, here’s the Pug method:

for i in Array(9)
div #{i}

Site Query back online

Site Query is back online. I spent a little time resurrecting it, which mostly involved fixing a few minor bugs and removing the old build process (remember Grunt?). Since the code was already in a GitHub repository it made sense to host a working version on GitHub Pages, keeping it all nice and self-contained.

It was tempting to fix some of the poor design decisions and badly-written code, but I also liked the act of faithfully restoring something like this and just letting it do it’s thing.

Here’s some sample queries:

Moving RSS

I’ve decided to incorporate this blog into my main site, moving it from the subdomain where it previously lived. I think I’ve correctly redirected the old feed URL, but in case it doesn’t work please point your RSS readers to:


Thank you!

Default stylesheets

I’ve needed to refer to browser’s default stylesheets several times and it always takes me longer to find them than it should. Making a note here for future reference and in case it’s a helpful resource for others.

I’ve excluded Microsoft Edge since it’s soon (January 2020) going to be built on Chromium.

Compare pubs closely

What do you like about your favourite things? Compare pubs closely. What makes a good pub? Location, publican, people who use it, decor, privacy, good beer, comfort? Also launderettes. What makes one better to be in than another? Lighting, surfaces, facilities, efficiency? How would you make one better?

— Norman Potter, “Questioning design” from What is a designer (pp.157)

Blog typography update

The body copy on this site is now set in Standard and code is set in Courier, replacing Atlas Grotesk and Atlas Typewriter respectively.

Standard was released by Bryce Wilner in 2017, as a “translation and modification of Berthold’s 1896 version of Standard” (Standard being the name that Akzidenz-Grotesk was distributed under in England and the US). Wilner’s initial release was limited to book and book italic styles, but bold and bold italic styles have since been added.

Read more…

True superscript and subscript figures with font-variant-position

Most good typefaces include OpenType alternates for superscript (superior) and subscript (inferior) figures. Web browsers don’t appear to use these by default, and instead mimic these characters by shrinking the font size and adjusting the vertical alignment. This presents a nice opportunity for some progressive enhancement.

The snippet below leverages a font’s true super-/subscript numerals by resetting the default browser styling and then setting the font-variant-position property with corresponding values for sup and sub elements. The whole thing is wrapped in an @supports ruleset, so we can display the original faux super-/subscript numerals for browsers that don’t support font-variant-position (looking at you, Chrome).

Read more…

Tools I use


Read more…