Cuaderno HTML reactivo
(maxbo.me)-
Cuaderno HTML responsivo
- Se enfatiza la importancia de usar HTML como plataforma de publicación científica.
- Se plantea la posibilidad de usar archivos HTML en todas las etapas de exploración de datos, análisis, visualización y publicación.
- En lugar de usar diversas herramientas y plataformas existentes, HTML puede ofrecer un flujo de trabajo unificado.
-
Celdas
- Se explica cómo mostrar elementos de estilo y script en línea usando la clase CSS
echo. - Se crea un editor de código básico con el atributo
contenteditable. - Se configura para que los scripts se vuelvan a evaluar en el evento
blur.
- Se explica cómo mostrar elementos de estilo y script en línea usando la clase CSS
-
Biblioteca y runtime de Observable
- Se importan la biblioteca estándar y el runtime de Observable, y se enlazan a
window. - Mediante la función
cell, se definen celdas y se muestra la salida usando Observable Inspector.
- Se importan la biblioteca estándar y el runtime de Observable, y se enlazan a
-
Ejemplos de celdas
- Se declara una celda
counterque imprime un número cada segundo. - Se crea una celda
fizzbuzzque genera distintas salidas según el valor decounter. - Se usa la función
silentpara crear una celda que no muestra salida.
- Se declara una celda
-
Salida compleja
- Se usa Hypertext Literal para dar formato al valor de
counter. - Se usa Observable Plot para graficar el valor de
counter.
- Se usa Hypertext Literal para dar formato al valor de
-
TeX, Markdown, Graphviz
- Se generan salidas en varios formatos devolviendo elementos DOM desde las celdas.
- Se usan TeX, Markdown y Graphviz para crear fórmulas, tablas y gráficos.
-
Estado de las celdas
- Las celdas pueden devolver un Promise o un Error, y Observable Inspector aplica clases al
divexterno de la celda.
- Las celdas pueden devolver un Promise o un Error, y Observable Inspector aplica clases al
-
SQLite
- Se realizan consultas a la base de datos usando un cliente SQLite basado en WASM.
- Se visualiza la distribución de la duración de pistas mediante consultas SQL.
-
Python y R
- Se ejecuta código de Python y R con Pyodide y WebR, y se generan visualizaciones.
- Se crean gráficos con el módulo
sqlite3de Python y Matplotlib.
-
Entradas
- Se crean entradas con Observable Inputs y se conectan a las celdas.
- Se usa la función
viewofpara mostrar el elemento de entrada sobre la celda.
-
Mutabilidad
- Se usa la función
mutablepara crear objetos cuyo estado puede cambiar. - Cada vez que cambia el estado, se genera un nuevo valor de Generator.
- Se usa la función
-
Planes futuros
- Se planea integrar todo en una biblioteca y proporcionar documentación adecuada.
- Se decidió que el nombre de la biblioteca será
@celine/celine.
-
Infraestructura de diapositivas
- Se proporciona código para convertir el documento en una presentación.
- Se pueden recorrer las diapositivas con atajos de teclado.
1 comentarios
Comentarios en Hacker News
Estoy de acuerdo con el artículo en que HTML puede ser una base excelente para un cuaderno computacional. Sin embargo, no me gusta la forma en que está implementado. Observable es genial, pero se sale del JS estándar. Estoy desarrollando un sistema de HTML reactivo llamado Heximal, que se basa en plantillas HTML y elementos personalizados.
Creo que la usabilidad de este enfoque es terrible. No hay razón para preocuparse por elementos de estilo cuando haces análisis exploratorio de datos. Esa es la razón por la que los cuadernos de Jupyter son excelentes. Aun así, aplaudo la curiosidad y la implementación de ideas alternativas.
La demo con Python y SQLite fue especialmente impresionante. Es interesante que hayan iniciado el ciclo de edición a través de la web. El problema de la persistencia es similar al de TidlyWiki, y se puede evitar usando el sistema de archivos. El hecho de que no se pueda exportar desde scripts integrados necesita mejorar.
Pienso intentar pronto dar soporte a cuadernos HTML en Raku. Actualmente, las soluciones de cuadernos para Raku se basan en Jupyter o Mathematica.
Me gusta el formato de esta publicación. Lleva a resultados interesantes sin muchas dependencias ni frameworks. Puedes copiar los fragmentos de código dados y entenderlos paso a paso. Voy a escribir una entrada de blog exportándola a HTML usando programación literaria.
Es HTML reactivo, pero parece ser casi completamente JavaScript.
Intenté editar con pyodide, pero se bloqueó en mi teléfono y la página se volvió a cargar.
El autor está listo para responder preguntas.
Estoy tratando de alojar ejemplos de código en Raku y de construir algo similar para programación literaria. Existe un plugin de Raku para Jupyter Chatbooks, pero se siente poco natural que requiera Python. Sería bueno tener una capa de mensajería que pudiera conectarse a kernels de lenguaje remotos usando código del lado del servidor.
El cursor de dinosaurio de Windows XP me trajo muchos recuerdos.