this post was submitted on 15 Mar 2010
40 points (68% like it)
74 up votes 34 down votes

programming

- frontpage+ frontpage151,633 readers

And if you're an all-star hacker (or even just beginning) why not join the discussion /r/redditdev and steal our reddit code.

created by speza community for 4 years
Submit a link
to anything interesting: news article, blog entry, video, picture...
message the moderators

MODERATORS

ketralnisraldispezchromakodekylevtryxurielPoromenosmastadons

1
39
40

Code Bubbles and the Keyboard (richardminerich.com)

submitted 8 days ago by greenrd

comments

sorted by:
best
hotnewcontroversialtopold

dregan 7 points8 points 8 days ago[-]

Am I the only one that thinks this idea is totally unnecessary and that "go to definition" works just fine?

jerf 14 points15 points 8 days ago[-]

This is the first time I've bothered to take a look. What people may not realize is that this sort of thing has been done, and done, and done, and done, and it hasn't taken off for a reason. Binding so tightly to the physical layout on the screen is just a disaster. You don't have enough literal space to fit things you need. Once you start panning (a mere 2 minutes into the 8 minute video), you lose. Now it's just a confusing mess, and it will only get worse over time. Look at that disaster that you have by the end of the demo! Is that 100 bubbles? That's insane. That's not usable by any stretch of the imagination.

I call this demoware; it gives a great demo, it works like shit in practice. And it is a great demo. But that doesn't change the fact that it will turn out to be basically unusable.

Sadly, they're actually onto something, IMHO; breaking down the file distinction is likely to be a good idea. It's just that they then turn around and wrap it in a graphical interface paradigm that just doesn't work. Tens upon tens of projects have tried fallen for the siren song of that paradigm and none of them are usable. Most are unreleased. I wouldn't be surprised this never gets out of beta.

reggieband 3 points4 points 8 days ago[-]

this sort of thing has been done, and done, and done, and done

Can you give any examples (preferably with links) of similar projects? It seems similar to the way Squeak and other Smalltalk image viewers present code yet different enough to feel promising.

I like the idea of sets of methods related to a particular task (or bug). This isn't too different to how I maintain a set of open files within tabs related to a task. In fact, it is limiting the information since not all of the methods within a file are needed for particular tasks.

I agree that the organization of methods on the screen could use work.

You don't have enough literal space to fit things you need. Once you start panning (a mere 2 minutes into the 8 minute video), you lose.

This doesn't seem too different to me than switching tabs (or buffers) between files. I think you are making a hasty judgement between panning horizontally through related bubbles and scrolling vertically through a single file and horizontally through a set of open files.

jerf 10 points11 points 8 days ago* [-]

I've been down this debate path over and over. I know the end result: I can't convince you, because the demo is just so awesome that nothing else I say will matter. (I call it "demoware" for a reason.) "Stop being so cynical." "If they want to work on it, let them." "People thought they'd never break the sound barrier, too."

Also, the stuff I'm saying has been done is this sort of graphical layout. No, I've never seen it directly applied to an IDE, but the characteristics of an IDE and a real code base only exacerbate the problems with a graphical layout like this, they don't make it better.

So all I can say is: Use it. If I'm wrong, hooray! (Seriously. No sarcasm.) If I'm not, nothing short of that will convince you. But I would say, even if you get past the first five minutes, use it for a while before you make your call. I'm only wrong if, of your own free will, you're still using it after a couple of months. If you just sort of put it down because it doesn't quite work, maybe you can't even articulate why, but you do know it's not just a matter of adding a couple more features, then I'm right.

But I'm not wrong. Vast 2D spaces containing hundreds or thousands of objects is not a useful organizational metaphor for anything. Human minds do not work that way. The standard n-dimensional hypertext approach that IDEs already take today may seem less intuitive, and is certainly less graphically impressive, but it actually works with the human brain. It handles vastly more complexity than any 2D graphical approach can even dream of. This sort of graphical organization paradigm has been done over and over, and it just doesn't work.

(One example I recall seeing: Microsoft Surface's photo "organization" app. I scare-quote "organization" because it's hardly worthy of the term, compared to a standard metadata-driven approach that actually organizes the photos in n-dimensional space. Thousands of blobs on a 2D surface is not something the human brain can deal with in the way it can deal with "all the pictures with Alice in them", and creating a 2D blob based on that criterion is not useful either; the pile is only useful inasmuch as the brain can symbolically understand it as "all the pictures with Alice in them". The pile itself is useless and would be better off represented as an icon showing it is multiple pictures with a representation of Alice's face on it. Dynamic iconography would be the way to go, not incomprehensible piles of photos.)

reggieband 2 points3 points 8 days ago[-]

because the demo is just so awesome that nothing else I say will matter.

I don't think that is the case. The demo isn't really awesome as much as it is interesting.

But I'm not wrong. Vast 2D spaces containing hundreds or thousands of objects is not a useful organizational metaphor for anything.

That doesn't seem to be what this is. When I work on a problem I open the first file containing the method I think is most likely to solve the problem. I continue to open files until I have the set of files open that I require to work on the problem. I usually keep several files open in tabs at the same time switching between them and editing them until the problem is solved at which point I close all the open files and begin again on the next problem.

I navigate through the methods I am working on by vertically scrolling through the file, using "go to definition" macros (much less often) and switching between open tabs.

Using the demonstrated interface I don't see myself opening 100's or 1000's of objects. Just like I don't open 100's of files. I would limit the visible methods to only those directly related to the task at hand. As soon as the task was solved I would clear my workspace.

And organizing things horizontally and vertically on screen isn't that different to how methods are already vertically organized within a file and can be horizontally split into tiled windows.

The standard n-dimensional hypertext approach that IDEs already take today may seem less intuitive, and is certainly less graphically impressive, but it actually works with the human brain. It handles vastly more complexity than any 2D graphical approach can even dream of.

I'm not sure what you mean. A single window that shows the contents of a text file next to a tree-like package explorer is a 2d graphical approach. There is only 1 way the methods within that file are displayed ... vertically stacked based on their actual position in the file. This could be done using bubbles I am certain quite easily (e.g. open class definition in order vertically). But why not alphabetically. Or chronologically. I would love to drag a method so that it was horizontally next to another method I was working on.

That is, this interface could replicate your current work space. But it would augment it on the occasions you require.

lol-dongs 0 points1 point 8 days ago[-]

I might add, the panning interface could be modified to a series of fixed-width or variable-width columns, kind of like the columns view in Mac OS Finder. Then you could actually navigate left and right using the keyboard because there are fixed increments. I think that addresses the "2D blob" concern of the GP.

The reason this interface is interesting is because of the hierarchical way of navigating code objects on the class/method/function level with the file locations pretty much abstracted away. The nitty-gritty of how the demo presented this as a free form canvas, and not a more restrictive grid or set of columns, is not really the point.

I for one see the bubbles metaphor as great for burrowing into a project to fix a bug since there is so much less grepping and file hunting. Whether I'd use it for day to day development I can't say (because in this phase I do want to focus on my file layout), but an intelligent interface like this might make a maintainer's life much easier.

reggieband 0 points1 point 4 days ago[-]

the panning interface could be modified to a series of fixed-width or variable-width columns

My first idea was modifying this to be the default behaviour. I think the demo would be much more effective if it started like a standard editor. That is, open a full file, then by default when you go to definition it opens the full file in what appears to be a new tab (even if that is just automatically created group). Try and fake people out that it is just a standard editor. Then start dragging around methods to reorder them, delete bubbles that aren't related to the task (like folding in editors) then positioning methods horizontally.

That is, start from the normal way of editing instead of starting from an unrecognizable form of editing.

kragensitaker 1 point2 points 7 days ago[-]

I think you are interpreting the 2-D space as a substitute for a filesystem hierarchy for organizing your code. But I think they're using the 2-D space more or less the same way every other IDE uses it: to show multiple windows containing different parts of your project at the same time. The N-dimensional hypertext navigation of a standard IDE (Eclipse, apparently) remains intact.

In short, it's basically just a window manager. You use it for the same thing you normally use a window manager for: switching back and forth between looking at different documents just by flicking your eyes from one to the other, instead of issuing some kind of keyboard command, and keeping related documents together. The question is whether it's a good window manager.

archgoon 7 points8 points 8 days ago* [-]

I believe that the advantage of the code bubbles* is that the 'Go to definition' usually causes the code you were currently looking at to be obscured (either by a new window, or by scrolling).

If you say, want to simultaneously look back and forth between two functions (and say also, look at the data structures used at the same time), this works. Most split screen views I've seen don't really do this in a particularly good way (fixed size, scroll bars take up real estate, lots of fiddling to get them to display what you want), and they don't fit very well together.

*From a strictly 'What does this bring to the UI table' point of view.

Canumbler 1 point2 points 8 days ago[-]

Agree. The most common key combination I use in vim is ctrl+6, back and forth back and forth. Having the things I'm looking at automatically next to each other could be amazing.

Or it could be a giant pita, time will tell.

refrec 0 points1 point 8 days ago[-]

Those that forget Alan Kay, reinvent his work poorly.

What Code Bubbles reminds me of are those people that hang out at Starbucks all day long with their Macbook, pretending to write the next great novel or screenplay. It is the appearance of work, and not the actual doing of work.

0x18 4 points5 points 8 days ago[-]

If only current languages could be split into sections or subsections. Like certain types representations could be classified, and given function..

gndn 5 points6 points 8 days ago[-]

This looks very cool, but there was no mention in the demonstration video about how this would integrate with a version control system. Could I get a bubble for a particular revision of a particular method? How about side by side by side bubbles of multiple revisions of the same method, with commit comments? This looks very promising, I look forward to seeing more of this.

bautin 4 points5 points 8 days ago[-]

I would imagine that it would work on flat files and just present the code in bubbles.

sigzero 2 points3 points 8 days ago[-]

I believe the site does mention it...it is built on eclipse so you can drop down into eclipse for versioning.

waxbolt 6 points7 points 8 days ago[-]

vim + screen + ctags + git + grep == IDE of the future

With this IDE I can simultaneously edit code from my cell phone and my laptop. And I can collaborate remotely with anyone in the world, in real time, in the same window. And it never, ever crashes. EVER.

Flat files be damned! They don't bother me a bit. Just jump through the tags bro.

Oh, and you don't need a mouse.

ahorne 5 points6 points 8 days ago[-]

I just discovered the marvel that is ctags last week. Now I'm all, "How the fuck did I not know about this earlier?"

inmatarian 3 points4 points 8 days ago[-]

Thats a very exuberant reaction.

EnderofDragon 1 point2 points 8 days ago[-]

WTF are ctags?

fishdicks 0 points1 point 7 days ago[-]

Inaccurate index of function names made by glorified grepping through source files and used by Vim to provide almost-working semblance to "go to definition" of real IDEs by going to the first matching tag, with no regard to #includes or anything. Absolutely doesn't work for object-oriented languages. Must be complemented by '[I' that understands includes but doesn't understand any syntax at all -- I even have it wrapped into a function that presents me with a list of occurrences and goes to one I've selected.

Wait until these guys discover CScope (a slightly more advanced version of ctags, still retarded), they'll be, like, OMG WE ARE IN THE FUTURE CALL ME WHEN UR IDE CAN DO THAT. Pretty funny, actually!

orbat 0 points1 point 7 days ago[-]

But but but... It's vim! Anybody who uses vim is such hot shit that they probably eat iron ore and shit nails.

That, or they're using an editor that's basically the left-handed and redheaded stepchild of TECO, 20 years after everybody should have stopped using it.

fishdicks 0 points1 point 7 days ago[-]

Well, I am using Vim too, and it's quite nice as a general-purpose code editor, actually. When you need to quickly view/edit some code in C or SQL or Delphi, or skim through a 500Mb log file with comfort, searching for different patterns etc, or do a quick interactive data or code transformation with regexes and keyboard macros, Vim shines. There is no other general purpose editor that offers enough power (except maybe Emacs, but I haven't tried it yet).

Notepad++, Notepad2 and the like are good for editing your pie recipes file, or maybe even a config, yeah. If you want to work with lots of different kinds of code or textual data, you need Vim. I consider my decision to learn it to be important and well paid off.

However, good specialized IDEs like MSVS for C# utterly destroy Vim on their field, it's, I don't know, like a sports car against a pickup on a race track. When you don't know in advance the road conditions (and rightfully expect a fair share of potholes and puddles), pickup is a good choice, as are quick ctags-like hacks that can work at least somehow with virtually anything out there, but when you have a nice big project in a single language (or a known mix), with a known project structure etc, you want an IDE that actually knows that language, not fakes it with a bunch of magic regexes.

orbat 0 points1 point 7 days ago[-]

Yeah, I use vim for all my generic editing needs too. I just don't understand the people who think that it's all you need.

waxbolt 0 points1 point 8 days ago[-]

You were in the newfangled IDE distortion vortex!

greenrd [S] 1 point2 points 7 days ago[-]

Eclipse updates its indexes incrementally. Ctags requires a full re-scan of the project, doesn't it?

ahorne 1 point2 points 7 days ago[-]

Yes and no. If you're just using ctags on its own then there is no easy way to update your index without doing a full rescan. The AutoTag plugin for vim will update your tags (using a python script to fill in for the missing functionality in ctags) every time you save a file.

redditrasberry 2 points3 points 8 days ago[-]

I've been a long time vim user, at one time doing all my client side work in it. However I'm finally starting to migrate away from it, towards eclipse. Strangely it's not the super-IDE features like auto-completion or refactoring or auto-lookup of definitions & help that are pulling me. It's the simplest things, such as being able to press Ctrl+Shift+R and get a global list of all files in all projects and substring search on their names to open one. This is so much simpler than fumbling around with Vim to find a file in some far-off directory that I am not sure of the name of.

unagi 1 point2 points 8 days ago* [-]

I tend to keep a vim "project" file with a some vim commands to open every single file in the project(:args CMakeLists.txt src/* src/subdir/*) and set up things like project specific indent rules.

When I start working on the project I run vim -s project.vim.

I can then use the fuzzy finder plugin's buffer search feature to quickly find whatever file I need. It's a bit nicer than a substring search. For example hitting cml would match against CMakelists.txt. Having all the files already loaded into buffers is also nice for :argdo commands to do string substitutions in all project files.

unagi 0 points1 point 8 days ago[-]

I've always been dissatisfied with ctags. At least its c++ support. It's annoying when you are looking at result 1 of 40 at the wrong location when you know there was some very clear context where you jumped from. I always imagined IDEs did a better job at it, but I could be wrong.

PixelBurn 0 points1 point 8 days ago[-]

And I can collaborate remotely with anyone in the world, in real time, in the same window.

Could you tell me how you set this up?

Blogg 3 points4 points 8 days ago[-]

I've been using code bubbles for years, but I believe the technical term is "window tiling".

greenrd [S] 1 point2 points 7 days ago[-]

What programming language do you use? Many programming languages would fail horribly to cope with one-method-per-file (or at least would be suboptimal).

Blogg 0 points1 point 7 days ago[-]

Oh I'm not doing one method per file, but you definitely are able to open the same file in more than one window.

greenrd [S] 1 point2 points 7 days ago[-]

Well then it's not really the same as code bubbles.

inmatarian 3 points4 points 8 days ago[-]

You could probably achieve the same bubble effect with flat text files, if you just used more of them, and make them smaller.

reggieband 5 points6 points 8 days ago[-]

This is really a case of separating the view from the model so the underlying data representation shouldn't matter. You could store the data exactly how you would save the files now (e.g. using 1 file per class) and index the data in a database which the IDE searches.

I am pretty excited by this metaphor for browsing code since it seems to match how I navigate code in general.

reddit_dev -3 points-2 points 8 days ago[-]

downvoted for being dumb or not having a sense of humor or both

greenrd [S] 1 point2 points 7 days ago[-]

Yes but you wouldn't have a bubble "window manager". And the import/include statements would be a killer. Not to mention mutually-recursive modules, in languages which make it inconvenient or impossible to have mutually-recursive modules, or open classes, in languages which don't allow open classes.

reddit_dev -1 points0 points 8 days ago[-]

upvoted for being awesome

safiire 3 points4 points 7 days ago[-]

Just use vim for god sakes, what is with you people? :P

orbat -2 points-1 points 7 days ago[-]

I've never really understood why some people are so adamant that vim is the one-size-fits-all solution to programming. Personally I find the TECO-esque feel of it, well, hideous. Hell, I probably like TECO better.

With other IDEs (Eclipse, Netbeans, Qt Creator, anything) at least when you forget how some specific thing X is done you can look at a menu and find it, or even use some built-in help function. With vim, if you forget that searching for the definition of a function was done with :qz^HH!#n,*, you're possibly going to spend a long time figuring that one out.

lol-dongs 2 points3 points 8 days ago[-]

Does anyone else here program primarily on a laptop keyboard and not find the effort to shift one hand two inches to mouse around on the trackpad such a big deal?

I haven't found a mouse that can replicate the ease of two finger scrolling on a Macbook, so I am a heavy trackpad user. If you take away my two finger scroll, I'll kill you; I use it all day long and it feels wonderfully accurate and responsive. If you use a good trackpad a lot, mousing is not such a huge stretch from keyboarding, and suddenly navigating things in 2D while coding is not so bad at all..

greenrd [S] 1 point2 points 7 days ago[-]

I haven't found a mouse that can replicate the ease of two finger scrolling on a Macbook

Wow, thanks dude! I never knew about that. And it even works in X11.app!

How did you find out about it?

safiire 3 points4 points 7 days ago[-]

Does everyone not know this?

lol-dongs 0 points1 point 7 days ago[-]

I think read about it in the promotionals for my Powerbook G5. You demonstrate the reality that it's not very discoverable, unless you go into the Trackpad settings pane and watch the videos.

More recent Apple adverts about macbooks show off fancier gestures like swipe up/swipe down for Expose, etc. so this is how some people hear about it.

Isn't it nice? as John Hodgman would say, you're welcome.

pozorvlak 0 points1 point 7 days ago[-]

Perhaps I've never used a good trackpad, but I hate them with a passion.

petermichaux 0 points1 point 7 days ago[-]

What kind of trackpad with gestures do you pair with a regular keyboard so the pad is positioned like a Mac laptops? I'd like to do that as I use an ergonomic keyboard.

lol-dongs -1 points0 points 7 days ago[-]

Some keyboards come with a trackpad built in... but the ones I've seen have mostly been media center focused and not ergonomic. Also, I can't speak to the gesture ability on those trackpads. It seems that Synaptics has some sort of lock in their typical Windows drivers on doing gestures. Some people have found hacked drivers to re-enable such things. There also seems to be a project on Google code that looks relevant but there's no documentation. It depends on how much you are creeped out by these modded drivers...

shitcovereddick -1 points0 points 7 days ago[-]

Is two finger scrolling really that much easier on a Macbook than other laptops?

lol-dongs 2 points3 points 7 days ago[-]

AFAIK, most PC's don't have two finger scrolling but the weird drag on the edge to scroll gesture. It's an enormous loss of expressiveness.

In a 2D context for instance, with two finger scroll you can very smoothly move in all directions, much like you can when dragging a picture around on an iPhone. It feels so natural, you feel ridiculous doing anything else once you're used to it. A scrollwheel on a typical mouse just doesn't come close with its jerky motion and loss of horizontal freedom.

There's not really much more I can do to describe it, you just have to try it and give it a good feel. It's one of the reasons I switched to Mac laptops.

thoomfish 1 point2 points 7 days ago[-]

The other fact is that the glass trackpad on newer MacBook (Pro) models is much, much bigger and feels nicer than any other laptop, so you have more room to gesture. It can detect up to four or five fingers independently, and there are many 3rd party tools like jitouch and BetterTouchTool that add even more convenient gestures using those extra fingers.

I would kill for a glass trackpad for my desktop.

hellfeuer 0 points1 point 6 days ago[-]

All synaptics touchpads are capable of two finger scrollling. It does not seem to work on Windows (or at least I don't know how to set it up) but it works out of the box on Ubuntu.

shitcovereddick -1 points0 points 7 days ago[-]

PCs do have it. I was being sarcastic.

lol-dongs -1 points0 points 7 days ago[-]

Which PC laptop are you speaking of? I'm actually interested in checking out how they've done it. The only one I've heard of that implented it was the Asus Eee.

shitcovereddick 0 points1 point 6 days ago[-]

1000he eeepc is indeed what I'm using.

semarj 1 point2 points 8 days ago[-]

I could see this working decently well in web dev, 1 bubble for an html snippet, 1 for css, 1 for javascript, 1 for the method the html posts to, another couple for other functions that method uses and maybe the one it redirects to. maybe 1 open for the model file for the objects in question(for reference)

use all those for 1 widget/bug/feature, and then close them all, rinse, repeat..

in theory anyway

Dimpf 1 point2 points 8 days ago[-]

It looks interesting...but it's Java :(

Does it work with the other modules (such as C++) in Eclipse?

orbat 0 points1 point 7 days ago[-]

I think they said (somewhere) that it works on any Eclipse project, so I'd figure that includes C++.

Edit: Found it

kuoney 1 point2 points 8 days ago[-]

The only good thing I can see coming out of the code bubbles is maybe some of those developers who write thousands-lines-of-long functions will be embarrassed about how their bubbles look and divide them into shorter modules...

Then again, those guys usually find a way around best practices.

loumf 1 point2 points 8 days ago[-]

I was thinking the same thing -- you'd probably never even let them get big in the first place if the bubble was constantly resizing and reminding you how much space you are taking up.

greenrd [S] 1 point2 points 7 days ago[-]

Interesting. That's a new way of looking at usability - instead of merely trying to help the user, we try to make them feel bad about doing things the wrong way...

AnteChronos 1 point2 points 8 days ago[-]

Even at the most basic level, just reaching for the mouse has a huge impact on programmer performance. Many think of it much like a cache miss.

I'm not buying that. Unless your job involves a lot of code-monkey work where you type more than you think, you're going to spend a significant amount of time just looking at code. I can't imagine that the brief fraction of a second needed to move your hand from the mouse to the keyboard is going to have any noticeable impact in such situations.

redditrasberry 0 points1 point 8 days ago[-]

It's exactly how I think of it. I'm not sure why. I think it's something to do with the entirely different part of my brain that is needed to process text vs graphics and to move the mouse around and visually coordinate with the mouse cursor. It's not crippling, but it definitely takes away the very peak of my concentration from the code, whereas keyboard navs don't for some reason.

vombert 1 point2 points 7 days ago[-]

Is there any credible evidence that mouse use could impair programmer's productivity? Because in my experience, it is not the case.

Yeah, yeah, I'm aware of all you emacs and vim fans, claiming you can do everything on keyboard 10 times faster than average mouse user. Did it ever come to you that mouse operations require skill as well? (and also some appropriate hardware). No doubt you can do better than unexperienced clerk with lousy cheap mouse, so?

kragensitaker 0 points1 point 7 days ago[-]

I think the issue goes back to Jef Raskin's measurements of navigation by "LEAP" versus navigation by mouse.

hobbit125 1 point2 points 8 days ago[-]

tl;dr: I read about code bubbles. I like code bubbles. They could make keyboard shortcuts. That would be cool.

Seriously, what a useless fucking blog entry.

BitRex 0 points1 point 8 days ago[-]

Vim+ctags forever!

Elgo 0 points1 point 8 days ago[-]

Look for the source http://www.cs.brown.edu/people/acb/codebubbles_site.htm

NickNovitski 0 points1 point 8 days ago[-]

Move over grandpa, you're blocking my paradigm!¡

krunaldo -1 points0 points 8 days ago[-]

All his complaints could easily be solved by a system similar to textmate's file finding(command+t iirc) which pops up a window where you do a fuzzy search for the file in the project you want; textmate also does this for function/variable names(command+shift+t).

When I was watching the video I got the impression that was already implemented.

greenrd [S] 0 points1 point 7 days ago[-]

Eclipse and emacs (in certain modes) allow you to jump to the definition of the pointed-to method or variable, without having to even type its name. But even this is not the main point of code bubbles.

Use of this site constitutes acceptance of our User Agreement and Privacy Policy. (c) 2010 Conde Nast Digital. All rights reserved.