Tilt: Visualize your web page's DOM in 3D | Hacker News Reader

Tilt: Visualize your web page's DOM in 3D

hacks.mozilla.org

260 pointsmbrubeck18 comments

I'm keenly interested to see if this provides a visual indication of markup or layout clutter/complexity. That would be nice for sniffing out UI design smells, particularly in big enterprise portals.

Sadly, when I launch the tool it seems to create an overlay that prevents input to the page but doesn't show anything. Not blank, just invisible. I can close the overlay and keep using the page. But, I can't see anything. Hopefully I can figure that out.

I plan to use this for a side-by-side comparison of my product, Oracle web UIs (I'm scared), some nicely-designed and clean sites and some prominent web apps like Amazon or Backpack. Might be a useful tool for me on the "Marketecture" side of things.

Got it working. Short answer, Intel igfx cards (aka, "work laptops") are garbage. Chrome WebGL worked, Firefox didn't. I got it working, albeit slowly, using OSMesa on Ubuntu.

Marketing department power!

Hope that helps someone.

And, I'll stop spamming after this, finally got it working with the same awful video card on FF on Windows. I upgraded my video card and that still didn't work, but I told it to force WebGL in the about:config. Apparently just that setting was enough. Again, hope that helps someone.

I can't imagine better tool to help finding unclosed divs.

Firefox intentionally disables graphics card acceleration by default on certain video cards because they don't want to deal with the support headaches from bad drivers.

https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drive...

How to check your settings: http://superuser.com/questions/259502/why-is-firefox-4-not-h...

This is actually very useful, Snoop is a utility for debugging the WPF visual tree and it has had this feature for several years now. I don't know if snoop was the first to have it or not though.

http://snoopwpf.codeplex.com/documentation

(scroll to the bottom)

Snoop is an amazing utility and I used it quite often when I was coding WPF.

Their logo is.. quite something. I'm going to guess that it's developer humour/culture, and not just an exercise in poor taste.

I mean, I really want to like it, because it's hilarious and audacious. But then I feel a bit base. Oh, petty conundrum. Then again, obsessing over logos is a significant part of our trade.

I don't know if snoop was the first to have it or not though.

I remember seeing a GIMP plugin a long time ago that would render a 3D stack of the layers in an image, but I can't remember the name of the plugin or think of appropriate search terms to find it. This isn't precisely the same thing, but the plugin, combined with the 3D filesystem view in fsv (as seen in Jurassic Park), influenced these visualization tools. Or, maybe they were all inspired by some much-earlier tool that nobody remembers.

This is very cool. I really like the effort Mozilla has been putting into showing people what can be done with modern web technologies recently. They've got a whole bunch of other cool demos at demos.mozilla.org

The technology is pretty cool and all but I fail to understand why I need a 3D view of a 2D world.

The 3D dimension provides an additional data point: nesting level.

I have to agree. My first thought was going to be to disagree because I always just use something like view formatted source or something to look at my nesting levels within the dom but having it show nesting levels in place that has a trivial-to-digest visual effect is pretty nifty.

Putting it mathematically, non-linear problems (which are generally harder to solve) may become linear in a higher-dimensional space.

Obligatory link: http://en.wikipedia.org/wiki/Kernel_trick

(aka: how do we make this linear classifier - typically a support-vector machine - nonlinear?)

huzzah!

http://mcqueen.mit.edu/tilt.html

This is an awesome tool. I can't even tell you how much debugging time this is going to save me. Said time won't be reflected in my estimates or in my billing rate, of course, but at least I'll have more time to work on my RSS feed.

Wow, this is very cool, and very useful as well!

Reply on news.ycombinator.com