paulshen

Thanks! I'm curious why you want to install it. All the Python runs in your browser and never leaves it. Do you want to use it offline? Or is it a matter of trust? (I understand!)

Sorry! I meant "spacial interface" referring to how panes are laid out on a 2D canvas.

good ol' React and TypeScript! The Python magic here is Pyodide.

I love that phrase "drag in X". It's closer to how we interact with objects in the real world. Coding should feel more like that!

Thanks! Visual programming tools are a big inspiration.

For art browser, I assume you're referring to the JavaScript example https://natto.dev/example/f33b7f5924634fb687a90d85ed03f289

Hi all! I've been working on natto.dev, a spatial environment for JavaScript. With all the buzz around PyScript, I found Pyodide and got it working inside natto! It's a beautiful piece of software.

This is a tech demo of what a Python spatial notebook could look like. It's a stripped down version of natto (eg interactive outputs, multiplayer) so please check that out if this interests you!

Thanks! Check out https://natto.dev and go through the tutorial and examples. I'm happy to answer questions or give you a tour as well. Reach out @_paulshen on twitter!

Oops already posted here https://news.ycombinator.com/item?id=30875259

Announcement tweet: https://twitter.com/mihai/status/1509718311403241474 Technical blog post: https://blog.persistent.info/2022/03/blog-post.html Github repo: https://github.com/mihaip/infinite-mac

I'm not a big "note-taker" but Dendron has stuck with me mainly because of vscode. I spend so much time in vscode already and the familiar UI is a big plus. I also use the vscode vim extension which works just as well with Dendron.

Here's the main file of the tictactoe implementation.

https://gist.github.com/paulshen/b04db68c754f73e693cd29a481c...

`update` is similar to React's render function except here it's being called on every interaction (eg mousemove tick) and redrawing the entire screen from scratch! The code runs so fast that this is fine from a perf standpoint. Note that egui has a reactive or continuous mode. You can rerender everything from scratch 60fps (continuous mode) and it'd be fine in most cases.

I investigated egui early this year. It's a very good library! For me, getting used to immediate mode UI was a change from being used to DOM / React-style UI. imgui works well for a lot but it struggles with complex layouts, eg flexbox. This is acknowledged in egui's README

Couple things I built with egui: https://artifacts.bypaulshen.com/rust-gui/code-render/ https://artifacts.bypaulshen.com/rust-gui/tictactoe/

got it! should be fixed

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

For the spotify example, you'll have to fill out your own Spotify API tokens (see the two input panes - "api client *")

Thanks for the kind words :)

Thanks! I'm having trouble reproing this. What field were you editing?

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

Agree about undo/redo! on the todo list.

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!

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!

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

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.

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.

honest bug :) should be fixed!

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%

Thanks! I agree - this is probably functionally inferior to using your calendar.

I built this as a small open-source Supabase demo and something I'd personally use.

Hi! I'm excited to share a preview of natto, a spatial UI for writing and manipulating JavaScript. It's kinda like a mix of JS playground, script runner, API client, JSON viewer, and datavis tool. Here's a demo video https://twitter.com/_paulshen/status/1370404362325876737

If you're interested, I recommend checking out the tutorial https://natto.dev/tutorial to get a tour of the features. The "coolest" feature right now is the ability to drag a column header out of a table pane.

I get quite excited thinking about the "future of code" and think natto explores some ideas in that direction. I'm actively working on this (have lot of ideas) so stay tuned for updates. thanks!

Nice that's a cool idea!

re debugging: check out the video on Debugger Canvas for Visual Studio https://www.youtube.com/watch?v=3p9XUwIlhJg

Good feedback. Thank you! This iteration explores my question that while navigation history is a tree, what do people want on the screen at the same time? Personally, I find myself usually wanting 2-3 units of information on the screen (most often, a caller and callee). That's why panes are draggable from one column to another. The navigation is semantic but the panes are unopinionated.

Iteration 01 https://artifacts.bypaulshen.com/code-explorer/01/?snapshot=... implements exactly what you suggest with showing connections. Closing a pane will recursively close children. Also references are tied to the pane (point 4)

5. yes! I'm going through iterations of exploration but will consider these important points when/if productionizing.