Sobre o herbário

Este site é a demonstração de uma ideia de Jim Nielsen, escrita em Lots of Little HTML Pages: quando você precisa de uma interação, quase sempre é menos trabalho criar duas páginas HTML e ligá-las por um link do que construir a mesma coisa dentro de uma página só, com JavaScript.

O argumento não é nostalgia. É que o navegador já resolve, de graça, tudo o que a versão em script precisa reimplementar: histórico, botão voltar, endereço para compartilhar, abrir em nova aba, foco, estado. E as transições de visualização entre documentos dão a animação que era a última desculpa para manter a interação na mesma página.

Onde isso aparece aqui

O menu não é uma gaveta que desliza: é a página /menu/. A busca não é um campo que filtra uma lista na memória: é o índice, com todos os espécimes e todas as facetas. Cada filtro por etiqueta é uma página. Cada ordenação é uma página. Cada um dos trinta espécimes é uma página.

Nada disso é estado escondido. Tudo tem endereço, entra no histórico, volta com o botão de voltar, sobrevive a um recarregamento e pode ser mandado por mensagem para outra pessoa.

O que faz o site funcionar

Três coisas, nenhuma delas uma biblioteca:

Um gerador de sítio estático — aqui, um build.py de umas trezentas linhas, sem dependências — que escreve as páginas todas de uma vez. Multiplicar páginas só é barato porque é o gerador que paga a conta.

A regra @view-transition { navigation: auto }, que faz o navegador animar a passagem de um documento para outro. Os nomes de transição amarram o nome do espécime na lista ao título da ficha, e é por isso que ele parece voar de um lugar para o outro.

E <a href>. Só isso.

O que este site não tem

Zero byte de JavaScript. Nenhum passo de compilação além do gerador. Nenhum pacote instalado. A página mais pesada tem alguns kilobytes, e a folha de estilo é a mesma para todas — o que significa que, depois da primeira, tudo chega quase instantaneamente.

Vale um aviso honesto: a classificação de raridade dos espécimes é opinião da curadoria, não da especificação. Ao lado dela, porém, há duas colunas que não são opinião — desde quando o elemento é interoperável e em que fração das visitas ele aparece —, coletadas de fontes externas e reunidas em medidas. O resto — categorias, atributos, comportamentos — segue o HTML Living Standard.

Onde ler o resto

Esta página conta o que este site é. A discussão da ideia em si — vantagens, custos, o que fazer quando o layout muda e onde a régua vira em favor do JavaScript — está em Muitas páginas pequenas.