Coisas que só desenvolvedores web dos anos 90 lembram (2014)

• A web pessoal dos anos 1990 era uma época em que, por falta de ferramentas padronizadas de layout, técnicas como , , 1x1.gif,   e DHTML eram usadas à força para criar posicionamento e efeitos
• Antes de o layout com CSS se consolidar, 1x1.gif e sequências repetidas de   eram usados quase como ferramentas essenciais de layout para empurrar a posição dos elementos, e o texto satiriza isso com uma nostalgia exagerada
• O CSS inicial se concentrava em pequenos efeitos visuais, como remover o sublinhado de links e alterar o estilo de a:hover; como resultado, a distinção entre links e texto comum ficou menos clara
• DHTML se conectava a uma cultura de copiar e colar que misturava CSS e JavaScript para criar efeitos como alert() no carregamento, flocos de neve, menus acordeão e `` customizado
• Fontes pixeladas, botões 88x31, Internet Explorer 4.0, GeoCities e FrontPage ’98 aparecem como formas pelas quais sites pessoais da época exibiam escolhas técnicas e identidade

---

Quando e eram animação

• A combinação de colocar dentro de era tratada em tom de brincadeira como uma grande animação computadorizada na web dos anos 1990
• Há por trás disso um orgulho exagerado, como se desenvolvedores web dos anos 1990 tivessem histórias mais importantes para contar do que jQuery ou bancos de dados não relacionais atuais

Layouts que empurravam a página com 1x1.gif

• 1x1.gif, spacer.gif e transparent.gif se referem todos a um GIF transparente de 1 pixel × 1 pixel
• Ao definir valores grandes nos atributos WIDTH e HEIGHT de uma imagem HTML, era possível criar espaço invisível e empurrar elementos da página para a posição desejada
• O código de exemplo usa , , , , `` e um contador web em CGI para tratar estrutura e decoração ao mesmo tempo
• A sátira continua dizendo que 1x1.gif permitia posicionar elementos em qualquer lugar da página e que, até hoje, ainda seria a única forma de centralizar verticalmente

Espaçamento manual com  

• Se fosse difícil usar tags de imagem, também havia o método de repetir   para ajustar o espaçamento
• Um exemplo coloca várias ocorrências de   entre PLEASE SIGN e MY GUESTBOOK BELOW: para posicionar o texto do livro de visitas
• A piada continua dizendo que, se alguém tivesse recebido um níquel por cada vez que usou   nos anos 1990, teria dinheiro suficiente para pagar as tarifas mensais excedentes da AOL

O CSS inicial começou removendo sublinhados de links

• O CSS é apresentado como uma tecnologia que surgiu no fim da era dourada do HTML, prometendo separar conteúdo e estilo
• A primeira coisa que se fazia com CSS na época era remover o sublinhado dos links
• Com links parecendo texto e textos parecendo links, ficou difícil saber onde clicar
• Também é citado o efeito de deixar um rastro de chamas atrás do cursor do mouse
• Um exemplo de arquivo index.shtml de 2000 contém apenas CSS inline com a:hover {text-decoration: none; color: #000000}
  • É um código que remove o sublinhado ao passar o mouse e muda a cor para preto
  • O fato de ser um arquivo index.shtml usando SSI também é destacado como piada

DHTML e a cultura de copiar código

• Depois de remover o sublinhado dos links com CSS, vinha o fluxo de usar JavaScript para exibir alert("Welcome to my website!") ao carregar a página
• A combinação de CSS e JavaScript é satirizada como a “tecnologia do terror” chamada DHTML
• Entre os efeitos DHTML estavam flocos de neve caindo pela página, image maps animados de menus acordeão e customizado usando
• Graças a sites como Dynamic Drive, parecia que, em vez de resolver o problema por conta própria, bastava copiar e colar um bloco de 50 linhas de código
• DHTML é comparado ao Twitter Bootstrap da época

Fontes pixeladas e a estética da baixa resolução

• As telas de computador da época eram CRTs, então eram fisicamente grandes, mas não tinham alta resolução
• Havia uma tendência de usar fontes pequenas, na faixa de 6 pontos, para aproveitar com eficiência os pixels limitados
• Ao ver fontes simples baseadas em pixels, desenvolvedores web tentavam virar ilustradores, e alguns também tentavam colocar ilustrações isométricas em pixel art em telas de splash
• A piada acrescenta que talvez tivesse sido melhor gastar esse tempo e dinheiro investindo em IPOs pontocom do que instalando o Photoshop

Internet Explorer 4.0 e botões 88x31

• O texto satiriza dizendo que o motivo de as pessoas odiarem o Internet Explorer hoje é que ele se afastou da “forma pura” do Internet Explorer 4.0
• O Internet Explorer 4.0 é exagerado como um navegador perfeito, com Active Desktop e Channels
• Na época, sites frequentemente exibiam botões de 88x31 pixels para informar qual navegador o visitante deveria usar e quais ferramentas e serviços o site usava
• Os botões são comparados a medalhas em um uniforme militar, mostrando as escolhas e afiliações do operador do site
  • O exemplo de editor é o FrontPage ’98
  • O exemplo de servidor web é o GeoCities
  • A piada diz que o web ring queria aquele que colocasse o site no topo, mas na prática ele não existia

Piadas sobre a web atual

• A web atual é descrita como um estado em que várias camadas de abstração foram empilhadas sobre JavaScript
• O texto termina com uma piada sobre o JavaScript nem conseguir fazer contas direito e com surpresa por termos chegado à web de hoje
• A sugestão final é pregar uma peça na equipe colocando muitos   no próximo pull request

[GN⁺]

Opiniões no Hacker News

• A parte sobre image maps do lado do servidor bateu muito perto de casa
  Sou mais um administrador de sistemas que às vezes cria ferramentas baseadas na web do que um programador web, então minhas habilidades na web ficaram paradas no começo dos anos 2000, e tenho uma certa aversão estranha a JavaScript. Numa ferramenta recente, precisei de um comportamento básico para lidar com pontos sobre uma imagem; algo que daria para fazer com 5 linhas de JavaScript, mas que em 2023 acabei resolvendo com um image map do lado do servidor
  No fim, em vez de 5 linhas de JavaScript, ganhei 50 linhas de Python para gerenciar estado e um caso especial no handler de requisições para lidar com uma sintaxe esquisita de fragmento. É meio constrangedor, mas também dá um orgulho estranho ter feito funcionar

  • O pior dos image maps do lado do servidor é que eles quebram completamente o arquivamento
    Se você encontra um site antigo no Wayback Machine do archive.org e a home inteira é um image map do lado do servidor, sem o servidor original não há como descobrir as URLs de destino do restante do site, então vira um beco sem saída completo
  • Em 2015, cheguei a corrigir o suporte do Chromium a image maps do lado do servidor
    Na época, estava praticamente quebrado: se o zoom não fosse 100% ou se o padding não fosse 0, as coordenadas saíam erradas, e havia vários problemas parecidos. Ninguém percebeu porque image maps em si quase não eram usados, e image maps do lado do servidor menos ainda
    Eu também queria uma saída fácil sem JavaScript e lembrei do HTML dos anos 90, mas, depois de corrigir o bug no Chromium, concluí que image maps do lado do servidor não eram lá grande coisa, usei JavaScript, e a versão em JavaScript ficou melhor
  • Entendo totalmente a sensação de “mesmo que sejam só 5 linhas de JavaScript nessa coisa infernal toda, não vou colocar isso no meu programa”
    HTMX parece mesmo uma salvação, e, se você comprar o Tailwind UI, qualquer pessoa consegue se tornar alguém bem perigoso no front-end. Ainda assim, fico curioso sobre outras perspectivas de por que JavaScript dá essa sensação ruim. Para mim, pessoalmente, a falta de consistência da sintaxe pesa bastante, e, no caso do TypeScript, só de olhar a pasta node_modules já me dá enjoo
    No geral, passei muito tempo afastado do front-end por causa da sensação de não ter controle sobre o que estava acontecendo
  • No fim de 2019, precisei manipular de casa a GUI de um dispositivo que ficava na empresa; não havia desktop remoto, só uma ferramenta de captura de tela e uma ferramenta de linha de comando para injetar cliques
    Com algumas dezenas de linhas de Lisp, criei um servidor web que fornecia um image map da tela e, quando chegava uma requisição de image map, inseria um clique. Era uma pequena ferramenta descartável para evitar o deslocamento de ida e volta até o trabalho, mas depois veio a COVID, muita gente passou a usá-la, e talvez alguém ainda esteja usando até hoje

• “Ainda é a única forma de centralizar verticalmente um elemento” já não é mais verdade, mas o custo de produtividade de não poder simplesmente usar vertical-align: middle; dentro de uma div nos últimos 30 anos deve ter sido de dezenas de bilhões de dólares
  Também lembro da moda, lá pelos tempos do IE4 ou IE6, de colocar estilo overline em :hover de links. Também fazíamos divs e botões com cantos arredondados usando tabelas, e, mesmo nos anos 2000, continuava o sofrimento de recortar no Photoshop e colocar em células de tabela

  • Mesmo naquela época, dentro de células de tabela existia VALIGN=MIDDLE
    Não sei se já era possível nos anos 90, mas nos anos 2000 com certeza existia
  • Hoje em dia, peço para o ChatGPT escrever esse tipo de CSS, e, de forma engraçada, ele parece apresentar pelo menos uma dúzia de soluções
    Só que, muitas vezes, também mistura regras redundantes, colocando 5 ou mais quando 2 ou 3 seriam suficientes. É ridiculamente burro
  • A época de fazer cantos arredondados com tabelas foi mesmo uma febre
    Nem sei quantas horas foram gastas por causa daqueles malditos cantos
  • Alinhamento vertical ainda é um grande problema até hoje e exige muita compreensão sutil
    Mesmo no Tailwind CSS, não é simples: você precisa ficar considerando se o elemento é bloco, se é texto, qual é o layout do pai e assim por diante
  • Um dos meus hacks favoritos de CSS é div { display: table-cell; vertical-align: middle; }
    Não funciona em todas as situações, mas, embora pareça sujo no começo, a separação de responsabilidades continua preservada e não vejo nenhuma outra desvantagem específica

• Nesse contexto, DHTML era Dynamic HTML, não Distributed HTML, e por isso também era o “Dynamic” de Dynamic Drive

  • “DHTML obviamente significa distributed HTML” era uma piada, mas parece que foi citada errado
    Vendo outras pessoas citarem do mesmo jeito errado, também parece possível que o autor tenha feito uma edição recente em tom de brincadeira
  • Ainda assim, a descrição “Technology of Terror” continua válida sem contestação
  • Pensei que talvez fosse uma alusão à parte mais abaixo sobre “bastava copiar e colar”, e talvez também pudesse ser uma brincadeira com DCOM
  • Isso foi discutido na thread abaixo: https://news.ycombinator.com/item?id=39127528
    A conclusão foi que era uma piada, mas não uma piada boa
  • Parece que aqui realmente encontraram a turma contra a diversão

• Frames também não podem ficar de fora. Eram a “solução” original para o problema de ter que modificar a barra de navegação em todas as páginas.
  O problema era que mecanismos de busca podiam indexar cada página de frame separadamente, então era preciso lidar com o que acontecia quando alguém entrava diretamente em uma página de frame. As linhas de corte entre as seções também eram sempre bem visíveis, deixando tudo estranho e desconfortável.

  • Os verdadeiros experts usavam Server Side Includes.
    Você colocava um comentário especial dentro do HTML, e o Apache o substituía pelo conteúdo de outro arquivo antes de enviar ao cliente.
  • Quando outro site colocava minha página dentro de um frame, eu distribuía um script frame-buster; quando uma página ficava órfã sem o meu frame, eu invocava um script frame-joiner.
  • Frames ainda hoje são surpreendentemente bem usados como tecnologia-base de microfrontends.
    A teoria está em https://martinfowler.com/articles/micro-frontends.html#Run-t..., e uma implementação pode ser vista em https://luigi-project.io.
  • Uma proporção ridiculamente grande dos usos de JavaScript no estilo “AJAX” poderia ter sido resolvida com frames, e se os frames não tivessem ficado estagnados e tivessem evoluído só um pouco, é possível que o desempenho fosse até melhor.
    Se, além disso, tabelas HTML tivessem recursos básicos, e tabelas orientadas a fontes de dados e views em lista tivessem sido oferecidas em meados dos anos 2000, uma quantidade enorme de tempo e dinheiro teria sido economizada.
    E nem dá para começar a falar de quanto dinheiro teria sido poupado se a web tivesse adotado um padrão de pagamentos e o próprio navegador lidasse com a entrada de dados de pagamento.
  • As bordas entre seções também não eram exatamente iguais em todos os navegadores.
    Pessoal, houve uma época em que nem todo mundo usava o mesmo navegador.

• Em 1996, a homepage da Microsoft tinha uma barra de menu que se expandia ao passar o mouse por cima, e eu decidi descobrir como aquilo funcionava.
  Na época, o IE tinha um botão “View Source”, mas, por falta de senso de plataforma, ele abria em um documento do Notepad; como o servidor era Unix e as quebras de linha eram \n, enquanto o Windows esperava \r, o código-fonte HTML aparecia como um documento enorme de uma linha só.
  Examinei o código de ponta a ponta, mas as tags HTML eram todas conhecidas e o conteúdo era apenas o texto visível na página. A única coisa desconhecida eram entidades HTML e, como elas apareciam em todos os sites com menus animados, eu tinha certeza de que estavam relacionadas.
  Durante 6 meses, acreditei que efeitos DHTML eram implementados com fórmulas mágicas daquilo que depois descobri serem entidades HTML; mais tarde encontrei tutoriais do WebMonkey, e isso acabou levando à minha carreira inteira.

  • View Source foi meu ponto de partida.
    Minificadores e compiladores são ótimos, mas sinto muita falta da época em que se lia o código-fonte organizado e bem cuidado de sites bem projetados.
    Acho que teria sido melhor se tivéssemos seguido por um tipo de compressão que preservasse o formato original do código até em produção e mantivesse a expectativa de que outras pessoas no mundo todo leriam nosso código. Essa cultura teve um papel enorme no avanço rápido da web inicial, e certamente foi uma grande parte da minha entrada na área.
  • Fico curioso para saber o que de fato criava os menus animados naquela época. Como não sou da geração que programava então, imagino que fosse alguma tag ou script.
  • Tive uma experiência parecida quando quis trocar uma imagem ao passar o mouse por cima.
    Comprei o JavaScript Bible na Barnes & Noble, li durante o fim de semana e continuei aprendendo desde então.
  • WebMonkey, nossa, as lembranças voltaram com tudo.

• Não dá para esquecer que tabelas também eram usadas para cantos arredondados.
  Criávamos uma tabela 3×3 e colocávamos imagens nas células, exceto na célula central, para fazer elementos de site com cantos arredondados; aquilo parecia o auge da expressividade humana.
  E-mail em HTML também estava em alta, e clientes de e-mail eram atualizados muito mais lentamente que navegadores; por isso, se você queria que aparecesse corretamente, essa técnica continuou sendo usada até os anos 2010.

  • Nunca vou esquecer de criar conjuntos de imagens como tl.gif, tr.gif e bl.gif para tabelas 3×3.
    Como os navegadores da época não renderizavam a imagem de fundo de células vazias, também era necessário o 1x1.gif mencionado no texto para fazer aparecer o fundo das células laterais. Bons tempos.
  • Assim que ganhamos border-radius, a moda de design mudou e ninguém mais queria cantos arredondados.
  • Vários itens do texto parecem mais do começo dos anos 2000 do que dos anos 90.
    Antes de fazer cantos arredondados com tabelas, lembro de mexer no Trillian, um app de múltiplos chats, como se estivesse personalizando uma skin. Ele lidava com Yahoo Chat, ICQ etc., e, como no caso dos cantos arredondados, colocávamos imagens repetidas nas células de cima e das laterais para que o redimensionamento da janela funcionasse bem.
  • https://www.folklore.org/Round_Rects_Are_Everywhere.html
    A maior realização do grande e todo-poderoso Oz. Bem, talvez o iPhone tenha sido maior.
  • Tabelas também eram usadas para sombras.

• Em sites dos anos 90/00, não podia faltar o botão “otimizado para resolução 800×600”.
  Se quisesse dar um toque mais sofisticado, também colocava “Valid HTML 4.01”.
  Naquela época, os anúncios não eram os pacotes complexos de JavaScript e anúncios em vídeo de hoje, mas banners simples em tamanhos padronizados. Lembro de ficar chocado ao ver o Norton Internet Security 2003 reescrever silenciosamente o HTML das páginas visitadas, removendo apenas banners em tamanhos padrão de anúncio e deixando o resto intacto. Também é uma confirmação de 20 anos atrás de que bloqueador de anúncios é uma solução de segurança.

• O texto inteiro não menciona webmaster uma única vez; fico até em dúvida se o Zach realmente esteve nos anos 90.

  • Ainda tenho um cartão de visitas de “Webmaster” que fiz no fim dos anos 90.
    Ninguém entenderia o quanto aquele cargo era “legal” na época. Hoje até eu acho meio constrangedor, mas tenho muitas lembranças boas.
  • Já trabalhei com uma mulher que se chamava oficialmente de “webmistress”.
    Não era brincadeira.

• Se você quiser vivenciar a web dos anos 90 diretamente, recomendo The Geocities Gallery https://geocities.restorativland.org/
  Há algo bonito nessas páginas pessoais. Cada página tem uma aparência bem distinta e, só por isso, já mostra muito da personalidade de quem a criou
  Em geral, elas tinham uma apresentação pessoal, algumas fotos pessoais aleatórias, uma lista de links recomendados com descrições curtas e textos soltos sobre hobbies; eram muito pessoais e tranquilas. Isso contrasta claramente com as redes sociais de hoje, em que todas as páginas de perfil parecem igualmente sem graça e monótonas, e há a pressão de manter um fluxo infinito de conteúdo e uma determinada imagem de vida

  • Acabei caindo em uma toca de coelho por causa disso
    Passei um bom tempo procurando meu antigo site, que não lembro em qual diretório ficava dentro de Area51 e talvez nem tenha sido arquivado, além de simplesmente reviver aquela época
    A memória é estranha. Ao ver o Geocities, até me veio à mente o cheiro da internet antiga, que provavelmente era o cheiro da sala da família onde ficava o computador
  • Lembro que, em meados dos anos 90, eu combinava o fundo de tijolos do Windows com grafites em GIF transparente para criar um efeito bem legal
    Os primeiros trabalhos de grupos de arte de BBS como ACID, ICE e FIRE também eram realmente incríveis na época
    Antes do domínio do IE5/6, o que era mais sofisticado em geral acabou indo para o Flash. No início dos anos 2000, criaram um framework parecido com React baseado em E4X; ActionScript/Flash/Flex e Mozilla/Netscape davam suporte a isso, e também era parecido com a notação de literais XML do VB.Net
    Microsoft e Google não adotaram, e no fim JSON virou rei

• Nos anos 90, a resposta para perguntas sobre layout web era quase sempre tabelas
  O alinhamento do texto ficou torto? Tabela. Precisa de um menu bonito? Tabela. Está criando um site inteiro? Tabelas aninhadas. Para que precisar de CSS se dava para hackear o design com linhas e células?

  • Em 2024, isso ainda é verdade em layouts de e-mail
  • E não podemos esquecer que era preciso colocar uma tag font em cada célula
  • Naquela época, era tudo TDD. TD-Driven Design
  • Ainda gosto de tabelas
    Elas são realmente ótimas para design dinâmico e dão suporte a mesclagem de colunas/linhas, alinhamento e pesos. CSS ainda é muito mais complexo do que as antigas tabelas
  • Agora temos uma forma mais semanticamente correta de fazer isso