Show HN: Nash - एक ही HTML फ़ाइल से बना standalone note

• Nash एक HTML-based standalone note है, जिसे किसी अलग service के बिना web browser में खोलकर edit किया जाता है
• सेव किए गए notes को offline भी modify किया जा सकता है, इसलिए इसका लक्ष्य Notion या Word के बजाय उन्हें document file की तरह संभालने का तरीका देना है
• इसे static blog, single-page content, या gallery से pizza photos attach करने जैसे HTML document-style content बनाने में इस्तेमाल किया जा सकता है
• Messenger से भेजने पर preview में देखा जा सकता है, इसलिए लंबे content को file की तरह share करने का flow भी संभव है
• Nash को open source के रूप में रिलीज़ किया गया है, और blank note page को स्वतंत्र रूप से modify करके इस्तेमाल किया जा सकता है

---

सिर्फ browser से लिखे जाने वाले HTML notes

• Nash एक standalone note है जो note as HTML को लक्ष्य बनाता है
• इसके लिए अलग software या service की जरूरत नहीं है; आम तौर पर installed web browser ही काफी है
• सेव किए गए notes offline editing support करते हैं
• blank note nash.html पर खोला जा सकता है

बनाए जा सकने वाले content और sharing के तरीके

• इसे static blog या single-page content बनाने में इस्तेमाल किया जा सकता है
• gallery में मौजूद photos attach करने वाले content लिखना भी संभव है
• Messenger से भेजने पर इसे preview में देखा जा सकता है, इसलिए लंबे content share करने में उपयोगी हो सकता है
• यह single HTML से simple ideas का POC करने के अनुभव से शुरू हुआ, और अलग service या software के बिना चलने वाली document file बनाने का पहला प्रयास है
• Nash को open source के रूप में रिलीज़ किया गया है, इसलिए इसे freely modify और use किया जा सकता है

[xguru]

Nash, एक standalone नोट जो एक single HTML फ़ाइल पर चलता है

आपने इसे Show GN पर पोस्ट किया था और अब Hacker News पर भी पोस्ट किया है, जहाँ आपको बहुत सारे votes मिले हैं। बधाई हो!

[GN⁺]

Hacker News की टिप्पणियां

• भारी काम का एक बड़ा हिस्सा एक सरल लेकिन शक्तिशाली HTML attribute से संभल जाता है, लेकिन लगता है हैरानी की बात है कि बहुत-से developers को इसकी जानकारी नहीं है
  यह feature काफी समय से मौजूद है

  • इसी एक लाइन ने Writely के शुरुआती implementation का लगभग 90% हिस्सा बना दिया था
    Writely वही startup था जो बाद में Google Docs बना, और मैं यह इसके founders में से एक के तौर पर कह रहा हूं
    बाकी 90% backend code था जो इसलिए लिखना पड़ा क्योंकि हर browser में contenteditable implementation bugs अलग-अलग अजीब थे, ताकि edits को सही तरह sync किया जा सके :-)
  • सच में कमाल है। 2016 के आसपास भी मैं छोटे-मझोले businesses के लिए बहुत-सी custom sites बना रहा था, और समझ आ गया था कि उनमें से ज्यादातर WP जैसी चीज़ से हो सकती हैं
    लेकिन (1) WP styling बहुत झंझट वाली थी और मैं उसे maintain नहीं करना चाहता था, (2) plugin features और WP upgrades पर निर्भर नहीं रहना चाहता था, और (3) अलग-अलग access permissions वाले लोगों को उसी page के अलग-अलग हिस्से edit करने देना चाहता था, जो ज्यादातर CMS में व्यवहारिक रूप से असंभव था
    इसलिए मैंने contenteditable और TinyMCE के आधार पर लगभग scratch से CMS बनाया, और editable areas पर वही tag लगाया। बेशक save करने से पहले backend में check होता था कि कौन क्या edit कर सकता है
    जब client या staff login करता, तो वह अपने अधिकार वाले page areas को सीधे edit कर सकता था, और CMS editable हिस्सों पर dotted border दिखाता था। fonts और colors TinyMCE settings में save रहते थे, इसलिए HTML में खोजबीन या छेड़छाड़ करने की जरूरत नहीं होती थी। चाहें तो सीधे छेड़ भी सकते थे
    clients को यह काफी जादू जैसा लगता था। बदलाव के बाद कैसा दिखेगा यह देखने के लिए किसी अलग edit page पर जाने की जरूरत नहीं, page पर ही in-place editing करके save करते ही तुरंत deploy हो जाता था
    इनमें से ज्यादातर sites 5–10 साल बाद आज भी चल रही हैं, और मेरी तरफ से maintenance लगभग न के बराबर चाहिए
  • कुछ हफ्ते पहले मैंने इस concept का live demo बनाया था। HTML की hidden feature के हिसाब से यह सचमुच बहुत सरल और शक्तिशाली है
    https://news.ycombinator.com/item?id=43179649
  • यह अच्छा है। पहले मैंने documents को HTML में convert करके top-level div में contenteditable="true" डालकर PDF editor बनाया था
  • पढ़ने में ऐसा लगता है जैसे “ओह, यहां एक जबरदस्त चीज़ है, इसका नाम पहिया है और यह काफी समय से मौजूद है”
    लगता है 20 साल पहले भी मैंने इससे काम किया था
    ContentEditable पहली बार 2000 में IE 5.5 में आया था, और 2007 तक सभी major browsers में इस्तेमाल किया जा सकता था

• मुझे बहुत पसंद आया, और source देखकर यह जानकर और अच्छा लगा कि यह pure JavaScript में लिखा जा रहा है
  आजकल यह बात कम आंकी जाती है कि libraries या frameworks के बिना भी काफी interactive web apps बनाई जा सकती हैं
  सरल local web apps को single HTML page के रूप में बनाने का idea भी सच में अच्छा है। पहले मैं अपने बच्चे के साथ science museum गया था, वहां एक simple stop-motion animator इस्तेमाल किया, और फिर वैसी ही web app बनाकर एक single HTML file के रूप में बच्चे के laptop पर copy कर दी, ताकि वह internet के बिना भी इस्तेमाल कर सके
  हालांकि मुझे pure JavaScript सीधे लिखना आलस भरा लगा, इसलिए मैंने React और bundler से बनाया, और output एक single HTML file में bundle हो गया। शायद किसी दिन Show HN पर डालूं

  • जैसे पहले “यह करने के लिए jQuery की जरूरत नहीं” था, अब “यह करने के लिए React या Vue, Svelte जैसी चीज़ों की जरूरत नहीं” चाहिए
    साधारण pure JavaScript और ठीक-ठाक skill से लगभग सब कुछ ज्यादा साफ और maintainable बनाया जा सकता है
    दशकों तक दूसरों की बनाई चीज़ें maintain करने के बाद, समझ आया कि किसी smart व्यक्ति का बनाया मूर्खता की हद तक सरल design बाकी combinations से बेहतर होता है
  • Quarto की यह बात मुझे पसंद है। यह standalone HTML file बनाता है जिसे लोगों के साथ share किया जा सकता है

• अच्छा बनाया है
  जब page को local disk से browser में खोला जाए तो वह अपने आप edit mode में चला जाए, और जब किसी की website पर publish होकर public web से access हो तो सामान्य read-only view बन जाए—ऐसा behavior बदलने पर भी विचार किया जा सकता है। बस address http/https है या नहीं, यह check करना होगा
  बेशक edit mode में देखने के लिए query string parameter या magic URL fragment जैसा कोई bypass तरीका भी होना चाहिए
  साथ ही कुछ domains या URL prefixes के लिए exceptions भी होने चाहिए। default keepworking.github.io या <https://keepworking.github.io/nash/> रखकर उस site पर भी edit mode चालू कर दें, तो demo के लिए अलग से कुछ करना नहीं पड़ेगा
  अगर यह exception user-modifiable हो तो और बेहतर होगा। उदाहरण के लिए, दूसरे लोग भी trick 1 के बिना वही behavior पा सकेंगे

  • ऐसी website का idea, जिसमें content edit करके locally save किया जा सके, सच में अच्छा है
    व्यक्तिगत रूप से मुझे यह शानदार लगता है, इसलिए मैं चाहूंगा कि इसे अभी जैसे है वैसे ही रहने दें

• https://rpdillon.net/redbean-tiddlywiki-saver.html इस्तेमाल करें तो इसे “असली” save वाली self-contained portable app बनाया जा सकता है

  • मैंने पहले कुछ ऐसा ही बनाया था, और इसे https://original.littr.me पर देखा जा सकता है
  • अच्छा होगा अगर यह file save करने का prompt दे
    तब यह जब चाहें personal bookmarks रखने की सुविधा के काफी करीब हो जाएगा

• अच्छा है। इस idea और TiddlyWiki का जिक्र करने वाली पहले की discussion थी
  https://news.ycombinator.com/item?id=43179649

  • इस क्षेत्र में मेरी पसंदीदा चीज़ों में से एक Feather Wiki है: https://feather.wiki/

• काश browsers local web apps को बेहतर support करते
  अगर local files persistent storage तक आसानी से पहुंच सकतीं, तो तेज और आसान GUI apps के लिए कई मौके खुल सकते थे। असल में यह Electron की उलटी दिशा होगी

  • कोई file किसी चीज़ तक कैसे पहुंच सकती है? file तो बस data है, वह कुछ कर ही नहीं सकती

• शानदार। शायद मैं वेबसाइट के JavaScript हिस्से को असली HTML के बाहर लिखने का इतना आदी हो गया हूँ कि पहली बार देखने पर सोचा, “वाह, यह सिर्फ HTML से किया जा सकता है, कमाल है”
  लेकिन source देखने पर पता चला कि एक साधारण script टैग के अंदर JavaScript है, और मुझे फिर याद आया कि ऐसा भी किया जा सकता है

  • HTML को कम आंका जाता है
    हम रोज़ जो ज़्यादातर स्क्रीन देखते हैं, यहाँ तक कि code editor भी, HTML page ही होते हैं
  • अगर आपको अलग-अलग हिस्सों में बाँटना या version control चाहिए, तो यह तरीका जरूरी नहीं है। लेकिन यह निश्चित रूप से संभव तरीका है
    और भी हैरानी की बात यह है कि लोग frameworks इस्तेमाल करते हुए HTML के अंदर ऐसी चीज़ें डालते हैं जो JavaScript भी नहीं होतीं, और ऐसी संरचना इस्तेमाल करते हैं जहाँ बाहरी JavaScript बाद में जुड़ती है या hydration करनी पड़ती है। यह दोनों तरफ की बुराइयों को मिलाने जैसा लगता है
    मैं उलटी दिशा के ज़्यादा करीब हूँ: JavaScript केंद्र में है, और index.html को छोड़कर कोई .html extension वाली file नहीं है। JavaScript के अंदर भी HTML नहीं डालता। सभी partial templates .htm हैं, और DOM में जोड़े जाने से पहले उन्हें hydrate करता हूँ

• अगर edit करने के बाद बिना save किए page बंद करने की कोशिश करने पर warning आए, तो अच्छा होगा
  onbeforeunload handler जोड़ने पर विचार किया जा सकता है

  • अभी इस webpage में भी बंद करते समय warning है, लेकिन आम तौर पर यह अच्छा सुझाव है

• ऐसे सरल tools मुझे पसंद हैं। कुछ समय पहले मैंने एक छोटा custom “homepage”/dashboard बनाया था: https://github.com/rcarmo/onepage-by-spec

  • अभी इसे “save” करने लायक भी update कर दिया

• वाकई अच्छा है। ऐसे software बहुत बढ़ गए हैं जो आसानी से local में किए जा सकने वाले, और पहले से किए जाते रहे कामों को subscription के पीछे छिपा देते हैं और artificial limits लगा देते हैं; यह frustrate करता है
  मैं एक free Markdown editor बना रहा हूँ जो केवल browser के अंदर चलता है और नए File System Access API के ज़रिए local files edit कर सकता है। यह API केवल Chromium-based browsers में उपलब्ध है
  https://zareith.github.io/chillmd/