Hello world, again

Estou voltando para o blog e começo contando como construí a nova versão, 97% mais leve, mais rápida e simples de manter.


Hoje lancei uma versão nova do blog: migrei o mesmo conteúdo e o estilo segue parecido. Porém... mais de 90% mais leve! =)

Especificamente: 1.50mb → 37kb

Desde que fiz a primeiríssima versão desse blog, oito anos atrás, muita coisa mudou -- eu tinha objetivos muito diferentes dos que tenho hoje, necessidades muito distantes das que tenho hoje e uma percepção muito diferente da web.

Na época eu estava buscando meu primeiro emprego e tentando consolidar meus freelas. Então investi em um site que pudesse demonstrar todas as minhas habilidades de "fazer o que você precisar que envolva tecnologia". Fosse uma edição de redes sociais, fosse desenvolvimento, fosse infraestrutura.

Na época, declínio do JQuery, as SPAs estavam fazendo sucesso, bem como os sites estáticos no GitHub Pages. Experimentei de tudo.

Hoje tenho uma carreira e meu site já tem outro propósito: colecionar meus aprendizados ao longo do tempo, e compartilhar com quem gostar de ler.

Quando notei que levava quase um segundo para carregar uma página do meu blog, e que carregava um monte de conteúdo totalizando mais de 1mb para uma publicação, percebi que meu blog não estava refletindo mais o meu momento.

O Inchaço da Web

Comecei a me interessar por esse tema conforme o tempo passava e meu telefone ficava mais e mais ultrapassado.

E ele não era ruim: 64gb, Android 9, 2GB RAM. Mas abrir qualquer site simples e fazer uma pesquisa levava muito tempo. Qualquer site trazia muita distração e era dificil encontrar o conteúdo que estava buscando, o que não é bem vindo com as sequelas pandêmicas.

Comecei a me sentir cada vez mais atraída por experiências simples, objetivas, limpas, minimalistas. Descobri que a causa raiz disso tem um nome: web bloat e escrevi sobre isso.

Novo site

Quanto mais lia sobre o tema, mais comecei a experimentar com reduções drásticas de complexidade que resultavam em uma experiência igual ou superior.

Um exemplo foi o blog.myreli.dev.

Como foi a criação e a migração:

Comecei do zero porque queria garantir que não me empolgasse com novas tecnologias e me perdesse - meu blog são arquivos markdown estáticos, e não deveriam fugir disso.

  1. Criei um pasta nova blog/ e migrei o conteúdo puro:
    • Todo o conteúdo dos posts já estava em Markdown, então a migração foi transparente para blog/posts/
    • Migrei as páginas HTML para Markdown em blog/
  2. Iniciei um projeto Eleventy para renderizar o Markdown em HTML
  3. Instalei o plugin de navegação para criar o menu automaticamente e o de estilização automática dos blocos de código (Opcional)
  4. Criei uma página nova de Posts para agregar todas as publicações e uma página inicial para listar os mais recentes
  5. Instalei um plugin de otimização das imagens em tempo de build (Opcional)
  6. Incluí um bloco, ativado pelo usuário, para se inscrever na newsletter
  7. Incluí um bloco, ativado pelo usuario, para interagir através de comentários
  8. Incluí um CSS base de estilos para garantir uma experiência de leitura agradável
  9. Escrevo a nota em texto a partir de qualquer editor
  10. Publico diretamente através do Git, complementando apenas com o que quero que seja o título e a descrição

Se surgir como duvida de alguém posso detalhar melhor algum dos tópicos, mas resumidamente foi isso. =)

Re-inventar a roda

Enquanto conversava com um amigo sobre isso ele perguntou se eu pretendia tornar o site zero-depencency. Não tenho uma resposta, mas acho que não.

Não é esse o ponto, mas sim torná-lo zero acoplado.

Hoje qualquer pessoa pode ler todo o conteúdo em markdown no GitHub, onde o repositório está hospedado.

Eu também testei outro renderizador de markdown simples, o teeny, e em menos 20 minutos conseguiria migrar para outro renderizador.

Estou utilizando o Prism para tornar os blocos de código bonitos, e o Pico para não me preocupar com CSS por enquanto. Remover ambos não deteriora a experiência do site, apenas muda a estilização para o padrão do navegador do usuário.

Então, não tá inchado - está o que deveria ser. E embora somente quatro pessoas acessem, está contribuindo para reduzir o Inchaço da Web.


Espero que essa leitura tenha agregado algo a você, obrigada por chegar até aqui.

Até mais! 🫰