Notebook HTML reativo

 (maxbo.me)
1 pontos por GN⁺ 2024-11-19 | 1 comentários | Compartilhar no WhatsApp

  • Notebook HTML reativo

    • Enfatiza a importância de usar HTML como plataforma de publicação científica.
    • Apresenta a possibilidade de usar arquivos HTML em todas as etapas de exploração, análise, visualização e publicação de dados.
    • Em vez de usar várias ferramentas e plataformas existentes, o HTML pode oferecer um fluxo de trabalho unificado.

  • Células

    • Explica como exibir elementos de estilo e script inline usando a classe CSS echo.
    • Cria um editor de código básico com o atributo contenteditable.
    • Configura os scripts para serem reavaliados no evento blur.

  • Biblioteca e runtime do Observable

    • Importa a biblioteca padrão e o runtime do Observable e os vincula a window.
    • Define células por meio da função cell e exibe a saída das células com o Observable Inspector.

  • Exemplos de células

    • Declara uma célula counter para exibir um número a cada segundo.
    • Cria uma célula fizzbuzz para gerar saídas diferentes conforme o valor de counter.
    • Usa a função silent para criar células que não exibem saída.

  • Saídas complexas

    • Usa Hypertext Literal para formatar o valor de counter.
    • Usa Observable Plot para empregar o valor de counter em um gráfico.

  • TeX, Markdown, Graphviz

    • Gera saídas em vários formatos retornando elementos DOM a partir das células.
    • Usa TeX, Markdown e Graphviz para criar fórmulas, tabelas e gráficos.

  • Estado das células

    • As células podem retornar Promise ou Error, e o Inspector do Observable aplica classes ao elemento div externo da célula.

  • SQLite

    • Executa consultas a banco de dados usando um cliente SQLite baseado em WASM.
    • Visualiza a distribuição da duração das faixas por meio de consultas SQL.

  • Python e R

    • Executa código Python e R com Pyodide e WebR, e gera visualizações.
    • Usa o módulo sqlite3 do Python e Matplotlib para criar gráficos.

  • Entradas

    • Cria entradas com Observable Inputs e as conecta às células.
    • Usa a função viewof para exibir elementos de entrada acima das células.

  • Mutabilidade

    • Usa a função mutable para criar objetos com estado modificável.
    • Gera um novo valor de Generator sempre que o estado muda.

  • Planos futuros

    • Pretende integrar tudo em uma biblioteca e fornecer documentação adequada.
    • O nome da biblioteca foi definido como @celine/celine.

  • Infraestrutura de slides

    • Fornece código para transformar o documento em uma apresentação de slides.
    • É possível navegar pelos slides usando atalhos de teclado.

Leituras relacionadas

1 comentários

 
GN⁺ 2024-11-19
Comentários no Hacker News

  • Concordo com o artigo que diz que HTML pode ser uma ótima base para notebooks computacionais. Porém, não gosto da forma como isso foi implementado. Observable é legal, mas foge do JS padrão. Estou desenvolvendo um sistema de HTML reativo chamado Heximal, baseado em templates HTML e elementos personalizados.

    • Heximal é como uma mistura de HTMX, Tangle, Curvenote e Polymer. Deve se encaixar bem em casos de uso de edição gráfica e notebooks.

  • Acho a usabilidade dessa abordagem péssima. Ao fazer análise exploratória de dados, não há motivo para se preocupar com elementos de estilo. É por isso que os notebooks Jupyter são excelentes. Ainda assim, elogio a curiosidade e a implementação de uma ideia alternativa.

  • A demo com Python e SQLite foi particularmente impressionante. Foi interessante começar o ciclo de edição pela web. O problema de persistência é semelhante ao do TiddlyWiki, e pode ser evitado usando o sistema de arquivos. O fato de não ser possível exportar a partir de scripts embutidos precisa melhorar.

  • Pretendo em breve tentar dar suporte a notebooks HTML em Raku. Atualmente, as soluções de notebook em Raku são baseadas em Jupyter ou Mathematica.

  • Gosto do formato desta postagem. Ele leva a resultados interessantes sem muitas dependências e frameworks. Dá para copiar os trechos de código fornecidos e entendê-los passo a passo. Vou usar programação literária para exportar em HTML e escrever um post de blog.

  • É HTML reativo, mas parece ser quase inteiramente JavaScript.

  • Tentei editar com pyodide, mas no celular trava e a página recarrega.

  • O autor está pronto para receber perguntas.

  • Estou hospedando exemplos de código em Raku e tentando construir algo parecido para programação literária. Existe um plugin de Raku para Jupyter Chatbooks, mas precisar de Python parece artificial. Seria bom ter uma camada de mensagens que pudesse usar código no lado do servidor para se conectar a kernels remotos de linguagem.

  • O cursor de dinossauro do Windows XP trouxe muitas lembranças.