Dissecting Code

Jun 19, 2008

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.

Share the Love: del.icio.us | digg | magnolia

Comments

andy Jun 29, 03:14 PM#

great article. i often do the same thing not just for websites, but for some programs too. i find it to be a great way to learn new things about code and other people’s perception of what the website or program is/does/(can do). i’d like to see some of your code sometime. shoot me an email with some example files!

Share Your Comment

You must preview your post and then hit submit.

If you haven't looked already check out my articles, my tutorials or my portfolio. If you need something else, please feel free to chat with me.

All content of this website (unless marked otherwise) is © copyright bradley j. cooper 2006-2008

Brad's AvatarI'm Brad Cooper a web designer/front-end programmer with a passion for actualizing visions. I try to create a piece of art in each site that I put together both visually and technically. I currently work outside Philadelphia and live in Marlton, New Jersey.

You can find me online:

Twitter | FriendFeed | Flickr | Delicious

Or keep up to date and:

Feed Icon Grab My Feed.

If you have a question or need some help, feel free to Chat with Me.

Recent Articles

» New Window Script Redux

» Magnolia - How social bookmarking should be - social!

» My Affinity for Color 2

» Pained by Invalid Code

Recent Tutorials

» Unobtrusive Expand and Collapse Navigation

» Forcing New Windows on Users Script

» Shorten document.getElementById

» Google Feed API Tutorial