Frontend

9 Jun 2026, BST · 8 min read

Improving code blocks in Astro

Syntax highlighting, dual themes, line numbers, frames, and markers with Expressive Code

How I set up astro-expressive-code on this blog — dual themes, line numbers, editor and terminal frames, and fine-grained line and text markers, all from code fence attributes with no custom CSS or JavaScript.

28 May 2026, BST · 12 min read

Adding Mermaid diagram support to an Astro blog

Client-side rendering, a loading skeleton, theme toggle re-rendering, and a fullscreen lightbox

How I added Mermaid diagram support to this blog using a small remark plugin to bypass Expressive Code, a build-time loading skeleton, adaptive light/dark theming, and a fullscreen lightbox with no headless browser build dependency.

26 May 2026, BST · 11 min read

Adding comments to a static Astro blog with Netlify Forms

No database, no third-party widget — just Netlify Forms, three serverless functions, and an email

How I added a moderated comment system to this Astro blog using Netlify Forms as a queue, HMAC-signed approval links via email, and three serverless functions. No database.

5 May 2026, BST · 5 min read

Building a share widget with the Clipboard API

LinkedIn, Reddit, email share URLs, async clipboard write, and accessible feedback

How SharePost.astro works: constructing LinkedIn, Reddit, and email share URLs from the post title and canonical URL, using the async Clipboard API to copy the link, and providing text feedback that degrades gracefully without extra dependencies.

23 Apr 2026, BST · 4 min read

OpenGraph, Twitter Cards, and article metadata in Astro

Canonical URLs, OG images, article:published_time, and why it all lives in BaseLayout

How this blog handles social sharing metadata — OpenGraph tags, Twitter Card markup, canonical URLs, and article-specific fields like published_time and tags — all centralised in a single BaseLayout component with typed props.

22 Apr 2026, BST · 17 min read

Playwright E2E testing AI skills: JavaScript London talk

Using Playwright and the playwright-explore-website skill to test real user journeys

Companion post for my JavaScript London talk at NewDay on 29 April 2026, covering how Playwright and the playwright-explore-website skill support E2E testing, exploratory QA, and browser debugging.

16 Apr 2026, BST · 13 min read

Designing the blog card and post hero

Reading time, cover assets, and the shared contract from card to hero

How the blog listing card and post hero share reading time, cover assets, metadata, and a single visual system from the grid to the full article page.

14 Apr 2026, BST · 6 min read

Building a dark/light theme toggle in Astro

CSS custom properties, localStorage persistence, and no flash of wrong theme

How this blog's theme toggle works — a data-theme attribute on the root element, CSS custom properties for every colour, an icon-triggered dropdown for System/Light/Dark selection, and a synchronous inline script to prevent the flash of wrong theme on load.

1 Apr 2026, BST · 5 min read

Typed content collections in Astro

Zod schemas, build-time validation, and what the draft flag actually does

How this blog uses Astro content collections with a Zod schema to validate every piece of frontmatter at build time — including typed images, optional fields, and the draft flag pattern that keeps work-in-progress posts off the live site.