Sometimes, I’m just lazy to type ‘console.log‘ to print some data on the Firebug console. I often wanted to have a simple echo() function that spits whatever it gets to the console.

So, in every single JavaScript project I work on, I used to have this utility method:

function echo(obj){
  console.log(obj);
}
...
echo('Hello World');

It worked well. But there was a problem. The printed message on the console will always show the line number of console.log  as the source line number instead of showing the where exactly the echo() function is invoked.

There’s another way to solve this. Instead of creating a new echo() method, I just need to bind it to the existing console.log() to a variable and the logging works like a charm. Like this,

window.echo = console.log.bind(console);
window.oops = console.error.bind(console);
...
echo('hello world');
...
oops('I did it again');

The the methods became shorter and the correct line numbers printed on the console!

Related Posts

• Sorting an array of custom objects in JavaScript
• Intercepting onclick event in JavaScript using JQuery
• JavaScript getAttribute method
• JavaScript For loops
• How to create a horizontal navigation website using JQuery.

At any given point of time, you can find at least 4 windows/editors opened on my screen. As a web developer, it is not unusual for me to work on several files at the same time. So, to reduce the Alt+Tabbing, I try to have most of the windows visible on the screen. Following is a list of tools that help me to do so.

1. Two monitor setup

Along with my laptop screen, I have setup one additional monitor. This gives me lots of screen space which I can make use of. In fact, I would like to setup one more monitor too, but the limitation of laptop graphics card holding me back.

2. Grid plugin in Compiz

I’m running Ubuntu on my laptop. I have installed Compiz which provides several plugins to fine tune the Ubuntu UI. Grid is one such plugin for re-sizing windows.

Once enabled, you can press Ctrl + Alt + <KeyPad 4> to re-size the current window and fit it on the left side of the screen. You can repeatedly press the same key combo to switch between different window sizes. There are other keyboard shortcuts too which positions the current window in different directions.

Unfortunately, after upgrading to Ubuntu 11.10, the Grid plugin does not work correctly. There’s a bug raised for this and hopefully it’ll be fixed and the world will come to an order.

3. Terminator

Terminator lets me to run multiple terminals inside a single window. Initially it opens with a single terminal window. Then, I could split up that window either horizontally or vertically to get additional terminals. I can go further and split them again until I get the number of terminal I want. Pretty neat!

You can download Terminator from the Ubuntu Software center.

4. Eclipse split editors

Fortunately, Eclipse comes with a built-in support for having two editors side-by-side. Just drag the editor until it sits on its own space and you’re all set.

Now the only things that concerns me is the default file manager in Ubuntu. I do not feel the Nautilus file manager is that effective. For instance, I couldn’t copy the current path name or split the screens to have two folders opened at the same time.

I’m still looking for a workaround for this. Would appreciate if you are using any better file manager than Nautilus, please leave a comment!

Edit: Nautilus already does both the things. Thanks to Leandro Facchinetti for the awesome tip (in the comments section)!

Related Posts

• Fix for viewing Tamil font in Chrome – Ubuntu
• Java.lang.VerifyError: Expecting a stackmap frame at branch target – JDK 7
• How to create a new image in GIMP with the size of clipboard image
• Easy way for setting up the LAMP stack in Ubuntu Linux command line
• The problem with the ATM Menus

Backbone.js is recently getting lots of traction among the web developers because of its ability to organize the JavaScript code. It provides the structure (Model-View) around which we can build our JavaScript heavy web applications.

I have started learning backbone.js for my personal project and I’m going to document my learning along the way. Let’s start with a simplest possible example: A Hello World tutorial in Backbone.js (duh!)

You are welcomed to point out any anti-patterns/mistakes that I made in this tutorial so that I can update the content for better.

Demo | Source code

The need for Backbone.js

Generally, we use JavaScript to handle UI events (click, keypress, etc), to process the UI data (innerHTML, etc) and to render DOM elements (appendChild, etc).

Without a framework like Backbone.js, each developer would implement the above logic in his/her own coding style. This might cause some maintenance issues if multiple developers are involved.

Backbone.js provides a structure to do the above operations so that it is easy to write a maintainable code with less effort.

With Backbone, you get the following constructs:

1. Model - used to represent your application data. For example, an Employee model.
2. Collection - used to hold a list of your model objects. For example, an Employees collection which contains a list of Employee model.
3. Views - each model & collection can be associated with a Backbone view. You can also create a view for an existing DOM element so that the view can respond to events generated from that DOM element.

That said, Let’s start building our application step by step.

0. Requirement

Our requirement is to create a application that gets a name from the user and says ‘Hello {name}’ and appends it to a list.

1. Create the User Interface

Let’s create our user interface first.

	<body>
		<header>
			<h1>Backbone JS - Hello World Tutorial!</h1>
			<h5>&lt;= <a href='#'>back to the article</a></h5>
		</header>

		<section id='UserInput'>
			<fieldset>
				<legend>Enter a name and click say hello!</legend>
				<input type="text" name="hello" placeholder="your friend name" value="veera" /> &#160; <button>Say hello</button>
			</fieldset>
		</section> 

		<ol id="HelloList">

		</ol>

		<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="underscore-min.js"></script>
		<script type="text/javascript" src="backbone-min.js"></script>
		<script type="text/javascript" src="hello.js"></script>
	</body>

As you can see, it’s a simple HTML document with a textbox, button to accept user input and a empty OL element to hold the list of hello messages.

2. Create the Backbone Views to represent the UI elements

We have two views in our UI: One that accepts user input and one that shows the accepted inputs as a list. So, we’ll create two Backbone views for this. Open the hello.js and type in the below code.

(function($) {

	var UserInputView = Backbone.View.extend({

		el : '#UserInput',

		initialize : function() {
			this.helloListView = new HelloListView();
		},

		events : {
			'click button' : 'addToHelloCollection'
		},

		addToHelloCollection : function(e) {
		}
	});

	var HelloListView = Backbone.View.extend({

		el : '#HelloList',

	});

	new UserInputView();

})(jQuery);

Because we are creating the Backbone views to represent the existing DOM elements, we can mention the elements in el option. You can use the CSS3 selector syntax here and Backbone will find the element for you.

All Backbone objects has an initialize() function. Above we are initializing the UserInputView with a reference to the HelloListView.

Each view can accept a events object. Within this, you can specify what are all the events this view will trigger and method name to handle the event. In our case, we have a click event for the button element and a method addToHelloCollection to handle the click event. It is important to note that Backbone searches for the elements mentioned inside the events hash (in this case button) inside the el. So the el element should contain whatever element you give in the events object.

3. Create Backbone Model, Collection and a view to represent the model

It’s time to create a Backbone Model to hold our application data. We can map each hello message to a model. Since we have list of messages, we’ll create a Backbone Collection too. Lets look at the code.

var Hello = Backbone.Model.extend({
		initialize : function() {
			this.name = 'name'
		}
	});

	var HelloView = Backbone.View.extend({
		tagName : 'li',
		render : function() {
			$(this.el).html('Hello ' + this.model.get('name'));
			return this;
		}
	});

	var HelloList = Backbone.Collection.extend({
		model : Hello
	});

Hello is the model object with a property name initialized to ‘name’. HelloList is the collection and we set this collection model property to our Hello model.

In Backbone, each Model and Collection can have it’s own view to render themselves. So, we created a HelloView for the Hello model with the render() method to generate the HTML output. Since this view is not associated with any existing DOM elements and Backbone needs a wrapper tag to surround the rendered output, we provide the tagName property with ‘li’. Because of this, when the Hello model generates its HTML code (in render() method), it will be surrounded by li tag.

4. Combine everything: The final code for hello.js

Lets update our hello.js file with this final JavaScript.

(function($) {

	var UserInputView = Backbone.View.extend({

		el : '#UserInput',

		initialize : function() {
			this.helloListView = new HelloListView();
		},

		events : {
			'click button' : 'addToHelloCollection'
		},

		addToHelloCollection : function(e) {
			var hello = new Hello({
				name : this.$('input').val()
			});
			this.helloListView.collection.add(hello);
		}
	});

	var Hello = Backbone.Model.extend({
		initialize : function() {
			this.name = 'name'
		}
	});

	var HelloView = Backbone.View.extend({
		tagName : 'li',
		render : function() {
			$(this.el).html('Hello ' + this.model.get('name'));
			return this;
		}
	});

	var HelloList = Backbone.Collection.extend({
		model : Hello
	});

	var HelloListView = Backbone.View.extend({

		el : '#HelloList',

		initialize : function() {
			_.bindAll(this, 'render', 'appendToHelloUL');
			this.collection = new HelloList();
			this.collection.bind('add', this.appendToHelloUL);
		},

		render:function(){

			$.each(this.collection.models, function(i, helloModel){
				self.appendToHelloUL(helloModel);
			});
		},

		appendToHelloUL : function(helloModel) {
			var helloView = new HelloView({
				model : helloModel
			});
			$(this.el).append(helloView.render().el);
		}
	});

	new UserInputView();

})(jQuery);

As you can see, we have two Backbone views:

1. UserInputView – which listens to the user interface events(button click) and update the model object with user input.
2. HelloListView – which listens to the changes in our model(add event) and update the user interface with the model values.

Well, that concludes this tutorial. You can see the completed application in action or fork the code in GitHub.

Related Posts

• The Rise of the Front End Developers
• Shortcut to console.log
• Sorting an array of custom objects in JavaScript
• Rock Paper Scissors and Bombs
• Intercepting onclick event in JavaScript using JQuery

It seems like the Chrome browser in Ubuntu has some issues in displaying Tamil fonts. I guess, other Indian languages also might be having the same issue. The weirdest thing is Firefox was displaying the Tamil content properly.

So, after searching through the Chromium group for a while, found the fix for this issue.

To fix Tamil font in Ubuntu Chrome

1. Open Terminal
2. Go to the folder: cd /usr/share/fonts/truetype/freefont
3. Delete FreeSerif.ttf: sudo rm FreeSerif.ttf
4. Delete FreeSans.ttf: sudo rm FreeSans.ttf
5. Close and re-open the browser.

The Tamil font should be displayed properly now.

Related Posts

• Git Tutorial – Getting Started
• App Engine Java development on Netbeans
• How to setup Java development environment in Ubuntu?
• Every single pixel counts
• Java.lang.VerifyError: Expecting a stackmap frame at branch target – JDK 7

When you are designing a web page and you are given only the single visual design image file, it is vital to slice the image into multiple smaller images to get the required image parts (logo, icons etc.).

In Photoshop world, slicing images is piece-of-cake. When you copy an image and choose “File->New”, Photoshop automagically sets the new image dimension as of the clipboard image.

But GIMP doesn’t do this! Wait…there’s another technique to achieve the same functionality in GIMP.

1. Open the image from which you want to cut smaller images and make them as separate files.
2. Copy/Cut your required section.
3. Now go to “Edit -> Paste as New Image” (or just Ctrl+Shift+v)
4. Bingo! you have a new image with the same size as of the one you just cut/copied.

Related Posts

• Easy way for setting up the LAMP stack in Ubuntu Linux command line
• Good news for GIMP users : GIMP 2.8 supports single window mode!
• Design changes
• Choosing a date time picker UI – jQuery
• Redesigning my home page as a game