Activate your free membership today | Log-in

Friday, July 31st, 2009

PyramiDOM: Spectrum DOM Analyzer

Andrea Giammarchi has created PyramiDOM a “Spectrum DOM Analyzer”. When I first saw it, and read “Spectrum” I thought I was looking at an old 48k video game, but in fact it is showing you info on the DOM:

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).

You can grab this PyramiDOM link to play.

Posted by Dion Almaer at 6:38 am
6 Comments

+++--
3.6 rating from 32 votes

6 Comments »

Comments feed TrackBack URI

Syntax error in your example link for Firefox 3.0.12 Linux, works on the original linked webreflection blog post though.

Comment by fansipans — July 31, 2009

Interesting… not sure what the applications of this are, but it looks cool nonetheless.

Comment by willbo — July 31, 2009

Dion, I used encode in raw mode to create the bookmark link ;-)

Comment by WebReflection — July 31, 2009

Cool, it helps to visualize the semantic-to-noise ratio of a page (considering that div & span are the noise).

Comment by frenchStudent — July 31, 2009

Quick Update: PyramiDOM source code and a new bookmark link available (Dion please change above link as well)

Comment by WebReflection — August 2, 2009

Phone developed into flower girl dressestoday by the beginning of the straight shape to the folded shape, and then to subsequent variants of screw-cap, slide, etc. discount flower girl dressesI experienced a 20-year history of continuous innovation. The first clamshell phone is available in January ,Motorola mermaid style wedding dresses328c, this phone is very pull stars at the time the wind. In the “bricks and mortar” era gathered, 328c, 95 mermaid wedding dressesgrams of weight is very thin and light, combined with an innovative folding design, make and receive calls need to be mobile to start walking in the street was very eye-catching. Now fold mobile phone has notmermaid syle wedding dresses as popular then,manufacturers have phased out this type of product development and production. Column V neck Pleated Satin Wedding DressIn modern times you want to use the compact feature-rich mobile phones, folding phones have evolved with our new concept of some of departure. But in the long history of mobile phones, there are still a lot of the classic folding mobile phones have brought us to allure,Column Sweetheart Pleated Satin Wedding Dress NEC N8, Motorola V3, Panasonic VS3, Nokia N93i … … those familiar with mobile phones to complete their historical mission, but deeply imprinted in our hearts.wedding dress

Comment by wuwei — November 10, 2009

Leave a comment

You must be logged in to post a comment.