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>

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”.

Happy New Year 2010

I wish happy new year 2010.

wish you life get eventful
wish your efforts get fruitful
wish your dreams get colorful

Wrapping long words using CSS

one of my colleague came up with this problem, he wanted a long word to be wrapped within given width. overflow hidden was helping us to hide un-wrapped part the big word, finally I figured out using word-wrap:break-word will do the trick. It did work in Firefox and IE6 browsers but not in Opera, so we decided to use overflow:hidden with word-wrap, so that in Opera we hide un-wrapped part of that word, and it wraps neatly in other browsers.

JavaScript Syntax

Identifiers in JavaScript should start from a letter/underscore or a dollar sign, all other characters might be letters, underscores, dollar signs, or numbers.

You cannot use a key word as an identifier.

In JavaScript every thing is case sensitive. something differs from someThing.

you can single line and multi line comments similar to C language.

//single line comment

/*

* This is a multi-line

* Comment

*/

/*

* This is a multi-line

* Comment

*/

A semicolon at end of each statement is preferred but not mandatory.

Photo Test

Captured at Savoy Hotel, Ooty

Enterframe Events

EnterFrame is an event that get dispatched according to the frame rate of given movie. we can assign frame rate for a flash movie between 12 to 120.

Say if we associate an Enterframe event listener to Stage of a movie which has frame rate 20, flash run time tries to dispatch 20 Enterframe events per second. This is basically used to animate graphical objects in flash, but we cannot completely assume that this event will get triggered with respect to the given frame rate.

the Flash runtime does not always achieve the designated frame rate. If the computer is too slow to render frames fast enough to keep up with the designated frame rate, the animation slows down. This slowdown can even vary depending on the system load; if other programs are running or if Flash is performing some processor-intensive task, the frame rate may drop for only a short period and then resume its normal pace.

Flash CS3

Flash CS3 is a powerful authoring tool with powerful drawing capabilities helps you in creating Animations, Websites with audio and video, Ad Banners, Games, Guided\Auto-run tutorials and Data-Driven applications.

Flexibility, strong control over visual and audio elements, provide scalability, lower footprint, resizabilities, internal scripting language, highly integrated with other Adobe tools are major features of Flash IDE.

New features in flash CS3

• Animation to ActionScript conversion
• Standard Adobe Interface
• Advanced Debugger
• Rich Drawing Capabilities
• User Interface Components
• QuickTime Export