रिएक्टिव HTML नोटबुक

 (maxbo.me)
1 पॉइंट द्वारा GN⁺ 2024-11-19 | 1 टिप्पणियां | WhatsApp पर शेयर करें

  • रिस्पॉन्सिव HTML नोटबुक

    • HTML को एक scientific publishing platform के रूप में इस्तेमाल करने के महत्व पर ज़ोर देता है.
    • यह संभावना दिखाता है कि HTML फ़ाइलों का उपयोग data exploration, analysis, visualization और publishing के हर चरण में किया जा सकता है.
    • अलग-अलग मौजूदा tools और platforms का उपयोग करने के बजाय, HTML के माध्यम से एकीकृत workflow प्रदान किया जा सकता है.

  • सेल

    • CSS class echo का उपयोग करके style और script elements को inline दिखाने का तरीका समझाता है.
    • contenteditable attribute का उपयोग करके एक basic code editor बनाया जाता है.
    • script को blur event पर दोबारा evaluate होने के लिए सेट किया जाता है.

  • Observable लाइब्रेरी और runtime

    • Observable standard library और runtime को import करके window से bind किया जाता है.
    • cell function के माध्यम से cell define किए जाते हैं, और Observable Inspector का उपयोग करके cell output दिखाया जाता है.

  • सेल उदाहरण

    • counter cell घोषित किया जाता है जो हर सेकंड एक संख्या output करता है.
    • fizzbuzz cell बनाया जाता है जो counter value के अनुसार अलग-अलग output बनाता है.
    • silent function का उपयोग करके ऐसा cell बनाया जाता है जो output नहीं दिखाता.

  • जटिल output

    • Hypertext Literal का उपयोग करके counter value को format किया जाता है.
    • Observable Plot का उपयोग करके counter value को plot में इस्तेमाल किया जाता है.

  • TeX, Markdown, Graphviz

    • cell में DOM elements return करके अलग-अलग फ़ॉर्मैट का output बनाया जाता है.
    • TeX, Markdown, Graphviz का उपयोग करके formulas, tables और graphs बनाए जाते हैं.

  • सेल state

    • cell से Promise या Error return किया जा सकता है, और Observable Inspector cell के बाहरी div element पर class apply करता है.

  • SQLite

    • WASM-आधारित SQLite client का उपयोग करके database query चलाई जाती है.
    • SQL query के माध्यम से track length distribution को visualize किया जाता है.

  • Python और R

    • Pyodide और WebR का उपयोग करके Python और R code चलाया जाता है, और visualization बनाए जाते हैं.
    • Python के sqlite3 module और Matplotlib का उपयोग करके plot बनाया जाता है.

  • इनपुट

    • Observable Inputs का उपयोग करके input बनाए जाते हैं और cells से जोड़े जाते हैं.
    • viewof function का उपयोग करके input element को cell के ऊपर दिखाया जाता है.

  • परिवर्तनशीलता

    • mutable function का उपयोग करके ऐसा object बनाया जाता है जिसकी state बदली जा सकती है.
    • हर बार state बदलने पर एक नया Generator value बनता है.

  • आगे की योजना

    • सारी सामग्री को एक library में एकीकृत करने और उचित documentation देने की योजना है.
    • library का नाम @celine/celine तय किया गया है.

  • स्लाइड इन्फ्रास्ट्रक्चर

    • document को slideshow में बदलने वाला code प्रदान किया जाता है.
    • keyboard shortcuts का उपयोग करके slides में नेविगेट किया जा सकता है.

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-11-19
Hacker News राय

  • मैं इस लेख से सहमत हूँ कि HTML कैलकुलेशन notebook के लिए एक शानदार आधार हो सकता है। हालांकि, इसका implementation तरीका पसंद नहीं आया। Observable बढ़िया है, लेकिन standard JS से अलग चला जाता है। मैं Heximal नाम का एक reactive HTML system विकसित कर रहा हूँ, जो HTML templates और custom elements पर आधारित है।

    • Heximal, HTMX, Tangle, Curvenote और Polymer के मिश्रण जैसा है। यह graphic editing और notebook use cases के लिए अच्छी तरह फिट होगा.

  • मुझे लगता है कि इस approach की usability बहुत खराब है। exploratory data analysis करते समय style elements की चिंता करने की कोई वजह नहीं होती। यही वजह है कि Jupyter notebook बेहतरीन है। फिर भी, जिज्ञासा और alternative ideas के implementation के लिए प्रशंसा करता हूँ।

  • Python और SQLite demo खास तौर पर प्रभावशाली थे। web के जरिए editing loop शुरू करना दिलचस्प लगा। persistence problem, TiddlyWiki जैसी है, और file system का इस्तेमाल करके इस समस्या से बचा जा सकता है। built-in script से export न कर पाना ऐसी चीज़ है जिसे बेहतर किया जाना चाहिए.

  • मैं जल्द ही Raku में HTML notebook को support करने की कोशिश करने वाला हूँ। अभी Raku के notebook solutions, Jupyter या Mathematica आधारित हैं.

  • मुझे इस पोस्ट का format पसंद आया। बहुत सारी dependencies और frameworks के बिना दिलचस्प नतीजों तक पहुँचता है। दिए गए code snippets को copy करके step-by-step समझा जा सकता है। मैं literate programming का इस्तेमाल करके HTML में export कर blog posts लिखूँगा.

  • यह reactive HTML है, लेकिन लगता है लगभग पूरी तरह JavaScript ही है.

  • मैंने pyodide editing आज़माई, लेकिन फ़ोन पर crash हो गया और page फिर से reload हो गया.

  • लेखक सवाल लेने के लिए तैयार है.

  • मैं Raku code examples को host और document करने के लिए ऐसा ही कुछ बनाने की कोशिश कर रहा हूँ। Jupyter Chatbooks के लिए Raku plugin है, लेकिन उसका Python की ज़रूरत होना अटपटा लगता है। अच्छा होगा अगर कोई message layer हो जो server-side code का इस्तेमाल करके remote language kernel से connect कर सके.

  • Windows XP dinosaur cursor ने बहुत सी यादें ताज़ा कर दीं.