13 fevereiro

Porque eu fiz uma extensão pra salvar textos destacados

Antes de mais nada, esse post, sem querer, virou quase um estudo de caso :D então separei em alguns tópicos pra ficar mais fluído, mas prometo que é rápido, fácil e barato! Léeeeeegou!

Quantos GB tem na sua cuca?

Quanta informação diária você acha que vê navegando na internet? Eu nem estou considerando o tempo que você passa nas redes sociais. Não é fácil achar uma fonte confiável, mas apenas para ilustra—e pelo que encontrei: 0.4 zettabytes de dados foram gerados em 2025 > isso é uns 400 milhões de terabytes por dia > nosso cérebro processa uns 70 gigabytes por dia.

Sejam esses valores precisos ou não, nós sabemos que é coisa pra caralho. E de tudo isso, se nós guardarmos efetivamente algumas centenas de megabytes na memória, eu diria que é otimismo. Não atoa estamos constantemente criando bookmarks, salvando links, baixando e enviando arquivos, mas tudo tem um limite, e eu diria que o nosso limite de capacidade de organização está indo pra fita junto com a nossa sanidade.

Eu descobri a necessidade e a importância de criar metodologias de organização durante o mestrado. E não tô falando de algo científico, mas de boas práticas para nos relacionarmos e lidarmos com dados que temos contato na internet. Ainda assim, continuo sofrendo, mas..

Se ninguém faz, eu faço!

Dois dos meus maiores desafios sempre foi: catalogar referências (pois quando se está na academia, tudo o que você lê tem importância — até memes, e catalogar já nas normas da ABNT pode salvar muito do seu tempo) e salvar recortes de conteúdos textuais (perdi a conta de quantas vezes li algo irado em um site e fechei, depois nunca mais achei). Pro primeiro desafio, descobri o MyBib, e compartilho com vocês. Nesse site você consegue salvar referências de livros, filmes, links, artigos, tudo! e já nas normas da ABNT ou outras dezenas nacionais e internacionais. Você pode nem precisar da ABNT, mas é uma ferramenta maneira pra organizar listas com informações mais precisas.

Para o segundo desafio, foi muito tempo testando. Inicialmente, eu salvava os links e separava por tags em sites de feed RSS, que são tipo bibliotecas que você salva sites e pode ler eles direto na plataforma e receber notificação de atualização. Porém, são pagos, caros e ruins. Então descobri algumas extensões, como WebHighlights, que você instala no navegador e consegue selecionar e salvar trechos de textos na web, separar por tags, etc. Porém, a versão free era horrível e a paga apenas em dólar (foda-se). Então descobri o Glasp, uma startup com um webapp como o anterior, mas focado em conhecimento compartilhado... você podia ver quem salvou as mesmas páginas que você, seguia outros usuários, algo como uma comunidade. Mas, novamente, tinha um milhão de funções desnecessárias, muitas vezes falhava, a versão paga é em dólar e a free é meio blé.

Então, com fogo no rabo, pra variar, pensei: MANO! VOU CRIAR ESSA PORRA!

Uoshi Highlights surge em sua versão 1.0 HAHA! Sério. Passei semanas estudando um bocado de código que eu ainda não tinha precisado, abusando do Gemini pra me explicar muitas linhas que eu precisava criar, mas acabava perdido, e muitas horas pensando como essa ferramenta deveria ser — pra mim.


E finalmente...

Eu tirei váaaaaarias piras sobre como seria essa ferramenta. Acabou que a melhor saída foi uma extensão pro navegador (HTML, CSS e um bruto dum JS + repositório GIT). Basicamente, essa extensão reconhece textos que eu seleciono em uma página e armazena temporariamente, até eu selecionar outro texto ou fechar o navegador. Então, a extensão possui uma pop-up onde eu consigo visualizar tudo o que foi selecionado e o link de origem, definir uma cor para destacar o texto no site que estou lendo, também adicionar comentários sobre a página ou especificamente sobre o trecho destacado. Também adicionar tags pra eu não me perder.

Trechinho destacado no post do Deniac.

Quando eu clico em 'Salvar Highlight', todas as informações são enviadas pra um arquivo .json que fica em um repositório no GitHub e é espelhado por um código na página 'Destaques' aqui no blog, onde eu posso acessar a qualquer momento pra conferir, pegar as referências e também compartilhar com o mundo.

Não foi a solução mais genial, pois não dou dev, mas funcionou bem demais pra mim.


Quem sabe o próximo passo é aprimorar a interface da pop-up e fazer com que reconheça também textos de PDF. Que sonho...

Sobre a importância de compartilhar

Quem lê esse blog há mais tempo sabe que eu sou heavy user da rede, eu surfo o dia todo e troco muitos dados. Ter um espaço especialmente para organizar recortes é algo vital pra mim, principalmente em época de estudos. Acho que a blogosfera ainda é um espaço acolhedor e que resiste às pressões contemporâneas ao assumir seu próprio ritmo, quebrando lógicas produtivas e temporais. Mas mais do que isso, ainda é um espaço para compartilhar. Várias vezes recebi e-mail ou inbox nas redes de pessoas que encontraram algo legal ou que estavam procurando enquanto fuçavam minhas postagens ou as páginas, e é sobre isso.

Acho que hoje, mais do que nunca, nós precisamos de um espaço como esse, que não tenhamos a ansiedade das métricas, e possamos apenas plantar e cultivar aquilo que queremos. Não atoa eu amo tanto a filosofia dos Jardins Digitais e tantas outras disruptivas e subversivas, pois elas se preocupam com o florescer da nossa consciência sobre o modo com que nos relacionamos com a tecnologia e os dados.

Enfim. Acho que é isso, não entrei em detalhes técnicos, mas se alguém se interessar, consegue espiar o repositório no GitHub... talvez eu faça um tutorial pra vocês criarem suas próprias extensões de highlights, o que acham?


16 comentários:

  1. Anônimo14 fevereiro

    ótima solução. fiquei curioso sobre a implementação! ali no repositório eu só encontrei o .json com os dados. ou tem o código da extensão ali junto? pra quem hospeda blogs no github pages (com um repositório no github) ia funcionar muito bem pra manter uma sessão highlights, como você tem aqui.

    ps. amei encontrar um dev com blog no blogspot KKKK adoro a combinação de pensar pouco na plataforma e mais no conteúdo. abraço

    ResponderExcluir
    Respostas
    1. então, o código da extensão não tá disponível pois ainda tô testando e melhorando, e tbm, por enquanto, tem uma key do Git junto que faz a troca das informações, mas vou montar um tutorial aqui assim que der tempo, acho que pode ser legal pra galera né.

      e sim, não sou dev, mas gosto de experimentar algumas loucuras com códigos rs principalmente criar essas pequenas tools :D continua acompanhando! tmj!

      Excluir
  2. oi, uoshi. te conheci pelo grupo entreblogs. e cara, parabéns, se você não é dev e já tá criando coisas assim, imagina se fosse. eu gostei muito. a propósito, sobre essa questãoi de compartilhar, é interessante, porque já fiz um post sobre isso em um dos meus blogs, especificamente sobre esse assunto. quando entrei aqui no seu blog, vi uma parte ali em cima em "recortes" e cliquei para ler, do blog porcelana, e falava sobre uma coisa da qual eu estou passando (porque fui recentemente diagnosticada oficialmente com tdah apresentação combinada grave e traços autísticos) e da qual eu estava me escondendo, mas por ler algo que estava "salvo" aqui no seu blog, me levou a sair um pouco desse esturpor e ir atrás de informações sobre como a minha mente funciona.

    é sobre isso!

    nos meus blogs, eu sempre coloco uma parte específica sobre "resources", seja de algo que eu li por ai na internet, achei importantíssimo, e coloquei o link lá. ou ferramentas da web e essas coisas (que inclusive vivo achando e catando pelo neocities como se fossem cacarecos ksksks).

    achei muito interessante o uoshi highlights e como ele funciona — como diz o ditado, quando você quer algo bem feito, faça você mesmo.

    um abraço <3
    dulce nicolle
    https://nicolledulce.wordpress.com/
    https://experimental-aurora.blogspot.com/
    https://diario-augustus.bearblog.dev/

    ResponderExcluir
    Respostas
    1. hey ni! que massa que tu chegou aqui, e valeu pelas palavras. o porcelana é massa demais, tem muuuuuuuuuuuuuuuita coisa lá s.o.s! rs

      sobre o seu lance... eu vou lá no seu blog comentar, pois estava nesse exato momento lendo seu post *-----------------------*

      e surfar na internet é isso, encontrar as melhores ondas e espalhar pro mundo pra que outras pessoas também possam aproveitar :D léeeeesgou

      Excluir
  3. uoshi isso é GENIAL

    QUERO ESSE TUTORIAL NA MESA AGORAAAAA por favorzinho ❤️ HAHAHAHA

    ResponderExcluir
  4. Queria abraçar esse post! Sério, que genial tudo o que você fez e a toda a linha de raciocinio e criação pra chegar nisso ai. Fiquei muito curiosa e se você poder criar um tutorial pra pessoas totalmente leigas que nem, seria incrível!
    Gostei muito do que você disse sobre os nossos blogs ser tipo esse jardim digital, a gente tá indo contra a maré de metricas e tudo mais.... e eu acho isso sensacional, eu amo blogs! <3

    https://nyrtais.blogspot.com/

    ResponderExcluir
    Respostas
    1. haha que maneiro, e sim, a necessidade força a criatividade tbm né rs e logo eu tento desenrolar o tutorial, ainda preciso dar uma 'lapidada' no código, e então solto :D

      Excluir
  5. eu não sei nem o que comentar, estou tão impactado

    ResponderExcluir
  6. eu adoreiiiiiiiii!! por favor faz o tutorial!! eu suber usaria essa extensão, achei ela perfeita!

    ResponderExcluir
    Respostas
    1. yeeeeey! vou organizar isso! tô pensando em como tornar ela pública, pois por enquanto está apenas local... pensando aqui 🔥

      Excluir
  7. Eu AMO pessoas que tomam a iniciativa de fazer algo, mesmo com o mínimo de conhecimento. Eu sou assim e isso me rende muitas dores de cabeça, mas sempre vale a pena no final. Achei muito interessante sua extensão, às vezes a gente é feliz no simples, sem mil funções atrapalhando. Penso o mesmo sobre alguns aplicativos, mas fazer o código é um desafio que talvez eu prefira não enfrentar por enquanto. Eu olhei sua página 'Destaques' antes de ler essa postagem e achei incrível, achei mais incrível ainda depois que li e vi como ela funciona. Parabéns pela ideia genial!

    ResponderExcluir
    Respostas
    1. heeey, então, eu tava me coçando pra não pegar essa dor de cabeça, mas não me aguentei rs Legal que tu curtiu!

      Excluir
  8. Faz anos que espero por algo assim, mas não sabia nem onde ou como procurar, pois sou leiga no assunto de códigos. Então aceito tutorial, com toda certeza vou usar no meu blog. O que mais gosto é poder fazer meu proprio bookmark, mas na falta de ferramentas, estive fazendo posts e linkando textos. Inclusive não sei mexer no github, preciso dar uma estudada sobre.

    ResponderExcluir
    Respostas
    1. Olha só, eu tbm não faço bookmark por falta de uma boa ferramenta :3 mas vou ver se consigo agregar nesse projeto, logo eu tento atualizar ele :D

      Excluir