5 ms·

That spatial canvas organization is the closest thing I've ever seen to my dream coding space. The 1-dimensionality of a linear string of code always seemed lik

by pugio 6y ago

That spatial canvas organization is the closest thing I've ever seen to my dream coding space. The 1-dimensionality of a linear string of code always seemed like it ignored so much of the brain's processing abilities. I first noticed this when playing real time strategy games – I would always have a 2D mental model of where all my infrastructure was, my troops, various battles, etc. It was easy to keep track of, despite the complexity. I suspect many (most) programmers also have a rich mental model of their codebase, instantiated by reading and jumping around these mostly linear streams of text (our brains "fold" linear code like amino-acid sequences fold into 3d protein shapes). Mapping between mind-space and editor-space takes a lot of work, and is the source of many many bugs. Being able to map my higher dimensional space to a richer coding space – to group related functions and objects together, and maybe draw some boxes around them, or toggle various layers of meta-information (such as connections, code paths, etc.) would be amazing. Please keep doing this.

TeMPOraL 6y ago
Strongly agreed. I wanted to have this ever since I saw the video of "Code Bubbles" some decade ago. The problem with how we currently develop is, IMO, low control over screen space. We have files, which are strongly linearized. We can open more than one file side by side. Most tools provide some way to jump across references. Some tools provide these as inline inserts ("popouts"), instead of opening more files. But still, for any given thing you're focused on, most of the file you have on your screen is likely unrelated. I'd love to see an experiment around such code bubbles, but taken to further extremes. Make it easier to pop up bubbles with a single function, that can optionally be expanded to cover more - and also, importantly, shrunk down to cover less. Let me see and retain the graph of connections on the screen. And edit code directly in these bubbles. All on a densely packed, 2D slate, scrollable in both dimensions and fully navigable with a keyboard.
- Tcepsa 6y ago
  Such a thing might finally get me to switch away from Emacs for coding!
- eitland 6y ago
  > I'd love to see an experiment around such code bubbles, but taken to further extremes. Make it easier to pop up bubbles with a single function, that can optionally be expanded to cover more - and also, importantly, shrunk down to cover less. Let me see and retain the graph of connections on the screen. I also want the same for web sites. With the old Firefox extension API that should have been doable. (I caught myself considering Palemoon yesterday.)
paulshen 6y ago
Thanks! I wonder why spatial organizations haven't caught on in programming. Maybe the extra degrees of control have more costs than benefits? With rigid tiling, it's easier to switch between panes, layout, etc.. Here's an image of one of my darklang projects https://twitter.com/_paulshen/status/1321872376234082305/photo/1 https://twitter.com/_paulshen/status/1321872376234082305/pho... My conclusion was that it's an interesting experience but needs refinement for "power usage". What I want to explore is creating multiple views for the connections you care about. I imagine that would benefit from richer visualization than a list of text. like the ones you mention!
- codetrotter 6y ago
  I’ve been dreaming of organizing code in two dimensions too. Maybe even three dimensions. But at least two. My own thinking is that perhaps with higher resolutions like we have now, and very wide screen monitors becoming popular, more people might start to look into organizing code in more spatial dimensions. Your paned approach is very interesting. Seems more tidy than purely graphical node-based programming. Now I am wondering if your approach could also lend itself to debugging code. Where you’d step through the code and each time you step into a function in the debugger it would open a pane with the code of the function to the right. And same for breakpoints so if you ran your code to a breakpoint then it would show each function in a pane organized horizontally corresponding to the stack trace at the point where execution was stopped.
  - paulshen 6y ago
    re debugging: check out the video on Debugger Canvas for Visual Studio https://www.youtube.com/watch?v=3p9XUwIlhJg https://www.youtube.com/watch?v=3p9XUwIlhJg
    - codetrotter 6y ago
      Interesting, that thing you linked there works that exact way indeed!

by pugio 6y ago

TeMPOraL 6y ago

Strongly agreed. I wanted to have this ever since I saw the video of "Code Bubbles" some decade ago. The problem with how we currently develop is, IMO, low control over screen space. We have files, which are strongly linearized. We can open more than one file side by side. Most tools provide some way to jump across references. Some tools provide these as inline inserts ("popouts"), instead of opening more files. But still, for any given thing you're focused on, most of the file you have on your screen is likely unrelated. I'd love to see an experiment around such code bubbles, but taken to further extremes. Make it easier to pop up bubbles with a single function, that can optionally be expanded to cover more - and also, importantly, shrunk down to cover less. Let me see and retain the graph of connections on the screen. And edit code directly in these bubbles. All on a densely packed, 2D slate, scrollable in both dimensions and fully navigable with a keyboard.

Tcepsa 6y ago
Such a thing might finally get me to switch away from Emacs for coding!
eitland 6y ago
> I'd love to see an experiment around such code bubbles, but taken to further extremes. Make it easier to pop up bubbles with a single function, that can optionally be expanded to cover more - and also, importantly, shrunk down to cover less. Let me see and retain the graph of connections on the screen. I also want the same for web sites. With the old Firefox extension API that should have been doable. (I caught myself considering Palemoon yesterday.)

paulshen 6y ago

Thanks! I wonder why spatial organizations haven't caught on in programming. Maybe the extra degrees of control have more costs than benefits? With rigid tiling, it's easier to switch between panes, layout, etc.. Here's an image of one of my darklang projects https://twitter.com/_paulshen/status/1321872376234082305/photo/1 https://twitter.com/_paulshen/status/1321872376234082305/pho... My conclusion was that it's an interesting experience but needs refinement for "power usage". What I want to explore is creating multiple views for the connections you care about. I imagine that would benefit from richer visualization than a list of text. like the ones you mention!

codetrotter 6y ago
I’ve been dreaming of organizing code in two dimensions too. Maybe even three dimensions. But at least two. My own thinking is that perhaps with higher resolutions like we have now, and very wide screen monitors becoming popular, more people might start to look into organizing code in more spatial dimensions. Your paned approach is very interesting. Seems more tidy than purely graphical node-based programming. Now I am wondering if your approach could also lend itself to debugging code. Where you’d step through the code and each time you step into a function in the debugger it would open a pane with the code of the function to the right. And same for breakpoints so if you ran your code to a breakpoint then it would show each function in a pane organized horizontally corresponding to the stack trace at the point where execution was stopped.
- paulshen 6y ago
  re debugging: check out the video on Debugger Canvas for Visual Studio https://www.youtube.com/watch?v=3p9XUwIlhJg https://www.youtube.com/watch?v=3p9XUwIlhJg
  - codetrotter 6y ago
    Interesting, that thing you linked there works that exact way indeed!