Executando verificação de segurança...
24
filipedeschamps
6 min de leitura ·

Novas melhorias: Thumbnail dinâmica, Ícones do Bot do TabNews e outras 5 melhorias 🎉

Mais uma semana se passou desde a última publicação comemorando as melhorias e mais 7 novidades entraram em produção!

1) Thumbnails customizadas e dinâmicas

Agora qualquer publicação ao ser compartilhada em redes sociais como Facebook, Twitter ou qualquer outro lugar que cria uma imagem de pré-visualização, terá uma imagem customizada e dinâmica com informações internas, como título, autor, quantidade de comentários e a data da publicação, como essa própria publicação aqui (momento Inception):

Thumbnail customizada desta publicação

Isso também vale para publicações que são respostas de outros conteúdos, como por exemplo ao compartilhar essa resposta aqui, será gerada automaticamente a thumbnail abaixo que possui um outro layout:

Thumbnail customizada de um comentário

O mais legal é que tudo isto está disponível pela API e basta adicionar /thumbnail na rota do conteúdo, olha só que massa:

Vamos usar como exemplo uma outra publicação, onde a URL para a página dela é o seguinte:

https://www.tabnews.com.br/GabrielSozinho/documentacao-da-api-do-tabnews

O conteúdo desta página pode ser acessada pela API apenas concatenando /api/v1/contents no início do path ali de cima:

https://www.tabnews.com.br/api/v1/contents/GabrielSozinho/documentacao-da-api-do-tabnews

E para acessar o PNG da thumbnail customizada, pasta concatenar /thumbnail no final dessa URL:

https://www.tabnews.com.br/api/v1/contents/GabrielSozinho/documentacao-da-api-do-tabnews/thumbnail

Ter essa feature implementada já nesse estágio do projeto, com toda essa flexibilidade, é algo que me deixa muito surpreso e animado, pois é uma feature que o GitHub tem e isso só mostra como que nós iremos conseguir fazer qualquer coisa que grandes empresas fazem.

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

2) Logo do TabNews em SVG

Agora disponibilizamos de forma pública e em formato SVG todos os logos do TabNews e todas as suas variações, que ao total são 10 variações contendo fundo branco, fundo transparente, fundo escuro, outline, etc.

Tanto a criação dos SVGs quanto a implementação destes estáticos dentro do repositório foi realizada por ezequiaslopesdasilva e as informações podem ser conferidas por essa Issue* 🎉

3) Logos do Bot do TabNews em SVG

Agora também disponibilizamos de forma pública e em formato SVG todas as variações dos ícones do Bot do TabNews e ao total são 32 variações, por exemplo:

Não tenho palavras para demonstrar a surpresa que tive quando ví essas imagens sendo publicadas no Discord do TabNews.

Tanto a criação dos SVGs quanto a implementação destes estáticos dentro do repositório foi realizada por ezequiaslopesdasilva e as informações podem ser conferidas por essa Issue* 🎉

4) Ajuste de aria-label no TabCoinButtons

Quando eu implementei os botões de up/down vote das TabCoins, eu garantidamente copiei e colei de algum lugar que tinha outro ícone e não alterei a propriedade aria-label que veio junto com o código. Então antes deste ajuste, ambos os botões estavam com o valor "Search", e após o ajuste estão com os valores "Creditar TabCoin" e "Debitar TabCoin".

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

5) Renomear error_unique_code para error_location_code

O objetivo inicial do error_unique_code era cada erro ter um ID único que fosse fácil de identificar pela resposta pública da API em que local dentro do código o erro foi gerado, e de fato fica muito rápido só pelo retorno da API saber em qual condição o erro foi gerado, porque basta fazer uma busca global no código por aquela string.

Porém o nome error_unique_code está errado, pois se o código for refatorado (no sentido dele ter o mesmo comportamento final, mas o erro é gerado em outro lugar do código), a string que está escrita dentro do erro irá mudar, pois a posição irá mudar.

Mas agora isto está ajustado e todas as declarações desta propriedade dentro do projeto foram renomeadas para error_location_code, o que fez alterar numa paulada só 38 arquivos.

E assumimos que era improvável alguém estar usando essa propriedade em algum client, por isso realizamos esta breaking change sem uma notificação prévia.

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

6) Nova regra para o slug sobre underscore e ampersand

A função que gera o slug (texto-nesse-formato-limpo-para-url) estava convertendo alguns títulos de forma errada, então no caso abaixo:

  • Título de exemplo: Testando children_deep_count
  • Antes gerava isso como slug: testando-childrendeepcount
  • Agora gera isso: testando-children-deep-count

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

7) Divisor padrão na data de publicação no ContentList

Esta tarefa na verdade começou de outra forma e era sobre a Lista de Conteúdos que monta a Home (através do componente ContentList), onde a idéia era mover o autor da publicação para a última posição... mas como apontado pelo aprendendofelipe, não ficou legal e dificultou a leitura da data de publicação.

Com isso, apenas colocamos o divisor padrão entre o autor e a data para isolar e facilitar a leitura dela.

Como era antes

Sem o divisor

Como ficou agora

Com o divisor

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

Conclusão

Turma, eu estou correndo um risco alto de me tornar repetitivo, mas não sei mais o que dizer a não ser que vocês são SENSACIONAIS!!! Olha tudo que surgiu nessa última semana e tudo vindo da comunidade!! Eu não tenho mais dúvida alguma que nós vamos construir a melhor plataforma possível de conteúdos sobre tecnologia!!! Ainda mais porque há várias outras melhorias aguardando revisão lá no repositório 🤝

Tenham todos uma ótima 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
3
filipedeschamps
Autor
Autor

Muito massa 😍 Inclusive alterei o título da publicação de Thumbnail customizada para Thumbnail dinâmica inspirado por esse seu comentário e tudo atualiza em tempo-real 🤝

5
OtavioCarmanini

Sensacional as melhorias tragas pelo pessoal ao longo da última semana.

Você mostrou que as thumbnail são resgatadas por API, no entanto, como funciona a api das thumbnail's para respostas as postagens?

3
filipedeschamps
Autor
Autor

Otavio, ótima pergunta!

Toda publicação, independente de ser uma que irá aparecer na raiz do site ou ser a resposta contra outra publicação, para o sistema é quase que a mesma coisa: um objeto content. A única diferença é que em uma resposta, este content possui o parâmetro parent_id apontando para outro content.

Isso significa que todas as publicações compartilham todas as propriedades, inclusive o slug. Então até uma resposta possui uma URL única disponível, uma página própria, como essa sua resposta aqui, basta clicar no tempo de publicação ao lado do seu username:

https://www.tabnews.com.br/OtavioVB/24ed2840-aa51-4d58-a0fb-463b73c4ac5f

Então se tem uma página, tem essa informação na API, e para acessar por lá, basta concatenar no início o prefixo /api/v1/contents

https://www.tabnews.com.br/api/v1/contents/OtavioVB/24ed2840-aa51-4d58-a0fb-463b73c4ac5f

E agora, para acessar a thumbnail, basta concatenar ao fim o /thumbnail

https://www.tabnews.com.br/api/v1/contents/OtavioVB/24ed2840-aa51-4d58-a0fb-463b73c4ac5f/thumbnail

E testando ela, dá para notar a necessidade de alguns ajustes no layout 🤝

De qualquer forma, pelo fato de uma resposta por padrão não ter a propriedade title preenchida, o código pega parte do body para colocar no lugar.

5
OtavioCarmanini

Bacana demais Filipe!! Que explicação incrível, deu para entender perfeitamente.

Com isso, acho que vai ser minha primeira contribuição no projeto. Percebi que para certas ocasiões como essa aqui: https://www.tabnews.com.br/api/v1/contents/filipedeschamps/2a1f8451-dc1e-4a33-8ce8-aaac4f59cf2f/thumbnail o limite de caracteres excedem o espaço permitido, de forma que ele ultrapasse a margem do desenho da pasta.

E analisando a linha de comando, vejo que os códigos não levam em consideração os caracteres "Em resposta a " e por isso excede o limite em 14 caracteres.

4
gugadeschamps

O projeto praticamente começa a rodar sozinho, com todas as contribuições vindo da comunidade (sem tirar o mérito do filipedeschamps pelos ajustes necessários e testes automatizados).

3
2
filipedeschamps
Autor
Autor

Ciro, show de bola, seja super bem vindo!!!

Por hora não temos nenhuma implementação de full-text search, mas é um recurso bastante requisitado.

Optamos não incluir na Milestone de desenvolvimento atual, pois seria muita coisa. Mas esse é um recurso que com certeza será implementado 🤝

Obrigado pelas sugestões dos repositórios 👍

3
ciromaciel

Obrigado Filipe!

recomendo esse dois por ter experiencia e serem completamente Easier-to-Use...

veja so:

para o https://github.com/typesense/typesense, que hoje em dia é minha escolha favorita...

pegamos um provedor de Cloud como o https://www.vultr.com/, la temos maquinas virtuais completas a partir de 3.5 usd.

pode instalar e subir no docker

docker run \
        -p 8108:8108 -v/tmp:/data \
        typesense/typesense:0.23.1 \
          --data-dir /data --api-key=xyz

ou instalador:

curl -O https://dl.typesense.org/releases/0.23.1/typesense-server-0.23.1-amd64.deb

apt install ./typesense-server-0.23.1-amd64.deb

feito isso, no onSave de cada post, para fazer o put no index:

// npm install typesense @babel/runtime

const Typesense = require('typesense')
const client = new Typesense.Client({
  'nodes': [{'host': 'localhost', 'port': '8108', 'protocol': 'http'}],
  'apiKey': 'xyz'
})

const schema = {
  "name": "books",
  "fields": [
    {"name": "title", "type": "string"},
    {"name": "author", "type": "string"},
    {"name": "ratings", "type": "int32"}
  ],
  "default_sorting_field": "ratings"
}

const documents = [
    {"title":"Book 1","author":"Author1","ratings":24},
    {"title":"Book 2","author":"Author2","ratings":31},
    {"title":"Book 3","author":"Author3","ratings":30}
  ]

client.collections().create(schema).then(() => {
  client.collections('books').documents().import(documents)
})

e na api, no endPoint de busca, isso:

console.log(client.collections('books').documents().search({
  'query_by': 'title,author',
  'q': 'boo'
}))

Goool! pronto...

eu sou meio antigo e antes as coisas nao eram tao disponiveis assim... quando precisei fazer buscas full-text search no passado considerava ate coisas como Lucene ou Solr, mas o custo de implementacao é muito grande... estou vendo que isso pode ser util para muito desenvolvedores...

  • temos um publico de desenvolvedores?
  • voce acredita que seja positivo eu fazer um post sobre isso?
1
filipedeschamps
Autor
Autor

Que massa meu caro!!! Sobre as perguntas:

temos um publico de desenvolvedores?

Sim, o TabNews é feito para pessoas que utilizam tecnologia para trabalhar.

voce acredita que seja positivo eu fazer um post sobre isso?

Você diz uma publicação sobre "Como implementar Full-Text Search"? Com certeza 😍

Inclusive na publicação você pode definir a linguagem nos blocos de código, pois daí habilita o syntax hightlight, por exemplo:

const Typesense = require('typesense');

foi feito assim:

```js
const Typesense = require('typesense');
```
1
2
FelipeFernandes

Parabéns aos envolvidos nas melhorias, e nem falo das thumbnails dinâmicas, ficaram uma delicinha! Fico muito feliz em vê o andamento do projeto e ansioso pelo que está por vim.

0