Hand crafted vs. machine generated code

Posted by Webmaster in Uncategorized

In a Hurry? Here’s the Cool Stuff

  • The old site had a lot of junk code. The current site runs on about 4% as much code as the old site.
  • The code that runs our site contains roughly the same number of characters as the Complete Works of Shakespeare.
  • The junk code eliminated in the redesign equals about 24 copies of the Complete Works of Shakespeare!


Site Version Files Size Copies of The Complete Works of Shakespeare
Pre-Redesign 6,978 139,106,100 bytes 24.91 copies
Post Redesign 983 5,485,441 bytes 0.98 copies
Difference 5,995 133,620,659 bytes 23.93 copies
Percent Change -85.91% -96.06%

If you Want the Details, Read On

Code as Text — An Apt Metaphor

Talking to real people about bits and bytes causes faces to go blank and eyes to go glassy real quick. Luckily I found a tool that makes sense to non-geeks (and makes a special kind of sense to literary geeks). A byte is essentially the storage space required for a single character of text. So when speaking of large numbers of bytes, up in the megabyte range, finding a sufficiently large work of literature as a plain text document gives us a very easy to grasp measuring stick. This is especially apt for my type of work because the vast majority of what I produce is written and stored as plain text files. HTML, CSS, JavaScript, XML, and even PHP are all written using glorified text editors. I could do most of my job using just Notepad were I so inclined. The College was nice enough to purchase a copy of Dreamweaver for me, so I use that instead. But even then I use it primarily as a text editor with a built in FTP client. Most of the “advanced features” go unused. I’ll explain why later.

Project Gutenberg hosts a plain text version of the Complete Works of Shakespeare. It’s 5,582,655 bytes in size. In other words, it contains about 5,582,655 characters of text. If I combine all the code used to run our site; ignoring Word documents, PDF files, images, and other “non-code” files, I come up with 5,485,441 bytes of code (or characters of text). So all the code that runs our site is roughly equivalent to 1 copy of the Complete Works of Shakespeare. The code that ran the old site would take up close to 25 copies. So the redesign effectively eliminated 24 copies of the Complete Works of Shakespeare worth of code!

What Happened to Those 5,995 Missing Files?

Most were obviously out dated. Several were orphan files that we no longer actively linked in to the “live” site and should have been removed from the server at the time the links were removed. Some were redundant and could be easily merged. For example, the old site contained around 100 contact us forms needing 8 files (and a database, which isn’t counted in my comparisons) each to run. The new site takes a different philosophy. In function we still have several contact us forms but that functionality is fueled by a single file (and a database, also not included in my comparisons). 1 file replaced around 800. Finally, we’ve got 50 or so pages of actual missing content that has been on my to-do list since before the redesign launched. I whittle away at that pile as time and priorities permit.

What Do You Mean by “Machine Generated Code”?

Tools like Dreamweaver can produce all the code for you. I could work all day in “design view” rather than “code view” and if I needed something more advanced that the drag and drop sort of interface of the design view I could probably find a Wizard to run that would spit out the code for me. In theory that saves time. I think that’s debatable.

Maintaining the redesigned site takes about 1/8th the time it took to maintain the old site. That’s a big reason the redesign took so long, the majority of my day went into keeping the existing site standing. Part of that increased efficiency is because I wrote most of the code in the new site so I’m very familiar with it. But if I get hit by a bus tomorrow I think my replacement would have an easier time maintaining the site post-redesign as well…provided my replacement has a basic grasp of the code s/he’d be inheriting.

I think of it as the difference between a craftsman and a tool user. When a book makes a claim like Teach Yourself Dreamweaver 8 in 24 Hours what the author/publisher actually means is teaching you to use a tool. Push these buttons to get this sort of result. You can do that in 24 hours. 3 years later Dreamweaver 10 comes out and half the buttons have moved and you have to retrain. You’re a tool user. Your abilities are tool dependent. A craftsman knows how to use a tool appropriately, but also understands the underlying technical details well enough to be largely tool independent.

The old site had a bunch of photo galleries that were produced with some sort of Wizard interface. Much like the contact us forms I mentioned earlier, these galleries were independent and self-standing even though the functionality was identical across the board. Essentially the only thing that changed was the folder full of images fed to the Wizard to produce the gallery. Someone with a craftsman’s approach sees that and realizes that by converting the location of such a folder to a variable, all the duplicate code can be shared across all the various galleries. Multiply that sort of optimization times several thousand pages and you’re left with roughly equivelant content running on 4% as much code.

But Does That Really Matter?

So I’m essentially bragging about saving 128 megs of hard drive space by optimizing some code. Big whoop. Hard drive space is down to something like 30 cents a gig. So the spaced saved is worth a few pennies, right? This is how I explain spending 2 years on a redesign and justifying my value to the organization? Couldn’t everything I’ve said so far be restated as I’ve painted the College into a corner and set it up so that I can’t easily be replaced by a “tool user” who would probably work for a lot cheaper than me?

That really all boils down to a difference in attitude and perspective.

It’s not just about saving hard drive space. With around 10,000 unique visitors a day that’s also less bandwidth used to serve up each page and less code to be processed by the server to process each request. More importantly, it’s also less code to be processed by search engines like Google. In short, efficiently coded sites perform better.

We’re still talking about the Complete Works of Shakespeare 400 years later because those 5 and a half million characters of text were carefully crafted. Anyone could use a tool like The Post-Modernism Generator to churn out 5.5 million characters in a matter of minutes. Maybe we could even get such a text published. But it wouldn’t be the same as such a text crafted with care over a lifetime. I’m no Shakespeare, and I didn’t spend a lifetime crafting the redesign of VolState.edu, but I believe quality of my work exceeds that produced when we surrender our code to the minds of machines. I think that quality was a worthy investment of my time. And I think the College deserves such quality.