Static site generation
Routes, data, and JSX in. Plain HTML out.
Every component on this page ran once, during the build. The browser receives one HTML file with its styles inside it — no runtime to download, nothing to hydrate, nothing to wait for.
By the numbers
What a page actually costs
The claims this site makes about itself, stated as figures rather than adjectives.
- JavaScript shipped to the browser
- 0 kB
- Request to first paint, stylesheet included
- 1
- Build-time SEO and accessibility checks
- 16
- Contrast, in both colour schemes
- AAA
How it works
Four moving parts, and no fifth one
Routes decide what pages exist, data supplies what they say, components decide how they look, and the build turns all of it into files.
1. Routes
A file in src/pages becomes a URL. index.tsx drops from the path, and a [param] segment exports the values to build one page for each.
2. Data
Ordinary TypeScript objects and arrays, kept next to the route that reads them. No Markdown parser, no front matter, no content API to call.
3. Components
Typed functions returning JSX, which own every design decision the site makes. Preact renders them to strings and never reaches the browser.
4. Output
Plain HTML with its stylesheet inside it, plus a sitemap, a feed, a manifest and robots.txt, all written before public/ is copied over the top.
Services
Work that ends in files on a server
Four engagements, each one finishing with plain HTML and nothing running in the browser.
Web development
Site builds
A complete site, compiled once into plain HTML. Routes, components and content in TypeScript, deployed to an edge that only has to serve files.
Performance engineering
Performance audits
A measured account of what your pages actually send and how long it takes to paint, followed by the specific changes that would move the numbers.
Accessibility consulting
Accessibility reviews
A review against WCAG, done in the markup rather than in a dashboard, with automated checks added to your build so the findings stay fixed.
Web development
Migrations
Moving a site off a framework it has outgrown, keeping every URL, redirect and search ranking intact through the change.
Products
Three objects in an array
Every page under /products was generated by walking the same list of plain TypeScript objects.
$89
Anvil
Heavy, honest, and entirely free of JavaScript. Forged for work that expects to outlast several framework generations.
$42
Bellows
Moves air. Nothing else, and nothing to configure. The whole interface is a handle you already know how to use.
$27
Tongs
For holding things that are far too hot to hold. Long handles, firm grip, no moving parts to service or replace.
Blog
Written while building this
Posts on the decisions behind the site, newest first. All of them are in the feed.
One graph per page
Structured data is one @graph a page, not a pile of objects — and every id that graph references has to be defined on the same page a consumer is reading.
Dark mode without a toggle
A toggle needs JavaScript this site does not ship, so dark mode is one file of paired colour tokens plus the one line of CSS no utility class expresses.
A link should look like one
Underlining links only on hover leaves keyboard and touch users with nothing to go on, and this site had been doing exactly that in its body copy.
Content
Long-form copy is just JSX
There is no Markdown parser and no CMS behind this paragraph.
Text like this is written directly as components and type-checked with everything else, so a renamed field is a build error rather than a blank space on a page.
The 4 services, 3 products and 5 posts on this site are three arrays. Every page you can reach from here was generated by walking one of them.
Have a site that ships too much?
Tell us the URL, what you want to be different about it, and roughly when.