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 meta-page was published on and and last updated on


Feature: better tag pages

  • Feature: show top tags in homepage
  • Feature: separate tag children by type: tags, pages, posts, meta

Feature: Thumbnails and pagination

  • Feature: homepage and blog posts lists now have thumbnails
  • Feature: homepage "more posts" section (2 columns)
  • Feature: blog archive with pagination

UI: better visual hierarchy

  • UI: use TagLink in tag lists, new prop size helps with this
  • UI: new component NodeCard replaces NodeListItem
  • UI: new component PageNav
  • UI: more flexible Divider
  • Fix: remote images are not being generated in SSG time

Feature: RSS

  • Feature: RSS feed (atom)
  • Feature: RSS with images
  • Fix: footer layout
  • Meta: decisions / rss

Feature: Print

  • print stylesheet with spaces and colors
  • hide navigation elements
  • render URLs next to links
  • show Watermark component with url and date
  • new layout Document


  • Post: Correfoc
  • Post: Anxiety
  • Post: Design System master class
  • Post: Benefits of design systems
  • Post: What is a design system?
  • Post: Design Systems master class
  • Post: Multidimensional (omni-channel) design systems
  • Post: Design Systems are Design Culture
  • Post: Playing with an AI image generator
  • Post: MACBA
  • Post: AO 2023
  • Content: cleanup useless tags
  • Fix: image aspect-ratio simplified
  • Cleanup: youtube embed was warning about unknown feature
  • AX: pages with draft: true omitted from listings


  • 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
  • Benchmark: 146 page(s) built in 25.49 (+68 images)

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