Hacker News Reader

Comment by paulshen | Hacker News Reader

Hi all! Developer here before first coffee

I'm actively working on natto.dev and it really is in "preview". I'm excited about the future of programming and having a canvas to explore it on. still looking for "crazier" ideas - my favorite current one is dragging a column out of a table. https://twitter.com/_paulshen/status/1366801887341649924

The more I work on it, the more confident I am that there's something there. If you try it, I'd love to hear your feedback!

natto takes inspiration from a whole lot of work. non-exhaustive list: Yahoo Pipes, Excel, design tools (Figma), Observable, darklang, GToolkit, SmallTalk (repl-driven), http://joshuahhh.com/projects/pane/, http://www.lamdu.org/, https://futureofcoding.org/catalog/

As much as I love natto (the food), I'll likely rename it at some point. Pronunciation hit rate has been 0%

View on HN

This is a great project in a space that I've been playing around for a little while, fun to see it here!

I'm interested in hearing what you think are some of the more difficult problems or bugs you've come across during development. Did you hit any stumbling blocks around handling user code or integrating babel or the terminal? Do you have any insights about preventing errors or crashes in how you parse and eval user code? (My typical test of a while(true) loop crashes this system, but you're still in good company; it crashes replit, browser dev tools, observable and just about every other clientside execution tool I've come across. The most popular solution appears to be the loop timeout transformation.)

I think the examples pages do a better than usual job of demonstrating your system, in particular the ubiquity of one liners and your connections between them. Do you have ideas or responses about the classic "mess of wires" critique that graphical coding systems inevitably receive?

This is such a fun domain to think about, thanks for sharing your work!

Would you mind sharing other interesting examples of projects in this vein? Thanks!

The future of coding link in the parent has a large list of similarly spirited projects. I have scattered lists of similar projects but none handy or packaged well. I'll point you to the Ink&Switch article on end user programming. https://www.inkandswitch.com/end-user-programming.html And encourage you to check out personal sites of the people involved. The lively kernel is a programming kit project that's been around in various incarnations for a long time. https://lively-next.org/ The history of Eve (also linked by that future of coding page) is rich and full of references to other projects http://witheve.com/ VPRI similarly is a gateway to lots of history on personal computing http://www.vpri.org/ of particular interest to me there is the graphical language Nile and the meta compiler Ohm. http://worrydream.com/ Bret Victor's site is another gateway you may have heard of, and the researchers at Dynamicland are also well worth exploring. More future of coding resources https://github.com/d-cook/SomethingNew

For more actual environments you can use I recommend https://observablehq.com/, https://starboard.gg/ and emacs along with the links above.

The eval of natto maps surprisingly well to React's primitives (memoization, effects). This is pseudocode for the main eval https://gist.github.com/paulshen/9889b6067609f9053a0d56d4641...

The expression is only transformed with Babel if you enable the JSX React transform. Otherwise, it's just straight eval-ed by your browser. It's by no means battle-tested (eg while (true)). I haven't tested circular deps and am leaving that as a surprise for myself in a little bit. One thing that I do is run the canvas in an iframe on a different domain for security reasons.

Parsing is something I'm trying to avoid as much as possible but it's likely I'll add it. Referencing things as inputs[2] doesn't feel stable. May help with implicit deps and avoiding wires (see observablehq.com)

As for mess of wires, I'm still forming my opinion! I want to learn more about nodes-and-wire programming and why it isn't mainstream. The hunch I'm getting is that visual programming feels better to create than consume. The space is great for exploration but looking at someone else's canvas can be chaotic. Maybe there are features that can alleviate this (multiple views, autolayout). Look at this haha https://twitter.com/_paulshen/status/1321872376234082305

The Yahoo Pipes inspiration is obvious I think - which is a good thing. How do you judge the changes between your service and it? As far as I can see, you picked the code heavy approach, while Pipes was more "here is a block that does X". Natto feels to me more like programming, with Pipes being more about composing fixed functions to manipulate data. Conscious choice? Worth the complexity? Do I judge that wrong?

Yes, very intentional! I'm taking a JavaScript-first approach. I know JavaScript, you probably know JavaScript, and the browser runs JavaScript. It's not the perfect language but here we are. It has lot of nice qualities!

I consider natto a much?-code approach in realm of no/low-code. Instead of building abstractions (no-code), what if we built new environments and UI for code? I'm spending most time building UI and trying to keep execution abstractions as minimal as possible.

regarding the name, I got hung up on the description as a 'canvas' -- seems like leaves open to misinterpretation about what this is, opens confusion with html 'drawing' canvas etc. Suggest maybe utilizing something more about 'visual interface', visual programming playground etc

Was a big fan of Pipes back in the day, so good job / neat work otherwise!

This is super cool :)

It seems a little tough to visualize "flow" at first glance - some optional animations might be handy? e.g: when data comes in, animate a little bubble moving along the path, or little conveyor-belt style animations. An undo/redo feature (or more complex version control) would also be appreciated, I deleted a node and couldn't find a clear way to restore it.

I've wondered what a factorio coding interface would look like.. would love to see it.

Agree about undo/redo! on the todo list.

Great work! Question -- I love the grid/layout system you have. I'm wondering if there is an open-source library that helped you enable this? I'd like to use something similar for a personal tool. :) Thank you.

Thanks! I'm using plain React. I have a React onMouseDown React listener that attaches mousemove/mouseup listeners on the window. I round the numbers to the grid.

I've seen https://reactflow.dev/ but haven't used it myself. The core drag interaction is not much code but feel free to reach out on twitter. happy to share more!

Very nicely done! Keep up the good work. Any chance you are making it open source? Fine if you are not , but at least consider doing that if (!) you ever get fed up with it (wish everyone would do that if legally possible).

I love how clean the interface feels! Are you using a 3rd party tool for the foldable JSON editor, or did you build it yourself?

thanks! It's something I built myself. A React component that branches on value type and recurses on collections (arrays and objects).

I'm a very visual thinker, and this is very cool!

Thank you very much for making it!

This is so cool! I am very excited to give it a proper go!

Very cool site! You should be proud!

Reply on news.ycombinator.com