Hi, my name’s Chris and I’m a compulsive view-sourcer. I’ve been a compulsive view-sourcer for several years, but most of the time I keep it to myself and try not to let it affect my family and friends. Sometimes I have a bad episode and then I feel guilty afterwards. Those bad episodes are happening more frequently.
You see, other people might favour crack or LSD, I prefer HTML. It gives me a real high to get some quality semantic HTML – I’m happy for hours. But there’s a lot of bad stuff out there that will just give you a headache; dirty HTML with all sorts of other crud added to it. I try to stay away from dirty code but it’s so much easier to find than the clean stuff.
Take last week. A website I used to be a regular visitor to relaunched with a new design. I went to have a look, but before I knew what I was doing I had right-clicked and viewed the source. Bad mistake. It was HTML, but only barely. Full of tables for layout, spacer GIFs, all the worst additives. I know I shouldn’t have done it, I just couldn’t stop myself.
I felt so dirty and guilty, not to mention ashamed. I had to do something about it, so I cleaned up the HTML. You can see the original version here, and my cleaned up version here.
This is where my compulsion to view sourcing gets hard to handle. I mean, it’s not enough that I see bad code, I just have to do something about it. The website I rewrote is now over 60% lighter when you count code and images, and has a clean and semantic HTML structure. If they get 250,000 visitors a month (but I think they get a lot more than that) with their old dirty homepage HTML that would be 59.6 gigabytes of data transferred. With the new clean HTML it’s cut down to 22.9 gigabytes.
But that doesn’t matter, because I’m never satisfied. I’ll always need another hit of HTML, and while the clean stuff is great, it’s the dirty stuff that’s much easier to find. Still, I suppose the first step is realising I have a problem.
—
If you’ve been affected by any of the issues raised by Chris’ confession there is help available. Visit one of the excellent online support groups and get involved. Together we can stop the supply of dirty HTML to our screens.
Oh Chris, I’m so glad you told us. It’s the first step really. We’ve all suspected for a long time, but you’ve kept so quiet about it, we never knew if we could say anything. Now that it’s out in the open though, we can all get through it together.
I love your re-work of the SOF site. It’s beautiful.
I particularly like how you’ve turned this:
<tr>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="8" width="30"></td>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="8" width="910"></td>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="8" width="20"></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td align="left" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="960">
<tbody><tr>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="1" width="30"></td>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="1" width="295"></td>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="1" width="15"></td>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="1" width="295"></td>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="1" width="15"></td>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="1" width="140"></td>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="1" width="30"></td>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="1" width="120"></td>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="1" width="20"></td>
</tr>
<tr>
<td align="left" valign="top"> </td>
<td align="left" background="shipoffools_files/spacer_e0e6e6.gif" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="295">
<tbody><tr>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="1" width="20"></td>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="1" width="255"></td>
<td align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="1" width="20"></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top"><img src="shipoffools_files/spacer_10.gif" height="15" width="295"></td>
</tr>
into this:
that’s a saving of 100% right there!
I am so ashamed when I see something beautiful like this compared to this (not my work, but I have to claim responsibility):
http://nunnone.com/go/uhs
Please don’t judge me to harshly.
You should look at using HAML with Ruby on Rails, it can only produce valid HTML and indents it beautifully too.
Oh dear. I once too did succumb to the View | Source command. Unfortunately I’m addicted to databases now…not sure which is worse. :help:
Good luck.