สมุดบันทึก HTML แบบรีแอ็กทีฟ

• สมุดบันทึก HTML แบบโต้ตอบ

  • เน้นย้ำความสำคัญของการใช้ HTML เป็นแพลตฟอร์มสำหรับการตีพิมพ์งานวิทยาศาสตร์
  • นำเสนอความเป็นไปได้ในการใช้ไฟล์ HTML ในทุกขั้นตอนของการสำรวจข้อมูล การวิเคราะห์ การทำภาพข้อมูล และการตีพิมพ์
  • แทนที่จะใช้เครื่องมือและแพลตฟอร์มหลากหลายแบบเดิม สามารถมอบเวิร์กโฟลว์แบบรวมศูนย์ผ่าน HTML ได้

• เซลล์

  • อธิบายวิธีแสดงองค์ประกอบสไตล์และสคริปต์แบบอินไลน์โดยใช้ CSS คลาส echo
  • สร้างตัวแก้ไขโค้ดพื้นฐานด้วยแอตทริบิวต์ contenteditable
  • ตั้งค่าให้สคริปต์ประเมินผลใหม่เมื่อเกิดอีเวนต์ blur

• ไลบรารีและรันไทม์ของ Observable

  • นำเข้าไลบรารีมาตรฐานและรันไทม์ของ Observable แล้ว bind เข้ากับ window
  • กำหนดเซลล์ผ่านฟังก์ชัน cell และใช้ Observable Inspector เพื่อแสดงผลลัพธ์ของเซลล์

• ตัวอย่างเซลล์

  • ประกาศเซลล์ counter เพื่อแสดงตัวเลขทุกวินาที
  • สร้างเซลล์ fizzbuzz เพื่อสร้างผลลัพธ์ที่ต่างกันตามค่า counter
  • ใช้ฟังก์ชัน silent เพื่อสร้างเซลล์ที่ไม่แสดงเอาต์พุต

• เอาต์พุตที่ซับซ้อน

  • ใช้ Hypertext Literal เพื่อจัดรูปแบบค่า counter
  • ใช้ Observable Plot เพื่อนำค่า counter ไปแสดงบนกราฟ

• TeX, Markdown, Graphviz

  • ส่งคืนองค์ประกอบ DOM จากเซลล์เพื่อสร้างเอาต์พุตได้หลายรูปแบบ
  • ใช้ TeX, Markdown และ Graphviz เพื่อสร้างสมการ ตาราง และกราฟ

• สถานะของเซลล์

  • เซลล์สามารถส่งคืน Promise หรือ Error ได้ และ Inspector ของ Observable จะนำคลาสไปใช้กับองค์ประกอบ div ภายนอกของเซลล์

• SQLite

  • ใช้ไคลเอนต์ SQLite แบบ WASM เพื่อรันคิวรีฐานข้อมูล
  • แสดงภาพการกระจายความยาวของแทร็กผ่านคิวรี SQL

• Python และ R

  • ใช้ Pyodide และ WebR เพื่อรันโค้ด Python และ R และสร้างภาพข้อมูล
  • ใช้โมดูล sqlite3 ของ Python และ Matplotlib เพื่อสร้างกราฟ

• อินพุต

  • ใช้ Observable Inputs เพื่อสร้างอินพุตและเชื่อมต่อกับเซลล์
  • ใช้ฟังก์ชัน viewof เพื่อแสดงองค์ประกอบอินพุตไว้เหนือเซลล์

• การเปลี่ยนแปลงค่าได้

  • ใช้ฟังก์ชัน mutable เพื่อสร้างอ็อบเจ็กต์ที่สามารถเปลี่ยนสถานะได้
  • สร้างค่า Generator ใหม่ทุกครั้งที่สถานะเปลี่ยนแปลง

• แผนในอนาคต

  • มีแผนจะรวมทุกอย่างเป็นไลบรารีและจัดทำเอกสารที่เหมาะสม
  • ชื่อของไลบรารีถูกกำหนดเป็น @celine/celine

• โครงสร้างพื้นฐานของสไลด์

  • มีโค้ดสำหรับแปลงเอกสารให้เป็นสไลด์โชว์
  • สามารถใช้คีย์ลัดบนแป้นพิมพ์เพื่อนำทางสไลด์ได้

[GN⁺]

ความเห็นจาก Hacker News

• เห็นด้วยกับบทความที่บอกว่า HTML สามารถเป็นพื้นฐานที่ยอดเยี่ยมสำหรับโน้ตบุ๊กเชิงคำนวณได้ แต่ไม่ชอบวิธีการนำไปใช้ Observable น่าสนใจ แต่เบี่ยงออกจาก JavaScript มาตรฐาน กำลังพัฒนาระบบ Reactive HTML ชื่อ Heximal ซึ่งอิงกับเทมเพลต HTML และ custom elements

  • Heximal เหมือนการผสมกันของ HTMX, Tangle, Curvenote และ Polymer น่าจะเหมาะกับกรณีใช้งานด้านการแก้ไขกราฟิกและโน้ตบุ๊ก

• คิดว่าการใช้งานของแนวทางนี้แย่มาก เวลา做การวิเคราะห์ข้อมูลเชิงสำรวจ ก็ไม่มีเหตุผลอะไรให้ต้องสนใจเรื่ององค์ประกอบด้านสไตล์ นี่คือเหตุผลที่ Jupyter Notebook ยอดเยี่ยม ถึงอย่างนั้นก็ขอชื่นชมความอยากรู้อยากเห็นและการลงมือทำไอเดียทางเลือกนี้

• เดโม Python และ SQLite น่าประทับใจเป็นพิเศษ น่าสนใจที่เริ่มวงจรการแก้ไขผ่านเว็บได้แล้ว ปัญหาเรื่อง persistence คล้ายกับ TiddlyWiki และสามารถหลีกเลี่ยงปัญหาได้ด้วยการใช้ระบบไฟล์ จุดที่ยังต้องปรับปรุงคือยัง export จากสคริปต์แบบฝังในตัวไม่ได้

• มีแผนจะลองทำความพยายามรองรับ HTML notebook ใน Raku เร็ว ๆ นี้ ตอนนี้โซลูชันโน้ตบุ๊กของ Raku ยังอิงกับ Jupyter หรือ Mathematica

• ชอบรูปแบบของโพสต์นี้ นำไปสู่ผลลัพธ์ที่น่าสนใจโดยไม่ต้องพึ่ง dependency และ framework จำนวนมาก สามารถคัดลอกโค้ดที่ให้มาเพื่อทำความเข้าใจทีละขั้นตอนได้ จะใช้ literate programming แล้ว export เป็น HTML เพื่อเขียนบล็อกโพสต์

• มันเป็น Reactive HTML ก็จริง แต่ดูเหมือนเกือบทั้งหมดจะเป็น JavaScript

• ลองแก้ไข pyodide แล้ว แต่บนมือถือแครชและหน้าเว็บรีโหลดใหม่

• ผู้เขียนพร้อมตอบคำถาม

• กำลังพยายามโฮสต์ตัวอย่างโค้ด Raku และสร้างอะไรคล้ายกันสำหรับ literate programming มีปลั๊กอิน Raku สำหรับ Jupyter Chatbooks อยู่ แต่การที่มันต้องใช้ Python ดูไม่เป็นธรรมชาติ น่าจะดีถ้ามีชั้นข้อความที่เชื่อมต่อกับ language kernel ระยะไกลได้โดยใช้โค้ดฝั่งเซิร์ฟเวอร์

• เคอร์เซอร์ไดโนเสาร์ของ Windows XP ทำให้นึกถึงความทรงจำมากมาย