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!

tldr; https://github.com/vraa/twikural

It all started when I asked the following question to my twitter friends:

Juts checking: If there’s a service that sends you a Thirukkural every day, would you be signing up for it?

— Veera (@vraa) January 31, 2012

My idea was simple: to send out Thirukural poems everyday to the people that are signing up for the service. Instead of sending it to email addresses, I decided to use Twitter and Facebook as my medium since that’s where most of the people are hanging out these days.

There were few tweeples responding to it positively. Even though there are already few other alternative services available, I decided to move on and build it as I thought the new service will be different and be a learning experience.

It took a weekend to code the 80% of the site and I hosted it on App Engine platform. And the site is live for the past few weeks – http://twikural.veerasundar.com

Now, the service has 31 followers in Twitter and 37 Likes in Facebook. It has already sent out 120 Thirukurals till date.

And, I’m now open sourcing the code. The project is now hosted @ Github. You are welcomed to check it out and if you’d like to contribute, feel free to send a pull request / contact me.

I would like to thank my fellow tweeples – @iGhillli, @anandhame, @mgobi_php   for their continuous support to this project.

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.

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!

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!

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.

In any web development company, there exists two different worlds; well there are more, but we’ll just focus on - front end (designers) & back end (developers)

The Front end guys are responsible for making something that is visible to the end users (THE LOOK). The back end guys are responsible for making the front end work (THE FUNCTIONALITY). Together, they both deliver a complete web application/site.

The back end developers would typically use programming languages, such as Java/C++/Python. Apart from talking to database and processing requests, they even have an arsenal of libraries to generate the site markup (JSPs, server side templates, etc).

Front end guys usually fill in by writing HTML documents and CSS files (merely a writer) to present this markup in an visually pleasing way and back end just take these templates to populate data.

Front end had only one option to do any logical operations, by using JavaScript - which has been used for a long time just to validate forms (and do some freaky stuffs).

Because of this cultural difference, there’s always been a ego-war between these two worlds. Even the company management would rate the front end guys par below the back end developers because the front ends guys don’t do any serious programming.

All was going fine until the web2.0 era. Now, the front end realized that they could use JavaScript to do much more cooler stuffs than just the form validation. The development of high speed JavaScript engines (such as V8) made it possible to run complex JavaScript code right in the browser. With the introduction of technologies such as WebGL and Canvas, even graphics rendering became feasible using JavaScript.

But, this didn’t change anything on the server side; the server programs were still running on JVMs/Rubys/Pythons.

Fast forward to today: The scenario is dramatically changing. JavaScript has just sneaked its way into the servers. Now, it is no longer required that a web application needs to have a back end programming language such as Java/C++. Everything can be done using just JavaScript.

Thanks to node.js which made it possible to run the JavaScript on the server side. Using MongoDB, one can replace the need to have SQL code and now store JSON documents using JavaScript MongoDB connectors. The JavaScript template libraries such as {{Mustache}}/Underscore almost removed the need to have server side templates (JSPs). On the client side, JavaScript MVC frameworks such as Backbone.JS enable us to write maintainable code. And, there’s always the plain old JavaScript waiting for us to write some form validation script.

With that, now it is possible to do the heavy lifting just by using JavaScript. The front end JavaScript programmers no longer need to focus on just the front end. They can use their skill set to develop the web application end-to-end.

This rise of the front end developers poses a real threat to the survival of back end developers. If you are one of that back end guy, do you already realize this threat? What’s your game plan to stay fit to survive this challenge?

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.

So, you have installed XAMPP on windows, changed its server port to a different number other than 80 and changed the MySQL root password to a more secure one. Now its the time to create some HTML files that will be served by XAMPP server.

By default, XAMPP serves any file that is located under the directory [xampp_installation_folder]/htdocs,  which means that you have to copy all your HTML/PHP files inside this directory. But what if you maintain a different folder for all your projects files and you want XAMPP to serve them too along with htdocs?

Lets make XAMPP to do this.

1. Open the file [xamp_installation_folder]/apache/conf/httpd.conf in any text editor.
2. Copy below lines after the htdocs <Directory> element after changing the directory to your own folder.

   <Directory "C:/path/to/your/folder">
       Options Indexes FollowSymLinks Includes ExecCGI
       AllowOverride All
       Order allow,deny
       Allow from all
   </Directory>

3. Then search for this string: <IfModule alias_module>. Inside that element, add a new alias as followed:

   Alias /yoursite/ "C:/path/to/your/folder/yoursite/"

4. Save the file and restart the XAMPP server.