Amit Agarwal

Amit Agarwal

Amit Agarwal  //  Web UI Developer

Competing to be ready before DOM does! More ...

 
Nov 9 / 11:46pm

I spoke at Verchaska

by Amit Agarwal

Last week I spoke at Verchaska about performance optimization in Javascript and how to implement cross browser solutions. It was a nice experience knowing about early stage problems which most of the front end developers face. Most of the content from the talk covered Javascript from basics to advanced. Also, I spoke about CSS, how to implement cross browser solutions and some new cool features in ECMA5, HTML5 & CSS3.

Some of the things which I generally find common across all the novice front end engineers is that, in essence to meet sharp deadlines and for ease of use they all tend to use libraries and frameworks. As a result, they miss the basic beauty of the language. Assume it like this. Libraries are a dashboard to control and use the language who sits between you and the main language engine. You can perform all the actions and functions which are available on the dashboard but the problem arises when it comes to perform some action which is not available on the dashboard and you never bothered to look into actual engine to implement the action yourself. The real path of learning should be, first you understand the language and it's insights, then you can jump into a library/framework which helps you rapid development your stuff.

It was really fun to explain floating concepts, handling closure memory leaks and Javascript identifier resolution from scope chains. How with & catch effect the performance of identifier lookups badly and why you should avoid eval. Evals are generally vulnerable to security problems and also, it doesn't let the browser take the advantage of compile time optimization. People were totally delighted after knowing about such deep concepts and asked lots of questions.

Very few were aware that instead of making lot of DOM getter methods and filtering the nodes by writing long complex code just because you want nodes matching some particular selector rule, now you can use the new DOM selector api <element>.querySelector or <element>.querySelectorAll to avoid unnecessary filtering of nodes. Also, I explained them why you shouldn't do DOM manipulations blindly. Reflow and repaints are costly and can significantly impact your web application performance if not taken care of. Use of timers can help your browser restart run away time and restart it's stack call trace to avoid browser crash.

It was really fun talking to developers there and talking about some of their common code problems. And, I also learnt a lot while explaining the stuff to them. I really thank Verchaska for inviting me :-)

Comments (0)

 
Nov 2 / 3:27pm

Cross browser Console augmentation with debug switch

by Amit Agarwal

Many times I need to write debug statements in my web application. These statements can be consoles or alerts depending on browser compatibility. Problem is that some browsers support logging, some don't and others support logging by use of extension. Few differences:

  1. Firefox supports logging using window.console.log after installing Firebug. If firebug is not installed, console statements break the application.
  2. There is no console logging support in Internet Explorer.
  3. Chrome and Safari have native support for logging using window.console.log
  4. Opera supports logging using window.opera.postError.

Besides the differences, whenever I move my code to production I need to remove/comment all debug statements because they might break the application at user's computer if proper debug statements are not supported by their browsers. I checked all the debug support in major browsers and came up with this script which resolves above issues.

Read the rest of this post »

Filed under  //  Console Debug Flag   Cross Browser Console   Javascript  

Comments (6)

 
Oct 13 / 1:08pm

Create once callable functions

by Amit Agarwal

Another use of Javascript closures. You can create functions which are callable only once. 

function createChance(){
    var chanceLeft = true;
    return function(){
        if(chanceLeft){
            console.log("This was the only chance you had.");
             chanceLeft = false;
        }
        else{
            console.log('Sorry: you already used your chance');
        }
    };
}

var chance = createChance();


chance();
 // This was the only chance you had.


chance();
// Sorry: you already used your chance

These kind of functions can be useful when you need to implement security pattern in Javascript. Once created function should be used only once. To call it again you need to request its creation again. Another version of this kind of patters can be to implement envelops, where an envelop can be opened only by the person who has the key to open it.

Filed under  //  Javascript  

Comments (0)

 
Oct 12 / 1:41pm

Understanding Google Chrome developer tools

by Amit Agarwal

This is a very nice presentation given by Chrome team at Google I/O 2010. I got to know so many hidden facts about Chrome Developer Tool and I guess now I need to spend a lot less time in debugging and optimization. Must view for any Front-end developer.

Few of the features which excited me:

  1. Ability to see all the event handlers applied to an HTML element. (Not in firebug)
  2. Ability to see all the prototype chains followed by an HTML element. (Not in firebug)
  3. Real time HTML and CSS editing (This was not there few months back and this is the main reason why I was not shifting to Chrome Developer Tools as my default debugger).
  4. You can edit JAVASCRIPTS TOO at real time! My favorite. (Not in firebug)
  5. Very good tools for profiling and optimization work. Specially - CPU Profile, Heap Profile and Audits.
  6. Firebug command line API support (http://getfirebug.com/wiki/index.php/Command_Line_API)

 

Filed under  //  Javascript   Videos  

Comments (0)

 
Oct 7 / 4:33pm

Object masquerading with Javascript

by Amit Agarwal

Often people follow this common approach to make their Javascript programs object oriented. Let me explain one more approach for creating subclasses.

Prototype Approach (Common)

Base Class

function Person(fname, lname){
    this.fname = fname;
    this.lname = lname;
}

Person.prototype.getFullName = function(){
        return this.fname+" "+this.lname;
}

SubClass

function Employee(jobType){
    this.jobType = jobType;
}

Employee.prototype = new Person();

Employee.prototype.getNameAndJobType = function(){
    return this.fname+" "+this.lname+" "+this.jobType;
 }

Read the rest of this post »

Filed under  //  Javascript  

Comments (1)