View source 4eva

Just a quick thought on keeping the web as human-readable as possible.

I remember when I was first getting to grips with how websites are put together, the fact that I could just hit view source and see the inner workings of an HTML-based site really amazed me. Visit a site and see something that intrigued you, just view source, dig in to the code and see how they did this. Good times. I personally found (and still find) viewing source an invaluable tool in an effort to learn how things work here on the web.

But as sites continue to get more and more complex, and minification and concatenation tools are more freely available (H5BP Ant build script, CodeKit), it just doesn’t make sense any more to use verbose, uncompressed code in production. CSS/JS files are likely to keep growing as new features are implemented and thus page sizes will continue to grow (average page size is now over 1MB apparently), and with mobile booming it’s now more important than ever to optimise front-end code, particularly for responsive sites.

So, what’s your point?

My point is, go to sites of the leading tech companies – the Googles, Facebooks, Twitters – and hit view source. Good luck trying to learn anything from that.

The point is slightly exaggerated as these sites will be far more complex than many, but the fact that the code is virtually useless to humans applies to any site of any size which adheres to the best practices of code compression/minification.

And yes, you can use developer tools to have a better poke around, Chrome DevTools can even prettify minified JS which is pretty cool (not sure if other dev tools can do this? Think maybe firebug can prettify minified CSS?), but it’s still not the same as reading development code. It’s not just reading the functional code itself, but reading author comments, taking note of the way the code is written, organised and formatted. This, to me, has been just as valuable in many ways as reading expanded working code.

So… Be generous!

Not many designers/developers/agencies have the time or inclination to publish full write-ups of every project they work on, but if you are minifying/concatenating your code, it isn’t too much effort to direct people viewing source to the development code. An example of this in the wild is in nclud’s recent (and awesome) redesign. I’ve started doing this since I began compressing CSS/JS – not at all because I think my code is worth reading, it’s just a nice thing to do in case anyone ever takes the time to look!

I’m sure I am not the only one who has learned a huge amount by reading source code, so be nice, be open, share the love!