Best practice to clearing default text with jQuery

Having default text that we later removed when retrieving user input is common in today’s website. Many web developer use this to enhance usability of the website, so user know what to type in what field. There is a lot of way to do this, using both focus and blur event. For example, this is the shortest and easiest way that is commonly used:


<input type="text" id="example-field" name="example-field" value="Your name" onfocus="if (this.value=='Your name') this.value=''" onblur="if (this.value=='') this.value='Your name'" />

However, this approach will be a pain when you are managing a lot of input fields. You will need to type the default text three times, which can lead to a trivial typo. Also, since we check againts the default value, we will not be able to accept this value. Here is the solution, by using the simplicity and power of jQuery, this is a clean and a better way to do this.

Moving Stick Figure with CSS 3 and jQuery

With CSS 3, creating a stick figure is easy and fun. But it is even better if it can move. So here it is

Click here for the demo.

This currently worked on Google Chrome and Safari. However, in my test, Safari lagged a lot in the animation. So Google Chrome performed the best!

Enjoy… 😀

Update: This is also submitted on Smashing Magazine CSS 3 Contest, you can preview and download from there too. 🙂

Installing Aptana Studio on Ubuntu 9.04


Aptana Studio is a powerful IDE for web development. It supports HTML, CSS, Javascript and the server side script such as PHP, Ruby and Python. Even more, it support a wide variety of Javascript library. It based on Eclipse and available as a standalone application or as a plugin for Eclipse. Aptana Studio is available on Windows, Mac and Linux. And the best of all is, Aptana Studio is free. Here I will post how I install the recent version of standalone Aptana Studio, 1.5, on 32 bit Ubuntu 9.04 Jaunty Jackalope.

First of all, download the Aptana Studio on http://www.aptana.org, choose the Linux and 32 bit version, or change it accordingly to suit your machine. Before we start installing the Aptana Studio, we need to ensure we have installed the sun-java6-jre and sun-java6-plugin. To do that, simply type this in terminal

A little guide of using jQuery

JQuery is Javascript library that can help you write code smaller and easier to take a good care of event handling, animating, AJAX and more. With jQuery, we can make our webpages more beautiful. You can see that I used it for my side menu here. 🙂

This article didn’t intend to teach you how to became the jQuery master and I’m far away from a master. It just for the case you didn’t know about jQuery yet and want to start with it, then this will be a good guide for you. If you want a more complete tutorial, go to the jQuery documentation.