Dev Notes
Bloco de notas em Markdown feito para desenvolvedores: blocos de código, listas de tarefas, etiquetas e busca. As notas ficam no navegador (IndexedDB), o app funciona offline e pode ser instalado no computador ou no celular como PWA.
Funcionalidades
- Markdown com títulos, negrito, itálico, links, citações, listas e blocos de código com a linguagem indicada.
- Tarefas clicáveis: marcar
- [ ] na visualização atualiza o texto da nota.
- Etiquetas automáticas: escreva
#docker em qualquer lugar e a nota aparece no filtro.
- Busca que ignora acentos e maiúsculas e exige todas as palavras digitadas.
- Escrever e visualizar lado a lado em telas largas; no celular, lista e nota em telas separadas.
- Fixar, duplicar, baixar como
.md e excluir com "Desfazer", sem caixas de confirmação.
- Backup em JSON para exportar e importar, com validação do arquivo.
- Offline e instalável (service worker + manifest).
- Atalhos:
Alt+N nova nota, Ctrl+K buscar, Ctrl+E alternar escrever/visualizar, Tab indenta no editor.
- Modo escuro automático, seguindo o sistema.
Decisões técnicas
| Tema | O que foi feito |
|---|
| Markdown seguro | Renderizador próprio (src/markdown.js). O texto inteiro é escapado antes de qualquer transformação, então nenhum HTML digitado vira HTML de verdade. Links só aceitam http, https e mailto. Há testes com tentativas de XSS. |
| Armazenamento | IndexedDB com uma camada fina de Promises (src/storage.js) e alternativa em localStorage para navegadores que bloqueiam o IndexedDB. |
| Migração | Quem usava a versão antiga tem as notas convertidas automaticamente no primeiro acesso. A versão antiga gerava IDs com Math.random() * 5000, que podiam se repetir. A migração dá um ID novo (crypto.randomUUID) para cada nota, e isso tem teste. |
| Offline | Service worker com stale-while-revalidate: abre instantaneamente do cache e atualiza em segundo plano. Trocar VERSION limpa o cache antigo. |
| Regras isoladas | Título, prévia, etiquetas, busca, ordenação, backup e migração são funções puras em src/notes.js, sem DOM. A ordenação não altera o array original. |
| Testes e CI | 18 testes com node --test, rodando no GitHub Actions. Durante o desenvolvimento, o app também foi testado de ponta a ponta no navegador: migração, tarefas, busca, desfazer, backup e uso sem internet. |
| Sem dependências | HTML, CSS e JavaScript (ES Modules). Fontes IBM Plex hospedadas no projeto. |
Estrutura
├── index.html
├── manifest.webmanifest
├── sw.js # service worker (offline)
├── src/
│ ├── markdown.js # Markdown → HTML seguro, tarefas
│ ├── notes.js # regras das notas (funções puras)
│ ├── storage.js # IndexedDB + migração da versão antiga
│ └── main.js # interface, atalhos, backup, PWA
├── tests/ # node --test
├── icons/ # ícone SVG + PNGs gerados por scripts/icons.mjs
└── assets/ # CSS e fontes
Rodando localmente
git clone https://github.com/wagnerglongo/Dev-notes.git
cd Dev-notes
npm run dev # http://localhost:3000 (o service worker funciona em localhost)
npm test # Node 20+
Desenvolvido por Wagner Longo.
