Fancy formatting

December 21st, 2007. Tagged: JavaScript, misc hackery, php

Writing readable code means proper indentation. Usually you'd tab (or use 2 or 4 or 3 spaces) after every curly bracket. Something like this:

if (true) {
    // indent
    if (false) {
        // another indent
        // and some more
    }
}

Same goes when you have a bigger hash/object sort of thing:

var memememe = {
    name: 'Stoyan',
    family_name: 'Stefanov',
    blog: 'http://www.phpied.com',
    kids_count: 2,
    books_count: 3,
    occupation: 'programmer'
}

Sometimes I find myself going a little fancy and aligning all the values in the name/value pairs:

var memememe = {
    name:        'Stoyan',
    family_name: 'Stefanov',
    blog:        'http://www.phpied.com',
    kids_count:  2,
    books_count: 3,
    occupation:  'programmer'
}

But recently, inspired by Firebug's Net panel way of presenting header information, I tried aligning the keys to the right in addition to aligning the values to the left. So I ended up with something like this:

var memememe = {
          name: 'Stoyan',
   family_name: 'Stefanov',
          blog: 'http://www.phpied.com',
    kids_count: 2,
   books_count: 3,
    occupation: 'programmer'
}

Fancy, eh? I liked the way it looks. But then I thought that when writing maintainable code, anything fancy suggests uncommon, uncommon suggests that other team members won't be using it, so it means breaking the rule #1 of writing maintainable code: be predictable. (this also happens to be rule #1 of other common activities, such as driving on the highway and designing usable web sites)

This type of formatting is also not easy to type in an editor, so it will require a little more effort. Those two drawbacks are enough, I believe, to dismiss this idea. But I can't help myself liking the way the code looks. Here's a piece of PHP, which looks even better than javascript, because even more characters are centered.

<?php
$memememe = array(
          'name' => 'Stoyan',
   'family_name' => 'Stefanov',
          'blog' => 'http://www.phpied.com',
    'kids_count' => 2,
   'books_count' => 3,
    'occupation' => 'programmer'
);
?>

Ain't that cool?

Tell your friends about this post: Facebook, Twitter, Google+

7 Responses

  1. I fin myself a bit too lazy to organize this. There definitely should some time come a text editor that auto does all kinds of formatting, including transformation of it. So if you load a file, the editor transforms it to your preferred formatting, and when you safe it, the file will be transformed to a ‘standard’ (like the PEAR formatting).

  2. Stoyan Stefanov’s Blog: Fancy Formatting…

    Stoyan Stefanov has a fun little post showing an interesting formatting ……

  3. [...] Stoyan Stefanov has a fun little post showing an interesting formatting trick to make reading arrays/hashes easier: Writing readable code means proper indentation. Usually you’d tab (or use 2 or 4 or 3 spaces) after every curly bracket. […] Same goes when you have a bigger hash/object sort of thing […] But recently, inspired by Firebug’s Net panel way of presenting header information, I tried aligning the keys to the right in addition to aligning the values to the left. [...]

  4. [...] Stoyan Stefanov’s Blog: Fancy Formatting Posted in December 21st, 2007 by admin in Uncategorized Stoyan Stefanov has a fun little post showing an interesting formatting trick to make reading arrays/hashes easier: Writing readable code means proper indentation. Usually you’d tab (or use 2 or 4 or 3 spaces) after every curly bracket. […] Same goes when you have a bigger hash/object sort of thing […] But recently, inspired by Firebug’s Net panel way of presenting header information, I tried aligning the keys to the right in addition to aligning the values to the left. [...]

  5. I believe Apple’s Xcode has this kind of formatting rules build in. It looks really nice with Obj-C’s syntax for calling methods.

  6. Personally, I hate the way this looks. I’d tried it a few times, but the fact is that human eyes are trained for left aligned text, and when skimming, that’s really useful. I like the case of lining up the values as well as the keys. It makes skimming much easier, but it could make following lines harder (your eyes get lost in whitespace)

  7. I am web surfing a lot more than 3 time lately, yet I never ever discovered any intriguing article such as your own property. It can be attractive well worth plenty of for me personally. Professionally, if virtually all online marketers as well as web owners built excellent articles since you have, the world wide web is usually additional very helpful than ever before.

Leave a Reply