mParallax - A visual treat

By Devang | March 5, 2009

I just came across mParallax built by Piksite team. It was a visual delight as i saw the demo of the image at mParallax’s home page. The parachute and the moving sky gave a nice feeling before my developer instincts took over and i was forced to think about the implementation part.

It felt like this must have been done using flash as the image is divided into layers which were moving proportional to my mouse movements. But to my surprise it was implemented using javascript. It was done using mParallax library.

As mentioned on the site

mParallax is an adaptation for MooTools framework of jParallax whose its author, Stephen Band, describes it like “jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way”.

I visited the jParallax’s site and was stunned to see the demos which are laid out there. Community is doing some great work and i appreciate people’s contribution in taking JS development a step further by each passing day.

View Demo 1

View Demo 2

View Demo 3

Parachute Demo

Similarly jParallax which also provides API’s to develop such parallax effect. They also have some cool demos on their site. One of those which shows a trigger controlled by remote is awesome and givesgraeat pleasure.

Other demos

jParallax’s Demo 1

Check these out !!

Posted in WEB 2.0, javascript | Tagged , , | Leave a comment

Script for allowing only numeric characters in a Textbox

By Devang | March 4, 2009

Every javascript programmer comes across the client side validations where he has to restrict user inputs depending on the requirement.
Yesterday i came along an issue where i required only numeric input for the textbox.

So i wrote a script which allowed me to enter only digits in a text field.

Here’s my script snippet.

<input onkeypress="return validateNumericCharacter();" name="zipCode" size="5" type="text" />

The HTML code calls the validateNumericCharacter function on keypress event.

validateNumericCharacter=function()
{
 
	var k = event.keyCode ? event.keyCode :event.charCode ? event.charCode : event.which;
	return /^(\d)$/.test(String.fromCharCode(k));
}

The javascript’s first line  identifies the keyCode and then forms a character out of it.
I then compares the character and finds out whether it is a digit or not using Regex.

The Quirk

The script works fine as in, it does not allow me to enter characters other than digits.

But there is a quirk to the script, to my surprise when i entered 313001 in the textbox and tried to select the whole text using SHIFT + HOME, it didn’t work. It did not select the whole code.

I tried a different technique and selected the zipcode using mouse and presses DEL key, and again nothing happened.

And even i was not able to delete the zipcode by selecting it with mouse and hit BACKSPACE key.

This can be seen live on many websites. One example is makemytrip.co.in’s registration page. When we try to fill mobile number field we can see the same phenomena mentioned in this post.

I was left wondering why its happening?

Can someone suggest why that was happening? Did i make any mistake in my javascript snippet.

Posted in WEB 2.0, javascript | Tagged , | Leave a comment

Ubiquity Mashups - A mesmerising browsing experience

By Devang | March 2, 2009

I was browsing net when i came across mozilla lab’s new mashup product “UBIQUITY“. I saw the demo video and was left wondering how this extension will change the way we browse the web.

Suppose a user want to invite his friend for a breakfast at a restaurant. So he will find out the location using google map , then will email his friend the time, name, map and reviews of the restaurant. This will involve finding maps, reviews, address and then copy & paste in the mail which he will send to his friend.

Ubiquity simplifies this in such a way that i fell in love with it. I think whoever sees it will feel the same.

Ubiquity  allows translating, Google mapping, twittering, flickering, tinyURL, bookmarking etc in a way which is refreshingly simple and easy to use and understand.

Don’t believe me, just look at the demo and you will relish and realize the power which Ubiquity gives to User.



Ubiquity for Firefox from Aza Raskin on Vimeo.

The overall goals of Ubiquity are to explore how best to:

  • Empower users to control the web browser with language-based instructions. (With search, users type what they want to find. With Ubiquity, they type what they want to do.)
  • Enable on-demand, user-generated mashups with existing open Web APIs. (In other words, allowing everyone–not just Web developers–to remix the Web so it fits their needs, no matter what page they are on, or what they are doing.)
  • Use Trust networks and social constructs to balance security with ease of extensibility.
  • Extend the browser functionality easily.
Posted in WEB 2.0 | Tagged , , | Leave a comment

HTML Select list of US States

By Devang | March 2, 2009

I was working on my project and i needed a select list of US states. I googled and found the list here.

But this was not what i was looking for. I needed the list with US state names as values. So i created the list and thought it would be nice to share with people with similar requirement.

So here is the list.

<select name="myStateList" class="formNew">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District Of Columbia">District Of Columbia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>

The same list in alternate format where we have code as value in the list.

<select name="stateDropDown" id="stateDropDown" >
<option value="AL">Alabama(AL)</option>
<option value="AK">Alaska(AK)</option>
<option value="AZ">Arizona(AZ)</option>
<option value="AR">Arkansas(AR)</option>
<option value="CA">California(CA)</option>
<option value="CO">Colorado(CO)</option>
<option value="CT">Connecticut(CT)</option>
<option value="DE">Delaware(DE)</option>
<option value="DC">District of Columbia(DC)</option>
<option value="FL">Florida(FL)</option>
<option value="GA">Georgia(GA)</option>
<option value="HI">Hawaii(HI)</option>
<option value="ID">Idaho(ID)</option>
<option value="IL">Illinois(IL)</option>
<option value="IN">Indiana(IN)</option>
<option value="IA">Iowa(IA)</option>
<option value="KS">Kansas(KS)</option>
<option value="KY">Kentucky(KY)</option>
<option value="LA">Louisiana(LA)</option>
<option value="ME">Maine(ME)</option>
<option value="MD">Maryland(MD)</option>
<option value="MA">Massachusetts(MA)</option>
<option value="MI">Michigan(MI)</option>
<option value="MN">Minnesota(MN)</option>
<option value="MS">Mississippi(MS)</option>
<option value="MO">Missouri(MO)</option>
<option value="MT">Montana(MT)</option>
<option value="NE">Nebraska(NE)</option>
<option value="NV">Nevada(NV)</option>
<option value="NH">New Hampshire(NH)</option>
<option value="NJ">New Jersey(NJ)</option>
<option value="NM">New Mexico(NM)</option>
<option value="NY">New York(NY)</option>
<option value="NC">North Carolina(NC)</option>
<option value="ND">North Dakota(ND)</option>
<option value="OH">Ohio(OH)</option>
<option value="OK">Oklahoma(OK)</option>
<option value="OR">Oregon(OR)</option>
<option value="PA">Pennsylvania(PA)</option>
<option value="RI">Rhode Island(RI)</option>
<option value="SC">South Carolina(SC)</option>
<option value="SD">South Dakota(SD)</option>
<option value="TN">Tennessee(TN)</option>
<option value="TX">Texas(TX)</option>
<option value="UT">Utah(UT)</option>
<option value="VT">Vermont(VT)</option>
<option value="VA">Virginia(VA)</option>
<option value="WA">Washington(WA)</option>
<option value="WV">West Virginia(WV)</option>
<option value="WI">Wisconsin(WI)</option>
<option value="WY">Wyoming(WY)</option>
</select>

Same list in another format.

<select name="myStateList" >
	<option value="AK">AK</option>
	<option value="AL">AL</option>
	<option value="AR">AR</option>
	<option value="AZ">AZ</option>
	<option value="CA">CA</option>
	<option value="CO">CO</option>
	<option value="CT">CT</option>
	<option value="DC">DC</option>
	<option value="DE">DE</option>
	<option value="FL">FL</option>
	<option value="GA">GA</option>
	<option value="HI">HI</option>
	<option value="IA">IA</option>
	<option value="ID">ID</option>
	<option value="IL">IL</option>
	<option value="IN">IN</option>
	<option value="KS">KS</option>
	<option value="KY">KY</option>
	<option value="LA">LA</option>
	<option value="MA">MA</option>
	<option value="MD">MD</option>
	<option value="ME">ME</option>
	<option value="MI">MI</option>
	<option value="MN">MN</option>
	<option value="MO">MO</option>
	<option value="MS">MS</option>
	<option value="MT">MT</option>
	<option value="NC">NC</option>
	<option value="ND">ND</option>
	<option value="NE">NE</option>
	<option value="NH">NH</option>
	<option value="NJ">NJ</option>
	<option value="NM">NM</option>
	<option value="NV">NV</option>
	<option value="NY">NY</option>
	<option value="OH">OH</option>
	<option value="OK">OK</option>
	<option value="OR">OR</option>
	<option value="PA">PA</option>
	<option value="RI">RI</option>
	<option value="SC">SC</option>
	<option value="SD">SD</option>
	<option value="TN">TN</option>
	<option value="TX">TX</option>
	<option value="UT">UT</option>
	<option value="VA">VA</option>
	<option value="VT">VT</option>
	<option value="WA">WA</option>
	<option value="WI">WI</option>
	<option value="WV">WV</option>
	<option value="WY">WY</option>
</select>

Now i have a place where i can find the US state dropdown in desired format. This will help all people searching for US state dropdown.

Posted in WEB 2.0, javascript | Tagged , | Leave a comment

Irresistable Web Development Tools

By Devang | March 1, 2009

Web development and Firefox are like synonyms for me. I cannot think of developing a web page without Firefox. Professionally i am a middleware guy but my interest force me to do HTML+CSS and javascript. I developed my first website www.mdakia.com using firefox and fell in love with the open source browser. Firefox is very handy for web development because of the various plugins that are available for web development.

My experience and plugins which are used by me.

Firebug

One bug which helped me throughout my journey is firebug. Its a wonderful plugin for web development. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
1) It can be used to inspect and edit HTML.
2) It can be used to tweak CSS.
3) Can be used to moniter network activity.
4) Can be used to debug Javascript.
5) Can be used to explore javascript and execute it on the fly.

Its a must have tool for web developers.

LIVE HTTP HEADERS
It is used to see the http headers of a page while browsing. It is must have when one wants to moniter the request and response headers.
It displays information about every thing that is fetched for a page. I use it for tracking and analyzing requests and it works superbly.
It is a must have tool when one attemps web scraping. I recommend it without a doubt.

Tamper Data
This is very similar to Live HTTP HEADERS but has one thing different. One can change the request before it goes to the targetted server.
One can change the Header values and can also change the form fields before it gets submitted to the server. It can be used to test the security of web application by modifing post parameters and posting to server.

DOM Inspector
DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL application. The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the document and all nodes within. We can use DOM Inspector
to see all DOM Objects, Javascript Objects , Child parent relationships of DOM Objects, CSS etc. Its a handy tool and it comes with firebox browser.

Web developer Extension
The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock  and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS  X and Linux. It can be used to see web pages with style sheets, images, javascript. Display Ruler is a super functionality of this extension. It is of great help for JSP,PHP,ASP developers as one can change cookies and header information.

View Cookie Extension
It can also be used to track everything you do on one particular website. With the Firefox View Cookies extension, we can find that out cookies. We can also remove the cookies. One can learn everything about what a site does when we browse it. One can tweak the cookies also. I recommend it to anyone who wants to know more about cookies and its worth.

IETab
IE Tab, an extension from Taiwan, embeds Internet Explorer in a Mozilla/Firefox tab. This extension is derived from the famous extension IE View, but much different. While IE View always open IE-only pages in a seperate Internet Explorer window, IE Tab can view them in a Mozilla/Firefox tab.
This tool is handy for developers who develops sites for Firefox and IE simulaneously. It saves developers from switching to a different browser.
It is fully compatible with Firefox 3.0

UrlParams
UrlParams displays the GET and POST parameters of a webside in Firefox/Mozillas sidebar. It lets you change the parametes you send to the server.
Another handy tool when doing dynamic stuff.

Poster
A developer tool for interacting with web services and other web resources that lets you make HTTP requests, set the entity body, and content type. This allows you to interact with web services and inspect the results. It is a awesome tool for web developers as it allows to send post,get parameters as well as binary contetn to the server. We can set the content type of the request as well adn post it to the server. We can inspect the response from the server. I recommend this plugin to every web developer.

I think we web developers are blessed with such tools without which web development would  be a pain rather than being fun.

Posted in WEB 2.0 | Tagged | Leave a comment

Attaching information to a dom node using javascript

By Devang | February 26, 2009

I had a requirement in my project where i had to attach some information to a dom node using javascript.
I created some checkboxes using DOM’s createElement method. Now the task was to assign userId information to each checkbox.
I knew that i can’t use the userId attribute for the “input” tag.

1

&lt;input id="chk1" type="checkbox" /&gt;

The above code does not work.

So i did the following to attach userId info to the checkbox.

1
2
3
4

var chkBox=document.createElement("input");
chkBox.type="checkbox";
chkBox.id="chk1";
chkBox.userId="devang@cisco.com";

And this is how i retrieved the userId info attached to the checkBox.

1

var userId=document.getElementById('chk1').userId;
Posted in WEB 2.0, javascript | Tagged , | 1 Comment

Changing onclick event of an tag using javascript

By Devang | November 7, 2008

I was doing some dom manipulation in my code when i got stuck with this issue.

“ISSUE” :- I had to assign a js function to onclick event of img tag.

I was assigning the function to the onclick event like this

document.getElementById(’buttonImg’).onClick=”postComment(’1′)”;

To my surprise this thing didn’t worked. I was following the rules and this is perfecly valid.

Then i came to know that we need to assign  function name or anonymous functions to events

so i tried this

document.getElementById(’buttonImg’).onClick=function(){

postComment(’1′)”;

}

and it worked. BINGO !!

“CRUX” :- Whenever we assign to events using js, we should make sure that we shud assign a function name or function signature or anonymous function.

Enjoy coding !!

Posted in javascript | Tagged , | Leave a comment

What is WEB 2.0 ?

By Devang | October 23, 2008

Now a days everyone related to web development use a word which i think is very difficult to define. The word is WEB 2.0.

Web 2.0 ??

Web 2.0 is a trend in the use of www and webdesign that aims to enhance creativity, information sharing, and, most notably, collaboration among users. Web 2.0 is a marketing buzzword, which is made up of a group of related buzzwords.

Let me try to define the buzzwords which combine and make WEB 2.0.

RIA

The most important component of web 2.0 is RIA ie Rich Internet Applications.
Now you might ask what do i mean by rich internet applications. RIA means web applications which have a rich user interface. All of us have used desktop applications in one form or the other.
Desktop applications have a rich user interface that comprises of fast response, great and good looking features like drag and drop etc. RIA brings all these features to web application’s user interface. We have AJAX ie Asunchronous Javascript and XML calls for fast server side response and various toolkits which provide us ability to have all cool desktop features on our web page.
Some of the JS toolkits and libraries which provide development of RIA are DOJO, Prototye.js, Windows.js, Scriptaculous.js, Effects.js etc.

SOA - Service Oriented Atchitecture

Web 2.0 thrives on pulling information from different distributed and independent sources. RSS , ATOM feeds, REST calls, consuming wxposed services by various companies etc became the source of information which is presented on Rich UI. Web 2.0 Apps consumes a lot of information from these sources.

SocialWeb

Web 2.0 Applications promotes social networking and colloboration amongst users. A nice example of Web 2.0 is Pramati technologies product ShopprStream. It allows user to write reviews, comment on existing posts, telling people about what a user found interesting on net etc. The whole idea is to bring user in picture. Empowering user and make him feel that he is part and parcel of the game. Instead of just browsing websites now user can edit them. Social web is a big factor behind the success of web 2.0 among the users.

Summary:

Web 2.0 is a combined phenomenon created by RIA, SOA and SOCIAL Web.

Posted in WEB 2.0 | Tagged , | Leave a comment

How to change port 8080 in JBOSS 5 ?

By Devang | October 22, 2008

I am using JBOSS 5 for my latest project. I was stuck when oracle instance was required in project because both JBOSS and oracle instance run on port 8080.

So i decided to change JBOSS port to 8776. Here are the steps i followed.

My JBOSS is installed in D:\jboss5

  • Go to the D:\jboss5\server\default\deploy\jbossweb.sar folder
  • Open the server.xml file inside that folder.
  • Search for “<Connector protocol=”HTTP/1.1″ port=”8080″ address=”${jboss.bind.address}” connectionTimeout=”20000″ redirectPort=”8443″ />”
  • Once you find this tag, change the port number 8080 to whatever you want. In my case i changed it to 8776.
  • Restart JBOSS5.

Now the JBOSS runs on 8776 as defined by me.

Posted in JAVA | Tagged , , | 4 Comments

Beware of unsafe variables (Servlets/JSP/Restlets)

By Devang | October 17, 2008

Recently in my poject i was writing a restlet(very similar to sevlet/jsp). I wrote the code in a normal javabean style.
I declared few static variables. I was happy that i did the job nicely. But when code review happened i found out that the code was not Thread safe.

These Local variables were killing the code as they are not Thread safe. Two threads can the value of these variables simultanously and can harm the product. There are ways to make this code thread safe.

  1. Synchronize the code using Synchronized block or method.
  2. Use Single Threaded Model (Not recommended)

My code was –>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

public class ABC extends Resource {
 
Logger log = Logger.getLogger(ABC.class);
 
private static int maxNumber;   /* THESE TWO VARIABLES RENDERING MY CODE THREAD UNSAFE */
private static int userName;
 
public ABC(Context context, Request request,
Response response) {
super(context, request, response);
getVariants().add(new Variant(MediaType.TEXT_XML));
}
 
}

How would you make this code thread safe ??

Posted in JAVA | Tagged | Leave a comment