HackerTrans
TopNewTrendsCommentsPastAskShowJobs

wattenberger

no profile record

Submissions

Show HN: Visualizing a Codebase

octo.github.com
283 points·by wattenberger·5 lat temu·96 comments

A vscode extension that highlights your last edits

twitter.com
8 points·by wattenberger·5 lat temu·0 comments

comments

wattenberger
·5 lat temu·discuss
I hadn't seen it until today - looks like a useful product!
wattenberger
·5 lat temu·discuss
Spot on! It's a space I've been wanting to explore, and so have been tinkering with it this last week while we're in between larger projects. I definitely don't see it being a product in it's current gotten, but wanted to share the exploration! Although I will say that the more I've been visualizing different repos, the more convinced I am that it's more useful than is easy to convey.
wattenberger
·5 lat temu·discuss
oh no! My best guess would be that there are many element-heavy SVGs on the page. I was hoping for better performance, since the files will almost definitely be smaller than large raster images, but there are likely older browsers that have trouble with that. I'll look into it, thanks for the report!
wattenberger
·5 lat temu·discuss
There are definitely many trade-offs with using a circle pack layout - I snuck a bit of the reasoning into the collapsed section halfway through the write-up! Overall, this layout worked best for me, with the nesting feeling very natural and the circles feeling very "atomic".

But big picture, this write-up isn't tied to the current visualization! It's more focused on exploring _how_ a visual representation could help our understanding of codebases. There are tons of jumping off points, including different vizes!
wattenberger
·5 lat temu·discuss
Hmm, it should be loading! What OS/browser are you on?
wattenberger
·5 lat temu·discuss
We always look at our code in a file/folder list - I explored an alternative way to view codebases, showing a bird's-eye-view of its structure. This write-up walks through the motivations, ways to use the visualization, and potential future directions (there are many!).

There's also an interactive tool to check out your own repos and a GitHub Action if you want to integrate a diagram into a README.
wattenberger
·5 lat temu·discuss
I also added it after your first comment so might have snuck it by you ;) I'm curious what it is that you're seeing, if you have the chance to leave an image!
wattenberger
·5 lat temu·discuss
interesting! I'm seeing them grouped in the middle. It's a tricky layout, using d3.js's circle packing algorithm, then recursively using a force layout to relax each folder's contents.
wattenberger
·5 lat temu·discuss
ah shoot, thanks for the updated link!
wattenberger
·6 lat temu·discuss
I probably need to add more context to the page, but I want to specify that my intention with this tool wasn't that long sentence == bad. I was inspired by this image:

https://twitter.com/misscrisp/status/1202792895448662016

It's really interesting how different authors play with the rhythm of their sentences - one of the best ones on here is The Raven, with very short sentences interspersed with longer ones.