Damian Walsh

2025 in review

2025-12-29T00:00:00Z

I've always enjoyed reading end-of-year summaries—you know the kind, where actual people reflect on what they've read, watched, listened to, or been otherwise occupied with over the year. I've discovered great recommendations this way and appreciated them all the more because they felt personal, especially compared with the flat-packed recaps currently in vogue. It's something I've wanted to do myself for a long time, and starting now seems more rather than less relevant to me. This is the first year I have all that data to hand, where I can reference and reflect on it without piecing together information from a patchwork of platforms and services.

Reading

I read 34 books in 2025—down from 44 in 2024. I can't think why this would be. If anything, I was even less occupied with commercial work this year than last. So I certainly should have had the time, if not necessarily the money. Reading, in this economy?

Reading by Month: 2024 vs 2025

Looking at the data, I read more consistently throughout 2024, while 2025 was marked by sharper peaks and troughs of activity. I started strong—reading a respectable six books in January—but couldn't maintain the pace. I managed only two in February, one in March, before petering out entirely in April. Was I focused on personal projects and writing more, or something else? I redeemed myself in August, finishing nine books—mostly page-turners, admittedly—while recharging my batteries and enjoying the fine weather around then.

Reading by Genre: 2024 vs 2025

In 2024, I read mostly historical fiction and crime novels before becoming slightly obsessed with space opera. James Clavell's Asian Saga—particularly the sweeping, epic Shōgun, with its vivid descriptions of the terrible beauty and cruelty of 16th-century Japan—was my favourite book of the year. This year, apart from a couple of notable exceptions, including Brian Eno's diary A Year With Swollen Appendices in January, which signposted the way to creative rejuvenation for me, science fiction has been the only game in town. I very much enjoyed Iain M. Banks' Culture series. The scope of the storytelling felt more expansive compared with other novels in the genre I've read this year. Are present circumstances driving me towards escape into outer space and the future? Maybe…

Music

The trend of not going to gigs continues. Crippling anxiety and panic attacks in crowded, confined spaces remain a real and ongoing drag. As annoying and inconvenient as that is, it didn’t stop me engaging with music in other ways—I worked on my music collection project on and off throughout the year. In October, I stumbled across Jason Dettbarn's wonderful and generous Crucial Tracks project, a slow social music app that's perfectly suited to this kind of reflective listening and sharing. I've been using it to journal my thoughts about the music I already own, really listening to the whispers and echoes from the past and what they are telling me.

27 Oct 2025: What song best captures your current phase of life?

From time to time, The Changingman by Paul Weller resonates with me. Thinking about where I am and how I'm feeling right now—in truth, perhaps over the last couple of years—I might need to pay heed to the song's message: when you're stuck in a rut, you need to shake things up.

It's been a fruitful exercise, and I hope to maintain the practice and find ways to weave these scribbles back into my music collection. Some might question its purpose or utility, or argue about what it is and how to categorise it, but for me, the difference lies in ownership—it's built to my preferences and specifications, and ultimately benefits me first and foremost.

The only new music I acquired this year was Constellations For The Lonely by Doves—a thoughtful and gratefully received gift. It's lovely, by the way, and so good to hear Jimi Goodwin's melancholy baritone on record again.

TV and movies

I haven't gotten around to building a way to record the TV shows and movies I've watched—something to add to my 2026 to-do list. In any case, this has been a fairly quiet year. I can't recall going to the cinema even once and haven't felt the need to put any more money in the pockets of commercial streaming services. God only knows what they'd do with it. That said, I really enjoyed working my way through a backlog of world drama series on Channel 4.

TV highlights

1985

Language:: Dutch
Years:: 2023

IMDb

Astrid et Raphaëlle (Astrid: Murder in Paris)

Language:: French
Years:: 2019-

IMDb

Badehotellet (Seaside Hotel)

Language:: Danish
Years:: 2013-

IMDb

De Dag (The Day)

Language:: Dutch
Years:: 2018

IMDb

De Kraak (The Bank Hacker)

Language:: Dutch
Years:: 2021

IMDb

Faking Hitler

Language:: German
Years:: 2021

IMDb

Harjunpää (Helsinki Crimes)

Language:: Finnish
Years:: 2022-

IMDb

Hierro

Language:: Spanish
Years:: 2019-2022

IMDb

Il metodo Fenoglio - L'estate fredda (Cold Summer)

Language:: Italian
Years:: 2023

IMDb

Ivalo (Arctic Circle)

Language:: Finnish
Years:: 2018

IMDb

R.I.P. Henry

Language:: Norwegian
Years:: 2023

IMDb

Sløborn

Language:: German
Years:: 2020-2024

IMDb

Sorjonen (Bordertown)

Language:: Finnish
Years:: 2016-2020

IMDb

Top Dog

Language:: Swedish
Years:: 2020-2023

IMDb

Health and relationships

I turned 49 in September. All things considered, I feel pretty good. I'm not ready to be consigned to the scrap heap, knacker's yard, or glue factory just yet. This year also heralded 30 years since going off to university, and I marked the occasion by returning to Exeter for a reunion with contemporaries. It was a wonderful, life-affirming trip down memory lane. A tidal wave of fond recollections from the time I spent there in the 1990s came crashing back: scrumpy cider, square pizza, bar billiards, being addressed as "my lover" by strangers in broad West Country accents, and most of all, memories connected with my buddies Steve and Al. There was a long period when I measured success differently, but my perspective has shifted. I now find myself more grateful to have made and kept some good friends. I love you guys!

Now and then

Side note: apart from the fact we all looked a whole lot more winsome as callow youths, I noticed how much better the photos from back then look compared with the pictures taken recently using iPhones. Those old shots were all captured on a Canon AE-1 (technology from the 1970s!), and we processed the film and developed prints ourselves in the university's darkroom. Progress isn't always what marketing wants you to believe, bro…

Travel

An ageing dog and cost-of-living concerns circumscribed my perambulations this year. I'm not complaining—getting a little dog, looking after him and letting him look after me is the best thing I ever did, and I know that I'm very lucky to live a relatively comfortable life. That said, I hope my horizons expand beyond suburban Manchester in my next—and fiftieth—circuit around the sun.

Work and career

By some measures, a quiet year with little to report. I've been indifferent to the commercial world this year, and it responded in kind. But I haven't let the grass grow beneath my feet. After some bruising experiences, I started the year with a sketchy plan to build a digital garden and write about my efforts as a way to rediscover my professional identity.

Including this post—which I suspect will be the last I manage to cast off this year—I wrote seven posts in 2025, with a total word count of 12,823, all connected to the project in some way. As someone who has previously struggled with self-doubt when writing and sharing my thoughts and feelings, I'm proud of this growing body of work, which more honestly reflects my own interests and motivations, and I now find myself able to think, write, and publish with greater confidence and speed.

Articles published in 2025

2025 in review
A personal year in review—thoughtful reflection over generated highlights
29 Dec 2025
A year in a digital garden
Breaking free from walled gardens and rediscovering purpose on the open web
12 Sep 2025
Scheduled deployments for Eleventy websites
Automating builds with Netlify Build hooks and GitHub Actions
25 Jul 2025
Building a digital bookshelf with Eleventy
Managing a personal reading list with Eleventy and the OpenLibrary API
17 Jul 2025
Creating connections with music and technology
Building a personal digital music library with Eleventy and APIs
25 Feb 2025 (Updated 09 Jul 2025)
Dynamic colour palettes with OKLCH and CSS custom properties
Using colour theory and modern CSS to generate colour systems
17 Feb 2025 (Updated 08 Feb 2026)
Cultivating a digital garden
Design, burnout, and the journey back
13 Jan 2025

In November, I worked with Bob Monsour on a redesign of his wonderful resource, the 11ty Bundle. Working together, we completely rebuilt the website from the ground up. Big thanks to Bob for taking a leap of faith and involving me in the design and front-end work. What a great guy—I had fun collaborating on this project. And it feels good to put something back into the Eleventy community, which has been a brilliant experience overall.

11ty Bundle

I now find myself in quite a different place to where I stood at the beginning of this year, questioning everything about what I do—and how and why I do it. I feel better about myself, the way I see things, what I do, and what I can offer. And really, that is enough—I am enough. It's taken the best part of a year to get here, but going into 2026, my compass is set in the right direction again. Optimism and hope, not fear and pessimism.

"I don’t really believe in luck; things happen to everyone, but you have to be ready for them."

Brian Eno

A year in a digital garden

2025-09-12T00:00:00Z

At the end of 2024, a period of reflection on my professional life and relationship with technology—from both sides of the glass: as a user and sometime worker in the industry—led me to start this digital garden project as a way to reconnect with work I find meaningful and engaging, helping me reset my professional identity based on my own interests. As summer gives way to autumn, a natural time for planning ahead in any garden, I want to reflect on what I've accomplished so far.

Things I have learnt

My original motivation was simple, but the project has led me in some unexpected directions—as creative endeavours inevitably will. Pursuing ideas all the way through to completion, then documenting and sharing my discoveries, created a ladder I could use to climb out of despondency and taught me new things about technology and, to some extent, myself that I hadn't anticipated in the process.

Articles published

Skills acquired

APIs

CSS

JavaScript

Performance

Lighthouse

Web standards

Growth and impact

At the outset, I set myself a number of guiding principles. As a result, I don't track the conventional statistics used to measure growth—visits, clicks, impressions, and so on. Even if I had these metrics to hand, they still would not serve as my yardstick.

Instead, I prefer to gauge progress through meaningful indicators of personal development. Similarly, in terms of impact, this cannot be measured in revenue. I would rather focus on the kindness and supportive feedback from people around the world since I began this project. If anyone who shared any of these messages is reading this, I want to thank you and tell you they have greater value to me. It meant a lot.

Personal growth metrics

Words written	Pages built	GitHub commits
11049	1420	250

Encouragement and recognition

Your music page is so cool! Everyone should see it. It's so wonderfully organised. I learned a lot from you and want to thank you so much for writing about it all.

Special thanks to Damian Walsh, whose post about building a personal music library, inspired me to create my own page for my music collection.

Your management methods have given me some ideas, especially around using APIs to fetch external data.

Nice! If you're interested in doing a talk for the 11ty meetup on it, let me know!

This is excellent. Thanks again for sharing this! Super cool.

I'm late to the party but this looks awesome!

Cool write up, I enjoyed the music one too!

Awesome! You've taken this to a new level.

Excellent write-up!

Amazing work Damian!

Reflections

Some argue the open web is slowly being suffocated by the creep of walled gardens driven by engagement algorithms and rising tide of AI. I disagree. My experience with this project tells a different story—one of creative possibilities, personal growth and human connection that stands as an alternative, hopeful vision. And I share these reflections not just to strengthen my own determination, but hopefully to inspire others considering similar journeys.

Instead of scrolling meaningless content, as if endlessly descending a ladder to nowhere or having your thoughts, feelings, hopes, and dreams confined within a grey plastic box, self-publishing on the open web is a doorway to a playground where you choose your own adventure. You could be:

A writer using words to clarify thoughts and shape your worldview
An artist painting on the web like a canvas with HTML, CSS, and JS
A librarian curating knowledge based on your own unique perspective
A detective solving code puzzles and technical mysteries
An astronaut at the controls of your own rocket ship

Above all, you can be authentic and real—you can simply be yourself. By doing this, you add to the web’s tapestry, using the warp and weft to weave enigmatic personal details waiting to be discovered, or creating a reminder for yourself of who you once were or are yet to be. That's something worth fighting for, isn't it?

Scheduled deployments for Eleventy websites

2025-07-25T00:00:00Z

When I first built and released the latest iteration of this website with Eleventy in January 2025, my workflow went something like this: to make changes, I would run the dev server locally with npm run dev, then when I was happy, I'd trigger a build with npm run build, which produces a production-ready build in the _site directory.

package.json

{
  "type": "module",
  "scripts": {
    "dev": "eleventy --serve",
    "build": "eleventy"
  },
  "dependencies": {
    "@11ty/eleventy": "^3.0.0"
  }
}

When I wanted to release the changes (i.e., put them on my live website), I would push the code to GitHub, including the output site directory. Netlify, which I use to host my website, would then automatically deploy it. This process works by connecting a GitHub repository to a Netlify website.

netlify.toml

[build]
  publish = "_site"
  command = ""

In the root of my project, this file tells Netlify what to do, which in this case is simply copy the locally built _site directory whenever it's pushed to GitHub. And that was it—a Continuous Deployment (CD) workflow. This method of deployment is straightforward, works great with static site generators like Eleventy, and served me well while I found my feet.

Fast-forward six months. After gaining knowledge by getting involved in the Eleventy community and confidence through writing and publishing posts, developing new features, and releasing updates, I began to notice some minor irritations. One of the key benefits of static sites is that they are, well, static. Generating everything up-front typically results in faster client-side loading times, but they won't update unless you tell them to. Looked at in another way, this could also be perceived as a drawback, for example if there's anything on the website that might require updating more frequently than your regular deployment workflow accounts for.

For argument's sake, let's say you wanted to display Webmentions on your blog and have new comments, reposts, and likes on any of your posts update every 24 hours. You could still always manually deploy, but this requires greater discipline in managing your local changes to avoid pushing half-baked content or features live at the same time. Another approach is to set up an automatic deployment that shifts the process of generating the production-ready _site directory away from your local environment.

Automating builds and deployment

This method allows deployments to be triggered manually by pushing new content and features to GitHub. Meanwhile, the automatic system works in the background, triggering remote builds on a schedule and notifying you when it was successful or if it encountered problems.

Creating a Netlify build hook

Log in to Netlify
Navigate to the site dashboard
Go to Project configuration > Build & deploy > Build hooks
Click "Add build hook"
Give it a name like "Scheduled Netlify Build"
Select the branch to build (usually "main" or "master")
Click "Save" and copy the generated URL (it will look like: https://api.netlify.com/build_hooks/123abc456def)

Creating a build hook in the Netlify dashboard

Adding GitHub Secrets

For email notifications, you'll need to securely store your email credentials. You could set up notifications through other channels, but email works for me.

Log in to GitHub and find the repository
Go to Settings > Secrets and variables > Actions
Click "New repository secret" and add the following secrets:
- Name: NETLIFY_BUILD_HOOK, Value: the build hook URL copied from Netlify
- Name: EMAIL_USERNAME, Value: your email address
- Name: EMAIL_PASSWORD, Value: your email password or app-specific password

Adding repository secrets in GitHub settings

Creating a GitHub Workflow

Next, create a GitHub Actions workflow in your project. Create the directory structure if it doesn't already exist, then add the file.

.github/workflows/scheduled-build.yml

name: Scheduled Netlify Build

on:
  schedule:
    # Runs every day at midnight UTC
    - cron: '0 0 * * *'
  # Optional: Allow manual triggering
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Trigger Netlify Build
        id: netlify-build
        run: |
          RESPONSE=$(curl -k -s -o response.txt -w "%{http_code}" -X POST -d {} ${{ secrets.NETLIFY_BUILD_HOOK }})
          if [ "$RESPONSE" -eq 200 ] || [ "$RESPONSE" -eq 201 ]; then
            echo "build_status=success" >> $GITHUB_OUTPUT
            echo "Netlify build triggered successfully"
          else
            echo "build_status=failure" >> $GITHUB_OUTPUT
            echo "Failed to trigger Netlify build. Response code: $RESPONSE"
            cat response.txt
            exit 1
          fi

      - name: Send email notification
        if: always()
        uses: dawidd6/action-send-mail@v3
        with:
          server_address: your-smtp-server-name
          server_port: your-smtp-server-port-number
          secure: false
          username: ${{ secrets.EMAIL_USERNAME }}
          password: ${{ secrets.EMAIL_PASSWORD }}
          subject: Netlify Scheduled Build ${{ steps.netlify-build.outputs.build_status == 'success' && 'Started' || 'Failed' }}
          body: |
            The scheduled Netlify build was ${{ steps.netlify-build.outputs.build_status == 'success' && 'triggered successfully' || 'failed to trigger' }}.

            Time: ${{ format(github.event.repository.pushed_at, 'dddd, MMMM Do YYYY, h:mm:ss a') }}
            Repository: ${{ github.repository }}

            View build status in Netlify dashboard:
            https://app.netlify.com/sites/your-netlify-site-name/deploys
          to: ${{ secrets.EMAIL_USERNAME }}
          from: GitHub Actions

The workflow uses the build hook to trigger Netlify to automatically rebuild the site remotely at midnight UTC daily and send email notifications about whether the build was successfully triggered, not whether the actual build and deployment succeeded—this can be configured in Netlify's notification settings.

Configuring the project for remote builds

Finally, update Eleventy's configuration files to account for the transition to a remote build process:

package.json

{
  "type": "module",
  "scripts": {
    "dev": "eleventy --serve",
    "build": "eleventy"
  },
  "dependencies": {
    "@11ty/eleventy": "^3.0.0",
    "netlify-plugin-cache": "^1.0.3",
  }
}

The netlify-plugin-cache package enables Netlify to maintain a persistent cache between builds, improving build times for subsequent deployments.

netlify.toml

[build]
  publish = "_site"
  command = "npm run build"
[[plugins]]
package = "netlify-plugin-cache"

  [plugins.inputs]
  paths = [
    ".cache"
  ]

Adding the npm run build command tells Netlify to build the site remotely instead of simply copying the locally built version. The plugins and plugins.inputs sections configure persistent caching and specify which directories to cache between builds. This prevents Eleventy from reprocessing unchanged assets on each build. If you're using additional plugins like Eleventy Image, remember to add their output directories to the paths array as well.

.gitignore

_site/
node_modules/
.cache

Now that the site is built remotely on Netlify's servers, the _site directory no longer needs to be committed to the GitHub repository and can be added to .gitignore and removed from Git tracking with git rm -r --cached _site.

And that's it! After committing and pushing these changes to GitHub, the workflow appears under the Actions tab of the repository. From there, it can be triggered manually as needed, and will also run automatically on the daily schedule.

Acknowledgements

Thanks to Sia and Vrugtehagel, whose comments and advice in the Eleventy Discord introduced me to scheduling deployments and using disk caching to speed up builds.

Building a digital bookshelf with Eleventy

2025-07-17T00:00:00Z

Building on my experience creating a digital music library with Eleventy and APIs, I wanted to apply similar principles and lessons learned to organise my book collection. Creating a digital bookshelf with a static site generator isn't particularly new or original. Many similar projects and write-ups already exist. This one simply documents my personal approach.

The OpenLibrary API

Several providers offer programmatic access to retrieve information and help organise a personal book library. I selected OpenLibrary because its ethos aligns with one of my overarching principles for this project: using services that strike a balance between public good and commercial interests. OpenLibrary offers a range of APIs, including the My Books API, which could essentially be used as a CMS, and the Books API, which I use to retrieve information.

Editions vs Works

OpenLibrary organises books in two main ways: Editions and Works. When you consider the book you're currently reading, you're most likely thinking about a specific Edition. Works, on the other hand, are collections of related Editions—including translations, previous versions, and various formats. Works contain general information about a book, while Editions include specific details like publisher and International Standard Book Number (ISBN).

Both Work and Edition pages on OpenLibrary can be accessed as JSON by simply changing the page URL. To illustrate the difference in data returned by the API, I'll use one of my favourite books as an example: The Secret History by Donna Tartt.

Edition: openlibrary.org/books/OL38246222M.json

Work: openlibrary.org/works/OL4321141W.json

Using the Work ID instead of the Edition ID can occasionally produce unexpected results—such as returning a description in a language other than English. Despite this, I prefer using the Work ID to retrieve information and linking to this record on OpenLibrary. This way, if a visitor to my website discovers a book they want to read, they can more easily find an edition that suits their needs—whether that's format (audiobook, ebook, print), language, or how they get hold of it. I appreciate that OpenLibrary provides links to find libraries where a book can be borrowed or shops selling used books. It's more inclusive—this benefit outweighs any potential drawbacks.

Creating a library catalogue

Like my music collection, I organise my books using principles traditionally used in libraries within a Global Data File. Each entry acts as an index card, with the OpenLibrary ID functioning as its call number.

{
  "title": "The Secret History",
  "author": "Donna Tartt",
  "openlibrary_key": "OL4321141W",
  "date_read": "2018-11-08",
  "favourite": true,
  "genres": [
    "Fiction"
  ]
},

One drawback of using community-driven sources of information is that the responses from the API may not always match your own personal preferences. I wanted to organise my book collection using a familiar set of categories, so I add my own genres instead of using subjects returned by the OpenLibrary API. This highlights one of the key benefits of personal websites and the flexibility that tools like Eleventy provide to organise and arrange content in ways that match your own way of thinking.

Enriching book data

To enrich raw data with additional details from OpenLibrary, I create a script that uses Eleventy Fetch to handle API requests. The script processes each book in my collection, using the OpenLibrary ID to fetch additional details and create an enriched version used in my Collections.

import "dotenv/config";
import EleventyFetch from "@11ty/eleventy-fetch";
import { promises as fs } from "fs";

const OPENLIBRARY_USER_AGENT = process.env.USER_AGENT;

async function fetchOpenLibraryData(url) {
  return EleventyFetch(url, {
    duration: "1y",
    type: "json",
    fetchOptions: {
      headers: {
        "User-Agent": OPENLIBRARY_USER_AGENT,
        "Accept": "application/json",
      },
    },
  });
}

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function fetchBookDetails(book) {
  if (!book.openlibrary_key) {
    console.error("No OpenLibrary ID provided for book:", book.title);
    return book;
  }
  const url = `https://openlibrary.org/works/${book.openlibrary_key}.json`;
  try {
    const bookDetails = await fetchOpenLibraryData(url);
    await delay(1000);
    return {
      ...book,
      first_publish_date: bookDetails.first_publish_date,
      description:
        typeof bookDetails.description === "object"
          ? bookDetails.description.value || ""
          : bookDetails.description || "",
    };
  } catch (error) {
    console.error(`Error fetching details for ${book.title}:`, error);
    return book;
  }
}

async function enrichReadingList() {
  try {
    const localData = await fs.readFile("_data/reading.json", "utf8");
    const myBooks = JSON.parse(localData);
    const enrichedBooks = await Promise.all(myBooks.map(fetchBookDetails));
    await fs.writeFile(
      "_data/enriched/reading.json",
      JSON.stringify({ current: enrichedBooks }, null, 2)
    );
    console.log(`Successfully enriched ${enrichedBooks.length} books.`);
  } catch (error) {
    console.error("Error processing book list:", error);
  }
}

if (process.argv[1].endsWith("enrichReading.js")) {
  enrichReadingList();
}

export { enrichReadingList };

Organising books with Collections

The Collections API can be used to access and organise data. I use it to arrange my enriched book data in several ways—sorting by author surname, genre, or reading date. For example, my genre collection configuration creates an array of genre objects, each containing the genre name and all books belonging to that genre. Books tagged with multiple genres appear across different genre groups. Any books without genres are assigned to an "Uncategorised" group.

eleventyConfig.addCollection("booksByGenre", function (collectionApi) {
    const enrichedReading = require("./_data/enriched/reading.json");
    const books = enrichedReading.current;
    const genres = [];
    const booksByGenre = {};

    books.forEach(book => {
      if (book.genres && book.genres.length > 0) {
        book.genres.forEach(genre => {
          if (!booksByGenre[genre]) {
            booksByGenre[genre] = [];
          }
          booksByGenre[genre].push(book);
        });
      } else {
        if (!booksByGenre["Uncategorised"]) {
          booksByGenre["Uncategorised"] = [];
        }
        booksByGenre["Uncategorised"].push(book);
      }
    });

    Object.keys(booksByGenre)
      .sort()
      .forEach(genre => {
        genres.push({
          genre: genre,
          books: booksByGenre[genre]
        });
      });

    return genres;
  });

Creating pages from data

Taking genres as an example, individual pages for each Collection are automatically generated using pagination to create multiple files from a single Nunjucks template. The following example shows the YAML front matter that generates individual genre pages.

---
eleventyNavigation:
  key: "reading-genre-{{ genreData.genre }}"
  title: "{{ genreData.genre }}"
  parent: reading-genres
eleventyComputed:
  title: "{{ genreData.genre }} | Reading"
pagination:
  data: collections.booksByGenre
  size: 1
  alias: genreData
permalink: "/reading/genres/{{ genreData.genre | slugify }}/"
---

Managing data with a CLI

To simplify the process of adding and editing book data, I built a simple command-line tool using Commander and Inquirer, eliminating the need to manually edit JSON files or run separate scripts for tasks. The current CLI includes functions which take care of:

Adding new books

Add required details (title, author, OpenLibrary ID)
Record date read
Mark if the book is a favourite
Assign genres from a predefined list via a multi-select interface
Resize images using ImageMagick and create filenames with URL slugs that match those used in templates (e.g., the-secret-history-donna-tartt.jpg)
Enrich with additional data from the OpenLibrary API

Editing genres for existing books

Select books from list sorted alphabetically by author and title
Add or remove genres using a multi-select interface
Update the raw and enriched data files

The entire workflow is simplified to a single command—npm run reading followed by interactive prompts.

Command-line interface for book collection

Digital bookshelf

Now I can browse my website to find books I've read in one place—rather than searching across various platforms or digging through stacks of printed books. I can sort my collection by author, genre, or year read, and easily identify my favourites.

Templates rendered by Eleventy

Retrospective

As I discovered with my music collection project, having the courage to build something—anything—and publish it often triggers a wave of new ideas. The difference between the two projects is how quickly they came together. This underlined an important lesson for me after a fairly dispiriting period in my professional life: when you focus on building proficiency, speed follows; focusing on speed alone won't make you faster.

Creating connections with music and technology

2025-02-25T00:00:00Z

Back in December 2024, while I was doing the usual end-of-year contemplation, Spotify's annual Wrapped feature arrived, ringing a bell in my mind. I realised my scattershot listening habits on Spotify and the snapshot Wrapped presents failed to capture my changing tastes over time or evoke feelings and memories in the same way as a tangible music collection. Music is a fundamental part of my life—I've always been a fan. My earliest memories are rooted in music, exploring my parents' vinyl collection and watching Top of the Pops, fascinated by the sounds and imagery. And later, making the rounds of record shops, building my collection, and plastering my teenage bedroom walls with band artwork, portraits, and memorabilia. In a funny sort of way, music was my gateway into design.

Always on My Mind by Pet Shop Boys

At the same time I was thinking about this, I was also feeling generally uninspired about the tech industry’s current direction and its impact on the world—especially compared to earlier visions of the internet. I want to direct my online thinking and doing toward something I believe in. My music collection seemed to be one of the areas I could meaningfully apply technology to connect with something I'm passionate about and learn something new in the process. I've previously written about cultivating a digital garden to achieve these aims. One of the concepts I came across while researching the idea was the Memex, proposed by Vannevar Bush in his 1945 article As We May Think.

Theoretical Memex (memory index) device

Bush envisioned a device that would act as a personal knowledge repository, capable of storing and organising books, records, and other information while automatically creating connections between them—essentially serving as a personalised library system. This concept seemed useful for applying to one of the challenges with physical media collections like music and books: as collections grow larger, they become increasingly difficult to organise, navigate, and use to retrieve the ideas and emotions contained within them.

Eleventy

To turn this concept into a working application that would help me reconnect with my music collection, I turned to Eleventy, a static site generator. I had a basic working knowledge of Eleventy before developing the latest iteration of this website in January 2025—learning more was the motivating factor in choosing it. Fortunately, it turned out to be well-suited to this type of task and has an active, supportive community around it.

The rest of this document outlines my approach, decisions made along the way, challenges encountered and solutions found, including some code examples. Rather than a technical how-to guide, think of it as a living document of release notes tracking the progress and evolution of ideas.

Version 1: Proof of concept

January 2025

So, in summary, here's where I stood at the outset: Spotify Wrapped galvanised me into action and Bush's Memex concept signposted the direction I wanted to move in.

My music collection

Things I know:

I have approximately 500 records—CDs from 1991–2015 and vinyl from 2017–present—that I want to organise meaningfully. I don't have purchase dates for most of the collection.
I want to build my own system, incorporating automation using tools and services that align with my values, learning something through the process.

Assumptions:

APIs can provide the data and be used to create the automated connections needed for a personalised library system.
I can master Eleventy sufficiently to make it serve my needs.

Library classification

Libraries employ classification systems to organise materials on shelves and in catalogues and indexes. Each item gets a call number indicating its location within the system. In record shops, you encounter a faceted classification system that separates vinyl from CDs and organises records by genre (like Rock and Pop), then sorts them alphabetically by artist.

Library classification systems

The record industry uses its own system of identifiers called ISRC (International Standard Recording Code), but these aren't readily accessible. Instead, barcodes and label catalogue numbers printed on sleeves and discs—which identify specific versions of releases—can be used to connect physical collections with APIs and create a digital library organised similarly to record shops.

API comparison

There are a range of APIs that provide metadata to help organise and catalogue a library of music releases. The question is which one to choose. I picked several and tried to compare the relative benefits of each:

	Discogs	MusicBrainz	Spotify
Physical media focus	Excellent	Good	Limited
Data completeness	Extensive physical release data, high accuracy for vinyl/CD	High for basic metadata, community-maintained	Comprehensive for streaming content, limited physical media data
API rate limits	60 requests/minute authenticated	1 request/sec for anonymous, 4/sec authenticated	Several tiers based on API quota
Community contribution	Moderated submissions	Open editing	Closed system
Cost	Free for non-commercial use	Free, open source	Free tier available

Discogs appears to best fit my needs and aligns with one of my overarching principles for this project: using services that strike a balance between public good and commercial interests.

Selecting metadata

Taking one of my favourite records as an example: Brian Eno's Another Green World. Using the barcode printed on the sleeve (0602557703887), I can search Discogs and see the resulting URL reveals its release ID (11176407). With this ID, I can fetch information about this specific release at the command line:

curl https://api.discogs.com/releases/11176407 --user-agent "FooBarApp/3.0"

The API returns a wealth of information in JSON format. From this data, I can cherry-pick the essential key/value pairs to display and organise releases in my collection according to format, genre, release year, and artist. Here's a simplified version of the response showing these fields:

{
    "year": 2017,
    "uri": "https://www.discogs.com/release/11176407-Eno-Another-Green-World",
    "formats": [
        {
            "name": "Vinyl",
            "descriptions": [
                "LP",
                "Album",
                "Reissue",
                "Remastered"
            ],
            "text": "180 gram"
        }
    ],
    "videos": [
        {
            "uri": "https://www.youtube.com/watch?v=bNwhtnaoVZU"
        }
    ],
    "genres": [
        "Electronic"
    ],
    "tracklist": [
        {
            "position": "A1",
            "title": "Sky Saw",
            "duration": "3:25"
        }
    ]
}

Release dates

Release dates are a bit of a minefield. While they reliably follow the ISO 8601 format (YYYY-MM-DD), entries can contain partial dates (YYYY or YYYY-MM), and release dates vary between regions like the US and UK. Since my vinyl collection consists mainly of reissues, the dates returned by the API reflect when the reissue was published rather than original release dates. Some degree of imprecision doesn't bother me—this isn't meant to be an encyclopedia. What matters most is having at least the original release year—it allows me to access personal memories by consulting my library and playing records from specific years.

Global Data Files

Before the internet, online databases, and standardised cataloguing protocols, libraries relied on a physical library catalogue system. This used index cards to record key details about each item, making it easy to find and retrieve materials. Following this principle, I use a Global Data File to organise my collection—each entry functions like an index card, with the release ID serving as its call number.

{
  "artist": "Brian Eno",
  "title": "Another Green World",
  "format": "Vinyl",
  "release_id": 11176407,
  "first_released": "1975-11-14",
  "favourite": true
},

In a separate Global Data File, I configure the Fetch plugin to manage data requests. The plugin caches data locally to avoid bombarding the API with requests for assets including JSON, HTML, images, videos, etc. Walking through the code, here's how I fetch data from the Discogs API:

Import Node packages to manage environment variables, handle API requests, and perform asynchronous file operations
Set up Discogs API token and user agent from environment variables for authentication

import "dotenv/config";
import EleventyFetch from "@11ty/eleventy-fetch";
import { promises as fs } from 'fs';
const DISCOGS_TOKEN = process.env.DISCOGS_TOKEN;
const DISCOGS_USER_AGENT = process.env.USER_AGENT;

Firstly, add a 1-second delay between API calls to respect Discogs' rate limits, and cache responses locally for 24 hours.

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
async function fetchWithRateLimit(url) {
  await delay(1000);
  return EleventyFetch(url, {
    duration: "1d",
    type: "json",
    fetchOptions: {
      headers: {
        'Authorization': `Discogs token=${DISCOGS_TOKEN}`,
        'User-Agent': DISCOGS_USER_AGENT,
      },
    }
  });
}

Next, read the library catalogue, which contains index cards with details about each item.

export default async function () {
  try {
    const localData = await fs.readFile('_data/musicCollection.json', 'utf8');
    const myCollection = JSON.parse(localData);
    const releases = await Promise.all(myCollection.map(fetchReleaseDetails));
    return { releases };
  } catch (error) {
    console.error('Error processing music collection:', error);
    return { releases: [] };
  }
}

Finally, details are fetched from the Discogs API using the release IDs, transforming everything into a consistent format that can be used in collections and templates.

async function fetchReleaseDetails(release) {
  if (!release.release_id) {
    console.error('No Discogs ID provided for release:', release.title);
    return release;
  }
  const releaseUrl = `https://api.discogs.com/releases/${release.release_id}`;
  try {
    const releaseDetails = await fetchWithRateLimit(releaseUrl);
    const uniqueFormats = new Set();
    return {
      ...release,
      year: releaseDetails.year,
      notes: releaseDetails.notes,
      released: releaseDetails.released,
      genres: releaseDetails.genres || [],
      uri: releaseDetails.uri,
      videos: releaseDetails.videos?.map(video => ({
        url: video.uri,
      })) || [],
      formats: (releaseDetails.formats || []).reduce((acc, format) => {
        if (!uniqueFormats.has(format.name)) {
          uniqueFormats.add(format.name);
          acc.push({
            name: format.name,
            descriptions: format.descriptions
          });
        }
        return acc;
      }, []),
      tracklist: (releaseDetails.tracklist || []).map(track => ({
        position: track.position,
        title: track.title,
        duration: track.duration
      }))
    };
  } catch (error) {
    console.error(`Error fetching details for ${release.title}:`, error);
    return release;
  }
}

Collections

The Collections API can be used to access and organise data. I use this feature to organise my music library in a variety of ways: grouping releases by artist, sorting by genre and format, organising by release year and creating related content connections. Collections are powerful because they let you transform and arrange content in ways that suit your specific needs.

For example, this collection organises music releases by year, handling various date formats and categorising releases by year. The parseDate function handles three date formats: year only (YYYY), year and month (YYYY-MM), and complete date (YYYY-MM-DD). When dates are incomplete, it defaults to the first day of the month or year.

const parseDate = (dateStr) => {
  if (!dateStr) return null;

  const parts = dateStr.split('-');
  // If only year is provided
  if (parts.length === 1) {
    return new Date(parts[0], 0, 1);
  }
  // If year and month are provided
  if (parts.length === 2) {
    return new Date(parts[0], parts[1] - 1, 1);
  }
  // If complete date is provided
  return new Date(parts[0], parts[1] - 1, parts[2]);
};

The releaseYears collection performs several tasks: it extracts years from the music data, prioritising first released date, removes duplicates, sorts chronologically, and groups releases by year.

eleventyConfig.addCollection("releaseYears", function (collectionApi) {
  const musicData = collectionApi.getAll()[0]?.data?.music;
  if (!musicData || !musicData.releases) {
    console.warn("Music data not found or invalid");
    return [];
  }

  const years = [...new Set(musicData.releases
    .map(release => {
      // Prefer first_released if available, otherwise use released
      const date = parseDate(release.first_released) || parseDate(release.released);
      return date ? date.getFullYear() : null;
    })
    .filter(year => year !== null)
  )].sort((a, b) => a - b);

  return years.map(year => ({
    year,
    releases: musicData.releases.filter(r => {
      // Prefer first_released if available, otherwise use released
      const date = parseDate(r.first_released) || parseDate(r.released);
      return date && date.getFullYear() === year;
    })
  }));
});

Filters

Eleventy provides built-in Filters to transform data within templates, you can also create custom filters. Here's a simple filter with a modest task—extracting just the year from a date string. I use it to create links to relevant year pages from within individual release pages.

eleventyConfig.addFilter("extractYear", (dateString) => {
  if (!dateString) return "";
  const parts = dateString.split('-');
  return parts[0];
});

Creating pages from data

Individual pages for artists, formats, genres, years, and releases are automatically generated using pagination to create multiple files from a single Nunjucks template. The following example shows the YAML front matter that generates individual release pages for each entry in my library.

---
eleventyNavigation:
  key: "{{ release.title }}"
  parent: Releases
eleventyComputed:
  title: "{{ release.title }} - {{ release.artist }} | Music Collection"
pagination:
  data: collections.releases
  size: 1
  alias: release
permalink: "/music/releases/{{ release.title | slugify }}-{{ release.artist | slugify }}-{{ release.format | slugify }}.html"
---

And from within the template itself, filters are applied to collection data to format dates and generate links to relevant artist, year, format, and genre index pages.

<dl class="detail__meta">
  <dt>Artist</dt>
  <dd><a href="/music/artists/{{ release.artist | slugify }}.html">{{ release.artist }}</a></dd>
  {% if release.released or release.first_released %}
  <dt>Release date</dt>
  <dd>
  {% if release.released %}
  {% if release.first_released and release.first_released !== release.released %}
  {{ release.released | readableDate }} (first released: <a href="/music/years/{{ release.first_released | extractYear }}.html">{{ release.first_released | readableDate }}</a>)
  {% else %}
  <a href="/music/years/{{ release.released | extractYear }}.html">{{ release.released | readableDate }}</a>
  {% endif %}
  {% else %}
  <a href="/music/years/{{ release.first_released | extractYear }}.html">{{ release.first_released | readableDate }}</a>
  {% endif %}
  </dd>
  {% endif %}
  <dt>Format</dt>
  <dd>
    <a href="/music/formats/{{ release.format | slugify }}.html">{{ release.format }}</a>
    {% for format in release.formats %}
    {% if format.name == release.format %}
    ({{ format.descriptions | join(", ") }})
    {% endif %}
    {% endfor %}
  </dd>
  {% if release.genres %}
  <dt>Genres</dt>
  <dd>{% for genre in release.genres %}
    <a href="/music/genres/{{ genre | slugify }}.html">{{ genre }}</a>{% if not loop.last %}, {% endif %}
    {% endfor %}
  </dd>
  {% endif %}
</dl>

Images

Image quality from community-driven APIs like Discogs varies. What constitutes acceptable is subjective and personal. For me, the artwork is as intimately linked to my thoughts and feelings as the music itself. Using Another Green World as an example—you can see the primary image provided by the API displayed alongside the one I chose for my library. I've downloaded and hosted the API's image locally rather than hotlinking to it, since their version could change.

Image quality comparison: API vs personal choice

The API's version is marred by a sticker and, on closer inspection, has a distracting reflection on the cover. To take control over quality, I select and process my own images using ImageMagick installed with Homebrew. Within templates, I use the Eleventy Image plugin to automatically optimise images and the built-in slugify filter to construct paths to images.

Data cascade

In Eleventy, data from multiple sources merges through a process called the Data Cascade before templates are rendered. Using the library metaphor, Eleventy acts as a librarian—it consults the global data files (library catalogue) and uses the release ID (call number) to fetch data from the API, organise everything, and render templates when I run npx @11ty/eleventy at the command line. All this happens quickly, as Eleventy's report after building my site demonstrates: Wrote 1,310 files in 43.67 seconds (33.3ms each, v3.0.0).

Templates rendered by Eleventy

Retrospective

What have I learned? The concepts borrowed from Bush and libraries are worth pursuing—technology can be used to breathe new life into classic ideas.

The learning and development process has been enjoyable, rather than just a means to an end. Eleventy feels almost magical—there's no need for databases or complex frameworks. Instead, I can work with familiar web technologies (HTML, CSS & JS) and closely related concepts and tools.

If I can use Eleventy to build a time machine—unlocking personal memories and feelings by revisiting any specific format, genre, year, or artist in my library and playing these records—I wonder what else I can build?

The proof of concept has triggered new ideas that provide momentum to continue development, including:

Enriching API data with personal touches: highlighting standout tracks, tracking favourites over time, and adding personal reviews and memories connected to specific times, places, people, and events
Enhancing views with data visualisations (think Information is Beautiful)
Improving data requests and error handling
Refining image processing workflows
Adding search functionality

Looking back at my original motivation—disenchantment with streaming services and the tech industry's current trajectory—and comparing it to my experiences with this project brings to mind diving. Given the choice between diving into a stream or an ocean, who wouldn't choose the ocean?

Image from inside cover of Wish You Were Here
© Pink Floyd Music

Version 2: Memory boxes

February 2025

After reflecting on ideas generated during the proof-of-concept development, I faced a choice: pursue the idea of enhancing views with data visualisations—an appealing design direction—or focus on something more personally meaningful. I was already well aware of music's connection to memory, but was still surprised by the wave of memories and feelings that emerged when I organised my collection chronologically. Instead of adopting streaming platforms' one-size-fits-all organisational approach, I want to create personal pathways linking music to memory. I chose to follow the trail of ideas leading from enriching API data with memories connected to specific times, places, people, and events. This direction seemed more aligned with Bush's vision: creating a personal memory extension that, in this context, connects music to life experiences.

Building connections between music, memory and emotion

Things I know:

My initial assumptions about APIs and Eleventy—that they could provide the data and create the automated connections needed for a personalised library system—have now been confirmed.

Assumptions:

Building on lessons learned developing the proof of concept, I can create trails of reference that link my music collection with memories.

The working model of memory

The Working Memory Model, first proposed by Baddeley and Hitch in 1974 and updated in 2001, describes how the brain processes visual and auditory information. In this model, different compartments—the phonological loop, visuo-spatial sketchpad, episodic buffer, and central executive—each handle different aspects of processing. New information is initially stored in short-term memory before being related to long-term memory. Understanding this model (at a basic level) casts light on how visual and spatial cues might be used alongside music to unlock memories and feelings—triggering the episodic buffer, which integrates sounds, visuals, and long-term memories into brief, temporal experiences.

The Working Memory Model. Baddeley and Hitch (1974, 2001)

Zettelkasten

One of the concepts I came across while researching how to practically apply this idea to connect my music collection with people, places, and events was Zettelkasten—which, in addition to being a word that sounds good enough to eat—is a method of note-taking and personal knowledge management used for research, study, and writing. This system was also the original inspiration for the invention of wikis.

Zettelkasten knowledge management system.
Image by David B. Clear, licensed under CC BY-SA 4.0

I use this method to extend my music collection's data structure by creating additional Global Data Files to include people, places, and events.

people.json

 "steve-s": {
    "name": "Steve",
    "relationship": "University friend"
  }

places.json

"university": {
    "location": "University of Plymouth (Exeter College of Art and Design)",
    "coordinates": {
      "lat": 50.7099,
      "lng": -3.5135
    }
  }

musicCollection.json

 {
    "artist": "Supergrass",
    "title": "I Should Coco",
    "format": "CD",
    "release_id": 4147466,
    "favourite": false,
    "memories": {
      "people": [
        "steve-s",
        "alastair-j"
      ],
      "places": [
        "university"
      ]
    }
  },

This structure prevents duplicating person and place data across multiple entries in the main data file. Instead, it allows any number of people, places, or events to be linked using ID arrays, while making all the data accessible to templates through the Configuration file in the root directory.

export default async function (eleventyConfig) {

  const peopleData = require('./_data/people.json');
  eleventyConfig.addGlobalData("people", () => peopleData);

  const placesData = require('./_data/places.json');
  eleventyConfig.addGlobalData("places", () => placesData);
}

With this basic setup, I can display people, places, and events connected to specific releases on templates. As I discovered earlier, Filters can handle simple transformations, but more interestingly, they can also be used to create pathways to other releases that share the same people, places, and events.

eleventyConfig.addFilter("releasesWithMemoryConnections", function(allReleases, currentRelease) {
  if (!currentRelease.memories) return [];

  // Get the release's memories
  const currentPeople = new Set(currentRelease.memories.people || []);
  const currentPlaces = new Set(currentRelease.memories.places || []);

  // Filter releases that share people or places, excluding the current release
  const relatedReleases = allReleases.filter(release => {
    if (release.release_id === currentRelease.release_id) return false;
    if (!release.memories) return false;

    // Check for shared people
    const sharedPeople = release.memories.people?.some(person =>
      currentPeople.has(person)
    );

    // Check for shared places
    const sharedPlaces = release.memories.places?.some(place =>
      currentPlaces.has(place)
    );

    return sharedPeople || sharedPlaces;
  });

  // Sort by artist, then title
  return relatedReleases.sort((a, b) => {
    const artistCompare = a.artist.localeCompare(b.artist);
    if (artistCompare !== 0) return artistCompare;
    return a.title.localeCompare(b.title);
  });
});

Maps

Spatial memory, the visuo-spatial sketchpad in Baddeley and Hitch's model, plays a role in how we process and recall experiences. Cognitive maps—complex networks of spatial relationships between landmarks, paths, and distances—help us navigate both physical spaces and through memory. I wanted to harness this natural connection between location and memory by incorporating maps into the memory box feature.

I evaluated several map providers that offer programmatic access, comparing their benefits and drawbacks against my requirements and values:

Provider	Pros	Cons
Leaflet + OpenStreetMap	Full interactivity possible, open source	More complex setup - managing tile servers etc.
Mapbox	Simple implementation, generous free tier (50,000 map loads/month)	Credit card details required to access API key

Although Leaflet appeared to offer more customisation options and is fully open source, I chose Mapbox because it seemed easier for me to implement and suits my current needs for static maps with location markers while leaving the door open for adding interactive features later.

First, I configure the Fetch plugin in a separate Global Data File to manage requests for static map graphics from the Mapbox API. The code places markers at specified coordinates and creates map URLs for both single and multiple locations. By caching the map images, I avoid unnecessary API requests and minimise potential costs—though exceeding the free tier limit is unlikely given my collection size and map requirements.

import EleventyFetch from "@11ty/eleventy-fetch";

export async function generateStaticMap(places, mapboxToken) {
  // Filter out places without coordinates
  const markers = places.filter(place => place.coordinates);
  if (markers.length === 0) return null;

  const width = 800;
  const height = 400;

  // Create marker overlay string
  const markerString = markers
    .map(place => `pin-s+FF0000(${place.coordinates.lng},${place.coordinates.lat})`)
    .join(',');

  let mapUrl;
  if (markers.length === 1) {
    // Single marker - use center and zoom
    const marker = markers[0];
    mapUrl = `https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/${markerString}/${marker.coordinates.lng},${marker.coordinates.lat},12/${width}x${height}?access_token=${mapboxToken}`;
  } else {
    // Multiple markers - use auto
    mapUrl = `https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/${markerString}/auto/${width}x${height}?padding=50&access_token=${mapboxToken}`;
  }

  try {
    const imageBuffer = await EleventyFetch(mapUrl, {
      duration: "1d",
      type: "buffer"
    });
    return { imageBuffer, width, height };
  } catch (error) {
    console.error("Error generating map:", error);
    return null;
  }
}

Then, a Shortcode in my configuration makes the function available in templates to generate a map for the places associated with the release.

import { generateStaticMap } from './_data/maps.js';

export default async function (eleventyConfig) {
  eleventyConfig.addShortcode("memoryMap", async function (places) {
    const mapboxToken = process.env.MAPBOX_TOKEN;
    if (!mapboxToken) {
      console.warn("No Mapbox token found");
      return "";
    }

    const mapData = await generateStaticMap(places, mapboxToken);
    if (!mapData) {
      return "";
    }

    // Return map HTML with base64 encoded image
    const base64Image = mapData.imageBuffer.toString('base64');
    return `<img src="data:image/png;base64,${base64Image}"
           alt="Map showing memory locations"
           width="660" height="330" class="places__map">`;
  });
};

Release template

Finally, on the actual release pages, the visual design draws inspiration from diagrams of both Baddeley and Hitch's Working Memory Model and the Zettelkasten concept. The layouts flexibly adapt to different screen sizes and memory content. When I browse my library now, each release page functions as a personalised record sleeve, offering cues that help trigger memories as I play the music.

Examples of release pages with memory box feature:

Templates rendered by Eleventy

Retrospective

I've only mapped a couple of releases so far, and completing the process will take time. That's perfectly fine—like listening to music, I want to move at my own pace taking time to reflect and enjoy this project. Some of my working practices might be considered "agile" but this isn't a sprint, and there's no quarterly product review looming on the horizon. I view this as an enabling release that lays the foundation for future development, which might include:

Creating an admin interface that writes to data files, making it easier to establish bi-directional links and using collections to categorise releases by people, places, and events—similar to the existing system for artists, genres, and years.
Incorporating personal photographs by leveraging the existing people, place, and year data structures.
Enhancing the map functionality to create an interactive narrative showing the connections between music, people, and places.

Version 3: Time machine

June 2025

The previous iteration showed I could apply Baddeley and Hitch's Working Memory Model and the Zettelkasten method to create memory-based connections in my music collection. But—there's always a but, isn't there?—limitations emerged as I mapped more releases. Each addition triggered new memories and connections, revealing gaps in how the existing setup functioned as an aide-mémoire. Filtering one-way connections from the main data file to people, places, and events restricted how I could arrange content to match my way of thinking.

Organising and finding releases like a record shop works well in this respect when there's a clear, singular connection between release date and memory. A record like Definitely Maybe had a big impact on me when it was released. Listening to it now transports me back, evoking memories from that particular moment in life—nothing more, nothing less.

Things become complicated when records lack this straightforward type of connection. The Beatles are a perfect example: their records were released before I was born, and I didn't start adding them to my own collection until they were rereleased in the 2000s. Their songs evoke both childhood and more recent memories as I revisit these records later in life. Albums like Bandwagonesque or Fuzzy Logic, which I bought around the time they were originally released, now recall various periods in my life, different people and places, and a mix of feelings and emotions: friendship and loneliness, happiness and sadness. So the goal became how to organise and create pathways through my collection that help me find releases that summon memories from specific periods of my life or people, places, and events—quite different from the classifications used in streaming platforms.

Emotional impact vs technical features.
The Carousel Pitch, Mad Men Season 1, Episode 13

I've included this reference to a scene from Mad Men because, apart from being wonderful, it captures the essence of what I'm trying to achieve. And I suppose, because it also highlights the gap between how I think, what I want, and what these experiences often actually deliver.

Chapter-based organisation

Listening to records and making these connections not only brought me closer to my music collection and made me more mindful of associated memories—the process also revealed how to restructure the data files to achieve my goal of creating a more personally meaningful organisation. Introducing chapters creates a layer that can be used to organise releases and their associated memories—including related people, places, and events—into distinct periods marked by significant life events.

Chapters as a bridge between music and memory

Automating connections

I began by manually adding a few bi-directional links to test the idea. This experience underlined the benefit of automation, and my first thought was to create a typical CMS-style admin interface. A brief exchange on Mastodon with Spencer Harston led me to his blog post about managing data for his books page, helpfully guiding me towards using Node scripts.

musicCLI.js

This command-line tool built using Commander and Inquirer provides an interface to manage my music collection data.

Command-line interface for music collection

The CLI takes care of:

Adding new releases, chapters, people, places, and events
Automatically processing cover artwork
Creating bi-directional links between data files
Enriching data with information from APIs

The entire workflow is simplified to a single command—npm run music followed by various interactive prompts—eliminating the need to manually edit JSON files and run separate scripts for processing images, creating associations and data enrichment.

Navigating through memories

Instead of my original approach, using global data and Filter functions for memory connections on release pages, I now use Collections—creating multiple dimensions to explore. This approach enables me to generate different types of pages, opening up new ways to navigate my music collection via meaningful personal connections—essentially creating playlists that let me travel through time by linking releases to life periods, people, places and events.

Templates rendered by Eleventy

As always, there is room for improvement. In some ways, this version is little more than a walking skeleton, and my aspirations stretch beyond what is now ready for release. But the foundations are established and can be built upon.

Retrospective

Any creative process describes the path of a rollercoaster—with peaks of optimism and troughs of doubt. This latest version followed that arc—I've picked up the project and put it down several times, nearly throwing it out the window at least once. Its nature made me question whether I was using the past to shield myself from the present. Yet looking back can help you move forward. I've renewed neglected skills and learned new things along the way, rediscovering purpose in the work and what, for me at least, it means to be a designer. And in a twist of fate, a project about memories and nostalgia has enabled me to build new connections and feel part of a community again. The sun shines on Manchester, a garden begins to bloom, and I feel hopeful.

Acknowledgements

Several members of the Eleventy community have published valuable resources that helped me get started:

Andy Bell: Original author of Learn Eleventy from Scratch (now maintained by Uncenter).
Stephanie Eckles: Author of 11ty.Rocks.
Sia Karamalegos: Organiser of the Eleventy Meetup.
Zach Leatherman: Creator/maintainer of Eleventy.
Bob Monsour: Author of The 11ty Bundle website and newsletter.

Footnote

If you've read this far and found it useful, that makes me happy. If you'd like to offer advice on how I could improve my approach, please feel free—you can figure out how to get in touch with me easily enough. ↘

Dynamic colour palettes with OKLCH and CSS custom properties

2025-02-17T00:00:00Z

Designers often seem to face extremes when selecting and using colours. At one end of the spectrum, brand guidelines limit you to a few colours chosen for specific applications, with additional colours added later—sometimes purely for aesthetics or where the reasons are unclear. Some of the colours might have tints and shades while others don't, and where variations exist, there could be inconsistent saturation and lightness levels across the palette. This makes it challenging to create colour-dependent components like buttons and form elements and their various states. At the other end lies complete creative freedom, which sounds ideal until you're paralysed by the range of possibilities. Consider standard colour picker interfaces: they offer a world of colour to explore but provide no map for navigation.

When I set out to design the latest version of this website, I knew selecting colours would be a challenge and that I could easily spend a lot of time fussing over choices. Rather than using Figma (or similar tools) for upfront design or relying on CSS frameworks with predefined colours, I wanted to take a different path. I'm quite fond of Figma and recognise the usefulness of CSS frameworks in certain situations, but these approaches don't align with my aims for this project—which involve moving away from production-line thinking and towards embracing the web's native languages as creative mediums and learning through experimentation. I also had a vague notion, inspired by Max Böck's theme picker, of offering users control of display colour within some sensible parameters—e.g., foreground and background combinations that meet WCAG 2.0 AA minimum contrast ratio requirements.

Theme picker on Max Böck's website

While I was thinking about my colour dilemma, I was reading Brian Eno's 1995 diary A Year with Swollen Appendices, where he quotes cybernetician Stafford Beer while discussing his approach to producing generative music.

"Instead of trying to specify it in full detail, specify it only somewhat. You can then ride on the dynamics of the system in the direction you want to go."

Stafford Beer

This freewheeling line of thought was appealing—who wouldn't want to set a few parameters and let the system flow? It influenced my approach to every aspect of presentation—layout, typography, sizing, spacing, and colour. For now though, I want to focus on colour and how systems thinking can be applied to generating colours using modern CSS features.

Colour theory

The foundations of colour theory establish a framework for creating colours that complement each other in harmony, serving as reliable parameters for systematically generating colours.

Complementary: A complementary colour scheme consists of two colours positioned opposite each other on the colour wheel. A split-complementary scheme uses three colours: a base colour plus two colours that sit 150 and 210 degrees away from it.
Analogous: Analogous colour schemes use colours that are adjacent to each other on the colour wheel—typically a dominant primary or secondary colour with two complementary tertiary colours, positioned 30 degrees and 330 degrees from the base colour.
Triadic: The triadic colour scheme combines three colours: a base colour and two additional colours positioned 120 degrees and 240 degrees away from it on the colour wheel.
Tetradic: Tetradic schemes use four colours in two complementary pairs, with rectangle schemes using colours at 60, 180, and 240 degrees from the base colour, while square schemes space colours 90 degreed apart.
Hexadic: The hexadic colour scheme is a six-colour combination consisting of a base colour and five colours positioned at 60, 120, 180, 240, and 300 degrees from it on the colour wheel.

OKLCH colour notation

I really like OKLCH notation for thinking about and declaring colours. For me, at least, it's far more intuitive than previous formats, and there are additional benefits outlined in OKLCH in CSS: why we moved from RGB and HSL by Andrey Sitnik at Evil Martians, which is an excellent primer on the topic.

OKLCH axes

In oklch(L C H) or oklch(L C H / a), each item corresponds as follows:

L is perceived lightness (0-100%). “Perceived” means that it has consistent lightness for our eyes. It ranges from 0 (black) to 1 (white).
C is chroma, the saturation of colour. It goes from 0 (gray) to the most saturated colour. For both P3 and sRGB the value will be always below 0.37.
H is the hue angle (0-360).
a is opacity (0-1 or 0-100%).

CSS custom properties

Custom properties (CSS variables) let you define reusable values. You can set them using either @property or the more common --property-name: value; syntax, and access them using var(). A key feature of custom properties defined with two dashes (--) is that they cascade and inherit values from parent elements. For a detailed explanation, see the MDN documentation on CSS custom properties.

Putting theory into practice

Having established the foundations of using colour theory as basic parameters, then letting the system's dynamics flow, all that remains is to create a practical implementation using modern CSS that:

Produces four complementary colours (a tetradic scheme) offering room for interesting variations and combinations.
Generates colour ramps for each hue, along with grayscale using corresponding lightness values.
Allows users to adjust the base hue while other colours automatically change according to their angular relationships, leveraging the cascade and inheritance of custom properties.

See the Pen Dynamic colour palettes with OKLCH and CSS custom properties by Damian Walsh (@damianwalsh) on CodePen.

While vanilla CSS could achieve the same results, I built this system with SASS, which offers several advantages:

SASS loops and variables reduce repetition and enable dynamic value generation, making the code easier to update and maintain.
Since most calculations happen during compilation, browsers have less work to do at runtime.

Limitations of linear colour ramps

When applying this approach to a recent project, I discovered a limitation in the original implementation.

Linear interpolation

The original system used equally spaced steps in lightness and chroma (saturation), which didn't match the desired visual effect in application.

Profiles with equally spaced steps

What I wanted was more tightly spaced steps at either end, particularly between light tints, to achieve a more subtle effect on backgrounds with more dramatic shifts appearing in the middle range.

Perceptual calibration

My first attempt at finding a solution involved creating a lookup table and hand-tuning the values to achieve the desired result.

Manual lookup table

Step	Lightness	Chroma
1	96	0.02
2	91	0.03
3	85	0.04
4	71	0.09
5	52	0.13
6	42	0.16
7	34	0.18
8	24	0.19
9	18	0.2

While this approach creates a perceptually calibrated colour ramp, it has one major drawback: adding or removing steps, or changing any values, requires manually recalculating everything.

Out of curiosity, I plotted these values on a chart and was mildly surprised to see an S-curve appear.

Profiles created manually

This got me thinking about animation and how easing equations can be used to control the rate at which values change to create a more natural effect.

Easing equations

Easing equations describe how values change over time. The most common curves are:

Ease-In: Starts slow, ends fast. f(t) = t²
Ease-In-Out: Starts slow, accelerates in the middle, ends slow (an S-curve). f(t) = t² (3 - 2t)
Ease-Out: Starts fast, ends slow. f(t) = t (2 - t)
Linear: Constant speed, no acceleration. f(t) = t

These mathematical functions can replace the manual lookup table entirely. Instead of defining fixed step increments, the system now works like this:

Define number of steps and start and end points for lightness and chroma ranges
For each step calculate a progress value from 0 to 1 and pass this through an easing function
Use the eased value to interpolate between start and end points

The ease-in-out function produces an S-curve that closely matches the hand-tuned values in the lookup table, but with the added benefit of being precise and easily adjustable. Changing the curve requires only swapping one function name. Adjusting the range and number of steps means updating variables instead of recalculating all the values individually.

Profiles created with easing equation

See the Pen Dynamic colour palettes with OKLCH and CSS custom properties by Damian Walsh (@damianwalsh) on CodePen.

Aknowledgements

The original implementation drew inspiration from Adam Argyle's related explorations on CodePen. The easing functions in the revised version were adapted from Robert Penner's easing equations.

Cultivating a digital garden

2025-01-13T00:00:00Z

Last year was a weird one—in fact, it's more accurate to say the entire period since the COVID-19 pandemic has been a distinctly odd time. I can’t recall any time in my career—which spans long enough to include the dot-com crash of 2000 (yes, I'm that old) and the fallout from the financial crisis of 2007–2008—when workers have been stretched and squeezed so hard, for so long, in all directions.

A burnt-out case

For me, this led to burnout and resulted in me walking away from a secure job in my chosen field—one I had invested significant time and effort building expertise in. At the time, I felt I had no choice. I barely understood what was happening myself, let alone be able to identify and articulate the root causes to an employer or advocate for change.

"Burnout is a prolonged response to chronic emotional and interpersonal stressors on the job. It is defined by the three dimensions of exhaustion, cynicism, and professional inefficacy."

C. Maslach, M.P. Leiter in, Stress: Concepts, Cognition, Emotion, and Behavior (2016) pp.351-357

Fortunately, I was in a position to support myself financially through a career break. I simply shut down and turned my attention elsewhere. During this time, one of the activities I found solace in was gardening (IRL)— foreshadowing my eventual path back to design.

Meanwhile, in the wider world there seemed to be a growing recognition and willingness to discuss the factors driving tech burnout. This Medium article, written in 2024 from an engineer's perspective, hits the nail squarely on the head. I’ve paraphrased excerpts below in case the link becomes unavailable:

People want autonomy and control over their work, driven by a desire to learn, develop, and contribute more meaningfully over time. They want to feel like they're building a real career.
Most tech work requires you to disregard your skills and training, and instead spend less time creating more things at lower quality. Meanwhile, your knowledge grows increasingly outdated as technology evolves, and your job rarely provides opportunities to keep up-to-date with new developments.
Speed emerges from proficiency—it's not a goal to pursue directly. When you focus on building proficiency, speed follows; focusing on speed alone won't make you faster. The tech industry, with its emphasis on short-term gains and quick wins, fails to grasp this fundamental principle.
Burnout doesn't stem from intense work or long hours. It comes from trying to control outcomes that you have no control over. In the tech world, only a select few on the business and product side truly control outcomes—everyone else merely supports these individuals' beliefs.

Don't get me wrong—I've had positive experiences working in tech: challenging goals and engaging colleagues (and vice versa) who taught me a lot. Some challenges simply come with the territory, especially on large teams and projects with many moving parts. Collaborating with others inevitably requires compromise. For years, I not only accepted but thrived on all of this, including the frustrating parts. With the benefit of hindsight, though, I can now see how work situations similar to the ones described above and my own responses to them gradually wore down my enthusiasm and disconnected me from my sense of professional identity—with predictable consequences.

Back to first principles

Taking career breaks can be a fulfilling experience, but nothing lasts forever. After a certain point, time away from work begins to generate its own kind of stress and anxiety. Towards the end of 2024, events forced me to start thinking on a more practical level about what I wanted to do with my professional life and the steps I could take to move in that direction.

"If you don't like something, change it. If you can't change it, change your attitude."

Maya Angelou

While more recent experiences revealed what I want to avoid—the factors leading to burnout broadly described above—I needed to reach further back to what initially drew me to design, and more specifically, design for the web, to reconnect with the type of work I find meaningful and engaging. This led me back to the web’s fundamental building blocks (HTML, CSS & JS)—not just as tools but as creative mediums—and to the community of makers who approach their craft with genuine curiosity, treating learning through experimentation as valuable in itself rather than just as a means to an end.

The trouble with portfolio websites

Looking back at my website from 2023 left me disappointed. Both the content and presentation poorly reflected my own interests and motivations.

Personal website circa 2023

Content

Case studies force you to look backward, reviewing past work instead of focusing on future growth. There's nothing fundamentally wrong with this type of exercise—I'm doing it right now. Looking back over the ground you've already covered can help you decide where you want to go next. The problem emerges when you apply the concept to real-world work examples.

Tech projects are typically carried out by regimented teams where work flows continuously like parts on a factory assembly line. Companies organise themselves this way believing it enables parallel work streams, faster delivery, and the flexibility to rotate specialists in, around, and back out as though through a revolving door. They may well be right about this but after you've been working this way for a while, you realise the work product is often incompatible with both your own growth needs and these same companies' hiring criteria, which are based on assessing attitude (how you think) and competence (what you do). These qualities are hard to showcase when you find yourself spread wafer-thin and/or pigeonholed with little say over your work, methods, or time management.

Most work contracts assign intellectual property (IP) rights to clients or employers and bind you to non-disclosure agreements—either in perpetuity or for such lengthy periods that they might as well be. When sharing is permitted, you'll likely sanitise your portfolio, portraying the work in the most flattering light possible to avoid offending anyone you’ve worked with. Meanwhile, "the business" will expect you to reduce the often messy trial and error process of creative work into formulas like: Accomplished [X] as measured by [Y], by doing [Z].

Presentation

While the case study format forces you to cast your gaze back with rose-tinted glasses, the standard organisation and presentation of content offers limited scope to explore beyond generic layout and flow patterns. For me, at least, these preconceived notions inevitably lead to two outcomes when designing a portfolio website: either cookie-cutter sites (like the previous version of this website, quickly assembled with Tailwind and plugins) or JS frameworks that are ill-suited for the task and encourage you down the path to smoke and mirrors.

Even when you set out with the best intentions, portfolio websites provide little motivation for ongoing development. The content inherently focuses on the past, while the standard presentation limits opportunities to explore creative possibilities and develop your craft. And there's the lingering doubt that presenting yourself this way risks perpetuating the same type of work and methods you're trying to move beyond.

When you feel constrained by both the work itself and the way you talk about and present it, what avenues remain open for personal expression and growth?

Digital gardens

Digital gardens seem to offer an alternative path. But what exactly is a digital garden? How can these spaces provide a different model for personal expression and growth? And how does this relate to burnout?

Surveying the landscape

Digital gardens are typically described as a personalised way of thinking, organising, and sharing, often serving as a means of escaping the orthodoxy of conventional social media or blogging platforms that place limits on content organisation and presentation. Maggie Appleton’s 2021 essay does a great job of tracing the history and describing the characteristics of digital gardens, while acknowledging that they are defined as much by their differences as their similarities.

"Digital gardens should be just as unique and particular as their vegetative counterparts. The point of a garden is that it’s a personal playspace. You organise the garden around the ideas and mediums that match your way of thinking, rather than off someone else’s standardised template."

Maggie Appleton. A Brief History & Ethos of the Digital Garden

While all the themes covered in the essay and its references resonated, this particular quote stood out by offering a liberating alternative vision—one that contrasts with the portfolio model that often reflects the work environment instead of the individual. This shift in thinking was revelatory for me but is by no means revolutionary. A quick search reveals makers whose websites exemplify this approach.

Maggie Appleton

Adam Argyle

Cory Dransfeldt

Each adopts different aspects of the same philosophy yet achieves distinct results shaped by their individual interests and motivations. So what are my own motivations for choosing this particular path?

Planting new seeds

Burnout is a peculiar thing—the causes build imperceptibly over time, but the effects loom suddenly and seemingly out of nowhere, knocking you off balance and turning your life upside down. Given time, the exhaustion and cynicism dimensions of burnout—feeling drained of energy and idealism—fade away. While gardening (IRL) helps restore a sense of personal agency, burnout's most enduring and difficult effect to recover from is loss of self-belief. This digital garden project aims to address that by sweeping aside the factors that lead to burnout and returning to first principles, focusing on what I believe in and can control: having ideas and seeing them through from concept to completion, using the web's native languages as creative mediums, learning through experimentation, prioritising craftsmanship over speed, and presenting a more authentic professional identity based on my own interests and motivations. Its essential nature is perhaps best captured by the gardener's adage:

"Look after your garden and your garden will look after you."

Traditional saying

I'm not sure what the future holds. While I remain optimistic about the web platform and community, the current direction the tech industry seems to be moving in, along with the job market and my place within it, looks uncertain. But that's OK—I've planted some seeds, and for now I'm content being a digital gardener.

Damian Walsh

2025 in review

Reading

Reading by Month: 2024 vs 2025

Reading by Genre: 2024 vs 2025

Music

27 Oct 2025: What song best captures your current phase of life?

TV and movies

TV highlights

1985

Astrid et Raphaëlle (Astrid: Murder in Paris)

Badehotellet (Seaside Hotel)

De Dag (The Day)

De Kraak (The Bank Hacker)

Faking Hitler

Harjunpää (Helsinki Crimes)

Hierro

Il metodo Fenoglio - L'estate fredda (Cold Summer)

Ivalo (Arctic Circle)

R.I.P. Henry

Sløborn

Sorjonen (Bordertown)

Top Dog

Health and relationships

Now and then

Travel

Work and career

Articles published in 2025

Further reading

A year in a digital garden

Things I have learnt

Articles published

Cultivating a digital garden

Dynamic colour palettes with OKLCH and CSS custom properties

Creating connections with music and technology

Building a digital bookshelf with Eleventy

Scheduled deployments for Eleventy websites

Skills acquired

Growth and impact

Personal growth metrics

Encouragement and recognition

Reflections

Scheduled deployments for Eleventy websites

Automating builds and deployment

Creating a Netlify build hook

Adding GitHub Secrets

Creating a GitHub Workflow

Configuring the project for remote builds

Acknowledgements

Building a digital bookshelf with Eleventy

The OpenLibrary API

Editions vs Works

Creating a library catalogue

Enriching book data

Organising books with Collections

Creating pages from data

Managing data with a CLI

Digital bookshelf

Retrospective

Creating connections with music and technology

Eleventy

Version 1: Proof of concept

Library classification

API comparison

Selecting metadata

Release dates

Global Data Files

Collections

Filters

Creating pages from data

Images

Data cascade

Retrospective

Version 2: Memory boxes

The working model of memory

Zettelkasten

Maps

Release template

Retrospective

Version 3: Time machine