Show HN: Nash - notas autónomas hechas en un solo archivo HTML

• Nash es una nota en formato HTML autónomo que no requiere software ni servicios adicionales.
• Se puede usar solo con un navegador web, y también se puede guardar y editar sin conexión.
• Inspiración
  • Mientras implementaba una función para hacer un POC (Proof of Concept) de ideas simples con un solo HTML, se dio cuenta de que era posible crear un archivo de documento que funcionara sin servicios ni software aparte.
  • Es el primer intento de crear un archivo de documento que funcione sin software como Notion o Word.
• Obtener una nota en blanco
  • Puedes ir a una página en blanco con el siguiente enlace: Página en blanco de Nash
• Nash es de código abierto y se puede modificar y usar libremente.

[xguru]

Nash, una nota que funciona como un único HTML

Lo habían publicado en Show GN y también lo subieron a Hacker News; recibió muchos votos. ¡Felicidades!

[GN⁺]

Comentarios de Hacker News

• Este proyecto me gusta muchísimo, y al ver el código fuente me parece genial que esté hecho con vanilla JS. Hoy en día se subestima cuánto se puede construir en apps web interactivas sin bibliotecas ni frameworks
  • A mí también me encanta la idea de hacer apps web locales simples en una sola página HTML. Hace poco visité un museo de ciencias con mi hijo y probamos un animador simple de stop motion. Decidí crear una app web como esa y la hice como una sola página HTML para copiarla a la laptop de mi hijo y que pudiera usarla sin internet. Me dio flojera escribir vanilla JS, así que usé React y un bundler. Todo quedó empaquetado en un solo archivo HTML. Tal vez algún día lo publique en Show HN
• Mucho del trabajo pesado lo hace esta propiedad simple pero poderosa. Sorprendentemente, parece que muchos desarrolladores no la conocen bien. Existe desde hace bastante tiempo
  • <div id="editor" contenteditable="true">
• Excelente trabajo
  • Me gustaría sugerir que, cuando la página se abra desde el disco local en el navegador, se abra automáticamente en modo de edición, y que cuando se publique en el sitio web de alguien y se acceda desde la web abierta, cambie a una vista normal de solo lectura (verificando si la dirección es http/https)
  • Claro:
    1. debería haber una forma de ignorar esto (un parámetro en la query string o un fragmento mágico en la URL), para que también se pueda ver en modo de edición
    2. debería haber una excepción para cierto dominio/prefijo de URL—básicamente keepworking.github.io (o https://keepworking.github.io/nash/)—para que el modo de edición también se active en ese sitio. Eso significa que, en lo personal, no habría que hacer nada especial para que la demo funcione (esta excepción debería poder modificarla el usuario, para que otros también puedan obtener el mismo comportamiento sin usar el truco del punto #1)
• Esto está genial. Estamos acostumbrados (o quizá solo yo) a escribir la parte de JS de un sitio web fuera del HTML real, así que al ver esto pensé: "wow, es una locura que esto sea posible solo con HTML". Y luego vi el código fuente y recordé otra vez que todo el JS está en las clásicas etiquetas script, y que eso sí se puede hacer
• Podrías hacer esto independiente y realmente portátil usando guardado "real" https://rpdillon.net/redbean-tiddlywiki-saver.html
• Ojalá los navegadores ofrecieran mejor soporte para apps web locales. Si los archivos locales pudieran acceder fácilmente al almacenamiento persistente, eso abriría muchas oportunidades para apps GUI rápidas y sencillas. Básicamente, lo opuesto a Electron
• ¡Bien hecho! Ya hubo una discusión sobre esta idea mencionando antes a TiddlyWiki https://news.ycombinator.com/item?id=43179649
• Llamarlo "nota" es un poco confuso. Yo lo llamaría una app web de archivo único editable y auto modificable
• Sugerencia: debería advertir cuando alguien intenta cerrar la página después de editar sin guardar. Considera agregar un handler onbeforeunload
• Hace poco intenté crear una wiki local con TiddlyWiki, pero fracasé miserablemente y terminé escribiendo el archivo HTML directamente
  • Parece que Nash simplifica mi trabajo, gracias
• Agrego esto para tener una tabla de contenido fácil https://codepen.io/cgurski/pen/qBrNrPo