In a “web 2.0” age, anyone who knows what to look for in a well-functioning website will give a subject site the ol’ once-over, and just as quickly, hit a few familiar keystrokes and peruse the site’s source code. Of course, with Ajax-based web apps gaining in popularity, “source scoping” is becoming a futile effort.
I, for one, still prefer accessible, source-outputting, server-side languages. I also believe that code, in any format, can be as beautiful as the interface it powers. In my experience in this industry, I’ve done far more work as a designer than a developer. Yet, in the development experience that I do have, I have structured the server-side code to output well-formed, beautiful client-side code. Plainly put, I have an insatiable need to style my code.
Below, I’ve provided two versions of the code behind this site. Compare the two for yourself. I believe you’ll see what I mean.
Un-Styled Code
<div id="notebook"><h1>Notebook</h1><p id="box">The thoughts and ideas of one ambitious, inqusitive, observant, verbose web designer.</p><div class="entry"><h2> On Back-End Beauty</h2><p>In a "web 2.0" age, anyone who knows what to look for in a well-functioning website will give a subject site the ol' once-over, and just as quickly, hit a few familiar keystrokes and peruse the site's source code. Of course, with Ajax-based web apps gaining in popularity, "source scoping" is becoming a futile effort.</p></div></div>
Styled Code
<div id="notebook">
<h1>Notebook</h1>
<p id="box">The thoughts and ideas of one ambitious,
inqusitive, observant, verbose web designer.
</p>
<div class="entry">
<h2>On Back-End Beauty</h2>
<p>In a "web 2.0" age, anyone who knows what
to look for in a well-functioning website will
give a subject site the ol' once-over, and just
as quickly, hit a few familiar keystrokes and
peruse the site's source code. Of course, with
Ajax-based web apps gaining in popularity,
"source scoping" is becoming a futile
effort.
</p>
</div>
</div>
Is it just me? Or can the back-end be beautiful too?
The idea behind a styled interface is simple. We want whatever is public to look good. Well, I submit that source code has become public, and therefore, deserves just as much care and style as the interface.
I have to disagree with the notion that the first example is any less elegant than the second. Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times, though it is often mistaken for sloppy implementation. Further, the first example may well look as elegant as the second in the developer’s text editor of choice, but is “minified” automagically with any of several technologies. (Bundle Fu, YUI Compressor)
Inspector tools such as a Firebug or whatever-the-one-built-in-to-Safari-is-called are the new “view source” and pay no mind to whether you used tabs, 4 spaces, or even indented at all, as they show what really matters – the DOM in real time, nested and indented for your viewing pleasure.
I suppose at the end of the day it boils down to the old form vs. function debate.
http://developer.yahoo.com/performance/rules.html
http://en.wikipedia.org/wiki/Minification_%28programming%29