7 ms·

I've been thinking about how we can make devtools smarter and more fun to use. We write code with text but programs contain a lot of structure that we can take

I've been thinking about how we can make devtools smarter and more fun to use. We write code with text but programs contain a lot of structure that we can take advantage of! If you're on mobile, you can find a video here https://twitter.com/_paulshen/status/1346583010691321856 https://twitter.com/_paulshen/status/1346583010691321856 This demo is an iteration of my code browser exploration where jump to definition always opens in a column to the right. I use TypeScript's language server to get the program's semantics which allows features such as showing only the item (eg function) that you're jumping to. Here is another iteration with a canvas where you can drag panes around. https://artifacts.bypaulshen.com/code-explorer/01/?snapshot=9feb3d1a-b41e-44e6-adff-9b522414dc0b https://artifacts.bypaulshen.com/code-explorer/01/?snapshot=... I have more ideas/iterations coming. My goal is to productionize this for real use :)

n0w 6y ago
This is pretty cool. One thing I noticed is that Cmd-Clicking a variable only shows where it was defined. I think it would be pretty useful if you could also see the places it was changed.
- deleted 6y ago
  [deleted]
- Garlef 6y ago
  Or: Don't change a variable once it was defined. This way there's only one relevant location in codebase. Makes things much easier. But agreed. Would be a nice feature for the cases where this can not be avoided.
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!
forgotmypw77 6y ago
thank you for sharing your work. please consider accessibility to nojs users, perhaps by sharing plaintext website or screenshots. i am using device where enabling js is not an option, and feel left out by current presentation. good luck to you in your work, sounds very exciting! twitter recently changed their accessibility policy to not allow nojs clients at all, whereas before one only had to click through a dialog each tweet.
- akalsz 6y ago
  Try nitter: https://nitter.snopyta.org/_paulshen/status/1346583010691321856 https://nitter.snopyta.org/_paulshen/status/1346583010691321... Or setting your user agent to Googlebot/2.1 for Twitter should work as well[1]. [1]: https://raw.githubusercontent.com/tats/w3m/master/doc/README.siteconf https://raw.githubusercontent.com/tats/w3m/master/doc/README...
sethjgore 6y ago
amazing work! the canvas iteration is way better! it has spatiality and that's always an added benefit
antonzabirko 6y ago
How are these different from multiplexed vim setups?

n0w 6y ago

This is pretty cool. One thing I noticed is that Cmd-Clicking a variable only shows where it was defined. I think it would be pretty useful if you could also see the places it was changed.

deleted 6y ago
[deleted]
Garlef 6y ago
Or: Don't change a variable once it was defined. This way there's only one relevant location in codebase. Makes things much easier. But agreed. Would be a nice feature for the cases where this can not be avoided.

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!

forgotmypw77 6y ago

thank you for sharing your work. please consider accessibility to nojs users, perhaps by sharing plaintext website or screenshots. i am using device where enabling js is not an option, and feel left out by current presentation. good luck to you in your work, sounds very exciting! twitter recently changed their accessibility policy to not allow nojs clients at all, whereas before one only had to click through a dialog each tweet.

akalsz 6y ago
Try nitter: https://nitter.snopyta.org/_paulshen/status/1346583010691321856 https://nitter.snopyta.org/_paulshen/status/1346583010691321... Or setting your user agent to Googlebot/2.1 for Twitter should work as well[1]. [1]: https://raw.githubusercontent.com/tats/w3m/master/doc/README.siteconf https://raw.githubusercontent.com/tats/w3m/master/doc/README...

sethjgore 6y ago

amazing work! the canvas iteration is way better! it has spatiality and that's always an added benefit

antonzabirko 6y ago

How are these different from multiplexed vim setups?