Dissecting Code

I enjoy seeing how website designers and developers make their websites and I spend a lot of time looking at the code behind the site, more so than I read their articles (sometimes). So for you designers/developers out there, if you see someone on your site on a single page for 15 minutes or so without clicking around, that’s probably me.

Everyone has their own style of writing code, good or bad, and I enjoy looking through to see how the html, JavaScript, and CSS were done. It’s a great insight into the project and can often reveal some pretty interesting things. Like the state of mind of the coder, the amount of time that was put into it, and if the site was used as a canvas for experimentation.

Some particular pieces that I tend to look at in the html:

• How do they use certain tags for their content? Are they using <q> vs. <blockquote>
• Are they using some of the lesser used tags like <cite> or <fieldset>?
• Is everything semantic?
• Are they div or span happy?
• Are they using microformats?
• Do they throw in <br> here or there?
• How do they use their <strong> or <em>?
• Do they put thought into accessibility?

In the CSS I tend to look at:

• Are they using absolute/relative positioning and how did they did they design their layout?
• Are they floating lots of content around?
• How do they organize their code? Is it commented? Do they style multiple elements at a time or individually?
• How do they handle their typography styles?

The JavaScript is much more interesting to me since I’m still somewhat new to it, and this is always the most beneficial:

• Is it linear or object oriented?
• How do they handle their function names and variables?
• Do their functions call lots of other functions?
• Do they pass variables throughout functions?
• How do they handle global variables? and why?

And I usually always put them to the test to see how much importance they place on difference aspects of the ‘design’ by:

• Zooming the page up or down
• Bumping up or down the text size
• Turn of the Javascript, leaving the CSS on and turning them both.

Would I do it like that?

I always ask myself how I would have approached what they did. Often times this leads to creating mini sites to approach it and see how I can solve the same problems. This usually leads to some pretty interesting experiments and doing so has given me the ability to foresee outcomes to new projects without much thought. And, oddly enough, it’s given me the ability to identify the code of the people I work with just by glancing at it. (And they think it’s very weird)

Answers to Unasked Questions

What am I trying to say? Looking behind the scenes of other peoples code can prepare you for solutions to questions you haven’t asked yourself yet. Doing so can help prepare for working with other peoples code and to foresee solutions to problems that you haven’t had to tackle yet. Some people would say I’m a little obsessed, but I say otherwise – I think code can be ‘designed’ as much as the look can.