Show HN: A simple JavaScript notebook in one file | Hacker News Reader

Show HN: A simple JavaScript notebook in one file

github.com

36 pointstimcwinkler34 comments

This is a very simple Javascript notebook in one completely self-contained HTML file. It was inspired by the concept of Jupyter notebooks.

You can enter Javascript code and execute it in the browser, completely locally and possibly offline. The performance can be pretty good.

You can put in HTML documentation and also use HTML to provide UI for simple tools.

All you need is the js+help.html file, which contains basic documentation. You can clear out the notebook and save off various javascript experiments in different files.

I have mostly used this with Chrome. I have tried it with Firefox, and also on various OSs (Linux/Windows/Mac). The main compatibility issue is the handling of the downloading of files and how that varies in different contexts.

I just recently modified this to work better for the mobile (small screen) case. I have done testing after these changes, but not extensive testing.

It is easy to extract a CSS and a JS file that could be stored separately to make for very small notebook files.

I deliberately chose the "Unlicense". (I might claim copyright, but only to discourage someone else from claiming copyright.) The coding style could probably be improved, but I wanted not to use new features to maintain compatibility with older browsers.

I will try to respond to comments and questions, but may be a little slow.

Thanks to freeCandy and the githack service, here is a link that can be directly used:

https://rawcdn.githack.com/timcwinkler/javascript-notebook/9...

(There must be some resource limits, but I don't know what they are. Maybe there aren't limits? This is fast.)

Have created a live link via github.io

https://timcwinkler.github.io/js+help.html

Please add a screenshot of what a rendered notebook looks like.

If you download and open up the html file, it contains, what is essentially, a screenshot with explanations. (A very simple screenshot, but one you can extrapolate from.)

But that requires us downloading and opening it. A lot of effort if one just wants to take a quick look. A screenshot or demo would be better.

OK. I am afraid that I am not very knowledgeable about github, or YCombinator comments, but I'll give it a shot.

Here is a screen shot:

Simple screenshot:

https://github.com/timcwinkler/javascript-notebook/blob/main...

What you see if you load js+help.html:

https://github.com/timcwinkler/javascript-notebook/blob/main...

(Will the links work as I hoped? ... I am not disappointed.)

Don't get me wrong, I know that my comment sounds a little bit weird in the context of your project. I know that I could just rightclick the file, download and open it in the browser.

It's just more of a hint to you that, whenever you want to show something to the public, every extra action the user has to make, could lose you that user.

Keep in mind that "we" want to figure out in seconds if we want to spend more time looking at what you have created or not.

What I would wish that I could do is just make it so that there was a link to the HTML file in the Readme. Click it and there you go. My impression is that this is discouraged. (Am I wrong about that?)

You can do that with Github Pages, but I'm not too knowledgable. But I copied your code in an codesandbox:

https://ijlkq.csb.app/

Fork it if you want, I will delete it then (or on your request)

You can leave it if you wish. I'll have to learn a bit more about https://codesandbox.io/, it looks very useful.

Apparently the contents of the page were somehow mangled a bit. As a result it is not functional.

I ended up looking into Github Pages and it wasn't too hard to use. (The documentation makes it look harder that it actually is.)

Thank you, benjaminsuch, for that pointer.

Come on. Two clicks !== a lot of work

You can instead use githack[1] to quickly serve files directly from your repository.

[1]: https://raw.githack.com

Another very useful pointer. Thank you.

I wonder what "Files are automatically optimized" means, exactly?

Have tried this out.

(See comment https://news.ycombinator.com/item?id=27452226)

Very cool, I'm building something similar (with a larger scope) [0] (it also has one-file exports, but it does load stuff from a CDN so it's not as contained to a single file as this project is.)

If you're looking for next steps: You can actually run user code using `import`, which will allow your users to import code from external websites using familiar `import {x} from "https://some-url.com/bla.js"` syntax at the top of cells. Here's how:

   const exportsInCell = await import(URL.createObjectURL(new Blob([USER_CODE], { type: "text/javascript" })));

And with some transpilation you can support top-level await in eval [1]. Just some pointers!

[0]: https://starboard.gg & https://github.com/gzuidhof/starboard-notebook

[1]: https://github.com/gzuidhof/starboard-notebook/blob/master/s...

You project looks very interesting. Shared idea of programming in the browser, but much more ambitious.

I have experimented with async/await with js+help.html.

The import pointer is very interesting, thank you for that.

My impulse is to try to write a function to import a code from a URI.

I recreated my mfib example as a Starboard notebook:

https://starboard.gg/timcwinkler/mfib-nC0Am5G

Very nice looking!

One difference from js+help.html, with it outputs are also saved.

I never get an email confirmation when I try to sign up for Starboard :(

Edit: Suddenly got both!

Unfortunately I've yet to grasp what a "notebook" is. ("Jupyter"??)

I did try googling and reading about it.

Exactly this! I have no clue what it means and googeling for its gives me "live editor". To me a notebook (in terms of computers) is a small laptop.

HN enlighten us!

Jupyter notebooks are a very popular development environment for data science and related fields because they provide a great tight feedback loop for experimentation and iteration. Essentially the main difference from a typical dev environment is that there are "cells" of code that you can run individually, and the program "state" is persistent. There's definitely a better way to explain it, because that doesn't sound very big, but it really is a game changer for a lot of workflows. They run python by default, but there are integrations for many other languages. Over the last few years, many alternatives and versions from different companies have been released with various differences and features (i.e. Google Colab, Kaggle, ObservableHQ for a JS version with lots of extra features, and tons of others I'm sure).

So at this point people have come to call this concept in general a "notebook". Basically a development environment with cells where you can add markup and HTML and stuff.

Hope that helped a bit.

I realize now that I should have included more of an explanation of what "notebook" signified and should have included the initial comment in the Readme (or some version of it). I had the impulse to keep things absolutely as simple as possible.

I learned about how to make it easy to try a webpage from github which is useful.

I don't really have a lot invested in the result of this, but I have the feeling that people who are really trying to make a product must find that the spotlight of YC moves awfully fast.

I wonder if there needs to be a website that is a catalog of interesting projects (organized by purpose). Looking at github, it appears that it contains some lists of projects on github.

It remainds me very much of tiddlywiki [1], which is not as simple and limits the js hackability as default (for security), bu is also a self-contained html+js file

[1] https://tiddlywiki.com/

Actually tiddlywiki was what made me realize that something like this was possible. Much more complex. The key thing was the ability to "save".

As I said this is all very simple, the one thing that makes it a little bit more interesting is the save button. You can do some computations/calculations and save the results (by downloading) into the same file or a new file.

I have even modified the javascript code of the page itself and saved it away (not really directly supported).

Well I had this idea that with github, you are sort of forced to download HTML pages, so there you are. Clearly this is not very satisfactory.

I have added screenshots, a download link, and a more interesting example (mfib).

Will look into ways to make everything even easier.

The contents of github repository have evolved quite a bit, mostly in response to comments (making some of them a bit out-of-sync).

It would have been great to have something like this but as a VSCode Notebook Plugin [1] [1]: https://code.visualstudio.com/api/extension-guides/notebook

Congratulations, I like the idea, quite useful for learning JS I think ;)

I've had the idea that this could be useful for an introduction to programming. All you need is a browser. It also could encourage a more "literate" style of programming, much like Jupyter notebooks.

would it be accurate to describe a notebook as a gui for a repl?

Pretty much. Notebooks can also be saved for running later.

And since they also generally support markdown, it doubles as documentation.

Well put.

For simplicity, in js+help.html, not markdown, but plain HTML.

Reply on news.ycombinator.com