Saurabh Odhyan's Blog

Today I read about YUI 3 Caching Utility. It allows to cache frequently used data in javascript memory (Basic caching) or HTML5 localStorage object (Offline caching). Although we can implement our own caching mechanism in javascript, the YUI caching is general purpose and also provides a set of events. Moreover it can be easily integrated with YUI Datasource which can be very beneficial.

I’ll show you how useful YUI caching utility can be using a very standard example, Factorial. Here I’ll only cover basic caching.

Let’s write a factorial program in javascript without any caching/memoization:

YUI().use('node', function() {
    // method to calculate factorial
    var factorial = function(n) {
        if(n === 0 || n === 1) {
            return 1;
        } else {
            return n * factorial(n-1);
        }
    }
    // calulate the factorials and display the values on browser
    var MAX = 100,
        ret = "",
        el,
        i;
    for(i = 1; i < MAX; i++) {
        ret += i + "! = " + factorial(i) + "</br>";
    }
    el = document.getElementById("fact"); // create this div in HTML code
    el.innerHTML = ret;
});

Try increasing the value of MAX and you’ll see that your browser may get very slow/crash. My firefox keeps on running the script and then shows a dialog box to stop the script. I assume all must be familiar with factorial and should be able to understand why this program is highly inefficient.

Now lets write another factorial program using our own caching mechanism:

YUI().use('node', function() {
    // create a cache class
    var MyCache = function() {
        this.memo = [];
    };
    MyCache.prototype.add = function(key, val) {
        this.memo[key] = val;
    };
    MyCache.prototype.retrieve = function(key) {
        return this.memo[key];
    };
    // a new cache object
    var cache = new MyCache();
    // method to calculate factorial
    var factorial = function(n) {
        var ret;
        if(n === 0 || n === 1) {
            return 1;
        } 
        ret = cache.retrieve(n);
        if(ret !== undefined) {
            return ret;
        } else {
            ret = n * factorial(n-1);
            cache.add(n, ret);
            return ret;
        }
    };
    // calulate the factorials and display the values on browser
    var MAX = 100,
        ret = "",
        el,
        i;
    for(i = 1; i < MAX; i++) {
        ret += i + "! = " + factorial(i) + "</br>";
    }
    el = document.getElementById("fact"); // create this div in HTML code
    el.innerHTML = ret;
});

The above code runs smoothly even if we increase the value of MAX(even 5000 should be fine although 5000! doesn’t make sense). That’s because we cache the value of every factorial we calculate and then reuse it for the next calculation.

Now lets write the same program using YUI caching utility:

YUI().use('cache', function(Y) {
    // create a yui cache object
    var cache = new Y.Cache({
        max:100
    });
    // method to calculate factorial
    var factorial = function(n) {
        var ret;
        if(n === 0 || n === 1) {
            return 1;
        }
        ret = cache.retrieve(n);
        if(ret !== null) {
            return ret.response;
        } else {
            ret = n * factorial(n-1);
            cache.add(n, ret);
            return ret;
        }
    }
    // calulate the factorials and display the values on browser
    var MAX = 100,
        ret = "",
        el,
        i;
    for(i = 1; i < MAX; i++) {
        ret += i + "! = " + factorial(i) + "</br>";
    }
    el = document.getElementById("fact"); // create this div in HTML code
    el.innerHTML = ret;
});

This also runs smoothly for large values of MAX.

For this particular example, implementation 2 (using our own caching) will be slightly more efficient than the YUI version due to the simplicity, but in more complex examples, YUI caching utility can be quite useful.

You can read more about the YUI Cache here.

Related links:

• Factorial
• Memoization

While working on my last project (Floating Cart for Yahoo! stores) at Yahoo!, I came across an application called Lightbox. The reason it drew my attention was incompatibility with our application. Our customers who had lightbox were facing issues using the Floating Cart. The problem was not with the lightbox application, but the javascript framework called Prototype that was used to create the application. I’ll post the details about this in some other post, let’s move to lightbox for now.

So you must be wondering what lightbox is? It’s a simple but useful application to overlay images on the current page. Simply speaking, if you are on a webpage with multiple image thumbnails which link to the actual images, using lightbox the images will open up on the same page in a modal window. To add this feature, you just need to add the lightbox script (and all dependencies) to your website. There are multiple versions of lightbox available on the internet but this one is the most popular. It uses Prototype javascript Framework and Scriptaculous Effects Library.

This weekend I spent a few hours trying to create my own version of lightbox using YUI 2. Its a very basic implementation and uses the Panel widget from YUI. I also added a few effects to it. Since ContainerEffect contains only SLIDING and FADING effects, I added a few of mine.

The demo can be viewed here: YUI Lightbox Demo

Installation

The lightbox script can be downloaded from here: lightbox.js lightbox.css

To make lightbox work, you need to add the following YUI javascript and CSS files to your page:

<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/container/container.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/animation/animation-min.js" type="text/javascript"></script>

Initialize

Use the following code within script tags in your HTML page to initialize lightbox:

function initLightbox() {
    var lightbox = new YAHOO.odhyan.Lightbox;
    lightbox.init();
}
YAHOO.util.Event.on(window, 'load', initLightbox);

HTML to use

Its very easy to add lightbox to any of your links. Just add a classname of yui-lightbox to your anchor element.

<img src="img/image1_thumb.jpg" alt="" />

For better understanding, view the code of index.html

You can customize the lightbox style by adding your own styles to lightbox.css

This is not the first lightbox implementation using YUI. There already exists one and can be viewed here.

Links

• Online Demo
• lightbox.js
• lightbox.css