Show HN: Nash - notas autônomas feitas em um único arquivo HTML

• Nash é uma nota em formato HTML autônomo, que não precisa de software ou serviço adicional.
• Pode ser usado apenas com um navegador web, e também pode ser salvo e editado offline.
• Inspiração
  • Ao implementar em um único HTML um recurso para criar um POC (Proof of Concept) de ideias simples, percebi que era possível criar um arquivo de documento que funciona sem serviço ou software separado.
  • Esta é a primeira tentativa de criar um arquivo de documento que funcione sem softwares como Notion ou Word.
• Obter uma nota em branco
  • Para ir para uma página em branco, use o seguinte link: Página em branco do Nash
• O Nash é open source e pode ser modificado e usado livremente.

[xguru]

Nash, notas que funcionam em um único arquivo HTML

Você postou isso no Show GN e também no Hacker News, e recebeu muitos votos. Parabéns!

[GN⁺]

Comentários no Hacker News

• Gostei muito deste projeto e, ao ver o código-fonte, achei legal que ele esteja sendo feito em Vanilla JS. Hoje em dia, subestima-se o quanto dá para criar de apps web interativos sem bibliotecas ou frameworks
  • Eu também adoro a ideia de fazer apps web locais simples em uma única página HTML. Visitei recentemente um museu de ciências com meu filho e usamos um animador simples de stop motion. Decidi criar um app web desse tipo e fiz tudo em uma única página HTML, para copiar para o notebook dele e usar sem internet. Tive preguiça de escrever Vanilla JS, então usei React e um bundler. No fim, tudo foi empacotado em um único arquivo HTML. Talvez eu publique no Show HN algum dia
• Muito do trabalho pesado é feito por esta propriedade simples, mas poderosa. Surpreendentemente, muitos desenvolvedores parecem não conhecê-la bem. Ela existe há bastante tempo
  • <div id="editor" contenteditable="true">
• Excelente trabalho
  • Eu sugeriria fazer a página abrir automaticamente em modo de edição quando for aberta do disco local no navegador, e mudar para a visualização normal somente leitura quando for publicada no site de alguém e acessada na web aberta (verificando se o endereço é http/https)
  • Claro:
    1. Deve haver uma forma de ignorar isso (um parâmetro na query string ou um fragmento mágico na URL), para que também seja possível ver em modo de edição
    2. Deve haver uma exceção para um domínio/prefixo de URL específico — basicamente keepworking.github.io (ou https://keepworking.github.io/nash/) — para que o modo de edição também fique ativo nesse site. Isso significa que, pessoalmente, você não precisa fazer nada especial para a demo funcionar (essa exceção deve ser configurável pelo usuário. Assim, outras pessoas também podem obter o mesmo comportamento sem usar o truque do item #1)
• Isso é muito legal. Nós (ou talvez só eu) estamos tão acostumados a escrever a parte JS de um site fora do HTML propriamente dito que, ao ver isso, pensei: "uau, é insano que isso seja possível só com HTML". Aí fui ver o código-fonte, vi todo o JS dentro de uma boa e velha tag script e lembrei de novo que isso realmente é possível
• Dá para tornar isso independente e realmente portátil usando armazenamento "de verdade" https://rpdillon.net/redbean-tiddlywiki-saver.html
• Eu queria que os navegadores oferecessem suporte melhor para apps web locais. Se arquivos locais pudessem acessar armazenamento persistente com facilidade, isso abriria muitas oportunidades para apps GUI rápidos e simples. Basicamente, o oposto do Electron
• Muito bem! Houve uma discussão sobre essa ideia antes, mencionando o TiddlyWiki https://news.ycombinator.com/item?id=43179649
• Chamar isso de "nota" é um pouco confuso. Eu chamaria de um app web de arquivo único, editável e auto-modificável
• Sugestão: deve haver um aviso ao tentar fechar a página sem salvar após editar. Eu sugeriria adicionar um handler onbeforeunload
• Recentemente tentei criar uma wiki local com TiddlyWiki, mas fracassei miseravelmente e acabei escrevendo o arquivo HTML à mão
  • Parece que o Nash simplifica meu trabalho, obrigado
• Adicionando isto para um sumário fácil https://codepen.io/cgurski/pen/qBrNrPo