Blog do Gui

Capa do Post: Uma Grande Atualização. Contendo: Uma foto do Guilherme com um texto em branco escrito: Uma Grande Atualização.

Uma Grande Atualização

12/06/2021

Seja bem vindo meu caro internauta, faz tempo que o blog saiu do ar, mas volto com novidades, nessa nova versão do site, temos várias melhorias e novidades então vamos lá:

Em um novo local, mas no mesmo lugar

Agora estamos em um novo domínio, saí de gsbenevides2.vercel.app para gui.dev.br. Porém ainda continuo usando a infraestrutura parruda e gratuita da Vercel. Qualquer requisição feita ao domínio anterior irá cair no novo, graças ao 307 do HTTP.

Atualização da Versão do Next e do Webpack

Migrei do NextJS 10.0 para o 10.1, como resultado obtivemos melhorias no carregamento de fontes, otimização de images, tempo desenvolvimento de features, acessibilidade, página de 500 de erro interno do servidor personalizada. Tudo isso junto com a atualização do Webpack 4 para 5 fazendo o processo de build seja mais rápido.

Agora este site é um PWA

Os PWA's são aplicações progressivas da Web, eles simulam e se aproximam a experiências de aplicações nativas, podendo ainda ser instaladas na gaveta de apps dos smartphones e PCs. Tudo isso graças aos trabalhadores de serviço e as estratégias de cacheamento de estáticos, fazendo com que além do site carregar mais rápido, funcionar sem rede de internet se possível. Um exemplo bem sucedido de PWA é o Twitter Lite. Splash Screen do PWA

Melhorias de SEO e Acessibilidade

O SEO serve para que a IA da Google consiga entender o que tem dentro do site. Nessas melhorias incluem as metas tags. E HTML mais semântico e com tags de acessibilidade para inclusão. Demonstração do link no Discord, Facebook e Twitter.

Uma cor, um tema, um padrão

O site agora não utiliza mais cores padrões do CSS, como cinza, branco e preto. Tem sua própria paleta de cores. Baseada em tons escuros. Com cores primária, secundária, de background e etc. Também troquei a fonte de Roboto para Open Sans. Exemplo da Fonte e Demonstração das Cores.

Integrado com Notion, para publicar mais rápido

O Notion é a ferramenta que uso para escrever os posts. Antigamente o fluxo de publicar ou atualizar um post era:

  1. Primeiro exportava para Markdown o post no Notion.
  2. Criava uma pasta em um projeto separado no GitHub. Nessa pasta tinha que ter tudo organizado pois caso um arquivo estivesse incorreto ou em local errado. Ocorria erro.
  3. Ao fazer commit sinalizava o nome do post e logo após o push no repositório remoto, uma Github Actions é disparada e usando um software em NodeJS, que era responsável por buscar o nome do último commit, entender os arquivos, enviar para o Firebase os arquivos e o post e por último disparar as WebPush Notifications via Firebase Cloud Mensaging.

Agora:

  1. Acesso o site em uma url específica.
  2. Coloco o link compartilhado do Notion e a senha de segurança.
  3. Um backend em NodeJS fica responsável por interpretar o conteúdo do Notion, extrair, organizar e preparar os arquivos e conteúdo.
  4. Antes de publicar tenho um Preview da publicação de como ela ficaria no site e se estive tudo certo finalizava o envio, e envia as notificações.

Além de ser mais fácil publicar agora é mais fácil excluir e atualizar posts.

Nova Tela de Erro

Além de melhorar o layout da tela de 404 Página Não Encontrada temos as novas de 500 Erro Interno do Servidor e PWA Offline. Junto de novos Easter-Eggs para cada uma delas. Demonstração da Tela de Erro.

Políticas, Google Analitics, WebMaster, Monitoramento de Performance do Firebase, etc

  • Agora temos uma página de Política de Privacidade, Uso de Dados e Termos de Serviço.
  • O uso do Google Analitics foi descontinuado e qualquer dado colhido por ele já foi marcado para exclusão.
  • O domínio foi registrado como propriedade no WebMasters do Google.
  • O monitoramento de performance do Firebase também foi descontinuado.
  • Melhorias no desenvolvimento com a migração do projeto no Firebase.
  • Melhorias de layout principalmente para computadores e dispositivos de tela larga como tablets. Pequenas melhorias para celular pois trabalho com Mobile First.
  • Pequenas mudanças na Home e no Currículo.
  • Gesto Swipe nos cards na tela de Currículo.
  • Melhorias nas notificações via WebPush.
  • Melhorias no contador de Visualizações das postagens no blog.
  • Melhorias de performance com resultados colhidos do Lighthouse.
  • Otimização de imagens com uso do Next Image Optimization.
  • Melhoria no tipo conteúdo suportado pelo conversor de Markdown.

Tsukasa do Anime Tonikaku Kawaii. Ao lado escrito Obrigado por ler. Até breve Creditos da Tsukasa: https://www.deviantart.com/fifthsilence/art/Tsukasa-chan-Tonikaku-Kawaii-860619511