chriskirknielsen

Indie games are worth your time

2026-06-22T05:23:00.000Z

I don’t know if you play video games, but it’s likely you enjoy games in one form or another. Maybe you play a cozy game on your phone, a card game on your work computer (definitely only during breaks), or a cute adventure game on your gaming console. And table top games count, too, of course!

Note

There is no such thing as a real gamer or not, only gamers and gatekeepers.

I mostly play on PlayStation, and a bit on PC, but also play a lot of sudoku on my phone (yes I am 400 years old), and the occasional word puzzle on my work computer. I’d like to focus on indie video games, though, for this post in particular. Or at least, indie in how they feel, since the term has lost a bit of its meaning, much like indie music, in my mind’s ear.

I’ve played through a handful of few smaller games recently. Stray, where I wandered a post-human world as a cat. Cocoon, where I jumped in and out of worlds to solve puzzles. Or Herdling, where I found, named, and led gentle creatures through a dangerous land and over a mountain. And I’ve got Mixtape installed for next time I sit down to play. These are not the biggest, most successful games in the world. But what they are is deeply authentic. They are poetic. They are stirring. They are beautiful.

Sometimes, games with a big-to-absurdly-large budget can be those things, don’t get me wrong, but in my experience, those impactful games are most likely indie games. It’s a team of anything from one person to a few dozen people who poured their souls into making the best game they could, and you can tell. As you move through the world they’ve built, their world might just move you, too. (yes that’s cheesy, but this is my blog and I can say what I want) Every major studio is trying to one-up one another with the most realistic-looking games, and that’s impressive! But sometimes the indie game made with a "here in my garage” look, with a few rough edges visible, has so much charm, a unique personality, that makes it a delight to play through.

This isn’t to say big games aren’t made with love (I mean have you seen how well-made games like Control, or Clair Obscur: Expedition 33 are?), but they tend to have a sense of cinematography, spectacle, and scale that you don’t usually experience in indie games. Sure, I sometimes I want to load up an action-adventure blockbuster game, but indie games? They have vastly different vibes… the vibes are way cozier.

All of this is to say that indie games are important for the ecosystem of video games, as they bring a much-needed touch of humanity to the otherwise giant, sanded-down products of the entertainment industry. While I know it’s easier to only look out for the big names out there (trust me I play those, too), next time you’re looking for a new game, try to seek out the smaller titles out there. It might just make your heart feel a little fuller. (something something, commentary about the indie web)

In need of a few recommendations?

In addition to those I mentioned, here’s a list of indie and indie-adjacent games, in no particular order*, that I can heartily recommend:

The Return of the Obra-Dinn
Kena: Bridge of Spirits
Monument Valley
Outer Wilds
Firewatch
Jusant
Neva
Journey
Blue Prince
A Short Hike
Chants of Sennaar
Brothers: A Tale of Two Sons

* actually I lied, I ordered them to make the list look like a crescent. It’s my blog I can do what I want.

PS: Indy games are also good, from what I hear, but I have not played The Great Circle or The Fate of Atlantis. Forgive me, Doctor Jones!

Going Full Circle on CSS Toggle Transitions

2026-06-04T04:04:00.000Z

I recently worked on some “accordion” component with a custom marker to indicate open and closed states. I had it set up so the marker, a chevron, would rotate by 180 degrees when the component was in its open state. Add a CSS transition (when motion preferences allow it), job done.

But… it would animate backwards upon closing, “rewind” so to speak, which is exactly how CSS should work, but I wanted it to “complete” the rotation, so:

idle: start at 0 degrees
expanded: go to 180 degrees
closed again: go to 360 degrees
idle: start at 0 degrees
… and so on.

Let’s take a look at what I tried, and which solution I landed on.

No Gecko, amigo

This works in two browser engines, Chromium and WebKit, and my assumption is that they both are working as the specification has been, well… specified. Firefox, however, skips the closing transition. If you have any idea why, please let me know!

First, here is the base markup and styles for all the demos:

 HTML<details>
	<summary>
		<span>Learn more about this!</span>
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="details-marker">
			<path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" />
		</svg>
	</summary>
	<div class="details-content">
		<p>I have important things to say!</p>
	</div>
</details>

 CSSdetails {
	--DET-transition-duration: 300ms;
	--DET-transition-easing: ease-in-out;
}

/* Rewinds upon closing */
.details-marker {
	@media (prefers-reduced-motion: no-preference) {
		transition: transform var(--DET-transition-easing) var(--DET-transition-duration);
	}

	details[open] & {
		transform: rotate(180deg);
	}
}

/* Aesthetics skipped for brevity but available in the CodePen demos */

And here’s what that looks like: it works everywhere but the marker “rewinds” — keep an eye on that chevron at the end of the line there when opening and closing the details/expander/accordion/stretchyboi:

View on CodePen

I managed to get most of the way using a registered custom property to hold the “opened” state until everything was closed, using a transition on this property with a step-end timing function, which holds a value at its initial state until the duration has passed (e.g. from 0 to 1 over a second, it’ll stay at 0 for a second, then immediately flip to 1 without any interpolation). My original (and promising) result looked like this:

 CSS@property --DET-state {
	syntax: '<number>';
	initial-value: 0;
	inherits: true;
}

details {
	--DET-state: 0;
	--DET-transition-duration: 300ms;
	--DET-transition-easing: ease-in-out;
	
	transition: --DET-state var(--DET-transition-duration) step-end;

	&[open] {
		--DET-state: 1;
	}
}

/* "Works" in Chrome and Safari, but unwinds after closing */
.details-marker {
	@media (prefers-reduced-motion: no-preference) {
		transform: rotate(calc(360deg * var(--DET-state)));
		transition: transform var(--DET-transition-easing) var(--DET-transition-duration);
	}

	details[open] & {
		transform: rotate(180deg);
	}
}

View on CodePen

It did almost everything I wanted (in Chrome and Safari…), going from 0 degrees, to 180, and to 360 on close, except… when the rotation was completed, and --DET-state returned to 0, the marker would also transition from 360 degrees to 0 degrees, so it looked kind of loopy (pun intended, thank you very much, I’ll be here all week).

I tried a few things, like adjusting the timing function between open and closed states. Ultimately, I came to the conclusion that I needed the closing transition to run normally while --DET-state was held at 1, but the second transition due to --DET-state flipping back to 0 should be skipped. I could achieve this by adjusting the transition-duration itself, but this doesn’t work in Firefox and Chrome — Safari does what I expect of it, in version 18.6 as well as Technology Preview:

 CSS/* This does not work in Firefox and Chrome! */
.details-marker {
	@media (prefers-reduced-motion: no-preference) {
		transform: rotate(calc(360deg * var(--DET-state)));
		transition-property: transform;
		transition-timing-function: var(--DET-transition-easing);
		transition-duration: calc(var(--DET-state) * var(--DET-transition-duration));

		details[open] & {
			transition-duration: var(--DET-transition-duration);
		}
	}

	details[open] & {
		transform: rotate(180deg);
	}
}

View on CodePen

Instead of quashing the duration, I tried using a negative transition-delay, and I clicked in disbelief several times to see the marker animate exactly as I wanted. My final result is as follows:

 CSS/* This does not work in Firefox! */
.details-marker {
	@media (prefers-reduced-motion: no-preference) {
		transform: rotate(calc(360deg * var(--DET-state)));
		transition: transform var(--DET-transition-easing) var(--DET-transition-duration);
		transition-delay: calc((var(--DET-state) - 1) * var(--DET-transition-duration));
		/*
			The delay above could also be expressed like so, if you find it easier to read:
			transition-delay: calc(-1 * (1 - var(--DET-state)) * var(--DET-transition-duration));
		*/

		details[open] & {
			transition-delay: 0s;
		}
		
		@-moz-document url-prefix() {
			transition: transform var(--DET-transition-easing) var(--DET-transition-duration); /* Standard look in Firefox */
		}
	}

	details[open] & {
		transform: rotate(180deg);
	}
}

View on CodePen

However, as mentioned at the start of this article, this does not work in Firefox. Which sucks! These properties are not exactly bleeding edge… I know I’m manipulating time in weird ways here, but this doesn’t require a flux capacitor… it feels like it should work.

In any case, in Firefox, with a little browser-specific hack, the transition is reverted and the chevron rewinds back to 0 degrees instead, which means it’s still absolutely usable, and I consider this a nice little progressive enhancement.

I am certain there are ways to make this work: maybe some trick using mod() off by 0.01deg, or adding in a CSS keyframe animation (I specifically avoided keyframes as you cannot smoothly reverse the transition if you interrupt it midway). Definitely easy with some JavaScript (either Web Animation API or an event listener), but that’s no fun!

If you have ideas, I’d be happy to hear some details and expand this article accordingly (eehhh?).

PS: As a bonus, we can totally have the chevron face to the right when closed, down when open, and still do a full rotation!

View on CodePen

Update

vrugtehagel and Temani Afif chimed in on Mastodon with different solutions, which work cross-browser! Not only that but they both require less code, so I’m all for it.

vrugtehagel suggested using linear() to create a negative version of the easing, and it works! A little bit of a pain to maintain if you want to adjust the easing but I wouldn’t imagine you’d change that often, so this is really neat!

View on CodePen

Temani suggested something even simpler, that kind of resonates with my negated duration approach, but applied to a different property. Because the chevron is symmetrical, mirroring it allows to get the same effect: rotate then mirror.

View on CodePen

Snippet: git ketchup

2026-04-06T05:12:00.000Z

Another git snippet I use frequently, git ketchup {BRANCH_NAME}. It’s not catchup because that may be a real command. Like switcheroo, using a silly name (nearly) guarantees there won’t be naming collisions with real git commands.

.gitconfig .gitconfig[alias]
	ketchup = "!f(){ git fetch origin ${1}:${1}; }; f"

I use a graphical user interface (a.k.a. a GUI, mine is Fork) and there’s no right-click option to pull the latest commits from a remote branch into its local equivalent unless it’s already the active branch — as far as I know, anyways. Sometimes I just want to catch up a coworker’s changes to deal with later, without exiting my current branch, you know?

There’s probably a dozen (better) ways to do this but this one works fine for me. 🤷

How I nerd-sniped myself into importing Nike Running Club data via the Strava API

2026-03-30T13:37:00.000Z

Heads up

This is a long post, but I share all my code in the tl;dr at the end!

Last week, I played with the idea of showing statistics related to my running below the other site-related stats. I’ve only been running since some time in 2022, which wouldn’t be such a big thing if it weren’t for the fact I had never been athletic in my life before (except when forced to, i.e. in P.E class, and to avoid missing a bus or subway).

At first, I went to my app, Nike Running Club (a.k.a. NRC) and wrote down in a JSON file each year’s aggregated stats: count, distance, time, and a few other bits and bobs. I figured I’d periodically update this manually, but when I found out Strava had an API, I had done it and needed to make it better: I nerd-sniped myself.

I’ve been on Strava since late December 2024, meaning about 2 years of data was missing. Not great to get a full picture (which is important to one person and one person only: me). And while Strava allows you to connect with NRC, it only captures activities moving forward, not from the past.

I stumbled upon a helpful reddit comment where somebody explained how they migrated data. Basically: ask Nike to send an archive of your data, specifically TCX files (spoiler alert: it’s just XML), and that’s it. The comment mentions GDPR and such, but on my end, I asked Friday around 3pm, and had the download link around 9pm. They do ask you to confirm your request, but they didn’t seem combative.

The TCX files are named with UUIDs, so not very easy to explore, and in my case, to filter the 2+ years I wanted to import, to avoid duplicates. Luckily, another comment provides a bash script to rename all the files prefixed with the date information within. I don’t know what all these commands do, but it works, so thank you, Efficient_Soft773! For Mac/Linux, save this into a file like rename.sh, place it in the same folder as your TCX files, and run sh rename.sh. Sharing it below in case the Reddit comment vanishes:

 Code block# goal: append filenames with time
for filename in *.tcx; do
  T0=$(sed '7q;d' ${filename} | awk -F'"' '{print $2}' | awk -F 'T' '{print $1}')
  T0_str=$(date -j -f '%Y-%m-%d' "$T0" +'%Y%m%d') 
  fileheader=$(echo $filename | awk -F'.' '{print $1}')
  newfilename="nrc_${T0_str}_${fileheader}.tcx"
  if [[ "$filename" == *"nrc_"* ]]; then
    echo "Already renamed this file." 
  else   
    echo "Renaming ${filename}" 
    mv $filename $newfilename
  fi
done

Strava has an import feature which accepts TCX files, so I figured I would be set from here. However, after uploading those file, I noticed major discrepancies. Some runs were recorded as being about 3 seconds long, or with a total distance of 30 meters. I know I started small but I did run a little more than that! Strava does have a “Correct Distance” option in each imported activity, and it helped, but was still off, like a 6.5 Km run that came up as 5.9 Km, presumably because it doesn’t take elevation into account — not a huge difference, but with 151 runs, the drift would be noticeable. Maybe it’s more accurate than NRC, since it’s based on each GPS point, but I’d rather keep it consistent with the Nike tracking.

Also, Strava has rate limiting: 30 files per 24 hours (I think), so after uploading two batches of 15 files (the max per upload), I was stuck. You’re only told an error occurred and to please try later, nothing about the cooldown period — I found that number on reddit. But… the API allows you to upload TCX files directly. Back in the game! Well, kind of: Friday night the API server was down, so it had officially become a weekend project.

After creating a new “app” in the unlisted API section of my Strava settings, and providing the callback domain matching my local Eleventy development environment (localhost with the hardcoded port, 2024 in my case), I started creating a local app to do all of the communicating with the API to get/refresh auth codes and tokens, read my data, and eventually upload my data, as well. It needs to behave like a website to do these initial callbacks, so you can allow your app to call Strava data on your behalf. You could likely do all this in Postman but it was fun to create a simple app anyways. HTML! CSS! And JavaScript of course.

Uploading a TCX file via the API yielded the same result (shocker), so I tried finding other posts of people affected by these inconsistencies, but the only real fix I read about was to use a GPX file. I tried exporting a “good” run’s GPX file from Strava but it wasn’t very similar to TCX, so my idea of using a good run as a template to convert the bad ones fell apart. Plus, I didn’t want to convert all the files. While The GPS data in those files is supposedly good, I didn’t want to spend a lot of time trying to fix something when I couldn’t even tell where the issue was.

I saw in the API documentation there was a way to insert an activity as a plain object: date, distance, time… no GPS data, but at this point, I didn’t care. It’s kind of fun to have, yes, but not essential: accurate activity logs are more important than showing the same three paths I take most of the time. So I’d need a list of all the activities to log, exported as JSON, without any other data.

I ended up creating a simple Node script that parses the XML files via fast-xml-parser (120 MB of data took a couple seconds, it is true to its name!), collects basic data for each file as an object, and spits out an array as a JSON file. I wanted to load the file into my app buy it’s all local, and it’s a one-time import operation, so I just copy-pasted the contents into the app as a variable, who cares? Work smarter, not harder!

So the next part is to import each activity: it’s a single one per API call, so I looped over the array, and imported the data, with a few tweaks to make sure it was saved as a run. Once one file was done (using await), I moved on to the next. I didn’t want to run into rate-limiting issues, and 151 files is relatively fast to go through.

I then refreshed my Strava activity page, and sure enough: a bunch of new activities appeared! All the distances seemed correct, so I am pretty happy with this. It’s historical, basic data, but it is more than enough to track my stats for running.

Okay, then only one thing remains: query the data to use on my stats page. Strava offers an aggregated stats endpoint, and a list of activities endpoint. I am using both, so I call the stats, then loop over paginated data for activities. Though I only have 185 runs, and Strava limits this to 200 activities per page, I made sure to have the loop for future-proofing this little app. I extract only the date, distance and duration for each activity. No point in making this more bloated than needed (he says, over a thousand words into a post about running data).

I can now copy the contents of the stats and all activities, merged into a single object, which I paste into strava.js in my Eleventy _data folder (prefixing with export default). I could likely use a Node package to handle Strava tokens and pull everything automatically in every build, but that means one more third-party API to call during a build, and one more point of failure for said build if the API goes down for any reason. This will do for the time being. It’s still a little manual, but a lot less than copying data by hand from NRC.

And with that: my stats page now contains some basic running stats. All in a weekend’s work!

A couple drawbacks that I’ve noticed is that my total running distance is off by about 4 Kilometers, (which is about a quarter of a percent over the total, I’m sure you’ll agree that’s negligible), and the aforementioned lack of GPS data, but I honestly don’t care about earlier data all that much. Beyond that, all the numbers match up between NRC and Strava. Neat!

That’s it for the long explanation, the code and basic steps are provided below. Let me know if I messed something up or if you have questions!

tl;dr

Ask Nike for your data.

Rename the TCX files to contain the activity date by running this script in the folder with all TCX files (optional).

 Code block# goal: append filenames with time
for filename in *.tcx; do
  T0=$(sed '7q;d' ${filename} | awk -F'"' '{print $2}' | awk -F 'T' '{print $1}')
  T0_str=$(date -j -f '%Y-%m-%d' "$T0" +'%Y%m%d') 
  fileheader=$(echo $filename | awk -F'.' '{print $1}')
  newfilename="nrc_${T0_str}_${fileheader}.tcx"
  if [[ "$filename" == *"nrc_"* ]]; then
    echo "Already renamed this file." 
  else   
    echo "Renaming ${filename}" 
    mv $filename $newfilename
  fi
done

Create a new npm project in the folder containing all your TCX files, install fast-xml-parser, create an index.js file, and open it:

 Code blocknpm init -y && npm i fast-xml-parser && touch index.js && open index.js

Note

If you copy all this verbatim, you’ll likely need to add "type": "module" in your package.json file.

Run a script to parse all the TCX files and save all the data as JSON:

xml-to-json.js

JavaScript xml-to-json.jsimport { XMLParser } from 'fast-xml-parser';
import fs from 'node:fs';
import path from 'node:path';

const inputDir = './';
const outputDir = './json/';
const collected = []; // An array of every activity

try {
	const files = await fs.promises.readdir(inputDir); // Finds all files in the folder

	for await (const file of files) {
		const inputPath = path.join(inputDir, file);
		const stat = await fs.promises.stat(inputPath); // Get some file into

		if (!stat.isFile() || !file.endsWith('.tcx')) {
			continue; // Skip anything that isn't a TCX file
		}

		const XMLdata = await new Promise((res, rej) =>
			fs.readFile(inputPath, 'utf8', (err, data) => {
			  // Yes I'm sure node:fs/promises has a this as a promise, whatever
				if (err) {
					rej(err);
				}
				res(data);
			})
		);

		// Parse the XML and remove outer wrappers on the data we want
		const parser = new XMLParser();
		let jObj = parser.parse(XMLdata);
		jObj = jObj.TrainingCenterDatabase;
		jObj = jObj.Activities;
		jObj = jObj.Activity;
		const date = jObj.Id; // Grab the date before lifting the hierarchy
		jObj = jObj.Lap;

		// Create an object matching Strava's accepted payload
		const stravaData = {
			name: 'Imported Run - TCX', // You could use a dynamic name, but me? Lazy.
			type: 'Run',
			sport_type: 'Run',
			start_date_local: date,
			elapsed_time: jObj.TotalTimeSeconds,
			description: 'Legacy NRC Import',
			distance: jObj.DistanceMeters,
			trainer: 0,
			commute: 0,
		};

		collected.push(stravaData);
	}

	// Save the JSON file in the provided folder
	const outputPath = path.join(outputDir, 'strava.json');
	const content = JSON.stringify(collected);
	await fs.writeFile(outputPath, content, (err) => {
		if (err) {
			console.error(err);
		} else {
			console.log('Saved', toPath);
		}
	});
} catch (err) {
	console.error('Uh-oh. Bad times.', err);
}

Create a new Strava “app” on the API page and keep an eye on those ID and secret values.

Create or update .env to include STRAVA_CLIENT_ID and STRAVA_CLIENT_SECRET, which you just kept an eye on (you did do that… right?).

.env .envSTRAVA_CLIENT_ID=######
STRAVA_CLIENT_SECRET=########################################

Create a small “app” to log into Strava via API and import files, which injects the secrets above into the page’s data cascade via eleventyComputed. I am providing HTML (in Nunjucks flavour but it should work exactly the same with Liquid or Vento), CSS, and JavaScript separately as the latter is over 300 lines.

strava-app.njk

Nunjucks strava-app.njk
---js
{
	permalink: '/strava/',
	layout: false,
	tags: [],
	eleventyComputed: {
		stravaEnv: function () {
			return {
				id: process.env.STRAVA_CLIENT_ID || null,
				secret: process.env.STRAVA_CLIENT_SECRET || null
			};
		}
	}
}
---

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Strava Retriever</title>
		<link rel="stylesheet" href="./strava-app.css">
	</head>
	<body>
		<h1>Strava Mini-App</h1>
		<select id="scope" hidden>
			<option value="write" selected>write</option>
			<option vale="read_all">read_all</option>
		</select>
		<a href="" class="button" id="auth" hidden>Authorize Strava</a>

		<button type="button" class="button" id="clear">Clear local storage</button>
		<button type="button" class="button" id="stats" hidden>Get stats</button>
		<button type="button" class="button" id="copy" hidden>Copy relevant stats</button>

		<form id="importer" method="POST" enctype="multipart/form-data" action="https://www.strava.com/api/v3/activities" onsubmit="return false" hidden>
			<button type="submit" class="button" id="import">Import Hardcoded Activities List</button>
		</form>

		<form id="uploader" method="POST" enctype="multipart/form-data" action="https://www.strava.com/api/v3/uploads" onsubmit="return false" hidden>
			<input class="button" type="file" name="file" id="file" />
			<button type="submit" class="button" id="upload">Upload</button>
		</form>

		<pre id="log"></pre>

		<script>
			// Note the first two values below are injected from our eleventyComputed value
			const client_id = Number({{ stravaEnv.id }});
			const client_secret = `{{ stravaEnv.secret }}`;
		</script>
		<script src="./strava-app.js"></script>
	</body>
</html>

strava-app.css

CSS strava-app.css* {
	box-sizing: border-box;
	margin: 0;
}

html {
	block-size: 100%;
	
	color-scheme: light dark;
	font-family: system-ui, sans-serif;
}

body {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-start;
	margin: 0;
	padding: 1rem;
}

.button:where(:not([type='file'])),
.button:where(input[type='file'])::file-selector-button {
	padding: 0.125em 0.5em;

	font-size: 1rem;
	font-weight: bold;
	text-decoration: none;
	border: 1px solid currentColor;
	border-radius: 0.25em;
	color: white;
	background-color: #fc5200;
}
.button:where(:not([type='file'])):is(:hover, :focus),
.button:where(input[type='file']):is(:hover, :focus)::file-selector-button {
	background-color: #e34a00;
	text-decoration: underline;
}

[hidden] {
	display: none !important;
}

h1,
pre {
	inline-size: 100%;
	flex: 0 0 auto;
}

strava-app.js

JavaScript strava-app.jsconst STRAVA_CODE_STORE = `strava_code`;
const STRAVA_TOKEN_STORE = `strava_token`;
const STRAVA_ATHLETE_STORE = `strava_athlete`;
const logEl = document.getElementById('log');
let stats;

// If redirected from the login page
const response = new URLSearchParams(window.location.search);
let code = response.get('code') || null;
if (code && !sessionStorage.getItem(STRAVA_CODE_STORE)) {
	sessionStorage.setItem(STRAVA_CODE_STORE, code);
} else if (!code && sessionStorage.getItem(STRAVA_CODE_STORE)) {
	code = sessionStorage.getItem(STRAVA_CODE_STORE);
}

// If already logged in
let tokens = JSON.parse(sessionStorage.getItem(STRAVA_TOKEN_STORE) || null);
let athlete = JSON.parse(sessionStorage.getItem(STRAVA_ATHLETE_STORE) || null);

function buildAccessUrl(scope = 'read_all') {
	if (scope !== 'write') {
		scope = 'read_all'; // All that's needed, at least for me
	}
	const params = new URLSearchParams({
		client_id,
		redirect_uri: 'http://localhost:2024/strava/', // Remember to update this to match your port
		response_type: 'code',
		approval_prompt: 'auto',
		scope: `activity:${scope}`,
	});
	return new URL(`https://www.strava.com/oauth/authorize?${params.toString()}`);
}

async function getToken(type) {
	const params = {
		client_id: client_id,
		client_secret: client_secret,
	};

	if (type === 'refresh' && tokens && tokens.refresh_token) {
		params.grant_type = 'refresh_token';
		params.refresh_token = tokens.refresh_token;
	} else if (type === 'authorize' && code) {
		params.grant_type = 'authorization_code';
		params.code = code;
	} else {
		logEl.innerHTML += '! Unable to get a token: missing refresh token or auth code.\n';
		return null;
	}

	return fetch(`https://www.strava.com/oauth/token?${new URLSearchParams(params).toString()}`, {
		method: 'POST',
		mode: 'cors',
	})
		.then((res) => {
			return res.ok ? res.json() : new Error('Failed to fetch.');
		})
		.then((res) => {
			if (Error.isError(res) === false) {
				tokens = { token_type: res.token_type, expires_at: res.expires_at * 1000, access_token: res.access_token, refresh_token: res.refresh_token };
				athlete = res.athlete;
				document.getElementById('stats').hidden = false;
				document.getElementById('uploader').hidden = false;
				document.getElementById('importer').hidden = false;

				sessionStorage.setItem(STRAVA_TOKEN_STORE, JSON.stringify(tokens));
				sessionStorage.setItem(STRAVA_ATHLETE_STORE, JSON.stringify(res.athlete));

				logEl.innerHTML += '> Token has been fetched.\n';

				return tokens;
			} else {
				logEl.innerHTML += '! Unable to get a token.\n';
				return null;
			}
		});
}

async function consumeToken() {
	let tokensData = (() => {
		if (!tokens) {
			return getToken('authorize');
		}

		if (tokens.expires_at < Date.now()) {
			return getToken('refresh');
		}

		return tokens;
	})();

	return `${tokensData.token_type} ${tokensData.access_token}`;
}

async function refreshStravaData() {
	return fetch(`https://www.strava.com/api/v3/athlete`, {
		method: 'GET',
		mode: 'cors',
		headers: { Authorization: await consumeToken() },
	}).then((res) => res.json());
}

async function getActivities(expectedCount) {
	const pageSize = 200;
	const pageCount = Math.ceil(expectedCount / pageSize);
	let activities = [];
	let currPage = 1;
	let resolver;
	let rejector;
	const promise = new Promise((res, rej) => {
		resolver = res; // Or use new Promise.withResolvers(), I won't stop you
		rejector = rej;
	});

	while (currPage <= pageCount) {
		await fetch(`https://www.strava.com/api/v3/athlete/activities?page=${currPage}&per_page=${pageSize}`, {
			method: 'GET',
			mode: 'cors',
			headers: { Authorization: await consumeToken() },
		})
			.then((res) => res.json())
			.then((res) => {
				logEl.innerHTML += `> Activities (page ${currPage}, ${res.length} items) have been fetched.\n`;
				const simpleActivities = res.map((activity) => {
					return {
						year: new Date(activity.start_date_local).getUTCFullYear(),
						date: activity.start_date_local,
						distance: activity.distance,
						duration: activity.elapsed_time,
					};
				});
				currPage++;
				activities.push(...simpleActivities);
			})
			.catch((err) => {
				logEl.innerHTML += '! Somethind bad happened.\n';
				rejector(err);
			});
		if (currPage > pageCount) {
			resolver(activities);
		}
	}
	await promise;
	return activities;
}

async function getStats() {
	return fetch(`https://www.strava.com/api/v3/athletes/${athlete.id}/stats`, {
		method: 'GET',
		mode: 'cors',
		headers: { Authorization: await consumeToken() },
	})
		.then((res) => res.json())
		.then((res) => {
			stats = { ...res.all_run_totals };
			logEl.innerHTML += '> Stats have been fetched. Processing...\n';
			document.getElementById('copy').hidden = false;

			getActivities(res.all_run_totals.count).then((activities) => {
				Object.assign(stats, { activities });
				logEl.innerHTML += `${JSON.stringify(stats, null, 4)}\n`;
			});
		})
		.catch((err) => {
			logEl.innerHTML += '! Somethind bad happened.\n';
		});
}

async function uploadFile(formData) {
	return fetch(`https://www.strava.com/api/v3/uploads`, {
		method: 'POST',
		mode: 'cors',
		headers: { Authorization: await consumeToken() },
		body: formData,
	})
		.then((res) => {
			logEl.innerHTML += '> Activity has been uploaded.\n';
			return res.json();
		})
		.then((res) => {
			logEl.innerHTML += `${JSON.stringify(res, null, 4)}\n`;
		})
		.catch((err) => {
			logEl.innerHTML += '! Somethind bad happened.\n';
		});
}

async function importActivity(payload, activity) {
	return fetch(`https://www.strava.com/api/v3/activities`, {
		method: 'POST',
		mode: 'cors',
		headers: { Authorization: await consumeToken() },
		body: payload,
	})
		.then((res) => {
			return res.json();
		})
		.then((res) => {
			logEl.innerHTML += `> Activity from ${activity.start_date_local} has been imported (${res.id || 'NOID'}).\n`;
		})
		.catch((err) => {
			logEl.innerHTML += `! Unable to import (${activity.start_date_local}).\n`;
			throw err;
		});
}

// Paste all the activities that need to be imported "manually"
const allActivities = [
	{
		name: 'Imported Run - TCX',
		type: 'Run',
		sport_type: 'Run',
		start_date_local: 'YYYY-MM-DDThh:mm:ss.msZ',
		elapsed_time: 999,
		description: 'Legacy NRC Import',
		distance: 9999,
		trainer: 0,
		commute: 0,
	},
	// and lots more!
].map((act) => Object.assign({}, act, { name: `Run ${act.start_date_local.split('T')[0]} - NRC TCX` }));

if (!code) {
	const link = document.getElementById('auth');
	const scope = document.getElementById('scope');
	function updateUrl() {
		const scopeVal = document.getElementById('scope').value || 'read_all';
		link.href = buildAccessUrl(scopeVal);
	}
	document.getElementById('scope').addEventListener('change', function (e) {
		updateUrl();
	});
	updateUrl();
	link.hidden = false;
	scope.hidden = false;
} else {
	if (!tokens) {
		getToken('authorize');
	} else {
		document.getElementById('stats').hidden = false;
		document.getElementById('uploader').hidden = false;
		document.getElementById('importer').hidden = false;
	}
}

document.addEventListener('click', function (e) {
	if (e.target.closest('#clear')) {
		[STRAVA_CODE_STORE, STRAVA_TOKEN_STORE, STRAVA_ATHLETE_STORE].forEach((k) => sessionStorage.removeItem(k));
		window.location.href = window.location.href.split('?').shift(); // Remove any query string
	}

	if (e.target.closest('#stats')) {
		getStats();
	}

	if (e.target.closest('#copy')) {
		if (!stats) {
			alert('wtf');
		}
		const copyAction = navigator.clipboard.writeText(JSON.stringify(stats, null, 4));
		copyAction
			.then(() => {
				const prevText = e.target.innerText;
				e.target.innerText = 'Copied!';
				setTimeout(() => {
					e.target.innerText = prevText;
				}, 2000);
			})
			.catch((err) => {
				console.error(err);
				alert('wtf!');
			});
	}

	if (e.target.closest('#import')) {
		const form = document.getElementById('importer');
		(async () => {
			for (const activity of allActivities) {
				const payload = new FormData(form);
				for (let [key, value] of Object.entries(activity)) {
					payload.append(key, value);
				}
				await importActivity(payload, activity); // Import one file at a time thanks to await
			}
		})();
	}

	if (e.target.closest('#upload')) {
		const form = document.getElementById('uploader');
		const file = document.getElementById('file');
		const payload = new FormData(form);
		payload.append('file', file.files[0]);
		payload.append('name', 'Morning Run TCX');
		payload.append('description', 'Nike Running Club TCX file upload');
		payload.append('trainer', '');
		payload.append('commute', '');
		payload.append('data_type', 'tcx');
		payload.append('external_id', '');
		return uploadFile(payload).then(() => form.reset());
	}
});

Run Eleventy and open localhost:####/strava.

Click “Authorize Strava”, selecting either read_all or write permissions (if you’re uploading or fetching multiple activities, write will be needed).

If you need to upload anything, copy the contents of your strava.json file which contains your converted TCX data, and paste it as the value for allActivities; save to refresh. Click “Import” and watch every file get imported.

Click Get Stats button, and watch every single piece of data appear.

You can now copy this output into _data/strava.json and use it however you like. (note: the “Copy relevant stats” didn’t work for me in Firefox despite being user-activated, so manually copy-pasting was needed… ah well)

This is not amazingly well-written code (onsubmit Chris, really?), but it is, except for the bash script from Efficient_Soft773, code I have written myself, and for a weekend project, it ain’t too bad. It works and does what it should. It’s probably not very accessible, but this was mainly built for myself.

Oh and because this app to fetch my stats only runs locally, I have added app-strava files to .gitignore (initially to hide my hardcoded client secret, but with .env that’s no problem). The callback URL will most likely not work on the production URL, though, so it’s not really needed to keep around.

Cheff mpeg

2026-03-11T03:45:00.000Z

I built a tool to prepare FFmpeg commands because despite using it nearly every day, I still forget syntax details. If I were really invested, I’d create some app with a file picker that does this and runs the command for you, but 1) that probably exists, and 2) I do not have the knowledge to build such an app!

FFmpeg is a beast and can do so many cool things, but I am keeping it simple, in that Cheff mpeg only has basic options for the conversions I use the most. I am open to small suggestions, though!

Go forth and cook: Cheff mpeg

PS: I don’t know if it’s “chef-ef em-peg” or just “chef em-peg” with a heavy emphasis on the F. You get to decide how you prefer to pronounce it.

Auto-scroll overflowing table cells with CSS container queries

2026-02-07T22:18:00.000Z

I saw an exchange over on Mastodon about a small bit of the State of JS results interface. Paweł noticed a little movement on a table cell label that seemed glitchy. Sacha described it as an issue due to a reveal effect: when a label would be longer than the table cell it was in, hovering it would scroll it so you could read the whole thing, but short labels were also affected. So I inserted myself into the conversation, of course.

With CSS container query units, we can know the size of the cell (100cqi), and with a child element, the size of the full line of text (100%). Well, a pinch of maths should tell us how much text is hidden: 100% - 100cqi. Check out the result below, and keep on reading for the full breakdown.

Result

View on CodePen

The idea

In this example, we are working with a table, and to make this effect work, I had to ensure the container was set to display: block. Table cells have a bespoke display value of table-cell (shocker!), so to avoid breaking the table layout, the text (span) must be wrapped in a container element (div), which will be inside the cell (td). Maybe there’s a way to remove one layer, but I’m just playing around — optimise at your own leisure!

So, to get all of this right, we need:

 HTML<table>
	<!-- For brevity, I am skipping the thead section and the tbody wrapper -->
	<tr>
		<td class="cell">
			<div class="container">
				<span class="text">
					Here is a longer piece of text that will overflow
				</span>
			</div>
		</td>
		<td>I am a regular piece of content that will just take up space in the table like a normal cell</td>
	</tr>
</table>

 CSS.cell {
	inline-size: 20ch; /* Optional, nice to have for this demo */
}
.container {
	container-type: inline-size; /* Essential for our trick */
	overflow: hidden; /* Prevents text in the next cells */
}
.text {
	--offset: calc(100% - 100cqi); /* Returns the overflow length, if any */
	
	display: block; /* Only needed because this element is a <span> */
	inline-size: max-content; /* Allows the element grow past the container limit */
	text-wrap: nowrap; /* `max-content` actually triggers this already but I like being explicit */
}

Animate

The last piece of the puzzle is to animate this on hover (or focus! — sorry I am not diving into the accessibility of tables in this short-ish post, but it’s good to consider how that’d work).

We do not, however, want the shorter labels which do fit in the cell to animate, so we can add a max() to give the offset a minimum value of 0px: --offset: max(0px, 100% - 100cqi) (FYI: a calc wrapper is not required inside math functions like min, max, clamp, etc.). That will make the animation scroll from 0px to 0px for small labels instead of a negative length, and longer labels will compute to a positive length.

 CSS.container:hover .text {
    /* Animation names don't need double-dash prefixes but I like doing so for clarity,
    I believe I picked that habit up from Roma Komarov (a.k.a. kizu) */
	animation: --pingpong 4s ease-in-out alternate infinite;
}
@keyframes --pingpong {
    /* In left-to-right contexts, we want the label to go left, so we need a negative number */
	to { translate: calc(var(--offset) * -1); }
}

We can “simplify” our translate by flipping the --offset expression since (A-B) = -1 * (B-A) — and since we’re flipping it, our max() becomes min():

 CSS.text {
	--offset: min(0px, 100cqi - 100%); /* Essentially clamps from -Infinity to 0px */
}
@keyframes --pingpong {
	to { translate: var(--offset); }
}

If you find other way around more readable, use that! Shorter code for the sake of saving a handful of bytes is ridiculous — use what makes sense to you.

If you have right-to-left content, then having a calc could be needed to change the direction of the translate because we don’t have anything like transform-mapping: logical (from my 2024 wishlist!). Sad boop.

I’d use a --factor variable that flips from 1 to -1 in RTL, but you could use the flipped math, too:

 CSS/* EITHER */
.text:dir(rtl) {
	--factor: -1;
}
@keyframes --pingpong {
	to { translate: calc(var(--offset) * var(--factor, 1)); }
}
/* OR */
.text:dir(rtl) {
	--offset: max(0px, 100% - 100cqi); /* In RTL contexts, move in the other direction */
}
@keyframes --pingpong {
	to { translate: var(--offset); }
}

Faded affordance

One last consideration is affordance. I think a cut-off letter is a pretty clear indicator that something is missing. But what if the cell cuts off right after a word? To account for this, we can use a mask on the container’s inline edges, which is just like scroll shadows. With some padding and a mask matching the padding size, it’s a breeze. You could likely also use scroll-driven animations to progressively mask either side, but I’m keeping it simple for now… Here are some more styles we can use to achieve this:

 CSStable {
	--padding: 1rem;
}

th,
td:not(:has(.container)),
.container {
	/* We could just pad all th/td and use a negative margin on the .container but that's hacky */
	padding-block: calc(var(--padding) / 2);
	padding-inline: var(--padding);
}

.container {
	mask: linear-gradient(to right,
		transparent,
		tan var(--padding) calc(100% - var(--padding)),
		/* This is a 2-position color stop, any solid color will do, but `tan` is short — `red` or `deeppink` work too! */
		transparent
	);
}

Now, the edges of the text are faded: a little affordance, just like that!

Cleanup

I added .text { translate: 0; } as well because on a 72 DPI monitor with Firefox, I got a little flicker on hover for text labels that didn’t need the scroll. A flicker was the initial problem, so we definitely don’t want that! My gut tells me it’s a GPU thing, so this addition keeps it static by making it GPU-accelerated at all times.

Alternatives

Using animation allows for a continuous ping-pong effect. If we wanted to just scroll to the end and stay there, a transition would work (and would smoothly revert when unhovered).
Scroll-driven animations could likely achieve a similar result, but their support across browsers isn’t as wide.
Using an actual horizontal scrollbar, but that’s not quite as compact.
Removing the overflow: hidden style on the container on hover, and adding a background colour to let it overlap the next cell.
Letting the text wrap!

Relative duration?

If you wanted to over-engineer the crap out of it, maybe you could use Jane Ori’s scalar trick to compute a relative animation time based on the distance to “travel”, so you’d have an animation that goes about 30 pixels per second, instead of a static duration? I hit a roadblock though: while 100% - 100cqi makes sense in a translate context, if you’re creating a variable that ultimately is consumed as a animation-duration, that 100% value doesn’t really make sense. This is definitely solvable with scroll-driven animations (again!), but I have rambled enough. Still, if you want to push this further, here’s how far I got before realising it wouldn’t work with the existing setup:

 CSS.text {
	--travel: tan(atan2(abs(var(--offset)), 1px)); /* Whether it goes left or right, we just want the difference */
	--pps: 30; /* PPS = pixels per second */
	--duration: calc(var(--travel) / var(--pps) * 1s);

	.container:hover & {
		animation-duration: var(--duration);
	}
}

Final code

You can pull the code from the CodePen but here’s the full CSS from this post:

 CSStable {
	--padding: 1rem;
}

th,
td:not(:has(.container)),
.container {
	/* We could just pad all th/td and use a negative margin on the .container but that's hacky */
	padding-block: calc(var(--padding) / 2);
	padding-inline: var(--padding);
}

.cell {
	inline-size: 20ch; /* Optional, nice to have for this demo */
}
.container {
	container-type: inline-size; /* Essential for our trick */
	overflow: hidden; /* Prevents text in the next cells */
}
.text {
	/* Returns the overflow length, if any — essentially clamps from -Infinity to 0px */
	--offset: min(0px, 100cqi - 100%);
	
	display: block; /* Only needed because this element is a <span> */
	inline-size: max-content; /* Allows the element grow past the container limit */
	text-wrap: nowrap; /* `max-content` actually triggers this already but I like being explicit */

	mask: linear-gradient(to right,
		transparent,
		tan var(--padding) calc(100% - var(--padding)),
		/* This is a 2-position color stop, any solid color will do, but `tan` is short — `red` or `deeppink` work too! */
		transparent
	);
}
.text:dir(rtl) {
	/* In RTL contexts, move in the other direction: 0px to Infinity */
	--offset: max(0px, 100% - 100cqi);
}
.container:hover .text {
    /* Animation names don't need double-dash prefixes but I like doing so for clarity,
    I believe I picked that habit up from Roma Komarov (a.k.a. kizu) */
	animation: --pingpong 4s ease-in-out alternate infinite;
}
@keyframes --pingpong {
	to { translate: var(--offset); }
}

A no-AI icon for humans to use

2026-01-19T19:56:00.000Z

I have added a tiny symbol in the footer of my website. It’s supposed to be as unremarkable as a © symbol (though I think we can all agree it basically holds no value whatsoever these days), but communicates that A.I. — the buzzword encompassing large language models, machine-learning, or neural networks, which are speeding up climate change, devaluating labour, decaying critical thinking, eroding creative expression, accelerating misinformation, and exploding consumer product prices, all while being aptly symbolised by a chocolate starfish — will not be found anywhere on here. I already had “100% human-made” for a while but decided a little icon would be nice to have. (I now also have a dedicated A.I. policy page)

I have recently seen articles that tackle fascinating topics, only to notice a caption along the lines of “image of Mars generated with ChatGPT” (when NASA has a whole website of real, gorgeous photos that can be used), or an illustration that is 100% A.I.-generated which was 100% not necessary to illustrate the point the article is trying to make. It cheapens the end-result, and I am very tired of it. Is the technology impressive in its own right? Sure! Is it ethical and/or useful at the current scale it is being shoved down our throats? No! Keep the web creative, expressive, diverse. Keep it human and interesting — use fucking em-dashes.

It goes without saying I made it myself (ironically enough, in a programme whose initials are… A.I.). And if you want to use it? Feel free to do so! I made the 88×31 “No-A.I.” button in the footer into a link so you can download it with a simple click, or you can use this link to the symbol’s SVG file as well.

Other icons and badges

You can find other icons and badges around the internet, here are a few:

Human made content, badge pack by Andy Carolan (free/pay what you want)
AIn’t icon
Human-Made icons
The Human Made Project icon
No AI icon by Shrig
Not By AI badge pack (paid verification, or one-time fee to access)

Yearnotes 2025

2025-12-26T23:55:00.000Z

Another year has gone by. I guess Smash Mouth was right: the years start comin’ and they don’t stop comin’. We can make quick eye contact and nod in understanding instead of discussing how messy the world’s goings-on have been, or how life has been tiring, so I’ll skip over all that stuff and keep it light-hearted.

For the most part, this is a media diet rather than a weeknote-formatted retrospective, as it’s more interesting to read given the wide timeframe — I am also skipping re-watches/re-plays: this is long enough as it is. A couple of things: you can click very discrete parts of some of the section illustrations (lil’ easter eggs for ya…), and a 👍 emoji indicates a highly recommended piece of media. Alright, here we go.

Content customisation

I tried to keep it short, but the media diet part (which is most of this post with… 61 items!) is still a hefty read. You can toggle the commentary off with the button below.

I started off so, so well. Three months, three books! Then I lost steam and didn’t read a book from April through October… (unless you count half of a friend’s book draft) Given I read nearly twice as many last year, this is bad even by my standards (admittedly, though, I am a slow reader — if you read fast, you have my admiration). Hoping to read more in 2026, so if you have recommendations, please send them my way!

Emily St. John Mandel

Station Eleven (Highly Recommended)

(started reading this one in late 2024) I liked this one a lot, it had reasonably believable characters and situations, and it was a good post-apocalypse story (or rather, woven stories). Seems this books sheds light on a common myth in media: gasoline goes bad after a couple years, so post-apocalyptic movies/games where they go for a drive? Lies! Also this book is eerie to read given it has a disease which sounds all too similar to COVID-19, yet was written years before…
Martha Wells

Artificial Condition (Murderbot Diaries #2)

I read the first one in 2019 or something, and I noticed a few “Year in review 2024” posts had this series mentioned. I knew I had the .mobi file for the second book somewhere (it was given out for free when the third book came out I believe?), so back in I went. The story is pretty light and short but I still enjoyed it.
Riley Sager

The Only One Left (Highly Recommended)

It’s a bit of a murder mystery, and it kept me guessing a lot. There’s a bunch of characters and plot points to connect by the time you reach the end, so overall quite a good read. I was on a train for 10 hours, so I read 3/4 of the book, and finished it the same day at home — first (and last?) time I read a full book in twenty-four hours!
Robert A. Heinlein

Stranger in a Strange Land

I got intrigued when hearing of this book via Jason Grigsby’s article. The cover sealed the deal for me because I love the dark teal and crimson combo. It’s a retro sci-fi book from the ’60s (the fiction part is way more prevalent than the science one), so beware it is a product of its time (while not a main thread, it does have some sexist undertones). I can say one thing: it went in a direction I certainly did not expect!

I watched a decent amount of TV shows, and I like to think it was varied. I did not get to White Lotus or Fallout — I guess I really want to watch Walton Goggins, eh? I haven’t seen the final Stranger Things season yet, but plan to in 2026, along with a rewatch of Parks and Recreation… it just needs to happen.

Detroiters

Seasons 1–2

I enjoyed I Think You Should Leave, and some co-workers recommended Detroiters, with ITYSL’s Tim Robinson and Sam Richardson. I watched a couple episodes last year but got through it all earlier this year. It’s walking the line between wholesome and unhinged. The characters are total goofs who have so many flaws, but you still can’t help but love ’em.
Bob’s Burgers

Seasons 9–13

More Bob’s Burgers! The main cast is endearing despite being, sometimes, terrible, and I can’t help but feel for Bob — the rest of the family gets a little too selfish at times, and then right at the end, sometimes, they kinda redeem themselves… Still, it is a mostly a wholesome show, and a particularly Christmas episode hit me right in the feels… a dang good show.
Severance (Highly Recommended)

Season 2

This second season starts up slow but boy oh boy are things getting weird on the severed floor. This answered a few questions but left me with many more. It’s so fucking weird and I love it. The cast is pretty fantastic, and I love seeing the tiny cracks in this cult-like company, but still so much left in the dark. I need to know!
Taskmaster (Highly Recommended)

Series 6, 17, 18, 19, 20

More shenanigans with Greg Davies and his lovely assistant, little Alex Horne, as they judge the performances of 5 comedians carrying out the most random tasks. It’s hard not to feel a little sad when a series ends, as they change cast every time, but that’s also what keeps things fresh. Caught up on series 6, and the four latest! Without a doubt the best game show out there — so happy it’s still going strong.
Andor

Season 2

Similar beats to season 1, I found, but that’s not always a bad thing. This show has a lot of great material — surprising for a Disney show. It actually feels like mature and of high quality — despite a couple easy tropes — written by adults and for adults (and then you’re reminded it’s a Star Wars show when a character’s name is like Greebii Booboog). The visual settings were beautiful, and there were more than one non-human character this season, if you can believe it!
Dexter: New Blood

I liked the original series (err, we can ignore the ending), and the books, so with new Dexter-verse content, I gave this a shot. It started off slow, then got quite gripping, but fizzled up with some dubious behaviours. I liked that it was supposed to end, but, well, there’s a sequel to this show: Dexter Resurrections. (trailer seems… iffy at best) I do like Michael C. Hall’s performance though…
Wednesday

Season 2

The first season was pretty good, though I wasn’t necessarily expecting another. I almost didn’t keep watching due to Pugsley’s vibes being very off-putting. It didn’t get worse, so I powered through it. Characters not communicating as a plot device is frustrating but what can you do… This felt a little lacking at times, but Thing? He killed it.
Ludwig

Series 1

This is a show where David Mitchell plays an anti-social, puzzle-solving mind who has to impersonate his missing police detective twin brother, to secretly investigate his disappearance. It’s a British crime mystery dramedy… I think? A little formulaic but very enjoyable all the same. Only 6 episodes, but a second series is planned!
Chernobyl (Highly Recommended)

This miniseries is absolutely riveting, equally fascinating and harrowing (episode 4 broke me). Given the mess it was, it is incredible to see how much worse it could have been, yet also how terrible it did end up being. Also, props for not giving everybody heavy, fake soviet accents.
What We Do in the Shadows

Seasons 1–3

I have wanted to watch this for a while (I saw and enjoyed the movie, a long time ago). Let me get it out of the way: gosh I adore Matt Berry. I love how Laszlo, Nadja, and Nandor all have weird ways to say some words, Guillermo is very precious, and Colin is perfectly boring. I enjoyed these first few seasons, despite all the main cast of vampires being absolutely horrible people. I also find myself saying “Baaat!” and “Fu-cking guyyyy…” randomly, so, you know… I am enthralled.

It’s weird how I’m fine binging 3 TV show episodes in a row for nearly 2 hours, but sitting down to watch one movie in the same amount of time is nearly impossible. Go figure! I would have more to say about most of these movies but I’ll keep it spoiler-free.

The Gorge

Scott Derrickson (2025)

It was pretty good, the characters (both elite snipers) had compelling chemistry, and while some plot points (and camera angles) were odd, I did (Anya-Taylor)-en-Joy it and it made me throw a few s-Miles-(Teller). (sorry) It managed to blend multiple genres (action/horror/romance?), with cool/creepy visuals, and totally unrealistic scope/binocular magnification.
Captain America: Brave New World

Julius Onah (2025)

The MCU is fatigued, but I don’t mind putting my brain on auto-pilot for those movies. This was just okay, and I may be missing context from previous shows, but I don’t have the patience. The villain is a little too on the nose, and Harrison Ford angrily points at people.
Sinners (Highly Recommended)

Ryan Coogler (2025)

I can’t say I knew much about this going in but maybe it was for the best. This was a wild ride. Incredible performances all around, with Michael B. Jordan giving us 200%. Very impressed with how this one turned out.
Beetlejuice Beetlejuice

Tim Burton (2024)

Listen, I know the power of nostalgia can have, but I don’t think we needed this movie. High stakes, you ask? Nah, danger is dealt with in a flash. While Catherine O’Hara and Willem Dafoe are fantastic, Jenna Ortega seemed to reprise the Wednesday role. And Monica Bellucci’s character was completely underused. Visually good, eh for the rest.
Thunderbolts (Highly Recommended)

Jake Schreier (2025)

I didn’t expect much out of this one, but Florence Pugh was fantastic. Her character has layers that work well with the over-arching theme of mental health affecting all of the team. Yeah, you get some silliness, but, dang, for once, it felt… earned? And David Harbour’s loud Alexei character is goofy, sure, but also has some heart, so it seemed balanced. It’s not perfect, but not being mono-dimensional for a Marvel movie is rare these days, so I’ll take it.
The Breakfast Club

John Hughes (1985)

I had never seen this movie and figured, on a slow Saturday afternoon, I’d give it a whirl. I certainly enjoyed most of it, though some parts (and lingo…) are a product of their time for sure, while other things are glossed over (the sushi at room temperature, what?). In any case, it was pretty fun to see what the fuss was about, and to enjoy the soundtrack. I am but a simple mind.
Mission: Impossible - The Final Reckoning

Christopher McQuarrie (2025)

Wow this movie is long. So long it felt the need to repeat some plot points multiple times, with flashbacks. Some sequences were dead quiet, which can be a nice contrast, mind you, but not too much? Other scenes: quite drawn out. Tom Cruise still loves sprinting. And there’s a French character who only replies in French despite it being an English conversation. Why? Why?! (I’m French, I am allowed to complain about this!)
Willy Wonka and the Chocolate Factory

Mel Stuart (1971)

Another classic I knew of and never saw. Gene Wilder is absolutely fantastic, and his unhinged yet surgical sass is wonderful. It’s incredible how well this 55 year-old movie holds up. Fun fact: I knew without knowing of this movie via Pendulum’s Through the Loop song, which samples Wonka’s mad scene on the riverboat in the tunnel of terrors.
Who Framed Roger Rabbit? (Highly Recommended)

Robert Zemeckis (1988)

Yet another classic I’d never watched. I don’t know if this was a kid’s movie but seeing it now I can certainly see it wouldn’t be today. The performances were great, and visually it was quite incredible how they mixed both live action and animated styles. What a technical marvel! (also it’s funny how easy it is to recognise a Zemeckis movie just by the music)
The Emperor’s New Groove

Mark Dindal (2000)

Sensing a theme? Yeah another classic I missed. It was pretty decent, though I am a little late to the party. Definitely felt like a kind of weaker Hercules, but still enjoyable. John Goodman’s voice certainly carries a lot of this movie.
Friendship

Andrew DeYoung (2025)

The premise of “mid-life crisis man tries to make friends” is appealing, and I thought “okay this is going to be like I Love You, Man” (also with Paul Rudd) mixed into an extended ITYSL sketch, for better or worse: it has plenty of Tim Robinson’s signature cringe and/or over-the-top acting but I would not call this a comedy (though I did laugh at times!), as it is a little darker/weirder than just that. It’s not going to be for everyone!
Elf

Jon Favreau (2003)

I had wanted to see this for a while because of “You sit on a throne of lies” dot gif, and, well, Will Farrell being a man-child is what he does best. For what this movie is (a family movie), it’s cute and funny, and that works.
Wake Up Dead Man: A Knives Out Mystery

Rian Johnson (2025)

I was torn on this one. On the one hand, it was a compelling mystery with some really funny moments and comments on modern society, but on the other, the pacing made it feel a little too long. Don’t get me wrong, the story was good and the cast is excellent. I could certainly watch more Benoit Blanc mysteries.
Superman

James Gunn (2025)

I liked it and didn’t. We’re thrown into the middle of a story and lots of relationships/tensions come out of nowhere. I get not wanting to reintroduce Superman again but we could have been eased into the universe a little better.
The Naked Gun

Akiva Schaffer (2025)

This was a whole lot of fun. Silly, full of ridiculous puns (good luck, translation teams!) and visual gags: it was good!
Despicable Me 3

Kyle Balda, Pierre Coffin (2017)

Watched this while preparing Christmas dinner, it was pretty cute. Trey Parker’s voice is unmistakable.
Violent Night

Tommy Wirkola (2022)

A little more gory than I expected but it’s a simple movie that was doing its violence/comedy thing well. I would have loved more backstory on Santa, the glimpses we saw were an interesting idea.
The Fantastic 4: First Steps

Matt Shakman (2025)

I loved the atompunk/retrofuturist aesthetic, and some of the space scenes, but I didn‘t feel super invested, despite the tightly-knit family they managed to depict. Though I haven’t seen it, I am sure this is better than F4ntastic.

There’s a lot in here, so I’ll only list new stuff (if you click the covers, you’ll get the playlist on BandCamp or YouTube) that I’ve played several times. A few special mentions:

Low Roar’s Don’t Be So Serious (via Death Stranding 2). Sadly the creative mind behind the project, Ryan Karazija, has passed away, but their beautiful music lives on.
Muse’s Unravelling is pretty dope, I’m here for it.
Venjent creates DnB songs from random video clips (as well as their own tracks). They are ridiculously talented, hear for yourself: Bike Alarm and Sunken.
Pat’s Soundhouse made a glorious khaen performance that starts off as a car alarm but ends up being so much more than that.

Architects

The Sky, The Earth & All Between (Highly Recommended)

Architects have a pretty consistent style, and as far as metalcore goes, they check all the boxes for me. Melodies are good, screaming and singing are balanced, and all round enjoyable to listen to. This new album follows the trend, and I’ll say it: is better than the last. They seem to keep evolving their sound little by little, which is always nice.
Underoath

The Place After This One (Highly Recommended)

Didn’t know this band was still writing music, but it was a nice surprise. It’s a good album, pretty consistent with what I’d expect from Underoath. I’ve listened to this album quite a bit and that’s a good gauge of how much I like it. It’s got some decent variety in my opinion, so it’s an all-around solid release.
Thornhill

Bodies

I accidentally discovered this band and their debut album The Dark Pool a few years ago: immediately a favourite. Then they released Heroine in 2022 and… I really didn’t like it. This new one feels like a step in the right direction to me. It’s got some Deftones vibes here and there, too, which I certainly enjoy.
Sleep Token

Even in Arcadia (Highly Recommended)

I discovered Sleep Token, an anonymous masked band, a little before their previous album, Take Me Back to Eden, came out, and have been pretty obsessed ever since. Their new album, Even in Arcadia, keeps us guessing on what genre will be injected into the song, and the lyrics have so many metaphors, it’s always stimulating to parse out. Many, many replays for this one.
President

King of Terrors

Like Sleep Token, this is an anonymous band, though there is no doubt to me who the singer is. Their first single, In The Name of the Father, was, as the kids say, a fucking banger. I played that song on repeat (YouTube seems to say it is my most played song this year). The follow-up tracks on the EP were progressively less bangers, but I still think this is a band I will be following very closely. Eager to see what’s in store for them.
BLEED

(self-titled)

Shared by Cory Dransfeldt on Mastodon, the description caught my attention, and I’m glad I bookmarked their post. This is some late ’90s/early 2000s rock that has that industrial/ethereal vibe to it.
Moving Mountains

Pruning of the Lower Limbs

Didn’t know they were making music again but they sound just like I remember, rock and ambient as ever. To be honest the entire album feels almost too cohesive, as I sincerely cannot, from a few listens, remember individual tracks, but maybe I need to try harder. They also re-recorded Cover the Roots and 8105, and wow, some 20 years later, those songs still slap.
Deftones

private music

I love me some Deftones, Chino’s floaty voice on one end and screams on the other are a perfect blend. I’m glad they’re still going, for a while the only Deftones-y fix I could get was Chino’s side-project Crosses.
Pendulum

Inertia

While I enjoy drum’n’bass, Pendulum seems to be more my rhythm with them being closer to a “traditional” band playing live instruments (not exclusively, I know!), so they’re usually mixing it up a little, which I find works great. Inertia seems to be a good return to form in my book, with a good mix between their older and newer stuff.
Biffy Clyro

Futique

I did not know this was coming out but this is good! I particularly liked True Believer and Two People In Love. This was a solid album, that sounds like exactly like them yet remains new and refreshing. Also, the singer’s Scottish accent shines through on certain syllables, and that’s particularly enjoyable.
Princess Goes (to the Butterfly Museum)

Come of Age (Highly Recommended)

After watching Dexter: New Blood, I guess the YouTube algorithm figured me out? It suggested a video with Michael C. Hall, and… the man can sing! With his bandmates Peter and Matt, they make some psychedelic-flavoured synth-rock I did not know I needed. Hall sounds very much like David Bowie, which is surprising given I mostly know him for the stone cold serial killer in Dexter, but I remember he did that Skittle musical once upon a time… Listen to "Blur", I adore it.
Nine Inch Nails

TRON: Ares (Original Motion Picture Soundtrack)

I love me some Nine Inch Nails. This soundtrack is pretty good and varied, but unsurprisingly, I am mostly into the main single: As Alive As You Need Me to Be, which feels like a proper NIN song, whereas the rest are more atmospheric and score-like than a standalone song, but still enjoyable. Bonus point for the TRON-ified NIN logo, very rad. (Unlike the movie, apparently… blame Jared Leto? >Y/N)
Thrice

Horizons/West (Highly Recommended)

After a long wait, Horizons/West is here! East came out in 2021, and the title obviously teased at this “sequel”, and while waiting is never fun, it was worth it. East felt kind of gritty, rooted, while West feels smoother and aerial, for the most part, but without losing that raw sound. They’re my favourite band, and their sound evolves, aging like fine (dandelion) wine.
Khruangbin

The Universe Smiles Upon You ii

I don’t listen to Khruangbin often, but when I do, I certainly enjoy the heck out of it. Their music is a lot more mellow compared to what I usually listen to, so it’s a good way for me to chill out and feel the music, and, maybe, just maybe, relax a little bit. This surprise album dropped right as I was heading into an extended weekend — perfect timing (just like their drummer — seeing live recordings, the guy keeps time like a machine!). The last song is just so calming… ☺️
Genesis

(self-titled)

Do not judge me too harshly: I had never listened to this album in full (or much of Genesis, despite loving their sound… and their Phil Collins, perhaps, a little, too). I regret that. What a great album this is… and what an opener! They perfectly represent the sound of the eighties with those roomy snares, synths, and effects.

I made some time for some gaming here and there (which, compared to all other media, is a lot, when I think about it…), and it is good to see it’s been pretty diverse for me this year between adventure, puzzle, and… wheeled sports? Not included below are my (mostly) daily puzzles like Tiled Words, (mini) crosswords, and expert killer sudoku. I’m also really looking forward to 2026 with a few specific games like Control: Resonant, and Star Wars: Galactic Racer (and yes, GTA VI, too), in addition to my backlog, such as A Plague Tale: Requiem and Stray, and maybe Disco Elysium.

Star Wars Jedi: Survivor

Respawn Entertainment (2023)

I like a good value for my money but this game has so dang much to explore, it’s almost overwhelming but also well crafted. The story manages to stay interesting throughout (one gripe? the good-guy-turned-bad-guy trope which, in this universe, also means they absolutely need to have a red light saber or something — whyyyy), and gameplay remains fresh, though my main move was throwing enemies into chasms. Hell yeah.
Sniper Elite: Resistance

Rebellion Developments (2025)

A little clunky in some parts, but I sniped nazis in the balls, killing them instantly, so I had a lot of fun. I also saved after every risky action and reloaded when I got detected, so a 20-minute mission usually ended up being 3 hours for me. Absolutely appalling time management, but I love my stealth. This game has a section in my hometown and looks nothing like it, but that’s creative liberty, baby.
BioShock Remastered

Blind Squirrel Games / 2K Games (2016)

I watched my brother play this a bit, back when it came out on PS3 and I played the sequel (eh…) and BioShock Infinite (very nice), but never the original. I figured I would kindly like to see what this was all about. The game has aged a little but the atmosphere is still rich and expressive, despite controls which can be a little iffy, at times.
Epigraph

Matthew Brown (2024)

This is a linguistic puzzle game; that’s my jam. I’ll admit getting started was tough; I was at a total loss. Some help from a “quick start” guide in the Steam community forums really helped me shift my perspective and start understanding the game’s language system. I had picked up a few clues but remained unsure until this guide basically held my hand. Despite my not-totally-independent playthrough, it was a very enjoyable, minimalist game.
Yoku’s Island Express

Villa Gorilla (2018)

This is a cute little 2D platformer in which you play… a dung beetle. Carrying around its ball of… erm. Yoku cannot jump, but the game has jumping pads as well as pinball-like sections to move around and complete puzzles. Aside from a couple awkward controls to go exactly where you aim, it was an adorable little adventure which even had some side quests.
Blue Prince (Highly Recommended)

Dogubomb (2025)

This is a rogue-puzzle game… what? We inherit our great-uncle’s 45-room mansion, but only get to keep it if we find room 46. This is a challenge due to getting tired, and having to restart every day, because the rooms change based on what you choose to “draw”. There’s a ton of strategy (and special items/effects), and surprisingly deep lore. Cool music, to boot!
Portal: Revolution

Second Face Software (2024)

This is a Portal 2 community-made mod (free, but requires the base game) that has its own integrated storyline, and includes original voice acting, as well as gameplay mechanics that feel familiar yet fresh, namely the pneumatic vents. It really feels like a genuine Portal 2 extension, and being a puzzle-game fiend, I had a great time (plus a couple of frustrating moments).
Thank Goodness You’re Here!

Coal Supper (2024)

This had me laughing within a minute of starting, and the characters you meet are just so fucking weird, I loved it. There’s a lot of strange stuff, and also the gardener is voiced by a man whose voice I’d recognise anywhere, what a treat. TGYH is pretty short but jam packed with fun. And the in-game TV ads are wonderfully ridiculous. Peans!
skate.

Full Circle (2025)

I got to alpha-test the game in early access, and while the feel was there for controls, everything else was just… dull, and soulless (the final release barely looks different). There’s even an AI kind of robot talking to you throughout — yay. I like how it played, but the map feels way too small, and it did not capture my attention. It is free to play, for what it’s worth.
Death Stranding 2: On the Beach (Highly Recommended)

Kojima Productions (2025)

Yep, it’s time to get weird. The story is, once again, a wild ride, and a lot of pain points of the original game were addressed without making things too easy. There were still a fair share of challenges and I did get all the achievements, so I guess you could say I enjoyed it, despite the bonkers story you’d expect from Kojima. The soundtrack is also an absolute treat, particularly Low Roar.
Wheel World

Messhof (2025)

This is a indy-ish game where you play as a bike rider, earning reputation to win back stolen parts from a legendary bike, all to… save the world. The story is a little wacky but fits nicely given how the game presents bikes and races as something created by actual gods. There were some frustrating glitches and performance issues, but overall I had a lot of fun; it was a nice change of pace, and the music was surprisingly catchy!
Tony Hawk’s Pro Skater 3+4

Iron Galaxy (2025)

I played the absolute crap out of THPS3 on the PS2 back in the day, and I was very happy with the THPS1+2 remake, so this additional remake was a welcome release. I never played the 4th entry so I got a nice mix of nostalgia and new levels to explore. Some scores are still really tough to get but that’s part of the challenge. Really fun to (re)discover this!
Ghost of Yōtei (Highly Recommended)

Sucker Punch Productions (2025)

The follow-up to Ghost of Tsushima, which means: Japan, samurais, and cute foxes. The atmosphere is on point. The game plays very nicely but gosh fucking dang it I suck at parrying. I got drawn in by Atsu’s story; a sequel done right that doesn’t stray too far from the original formula, and which improves here and there where needed. Oh and you can kick enemies off of cliffs, 10/10.
Clair Obscur: Expedition 33

Sandfall Interactive (2025)

I heard many good things so I jumped in. The game has a lot of cool ideas, and the story is pulls you in with ease, though there is a lot of strategy I’m likely missing out on. I had to switch to Easy mode pretty quickly: the dodge/parry timing was sucking all the joy out it combats (it wasn’t just Ghost of Yōtei!). I’ve been alternating between French and English languages, both are excellent performances all around. (not yet completed at time of writing)

Personal

🩸 As I had mentioned in last year’s post, my yearly resolution would be to give blood again. And I did — twice — without fainting: great success! In the coming year, I’ll try to keep that trendline going up, or at least flat — I think I can handle it, so long as I eat enough prior!

🏃‍♂️ I completed my second half-marathon in May, in slightly rainy conditions this time, with half-assed training after a long break in the winter. I immediately took a 3-month break after the race as it was getting too hot out, and I was absolutely shattered. But hey, I did it! Now I must consider if I can repeat the feat in 2026…

🚄 Needing to get my passport renewed (I am a permanent United States resident, very fun these days), I planned a visit to the closest city with a consular office: Chicago! Having never been there, I got some recommendations over on Mastodon (thanks!), and proceeded to check out a few coffee spots, as well as the Art Institute and the 360 observation deck. The Art Deco architecture everywhere was also a real treat. I only stayed about a day due to hectic train schedules (2–10am one way, 6pm–4am the other) but really loved it, plus the weather was gorgeous.

Work

👨‍💻 I probably worked too much, didn’t take many days off (I had too many left so they didn’t all carry over…), and that’s not good, I get whiffs of burnout here and there. I’m glad I have teammates who are good, talented humans, to make the work more fun (and who put up with my terrible puns day in and day out). I gotta learn to take a break sometimes, eh?

👕 I worked on a few designs this year: a couple of stickers (and a new CottonBureau shop with some existing designs), and commissioned work! A huge thanks to Mat Marquis for their trust on this JavaScript for Everyone shirt, I loved working on it. I don’t do much design work any more, so I thoroughly enjoy these kinds of projects, especially because I get to design with aesthetics I like, about themes I hold dear: a perfect mix. More work to be announced…

Web Dev Things

🐛 I found a few browser bugs! Most were fixed relatively quickly, too – remember to file ’em when you see ’em! As for spec stuff, I opened a proposal as I was playing with noise textures — background-rendering, anyone? — but turns out the image-rendering does it fine, just… not in Safari. More like Sigh-fari, am I right? I’ve also been frustrated with the state of styling alt text. Firefox has pretty decent options with img::before (see CodePen demo), but Chrome is limited (issue #406271689), and Safari is even more limited, but to make things worse, hides the text if it wraps (my bug #290433 was marked as a duplicate of bug #62774 from… 2011 🫠). I don’t expect much movement there, though I heard something about a :broken pseudo-class…? I also have a spec proposal stuck in purgatory — definitely not a pressing matter, but I could sometimes make use of absolute values in a CSS scale transformation.

🎨 I made a few fun CodePen demos, like skew-based rotation and frosted glass filter. The <dashing-button> component is one of those things I had to build after seeing bad (i.e. non-existing) transitions on dashed buttons. I also riffed off of Chris Coyier’s old school rounded tabs with fewer pseudo elements. Finally, I made <details> expanding content below on a grid (hey that’s like, tabs or something), which was initially going to be the layout for this very post, but ultimately, I abandoned it due to accessibility and cross-browser issues.

View on CodePen

That’s All Folks!

I might need to split these up to once every few months because this post is a little bit of a slog to read through — over 5,500 words, yikes, how did I have that much to write about? Either way, thanks for stopping by, remember to be kind, wash your behind, and hey: happy new year! 🎉

Bonus: Details for Dorks

If you are a dork like me, here are the fonts (yay, fonts!), and inspiration for the illustrations:

Books: font is Parkly, illustration is based on a photo by Ilinca Roman
Shows: font is Turbeau, illustration is based on a cheap TV whose brand I cannot find
Music: font is Contour Generator, illustration is based on a Sony Walkman
Movies: font is Graph (Paris), illustration is based on a AnscoVision Dual 8MM/Super 8MM film projector
Video Games: font is Lkdown, illustration is based on a Nintendo Entertainment System controller

I also had lots of fun with CSS/SVG/JS but I think that, besides thanking Tyler Sticka for a way better solution for that "Content customisation" block’s legend-like style near the top (he even wrote all about it!), I am kind of done writing for the year. If you’re really curious about something, let me know on Mastodon. Toodeloo!

Keeping link underline styles around inline code with padding

2025-12-02T04:00:00.000Z

Recently, ~~text-decoration-trim~~ text-decoration-inset was added to Firefox behind a flag, and I was hoping it could fix a little visual thing that has bugged me on my website: the gap in underlines for inline code when it’s part of a link (e.g.: <a href="...">A <code>special</code> link</a>). You can see this happen on popular sites like GitHub or Notion, to name a couple.

GitHub, Notion, and this very website (previously)

It’s not unusual for inline code to have a slightly different background colour, and in turn, padding to give the code some breathing room in the rectangle, preventing the text from being stuck against the edge of the box. But that’s the issue: the padding will separate the inline element a little, causing the underline in the parent link to break around the code element. What can we do?

Seem familiar?

This problem is kind of the opposite from my post from last year, Removing link underline styles between icons and text.

New CSS to the rescue?

I tried using the new CSS property text-decoration-trim (at the time of writing, Firefox has not updated to the new name) with a value of calc(var(--p) * -1) (with --p being my inline padding amount of 0.125em). Sadly, the padding still causes the underline to be skipped. I then tried adding text-decoration: inherit; alongside with the negative inset, but that gave the same result. Okay, bummer, but my understanding is that the padding is basically a non-inline thing, so it’s not underline-able, or something — fair enough.

Back to the drawing board.

Old CSS to the rescue!

Sometimes you gotta go back to move forwards. Instead of trying to fix this with brand new CSS, I used… some old-ass CSS. Instead of padding-inline, I added some ::before and ::after pseudo-elements with a content set to a hairspace (Unicode sequence U+200A):

 CSS:not(pre) > code {
	/* All of the other styles like font-family, color, background, border-radius… */

	&::before,
	&::after {
		content: '\200a';
		font-size: 0.5em; /* I need to split hairs: it was still too wide */
	}
}

Job done! Right? Weeeeeell…

If that hairspace lands right at the end of a line but the actual code cannot fit, then it can be a lone hairspace on one line, and the code on the next: not great. The fix is to use a word joiner (U+2060). That will ensure the two hairspaces are connected to their respective first and last characters in the code element. More magic unicode incantations and there we go: content: '\2060\200a\2060'; The word joiners are not necessary on both sides, but this makes the code more concise, and does no harm, I think? Feel free to split up the two.

Note

I’m not sure assistive technology is going to bother with these whitespace characters, so setting alternative text with the newer content: '\2060\200a\2060' / ''; syntax seems irrelevant here but if I’m wrong, let me know!

The only downside here is that if your code takes up two lines, the padding cannot be repeated at the end of the first line and start of the second with box-decoration-break: clone, but that is something I am willing to live with.

And with that yes, now we are done. Ship it, turn off the computer, and take a long walk.

PS: no, this is not even the worst post title I could think of, why do you ask?

Adding a custom filename to a code block in Eleventy with markdown-it

2025-09-19T03:30:00.000Z

I made a plugin to have more control over my code blocks (CodeWrap, I wrote about it), and I liked the idea of giving a filename to a code block (for example, .eleventy.js) instead of just showing “JavaScript”. With my CodeWrap plugin, I can hook into markdown-it’s rendering logic and process a value like ```js:.eleventy.js. I then save the filename in a private _filename property, and restore the “natural” value of js for the code block’s programming language. This works very well! I described this in my aforementioned written entry about the plugin if you want to learn more.

However, this also means I have backed myself into a corner of proprietary syntax, and I must admit that I am not quite fond of this. Plus, while I don’t use it (yet), there is a Markdown standard (extension?) for line highlighting that’d likely be in conflict, so… not great! To “fix” this, my idea was that, instead of adding the filename right next to the language separated by a colon (once again: a custom syntax of mine), I would add it in square brackets, on the line right before the “fence” (the name for triple-backtick-wrapped code), so it looks like:

 Markdown[eleventy.js]
```js
// Some interesting code
```

It was easy within my CodeWrap plugin to find the previous paragraph and get its contents (the markdown-it renderer provides the full list of tokens, and loops through them, with their index, so going back a couple indices was fine), but sadly, I could not toggle the hidden flag, as I believe it renders tokens in sequence, not all at once, so by the time the code block was being processed, the previous paragraph was already rendered.

Makes sense, but that means this approach won’t work. So… what can I do to get the same result, but catch my square-bracket line before it’s rendered? Well of course: another plugin!

Before you say “boo!”, I mean plugin in functionality only — anything passed to the use method is considered a plugin to markdown-it. I didn’t release anything on npm, I swear, I didn’t over-complicate it this time! I added a new handler in my configuration with the same structure as a plugin, but inline, instead of a reference to a third-party import. So much power!

 JavaScript// Configure the MarkdownIt instance
const mdit = new markdownIt(markdownItOptions)
	.disable('code')
	.use(markdownItAttrs, markdownItAttrsOptions)
	.use(markdownItAnchor, markdownItAnchorOptions)
	.use(function (md) { /* A new inline plugin! */ })
	.use(markdownItCodeWrap, markdownItCodeWrapOptions); /* My existing plugin! */

// Configure the markdown-it library to use
eleventyConfig.setLibrary('md', mdit);

I think the square brackets, by themselves and without any following parentheses (as you’d see on a Markdown link), won’t trigger any Markdown behaviour, and should, as such, be safe from wonky parsing. If you think this is bad for some reason, please let me know!

The idea is to process the tokens so that instead of looking back from the code block token for an open paragraph token, the opening paragraph token will look ahead for a code block token: this way, the paragraph can be manipulated before it renders, and that includes its hidden property. I also found out markdown-it has a useful meta property attached to every token, allowing us to add any bit of data we want. A filename sure seems like a good fit.

For this purpose, we’re only interested in finding paragraphs right before code blocks, so looking at the token’s type will help: paragraph_open for the current token (at position of idx), paragraph_close for the token after the next (idx + 2), and fence following that (idx + 3). The inner contents of the paragraph are also provided (at idx + 1) and that’s what will be — take a deep breath — matched against a regular expression.

Like me, you might have long-ish posts with lots of code blocks and paragraphs, so looping through all of them might be a little much to add like 3 filenames here and there. I can’t promise it’s a million time faster, but I tried to ensure the regular expression only ran when it a code block was indeed right after a paragraph.

Okay, I think I’ve explained enough, let’s see some code!

 JavaScriptconst mdit = new markdownIt(markdownItOptions)
	.disable('code')
	.use(markdownItAttrs, markdownItAttrsOptions)
	.use(markdownItAnchor, markdownItAnchorOptions)
	.use(function (md) {
		// This handles the non-filename scenario: using the default renderer
		const proxy = (tokens, idx, options, env, self) => self.renderToken(tokens, idx, options);
		const defaultRenderer = md.renderer.rules.paragraph_open || proxy;
		// Captures everything between square brackets so long as it's the only content and has a dot and extension
		//? e.g.: `logo.svg`, `darude/sandstorm.js`, `.gitignore`, etc.
		const filenameRegex = /^\[(([/.a-zA-Z0-9_-]+)?\.[a-zA-Z0-9_-]+)\]$/;

		// The markdown rendering function that handles extracting filenames if found
		function customRenderer (tokens, idx, options, env, self) {
			if (tokens.length > 3) {
				const currentToken = tokens[idx]; // The opening paragraph token (definitely)
				const nextToken1 = tokens[idx + 1]; // The paragraph child contents token (likely)
				const nextToken2 = tokens[idx + 2]; // The closing paragraph token (probably)
				const nextToken3 = tokens[idx + 3]; // The code fence token (hopefully)

				// If all the conditions are met via simple string operations, we can run the more intensive regular expression to find a filename
				if (
					currentToken?.type === 'paragraph_open' &&
					nextToken1?.content?.startsWith('[') &&
					nextToken1?.content?.endsWith(']') &&
					nextToken2?.type === 'paragraph_close' &&
					nextToken3?.type === 'fence'
				) {
					const previousParagraphFilenameMatch = nextToken1?.content.match(filenameRegex);
					if (previousParagraphFilenameMatch) {
						nextToken3.meta = nextToken3.meta || {};
						nextToken3.meta.filename = previousParagraphFilenameMatch[1]; // Use everything captured between the square brackets (group 1)

						// The paragraph's contents have been extracted, and it can now be hidden
						currentToken.hidden = true; // Not required but it just feels cleaner to have both opening and closing tokens hidden
						nextToken1.children = []; // If left as-is, this will render raw text, without the wrapping paragraph tag
						nextToken2.hidden = true; // Required on the closing token!

						return '';
					}
				}
			}

			// If the paragraph was not a filename, just return a normal render
			return defaultRenderer(tokens, idx, options, env, self);
		};

		// Apply the custom renderer just to opening paragraph tokens
		md.renderer.rules.paragraph_open = customRenderer;
	})
	.use(markdownItCodeWrap, markdownItCodeWrapOptions);
	
// Configure the markdown-it library to use
eleventyConfig.setLibrary('md', mdit);

I know these 50-ish lines of code aren’t the most fun to look at, but I hope the comments make it clear what’s going on: we make nearly-sure we have a filename paragraph, extract the filename via a regular expression (if any), then pass the found filename to the following code block’s meta property, and finally hide the paragraph we got the filename from. Phew!

As for how to make use of the meta property, if you happen to use my CodeWrap plugin, you’d add a toolbarLabel callback. In the code above, that’d be part of markdownItCodeWrapOptions — here’s a very simplified version of what I use:

 JavaScriptconst markdownItCodeWrapOptions = {
	toolbarLabel: (tokens, idx, options, env, self) => {
		const token = tokens[idx];
		// This will display the filename or the language, e.g.: ".eleventy.js" or "JS"
		const toolbarLabel = token?.meta?._filename || token?.info.toUpperCase() || 'Code';
		return `<span class="codeblock-toolbar-label">${toolbarLabel}</span>`;
	}, // ...and then more options
};

And there you have it. A custom filename on custom code blocks — neat!

JavaScript chris-bot.jsnew Chris().request('Please clap.');

At first I thought it’d be pretty cool to use the comment syntax of each language (so the first line in the code block would just be  or /* style.css */), as that makes it 100% compatible everywhere, and it remains mostly clear what’s going on, but I’d have to then pull it out of the contents, and properly parse comments in various languages… I think what I came up with is a little easier, consistent, and reliable, with the same syntax regardless of the language. And if I ever drop all my plugins, it still makes enough sense to see the filename right before a code block, all without breaking basic Markdown rendering.

I don’t know if this is great, or if most of my readers (all three of you!) even care to see a filename, but it’s fun to play around with!

Preventing jank on focused overflow-causing elements

2025-09-11T14:00:00.000Z

Making sure the focused element doesn’t trigger janky scroll.

Read full article: Preventing jank on focused overflow-causing elements.

Conditional favicon in Eleventy using passthrough copy

2025-09-01T00:00:00.000Z

Never mix up dev and prod again! (due to identical icons, at least)

Read full article: Conditional favicon in Eleventy using passthrough copy.

From Nunjucks to Vento in Eleventy: a migration guide (kinda)

2025-06-05T04:51:23.000Z

A few tips to refactor your njk into vto.

Read full article: From Nunjucks to Vento in Eleventy: a migration guide (kinda).

Taking VentoJS for a spin in Eleventy

2025-04-26T03:51:00.000Z

There’s a new kid on the templating block.

Read full article: Taking VentoJS for a spin in Eleventy.

Double-Pagination in Eleventy

2025-04-23T05:00:00.000Z

Yo dawg, I heard you liked pagination, so I added pagination inside your paginated pages, so you can paginate while you paginate.

Read full article: Double-Pagination in Eleventy.

Some thoughts on the item-flow proposal

2025-03-29T00:00:00.000Z

Solving for masonry could have beneficial side effects for other layout methods.

Read full article: Some thoughts on the item-flow proposal.

A Future of Themes with CSS Inline if() Conditions

2025-02-20T00:00:00.000Z

Another way to implement themes on a website with style conditions.

Read full article: A Future of Themes with CSS Inline if() Conditions.

Relative Temperature Conversion

2025-01-18T01:45:00.000Z

So this is how I can explain temperature fluctuations outside the US!

Read full article: Relative Temperature Conversion.

“Simple” Table of Contents Highlighter

2025-01-03T19:19:19.000Z

Highlight your TOC in a tick.

Read full article: “Simple” Table of Contents Highlighter.

2024 as bullet points

2024-12-30T00:04:04.000Z

Kind of a year in review.

Read full article: 2024 as bullet points.

Vertical slider fitting the tallest element in pure CSS

2024-12-13T00:25:00.000Z

Using transforms to create overflow.

Read full article: Vertical slider fitting the tallest element in pure CSS.

The Multi-Directional Nature of position: sticky

2024-11-01T19:20:00.000Z

You can use it any way you’d like.

Read full article: The Multi-Directional Nature of position: sticky.

Removing link underline styles between icons and text

2024-09-21T19:10:00.000Z

Fixing the tiny underline is nearly effortless with CSS variables.

Read full article: Removing link underline styles between icons and text.

:nth-next-sibling? No need.

2024-09-15T19:00:00.000Z

Target N elements after an arbitrary element in CSS.

Read full article: :nth-next-sibling? No need..

My under-engineered way to avoid a Flash of inAccurate coloR Theme (FART)

2024-09-01T20:55:00.000Z

It all boils down to a single line of JS.

Read full article: My under-engineered way to avoid a Flash of inAccurate coloR Theme (FART).

Leveraging APIs like Notion with a nice caching system

2024-05-03T03:00:00.000Z

How I implemented Notion and PSN APIs in my Eleventy build for my Now and Gaming pages.

Read full article: Leveraging APIs like Notion with a nice caching system.

2024 redesign

2024-04-04T16:04:24.000Z

Some notes about this 2024 redesign.

Read full article: 2024 redesign.

Snippet: git switcheroo

2024-01-25T00:00:00.000Z

Move a commit from one branch to another.

Read full article: Snippet: git switcheroo.

CSS Wishlist 2024

2024-01-11T00:00:00.000Z

My Wishlist for CSS in 2024.

Read full article: CSS Wishlist 2024.

Grouping posts by year with Nunjucks in Eleventy

2023-11-24T00:00:00.000Z

Group by year in a clear and readable manner.

Read full article: Grouping posts by year with Nunjucks in Eleventy.

Select an element which doesn’t descend from another in CSS

2023-10-25T00:00:00.000Z

Avoid false positives when using :not() to exclude ancestors from a scope.

Read full article: Select an element which doesn’t descend from another in CSS.

A Future of Themes with CSS Container Style Queries

2023-07-29T00:00:00.000Z

One way to implement themes on a website with style queries.

Read full article: A Future of Themes with CSS Container Style Queries.

My plugin for Markdown-It: CodeWrap

2023-05-28T00:00:00.000Z

My solution to adding "Copy" to markdown code blocks (and other things).

Read full article: My plugin for Markdown-It: CodeWrap.

Animate an SVG shape’s inner stroke

2023-02-25T00:00:00.000Z

Grow a stroke on an SVG shape but only covering the inner part.

Read full article: Animate an SVG shape’s inner stroke.

Plucking a nested property from an object

2023-02-24T00:00:00.000Z

Retrieving a property of an object which is also in an object in JavaScript.

Read full article: Plucking a nested property from an object.

Eleventy Asset Pipeline: Precompiled Assets without Gulp

2022-11-27T00:00:00.000Z

Precompiled Sass and JS files that become part of the source folder.

Read full article: Eleventy Asset Pipeline: Precompiled Assets without Gulp.

CSS Grid with a preferred column count

2022-09-13T00:00:00.000Z

Set up a CSS grid with a specific ideal number of columns.

Read full article: CSS Grid with a preferred column count.

Eleventy within Eleventy to compile when you compile: precompiling reused assets

2022-08-25T00:00:00.000Z

Pre-compile some reused assets to avoid repeating the same operation.

Read full article: Eleventy within Eleventy to compile when you compile: precompiling reused assets.

Manage your SVG files with Eleventy’s Render plugin

2022-08-10T00:00:00.000Z

Using renderFile to keep things tidy.

Read full article: Manage your SVG files with Eleventy’s Render plugin.

Fine, types in JS aren’t the worst

2022-05-01T00:00:00.000Z

I’m not on the TypeScript train, but I like a couple of things…

Read full article: Fine, types in JS aren’t the worst.

Animate your z-index for cleaner hover effects

2022-04-16T00:00:00.000Z

Clean up overlap animations on hovered elements.

Read full article: Animate your z-index for cleaner hover effects.

Le petit guide sur var, let et const

2021-08-07T00:00:00.000Z

Comment distinguer ces mots-clés JavaScript.

Read full article: Le petit guide sur var, let et const.

Rotating floating animation with chained transforms

2021-06-12T00:00:00.000Z

Using chained CSS transforms to get a rotation without rotating the element itself.

Read full article: Rotating floating animation with chained transforms.

A DRY Approach to Color Themes in CSS

2021-02-24T00:00:00.000Z

I wrote an article on CSS-Tricks about using a --var: ; trick from Lea Verou to define theme variables only once, when you need to respect a user-preference media query as well as CSS classes. Since you can’t do both in a single declaration block, you usually repeat these theme variables… but with this little hack, no need!

 CSS--color: var(--light, orchid) var(--dark, rebeccapurple);

The article details the trick and how to set it up (because it does look weird at first glance), maybe you’ll find another use case for it!

Read full article on CSS-Tricks.

Inline lists with conditional separators

2020-07-18T00:00:00.000Z

Only show a separator when two items are next to each other, and skip for new lines.

Read full article: Inline lists with conditional separators.

Building and maintaining components from utility classes in Eleventy

2020-06-29T00:00:00.000Z

Use a collection of utilities to form components without additional CSS.

Read full article: Building and maintaining components from utility classes in Eleventy.

Modern Fluid Typography with clamp()

2020-05-20T00:00:00.000Z

Get a more consistent sizing with viewport-based font sizing.

Read full article: Modern Fluid Typography with clamp().

Breakout Container

2019-11-23T00:00:00.000Z

Make a contained element span the entire horizontal space.

Read full article: Breakout Container.

Une réinitialisation CSS moderne

2019-10-30T00:00:00.000Z

Andy Bell propose un reset CSS adapté aux navigateurs modernes.

Read full article: Une réinitialisation CSS moderne.

Contextual Utility Classes for Color with Custom Properties

2019-08-14T00:00:00.000Z

I wrote an article on CSS-Tricks about using the power of the cascade to style links within their context, with custom properties!

Here’s an example: you have a block with a dark-blue background and light gray text. Say that block has link, and you want that link to invert the background and the text colour when it becomes hovered/focused. You can do that easily if you apply utility classes (.bg--dark-blue and .color--light-gray) that pass along custom properties, that you can then levarage in your link styles.

Simple, when you boil it down, but very powerful, because if the block’s colours change, you don’t need to worry about updating your link styles.

Read full article on CSS-Tricks.

Switching From WordPress To Hugo

2019-05-22T00:00:00.000Z

When I converted my blog, Geekometric, from a WordPress-based site to a Hugo-built static site, I felt I needed to go through a lot of different pages to achieve a simple blog.

This tutorial is the result of my compilation of all the knowledge I gathered, or needed to gather, to achieve my goal of a Hugo blog, hosted on Netlify. There are a lot of steps but at the end, you’ll have all the information you need to make it work, including hosting, domain handling, and even a CMS to edit your content via an online user interface!

Read full article on Smashing Magazine.

chriskirknielsen

Indie games are worth your time

Going Full Circle on CSS Toggle Transitions

Snippet: git ketchup

How I nerd-sniped myself into importing Nike Running Club data via the Strava API

Cheff mpeg

Auto-scroll overflowing table cells with CSS container queries

A no-AI icon for humans to use

Yearnotes 2025

Books

Station Eleven (Highly Recommended)

Artificial Condition (Murderbot Diaries #2)

The Only One Left (Highly Recommended)

Stranger in a Strange Land

Shows

Detroiters

Bob’s Burgers

Severance (Highly Recommended)

Taskmaster (Highly Recommended)

Andor

Dexter: New Blood

Wednesday

Ludwig

Chernobyl (Highly Recommended)

What We Do in the Shadows

Movies

The Gorge

Captain America: Brave New World

Sinners (Highly Recommended)

Beetlejuice Beetlejuice

Thunderbolts (Highly Recommended)

The Breakfast Club

Mission: Impossible - The Final Reckoning

Willy Wonka and the Chocolate Factory

Who Framed Roger Rabbit? (Highly Recommended)

The Emperor’s New Groove

Friendship

Elf

Wake Up Dead Man: A Knives Out Mystery

Superman

The Naked Gun

Despicable Me 3

Violent Night

The Fantastic 4: First Steps

Music

The Sky, The Earth & All Between (Highly Recommended)

The Place After This One (Highly Recommended)

Bodies

Even in Arcadia (Highly Recommended)

King of Terrors

(self-titled)

Pruning of the Lower Limbs

private music

Inertia

Futique

Come of Age (Highly Recommended)

TRON: Ares (Original Motion Picture Soundtrack)

Horizons/West (Highly Recommended)

The Universe Smiles Upon You ii

(self-titled)

Video Games

Star Wars Jedi: Survivor

Sniper Elite: Resistance

BioShock Remastered

Epigraph

Yoku’s Island Express

Blue Prince (Highly Recommended)

Portal: Revolution

Thank Goodness You’re Here!

skate.

Death Stranding 2: On the Beach (Highly Recommended)

Wheel World

Tony Hawk’s Pro Skater 3+4

Ghost of Yōtei (Highly Recommended)

Clair Obscur: Expedition 33

Keeping link underline styles around inline code with padding

Adding a custom filename to a code block in Eleventy with markdown-it

Preventing jank on focused overflow-causing elements

Conditional favicon in Eleventy using passthrough copy

From Nunjucks to Vento in Eleventy: a migration guide (kinda)