Ganesh

In modern web application development, many a times you would want to know if the incoming HTTP Request is an AJAX request or just a Normal request. Have you come across this requirement? I have, and the solution that I found turned out to be pretty straight-forward and I will be sharing it with you here.

Whenever an AJAX request is sent to the server, a special header named X-Requested-With with a value of XMLHttpRequest is attached to the request. So, a simple check to see whether the X-Requested-With header has a value of XMLHttpRequest solves the challenge. An example will give you more clarity. Take a look at the examples of isAjax() methods in two famous server-side programming languages – Java and PHP.

Java:

public static boolean isAjax(request) {
   return "XMLHttpRequest"
             .equals(request.getHeader("X-Requested-With"));
}

PHP:

function isAjax() {
   return (isset($_SERVER['HTTP_X_REQUESTED_WITH'])
              &&
            ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'));
}

From the code above, it should be clear that if the method returns true, then you received an AJAX request. If the method returns false, you received a Normal HTTP Request.

Now you know how to find out if it is an AJAX request or not. But how is it useful? What do you do with it?

Have you heard of the term Unobtrusive javascript. Come on, It is a buzzword these days. There is a lot to writing Unobtrusive javascript code, but one of its features – Progressive Enhancement – stands out from the rest. Again, let me explain this with an example.

Let us assume that you have designed a beautiful looking web page with tabbed navigation. Being a hard-core AJAX fan and an efficiency aficionado you don’t like to bring back a full page with the headers and the footers and the sidebars when your user clicks on a Tab. Instead you would love to bring back only the content area for the tab via AJAX and innerHTML it into its respective place. Correct? The good programmer inside you has also told that you should not hard-code the URL for the AJAX call in your javascript. Instead, your tab should be designed as an anchor whose href attribute points to the URL for the content. So far so good? Now, when the user clicks on the Tab, you collect the URL from its href attribute and fire an AJAX call to the server. The server obediently accepts the request and sends back the content just for the active tab.

<ul>
   <li><a href="/tab1.page" rel="#tab1">Tab 1</a></li>
   <li><a href="/tab2.page" rel="#tab2">Tab 2</a></li>
   <li><a href="/tab3.page" rel="#tab3">Tab 3</a></li>
</ul>

<div>
   <div id="tab1">Content for Tab1</div>
   <div id="tab2"> Content for Tab2 </div>
   <div id="tab3"> Content for Tab3 </div>
</div>

You would like to believe that all is well and good… Unfortuntately this is where the challenge of Progressive Enhancement begins. How do you plan to support browsers with JavaScript disabled. Yes, there are quite a few people who still do that for the fear of script related worms. How do you plan to support automated bots? Don’t you want the Google bots and the Yahoo bots to index all your pages with full content? Do you know what these users will see? They will see a half-baked page with just the active tab’s content and no styles – not even the header, footer or the sidebar. I am sure you don’t want this to happen. That is when the isAjax() method comes useful.

Whatever you did on the client side – HTML, CSS and javascript – is great and perfect. You separated the behavior from style and markup. So, you don’t have to touch it. You just need to do a small bit of work on the server-side.

In our case, when JavaScript is disabled, the browser will take over and execute its default behaviour of firing a Normal request to the URL specified in the href attribute. When JavaScript is enabled, JavaScript will take over and will fire an AJAX request to the same URL. In both cases the same server-side resource (like in Java or PHP) will receive the request. Now that you have decided to support Progressive Enhancement, you will have to check if the incoming request is an AJAX request or a Normal request using the isAjax() method shown earlier. In case of an AJAX request, you will send back only the content area of the tab thereby providing an efficient version of your application to JavaScript enabled users. In case of a Normal request, you will send back an entire page including the tab’s content, thereby providing a less efficient yet fully functional version of your application to JavaScript disabled users.

// Pseudo Code
if(isAjax(request) {
   return "Content area for the tab";
} else {
   return "Full page including tab content";
}

Now you can feel proud that you are not one of those who just talk about Unobtrusive JavaScript but you are one of those who have implemented it. I sincerely hope this article was useful. Feel free to drop in a comment with suggestions and/or feedback.

In a recent web application I was working on, I had a need for the “Ctrl + S” hotkey to save an entry to the database. Being a an avid jquery fan, I immediately searched the plugin repository for any plugin that fits the bill. I was not very surprised to find a very comprehensive jshotkeys plugin. It was feature rich and addressed all the requirements for hotkeys in a jquery powered application and obviously my requirement was fulfilled as well.

But the basic issue (and advantage too) with any plugin is that it is written for a wide range of audience. So, although my requirement was only for a “Ctrl + key” combination, I had to part with my bandwidth for all other features this plugin offered. Like my famous jCarouselLite plugin, I like my javascript code kept to the minimum. So, I decided and wrote a short yet sweet plugin that would solve only the problem I have at hand. Unsurprisingly, the plugin code turned out to be only 195 bytes (minified). Given below is the code for the same…

$.ctrl = function(key, callback, args) {
    var isCtrl = false;
    $(document).keydown(function(e) {
        // IE throws an error when args is null
        var args = (args == null) ? [] : args; 

        if(e.ctrlKey) isCtrl = true;
        if(e.keyCode == key.charCodeAt(0) && isCtrl) {
            callback.apply(this, args);
            return false;
        }
    }).keyup(function(e) {
        if(e.ctrlKey) isCtrl = false;
    });
};

This is how it works:

1. You want to execute a function when the user presses a “Ctrl + key” combination.
2. You as a developer should call the plugin method and pass in 3 parameters.
3. 1^st Param: The “key” user should press while he is pressing Ctrl.
4. 2^nd Param: The callback function to be executed when the user presses “Ctrl + key”.
5. 3^rd Param: An optional array of arguments, that will be passed to the callback function.

In the code given below, when the user presses the “Ctrl + S” key combination, the anonymous callback function passed in as the second parameter is called.

$.ctrl('S', function() {
    alert("Saved");
});

Here, when the user presses the “Ctrl + S” key combination, the anonymous callback function passed in as the second parameter is called with the arguments passed in as the third parameter.

$.ctrl('D', function(s) {
    alert(s);
}, ["Control D pressed"]);

Thats it. I feel it is simple yet effective and solves a common requirement in modern web applications.

What do you think?

Have you ever come across a situation where you wanted to execute a certain piece of code after an animation has completed running? This is a very common use-case in modern web development. jQuery team knows it, and that is why they accept a callback function as argument for every kind of animation call. In the example below, we pass in a callback function that will be executed after the “slideDown” animation is complete. This is the usual scenario.

$("#animateMe").slideDown(function() {
	// This piece of code will be executed
	// after the animation is complete
});

But, in many other scenarios you might want to wait for multiple animations to complete before executing a certain piece of code. Lets assume that the two elements – “#element1″ and “#element2″ – are currently getting animated. Our goal is to execute a piece of code after both elements are finished with their respective animations. This is where it gets tricky. I was facing one such challenge today. The solution I have arrived at is to use the “:animated” pseudo-selector and “setInterval” to repeatedly check and wait until the animations have completed running. An example will clarify what I mean

var wait = setInterval(function() {
	if( !$("#element1, #element2").is(":animated") ) {
		clearInterval(wait);
		// This piece of code will be executed
		// after element1 and element2 is complete.
	}
}, 200);

In the example above, I use “setInterval” to repeatedly check if these two elements are NOT being “:animated”. If this condition is not met, then it means that atleast one of them is still getting animated. So, “setInterval” will check for the same condition again in 200 ms until the condition is met. If the condition is met, it means that the animations are complete. So, I immediately do a “clearInterval” and stop checking for this condition again. Any code written after this statement will get executed after both the animations are complete.

Ofcourse, the same code can be modified for more than two elements as well. Some more work, and we can make it handle any number of elements. But, I was wondering if there was an easier, better and more efficient approach to solve the same challenge. If fellow jquery lovers are aware of such solutions please feel free to leave a comment.

There was an interesting question during the last Intro Session for Unlimited Power. One of the participants who attended was surprised when Kirtanya listed out the methodology of the course. She mentioned NLP, Transactional Analysis, Silva Mind control and Life-Skills as ways to tap into the Unlimited Power each one of us has within us. He was stunned to see that none of the Indian sciences were listed and was curious to know if we (Indians) did not discover anything at all in the mind power arena.

The truth is, in the ancient days there was no parallel to the Indian Sciences when it came to addressing the human mind and life. Just think about it, we had everything, a nice climate, riches, wealth, forests, rivers; we were just too bountiful. On the other hand the western hemisphere at the same time was caught up in a turmoil of wars, harsh climates; their energy was so much focused on surviving the extreme weather. The Indians having no challenges to conquer in the external world turned their entire attention inward. The mind and consciousness and human life became very interesting research subjects for them.

And so there was an outpouring of greatest of works on the science of mind itself. The yoga sutras of Patanjali, The Vedas, Vedanta, Brahma sutras, Upanishads, Yogavasishta, every one of these is a miracle even to read through. In fact, it is said that the Mahabharatha is an ultimate thesis on the various human personalities and it contains 72000 characters each representing a personality type. So India had no dearth for wisdom. Some of its treasures still stay on.

However, the same cannot be said of the modern day India. Over a century now we have been harping on the past glories. With the advent of the British rule and subsequent poverty we have become increasingly preoccupied in solving the external challenges and are oblivious to the internal ones. The roles are in a sense reversing between the west and the east. With its high levels of sophistication, pleasure in the external world, and breaking families they are increasingly searching inward for answers and so research into the human mind has picked up momentum. With technological edge they are precisely able to study the human brain itself and so are paving way for some of the greatest discoveries in human history itself.

It is actually a pity that when technology is at its peak, the brilliant Indian minds are preoccupied with selfish miseries. In the modern era we seldom shine in our ancestor’s strong forte, our inborn talent – the mind. Of course there are the modern Gurus who teach on the mind but more often than not they are mouthed words than a direct personal discovery or an experience and always tainted with a religious bias. The need of the hour is brilliant young Indian minds dedicated to unraveling the mysteries of the human mind-brain organ. The aptitude for this is in our very genes. The result of such dedication will be mind boggling discoveries that will help the human species itself cross the last frontier – the mind.

Waiting for that day!

Keat, my friend, is quite spiritual. An ardent meditator with experience for almost 14 years. She keeps telling me about mystical experiences. I believe in mindfulness and awareness. Sometimes my comments invalidate these experiences. Recently when sensex (Indian stock market index) plunged and some of my money was caught in it, she made use of the opportunity to portray me this way.

The man in orange is me(Ganesh). The girl in the toon is keat. And with us is Parthi (man in blue). We form a trio.

A friend of mine keeps posting these cartoons about me. Her cartoons tickled me no end coz, she had this uncanny knack of catching my serious moments as well as the not so serious ones into comical strips that brought a fond smile or a hearty laugh. I felt like sharing them with my reader friends. Hope you enjoy them too as much as I did. I will keep posting these toons as and when they come.

I am a die-hard non-vegetarian, especially fond of chicken. While my friend is a strict vegetarian. Amazed at my ability to eat chicken, she put this toon.

I am glad I could finally get back to blogging after a long period of hibernation. Almost an year back, me and three of my friends founded Triomatrix Webservices Private Limited, an ambitious company aimed at creating web-based services to innovatively automate businesses in India. Fanatically caught in the clutches of this marathon venture I almost forgot about everything else in life except for the ravishing beauty of our first product – www.nboomi.com.

Nboomi.com is an innovative real-estate portal from Triomatrix that literally translates the dreams of home-shoppers around the globe into a living reality. At its core, Nboomi creates a virtual world that allows home-shoppers to walk inside and experience their future home in all its splendor with just a computer and an internet connection. Being a virtual world, walking around the home is just the tip of the iceberg. Beyond that, you can paint walls, tile floors, texture doors and windows, create and organize furniture and much more, all inside your favorite web browser. You are limited only by your imagination.

Very recently, we took a beta of Nboomi into the wild to field test it and I can distinctly see the attention it is attracting. At present we have successfully completed the technical component and are handing it over to the business team to take care of the sales and marketing activities. I am confident that with the right nurture and a bit of luck, Nboomi can take the real-estate field by storm.

• Home
• Plant a tree
• Travel
• Ride an elephant

Hover above and feel for yourself, the nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight.

Just so you know, it weighs just 700 bytes(minified)!

Often I have noticed, that the credits are usually granted towards the end. Just for a change, i am going to give my credits at the beginning. This effect was originally written by Guillermo Rauch for the mootools javascript library. All I did was to port it for the benefit of jQuery lovers. Thanks Guillermo for inspiring the javascript world with such a nice effect. A special thanks to Stephan Beal who named it “LavaLamp”, and to Glen Lipka for generously helping with the image sprites. Many fellow jQuery lovers also helped shape this plugin with valuable feedback in the mailing list. Thanks a ton, all you guys.

As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction. Before you get bored with all this useless talk, let me get you started on integrating LavaLamp into your jQuery powered site.

I hope you agree that a typical HTML widget consists of 3 distinct components.

• A semantically correct HTML markup
• A CSS to skin the markup
• An unobstrusive javascript that gives it a purpose

Now lets follow the above steps and implement the LavaLamp menu for your site. Remember, In the process of porting from mootools to jQuery, i have simplified both the javascript and CSS for your convenience. So, be informed that you will need to follow the instructions on this page to get the jQuery version running. Follow the instructions on Guillermo Rauch’s page for the mootools version.

Step 1: The HTML

Since most UI developers believe that an unordered list(ul) represents the correct semantic structure for a Menu/Navbar, we will start by writing just that.

        <ul class="lavaLamp">
            <li><a href="#">Home</a></li>
            <li><a href="#">Plant a tree</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Ride an elephant</a></li>
        </ul>
        

In the markup above, “ul” represents the menu, and each “li” represents a menu-item. At this point it is crucial to understand that we will be adding another artificial “li” to represent the background of the currently highlighted menu-item. Since the background itself is cosmetic and doesn’t represent a menu-item, we will be adding it from javascript. Just to make sure we are in sync, “you need not add this li”, the LavaLamp plugin will take care of it. Once added, the “li” representing the background will look like this.

        <li class="back"><div class="left"></div></li>
        

Step 2: The CSS

You can skin this markup in many different ways to achieve your own personalized menu. The following style sheet is just one possibility. A few more possibilities are demonstrated in the “Bonus” section towards the end of this blog entry.

/* Styles for the entire LavaLamp menu */
.lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("../image/bg.gif") no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background: url("../image/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: url("../image/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }
        

Trust me, this is a simple style sheet. Follow along to understand what is done in each of its sections.

First, we style the “ul” with the bright orange background image and some basic properties like height, width, padding, margin etc. We use relative positioning because, that way we can absolutely position the background “li” relative to the “ul”. This helps by enabling us to move this background “li” freely within the context of the parent “ul”.

Next, we make the “li”s flow horizontally instead of vertically. By default, it flows vertically. There are a couple of techniques to do this. In this case, we are using the “float:left” to achieve this effect.

Next, we style the artifical “li” that represents the background of the currently highlighted menu-item. This uses the sliding doors technique. Also, notice the absolute positioning used as mentioned above.

Finally, we style the anchor that represents the actual clickable portion of each menu-item. These styles are mostly cosmetic and self-explanatory.

Some of the above rules may not be obvious if you are not very confident in how “positioning” works in CSS. For those, i highly encourage you to quickly read this article on CSS positioning. It is short, sweet and very informative.

Step 3: The Javascript

This is the easy part. Most of the javascript work is taken care by the Lava Lamp plugin itself. As a developer, you just have to include the mandatory and/or optional javascript files and fire a call to initialize the menu.

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
<!-- Optional -->
<script type="text/javascript" src="path/to/jquery.easing.js"></script>

<script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>
        

Include a reference to the jQuery library and the LavaLamp plugin. Optionally, include the easing plugin as well. It has many cool effects, that are not contained in the core. For instance, the “backout” effect used in this demo is part of the easing plugin. You can download jQuery here, Easing plugin here, and the LavaLamp plugin here.

Next, in the document.ready event, fire a call to initialize the menu. You have the option to supply an easing “fx” , the “speed” with which the animation happens and a callback to be executed when a menu-item is clicked. They are optional, the default “fx” being “linear” and the default “speed” being “500″ ms.

That’s it. At this point you should have a working version of LavaLamp menu for your site.

Bonus

Just with some minor changes in the style sheet, you can get a totally different look n feel for the menu. And yes, the HTML markup and the Javascript remain the same.

• Home
• Plant a tree
• Travel
• Ride an elephant

Here is one more variation, again with just some minor changes to the style sheet. I know, they don’t look pretty, but all i am saying is that you are limited only by your imagination.

• Home
• Plant a tree
• Travel
• Ride an elephant

Finally, for your convenience, i have zipped up all the necessary files into a cohesive package. Download it, and open the demo.html to see all the 3 variations in one page.

Feel free to leave a comment with your feedback, suggestions, requests etc.

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

Did I mention that it weighs just 2 KB?

As if that wasn’t enough, the best part is yet to come… You don’t need any special css file or class name to get this to work. Include the js file. Supply the HTML markup. Then, construct the carousel with just a simple function call.

Visit the project page for more information. There you can find a lot of demos and exhaustive documentation. This blog entry is just a teaser for further exploration.

Installing and getting it to work is as trivial as following the 3 steps given below…

Step 1:

Include a reference to the jQuery library and the jCarouselLite plugin. If you like interesting effects, include the Easing plugin as well (Optional). If you would like to navigate the carousel using mouse wheel, then include the mouse-wheel plugin as well (Optional).

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jcarousellite.js"></script>
<!-- Optional -->
<script type="text/javascript" src="path/to/easing.js"></script>
<script type="text/javascript" src="path/to/mousewheel.js"></script>

Step 2:

In your HTML file, provide the markup required by the carousel (a “div” enclosing an “ul”). You also need the navigation buttons, but these buttons need not be part of the carousel markup itself. An example follows…

<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul>
</div>

Step 3:

Fire a call to the plugin and supply your navigation buttons. You just managed to architect your own carousel.

$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});

If you have any comments/suggestions/requests, feel free to drop in a comment or you can find me lurking around the jquery mailing list.

Amazon, always an innovator, recently unfolded yet another masterpiece to the world in the form of EC2 web-service. Gumiyo.com, an online mobile-commerce provider and Abaca.com, a spam-blocker solution, are now celebrated as the pioneers to launch a production site using Amazon EC2 Service. You can relish the full versions of their success stories here and here.

EC2 (Elastic compute cloud) – the name doesn’t tell much, or does it? For those who are not familiar, EC2 is a dynamically scalable data-center kind of service. It is not a REST/SOAP style web-service that we have come to conventionally recognize. We do not fire a call, and expect a response. Instead, we get access to virtual servers equivalent of Intel Xeon 1.7 GHz, 1.75 GB of RAM, 250 MB/S of network bandwidth and 160 GB of local hard drive space. Any number of such servers are at our disposal in just a matter of minutes, and that my friends, is not just innovative, but a killer idea in the data-center services arena. At 10 cents per hour of instance up-time, this service is something any start-up, if not individuals, should seriously consider. An EC2 account implicitly comes with a S3 account. Of course you can sign-up for S3 separately as well. In case you are wondering what S3 is, keep reading…

S3 (Simple Storage Service) is, well, a simple storage service that can be used to store and retrieve huge volumes of data over the internet. This offering has a similar accent to traditional web-services. The infamous REST and SOAP interfaces are provided for campers at both ends of the web-services campground. The value-add I see in this service is Simplicity, Cost effectiveness and more importantly, the trust that we already have over Amazon’s infrastructure. After all, they are one of the very few survivors of the DotCom boom. At 15 cents for a GB of storage per month and 20 cents for a GB of data transfer, S3 is something that i would use for all my back-up needs. Being a java programmer, I use the JetS3T library from Java.net and see how easy it gets…

// Sample code that uploads a file to S3.
String access = "YOUR_AWS_ACCESS_KEY";
String secret = "YOUR_AWS_SECRET_KEY";
AWSCredentials cred = new AWSCredentials(access, secret);

// I used Rest, you could use Soap
S3Service s3 = new RestS3Service(cred);

// Buckets are like folders, but globally unique
S3Bucket bucket = s3.createBucket(access + ".Test");

// File that you want to upload
File file = new File("SomeFile.txt");

// Upload your file
S3Object s3Object = new S3Object(fileData);
object = s3.putObject(bucket, file);

Start-ups, small businesses and web 2.0 companies should regard these services as “God-Sent”. Well, I guess, I am not wrong. Two startups have already considered it serious enough to launch their production environment on EC2. And I’m sure there are more to come. Lets see what they are up to.

Gumiyo.com is the first end-to-end mobile commerce platform, connecting live buyers and live sellers through mobile phones and through the Web. Using any mobile phone with a built-in camera and a basic data plan you can create ads in 3 easy steps

1. Capture images or video of an item
2. Attach them to a multimedia message with a short description
3. Send it to post [AT] gumiyo [DOT] com

Gumiyo will create an online ad for you and then send you a reply link asking you to review and edit your ad before it is posted. You don’t need to use a mobile phone though. You can login and place your ad any time on the Web. You can even send them your ad as an email with photo or video attachments. Could it get any easier? Check it out for yourself.

Abaca.com is a spam-blocker appliance that you can purchase for under $2000. This email protection gateway offers 99% guaranteed filtration with zero management. At present, I don’t have a need for such an appliance as an individual. So, I didn’t try it out myself.

Will more and more businesses build around these services? Will traditional data-center providers offer EC2 as an option with GUI based configuration? Will amazon create more like these? What do you think?