Use coffeescript for better markup and code readability

As a designer / developer, you always want to use tools that make your job easy and painless. This is the reason tools like ruby on rails or other awesome popular frameworks were invented. The pain of spending hours sweating to just create one function / method in your app is now long gone, at least for those who know about these tools.

Throughout my experience designing and developing, the most important aspect of my work has been time, everything revolves around time and anything that can help in saving time is always welcome. I have to admit though, i was never interested in coffeescript until i started learning Ruby on Rails.( I believe one of the advantages of Rails is it makes you a better programmer because it introduces a lot of things that you may have not been interested in).

So what is coffeescript? according to the official coffeescript website  "CoffeeScript is a little language that compiles into JavaScript",  that's it!, what that means is that instead of writing lots of js codes just write coffeescript,  compile it and voila! you get a JavaScript file. i will give you an example, suppose you are writing a jquery function to add a css class to your unordered list items this is how you would do it in plain 

jQuery(function(){
	$('#navbar li').addClass('no_bg');
});

this same code can be written in coffeescript like this

jQuery ->
   $('#navbar li').addClass('no_bg')

As you can see the second code snippet is much more readable and takes less time to write, the most notable difference in coffescript is the the function() keyword becomes ->(some people call it dash rocket), the curly braces are replaced with indentation, and semicolons at the end of statements are replaced with nothing, no semicolons,

The next thing to do is just compile the coffeescript file and you get your js file, so how do u compile coffeescript to javascript?, you need a compiler aka install nodejs into your pc/mac/linux, go to http://www.nodejs.org and download it, after installing nodejs open your command line tool install coffeescript by running the command 

npm install –g coffee-script

Next step is to create your coffee file save it with .coffee extension, then open your commandline tool, run coffee compile filename.coffee(replace filename with the real name of your file),  make sure your coffee file is in the same directory that you are running the command from or you are going to have to type the full path, when the compilation is complete and successful, you will see another file in your working directory with the same name as the coffee file but with the .js extension.

Things to Note

If you are having any problem just leave your comment and we'll try to help you get started with coffeescript

You can not reverse compile a js file into a coffee file using the coffee compiler
Functions that take arguments like this 

jQuery(function(e){
 e.preventDefault();
 $('#navbar li').addClass('no_bg');
})

In coffeescript this becomes

(e) ->
  e.preventDefault()
  $('#navbar li').addClass('no_bg');