Notebook HTML Reaktif

 (maxbo.me)
1 poin oleh GN⁺ 2024-11-19 | 1 komentar | Bagikan ke WhatsApp

  • Notebook HTML responsif

    • Menekankan pentingnya memanfaatkan HTML sebagai platform publikasi ilmiah.
    • Menunjukkan kemungkinan menggunakan file HTML di setiap tahap eksplorasi data, analisis, visualisasi, dan publikasi.
    • Alih-alih memakai beragam alat dan platform yang terpisah, HTML dapat menyediakan alur kerja yang terintegrasi.

  • Sel

    • Menjelaskan cara menampilkan elemen style dan script secara inline menggunakan kelas CSS echo.
    • Membuat editor kode dasar dengan atribut contenteditable.
    • Mengatur agar script dievaluasi ulang pada event blur.

  • Library dan runtime Observable

    • Mengimpor library standar dan runtime Observable lalu mengikatnya ke window.
    • Mendefinisikan sel melalui fungsi cell dan menampilkan output sel dengan Observable Inspector.

  • Contoh sel

    • Mendeklarasikan sel counter untuk menampilkan angka setiap detik.
    • Membuat sel fizzbuzz untuk menghasilkan output berbeda sesuai nilai counter.
    • Menggunakan fungsi silent untuk membuat sel yang tidak menampilkan output.

  • Output kompleks

    • Memformat nilai counter menggunakan Hypertext Literal.
    • Menggunakan nilai counter dalam plot dengan Observable Plot.

  • TeX, Markdown, Graphviz

    • Menghasilkan output dalam berbagai format dengan mengembalikan elemen DOM dari sel.
    • Menggunakan TeX, Markdown, dan Graphviz untuk membuat rumus, tabel, dan grafik.

  • Status sel

    • Sel dapat mengembalikan Promise atau Error, dan Inspector Observable akan menerapkan kelas pada elemen div luar sel.

  • SQLite

    • Menjalankan query basis data menggunakan klien SQLite berbasis WASM.
    • Memvisualisasikan distribusi durasi trek melalui query SQL.

  • Python dan R

    • Menjalankan kode Python dan R serta membuat visualisasi dengan Pyodide dan WebR.
    • Membuat plot menggunakan modul sqlite3 Python dan Matplotlib.

  • Input

    • Membuat input dan menghubungkannya ke sel dengan Observable Inputs.
    • Menampilkan elemen input di atas sel menggunakan fungsi viewof.

  • Mutabilitas

    • Menggunakan fungsi mutable untuk membuat objek yang statusnya dapat diubah.
    • Menghasilkan nilai Generator baru setiap kali status berubah.

  • Rencana ke depan

    • Berencana menggabungkan semuanya ke dalam sebuah library dan menyediakan dokumentasi yang memadai.
    • Nama library ditetapkan sebagai @celine/celine.

  • Infrastruktur slide

    • Menyediakan kode untuk mengubah dokumen menjadi slideshow.
    • Slide dapat dinavigasi menggunakan shortcut keyboard.

Bacaan terkait

1 komentar

 
GN⁺ 2024-11-19
Opini Hacker News

  • Saya setuju dengan artikel yang mengatakan bahwa HTML bisa menjadi dasar yang sangat baik untuk notebook komputasi. Namun, saya tidak suka cara implementasinya. Observable keren, tetapi menyimpang dari JS standar. Saya sedang mengembangkan sistem HTML reaktif bernama Heximal, yang berbasis pada template HTML dan elemen kustom.

    • Heximal seperti campuran HTMX, Tangle, Curvenote, dan Polymer. Ini tampaknya akan sangat cocok untuk penyuntingan grafis dan kasus penggunaan notebook.

  • Menurut saya, kegunaan pendekatan ini mengerikan. Saat melakukan analisis data eksploratif, tidak ada alasan untuk memikirkan elemen gaya. Itulah alasan Jupyter notebook unggul. Meski begitu, saya tetap memberi apresiasi atas rasa ingin tahu dan implementasi ide alternatif ini.

  • Demo Python dan SQLite sangat mengesankan. Menarik bahwa mereka memulai loop penyuntingan melalui web. Masalah persistensi mirip dengan TiddlyWiki, dan itu bisa dihindari dengan menggunakan sistem file. Fakta bahwa ekspor tidak bisa dilakukan dari skrip bawaan perlu diperbaiki.

  • Saya berencana segera mencoba mendukung notebook HTML di Raku. Saat ini, solusi notebook Raku berbasis Jupyter atau Mathematica.

  • Saya suka format tulisan ini. Tanpa banyak dependensi dan framework, hasilnya tetap menarik. Saya bisa menyalin potongan kode yang diberikan dan memahaminya langkah demi langkah. Saya akan menulis posting blog dengan menggunakan literate programming dan mengekspornya ke HTML.

  • Ini HTML reaktif, tetapi tampaknya hampir sepenuhnya JavaScript.

  • Saya mencoba mengedit pyodide, tetapi di ponsel saya itu crash dan halaman dimuat ulang.

  • Penulis siap menerima pertanyaan.

  • Saya ingin meng-host contoh kode Raku dan membangun sesuatu yang serupa untuk literate programming. Ada plugin Raku untuk Jupyter Chatbooks, tetapi terasa tidak alami karena membutuhkan Python. Akan bagus jika ada lapisan pesan yang bisa terhubung ke kernel bahasa jarak jauh menggunakan kode sisi server.

  • Kursor dinosaurus Windows XP membangkitkan banyak kenangan.