Notebook HTML réactif

• Notebook HTML réactif

  • Souligne l’importance d’utiliser HTML comme plateforme de publication scientifique.
  • Présente la possibilité d’utiliser un fichier HTML à toutes les étapes de l’exploration de données, de l’analyse, de la visualisation et de la publication.
  • Au lieu d’utiliser divers outils et plateformes existants, HTML peut offrir un flux de travail unifié.

• Cellules

  • Explique comment afficher en ligne les éléments de style et de script à l’aide de la classe CSS echo.
  • Crée un éditeur de code de base avec l’attribut contenteditable.
  • Configure la réévaluation des scripts lors de l’événement blur.

• Bibliothèque et runtime Observable

  • Importe la bibliothèque standard et le runtime d’Observable, puis les lie à window.
  • Définit des cellules via la fonction cell et affiche leur sortie avec l’Inspector d’Observable.

• Exemples de cellules

  • Déclare une cellule counter qui affiche un nombre chaque seconde.
  • Crée une cellule fizzbuzz qui génère une sortie différente selon la valeur de counter.
  • Utilise la fonction silent pour créer une cellule qui n’affiche pas de sortie.

• Sorties complexes

  • Formate la valeur de counter à l’aide de Hypertext Literal.
  • Utilise la valeur de counter dans un graphique avec Observable Plot.

• TeX, Markdown, Graphviz

  • Produit des sorties dans divers formats en renvoyant des éléments DOM depuis les cellules.
  • Utilise TeX, Markdown et Graphviz pour créer des formules, des tableaux et des graphes.

• État des cellules

  • Les cellules peuvent renvoyer une Promise ou une Error, et l’Inspector d’Observable applique des classes au div externe de la cellule.

• SQLite

  • Exécute des requêtes de base de données avec un client SQLite basé sur WASM.
  • Visualise la distribution de la durée des pistes via des requêtes SQL.

• Python et R

  • Exécute du code Python et R avec Pyodide et WebR, puis génère des visualisations.
  • Crée des graphiques avec le module sqlite3 de Python et Matplotlib.

• Entrées

  • Crée des entrées avec Observable Inputs et les relie aux cellules.
  • Utilise la fonction viewof pour afficher les éléments d’entrée au-dessus des cellules.

• Mutabilité

  • Utilise la fonction mutable pour créer des objets dont l’état peut être modifié.
  • Génère une nouvelle valeur de Generator à chaque changement d’état.

• Feuille de route

  • Prévoit d’intégrer l’ensemble dans une bibliothèque et de fournir une documentation appropriée.
  • Le nom de la bibliothèque a été fixé à @celine/celine.

• Infrastructure de slides

  • Fournit du code pour transformer le document en diaporama.
  • Il est possible de naviguer dans les slides à l’aide de raccourcis clavier.

[GN⁺]

Avis Hacker News

• Je suis d’accord avec l’article selon lequel HTML peut constituer une excellente base pour un notebook de calcul. En revanche, je n’aime pas la manière dont c’est implémenté. Observable est sympa, mais s’écarte du JS standard. Je développe un système HTML réactif appelé Heximal, basé sur des templates HTML et des custom elements.

  • Heximal ressemble à un mélange de HTMX, Tangle, Curvenote et Polymer. Cela devrait très bien convenir aux cas d’usage d’édition graphique et de notebook.

• Je pense que l’ergonomie de cette approche est terrible. Quand on fait de l’analyse exploratoire de données, il n’y a aucune raison de se soucier des éléments de style. C’est précisément pour cela que les notebooks Jupyter sont excellents. Cela dit, j’applaudis la curiosité et la mise en œuvre d’idées alternatives.

• La démo Python et SQLite est particulièrement impressionnante. Il est intéressant d’avoir lancé la boucle d’édition via le web. Le problème de persistance est similaire à celui de TiddlyWiki, et on peut l’éviter en utilisant le système de fichiers. Le fait de ne pas pouvoir exporter depuis les scripts intégrés mérite d’être amélioré.

• Je vais bientôt tenter de prendre en charge les notebooks HTML en Raku. À l’heure actuelle, les solutions de notebook pour Raku reposent sur Jupyter ou Mathematica.

• J’aime le format de ce billet. Il mène à des résultats intéressants sans beaucoup de dépendances ni de frameworks. On peut copier les extraits de code fournis et les comprendre étape par étape. J’utiliserai la programmation lettrée pour exporter en HTML et rédiger des billets de blog.

• C’est du HTML réactif, mais on dirait que c’est presque entièrement du JavaScript.

• J’ai essayé d’éditer avec pyodide, mais sur mon téléphone cela plante et la page se recharge.

• L’auteur est prêt à répondre aux questions.

• J’essaie d’héberger et de documenter des exemples de code Raku, et de construire quelque chose de similaire pour la programmation lettrée. Il existe un plugin Raku pour Jupyter Chatbooks, mais le fait qu’il nécessite Python semble artificiel. Ce serait bien d’avoir une couche de messagerie capable de se connecter à des kernels de langages distants à l’aide de code côté serveur.

• Le curseur dinosaure de Windows XP fait remonter beaucoup de souvenirs.