Executando verificação de segurança...
18

Novas melhorias: Abertura instanânea de páginas e mais 7 melhorias 🎉

Mais uma semana se passou desde a última publicação sobre as melhorias no TabNews e ao longo desse tempo 8 novas implementações foram feitas!

Na verdade, uma das implementações foi feita na semana retrasada mas eu esqueci de publicar aqui, então vamos começar por ela:

1) Atualização de todas as dependências

Nós atualizamos todas as dependências do backend e frontend do projeto para a última versão possível e compatível. Destaco isso, pois nem todas as dependências nas suas últimas versões são compatíveis com todo o ecossistema de módulos usados no TabNews.

Atualização de dependências do Node.js

Um exemplo foi o downgrade do react para a versão 17.0.2 para ficar compatível com o framework para UI que usamos aqui no TabNews, o @primer/react do GitHub. Este problema de incompatibilidade foi solucionado por rafa-thayto e nos ajudou a parar de ter uma dor de cabeça com as instalações das dependências.

De qualquer forma, o mais importante foi atualizado, que são as dependências de produção do backend, incluindo a versão do Node.js. Uma dependência do backend não pode ser atualizada, mas era uma dependência usada apenas no lado do desenvolvimento do sistema chamada kill-port.

Esta implementação foi liderada por mim e as informações podem ser conferidas por essa Issue* 🎉

2) Abertura instantânea de páginas

Foi implementado o uso do componente Link do Next.js e agora ele transforma o TabNews em uma SPA Híbrida, onde inicialmente se comporta como uma página estática HTML convencional, mas logo em seguida hidrata ela com recursos avançados, como o carregamento antecipado das URLs das publicações.

Abertura instantânea de páginas

Então agora caso você acesse a lista de publicações que está na Home, ao passar o mouse em cima de algum link, dependendo da sua conexão é bem possível que, ao clicar, a página abra instantaneamente pelo fato de todas as informações já estarem na memória do navegador.

Fora isso, foi implementado uma loading bar no topo do site para sinalizar o carregamento da página.

Esta implementação foi realizada por ErickCReis e as informações podem ser conferidas por essa Issue* 🎉

3) TabNews compatível com Windows

Na verdade, rodar o serviço do TabNews em modo de desenvolvimento já era compatível com Windows, porém o comando npm test infelizmente retornava um erro, e este é o principal comando para você verificar se todo o sistema está se comportando como deveria, tanto antes de uma implementação, quanto depois. Mas agora ele está compatível com Windows, Linux e macOS.

Esta implementação foi realizada por mim, mas teve participação de OtavioVB e aprendendofelipe testando no Windows e as informações podem ser conferidas por essa Issue* 🎉

4) Publicações Lidas e Não Lidas

Antes, todas as publicações do TabNews possuíam a mesma cor de link, independente se você já tivesse visitado ela ou não e isto dificultava um pouco a usabilidade. Agora está muito mais fácil identificar o que são publicações novas e mais para frente queremos sincronizar isso em todos os devices que você esteja logado, vai ser massa.

Diferença entre links visitados e não visitados

Esta implementação foi realizada por aprendendofelipe e as informações podem ser conferidas por essa Issue* 🎉

5) Invalidar todas as sessões do usuário ao resetar a senha

Agora, no momento que você reseta a sua senha, o sistema automaticamente invalida todas as sessões que possam estar abertas e vinculadas ao seu usuário em qualquer tipo de device. Isto é um avanço fundamental na segurança do usuário dentro do TabNews.

Esta implementação foi realizada por eletroswing e as informações podem ser conferidas por essa Issue* 🎉

6) Breaking Change no objeto de Conteúdo

Nós adicionamos a propriedade owner_username no objeto content para fazer par com o owner_id. Por compatibilidade, ainda iremos manter o username, mas que após notificação pública (além desta aqui), iremos remover e fazer uma breaking change na interface pública. Estamos nos dando o luxo de fazer isso dessa forma pela API estar em beta.

Veja um exemplo de um content retornado pela API:

https://www.tabnews.com.br/api/v1/contents/gugadeschamps/douglas-crockford-criador-do-json-acredita-que-javascript-deveria-ser-aposentado

{
  "id": "9cbd96b5-e326-4d8d-ae4a-837ced7cba54",
  "owner_id": "110cc974-4c56-4074-afbc-81ce22aa6013",
  "parent_id": null,
  "slug": "douglas-crockford-criador-do-json-acredita-que-javascript-deveria-ser-aposentado",
  "title": "Douglas Crockford, criador do JSON, acredita que JavaScript deveria ser aposentado",
  "body": "A linguagem teria se tornado uma “barreira ao progresso”, afirma o programador.\n\nCrockford diz que o JavaScript...",
  "status": "published",
  "source_url": "https://devclass.com/2022/08/04/retire_javascript_says-json-creator-douglas-crockford/Douglas",
  "created_at": "2022-08-08T11:24:34.016Z",
  "updated_at": "2022-08-08T11:24:34.016Z",
  "published_at": "2022-08-08T11:24:34.046Z",
  "deleted_at": null,
  "username": "gugadeschamps",
  "owner_username": "gugadeschamps",
  "parent_title": null,
  "parent_slug": null,
  "parent_username": null,
  "tabcoins": 3,
  "children_deep_count": 0
}

O motivo desta implementação é semântico, uma vez que um conteúdo não possui username, ele possui no máximo um dono e esse dono é quem possui um username.

O Client Web do TabNews já está usando esta nova propriedade e recomendamos a todos que programaram no passado a algum client a começarem a utilizar esta nova propriedade owner_username para saber qual o autor/dono de um conteúdo.

Esta implementação foi realizada por mim e as informações podem ser conferidas por essa Issue* 🎉

7) Fazer o controller parar de devolver erros 500

Na missão de ter zero erros 500 no TabNews, havia uma forma de consistentemente gerar um que era enviar um method HTTP desconhecido por algum endpoint qualquer. Por exemplo, se em um endpoint que só aceita GET você enviar um POST, era retornado um erro 500 ao invés de 404. Agora isso foi ajustado e nessa situação é enviado um 404.

0 requests com erro no último dia

Esta implementação foi realizada por mim e as informações podem ser conferidas por essa Issue* 🎉

8) Página listando as publicações mais recentes

Agora além da visualização da Home que ordena as publicações levando em consideração a quantidade de tabcoins e a idade dela, você pode consultar a página Recentes que irá listar as publicações sem algoritmo algum, apenas devolverá uma lista ordenada de forma decrescente pela data de publicação (do mais novo para o mais velho).

Publicações mais recentes

Esta implementação foi realizada por mim e as informações podem ser conferidas por essa Issue* 🎉

Conclusão

A Milestone 5 com certeza será a recorde de melhorias, pois já estamos com 28 delas em produção! E tem mais coisas muito interessantes para entrar, inclusive que nesse exato momento está com Pull Request sendo revisado e que não vejo a hora de fazer o deploy!

É isso turma, de semana em semana estamos lambendo o projeto e o TabNews por inteiro está sendo lapidado. Na verdade ainda há muita coisa para lapidar e isso é ótimo! Tanto o TabNews quanto a plataforma que estamos construindo é um projeto de longo prazo, mas que já me deixa muito orgulhoso por tudo que já construímos até então e por todas as pessoas que se aproximaram 🤝

Tenham todos uma excelente semana! 😍


⚠️ O repositório Open Source do TabNews ainda está em Modo Privado. Caso queira receber um convite para participar, leia esta publicação.

6

Nooosssaaaa que feature sensacional essa de carregar a página quase que instântaneamente!!! A diferença na fluidez e navegação entre as páginas é brutal. Estou muito feliz com o avanço do projeto e a maturidade que está ganhando e é impressionante o quanto de features importantes estão sendo agregados ao projeto em tão pouco tempo... não vejo a hora dos próximos episódios. E também gostei muito desse formato de gif, deixa bem simples entender as correções e melhorias além de que dá vida a essa linda postagem 🤩

3

As implementações de abertura instantânea de páginas e marcação de publicações lidas são muito bem vindas.

É o tipo de refinamento que não aparece, mas é notável.

3
3

Muito legal que de oito tarefas, seis pessoas foram mencionadas pela participação. A velocidade de novas funcionalidades também está bem rápida! Dá para perceber o carinho das pessoas pelos detalhes.

Uma coisa que eu também gostei de ver nessa publicação foram os GIFs ilustrando o que foi realizado 😃