A couple of days ago I was in such a situation. I am addicted to Firefox and already have a lot of plugins which increase my productivity. But in those couple of days, I was left with the dreadful Internet Explorer 6.0. Life became more difficult for me when I found myself opening up the Google homepage every time I wanted to search something. I did not have the rights to download the Google toolbar. But since I knew about Favelets I quickly made some and later found that even getting stuck with IE 6.0 did not matter any more.

How to make a favelet?

Suppose you are in a similar situation as mine and suppose you tend to search more in Google than do any other work. Without Google toolbar you would be just helpless. So I would explain here how to make a simple Google Search Favelet and a word-meaning finder.

Making a Favelet is not a difficult task. For a simple example, copy paste this line directly in your browser’s address bar.

javascript:alert("Hello World");

When you hit enter it would show you the prompt with the message. You can do this in any browser.

Now that the idea is clear lets start with our Google Search favelet. Do the below steps:

• Create a new bookmark in your browser and name it “Google Search”
• Put the below code in your bookmark location (the place where you put in the URL):

javascript:var keyword = prompt('Enter Keyword','');if(keyword!=''&keyword!=null)window.open('http://www.google.com/search?hl=en&q=' + keyword + '&btnG=Google+Search&meta=');void 0

• Remember to make the bookmark toolbar visible from your browsers menu for easier access.
• Try it out, When you click it , a prompt will appear for keyword entry and on entry it will open a window to show you the results.
• If you couldn’t make it, click this link or drag and drop the link on your bookmark toolbar.

Meaning Finder

Suppose you are in a habit to find out the meanings of difficult words when you are surfing the web. You would find it distracting to open Google on another window and search the meaning of the word by copy pasting it. Having a favelet which can just catch the highlighted word on the page and then open up Google and automatically do a search on the word would be something you would crave for. Let’s try to extend the above created favelet to make this happen. The two additional things which are required in this case are:

• Using the Google Trick define:keyword
• JavaScript function document.getSelection();
• Create a new Favelet “Define” and put in the below code:

javascript:var keyword = document.getSelection();if(keyword!=''&keyword!=null)window.open('http://www.google.com/search?hl=en&q=define%3A' + keyword + '&btnG=Google+Search');void 0

• Drag n drop the link to try the favelet. Select some word for which you want the meaning and then click the favelet on your bookmark toolbar.

Points to Ponder

If you are a JavaScript veteran, you can try out many interesting and complex favelets which can reduce many of your tasks. But you have to remember that since JavaScript behaves differently in different browsers, you would have to make the necessary changes in your Favelets in order to make them generic to all browsers.

Many of the social networking site often have a bookmarklet (same as favelets) which help you to bookmark a page into their network. Some examples are:

• Reditt Bookmarklets
• Del.icio.us Help Buttons

Some other useful favelets which I have found from the web:

• W3C Validator Favelets
• Web Design Test Favelets
• Favelets for Fun

I hope you found this article interesting and if you create any interesting favelet don’t forget to mention it here.

Related posts:

• Power of XRAY for Web Designers
• Impressive Google Chart Generator Scripts
• Search Results
• Ajax Frameworks – Server side versus Client side
• Ajax Exposed – Myth and Reality

Ajax is not about XMLHttprequest Object
Most of the people think that if they know about the XMLHttpRequest (XHR) object then they are Ajax programmers. Only a part of this statement is true since the base of Ajax is about XHR. But Ajax is not just about XHR.

The article by Jesse James Garet (who originally coined the term Ajax) mentions the same as,

XMLHttpRequest is only part of the Ajax equation. XMLHttpRequest is the technical component that makes the asynchronous server communication possible; Ajax is our name for the overall approach described in the article, which relies not only on XMLHttpRequest, but on CSS, DOM, and other technologies.

Working with Ajax means that you intend to use asynchronous behavior in your web page. The next thing which comes into practicality of Ajax usage is the XHR object. Although asynchronous, your web page will be far away from using Ajax in the right manner.

Ajax was not just meant for providing asynchronous behavior, but to make a web page shed its primitive look from blocking a view whenever a request was made to a look, which more seemed as if a person was working on his desktop application, by a combination of features provided through CSS, DOM, etc along with the specialty of XHR. The driving force to the popularity that Ajax has received is majorly speed and natural responsiveness which means that a response is generated to only what is demanded keeping the other things constant without changing.

Thus a person gives a preference more to a quick responsive page rather than the one which takes intervals in each and every request initiated and makes changes to the other things as well. XMLHttpRequest might be the base but along with the asynchronous behavior that XHR inherently provides you should be using it carefully with a proper separation of concerns between DOM, JavaScript and CSS along with XML, XSLT and XHTML.

Ajax is not an acronym
The fact is that, Ajax is just a shorthand for Asynchronous JavaScript and XML. When the Ajax hype happened about a year ago all the work done in Ajax was a miracle for those who hadn’t been much into the user interface driven aspects like CSS, JavaScript and XML. With the advent of Ajax, people have recently become more enthusiastic about JavaScript which was once a hated language by programmers amidst all the heavy duty strict counterparts like Java, C#, etc.

However, people failed to realize that this comparison was baseless since JavaScript was client side UI driven technology and had nothing to do with remote technology that Java, C# provided. Both belong to the different paradigms and cannot be compared. The name might itself suggest, JavaScript is nothing more than a scripting language for browsers in order to make the DOM active in its response. It is UI related and not meant for server side. However if you have used ASP you might disagree with this statement. But that is a different thing concerning with familiarity of JavaScript users for ASP using JavaScript.

In the Story behind Ajax, Garett once again comes upfront to clearly mention this

I thought of Ajax as a convenient [term]. It was never intended as an acronym.

Ajax came into the popularity charts due its catchy term and powerful way of representing a number of different things under its hood. Many JavaScript libraries which were providing a set of dynamic functionality to a web page became full fledged Ajax Toolkits since the emergence of this term. However if you see the source of these toolkits, you would come to know that they are a pure blend of many complicated modules involving CSS, XML, iFrames, Closures,etc.

The only place where the asynchronous behavior comes into picture is where the XHR object is used or where a graceful degradation in the form of an iFrame is provided for old browser compatibility. Rest of the rich interface experience is brought by other prior existing features like JavaScript special effects and utilities. Now these have come into limelight due to the coinage of the term “Ajax“. It can be compared to as a brand name rather than an paradigm shift.

Ajax is not AJAX
When Jesse James Garett had coined the term Ajax it was used in camel case. But due to its expansion coming into the limelight as “Asynchronous JavaScript and XML” (notice the uppercase of the words) people represented it as AJAX and not Ajax. Much hue and uproar was made about this inclusion. Should Ajax or AJAX be used, is of more importance in the data driven aspects.

If you have a tool or search engine which you use to search case sensitive terms then using Ajax will fetch different results than AJAX. The same applies to using case sensitive switch cases in your applications which might be disturbing of search intensive applications. So it is required that people across the world stick to a single norm. The reference of the usage is correctly attributed to the creator of the term itself i.e Jesse James Garette. He used Ajax (camel case). Wikipedia also uses in the same way, alongwith many big vendors, so it ought to be Ajax and not AJAX.

Arun Gupta recalls his experience in making the changes at Sun Microsystems.

Ajax is a popular term for past few months but is still being written incorrectly as “AJAX” (all capitals) instead of “Ajax” (camel case). I started using AJAX but then corrected myself and have been using Ajax since then.

Arun has mentioned a set of nice resources which prove the need of using a globally accepted term. Its analogy can be put forward to the acceptance of English as a global language. Even this site needs to make the changes to the usages of the term AJAX wherever used. So if you are in the AJAX bandwagon it would be better to jump on to the Ajax one, due to the global directives.

Ajax is not Web 2.0
Web 2.0 is a conceptual term and rather a representational term which in recent times is being used on a tremendous scale to put forward the freedom of data usage on the web. Earlier the web was used to share data statically and allow limited interactions in the form of feedbacks from the user. But today if we see the web, its a lot more interactive and user has the power to generate content, publish at ease and choose various alternatives to acquire it.

The web sites today cater more to the user inputs rather than passive information being pushed to the users. The result being the increasing number of blogs, forums, social networks and communities. In addition to the increasing user interactions, Web 2.0 is about using data freely. There is no limitation to getting data only in a pre-specified format or a pre-specified contractual terms.

The user is free to choose how he can receive the same data in various ways. The proof of the fact is the number of technologies that are being built to cater to this aspect. Web Services, RSS Feeds, Webcasts, Podcasts etc. Spreading of data more accurately and in a wide spread manner is another aspect of Web 2.0. Tagging, Online bookmarking are only the beginning of such techniques and the web is about to see a lot more than this.

In his article, De Witt Clinton tries to showcase this is a rather detailed approach on how communication has evolved,

Web 2.0 is about giving up control. It is about setting the data free. It is about providing services that work with other people’s data. It is about having a valuable resource and making no presumptions about how or where that resource will be used.

In my opinion, the web just might become obsolete in the near future. The fact being it might be something closer to having online desktops. It might be possible that computers will be replaced entirely by mobiles which would become more handy than a computer, with power packed business and multimedia features.

Ajax can be considered to as a part of the implementation process but not a concept of Web 2.0. Web 2.0 is also just a term used to replace long statements indicating the changing nature of the web and not a replacement to the existing characteristics of the web, just like Ajax did to the underlying technologies. You might read about this aspect in Wikipedia’s information on Web 2.0,

The argument also exists that “Web 2.0″ does not represent a new version of World Wide Web at all, but merely continues to use “Web 1.0″ technologies and concepts.

The term Web 2.0 showcases how data can be shared and used freely without any sort of restrictions while Ajax makes it possible to make innovations which attribute to the growth of Web 2.0. It’s more of a marketing strategy when you see Ajax and Web 2.0 used as synonyms just to derive maximum popularity owing to the two latest terms coined. Web 2.0 shows the way to use and spread data while Ajax is a practical approach to present the data in an effective and interactive manner.

Related posts:

• NASA adopts Ajax, Launches NASA 5.0
• 5 tips to use Ajax in the proper way
• The birth of AJAX – an amazing story
• Servlet 3.0 – The Journey Begins Now
• Ajax Frameworks – Server side versus Client side

Looking at the features of Ajax that hundreds of frameworks today provide, you might get sometimes tempted to use them all. Its pleasing when the user interface is more interactive and more user friendly at the same time attractive. To make these you have to use the framework which provides such eye candy. But before you decide on a particular you must have these things in mind.

1. Size of the total number of JavaScript pages
2. Check for frameworks or API for memory leaks
3. Don’t bloat your code
4. Use interactivity only where required
5. Don’t try to use Ajax where bookmarking is heavily used
6. Test your Ajax code properly

Let’s see each one in detail.

1. Size of the total number of JavaScript pages
This is one of the most important aspects when you go for deciding a framework. The JavaScript in the pages is nothing else than the code which the client has to download, in order to make available the features for the frameworks. If you find the download of a particular framework package very heavy then it would be the same feeling that the end user would be getting if you use the same framework API. This is because for using the eye candy features for the framework the end user’s browser would first download the JavaScript files and then execute the features.

2. Check for frameworks or API for memory leaks
This is the second most important thing you should watch out for. Normally while you program you work with an IDE. The IDE automatically alerts you when you make an infinite loop in your code accidentally. But when you code either in raw JavaScript or use any framework you do not have any IDE because there are not many good IDE’s that handle JavaScript well. So it might happen that you leave out a loop in a infinite manner or you could introduce a recursive functions which never ends. This often results in memory overloading on the client side thus crashing the browser or system. The other reasons for a memory leak might be the framework itself.

If you had seen the DOJO toolkit site earlier which works on DOJO you might have sometimes cursed the loading time for the site. Many a times my browser has crashed the moment I opened the site. This is because frameworks like DOJO implement the Ajax behavior and other features using a lot of code. And hence when the site loads the features use up the system memory for rendering the widgets in the browser.

3. Don’t bloat your code
Using some multiple free script’s is good but using multiple frameworks is a big no no. This is because of the same reason as stated in the earlier example. Bloating of code takes time to get downloaded and you can sometimes leave some part of the code unattended which results in memory leaks. Bloating of code can also occur if you unnecessary import all the necessary JavaScript file required for the entire website in a single page itself.

This is a common phenomenon since we generally put the import tags in the header files of the site. These header files are included in every page for displaying the header. But behind the load of each page the JavaScript files unnecessary get loaded into the browsers memory on the client side which slows down the execution of the site. In order to avoid this it is important that you just import the required JavaScript files in the appropriate pages and thus make the execution of the pages faster.

4. Use interactivity only where required
Never think in the manner that since your site is having the web 2.0 feature each and everything in it should be made via scripts. This is bad thinking. Ajax promotes interactivity hence it is must that you just make the page interactive when there are many components on the page. If you have personalized the Google homepage you might probably know about this very well. In the personal homepage you can see how convenient it is to modify a single component without disturbing the others. So Ajax fits in the picture in such a case.

Now lets take the example of a blog. On the homepage of a blog you see a list of posts and when you click the title of a post, the post page loads up. Now whether you simply load the page in the normal fashion or if Ajax is used in here, the time taken is the same. No fast loading takes place nor nothing on the site looks more appealing if Ajax is used in such situation since the data to be fetched from the server does not change.

The point I am trying to make is that Ajax should be used in those places where it solves some purpose and not in the places where it seems unnecessary. It is just a waste of time to put the efforts in this case.

5. Don’t try to use Ajax where bookmarking is heavily used.
If you are a blog owner then you might understand the importance of trackbacks or permalinks. Those are the blog’s savior since they are universally unique and reachable to any person who uses it whenever required. Ajax has a very undesirable feature which might make a blog less popular i.e Ajax pages cannot be bookmarked. If you use Ajax to load a post as I had mentioned in the example of point number 4. then the post loads up the same page without changing the URL. This is because it is loaded asynchronously.

Now if a person looks at such a loaded page and likes the content he might immediately bookmark without a second thought. But when he requests for the same page again.. voila! he doesn’t see the post. Instead he sees your homepage. Of course you can avoid this by explicitly specifying the trackback URL but you can never gaurantee that the reader of your content might be even knowledgeable of what Ajax is and what trackbacks are used for. Hence your blog traffic might suffer.

6. Test your Ajax code properly
There are not many testing tools available in the market nor very well practiced approaches for testing but you can be sure of making your code work properly by using some utilities which target the JavaScript behavior in the browser. One such utility is the FireBug which is absolutely marvelous when it comes to checking the Ajax code. I have not explored it completely but it helped to cure many bugs when I had worked in Ajax for a web application. It is freely available and comes as a plugin for Firefox. So make sure that you test the Ajax code to the maximum since a bug in the Ajax code can have many side effects.

Related posts:

• NASA adopts Ajax, Launches NASA 5.0
• 5 tips to use Ajax in the proper way
• Servlet 3.0 – The Journey Begins Now
• Ajax Frameworks – Server side versus Client side
• Xinu – Ajax Based Site Statistics Tool

In order to make things simple, the overall horde of Ajax frameworks can be classified into two major leagues:

1. Server Side Framework
2. Client Side Frameworks

Server Side Frameworks
Server side frameworks as the name suggests are used on the server side. But you would ask as to how Ajax, which involves JavaScript is used on the server side. Its not actually JavaScript that is used in such frameworks on the server side. In fact you use the same language API’s provided by the framework to do your client side activities and on deployment these client side activities coded on the server side get translated to normal Ajax functionalities when deployed. Confused? Let me clarify your this with an existing server side framework.

Google Web Toolkit (GWT) is such a server side framework which is used as a normal Java Swing kind of programming on the server side in web pages using the GWT API. The GWT provides a tool for deploying your web application having such pages. During the deployment of the web application the GWT tools help in translating the Java syntax into the corresponding Ajax functionality to be brought on the client side.

Advantage of Server Side Frameworks
The advantage of using a server side framework is that you use the existing language you are working in. You do not have to dwell in the wild wild world of JavaScript. Its easier to use a server side framework rather than to learn JavaScript.

Other server side frameworks are : Yahoo Toolkit, DWR

Client Side Frameworks
You must have done Ajax in the normal fashion using the XMLHTTPRequest object in a JavaScript file and then provided some callbacks to do the asynchronous requests. Providing this much is good enough for a simple Ajax page to do one or two requests. But in a large application much more functionality is required. I would list out some of these functionalities as follows:

• Cross browser compatibility – When you code its always a necessity that the code works independent of the browser type requesting it
• Mutliple request handling – Multiple asynchronous request have to handled properly when doing the callbacks
• Graceful degradation – You don’t want your code to fall flat on its face in case the browser does not support the XMLHTTPRequest object
• Exception and error handling – You should be able to catch the exceptions in your code instead of displaying it to the user

To do all this yourself is very tedious and requires a lot of JavaScript expertise. To avoid all this mayhem you have client side frameworks to your rescue. They provide packages and API’s which help you to implement all of the above functionalities and also provide a lot of extra features which currently can be either found in free JavaScript code snippets over the net.

The extra features include widgets or even an IDE. Widgets are small interfaces or components which can be incorporated in an application easily through the client side frameworks. These widgets might compose of the following:

1. Auto completing combobox
2. A Menu system
3. An accordian
4. A tabbed pane windows
5. Effects like fade, zoom in /out

Advantages of Client Side Frameworks
Besides the above specialties the advantage of a client side framework over a server side framework is that you have the complete flexibility in your hands. You can mix and match the widget features and at the same time provide extra flexibility as you have the world of JavaScript at your disposal. Some frameworks like TIBCO GI even provide a GUI to build your web pages with Ajax components in a complete drag n drop style.

The examples of a client side framework are Prototype, DOJO Toolkit, Rico, Script.aculo.us, etc.

Going out to choose a framework in the Ajax field can be a bit overwhelming since you might think all look the same. But if you keep in mind the above classification then you can well have a feature matrix in front of you and also take less time in deciding on going for a particular one.

Related posts:

• Plagiarism – Black Listing of Sites is a Must
• First step in Ajax – Choosing the right framework
• 5 tips to use Ajax in the proper way
• Optimal use of Ajax – use Ajax the smart way
• Servlet 3.0 – The Journey Begins Now

This does not mean that all of the page content should be brought asynchronously as it would be the doing the same old things in a new fashion. AJAX promotes interactivity i.e. where in a web page which has a lot of components along with data to display to the user, some of the components can be dynamically updated without having to move the user away from the page for refreshing or doing some other activity. The user can access other components of the page while the update is in progress, which adds to the richness of the site or application. Web applications developed in this manner are called as a Rich Internet Applications (RIA).

The 5 tips to use AJAX in the proper way are:

1. Choose the right framework
2. Decide on a server side or a client side framework
3. Never bloat your code
4. Never try to ajaxify all the pages
5. Test your code properly

I will be elaborating on each of these tips in the coming posts since they are have a detailed explanation and I will be providing some examples that I myself have come across and will relate the explanations to them.

Related posts:

• Techtracer 2.0 is Coming
• SEO for WordPress Beginners
• Resolving the “Unsupported major.minor version 49.0″ Error
• NASA adopts Ajax, Launches NASA 5.0
• 5 Rules For A Good Web Design