[HN Gopher] Natto.dev - A Canvas for JavaScript
___________________________________________________________________
Natto.dev - A Canvas for JavaScript
Author : stigi
Score : 306 points
Date : 2021-04-13 10:11 UTC (12 hours ago)
(HTM) web link (natto.dev)
(TXT) w3m dump (natto.dev)
| verifex wrote:
| I really like how it looks. Here's my only ideas for improving
| it:
|
| * Some navigation buttons for zooming and panning quickly, maybe
| the mousewheel or a minimap?
|
| * I like how you can drag arrows around to different windows, I
| think the icon there isn't super intuitive but that's a minor
| gripe! :)
|
| I think one of the examples is broken, but dang you should add
| more examples, I like this kind of tool!
| paulshen wrote:
| Thanks for feedback!
|
| Mousewheel should pan! You can hold down spacebar to pan
| anywhere (also dragging). Clicking the 100% in the toolbar lets
| you zoom. Some more shortcuts here
| https://twitter.com/_paulshen/status/1381744260945379331
|
| Which example isn't working for you? and I plan to add more
| examples (maybe community?) and interactive tutorial in the
| future!
| verifex wrote:
| The spotify example didn't work for me. Oh man, I just
| noticed the zoom button at the top, silly me! :D
| paulshen wrote:
| For the spotify example, you'll have to fill out your own
| Spotify API tokens (see the two input panes - "api client
| *")
| xcambar wrote:
| This is incredibly useful, a lot of my peers will certainly love
| it for quick prototyping data manipulation and exploration. I
| know I will.
|
| This is a very clever/usable implementation of flow-based
| programming (FBP), which is dear to many people's heart in HN and
| out.
|
| FBP matches very easily the mental model of data flow and calls
| for quick mouse- or touch-based manipulation. Coming up with a
| usable UX for such paradigm is not trivial though, and your
| project seems on a good track.
|
| I can only encourage you to take the (harsh) criticism in this
| comments' section with the necessary distance, and keep working
| on the project, because it's very good! Well done!
| dvaun wrote:
| Flow-based programming is also what came to mind when I
| explored the site.
|
| For interested readers there is a decent article[0] and
| previous discussion[1] a few months back which discusses this
| topic.
|
| [0]: https://jpaulm.github.io/fbp/index.html
|
| [1]: https://news.ycombinator.com/item?id=25848542
| somishere wrote:
| amazing! thinking of something to use it for. v. minor bug, +/-
| keys zoom in and out even when editing a field :)
| paulshen wrote:
| Thanks! I'm having trouble reproing this. What field were you
| editing?
| wcerfgba wrote:
| Reminds me of Pure Data
| f-word wrote:
| While this is indeed amazing I think it suffers from not being a
| PWA.
|
| Being able to stuff it on its own little instance with no "back"
| to go to would allow people getting a cursory look at it to
| divert attention from the whole usability etiquette and
| concentrate on the thing itself, plus there might be some
| interesting gains in doing so too.
|
| One other thing I'd love to have is an interactive tutorial, I'd
| love to be able to follow some steps to understand the thing
| better.
| danpeddle wrote:
| Very neat, and seconding impression of reminding of observable,
| but much more freeform. Here's a dumb little demo of appending
| some divs to a dom element, with random heights.
|
| https://natto.dev/@dazld/7168773775bd401481366b7d62d14e8c
|
| It's quite fun to think about the restrictions of this - getting
| an animation loop going, for example.
| throwaway888abc wrote:
| This looks great!
| Fergusonb wrote:
| Wow, this is a really cool project.
|
| I'd really like to see something like this in browser developer
| tools someday.
| Robin_f wrote:
| Tried to play around with some JSX but unfortunately it keeps
| throwing the error that React is not defined.
|
| Looks cool though!
| pimterry wrote:
| The author published a working React & JSX example here that
| might be useful:
| https://natto.dev/@paul/1dcbeb7583624bf19d69b9942271a703.
|
| Some background on Twitter too:
| https://twitter.com/_paulshen/status/1380292393291841541
| itsbits wrote:
| It would be more awesome if we can convert a given code into
| different panels and link them automatically...
| mtm7 wrote:
| One thing I really appreciate about this is the design! It feels
| so calm and friendly - like a lot of care went into it.
|
| I love how everything snaps to the grid, and that it's achieved
| via CSS transforms.
| paulshen wrote:
| Thanks for the kind words :)
| verifex wrote:
| I've seen a number of tools like this recently, and I was
| wondering if there is a moniker for this type of tool? I saw one
| a few weeks ago that was all about JS widgets with code that you
| could tie together in pipelines. I remember Yahoo Pipes was a
| version of this tool, Node Red, there are a ton of them out
| there. Anyone have a name for this category of tool so I can look
| out for them when I see them?
| high_byte wrote:
| "Visual Scripting" perhaps. someone else mentioned "flow-based
| programming (FBP)"
| pineconewarrior wrote:
| Oh man this is cool! I wish someone would make one for Magento -
| feels like I have 100 files open just to change a tiny thing
| m1117 wrote:
| Neat!
| pjmlp wrote:
| Doesn't seem to work on Firefox, had to switch to Chrome for
| testing it, the new normal.
| yuchi wrote:
| Firefox user here, no problem at all.
| Hitton wrote:
| It's just in private browsing.
| ibdf wrote:
| Reminds of nodered but without the form fields, which might
| actually be better.
| the_gipsy wrote:
| For starters, this site's JavaScript hijacks history and won't
| let you navigate back.
| varispeed wrote:
| This fascinates me. I cannot use such layout, graphs etc. I can
| only analyse something if it is in a list - even if it is a
| complex algorithm - I will understand it fine. If it was exploded
| to a graph there is no way I'll get it. That leads me to a
| question - do you find yourself naturally understanding the
| information in a graph format and not getting lists or is it
| something that you learn to make sense of?
| lattay wrote:
| You might be based by the fact you learned programming and the
| associated "linear" thinking a long time ago... I am not very
| efficient reasoning on graphs, but I remember how HARD it was
| when I started programming and this does not seem even close.
| smusamashah wrote:
| Related https://nodered.org/
| voceboy521 wrote:
| i love that people are working on this stuff. for some reason it
| always fails. although i guess unreal blueprints are successful
| mbar84 wrote:
| Request: Zoom with Ctrl+Scroll.
|
| I imagine this might be quite useful to understand data-flow, but
| I worry that it would be tedious to manage the connections via
| positions during development.
|
| It would be cool to have an auto-format/auto-layout: - data
| flowing left to right - draw pipes like yahoo pipes used to -
| minimize crossing pipes.
|
| When in the programming loop, could the connections be
| established automatically via references? Name each output and
| then reference it somewhere else, which implicitly establishes
| the connection. Then click "auto-layout" (or just hit save) and
| as Steve would say "BOOM".
| Trufa wrote:
| This site's negativity/nit picking is sometimes incredible.
|
| This is an incredibly cool product that is by their own words
| "very alpha" and people jump to "OMG i know what hijacking is so
| I'll point it out" for attention. It's kind of a tired trope.
| This is obviously not an intentional hacking of users but rather
| a quite harmless bug in the implementation of an
| undo/permalinking feature.
|
| Great job to the devs and I hope I can find a utility for this
| product in the future, it's kind of a javascriptable excel
| concept, really cool.
| [deleted]
| nkmnz wrote:
| I'm sorry my comment raised these feelings. People share their
| projects on HN bc they want feedback. I think it's a rude thing
| to hijack the back button and a lot of people seem to share
| that sentiment. Rude behavior can be unintentional and even
| well intended, but the perception to others is just not great.
| I would consider this valuable feedback - it's better to get it
| here and fix the bug/misbehavior than keeping it even longer.
| mrtksn wrote:
| That's probably a meme at this point, another post on the front
| page has the exact same complaint :
| https://news.ycombinator.com/item?id=26791997
| wccrawford wrote:
| Warning people that they won't be able to get back to this site
| is not an overreaction.
| mcintyre1994 wrote:
| FWIW: In every desktop browser I've used and in Safari on
| iOS, long pressing the back button for a few seconds will
| bring up a list of recent history and allow you to get back
| when the button is hijacked by a page.
| [deleted]
| kingsloi wrote:
| I think I've automatically double-clicked the back button
| every back-button click since the back button could be
| hijacked, like years ago. Same with iOS. I try to use my
| iPhone less, so I uninstalled all apps, and access
| everything through Safari. It's the absolutely worst
| experience and I love it. Reddit is practically unusable
| unless you visit the `www.` site, but by far the worst
| thing is visiting a site that hijacks the back button.
| arethuza wrote:
| It looks like an innocent bug and to get back to HN takes me
| two clicks rather than one, not really something I can get
| too excited about, particularly when it showing something
| new.
| preommr wrote:
| This is not a bug, it's how web apps are supposed to work.
|
| The url should be updated to reference the current app view
| - this way you can copy the url for that particular
| resource and access it again by pasting with the same url.
|
| This is how it worked for headers when websites were just
| plain documents. It's a very powerful feature and is
| exactly what the web is about - sharing resources easily.
|
| Browsers have different ways of dealing with this like
| grouping items in the back history by domain, so that it's
| easy to leave the site back to page previous to the app
| session.
| The_rationalist wrote:
| Not ideal but long clicking on the back button show history.
| vanderZwan wrote:
| > _they won 't be able to get back to this site_
|
| I hate it when sites break the back button, but that's really
| not the same thing
| adamhp wrote:
| I'm picturing users instantaneously teleported to some
| mythical labyrinth where they're forced to fight their way
| back to Hacker News.
| FpUser wrote:
| Not to condone but I never rely on back button when using
| references in context of some longer material I am currently
| reading. I always right click and open in new window. So to
| me the problem mostly mute.
| sensanaty wrote:
| Fun fact, middle clicks and ctrl+left click will also open
| links in a new tab!
| FpUser wrote:
| Aware of that. Ctrl however makes me move my other hand
| and I am a lazy fart. Middle click requires significant
| effort on my mouse.
| nkmnz wrote:
| Please don't prevent people from leaving your site using browser
| navigation. It's impossible to get back to hackernews by swiping
| back on iOS.
| paulshen wrote:
| honest bug :) should be fixed!
| easton wrote:
| > Please don't complain about website formatting, back-button
| breakage, and similar annoyances. They're too common to be
| interesting. Exception: when the author is present. Then
| friendly feedback might be helpful.
|
| Given that this isn't "Show HN", please don't comment about
| this.
|
| https://news.ycombinator.com/newsguidelines.html
| moksly wrote:
| Page didn't load right on mobile and then I couldn't escape
| back to HN.
|
| Maybe you can blame Apple and Safari, and maybe I'm unfair, but
| if that's the first impression I get from something related to
| programming, well...
| sudoankit wrote:
| Exactly. Safari on MacOS has the same problem too.
| notum wrote:
| I don't believe that was intentional, he hijacks the back
| button so he can use it as an undo internally.
|
| It's just an unfortunate design choice which should have been
| avoided.
| nkmnz wrote:
| ,,he hijacks the back button so he can" - sounds pretty much
| intentional. No one would argue against an alert asking you
| if you want to leave without saving you work or sth similar,
| though.
| MartinodF wrote:
| You should complain to you browser vendor, not the website
| owner. Swiping back works just fine on Android.
| sdeframond wrote:
| Not on FF on my device...
| volgar1x wrote:
| Firefox 78.9.0esr on Debian Buster has the same problem
| nkmnz wrote:
| Maybe OP's implementation of overriding the default browser
| behavior on Android just sucks ;)
| js4ever wrote:
| Not in chrome/android on my side ... I had to long press the
| back arrow and select HN to come back here
| purplecats wrote:
| I'm surprised no one's mentioned Node.red yet, something this
| reminds me on and could see evolving as a competitor to.
| pruett wrote:
| This is killer! Awesome work.
| patates wrote:
| I need something like this but open-source so I can run it
| locally...
| ricklamers wrote:
| Although Orchest was built for Data Science the graph based
| visual editor could be what you want. And you can run it on
| your machine locally https://github.com/orchest/orchest
| [deleted]
| d--b wrote:
| I am building https://www.jigdev.com which runs observable hq
| as a canvas locally. It's not open source as of now but
| there'll be a always free version for it.
| patates wrote:
| Focus on the standard library (data tables, most useful excel
| functions, networking) and you'll have my money too! Very
| cool project!
| d--b wrote:
| That's what I like to hear! I agree: standard library needs
| more stuffing. Working on it!
| lgrebe wrote:
| Reminds me of observablehq.com
| bartq wrote:
| Another similar tool: https://www.youtube.com/watch?v=fQvWMoOjmQk
| mbar84 wrote:
| I think it would be very useful if there were a way to box other
| boxes, possibly designating specifc ones as the input/outputs of
| the big box.
|
| Bonus: if you collapse a box, it becomes a black box.
| paulshen wrote:
| yes! This is what I'm exploring next, composability. One idea
| is to make "big boxes" like you describe. The other approach is
| to make canvases have special input/output pane and the ability
| to reference/run other canvases.
| CuriousSkeptic wrote:
| Check out Tangible Functional Programming by Conal Elliott for
| an interesting take on this approach
|
| http://conal.net/papers/Eros/
| paulshen wrote:
| 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%
| tluyben2 wrote:
| 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).
| jp555 wrote:
| I'm a very visual thinker, and this is _very_ cool!
|
| Thank you very much for making it!
| onli wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Would you mind sharing other interesting examples of projects
| in this vein? Thanks!
| angleofrepose wrote:
| 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.
| paulshen wrote:
| 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/9889b6067609f9053a
| 0d56d4641...
|
| 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
| fwip wrote:
| 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 wrote:
| 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_ wrote:
| 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 wrote:
| 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!
| shepardrtc wrote:
| Very cool site! You should be proud!
| monkmartinez wrote:
| This is so cool! I am very excited to give it a proper go!
| trungdq88 wrote:
| Warning: this website hijack your browser back button
| mrtksn wrote:
| Very cool. A few years back I was trying to build something
| similar, my intention was to create a canvas for visually
| programming cryptocurrency bots. I thought that it would be cool
| to be able to follow the data transformation visually, so I
| focused on rate limiting on the code execution and expressive
| animations on changes to the data so that a human can visually
| follow the data flow and transformations(when I switch to bullet
| mode, a delay is introduced between each data transformation and
| a visual feedback indicates what changed).
|
| My prototype was not as neat and at some point I got convinced
| that it's actually easer to reason over algorithms when written
| in code and this visual style of programming works well as long
| as you deal with algorithms on very high level with no
| implementation detail considerations. When implementation details
| need to be part of the work, i.e. you need to think about how to
| fetch and transform a JSON file and match it with a CSV data it's
| actually easier to learn how to code and build your logic
| procedurally. Maybe people are not good at visually following
| large number of active objects and I think it's not only me
| because I'm sure that people get exponentially more confused with
| the addition of a new button or number to the scene.
|
| When you don't have a simple enforced structure like
| "instructions execute from top to bottom" the visual freedom
| becomes yet another thing that you need to think. I find that the
| most visual processing tools that are helpful are spreadsheets,
| they have a good and simple structure to follow for storing and
| representing data and powerful features enabling calculations on
| that data. Google Docs also has data fetching functionality(not
| sure about Excel), making it a very interesting data processing
| software.
| b1llyhoyle wrote:
| this is awesome, great job. by the way, i'm the creator of the
| API you're using for the nba example :)
___________________________________________________________________
(page generated 2021-04-13 23:01 UTC)