Internet, Technology

It says a lot about how outdated my HTML coding habits are…

October 24th, 2006 by Jeff | 1 Core Dump

I’m not sure how many of you follow User Friendly, but I’ve been a loyal reader ever since I first discovered it. Ironically, that occurred when a reader sent me a nasty-gram accusing me of ripping off that strip; I never knew it existed before then, and my investigation of the site kept me reading until I finished the archives and added it to my daily reading list. Since then, I’ve gotten to meet Illiad in person and continue to exchange messages with him periodically. I consider him a comrade in arms when it comes to webcomics… he and I are some of the last of the “old skool” “techie” comics still around, so it feels good to have someone to occasionally sit around and complain with about our creaking bones and aching joints. If you’re reading GPF but aren’t reading UF, you’re depriving yourself of some seriously funny geekery, and I highly recommend you correct that oversight as soon as possible.

Anyhoo, the UF site has had a Link of the Day feature for years now (a feature I’ve thought about stealing), and they often find some interesting geek-related gems from across the Web. Recently they had a geeky number game that spawned a collaborative effort on the GPF forum. Today’s link happens to be a “websites as graphs” applet that generates a visual representation of the HTML behind a given Web page. Ordinarily, I don’t get into those goofy “Which soggy breakfast cereal are you?” games that are so prevalent on blogs, but I thought this was such a novel and geeky concept that I couldn’t help myself. I typed in the URL to GPF and it produced the following graph (click to see a larger version):

[GPF Webgraph]

The legend to all the little nodes is available on their site. Sadly, it’s rather telling about how old my HTML “sk1llz” are; I seem to be stuck way back in old HTML 3.2. Note the abundance of red nodes, which are table-related tags, and the conspicuous lack of green nodes, which are HTML 4+ DIVs. Since yellow represents forms, I’d say the huge yellow ball at the top is the storyline drop-down box, while the smaller yellow ball in the lower right corner is the Keenspot drop-down at the top of the page. The blue and gray ball near the bottom is probably the “site links” block (that dark blue block of links that sits near the bottom of every page). The graph looks like some sort of weird abstract dog/gecko/scorpion like thing, doesn’t it?

Continuing my curiosity, I ran this site through the applet (which of course does not include this and subsequent posts):

[JeffDarlington.Com Webgraph]

Being largely automatically generated by Movable Type, there’s very little hand-coded HTML here, so it’s more up-to-date with the standards. I think the red ball near the bottom is the calendar, which is the only instance of a table on the page. The origin point of the graph (the black dot, which represents the HTML tag, right below the little gray cluster in the middle of the “neck”) suggests that the left side of the graph is the side bar with the calendar and most of the links, while the upper right cluster is the main body of content, blog posts and such. Looks more like a strange spacecraft to me, less organic than GPF’s graph. I wonder if that’s a factor of how GPF is largely hand-coded while this site is more automated.

Not exactly the most exciting entry, I know, but it amused me enough this morning that I took the time to snatch the screenshots between wolfing down my breakfast and shoving a bottle into Ben’s mouth. The owner of the site encourages site owners to post their graphs on Flickr; I doubt I will as I have no other use for that site, but taking a look around at some of the interesting graphs they have is quite interesting.

1 Core Dump

Dump your own core:

You can skip to the end and dump core. Pinging is currently not allowed.

Be nice. Keep it clean. Stay on topic. No spam. Or else.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

You must be logged in to dump core.