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

CSS Code

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

1
2
3
4
5
6
7
8
9

#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?

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:

1
2
3
4
5

<div id="header">
	<form action="" method="get" class="search">
		<button type="submit">Button</button>
	</form><!--/.search-->
</div><!-- /header-->

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:

1
2
3
4
5
6
7
8
9
10
11

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!”.

• List of many (MANY!) free icons
• Mission Impossible – A diagonal navigation menu with css. Some issues on big menus, but it’s a great idea!
• Wordpress 2.6.5 is available. But if you already have a blog, you already know that
• Do you know that you can use Wordpress built in JS libraries (like jquery, prototype, and so on) with no effort? MUST read for WP theme developers
• Section 508 guide. Even is only for US, it’s a nice reading for guys who get work from US
• Yet another jQuery based slider : s3Slider
• The Art & Science of CSS for FREE. All you have to do is to folow sitepoin on tweeter.com
• Chris Coyier (you know, the guy behind the css-tricks.com) said: it’s wordpress week! Every day you will find a nice article related to wordpress.
• Do you know jQuery? On themeforest you can find a series of jQuery tutorials for absolutely beginers. Worth a shot!

I hope you like it guys!

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$('.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:

1
2
3
4
5
6
7
8
9
10

<dl class="sortable">
	<dd id="sotableEl1-1"><a href="updateUrl.php?id=sortableID-1" class="move">move</a></dd>
	<dd id="sotableEl1-2"><a href="updateUrl.php?id=sortableID-1" class="move">move</a></dd>
	<dd id="sotableEl1-3"><a href="updateUrl.php?id=sortableID-1" class="move">move</a></dd>
</dl>
<dl class="sortable">
	<dd id="sotableEl2-1"><a href="updateUrl.php?id=sortableID-2" class="move">move</a></dd>
	<dd id="sotableEl2-2"><a href="updateUrl.php?id=sortableID-2" class="move">move</a></dd>
	<dd id="sotableEl2-3"><a href="updateUrl.php?id=sortableID-2" class="move">move</a></dd>
</dl>

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.

• OXID eSales is an Open source e-shop which can be a better alternative to OSCommerce, Zencart, and other ANTIQUE shops.
• If I start talking about shops, take a look at simpleCart(js). You don’t need nothing but a paypal account and few minutes to set up. No PHP, no MySQL, no nothing (but if you want, you can use).
• And the last link for shops will get you to Sitepoint: How to pick the right shopping cart? Seven carts reviewed
• Sort your tables with no effort and no huge libraries like prototype or jquery (even if I am a big fan of jQuery, I can’t use it on every single project, especially when is a small project)
• Kaltura – Open source video platform. Which mean you can start your own youtube and hope that google will buy you
• Choose a PREMIUM Wordpress theme. For FREE.
• And the last link is still about Wordpress: 10 Tutorials for working with with comments(best of!).

• 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.