Confessions of a Code Snoop: My search for pretty code

I got an email in my inbox a few weeks ago that caught my eye. It was just a year-in-review newsletter from Codeschool, not much different from other examples of email marketing that fill my inbox. As a rule, these are the sort of emails that, if they’re lucky, get only a cursory glance before they’re deleted. This email, however, caught me in that brief moment with a bright yellow hot-air balloon scooting cheerfully across the screen. I enjoyed the effect, so I took a moment and scrolled through the rest of the email (which was nicely designed: simple, straightforward).

Codeschool floating balloon
Thanks to Codeschool for the happy balloon!

Did this little touch of whimsy cause every recipient to click through to the Codeschool website and convert into a paying customer? Well, while I have no way of knowing their statistics, I do know that this simple detail made me pause. And then investigate. I soon found myself picking my way through the email’s HTML source code searching for the balloon’s origin. Did Codeschool whip up a CSS3 animation? Hmmm…HTML emails are notoriously poor at supporting CSS styling…oh, it’s just an animated gif. I could do that. Why haven’t I thought of that before?

HTML code

As a developer, this is not an uncommon experience. I frequently come across examples of interesting web functionality that whet my curiosity and encouraged me to dive into the code. Sometimes it’s as simple as discovering an animated gif where I expected a static image, but other times a bit more digging is necessary. For instance, check out this fun example of one company’s team page where the employees seem to watch your mouse move around:

Lateral team page

Who, what, how?

In order to see how Lateral accomplished this effect, I had to dig into the attached Javascript files and really study the code to piece together exactly what was happening behind the scenes.

Right click to inspect element

Clever presentations like this inspire me. Luckily, most of the content that’s online has its code sitting just a click away, inviting people like me (or you!) to have a look. Applications such as Chrome Developer Tools and Firebug can help prise the lid off of the web and uncover the inner workings of interesting sites and features. A simple right-click (or a press of the F12 key) will show you the HTML code that makes the website happen, the website’s cogs if you will.

Chrome developer tools

Take your favourite website for a spin

I love getting into the code to understand how another developer approached problems and sought creative solutions. Why not give it a go yourself? Take a peek at what makes your own website tick. And if all the code looks like gibberish to you why not take a spin on Codecademy’s fun and free HTML & CSS introduction course?

If nothing else, knowing a bit about what’s going on will add to your appreciation of the internet.

Leave a Reply

Your email address will not be published. Required fields are marked *

Like the Brain? Sign up for the packed-full-of-tips monthly newsletter