arquivo / post

Uma grande reorganização do blog

Uma atualização focada em simplificar a estrutura do projeto.

  • documentação
  • changelog

Nesta atualização fiz uma das maiores reorganizações desde a criação do blog. Grande parte das mudanças aconteceu nos bastidores, com foco em simplificar a arquitetura do projeto e preparar o terreno para futuras melhorias.

Uma atualização de infraestrutura

Grande parte das alterações desta versão aconteceu "nos bastidores". O objetivo foi reduzir complexidade, eliminar código redundante e criar uma base mais consistente para futuras funcionalidades.

Novo componente de infobox

Uma das principais novidades é a criação do componente Infobox, utilizado para destacar informações importantes ao longo dos artigos.

Agora é possível escrever blocos completos em Markdown dentro do componente, preservando listas, links, código, citações e demais recursos da linguagem.

Exemplo de uso:

Browser support

The Anchor Positioning API has been supported across all major browsers since January 2026. It was most recently added to Firefox, but it’s been in Safari since September 2025 and Chromium since mid-2024.

Surprisingly, as of July 2026, support is still only around 81% according to caniuse. There’s also a newer revision to the Anchor Positioning API, level 2, which is only available for 64% of users.

Later in this post, we’ll look at how to account for the imperfect browser support, including using a polyfill and providing fallback styles.

Compatibilidade

O conteúdo das infoboxes agora utiliza a mesma renderização Markdown do restante do blog, garantindo consistência entre os componentes.

CSS mais simples

Diversos arquivos foram reorganizados e parte do CSS específico foi consolidada. Além disso, várias classes receberam nomes mais simples e reutilizáveis, como .entry, .title, .excerpt e .datetime.

Essa mudança reduz o acoplamento entre estilos e páginas específicas, facilitando a manutenção do projeto.

Organização das variáveis

As variáveis CSS passaram a ser organizadas em grupos:

  • Brand
  • Palette
  • Semantic
  • Typography

Essa estrutura facilita localizar e manter cores, tipografia e demais tokens de design.

Navegação por teclado

Também foram realizados ajustes na navegação utilizando teclado, tornando os itens das listagens mais acessíveis e com foco visual mais consistente.

Acessibilidade

Pequenos ajustes de foco e navegação melhoram significativamente a experiência de quem utiliza apenas o teclado ou tecnologias assistivas.

Limpeza do projeto

Além das novidades visíveis, uma quantidade significativa de código antigo foi removida. O objetivo foi deixar a base mais enxuta e preparada para evoluções futuras.

Em evolução

Esta reorganização é apenas o começo. Novos componentes, melhorias de acessibilidade e refinamentos visuais continuarão sendo implementados nas próximas atualizações.