Skip to content


My website: Changelog

Paper trail of changes in this website, since there is some continuity around 2017. Tasks from my website's backlog, eventually done (or archived).

This page was published on and and last updated on



  • 404 page
  • Operations: decide on Hosting
  • Lighthouse 98/100/100/100 - not bad
  • Firefox security audit
  • Ops: S3 redirects (required to migrate some url schemes)
  • Accessibility: audit and tweaks

UI: improvements

  • UI: Content components
    • <Hero> responsive

Authoring experience improvements

  • fix: prettier not supporting MDX 2 features, changed parser to astro

Refactor: replace @astrojs/images with a local integration

  • handles local and remote images
  • local images always relative to MDX document
  • dev server generates files on demand, via the _images?src= endpoint
  • SSG build collects all files and generates to dist/
  • Figure component
    • captures with, height, and dominant color of image
    • sets padding-top and to preserve aspect ratio
    • sets background-color while image is loading
  • unwrap images from p, was causing invalid HTML <p><figure></p>
  • identify first image for use in og:image

Content: polishing

  • content: original SVG artwork for about pages
  • content: add pictures of my old website
  • content: archeology/nostalgia of old versions of this site
  • DX: author all page links with extension (so that IDE can navigate naturally); strip them via remark plugin

Feature: automatic abstracts

  • Feature: collect abstract from content files
  • DX: <Abstract> component collects abstract content from MDX files
  • Content: move all descriptions to MDX content, wrapped in <Abstract>
  • UI: render abstract markdown, fallback to frontmatter description
  • UI: reposition abstract in some templates
  • UI: hide tag dates in lists
  • SEO: render text only version of abstract when available
  • Refactor: streamline autoImport & customComponents plugins
  • Benchmark: 134 page(s) built in 13.70s (+36 images)

UI: Semantic MD images with zero layout shift

  • Feature: optimised images
  • UI: <Image> component: CLS prevention + semantic figure/caption
    • auto-detects aspect ratio of mdx images
    • plus custom autoImages plugin:
      • allows manually providing aspect ratio for external images
      • accepts an attribution note in the title (after // )
      • the attribution can contain a link
  • UI: setup astro-m2dx
    • rewrite image src to enable co-located images (😍 direct preview in IDE!)
    • map MDX img to our <Image> component
    • provide auto imports for common components/mdx/*
  • Content: migrate images to be co-located with markdown files
  • Content: migrate alts to title, and provide proper alts everywhere
  • Benchmark: 131 page(s) built in 17.70s (+35 images)

UI: Markdown improvements

  • Feature: emojis
  • UI: decorate external links and add rel attribute
  • expose node links (internal and external) in frontmatter
  • Feature: expose node images in frontmatter
  • determine og:image from node images
  • auto imports of @components/mdx

UI: improvements

  • UI: adjust font-weight of body text, it was to thin on small screens.

Port tag/** content

  • Content: port all tags/** content from
  • Benchmark: 128 page(s) built in 10.20s

Content: migration and the Astro experience

  • Post: migrating to astro
  • Post: unified-js rocks
  • Post: goodbye react-static
  • Meta: update decision records
  • Meta: basic new docs

(Astro) Port meta/** content

  • UI: Note component
  • Tools: split dict files; allows opening VSCode directly in src/pages/


(Astro) Port meta/** content

  • Content: port all meta/** content from
  • UI: navigation: meta/** section header - docs, project, decisions

(Astro) Feature: image basics

  • Meta: optimise favicon pack, clean up public folder
  • Content: port all images from
  • Chore: update astro to 1.9.1 ... 2.0.0 is coming very soon!

(Astro) Tools

  • Testing: setup playwright
  • Testing: tested title in / and screenshot in /about
  • Tools: pre-commit hooks with Lefthook
  • Testing: more visual regression tests, will be useful while we iterate (soon)
  • configure Github actions

(Astro) Feature: blog

  • Refactor: extract views from pages/ because easier to navigate

    • keep controllers in pages/**/.astro
    • move those views to template/*.astro
  • Refactor: categorise components by how they are used

    • use @components/ - shortcut in import statements
    • mdx/ - Abstract, Year, Audio, Image
    • node/parts NodeDate, NodeMeta, NodeAbstract, NodeMeta, TagLink
    • node/lists TagList, NodeList, NodeListItem
    • document/ - Document, Head, Body
    • navigation/ - NavLink
    • page/ - Page*, Article*, Section*, Markup
    • site/ - SiteLayout, Site*
  • Cleanup: remove feed (will come back later)

  • UI: new TopLine and Divider components aligned with global layout

  • UI: navigation of blog/** section header - previous, next

  • UI: make NodeDate compact for use in list items vs articles

  • UI: separate Page from Section components

  • Feature: blog home

  • Feature: homepage latest posts

  • Benchmark: 58 page(s) built in 5.90s

(Astro) Port posts/** content

  • Content: port all posts/** content from
  • Fix: switch to sharp to fix build
  • Refactor: rename layouts to templates because more semantic
  • Benchmark: 59 page(s) built in 7.93s

(Astro) Port posts/** content

  • IA: BaseNode <- TagNode, BlogPost, MetaPage
  • UI: content components: <PageTitle> and friends
  • UI: content components: <Node*>
  • UI: content components: <Audio>, <Image>
  • UI: color system, color schemes, both in CSS vars
  • Accessibility: link outline focus and color contrasts across all schemes
  • UI: layout / responsive
  • Benchmark: 23 page(s) built in 5.16s

(Astro) Port about/** content

  • UI: CSS Reset: basic vars
  • UI: layout components: <Document>, <Layout> and friends
  • UI: space system in CSS vars
  • UI: typography system in CSS vars
  • UI: navigation components: <NavLink>, <SiteHeader> and friends
  • UI: content components: Logo
  • UI: navigation for about/** section
  • Content: port all about/** content from
  • Content: bootstrap the section meta/**
  • Benchmark: 23 page(s) built in 3.78s

(Astro) Setup

  • Setup: astro install
  • Benchmark: 8 page(s) built in 2.93s
  • Setup: ESLint setup
  • IA: basic blog/**, about/**, tags/**
  • Benchmark: 13 page(s) built in 3.01s


Feature: experiment's banner

  • clicking banner goes to homepage
  • detect if framed, de-frame

Feature: experiments

  • model, template, source, routes
  • iframe
  • include experiments in feed


  • fix media create/update dates and media list sorted by
  • fix image card with link, image detail double title

Tools: migrate tslint to eslint



  • redirect www... to (Route53 > CF > S3 redirect)
  • google search sitemap submit / domain verification

Feedback and hot-fixes

  • fix! a couple of 404 in feed/
  • fix nested <a> in tags/ page, improve tag list style
  • fix blog post abstract style missing
  • fix markdown is rendering an extra div (definitely messing with first/last-child margin resets)
  • fix missing drop-caps style
  • fix media list item in feed not rendering image
  • mute recently updated
  • fix empty tag list rendering empty <ul> is annoying for screen reading
  • fix no-select missing in some navigation and meta
  • fix meta list item is not picking up the right component
  • exclude home/, media/, feed/, and tags/ from feed, as they pick up tags from the listed items
  • fix empty/repeated meta tags: refactor node meta tag objects to dicts, convert to array just before rendering
  • fix tag page, tag count truncated
  • fix layout, section v spacing
  • fix feed path filter was duh
  • enhance link to top with javascript scroll to top, prevents bottom & top of page from both being entries in browser history
  • style suspense fallback loading component
  • fix staging, link to prod was broken
  • fix media pages not showing sources
  • ResponsiveImg handle image loaded transition
  • ResponsiveImg load on scroll into view
  • replace utf chars with svg (external link and link to top)
  • refactor details and cards; introducing node type mixins
  • refactor schemes
  • /meta validateDOMNesting(...): <p> cannot appear as a descendant of <p>.

React Static: Deploy

  • add banner to staging
  • add banner to drafts
  • deploy to prod
  • setup staging buckets, cloudfront, cname
  • s3 sync in dev time
  • add a !-- notes -- section to articles (stripped out in prod)
  • production build: strip notes & filter drafts
  • recreate separate buckets and distributions for staging/prod
  • render different custom metas depending on stage (e.g. robots)
  • add custom robots.txt to dist/ folder depending on build stage
  • local deploy scripts
  • bounce
  • create R53 > CF > S3 > redirection to
  • enable gzip in Cloudfront?


  • extract, manipulate, responsive print images and upload
  • collect assets and generate asset nodes
    • refactor: move links to node.meta
    • refactor: DRY node/route creation
    • refactor: move link functions from lib/node.ts to lib/link.ts
  • create media nodes and routes
  • define asset preset/profiles
  • locate and copy during dev build
  • collect assets from hero too
  • og image
    • complete meta headers
    • replace ReactStatic.Head with custom <Head page={node} title={...} meta={[...]}>
    • meta description defaults;
  • generate resolutions during dev build
    • managing images, image sharp, other
    • refactor markdown, kill variants
  • responsive print
  • serve locally via npm server using concurrently

Improve tooling

  • update dependencies
  • configure lintstyle, eslint, tslint

Information architecture

  • models, views

    • page style

    • meta style

    • tag style

    • hero component

    • fix sronly not being rendered

    • fix headings

    • differentiate external links

    • contents/meta abstracts (include in page body)

    • contents/page abstracts (include in hero if hero is on)

    • models: tags

    • page tags

    • page tag

    • format dates are missing month names

    • format checkboxes in markdown

  • link nodes: children/parent

    • show children component in meta/
    • link to parent in meta/
  • link nodes: next/previous

    • show next/previous in posts/
    • show related nodes
  • cleanup templates, add feed route, improve route paths

    • rename meta/ to meta
    • improve header style
    • simplify link component, allow passing dom attributes link tabIndex
    • show recent nodes under feed/ and home page
    • refactor routes containers and templates
      • move containers next to templates, using a simple wrapper fn
      • declare route interfaces in template units as well
    • show tags in posts


  • CSS custom properties
  • css global variables mixins
  • move away from css modules
  • site footer
  • blog navigation
  • fix page container
  • configure browserslist
  • drop support for IE 11 and opera mobile
  • cleanup css

Basic rendering

  • read-more element
  • breakdown blog components; introduce @mixin base-page
  • refactor model: everything is a node (page, doc, post, ...)
  • show post dates
  • extract post meta, tag list, rename article > node

Accessible routing

  • set focus on page load, route change and anchor navigation
  • scroll to anchor on page load and on route change
  • scroll to top on page route change
  • switch from @reach/router to react-router

React Static custom routes and pages

  • markdown factory, and specialised markdown elements
  • no default exports, except for containers and App
  • integrate docs into content
  • re-organise docs
  • split records into individual files
  • spike: storybook + typescript + SCSS
  • cleanup: react static config, watcher, routes, extraneous 404 page
  • typed SCSS modules (IDE support + compile time)
  • css ie11 support via postcss and prefixer
  • SCSS lint
  • fix: strip links from abstracts not working
  • custom headings with anchor
  • normalise code style
  • abstract: extract text from a specific markdown block
  • typed route data
  • head, seo, helmet
  • frontmatter: custom title
  • custom template
  • custom slug
  • internal links should default to top anchor
  • layout container
  • watch content directories and re-render on change
  • external vs local links in markdown renderer
  • markdown POC blog posts props

Spike: React Static (+ typescript + sass)

  • bootstrap
  • full static build
  • 404
  • typed SCCS modules (IDE support + compile time)
  • IE11

Spike: Gatsby (+ typescript + sass + markdown)

  • bootstrap
  • full static build
  • move content to ./content
  • typed SCSS modules (IDE support + compile time)
  • 404
  • IE11
  • env vars
  • markdown pages
  • markdown blog posts

Go back to top of the page