So, tell me, how many times have you annoyed with very long pages (such as this blog) and wished for a single click way to jump to top of the page!? If your answer is many, then this tip might give you some relief – add a bookmarklet to your bookmarks toolbar that jumps to the top of the page for you.

Here’s the dead simple way to do it. Just drag this link to your bookmarks toolbar: ^

Here are the manual steps:

1. Add a new bookmark.
2. In the name field, enter either ^ or UP or *whatever*!
3. In the location/URL field, enter: javascript:window.scrollTo(0,0);
4. Save it.

Happy jumping around!

When you delete every records from a table, which has an AUTO Increment ID field, the delete option will not reset the Auto Increment number. For example, if the table had 5 rows, and you deleted all the rows (either one by one or through delete from tablename where 1;), and then if you insert a new row, it will get a ID value as 6 not as 1. Because the auto increment value is not reset.

The easiest way to reset the auto increment number is to use the query truncate tablename; which removes all the rows from that table and resets the auto increment back to 1.

But if you want to do it visually, phpMyAdmin provides options for that:

1. In phpMyAdmin, open the table for which you want to reset the auto increment number.
2. Then go to: Operations -> Table Options. 
3. Reset the AUTO_INCREMENT field to whichever value you want and save the changes.

That’s it. The next time, when you insert new records, they will start from the auto increment number you set above.

I have started using Sublime text as my preferred code editor (for JS, CSS, Coffee). But, I still rely on Eclipse for writing Java code because it auto-imports Java packages and auto suggests variables and method names from my custom class files.

Working on multiple editors throws in another problem: whenever I make a change in some file outside of Eclipse, the IDE does not silently reload. It shows a blank page saying “The resource is out of sync. Press F5 to reload”. The message started annoying me soon as I had to switch back and forth often.

It is not just for the multiple editors. Even when I do a git pull, the resources go out of sync.

Then, I found a workaround for this. Eclipse provides a built-in option that auto reloads a resource if its out f sync. Here’s how you  can enable it.

Go to Window -> Preferences -> General -> Workspace and check the option “Refresh using native hooks or polling”.

So, the next time when you try to open a out of sync file, the IDE will sync it for you (thus saving you a keystroke, one at a time ).

I’m using Sublime Text 2 in my Ubuntu machine. But unlike Windows, I couldn’t just right click on any source file and say “Open with Sublime” (may be because I just copied the binaries to a folder so that the editor didn’t register itself to the OS). Because of this, whenever I want to edit a file using Sublime, I had to use the File > Open File dialog, which is not an ideal way to do.

Since most of the time I would be inside a terminal when I want to edit a file, I found a workaround for this problem – using the Unix alias w/ parameters.

In Unix, we can create shortcut names to any long commands so that it saves our precious time (which we can invest back in Facebooking!). For my issue, I also need to pass the file name to edit as a parameter to this shortcut alias. So, I needed to create a function.

Below is the code for this. I have placed this function definition in my .bashrc file so that it is available at my service whenever I open the terminal.

You need to replace the correct path per your installation location!

Reviews of the best unix hosting providers including information on their prices, uptime, support and features can be found at businesswebhostingplans.com.

As part of this blog’s re-design, I wanted to show the number of posts and comments as a widget in the sidebar. But I couldn’t find a plugin that does exactly what I wanted. So, I wrote one on my own.

Below is the source code for this wordpress plug-in which you can drop it in your plugins folder and then activate it as usual. Then, in your Widgets section, you’ll see a new widget that you can use it in your sidebar.

Source for WordPress StatsBoard plugin to display the posts and comments count:

You can use the plugin however the way you want, of course, at your own risk!

Today I got stuck on what could be a simple problem to long time Ubuntu users – making changes that require root access.

I never faced this problem until today because my Ubuntu user account/password was enough to make system level changes as it was treated like admin user by Ubuntu.

Today I tried to modify the directory /var/www which is owned by the root. Since the folder is not owned by me, Ubuntu asked me to enter the root password and I typed my Ubuntu user password. It didn’t work, obviously.

Then I tried to escalate the permission level to root, so I tried the command: su root and gave my Ubuntu user password. This also failed.

After googling sometime, I found out that,

1. Ubuntu does not allow you to directly login as root.
2. The first Ubuntu account you create is treated like admin account.

So, in order to escalate yourself as a root user in Ubuntu terminal, I had to give the command: “sudo su -” (without quotes) and then enter my current Ubuntu user password. After that, I was escalated to root user and then able to modify the /var/www folder as I wanted. Piece of cake!!

Often I need to pull some content out of web pages. Of course, I can always do a simple Ctrl+C. But many times, I want the scrapped content to be in a different format than it’s already in. So, I used to write Java code that downloads the content and do some XML parsing and then converts it into the format I want. But, this became a tedious process soon.

So, these days I figured out another easy way to do the web scraping. JQuery!

IMO, JQuery is the best tool to do the DOM parsing and content extraction. Of course, that’s why the JQuery library is built for.

But the problem here is, not all websites include JQuery with them and even if they do, you can’t just go and execute your JavaScript code in amother person’s website.

Thanks to Scratchpad from Firefox which solves the above problem. Starting last August, Firefox comes with a built-in webdev tool – Scratchpad that enables you to execute your own JavaScript code in the context of any website.

So, this is what I do to scrape any public content from any web page:

1. Open the page in Firefox.
2. Press Shift+F4 or go to Firefox menu->Web developer->Scratchpad to open the JavaScript editor.
3. Include the below lines to add JQuery library to the current page (thanks to this page).

   var GM_JQ = document.createElement('script');
   GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';
   GM_JQ.type = 'text/javascript';
   document.getElementsByTagName('head')[0].appendChild(GM_JQ);

4. After that I can use any valid JQuery statement to navigate through the page content and parse it.

   var pages = [];
   $("#Text1 table a").each(function(){
       pages.push($(this).attr('href'));
   });

Caution: Some websites may prohibit web scraping. So, please make your own judgment before scraping their content! Just saying!

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!

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)!

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.