Hacker News Reader

Comment by paulshen | Hacker News Reader

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

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=... I have more ideas/iterations coming. My goal is to productionize this for real use :)

View on HN

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.

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.

Such a thing might finally get me to switch away from Emacs for coding!

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

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/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!

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.

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

Interesting, that thing you linked there works that exact way indeed!

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.

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.

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.

Try nitter: 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...

How are these different from multiplexed vim setups?

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

Reply on news.ycombinator.com