4

Coisas antigas, miúdas e esquecidas, internet old school que funciona, zero Javascript

Passei as últimas semanas construindo museus. Nove, para ser exato — e queria dividir com vocês tanto o acervo quanto a regra do jogo, porque a regra é o que importa: zero byte de JavaScript, e nenhuma funcionalidade perdida por causa disso.

O acervo

Cada coleção pega um conjunto fechado e especificado de coisas antigas (ou miúdas, ou esquecidas) da computação e dá a cada item a sua própria página, com ficha, exemplo executado de verdade, e uma etiqueta de raridade:

  • Herbário do HTML — 30 elementos que quase ninguém planta: <abbr>, <datalist>, <bdi>, <del>
  • Relicário do Shell — 26 símbolos perdidos da linha de comando: !!, $_, set +H
  • Insetário do Bash — 28 operadores miúdos: {a,b}, ${var:-padrão}, <(comando) — cada exemplo executado em bash e zsh reais, com as diferenças anotadas
  • Gabinete do HTTP — os códigos de status que quase ninguém devolve: o 402 reservado há três décadas para um pagamento que nunca chegou, o 410 que é o irmão honesto do 404, o 418 do bule de chá
  • Lapidário do Unicode — travessão, espaço fino, hífen invisível: 27 caracteres que a tipografia lapidou e o teclado escondeu
  • Cripta do Git — 26 comandos que sustentam a catedral: reflog, filter-branch, o encanamento
  • Observatório do <head> — 24 astros invisíveis do documento, do preconnect às speculation rules
  • Campanário dos Sinais — 26 sinais POSIX, do SIGHUP (que é literalmente "desligaram o telefone") ao SIGINFO
  • Câmara de Medidas do CSS — 28 unidades que quase ninguém pesa, do ch ao dppx, com 25 demonstrações vivas em CSS puro

São 243 espécimes, 1.074 páginas HTML (cada coleção tem espelho em inglês; uma tem até temas visuais alternativos), com média de ~6 KB por página.

A regra do jogo

A parte que interessa a quem é dev: todo estado tem endereço.

  • Filtrar por categoria? É um link.
  • Ordenar por raridade? É um link.
  • Trocar de tema visual? É um link — o tema é uma árvore de páginas espelhada, não uma classe CSS trocada por script.
  • Buscar? O termo entra na URL (/busca/?q=teclado), então todo resultado de busca é compartilhável, entra no histórico, e o botão voltar funciona. Sempre.

Nada disso é novidade tecnológica. É o contrário: é como a web funcionava antes de a gente decidir que cada clique precisava de um bundle de 2 MB. A referência explícita é o Lots of Little HTML Pages do Jim Nielsen — sites feitos de muitas páginas pequenas, finitas, nativas e duráveis.

O detalhe de que mais me orgulho: a busca que degrada com honestidade

A busca com ranqueamento (nome, resumo, corpo, atributos) roda no servidor. Mas e se você servir a coleção como pasta estática, sem processo nenhum? O formulário devolve a própria página — o ?q= é ignorado — e a página te diz isso na cara, e aponta o caminho que nunca depende de servidor: o índice tem todos os espécimes num documento só, e o Ctrl+F do navegador procura neles melhor do que qualquer campo improvisado.

Progressive enhancement de verdade não é "funciona sem JS se você se esforçar". É: a versão sem nada já é completa, e o servidor só melhora o ranqueamento.

Por que "coisas antigas"

Porque acervo fechado é o cenário perfeito para esse tipo de site. Os sinais POSIX não vão ganhar um novo membro amanhã. Os elementos do HTML mudam devagar. Um catálogo desses pode ser terminado — e um site terminado, de páginas de 6 KB sem dependências, é um site que ainda abre daqui a vinte anos. Quantos SPAs de 2015 abrem hoje?

Uma nota de honestidade que virou lema das etiquetas: raridade é opinião da curadoria; o que é medido está dito.

Tudo gerado por um build.py por coleção, HTML puro + uma folha de CSS:

Curioso para saber: que outro acervo fechado da computação merecia um museu desses? Códigos de saída? Cabeçalhos de e-mail? As flags do tar que ninguém decora?

Carregando publicação patrocinada...