How do you format your code?

I’ve been asked few times how do i format my code. I try to stick to a easy to read and understand style. Sometimes i do, sometimes i don’t. Let’s talk first about those times i do :D

CSS Code

Each child is indented with a tab. So, i have this style:

#header {

}
	#search {

	}
		#search button {

		}

When you read only CSS you know that #header is the parent, #search is his child and the parent for button. Easy to read, easy to understand, right? :P

I try to avoid code like:

#parent #another_parent #header #search button { }

Because is kinda bogus.

I saw some guys who wrote their code on single line, without any indentation. Even if you have a less KB file, the result is hard to read and edit. Even though, i use very rarely one line code when i have to add one-two rule to a selector ( something like .element { color:red } ).

HTML Code

Actually… Somehow, i have same rule here: every child have a one tab indent:




As an extra info: when i have large blocks of code (div, forms), on closing tag i add a comment with the id or class name: if the block has a class, the closing comment is /.class name and if is an id /id name

Again, easy to read and to maintain, especially when you reuse some of your code.

Javascript/jQuery Code

Well.. Probably is already clear enough how do i do:

function function_name() {
	var someVar = 1;
	if( someVar === 1 ) {
		alert('someVar is 1!');
		for(i=0;i<10;i++){
			alert(i);
		}
	} else {
		alert(':(');
	}
};//function_name

Conclusion

The main keywords are: indent and comments. You don't have to overuse indent, because the code will be impossible/hard to read. Also, don't over-comment your code. Don't comment the obvious :

var foo = 'bar'; // the 'foo' get 'bar' value

Well.. I can't say nothing else but „happy coding!”.

Some links

I hope you like it guys!

A nice sortable trick (jQuery UI)

On a recent project i had to use sortable a LOT. I mean over 3-4 different sortable on page. So, how i manage to avoid heavy code?

One function to rule them all:

$('.sortable').each(function(){
	var _t = $(this);
	_t.sortable({
		handle:'.move',
		items:'dd',
		update:function(){
			$.ajax({
				type: "POST",
				url: $(this).find('a.move:eq(0)').attr('href'),
				data: _t.sortable('serialize'),
				cache: false
			});
		}
	});
});

The HTML markup (for two sortables) is this:

move
move
move
move
move
move

This means that you don’t need to use an ID for each sortable. Instead, you add the id to the update URL, on MOVE handler (which MUST be a link). I think this is pretty simple and useful trick.

Some links

Sunday updates

  • WordPress 2.7 is out. Not final, but still a beta 1. The admin panel is AWESOME!
  • Firebug 1.3 is out. Again, this is a beta. Some of the features:

    * Net panel re-implemented, more function, no more double loads (Requires Firefox 3.0.4+)
    * Script panel rendering much faster for large Javascript files
    * Scope chain in Watches panel when stopped on breakpoint
    * Console/Command line re-implemented to avoid some undefined console problems
    * Tracing console added
    * New locales and better locale support

  • Win $700. Actually, there is ten premium wordpress themes that worth $700
  • Do you really need version control for your code? These guys convinced me i do. And bonus, review of few version control systems on smashingmagazine.
  • Absolutely FREE CSS menu framework.