Reaktives HTML-Notebook

• Reaktives HTML-Notebook

  • Betont die Bedeutung der Nutzung von HTML als Plattform für wissenschaftliches Publizieren.
  • Zeigt das Potenzial von HTML-Dateien, in allen Phasen von Datenexploration, Analyse, Visualisierung und Publikation eingesetzt zu werden.
  • Statt viele verschiedene Werkzeuge und Plattformen zu verwenden, kann HTML einen integrierten Workflow ermöglichen.

• Zellen

  • Erklärt, wie sich Stil- und Skriptelemente mit der CSS-Klasse echo inline anzeigen lassen.
  • Erstellt mit dem Attribut contenteditable einen einfachen Code-Editor.
  • Richtet Skripte so ein, dass sie beim blur-Ereignis erneut ausgewertet werden.

• Observable-Bibliothek und Runtime

  • Importiert die Observable-Standardbibliothek und Runtime und bindet sie an window.
  • Definiert Zellen über die Funktion cell und zeigt deren Ausgabe mit dem Observable Inspector an.

• Zellbeispiele

  • Deklariert eine counter-Zelle, die jede Sekunde eine Zahl ausgibt.
  • Erstellt eine fizzbuzz-Zelle, die je nach Wert von counter unterschiedliche Ausgaben erzeugt.
  • Verwendet die Funktion silent, um Zellen ohne sichtbare Ausgabe zu erstellen.

• Komplexe Ausgaben

  • Formatiert den Wert von counter mit Hypertext Literal.
  • Verwendet Observable Plot, um den counter-Wert in einem Plot darzustellen.

• TeX, Markdown, Graphviz

  • Erzeugt verschiedene Ausgabeformate, indem Zellen DOM-Elemente zurückgeben.
  • Nutzt TeX, Markdown und Graphviz, um Formeln, Tabellen und Diagramme zu erzeugen.

• Zellstatus

  • Zellen können ein Promise oder einen Error zurückgeben, und der Observable Inspector weist dem äußeren div-Element der Zelle Klassen zu.

• SQLite

  • Führt Datenbankabfragen mit einem WASM-basierten SQLite-Client aus.
  • Visualisiert über SQL-Abfragen die Verteilung von Track-Längen.

• Python und R

  • Führt mit Pyodide und WebR Python- und R-Code aus und erzeugt Visualisierungen.
  • Erstellt mit dem Python-Modul sqlite3 und Matplotlib Plots.

• Eingaben

  • Erstellt Eingaben mit Observable Inputs und verknüpft sie mit Zellen.
  • Zeigt mit der Funktion viewof Eingabeelemente oberhalb der Zellen an.

• Veränderlichkeit

  • Erstellt mit der Funktion mutable Objekte, deren Zustand verändert werden kann.
  • Erzeugt bei jeder Zustandsänderung einen neuen Generator-Wert.

• Ausblick

  • Plant, alles in einer Bibliothek zusammenzuführen und passende Dokumentation bereitzustellen.
  • Der Name der Bibliothek wurde auf @celine/celine festgelegt.

• Slide-Infrastruktur

  • Stellt Code bereit, um Dokumente in eine Slideshow umzuwandeln.
  • Die Slides lassen sich mit Tastaturkürzeln navigieren.

[GN⁺]

Hacker-News-Kommentare

• Ich stimme dem Artikel zu, dass HTML eine hervorragende Grundlage für Rechen-Notebooks sein kann. Die Art der Umsetzung gefällt mir jedoch nicht. Observable ist cool, weicht aber von Standard-JS ab. Ich entwickle gerade ein reaktives HTML-System namens Heximal, das auf HTML-Templates und Custom Elements basiert.

  • Heximal ist wie eine Mischung aus HTMX, Tangle, Curvenote und Polymer.
  • Es dürfte gut zu Anwendungsfällen wie Grafikbearbeitung und Notebooks passen.

• Ich halte die Nutzbarkeit dieses Ansatzes für furchtbar. Bei explorativer Datenanalyse gibt es keinen Grund, sich um Style-Elemente zu kümmern. Genau deshalb sind Jupyter-Notebooks so gut. Trotzdem Anerkennung für die Neugier und für die Umsetzung einer alternativen Idee.

• Die Python- und SQLite-Demo war besonders beeindruckend. Interessant ist, dass die Editier-Schleife über das Web gestartet wurde. Das Persistenzproblem ähnelt TiddlyWiki, und mit dem Dateisystem könnte man es vermeiden. Dass man aus eingebetteten Skripten nicht exportieren kann, muss verbessert werden.

• Ich werde bald versuchen, HTML-Notebooks in Raku zu unterstützen. Derzeit basieren Rakus Notebook-Lösungen auf Jupyter oder Mathematica.

• Mir gefällt das Format dieses Beitrags. Es führt ohne viele Abhängigkeiten und Frameworks zu interessanten Ergebnissen. Man kann die gegebenen Code-Schnipsel kopieren und sie Schritt für Schritt verstehen. Ich würde literate programming verwenden, nach HTML exportieren und daraus einen Blogbeitrag machen.

• Es ist zwar reaktives HTML, scheint aber fast vollständig aus JavaScript zu bestehen.

• Ich habe versucht, pyodide zu bearbeiten, aber auf dem Handy ist es abgestürzt und die Seite wurde neu geladen.

• Der Autor ist bereit, Fragen zu beantworten.

• Ich versuche, ein Raku-Codebeispiel zu hosten und etwas Ähnliches für literate programming zu bauen. Es gibt ein Raku-Plugin für Jupyter Chatbooks, aber dass dafür Python nötig ist, wirkt unnatürlich. Es wäre schön, eine Message-Layer zu haben, die über serverseitigen Code eine Verbindung zu einem entfernten Sprach-Kernel herstellen kann.

• Der Dinosaurier-Cursor aus Windows XP weckt viele Erinnerungen.