Show HN: Nash - Catatan mandiri yang dibuat dengan satu file HTML

 (keepworking.github.io)
3 poin oleh GN⁺ 2025-03-16 | 2 komentar | Bagikan ke WhatsApp
  • Nash adalah catatan mandiri berbasis HTML yang dibuka dan diedit di browser web tanpa layanan tambahan
  • Catatan yang disimpan dapat diedit bahkan saat offline, dengan tujuan ditangani seperti file dokumen sebagai pengganti Notion atau Word
  • Dapat digunakan untuk membuat konten berbentuk dokumen HTML seperti blog statis, konten satu halaman, atau lampiran foto pizza di galeri
  • Jika dikirim lewat messenger, kontennya bisa dilihat lewat pratinjau, sehingga alur berbagi konten panjang seperti berbagi file juga dimungkinkan
  • Nash dirilis sebagai open source, dan halaman catatan kosongnya bisa dimodifikasi dan digunakan dengan bebas

Catatan HTML yang digunakan hanya dengan browser

  • Nash adalah catatan mandiri yang mengusung konsep note as HTML
  • Tidak memerlukan software atau layanan tambahan, dan bisa digunakan hanya dengan browser web yang umumnya sudah terpasang
  • Catatan yang disimpan mendukung pengeditan offline
  • Catatan kosong dapat dibuka di nash.html

Jenis konten yang bisa dibuat dan cara membagikannya

  • Dapat digunakan untuk membuat blog statis atau konten satu halaman
  • Juga memungkinkan penulisan konten seperti melampirkan foto yang ada di galeri
  • Jika dikirim lewat messenger, kontennya bisa dilihat lewat pratinjau sehingga dapat dimanfaatkan untuk berbagi konten panjang
  • Berawal dari pengalaman membuat POC ide sederhana dengan satu HTML, ini adalah upaya pertama untuk membuat file dokumen yang berjalan tanpa layanan atau software tambahan
  • Nash dirilis sebagai open source sehingga bisa dimodifikasi dan digunakan dengan bebas

Bacaan terkait

2 komentar

 
xguru 2025-03-16

Nash, catatan yang berjalan dengan satu file HTML

Anda juga mempostingnya ke Hacker News setelah sempat mengunggahnya di Show GN, dan ternyata mendapat banyak vote. Selamat!
 
GN⁺ 2025-03-16
Komentar Hacker News

  • Sebagian besar pekerjaan berat ditangani oleh satu atribut HTML yang sederhana tetapi ampuh, tapi tampaknya cukup banyak developer yang belum mengetahuinya
    Fitur ini sudah ada sejak lama

    • Satu baris ini mencakup hampir 90% implementasi awal Writely
      Writely adalah startup yang kemudian menjadi Google Docs, dan saya mengatakannya sebagai salah satu pendirinya
      Sisa 90%-nya adalah kode backend yang harus kami tulis untuk menyinkronkan hasil edit dengan benar, karena tiap browser punya bug implementasi contenteditable yang aneh dan berbeda-beda :-)
    • Benar-benar luar biasa. Sekitar 2016 pun saya masih banyak membuat situs kustom untuk UKM, lalu menyadari bahwa kebanyakan sebenarnya bisa dibuat dengan sesuatu seperti WP
      Namun (1) styling WP terlalu merepotkan dan saya tidak ingin memeliharanya, (2) saya tidak ingin bergantung pada fitur plugin dan upgrade WP, dan (3) saya ingin orang dengan hak akses berbeda bisa mengedit bagian berbeda dari halaman yang sama, yang secara praktis mustahil di sebagian besar CMS
      Jadi saya membuat CMS nyaris dari nol hanya berbasis contenteditable dan TinyMCE, lalu menempelkan tag itu pada area yang bisa diedit. Tentu saja sebelum menyimpan, backend memeriksa siapa boleh mengedit apa
      Saat klien atau staf login, mereka bisa langsung mengedit hanya area halaman yang memang mereka punya izin, dan CMS menampilkan garis tepi putus-putus pada bagian yang bisa diedit. Font dan warna disimpan di konfigurasi TinyMCE, jadi tidak perlu mengorek atau menyentuh HTML. Kalau mau, tetap bisa diubah langsung
      Bagi klien, ini terasa cukup ajaib. Mereka tidak perlu pergi ke halaman edit terpisah untuk melihat tampilan setelah perubahan; cukup mengedit langsung di tempat pada halaman lalu menyimpan, dan hasilnya langsung terpublikasi
      Sebagian besar situs ini masih berjalan 5–10 tahun kemudian, dan hampir tidak membutuhkan pemeliharaan dari pihak saya
    • Beberapa minggu lalu saya membuat demo live untuk konsep ini. Untuk sebuah fitur tersembunyi di HTML, ini benar-benar sederhana sekaligus kuat
      https://news.ycombinator.com/item?id=43179649
    • Ini bagus. Dulu saya pernah membuat editor PDF dengan mengonversi dokumen ke HTML lalu menambahkan contenteditable="true" pada div paling atas
    • Terbaca seperti, “Oh, ada sesuatu yang luar biasa di sini, namanya roda dan sudah ada sejak lama”
      Rasanya saya sudah mengerjakan ini 20 tahun lalu
      ContentEditable pertama kali diperkenalkan di IE 5.5 pada tahun 2000, dan pada 2007 sudah bisa digunakan di semua browser utama

  • Saya sangat menyukainya, dan setelah melihat source-nya, saya makin suka karena sedang ditulis dengan JavaScript murni
    Saat ini kemampuan membuat web app yang cukup interaktif tanpa library atau framework masih diremehkan
    Ide membuat web app lokal sederhana sebagai satu halaman HTML juga benar-benar bagus. Dulu saya pergi ke museum sains bersama anak saya dan mencoba animator stop-motion sederhana; saya lalu membuat web app serupa dan menyalinnya sebagai satu file HTML ke laptop anak saya, sehingga bisa dipakai tanpa internet
    Namun saya malas menulis JavaScript murni langsung, jadi saya membuatnya dengan React dan bundler, lalu hasil akhirnya dibundel menjadi satu file HTML. Mungkin suatu hari saya akan mengunggahnya ke Show HN

    • Dulu ada “Anda tidak perlu jQuery untuk melakukan itu”; sekarang kita perlu “Anda tidak perlu React, Vue, Svelte, atau semacamnya untuk melakukan itu”
      Dengan JavaScript murni biasa dan kemampuan yang memadai, hampir semuanya bisa dibuat lebih rapi dan lebih mudah dipelihara
      Setelah puluhan tahun memelihara buatan orang lain, desain yang begitu sederhana sampai terasa bodoh dari orang pintar mengalahkan kombinasi lainnya
    • Saya suka sisi Quarto yang ini. Ia bisa membuat file HTML mandiri yang dapat dibagikan kepada orang lain

  • Dibuat dengan baik
    Mungkin layak dipertimbangkan agar perilakunya berubah: ketika halaman dibuka dari disk lokal di browser, otomatis masuk mode edit; ketika dipublikasikan di situs web seseorang dan diakses dari web publik, menjadi tampilan baca-saja biasa. Cukup periksa apakah alamatnya http/https
    Tentu saja harus ada cara pintas seperti parameter query string atau fragmen URL ajaib agar tetap bisa dilihat dalam mode edit
    Juga perlu bisa memberi pengecualian untuk domain atau prefiks URL tertentu. Jika default-nya keepworking.github.io atau <https://keepworking.github.io/nash/> sehingga mode edit juga aktif di situs itu, tidak perlu melakukan hal tambahan untuk demo
    Akan lebih baik jika pengecualian ini bisa diubah oleh pengguna. Misalnya, orang lain juga bisa mendapatkan perilaku yang sama tanpa trik nomor 1

    • Saya sangat menyukai ide situs web yang kontennya bisa diedit dan disimpan secara lokal
      Secara pribadi menurut saya ini bagus, jadi saya berharap tetap dibiarkan seperti sekarang

  • Dengan https://rpdillon.net/redbean-tiddlywiki-saver.html, ini bisa dibuat menjadi aplikasi portabel mandiri yang melakukan penyimpanan “sungguhan”

    • Dulu saya membuat sesuatu yang mirip, dan bisa dilihat di https://original.littr.me
    • Akan bagus jika dibuat untuk menawarkan penyimpanan file
      Dengan begitu, fiturnya akan jauh lebih mendekati bookmark pribadi yang bisa dimiliki kapan pun diinginkan

  • Bagus. Pernah ada diskusi sebelumnya yang menyebut ide ini dan TiddlyWiki
    https://news.ycombinator.com/item?id=43179649

  • Saya berharap browser mendukung web app lokal dengan lebih baik
    Jika file lokal bisa mengakses penyimpanan persisten dengan mudah, akan terbuka banyak peluang untuk aplikasi GUI yang cepat dan mudah. Pada dasarnya ini arah kebalikan dari Electron

    • Bagaimana sebuah file bisa mengakses sesuatu? File hanyalah data, jadi tidak bisa melakukan apa pun

  • Keren. Mungkin karena saya sudah terlalu terbiasa menulis bagian JavaScript sebuah situs web di luar HTML sebenarnya, saat pertama melihatnya saya berpikir, “Wah, menarik juga ini bisa dilakukan hanya dengan HTML”
    Tapi setelah melihat source-nya, ternyata JavaScript ada di dalam tag script biasa, jadi saya kembali teringat bahwa memang bisa dilakukan seperti itu

    • HTML itu diremehkan
      Sebagian besar layar yang kita lihat setiap hari, bahkan editor kode sekalipun, adalah halaman HTML
    • Kalau menginginkan pemisahan atau version control, ini bukan cara yang wajib dipakai. Tapi jelas ini cara yang bisa dilakukan
      Yang lebih mengejutkan adalah orang-orang memakai framework lalu memasukkan hal-hal yang bahkan bukan JavaScript ke dalam HTML, dengan struktur di mana JavaScript eksternal ditempel belakangan atau harus di-hydrate. Rasanya seperti menggabungkan sisi buruk dari keduanya
      Saya cenderung berada di sisi sebaliknya: JavaScript menjadi pusatnya, dan selain index.html, tidak ada file berekstensi .html. Saya juga tidak memasukkan HTML ke dalam JavaScript. Semua partial template memakai .htm, dan di-hydrate sebelum ditambahkan ke DOM

  • Akan bagus kalau ada peringatan saat mencoba menutup halaman setelah mengedit tetapi belum menyimpan
    Layak mempertimbangkan untuk menambahkan handler onbeforeunload

    • Halaman web ini sekarang memang sudah punya peringatan saat ditutup, tapi secara umum itu saran yang bagus

  • Saya suka alat sederhana seperti ini. Beberapa waktu lalu saya membuat “homepage”/dashboard kustom sederhana: https://github.com/rcarmo/onepage-by-spec

    • Baru saja saya perbarui agar juga bisa “menyimpan”

  • Bagus sekali. Saya frustrasi karena makin banyak software yang menyembunyikan fitur-fitur yang sebenarnya mudah dijalankan secara lokal dan memang sudah lama bisa dilakukan di balik langganan, lalu memasang batasan-batasan artifisial
    Saya sedang membuat editor Markdown gratis yang hanya berjalan di dalam browser dan bisa mengedit file lokal melalui File System Access API yang baru. API ini hanya tersedia di browser berbasis Chromium
    https://zareith.github.io/chillmd/