5 ms·

Show HN: A simple JavaScript notebook in one file

36 points by timcwinkler 5y ago

timcwinkler 5y ago
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.
- timcwinkler 5y ago
  Thanks to freeCandy and the githack service, here is a link that can be directly used: https://rawcdn.githack.com/timcwinkler/javascript-notebook/95952f74873a942ad04bb128d0defc47bc11a25a/js+help.html 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.)
- timcwinkler 5y ago
  Have created a live link via github.io https://timcwinkler.github.io/js+help.html https://timcwinkler.github.io/js+help.html
shahbazac 5y ago
Please add a screenshot of what a rendered notebook looks like.
- timcwinkler 5y ago
  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.)
  - benjaminsuch 5y ago
    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.
    - timcwinkler 5y ago
      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/phi.png 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/js%2Bhelp-screenshot.png https://github.com/timcwinkler/javascript-notebook/blob/main... (Will the links work as I hoped? ... I am not disappointed.)
      - benjaminsuch 5y ago
        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.
        5y ago
timcwinkler 5y ago
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).
timcwinkler 5y ago
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.
- timcwinkler 5y ago
  The contents of github repository have evolved quite a bit, mostly in response to comments (making some of them a bit out-of-sync).
iddan 5y ago
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 https://code.visualstudio.com/api/extension-guides/notebook
kuu 5y ago
Congratulations, I like the idea, quite useful for learning JS I think ;)
- timcwinkler 5y ago
  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.
5cents 5y ago
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/ https://tiddlywiki.com/
- timcwinkler 5y ago
  Actually tiddlywiki was what made me realize that something like this was possible. Much more complex. The key thing was the ability to "save".
diveanon 5y ago
would it be accurate to describe a notebook as a gui for a repl?
- freeCandy 5y ago
  Pretty much. Notebooks can also be saved for running later. And since they also generally support markdown, it doubles as documentation.
  - timcwinkler 5y ago
    Well put. For simplicity, in js+help.html, not markdown, but plain HTML.
aliswe 5y ago
Unfortunately I've yet to grasp what a "notebook" is. ("Jupyter"??) I did try googling and reading about it.
- danfritz 5y ago
  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!
- shoemakersteve 5y ago
  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.
protoduction 5y ago
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 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://starboard.gg & https://github.com/gzuidhof/starboard-notebook https://github.com/gzuidhof/starboard-notebook [1]: https://github.com/gzuidhof/starboard-notebook/blob/master/src/cellTypes/javascript/precompileModule.ts https://github.com/gzuidhof/starboard-notebook/blob/master/s...
- timcwinkler 5y ago
  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.
  - timcwinkler 5y ago
    I recreated my mfib example as a Starboard notebook: https://starboard.gg/timcwinkler/mfib-nC0Am5G https://starboard.gg/timcwinkler/mfib-nC0Am5G Very nice looking! One difference from js+help.html, with it outputs are also saved.
- Fractal_HQ 5y ago
  I never get an email confirmation when I try to sign up for Starboard :( Edit: Suddenly got both!
timcwinkler 5y ago
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.

36 points by timcwinkler 5y ago

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.

timcwinkler 5y ago
Thanks to freeCandy and the githack service, here is a link that can be directly used: https://rawcdn.githack.com/timcwinkler/javascript-notebook/95952f74873a942ad04bb128d0defc47bc11a25a/js+help.html 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.)
timcwinkler 5y ago
Have created a live link via github.io https://timcwinkler.github.io/js+help.html https://timcwinkler.github.io/js+help.html

shahbazac 5y ago

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

timcwinkler 5y ago
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.)
- benjaminsuch 5y ago
  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.
  - timcwinkler 5y ago
    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/phi.png 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/js%2Bhelp-screenshot.png https://github.com/timcwinkler/javascript-notebook/blob/main... (Will the links work as I hoped? ... I am not disappointed.)
    - benjaminsuch 5y ago
      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.
      - 5y ago

timcwinkler 5y ago

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).

timcwinkler 5y ago

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.

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

iddan 5y ago

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 https://code.visualstudio.com/api/extension-guides/notebook

kuu 5y ago

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

timcwinkler 5y ago
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.

5cents 5y ago

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/ https://tiddlywiki.com/

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

diveanon 5y ago

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

freeCandy 5y ago
Pretty much. Notebooks can also be saved for running later. And since they also generally support markdown, it doubles as documentation.
- timcwinkler 5y ago
  Well put. For simplicity, in js+help.html, not markdown, but plain HTML.

aliswe 5y ago

Unfortunately I've yet to grasp what a "notebook" is. ("Jupyter"??) I did try googling and reading about it.

danfritz 5y ago
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!
shoemakersteve 5y ago
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.

protoduction 5y ago

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 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://starboard.gg & https://github.com/gzuidhof/starboard-notebook https://github.com/gzuidhof/starboard-notebook [1]: https://github.com/gzuidhof/starboard-notebook/blob/master/src/cellTypes/javascript/precompileModule.ts https://github.com/gzuidhof/starboard-notebook/blob/master/s...

timcwinkler 5y ago
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.
- timcwinkler 5y ago
  I recreated my mfib example as a Starboard notebook: https://starboard.gg/timcwinkler/mfib-nC0Am5G https://starboard.gg/timcwinkler/mfib-nC0Am5G Very nice looking! One difference from js+help.html, with it outputs are also saved.
Fractal_HQ 5y ago
I never get an email confirmation when I try to sign up for Starboard :( Edit: Suddenly got both!

timcwinkler 5y ago

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.