Title
#share-your-work
Daniel Garcia

Daniel Garcia

04/19/2022, 3:54 AM
Hi 👋, I'm creating a code explorer inspired by

Code bubbles

. The difference is that bubbles are not draggable, and everything has an automatic layout. Here is a video with the progress of the first weeks. You can give it a try to this really early version at https://minimalistidev2.netlify.app/
André Terron

André Terron

04/19/2022, 5:28 PM
That's cool! What are you using to navigate to the definitions? I built something similar in the past using ts-morph
Daniel Garcia

Daniel Garcia

04/19/2022, 6:38 PM
ts-morph looks cool, for now I'm using the output of Acorn to navigate. The code is still pretty hardcoded but I'm using this
xyzzy

xyzzy

04/19/2022, 7:04 PM
This is awesome! Could you make it usable for any programming language ? You could perhaps implement this UI ontop of VSCode.
Daniel Garcia

Daniel Garcia

04/19/2022, 7:39 PM
Yeah, it could work for any language, for now it only works for javascript. I want to focus on a research phase to see what UX interactions are useful, so I'm building it as a SPA for now. I might work on a VSCode extension in the future 🤷‍♂️
3:15 AM
One thing that's not shown in the video is that the bubles open in the order that the functions are defined. A second comment is that the
show
function opens twice because I want to have a call tree and it will make more sense once live values are added.
2:51 AM
One of my favorite features of editors is when I click a term and all its uses are highlighted, but why is the highlight constrained to a single file? I spend so much time looking at multiple files trying to trace where a value was defined or modified. Here is a demo of a multilevel highlight, looking forward to read your comments 😃
Kartik Agaram

Kartik Agaram

04/25/2022, 5:59 AM
So function arguments know the variable passed in at the call site? What if the caller had multiple calls to the function with contradictory arguments?
Daniel Garcia

Daniel Garcia

04/26/2022, 1:34 AM
Every function call will open a separate "bubble". Rn I'm in research mode exploring this option, and so far it feels good. It creates a call tree, instead of how we normally see code with a closer representation of the codebase instead of the runtime. Does it make sense @Kartik Agaram? Here is video that might make it easier to understand
Kartik Agaram

Kartik Agaram

04/26/2022, 1:36 AM
I see. Do edits in one call get reflected in the other?
Daniel Garcia

Daniel Garcia

04/26/2022, 1:46 AM
Ideally yes. But I'm focusing on a code explorer for now, with no editing ability. I want to make a semantic editing experience, whenever I get to that point