HNHacker News
TopNewBestAskShowJobs

timcwinkler

21 karma · joined June 9, 2021

submissionscomments
timcwinkler··on Show HN: A simple JavaScript notebook in one file
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.

timcwinkler··on Show HN: A simple JavaScript notebook in one file
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.

timcwinkler··on Show HN: A simple JavaScript notebook in one file
Have created a live link via github.io

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

timcwinkler··on Show HN: A simple JavaScript notebook in one file
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.

timcwinkler··on Show HN: A simple JavaScript notebook in one file
The contents of github repository have evolved quite a bit, mostly in response to comments (making some of them a bit out-of-sync).
timcwinkler··on Show HN: A simple JavaScript notebook in one file
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.)

timcwinkler··on Show HN: A simple JavaScript notebook in one file
Well put.

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

timcwinkler··on Show HN: A simple JavaScript notebook in one file
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)

timcwinkler··on Show HN: A simple JavaScript notebook in one file
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··on Show HN: A simple JavaScript notebook in one file
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.
timcwinkler··on Show HN: A simple JavaScript notebook in one file
Actually tiddlywiki was what made me realize that something like this was possible. Much more complex. The key thing was the ability to "save".
timcwinkler··on Show HN: A simple JavaScript notebook in one file
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··on Show HN: A simple JavaScript notebook in one file
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.

timcwinkler··on Show HN: A simple JavaScript notebook in one file
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?)
timcwinkler··on Show HN: A simple JavaScript notebook in one file
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··on Show HN: A simple JavaScript notebook in one file
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.)

timcwinkler··on Show HN: A simple JavaScript notebook in one file
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.)
timcwinkler··on Show HN: A simple JavaScript notebook in one file
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.