[SUGESTÃO] Posts mostram um preview de algumas linhas ao passar com o mouse

[edumats]

Algo que existe em fórums é mostrar um preview de algumas linhas ou até X caracteres ao passar com o mouse no título do post.

Isso daria aos usuários uma ideia melhor do assunto que será tratado no post e acredito que incentive eles a entrarem no post para saber mais. E também ajuda a "salvar" posts com títulos muito curtos ou que não descrevem muito bem o conteúdo que será tratado, como:

• "Introdução ao Python" (ele vai dar uma introdução completa ou provavelmente só focar em um ou outro assunto?)
• "Como sair do Vim?" (Parece uma pergunta de iniciante, mas na verdade faz uma introdução ao editor)

Na própria página de Issues do Github já existe essa funcionalidade e também fóruns de internet também têm, por exemplo: https://www.hardmob.com.br/forums/227-Programacao-Desenvolvimento

O preview desse exemplo acima é bem simples, mas é o meu preferido, simplesmente mostra o conteúdo do post, sem nenhuma firula.

[gpoleszuk]

Olá @edumats e @Rafatcb!

Notei que o simples passar do mouse sobre o título de uma publicação no Tabnews baixa todo conteúdo da mesma em json para a memória do navegador. Para reproduzir esse detalhe, deixo uma receita:

• F12 para abrir o inspetor do navegador
• selecione a aba Network
• passar o ponteiro do mouse sobre qualquer link
• observar o tráfeto de dados. Cada link tem seu conteúdo json baixado completamente para o navegador.

Outro detalhe. Caso passe o ponteiro do mouse sobre a palavra "Próximo >" no fim da listagem dos títulos dos posts, baixará todos os conteúdos em um único json da próxima página sem mesmo visitá-la. O mesmo vale para outros links.

Isso tudo é normal ou uma anomalia do navegador Google Chrome, ou seja, baixar tudo que o ponteiro do mouse indica para o navegador (não é cache)? Sabendo desse recurso explorado intensamente pelo navegador, vi também como uma facilidade para acessar as postagens antigas em formato cru. Deixei um script baixando lentamente os posts passados.

Fiz um vídeo para ilustrar isto, pois há um bom tempo tenho notado esse comportamento. Para mim está ótimo do jeito que está, pois consigo ler as postagens sem mesmo abrí-las renderizadas. Contudo, para o Tabnews, pode ser um consumo extra de processamento/banda todas as vezes que o mouse sequer pairar sobre qualquer link na página.

Uploading Screencast from 09-05-2024 01:52:41.webm…

PS: Como é a primeira vez que subo um vídeo em um comentário, não sei se será incluído corretamente, mas acho que a descrição ficou clara.

[Rafatcb]

@gpoleszuk esse comportamento é por causa do componente Link do Next.js, com a propriedade prefetch={false}. Não sei dizer se é exatamente o ideal, mas creio ser intencional para deixar o carregamento do site mais rápido durante a navegação.

Seria interessante aproveitar esse comportamento para conseguir exibir os dados no hover, já que evitaríamos realizar duas requisições sobre o mesmo conteúdo, mas acho que não é possível acessar esses dados do prefetch do Next.js (pesquisei e não encontrei uma forma de fazer isso).

---

O seu vídeo não foi carregado, provavelmente você criou o comentário enquanto ele carregava, ou o GitHub cancelou o carregamento (às vezes acontece). Para saber se o carregamento do vídeo funcionou antes de publicar seu comentário, pode ver no Preview ou identificar pelo markdown se está com um link do tipo https://github.com/filipedeschamps/tabnews.com.br/assets/...

[gpoleszuk]

@Rafatcb muito grato por seu esclarecimento a respeito do prefetch do Next.js. Eu não conhecia essa funcionalidade e vou ficar mais atento aos links postados no Tabnews. Certamente, o carregamento é bem rápido, deixando todo trabalho para o browser renderizar a página a partir do json entregue pelo backend. Se o recurso está intencionalmente habilitado, está perfeito, pois vocês pensaram muito bem para definí-lo assim.

Agradeço também pela sua paciência para eu aprender corretamente a subir o vídeo aqui. Agora foi certinho seguindo sua receita :)

Screencast.from.09-05-2024.01.52.41.webm