How this site is made

This is a note for anyone curious about how a site like this is put together, and for anyone considering making one themselves.

There is no framework

Every page here is plain HTML, one stylesheet, and a small amount of JavaScript. No React, no build pipeline with a hundred dependencies, nothing that needs updating every three months to keep working.

That is not a purist position. It is that the site does not need anything more. A collection of small independent pages is exactly the case where plain static files win: each page loads only what it needs, and nothing has to boot up before you see anything.

Pages are generated from a data file

Writing nineteen near-identical pages by hand would guarantee that three of them ended up slightly wrong. So there is one small script that reads a list of experiments and produces the pages from a shared template.

Adding a new experiment means writing the experiment itself and adding a few lines of description. The homepage, the sitemap, the category filters and the related links all update on their own.

Nothing is tracked

There is no analytics, no advertising, and no cookies. Anything you type into an experiment stays in your browser and is never sent anywhere. A few games remember a high score using local storage, which lives on your device and goes away when you clear your browser.

This is unusual enough now to be worth stating plainly rather than burying in a policy.

The sound is made in the browser

The night forest has no audio files. The crickets, owls and wind are generated live using the browser's own audio tools: filtered noise for the wind, short high bursts for the crickets, a soft falling tone for the owl.

It was originally a workaround for not having recordings. It turned out better than a recording would have been, because nothing has to download and the pattern never repeats exactly.

Pictures are heavier than code

The entire stylesheet and all the JavaScript together are a fraction of the size of a single illustration. That is normal, and it is why almost all the effort in making a site fast goes into images and video rather than code.

Every illustration here exists at several sizes, and your browser picks the smallest one that still looks right on your screen. The two videos were originally fifty megabytes and are now around five.

If you want to make one

The advice that would have saved the most time: pick something small enough to finish, get it on the internet before it is good, and improve it there. A half-finished site that exists beats a perfect one that is still on your laptop.