Introduction
What Workbench is, who it's for, and how the notes are organised.
Workbench is where I write down how I build frontends. It's not a tutorial site. Every page comes from a project I worked on: a rule I follow, a config I set up, or a bug that cost me a few days.
I keep these notes for two readers:
- Me, six months from now. When I start a new project, I copy the setup from here instead of from memory.
- Anyone joining a project with me. This is the short answer to "why is it done this way?"
Where the longer stories live
Some pages here are the checklist version of a blog post. The post tells the story; the note keeps only what I'd reuse. Each one links to its post.
Sections
Conventions
Project structure, naming, imports and commit messages.
Tooling
Biome through Ultracite, and pnpm setup details.
TanStack Query
Patterns from a resort website, a company website with its CMS, and an e-commerce platform.
Migrations
A Vue 2 to Vue 3 rebuild, turned into a checklist.
How to read a page
Use ⌘ K (or Ctrl K) to search every note. The list on the right of each page follows you as you scroll, and the theme switch is at the bottom of the sidebar. Every page can also be copied as Markdown, which is handy for pasting into an AI chat.
Last updated on