-
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
September 5, 2013
JavaScript Performance Tips
July 16, 2011
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!
June 6, 2011
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>
December 7, 2010
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”.
June 16, 2010
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.
April 28, 2010
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) }
April 23, 2010
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.
April 10, 2010
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”.
March 6, 2010
February 15, 2010
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, 😉