Wednesday, December 18, 2013

Javascript Puzzle - 2

12:33 AM Posted by Unknown , , , 1 comment
Courtesy: A Javascript conference video. I forgot the name of the conference. Will update.

var name = 'Mr. Bond';

    (function(){
      if(typeof name === 'undefined'){
          var name = "Mr. Bond";
          sayHello(name);
      } else {
           alert(name);
       }
})();

function sayHello(name){
    alert('hello, ' + typeof name !== 'undefined'? name: 'Mr. Robert!');
}

What this alerts? And, give me the reason for that.

JavaScript Puzzle - 1

12:29 AM Posted by Unknown , , , No comments
Courtesy: A Javascript conference video. I forgot the name of the conference. Will update.

var END = 9007199254740992; //Math.pow(2,53)
  var START = END - 100;

var count = 0;
for(var i = START; i<= END; i++){
   count++;
}

alert(count);


What this alerts? And, give me the reason for that.


Tuesday, October 22, 2013

Browser rendering performance testing - document.createfragment vs jquery-element

After reading the post on browser rendering perforamnce, I tried some performance tests. You can see the test in the following url:










See the chrome result. Doing with jquery element is faster than doing with document.createDocumentFragment. Surprising for me!!

Wednesday, October 16, 2013

Tuesday, October 1, 2013

Browser specific CSS Hacks

11:49 AM Posted by Unknown , , , , , , , No comments
1. Webkit browser

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* put your styles here */
}

2. IE8

use the \0/ attribute

.elementclass
{
width: 50px\0/; /* This will get only applied to IE8 */
}

3. IE7

use the *

.elementclass
{
*width: 50px; /* This will get only applied to IE7 */
}

4. IE9
using the :root attribute


:root .elementclass
{
/* this style will be applied to IE9 only */
padding-top: 5px;
}



Sunday, September 29, 2013

Wednesday, September 18, 2013

Duff’s Device pattern in JavaScript

Duff’s Device pattern in JavaScript

Duff’s Device is a technique of unrolling loop bodies so that each iteration actually does
the job of many iterations. Jeff Greenberg is credited with the first published port of
Duff’s Device to JavaScript from its original implementation in C. A typical implementation
looks like this:
//credit: Jeff Greenberg
var iterations = Math.floor(items.length / 8),
startAt = items.length % 8,
i = 0;
do {
switch(startAt){
case 0: process(items[i++]);
case 7: process(items[i++]);
case 6: process(items[i++]);
case 5: process(items[i++]);
case 4: process(items[i++]);
case 3: process(items[i++]);
case 2: process(items[i++]);
case 1: process(items[i++]);
}
startAt = 0;
} while (iterations--);
The basic idea behind this Duff’s Device implementation is that each trip through the
loop is allowed a maximum of eight calls to process(). The number of iterations
through the loop is determined by dividing the total number of items by eight. Because
not all numbers are evenly divisible by eight, the startAt variable holds the remainder
and indicates how many calls to process() will occur in the first trip through the loop.
If there were 12 items, then the first trip through the loop would call process() 4 times,
and then the second trip would call process() 8 times, for a total of two trips through
the loop instead of 12.
A slightly faster version of this algorithm removes the switch statement and separates
the remainder processing from the main processing:
//credit: Jeff Greenberg
var iterations = items.length % 8;
i = items.length -1;
while(iterations){
process(items[i--]);
iterations--;
}
iterations = Math.floor(items.length / 8);
while(iterations){
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
iterations--;
}

Even though this implementation is now two loops instead of one, it runs faster than
the original by removing the switch statement from the loop body.

It can be useful for performance improvement if the number of iteration is more than 1000.

courtesy: High Performance JavaScript by Nicholas Sakas

Wednesday, September 11, 2013

My WebRTC experiments

10:31 PM Posted by Unknown No comments
I am trying on WebRTC. I will update my progress here. Currently, I am stuck on the following issue.

When  I am using RTCDataChannel.send method, I am getting the following error:

Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.

I am checking if this is because of the createOffer issue.

Those who are not familiar with webRTC, you can get idea from webrtc.org

Sunday, May 12, 2013

The superpowers of constructors

2:37 AM Posted by Unknown No comments

Invoking a function as a constructor is a powerful feature of JavaScript, because when a constructor is invoked, the following special actions take place:
  • A new empty object is created.
  • This object is passed to the constructor as the this parameter, and thus becomes the constructor’s function context.
  • In the absence of any explicit return value, the new object is returned as the constructor’s value.

Scoping and functions

2:16 AM Posted by Unknown No comments

In JavaScript, scopes are declared by functions, and not by blocks. The scope of a declaration that’s created inside a block isn’t terminated (as it is in other languages) by the end of the block.

Consider the following code:


if (window) {
  var x = 213;
}
alert(x);


In most other languages, one would expect the scope of the declaration for x to terminate at the end of the block created by the if statement, and for the alert to fail with an undefined value. But if we were to run the preceding code in a page, the value 213 would be alerted because JavaScript doesn’t terminate scopes at the end of blocks.

That seems simple enough, but there are a few nuances to the scoping rules that depend upon what is being declared. Some of these nuances may come as a bit of a surprise:


  • Variable declarations are in scope from their point of declaration to the end of the function within which they’re declared, regardless of block nesting.
  • Named functions are in scope within the entire function within which they’re declared, regardless of block nesting. (Some call this mechanism hoisting.)
  • For the purposes of declaration scopes, the global context acts like one big function encompassing the code on the page.