JavaScript Performance Tips

• avoid loops

• avoid unused code

• avoid loging

• using strict mode

• use === instead of == (browser has more clarity)

• exploit hoisting

• use hasOwnProperty

• use local references for values that have deeper resolution path

• avoid synchronous calls

• minimize dom updates

• minimize style updates

• use fragment whenever applicable

• avoid (for i in) on objects

• exploit power of mapping

• have a check on prototypal inheritance

Moving this blog to blog.ravihamsa.com

After long wait, finally I decided to have my own website, and hence arrive http://ravihamsa.com. To keep all blogs in one place moving all contents of this blog to http://blog.ravihamsa.com, going further all new posts will get added to new site.

See you there!

YUI3 Datatable with freez option

Here is the first draft of YUI3 datatable with freez option, more updates coming in this way!

var tabledata = [
    {"name":"Ravi","month":"January","salary":1460,"ding":490,"dong":980,"bong":950,"kong":540,"rang":1870,"bang":1980,"king":460,"sing":220,"ming":1370,"bing":400},
    {"name":"Kavi","month":"February","salary":570,"ding":10,"dong":890,"bong":1470,"kong":610,"rang":1920,"bang":1630,"king":410,"sing":170,"ming":630,"bing":850},
    {"name":"Bavi","month":"March","salary":510,"ding":580,"dong":1290,"bong":560,"kong":670,"rang":980,"bang":230,"king":570,"sing":270,"ming":30,"bing":1020},
    {"name":"Navi","month":"April","salary":540,"ding":1840,"dong":1010,"bong":200,"kong":750,"rang":1480,"bang":1500,"king":1970,"sing":1220,"ming":1050,"bing":1790},
    {"name":"Davi","month":"May","salary":1740,"ding":730,"dong":1030,"bong":1370,"kong":170,"rang":1090,"bang":1280,"king":1780,"sing":500,"ming":470,"bing":280},
    {"name":"Cavi","month":"June","salary":220,"ding":830,"dong":1040,"bong":1820,"kong":620,"rang":1130,"bang":1050,"king":290,"sing":500,"ming":20,"bing":560},
    {"name":"Aavi","month":"July","salary":1010,"ding":270,"dong":1940,"bong":900,"kong":870,"rang":1930,"bang":840,"king":1300,"sing":1160,"ming":1860,"bing":1450},
    {"name":"Eavi","month":"August","salary":1330,"ding":1560,"dong":1950,"bong":0,"kong":1800,"rang":1060,"bang":960,"king":1670,"sing":300,"ming":1590,"bing":520},
    {"name":"Favi","month":"September","salary":830,"ding":70,"dong":440,"bong":1720,"kong":1830,"rang":420,"bang":1590,"king":1780,"sing":200,"ming":1550,"bing":1040},
         {"name":"Ravi","month":"January","salary":1460,"ding":490,"dong":980,"bong":950,"kong":540,"rang":1870,"bang":1980,"king":460,"sing":220,"ming":1370,"bing":400},
    {"name":"Kavi","month":"February","salary":570,"ding":10,"dong":890,"bong":1470,"kong":610,"rang":1920,"bang":1630,"king":410,"sing":170,"ming":630,"bing":850},
    {"name":"Bavi","month":"March","salary":510,"ding":580,"dong":1290,"bong":560,"kong":670,"rang":980,"bang":230,"king":570,"sing":270,"ming":30,"bing":1020},
    {"name":"Navi","month":"April","salary":540,"ding":1840,"dong":1010,"bong":200,"kong":750,"rang":1480,"bang":1500,"king":1970,"sing":1220,"ming":1050,"bing":1790},
    {"name":"Davi","month":"May","salary":1740,"ding":730,"dong":1030,"bong":1370,"kong":170,"rang":1090,"bang":1280,"king":1780,"sing":500,"ming":470,"bing":280},
    {"name":"Cavi","month":"June","salary":220,"ding":830,"dong":1040,"bong":1820,"kong":620,"rang":1130,"bang":1050,"king":290,"sing":500,"ming":20,"bing":560},
    {"name":"Aavi","month":"July","salary":1010,"ding":270,"dong":1940,"bong":900,"kong":870,"rang":1930,"bang":840,"king":1300,"sing":1160,"ming":1860,"bing":1450},
    {"name":"Eavi","month":"August","salary":1330,"ding":1560,"dong":1950,"bong":0,"kong":1800,"rang":1060,"bang":960,"king":1670,"sing":300,"ming":1590,"bing":520},
    {"name":"Favi","month":"September","salary":830,"ding":70,"dong":440,"bong":1720,"kong":1830,"rang":420,"bang":1590,"king":1780,"sing":200,"ming":1550,"bing":1040}
];


YUI.add('freez-datatable', function(Y) {

    function FreezDataTable() {
        FreezDataTable.superclass.constructor.apply(this, arguments);
    }

    var Y = Y;
    FreezDataTable.NAME = "freez-datatable";
    FreezDataTable.ATTRS = {
        data:{
            value:tabledata,
            setter:function(value) {
                var cols = Y.Object.keys(value[0]);
                var fcols = this.get('freezedColumns');
                var ufcols = [];
                Y.Array.each(cols, function(item) {
                    if (Y.Array.indexOf(fcols, item) == -1) {
                        ufcols.push(item)
                    }
                })
               // console.log(value, cols, fcols, ufcols)
                this.set('columns', cols);
                this.set('unFreezedColumns', ufcols)
                return value;
            }
        },
        freezedColumns:{
            value:[]
        },
        unFreezedColumns:{
            value:[]
        },
        columns:{
            value:[]
        },
        height:{
            value:300
        },
        width:{
            value:600
        }


    }

    Y.extend(FreezDataTable, Y.Widget, {
        freezedTable:null,
        unFreezedTable:null,
        freezedContainer:null,
        unFreezedContainer:null,
        ftable:null,
        uftable:null,
        initializer:function() {
        },
        renderUI:function() {
            var cbox = this.get('contentBox');
            //this.set('width', cbox.get('outerHeight'))
            this.freezedContainer = Y.Node.create('<div class="fcontainer"> </div>')
            this.unFreezedContainer = Y.Node.create('<div class="ufcontainer"></div>')
            cbox.append(this.freezedContainer);
            cbox.append(this.unFreezedContainer);


        },
        bindUI:function() {
        },
        syncUI:function() {
           this.ftable = new Y.DataTable.Base({
                columnset: this.get('freezedColumns'),
                recordset: this.get('data')
            })

            this.uftable = new Y.DataTable.Base({
                columnset: this.get('columns'),
                recordset: this.get('data')
            })
            this.ftable.plug(Y.Plugin.DataTableScroll, {
                height:  (this.get('height')-16)+"px"
            });
            this.ftable.render(this.freezedContainer);
            this.freezedContainer.setStyle('width', (parseInt(this.ftable.get('contentBox').getStyle('width'))-18)+"px")
            
            this.uftable.plug(Y.Plugin.DataTableScroll, {
                width: this.get('width')+"px",
                height: this.get('height')+"px"
            });
            this.uftable.render(this.unFreezedContainer);
             this.uftable.get('contentBox').one('.yui3-datatable-bd').on("scroll",this._handleScroll, this)
        },
        _handleScroll:function(e){
            var freezedbd = this.ftable.get('contentBox').one('.yui3-datatable-bd');
            freezedbd.set('scrollTop',e.target.get('scrollTop') )
        }
    })

    Y.FreezedDataTable = FreezDataTable;

}, "0.0.1", { requires:['datatable','widget']})

YUI({filter:'min'}).use('freez-datatable', function(Y) {
    var dt = new Y.FreezedDataTable({srcNode:'#test', freezedColumns:['name','month']});
    dt.render()
})

<html>
<head>
    <title>dasfadsf</title>

     <script type="text/javascript" src="build/yui/yui-min.js"></script>
     <script type="text/javascript" src="js/datatable.js"></script>
    <style type="text/css">
        .fcontainer {
           position:absolute;
           z-index:12;
            width:155px;
            overflow:hidden;
        }
        .yui3-skin-sam .yui3-freez-datatable-content .yui3-datatable caption{padding:0}
    </style>
</head>

<body  class="yui3-skin-sam">
<div id="test">    
</div>
</body>
</html>

When something not working as expected

Was helping an friend on some JavaScript code. was using yui-dom-event and same code was working differently on ie and ff. since I was helping remotely I couldn’t guess more out of it. Finally after 1 day of full calls and chats finally asked him to expose the url. finally figured some html tags were being closed improperly. so moral of the story is, “if your well known library behaving weirdly in different browsers first thing you should look at is, generated html source”.

CSS Sprites

Every web developer of this era know performance is key parameter to success of any online product. Reducing http requests is one way of improving performance of given webpage. CSS-Sprites is major initiative in this regard. Instead of using different small images for each and every graphical element in page, we use single big image (sprite) as background image and adjust visible area using “background-position” CSS attribute. You can see this method being used in all major websites including Yahoo!, Facebook etc.

Simple Form Submit in AS3

Here is the code one of my friend asked, he wanted flash to submit some data on click of a button. This script assumes you have a Movieclip with instance name “but1” on stage.

but1.addEventListener("click",submitContact);

function submitContact(e:Event) {
var variables:URLVariables = new URLVariables();
var varSend:URLRequest = new URLRequest("email.php");
var varLoader:URLLoader = new URLLoader;
varSend.method = URLRequestMethod.GET;
varSend.data = variables;
variables.Name="Ravi";
variables.Email="Ravi@Some.com";
varLoader.load(varSend)
}

Photography Vocabulary

Ambient Light: Light that already exists in a scene, either natural (sunlight) or manmade (artificial).
Back Lighting: Light from behind the subject, heading toward the camera
Bracket: To make multiple exposures, some overexposed and some underexposed according to the indicated meter reading, used to control brightness, contrast, color and to ensure accurate exposure.
Color Temperature: Numerical measurement of the color of light, measured in degrees Kelvin. Warm is low, cool is high. Normal daylight is approximately 5500 degrees Kelvin.
Convergence: Lines that are parallel in reality appear non-parallel in an image because of the picture-taking perspective.
Diffuse: Light that is scattered, spread out and not coming from a single point. For example, light on a cloudy day is diffuse.
EV: Exposure Value. Developed in order to simplify numbers used in exposure calculations. Currently used to describe the range of exposure in which equipment can successfully operate.
Exposure: The amount of light falling on a sensitive material. Controlled with aperture and shutter speed settings.
Factor: Frequently called Filter Factor. A numerical rating indicating how many times exposure must be increased to compensate for loss of light caused by the density of the filter.
Focal Length: A measurement of the size of a lens, usually in millimeters. Larger lenses produce increased image magnification.
Hot Shoe: A mounting bracket on top of a camera that is used to attach and establish electrical connection with a flash.

Mac Good Parts

Even though I am not a big fan of Mac, But I like some simple things that Apple did right. One such thing is tracking last viewed page in a PDF. Imagine you decide to read a book over weekend, and you cannot do that in one shot. You got to take break etc. But when you open the same PDF in preview, you are navigated to the page which you last read in that PDF. Where as in Windows you have to remember which page you read last and start over.

I agree this is very simple, but this is what called as “Value Addition”.

Learnings from GWT

You should admit that Google web toolkit is a nice piece of framework, which makes AJAX style development very easy. But for a starter there are some more things needs to be known before he starts.

– If you are a JAVA programmer, don’t think twice, GWT is the best web development toolkit available for you, go and use it
– People with Flex experience could find UiBinders GWT interesting, but for people don’t have such experience, this is bit new concept, but worth exploring.
– You need to explicitly create each and every div/HTML element in your page. Even though there are some widgets available, but they are minimal
– Default widgets/components comes with GWT is never enough for you, whatever they have now is very basic, you may have to develop some of your own
– Smart GWT, in one word I can say it’s very heavy. You cannot divide it on required modules. If you are using it for small part of your application, you end up paying more price than you need to. If you are using it for complete App then you have better chance of exploiting it.

Google IME

Ever wondered how to key in Indic languages in your applications? which IME is better. By far I found  Google IME , good enough to start with. Once you start typing your word  it will start giving suggestions to you, you can selection options using arrow keys and enter key, if word you intended is not found in the list, you can open the keyboard provided with the suggestions popup and click on the letter you need. Over all this feels comfortable, and productive way of typing indian languages. My experience with Kannada was very good.

But this is windows only, this is the only time I felt bad about have a MAC. but any way I have windows box and home, and life going on, 😉