About the herbarium

This site is a demonstration of an idea by Jim Nielsen, written up in Lots of Little HTML Pages: when you need an interaction, it is nearly always less work to create two HTML pages and link them than to build the same thing inside a single page, with JavaScript.

The argument is not nostalgia. It is that the browser already solves, for free, everything the scripted version has to reimplement: history, the back button, an address to share, open-in-new-tab, focus, state. And cross-document view transitions supply the animation that was the last excuse for keeping the interaction on one page.

Where it shows up here

The menu is not a drawer that slides in: it is the page /menu/. Search is not a field filtering a list in memory: it is the index, with every specimen and every facet. Each filter by label is a page. Each sort order is a page. Each of the thirty specimens is a page.

None of it is hidden state. Everything has an address, enters history, comes back with the back button, survives a reload and can be sent to somebody else.

What makes the site work

Three things, none of them a library:

A static site generator — here, a build.py of some three hundred lines, with no dependencies — that writes all the pages in one go. Multiplying pages is only cheap because the generator pays the bill.

The rule @view-transition { navigation: auto }, which makes the browser animate the passage from one document to another. The transition names tie the specimen's name in the list to the title on its record, and that is why it appears to fly from one place to the other.

And <a href>. That is all.

What this site does not have

Zero bytes of JavaScript. No build step beyond the generator. No package installed. The heaviest page is a few kilobytes, and the stylesheet is the same for all of them — which means that, after the first one, everything arrives almost instantly.

A word of honesty: the rarity classification of the specimens is the curators' opinion, not the specification's. Next to it, though, sit two columns that are not opinion — since when the element has been interoperable, and in what fraction of visits it appears — gathered from outside sources and brought together in measurements. The rest — categories, attributes, behaviours — follows the HTML Living Standard.

Where to read the rest

This page says what this site is. The discussion of the idea itself — benefits, costs, what to do when the layout changes and where the ruler turns in favour of JavaScript — is in Lots of little pages.