Pretty pretty pages

Like a lot of programmers, I really enjoy writing code that looks nice on the page. No matter what language you choose to work in, you can always employ blocks, whitespace, and names to create something that pleases your eye. Some languages (like Ruby) may provide you with attractive and useful idioms and synonyms that can help you achieve that perfectly worded method.

If you are a web application developer, you’ll probably follow up your tiny masterpiece with a hideous blob of HTML (mixed with your language of choice), CSS and Javascript that places the interface on top of your application.

Prettier (dynamic) HTML pages

Witness – one hideous blob (taken from the popular phpBB). I just randomly chose this – but I think that it makes a good example. phpBB uses a templating system so the page looks sort of like a generic dynamically generated page and not PHP in particular. It is also an example of code that could use a little CSS love but I’m not going there :)

For Ravelry, I used the fabulous Haml. With Ham will rescue your pages from drowning in angle brackets, closing tags, and unnecessary verbosity. I’m too lazy to bother with posting syntax highlighted code here, so I give you a screenshot instead. Haml vs regular HTML:

Your view (HTML, etc) is probably a huge part of your code base – don’t you want it to be as clean and maintainable as the rest of your application? Haml may not be the single best way to author pages, but it demonstrates that there are alternatives to the same old mush. If you are coding something with Ruby on Rails – I highly recommend it. You’ll have more fun – I promise. If you are coding in some other language, things like Mako and Smarty can help you tidy up a little but you are still stuck with HTML and all of its warts. Of course – you might like the warts :)

Oh, and PHP folks may want to take a peek at PHAML.

Prettier Javascript

Javascript is sneaky – if you don’t keep an eye on it, you’ll find that it will metastasize into a giant meandering file.
We don’t let our other source file get huge – why should Javascript get a break?

Here are a couple quick tips for improving and organizing your Javascript code:

Organize your code into “packages”.

I’m not using one of the Javascript frameworks that provides a notion of packages, but it is easy to roll your own. I follow this Javascript module pattern.

Here is a tiny example – this is all the code you need:


var R = {};
R.messages = function() {
  var showMessageIndicator = function() {
    // this is a private method that shows a little animated activity indicator icon 
  };

  return {
    saveSelectedMessages: function() {
      showMessageIndicator();
      // save the messages... etc...
    }
  };
}();

Then in my page, I have an onclick event that calls “R.messages.saveSelectedMessages();” Once all of your Javascript is safely bundled up in neat little packages, you can get even fancier.

Separate source files for development

There are several ways to allow many individual JS source files in development without adding complexity or inefficiencies to your site. I chose to have my individual files packaged into a single versioned .js file as part of the release process. This allows me to keep my pages simple (the same 1 js file for every page) and set cache-related settings to the limit so that browsers don’t repeatedly download the same unchanging Javascript file. asset_packager does this work for me.

try a javascript framework

Beautification is one of the many reasons why a Javascript framework is useful. Most will provide shorter, simpler ways of accomplishing common tasks while adding some consistency to your app’s UI code. You’ll usually get useful effects, controls, and other UI goodies as part of the package. Don’t waste too much time coding commonly used GUI elements – the work may have been done for you already.

People endlessly fight about which is “best”. Take your pick – see what fits your taste, and consider whether your webapp framework has a preference.

A few popular choices:

Prettier CSS

CSS – I love you and I hate you. Stylesheets too quickly become large and unwieldy and full of small bits of repetition (trees of long and longer selectors and so on…). I don’t know how I’d even manage to make sense of my CSS without Firebug‘s help.

The Haml folks bring us Sass. I’ve really have to check it out – by the time it was released, I was already saddled with way too much icky CSS. With Sass, nested elements are actually expressed that way (imagine that!) and lots of repetitive tag/id/class names are wiped away. Unfortunately, I can’t just run css2sass and be done with it – there are some unintentionally sneaky things going on with overriding and precedence in my CSS and I have to fix those up first.

No idea what the heck I am talking about? I swiped an image from Ajaxian that illustrates how Sass nices up CSS. This is better than typing selectors over and over all the way down to “#menu li a:hover”, no?

I’d also recommend that you split your CSS into separate files early on. Because of the overriding etc that I just mentioned, it can become much harder to split and organize a single CSS file once it has grown too large.

ugh.

PS - because Ravelry’s Javascript and CSS is packaged and minified, you won’t be able to peruse it for examples. phew! ;) The files don’t at all resemble the code that I look at while developing.

Comments (6)

  1. jiva wrote:

    This is mighty interesting even for a semi geek like me. I cant code but I sort of understand. I showed my man all this and he says you know your onions! take that as a HUGE compliment, I consider him to be a great coder, so that makes you one too. I do LOVE raverly and I’m mighty impressed with what you have done.

    Thursday, January 3, 2008 at 7:04 am #
  2. Ben Curtis wrote:

    Hi, Casey. My wife is a big Ravelry fan, and since she and I build stuff on the web (and are itching to build something simpler and more interesting than our clients ask for!), I’ve really been really interested in how you’ve managed to pull this off near solo. Thanks for starting this blog. Great insights!

    Although I’m in the opposite camp as you about whether things like HAML or SASS are good (I think layers of interpreted code add to complexity when in a team environment), I wholeheartedly agree about good looking, well organized code.

    And those screenshots look pretty nice. What editor are you using? It doesn’t look like my trusty BBedit, or that new-fangled Coda, or even Xcode. What is that text editor?

    Thursday, January 3, 2008 at 9:02 pm #
  3. I can’t believe you’re not using sass yet! It’s worth dedicating an afternoon to :-)

    Friday, January 4, 2008 at 10:08 pm #
  4. Jaya wrote:

    Hi Casey, I just discovered this blog. I am a systems/database geek who works in the area of virtualization. I’m glad you like Xen. I was wondering if you’d looked at the Linux KVM facility and what you think of that vs Xen.

    The web application dev stuff is interesting but more educational for me.

    I use Ravelry as an example of how to integrate various technologies and the men at work roll their eyes when I tell them it is a knitting/crochet site

    Thanks for letting us geeks look under the hood

    Saturday, January 5, 2008 at 9:14 am #
  5. Ken wrote:

    Hello,

    Have you considered TEACHING website design? Perhaps a textbook on design?

    You are already better than many of the bigtime pros, definitely more code/web savvy than many instructors (me included), and you posses a very clear, concise communication ability.

    Just a thought. Ken

    Tuesday, January 15, 2008 at 4:23 pm #
  6. Katie wrote:

    Dear Casey, I am not a coder but work the front side of technology. I teach tech to teachers so they can integrate it into their curriculum. I love to help teachers understand that they don’t have to be afraid to try. Those ‘ah-hah, I get it!’ moments are awesome.

    I also love to knit and crochet and am thrilled to find your wonderful site. My sister was just accepted into the community and I am waiting for my invite.

    Thanks for a very enlightening posting on your creation of ravelry.com and giving me some ‘ah-hah, I get it!’ moments, too.

    Saturday, February 16, 2008 at 11:39 am #