5 ms·

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 hav

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 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://joshuahhh.com/projects/pane/, http://www.lamdu.org/ http://www.lamdu.org/, https://futureofcoding.org/catalog/ 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%

shepardrtc 6y ago
Very cool site! You should be proud!
jp555 6y ago
I'm a very visual thinker, and this is very cool! Thank you very much for making it!
onli 6y ago
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?
- paulshen 6y ago
  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.
angleofrepose 6y ago
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!
- ikurei 6y ago
  Would you mind sharing other interesting examples of projects in this vein? Thanks!
  - angleofrepose 6y ago
    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 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/ 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/ http://witheve.com/ VPRI similarly is a gateway to lots of history on personal computing http://www.vpri.org/ http://www.vpri.org/ of particular interest to me there is the graphical language Nile and the meta compiler Ohm. http://worrydream.com/ 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 https://github.com/d-cook/SomethingNew For more actual environments you can use I recommend https://observablehq.com/ https://observablehq.com/, https://starboard.gg/ https://starboard.gg/ and emacs along with the links above.
monkmartinez 6y ago
This is so cool! I am very excited to give it a proper go!
tluyben2 6y ago
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).
fwip 6y ago
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.
- paulshen 6y ago
  I've wondered what a factorio coding interface would look like.. would love to see it. Agree about undo/redo! on the todo list.
keb_ 6y ago
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.
- paulshen 6y ago
  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/ 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!
bkyan 6y ago
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?
- paulshen 6y ago
  thanks! It's something I built myself. A React component that branches on value type and recurses on collections (arrays and objects).
ChrisArchitect 6y ago
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!

shepardrtc 6y ago

Very cool site! You should be proud!

jp555 6y ago

I'm a very visual thinker, and this is very cool! Thank you very much for making it!

onli 6y ago

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?

paulshen 6y ago
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.

angleofrepose 6y ago

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!

ikurei 6y ago
Would you mind sharing other interesting examples of projects in this vein? Thanks!
- angleofrepose 6y ago
  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 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/ 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/ http://witheve.com/ VPRI similarly is a gateway to lots of history on personal computing http://www.vpri.org/ http://www.vpri.org/ of particular interest to me there is the graphical language Nile and the meta compiler Ohm. http://worrydream.com/ 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 https://github.com/d-cook/SomethingNew For more actual environments you can use I recommend https://observablehq.com/ https://observablehq.com/, https://starboard.gg/ https://starboard.gg/ and emacs along with the links above.

monkmartinez 6y ago

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

tluyben2 6y ago

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

fwip 6y ago

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.

paulshen 6y ago
I've wondered what a factorio coding interface would look like.. would love to see it. Agree about undo/redo! on the todo list.

keb_ 6y ago

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.

paulshen 6y ago
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/ 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!

bkyan 6y ago

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?

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

ChrisArchitect 6y ago

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!