Write-ups on the things I build
The story behind each project: why it changed, what went wrong, and the small details the project pages leave out.
Notes
- PortfolioThe third version of my portfolio: one paragraph about me and a reel of things I built. No animation library, so the reel, the grid and the loading are all small bits of maths I can point at.
- InspectWrite-ups on the things I build, with notes that point the way a browser's inspector does. When it took over my project pages it split into write-ups and notes, and most of the work since has gone into moving between them without a flash.
- RedlineA blog turned into a register of changes across my projects. The parts you don't see are the ones that make it quick to keep up: a draft written from the commits, pages that update the moment I publish, and a database that suits a site written to now and then.
- TenziesA dice game I first built while learning React, rebuilt as a dice tray. The rules are the same. The dice are real, every hold is a commitment, and the game tells you where you stand before you roll.
- StampbookA travel journal made to look like a passport. Underneath the paper there's one map that never reloads, stamps that are worked out from a hash, a machine readable line that adds up your trips, and photos that fit in a browser.
- FandeckA palette tool that started as a colour input, a dropdown and a button. Now the palette follows you as you pick, survives the API being wrong or away, and lives in the link.
- ChitA shared shopping list printed like a till receipt, in plain JavaScript on a free Firebase database. The work underneath: a link nobody can list, a parser for however people type a shopping line, and writes that show before the network answers.
- MovieVaultA streaming guide built around a shelf of DVD cases. Underneath it is a spring written by hand, a set of rules for seasons hundreds of episodes long, and a lot of care about what TMDB is doing right now.
- PasteupA meme maker laid out like a cutting mat. The interesting part is underneath: one layout that the screen, the saved file and the drag handles all agree on, and captions that wrap and shrink until they fit.
- QuizzMe!Trivia dealt as a deck of cards, built around an API that answers one question request every five seconds. Most of the work is in waiting well: a queue that survives a reload, a plan for every response code, and a busy state that never flashes.
- From Trakt to SimklThe last watched widget on my portfolio started on Trakt, with a database just to keep its tokens. Then the Trakt app was deleted, and moving to Simkl took the database away with it. What's left is mostly working out which thing I watched last.
- Building InspectMy write-ups got a quieter frame. One column, figures on stages, and notes that point at things the way a browser's inspector does. Here is how the boxes keep up with a video, and how going back lands you where you left.
- Drawing the revision cloudRedline circles its newest change in a red scalloped cloud, the way changes are marked on an engineering drawing. The whole cloud is one 36 pixel SVG and a border. Here is how it tiles, how it used to draw itself in, and why it now just fades.
- Dice that sit on the feltTenzies went from flat squares to CSS cubes to real 3D dice in three.js. The hard part was not the 3D. It was making ten red dice look like they are lying on the same green table.
- Drawing India rightStampbook's map came from a free tile service, and it drew India the way most world maps do. Fixing that meant throwing out every border in the tiles and drawing my own from Natural Earth.
- A picker that is always fullFandeck swapped the browser's colour input for its own OKLCH picker. The honest way to draw OKLCH is a lopsided shape with a hole in it, and I did not want that. So every row of the square is stretched to its own edge.
- Four plates and a rock poolRiso Tide is a lab on my portfolio, a rock pool going through one tide, printed in four risograph inks. It is not a filter over a picture. It is four pictures, screened and pulled one at a time, twelve times a second.
- Three rules for a rolling numberThe odometer roll in my portfolio labs looks like one animation. It is really three small rules, and each one fixes a bug you only see once you look for it. Switch them off below and watch it break.
- Opening the caseMovieVault shows every film as a DVD case. Tapping one opens it in mid-air and flies it to the title page, and back does the whole thing in reverse. Here is how, and what went wrong on the way.
- Last played, not nothingThe Spotify widget on my portfolio shows what I'm listening to. Most of its code is about the times I'm not: keeping the secrets off the page, asking Spotify as little as it can, and having something to show when nothing is playing.
