TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Reactive HTML Notebooks

361 点作者 california-og7 个月前

23 条评论

spankalee7 个月前
I strongly agree with the premise of the article - HTML could be a fabulous substrate for computational notebooks!<p>But I didn&#x27;t love the choices for how to implement it here. Dynamic, reactive HTML can be a lot more declarative than this, and Observable is cool, but strays from standard JS.<p>I started to build a reactive HTML system called Heximal that eventually will have notebook support, but it&#x27;s declarative, based on HTML templates and custom elements with a expression &#x2F; reactivity system (based on the TC39 Signals proposal) on top.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;elematic&#x2F;heximal">https:&#x2F;&#x2F;github.com&#x2F;elematic&#x2F;heximal</a><p>It&#x27;s a bit like a mashup of HTMX, Tangle, Curvenote, and Polymer. Or like HTML if were natively reactive.<p>I think it will lend it self to graphical editing and notebook user cases quite well.
评论 #42177179 未加载
评论 #42179149 未加载
simpaticoder7 个月前
Really cool! I particularly liked your Python and SQLite demos. I find it interesting that you <i>started</i> with a through-the-web (TTW) editing loop, calling it a quine. While valid, the key weakness is persistance: TidlyWiki does basically the same thing, but saving your work is a headache because basically you need another headless server process to persist anything.<p>Personally, when wanting to do something similar[0], started with persistance, and of course this means files. Plain text files I can edit with my programmer&#x27;s editor store and distribute using the file-system. This avoids the problem of having to recapitulate a programmers editor in the browser, which is non-trivial. In turn you have the problem of writing a fast server, but that is a rather fun problem to solve [1]. You side-stepped the problem by using basic content-editable sections, but it is a huge problem, second only to persistence.<p>One thing I see you face which I also faced is the fact you cannot export things from inside embedded scripts! This would be a nice feature to avoid mangling the global window object. (It would also, in my use case, make code generation easier.)<p>0 - Literate Markdown: <a href="https:&#x2F;&#x2F;simpatico.io&#x2F;lit.md" rel="nofollow">https:&#x2F;&#x2F;simpatico.io&#x2F;lit.md</a><p>1 - Reflector, what I call the small node server that transforms, zips and caches your markdown, with a filewatcher invalidator: <a href="https:&#x2F;&#x2F;simpatico.io&#x2F;reflector" rel="nofollow">https:&#x2F;&#x2F;simpatico.io&#x2F;reflector</a>
doug_durham7 个月前
With all due respect to the considerable thought and effort you put into this, the ergonomics of this approach are hideous. Why would I ever care about the styling elements when I&#x27;m just trying to do some exploratory data analysis. This is exactly why things like Jupyter notebooks excel. Regardless kudos to your curiosity and implementing alternate ideas.
评论 #42173662 未加载
评论 #42173477 未加载
评论 #42174221 未加载
mdhb7 个月前
The original author of Lit recently left Google and is working on something very similar to this AFAIK.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;elematic&#x2F;heximal">https:&#x2F;&#x2F;github.com&#x2F;elematic&#x2F;heximal</a>
评论 #42173651 未加载
zelphirkalt7 个月前
I enjoy the format of this post. Work from ground up to something interesting. Not tons of dependencies and framework here framework there blablabla hype.<p>To follow along it seems you can just copy paste the given snippets and understand step by step how it works. If I wrote something like this, I guess I would use literate programming in org-mode and export to HTML, to make it a blog post.<p>I still question fonts with built-in syntax highlighting.
squeegee_scream7 个月前
Reactive HTML but it’s almost entirely JavaScript, or am I misunderstanding something?
评论 #42172211 未加载
评论 #42173680 未加载
antononcube7 个月前
I will soon make attempts to support this kind of HTML notebook in&#x2F;for Raku. Right now Raku&#x27;s &quot;notebook solutions&quot; are Jupyter-based or Mathematica-based.
yasser_kaddoura7 个月前
I don&#x27;t get the argument for using web technologies to complicate this process. What does this added complexity solve? If anything, it slows the process and remove much needed features like auto-completions, snippets, and extensions. Also, it makes collaboration harder, since, most likely, others aren&#x27;t familiar with your setup.<p>You only need to setup one environment once and use it forever with minor incremental improvements as tech evolves.<p>If you are a n&#x2F;vim user, you can accomplish this by:<p>1- Data exploration: text -&gt; jupyter notebook via <a href="https:&#x2F;&#x2F;github.com&#x2F;untitled-ai&#x2F;jupyter_ascending">https:&#x2F;&#x2F;github.com&#x2F;untitled-ai&#x2F;jupyter_ascending</a> that uses jupytext. This way, you can efficiently edit and run code from your text editor.<p>2- Writing: you can use <a href="https:&#x2F;&#x2F;github.com&#x2F;lervag&#x2F;vimtex">https:&#x2F;&#x2F;github.com&#x2F;lervag&#x2F;vimtex</a> for LaTeX<p>On top of these, you can use tmux with tmuxp to open projects instantly.<p>You can have a seamless process with Emacs using org mode [1] [2] and&#x2F;or Auctex.<p>[1] <a href="https:&#x2F;&#x2F;sqrtminusone.xyz&#x2F;posts&#x2F;2021-05-01-org-python&#x2F;" rel="nofollow">https:&#x2F;&#x2F;sqrtminusone.xyz&#x2F;posts&#x2F;2021-05-01-org-python&#x2F;</a><p>[2] <a href="https:&#x2F;&#x2F;martibosch.github.io&#x2F;jupyter-emacs-universe&#x2F;" rel="nofollow">https:&#x2F;&#x2F;martibosch.github.io&#x2F;jupyter-emacs-universe&#x2F;</a>
评论 #42173984 未加载
评论 #42172922 未加载
评论 #42173284 未加载
agnishom7 个月前
I tend to agree with the premise of this article -- that [HTML is underutilized as a medium for disseminating scientific writing].<p>Some recent work related to this done by Will Crichton:<p><a href="https:&#x2F;&#x2F;willcrichton.net&#x2F;nota&#x2F;" rel="nofollow">https:&#x2F;&#x2F;willcrichton.net&#x2F;nota&#x2F;</a> <a href="https:&#x2F;&#x2F;willcrichton.net&#x2F;notes&#x2F;portable-epubs&#x2F;" rel="nofollow">https:&#x2F;&#x2F;willcrichton.net&#x2F;notes&#x2F;portable-epubs&#x2F;</a>
nichochar7 个月前
Notebooks are hot these days! We also shipped our own version of a TypeScript notebook[1] but it takes quite different sides of the tradeoff: we want to run backend node code, so unlike this or observable we&#x27;re not looking to run in the browser environment. Still, for many applications, this idea is a better take!<p>Kudos to the author.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;srcbookdev&#x2F;srcbook">https:&#x2F;&#x2F;github.com&#x2F;srcbookdev&#x2F;srcbook</a>
jasonjmcghee7 个月前
First of all, incredible. This is right up my alley.<p>I tried editing the pyodide one (which rendered fine before editing) on my phone (iphone 13 + brave) and it crashed and reloaded the page.
评论 #42172026 未加载
mbo7 个月前
Author here! Happy to take questions!
评论 #42176364 未加载
n0rdberg7 个月前
This reminds me of <a href="https:&#x2F;&#x2F;tiddlywiki.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;tiddlywiki.com&#x2F;</a>
louismerlin7 个月前
Ohh that Windows XP dinosaur cursor brought back so many memories!
评论 #42172525 未加载
评论 #42172074 未加载
librasteve7 个月前
This is awesome - I have been toying with building something like this so that i can host (raku) code examples and do literate programming. FWIW there IS a good raku plugin for Jupyter Chatbooks (<a href="https:&#x2F;&#x2F;raku.land&#x2F;zef:antononcube&#x2F;Jupyter::Chatbook" rel="nofollow">https:&#x2F;&#x2F;raku.land&#x2F;zef:antononcube&#x2F;Jupyter::Chatbook</a>), but it just seems kinda wrong for raku to need python to do this.<p>Can this example be widened to use server side code (I am not too bothered about syntax highlighting as maybe can make a font for that) - but it would be great to have some kind of message layer (like zmq in Jupyter) to connect to a remote language kernel perhaps using web sockets???<p>Raku does not (yet) target wasm so that option is out.
评论 #42172460 未加载
评论 #42178170 未加载
martyalain6 个月前
Awesome work. Thank you for sharing. Yes, web technologies coming with web browsers, HTML, CSS, DOM, JAVASCRIPT, PHP, .., can be used directly inside web browsers. This is how I use them to build a tiny web text editor coming with a programming language : <a href="http:&#x2F;&#x2F;lambdaway.fr" rel="nofollow">http:&#x2F;&#x2F;lambdaway.fr</a> . Your opinion would be appreciated.
Haleshot6 个月前
The article was a great read! I wonder if you know about marimo.io; it&#x27;s an open-source reactive notebook for Python which offers tons of great features. I have shifted my daily notebook usage (from what used to be colab and jupyter notebooks) to marimo notebooks over the past months.
britzsquad7 个月前
The cursor drives me nuts.
评论 #42173783 未加载
评论 #42178376 未加载
Ringz7 个月前
Awesome implementation!<p>&gt; 3. Export to .pdf for distribution<p>I was certain you were using something like <a href="https:&#x2F;&#x2F;pagedjs.org" rel="nofollow">https:&#x2F;&#x2F;pagedjs.org</a> or <a href="https:&#x2F;&#x2F;printcss.net" rel="nofollow">https:&#x2F;&#x2F;printcss.net</a> for the PDF export, but its just the SydJS or am I missing something?
jedimastert7 个月前
Wow, this is lovely! I&#x27;m rather inspired to make something with it
gyre0077 个月前
This breaks so bad for me on my phone :-(
cdaringe7 个月前
obervables move to modules makes a lot of this tenable. Im still using their hosted gui but this is inspiring me :)
revskill7 个月前
You made my weed.