PyramiDOM - Spectrum DOM Analyzer
Update PyramiDOM source code and a new bookmark available
During a post into jQuery developer list, I wrote a sort of non-sense reply talking about the DOM as a three dimensional space to analyze and " ... bla bla bla ... " (that was not so interesting, just probably "futuristic" ...)
But why not, why can't we escape from ordinary convention to analyze a document creating a sort of DOM spectrum as is for Audio, Video channels, and other medias?
As quick start test, I have created an alpha version of PyramiDOM, a script hopefully short enough to be clicked, saved, or dragged as a bookmark and able to put a spectrum inside whatever page we are surfing.
The generated spectrum will contain every single nodeType 1 present in the document and will show via tooltip info about that node (nodeName, id if present, className if present). Moreover, it highlights somehow that node temporary changing the background (yellow one). The most wicked effect was in jQuery website itself, since it is dark, and since it is linear enough (you scroll and the spectrum is almost there where you scroll).
On the other hand, the most interesting spectrum was in Gmail, where you can spot a proper pyramid of nested divs. Each nodeName will have the same color, but for practical reasons each time this color will be different (random).
If anybody will like this idea I will post and comment the source code ;-)
During a post into jQuery developer list, I wrote a sort of non-sense reply talking about the DOM as a three dimensional space to analyze and " ... bla bla bla ... " (that was not so interesting, just probably "futuristic" ...)
But why not, why can't we escape from ordinary convention to analyze a document creating a sort of DOM spectrum as is for Audio, Video channels, and other medias?
As quick start test, I have created an alpha version of PyramiDOM, a script hopefully short enough to be clicked, saved, or dragged as a bookmark and able to put a spectrum inside whatever page we are surfing.
The generated spectrum will contain every single nodeType 1 present in the document and will show via tooltip info about that node (nodeName, id if present, className if present). Moreover, it highlights somehow that node temporary changing the background (yellow one). The most wicked effect was in jQuery website itself, since it is dark, and since it is linear enough (you scroll and the spectrum is almost there where you scroll).
On the other hand, the most interesting spectrum was in Gmail, where you can spot a proper pyramid of nested divs. Each nodeName will have the same color, but for practical reasons each time this color will be different (random).
If anybody will like this idea I will post and comment the source code ;-)
Labels: DOM, JavaScript, PyramiDOM, Spectrum
posted by Andrea Giammarchi at 11:53 PM
RSS 2.0
14 Comments:
Wow, very cool! I like it a lot.
huh.. nice. I believe it can be useful :)
cheers guys. The main idea is to connect the spectrum to Firebug or current console on each click and to highlight each brick via dom and a mouseover/out event. Probably something else as well, I am open for suggestions :)
Really amazing, this could come in handy :)
usefull will be to put the spectrum and original page in two independently scrolled layers.
on click in a brick - ensure visible corresponding node (scrollIntoView)
Nice. The visual overview means you can quickly see if a website uses tables for layout instead of CSS. On CSS sites, you tend to get a wider block of solid colour for all the nested DIVs. Table-based sites are pinstriped because of all those nested TABLE>TBODY>TR>TD.
Looks pretty neat; I can see how this would be a great addition to Firebug. :)
amazing!
amazing!
that's cool! publish code :)
and look here
http://artgorbunov.ru/bb/ui/infoscroller/
your analizer can be cool as infoscroller
Wonderful! This makes poorly structured markup look amazing. You should do an art project visualizing the DOM trees of popular web sites. I'd love to play with your CSS.
Really cool dude :) love this ...
And yes you could publish the code :)
Very creative! Makes any site look decorated with an artistic band! :)
I always said programmers are artists ... is the artistic world that does not want to accept it :P
Post a Comment
Links to this post:
Create a Link
<< Home