Siderite's Blog

and has 0 comments
I know of this method from the good old Internet Explorer 6 days. In order to force the browser to redraw an element, solving weird browser refresh issues, change it's css class. I usually go for element.className+='';. So you see, you don't have to actually change it. Sometimes you need to do this after a bit of code has been executed, so put it all in a setTimeout.

More explicitly, I was trying to solve this weird bug where using jQuery slideUp/slideDown I would get some elements in Internet Explorer 8 to disregard some CSS rules. Mainly the header of a collapsible panel would suddenly and intermittently seem to lose a margin-bottom: 18px !important; rule. In order to fix this instead of panel.slideUp(); I used 
panel.slideUp(400/*the default value*/,function() { 
  setTimeout(function() { 
    header.each(function(){ 
      this.className+=''; 
    }); 
  },1); 
});
where panel is the collapsible part and header is the clickable part. Same for slideDown.

and has 0 comments
I had to fix this weird bug today, where only in IE9 the entire page would freeze suddenly. The only way to get anything done was to select some text or scroll a scrollable area. I was creating an input text field, then, when pressing enter, I would do something with the value and remove the element.

It appears that in Internet Explorer 9 it is wrong to remove the element that holds the focus. Use window.focus(); before you do that.

and has 2 comments
I was having one of those Internet Explorer moments in Javascript, when I wanted to use Array.isArray and I couldn't because it was IE8. So, I thought, I would create my own isArray function and attach it to Array, so that it works cross browser. The issue now was how do I detect if an object in Javascript is an Array.

The instanceOf operator came to mind immediately. After all, don't you do the same thing in C#, compare if an object "is" something? Luckily for me, I checked the Internet and reached the faithful StackOverflow with an answer. The interesting bit was explaining why instanceOf would not work for all cases and that is that objects that cross the frame boundaries have their own version of class.

Let's say that you have two pages and one if having the other in an iframe. Let's call them innovatively testParent and testChild. If you create an array instance in testChild like x=new Array(); or x=[];, then the result of x instanceOf Array will be true in testChild, but false in testParent. That's because the Array in one page is different from Array in the other. And, damn it, it makes sense, too. Imagine you did what I did and added a function to the Array class. Would that class be the same as the Array in the iframe, without the function? What if I decide to add
Array.prototype.indexOf?

So, bottom line: in Javascript, instanceOf will not work in any meaningful way across frame boundaries.

Oh, and just so you do have a good way to check if an object is and array, do this:
var strArray=Object.prototype.toString(new Array());
Array.isArray=function(obj) {
  return Object.prototype.toString(obj)==strArray;
}

and has 0 comments
This will be a short blog post that shows my error in understanding what Javascript maps or objects are. I don't mean Google Maps, I mean dynamic objects that have properties that can be accessed via a key, not an index. Let's me exemplify:
var obj={
  property1:"value1",
  property2:2,
  property3: new Date()
};
obj["property 4"]="value 4";
obj.property5=new MyCustomObject();
obj[6]='value 6';
console.log(obj.property1);
console.log(obj['property2']);
console.log(obj["property3"]);
console.log(obj['property 4']);
console.log(obj.property5);
console.log(obj[6]);
In this example, obj is an instance of object that had three properties and others are added. First the declaration notation is JSON like, then any object can be assigned to a property via two notations: the '.'(dot) and the square brackets. Note that the value of 'property 4' and of '6' can only be accessed via square brackets, there is no dot notation to escape that space and obj.6 is invalid.

Now, the gotcha is that, coming from the C# world, I've immediately associated this with a Hashtable class: something that can have any object as key and any object as value, but instead, a map is more like a Dictionary<string,object>.

Let me show you why that may be confusing. This is perfectly usable:
obj[new Date()]=true;
In this example I've used a Date object as a key. Or have I? In Javascript any object can be turned into a string with the toString() function. In fact, our Javascript map uses a key much like 'Sat Jul 14 2012 00:07:00 GMT+0300 (GTB Daylight Time)'. The translations from one type to another are seamless (and can generate quite a bit of righteous anger, too).

My point is that you can also use something like
obj[new MyObject()]=true;
only to see it blow in your face. The key will most likely be '[Object object]'. Not at all what was expected.

So remember: javascript properties can be any string, no matter how strange, but not other types. obj[6] will return the value you have set in obj[6] because in both cases that 6 is first turned into a string '6' and then used. It has nothing to do with the '6th value' or '6th property'. Those are arrays. The same for a Date or some custom object that has a toString() function that returns something unique for that object. I wouldn't use that, though, as you would probably want to use objects as keys and compare them by reference, not string value.

and has 2 comments
It was not a complete surprise, but I did not expect it, either: the switch statement in Javascript is type exact, meaning that a classic if block like this:
if (x==1) { 
  doSomething() 
} else { 
  doSomethingElse(); 
}
is not equivalent to 
switch(x) {
  case 1:
    doSomething();
    break;
  default:
    doSomethingElse();
    break;
}
If x is a string with the value '1' the if will do something, while the switch will do something else (pardon the pun). The equivalent if block for the switch statement would be:
if (x===1) { 
  doSomething() 
} else { 
  doSomethingElse(); 
}
(Notice the triple equality sign, which is type exact)

Just needed to be said.

and has 0 comments
Update:
I've pinpointed the issue after a few other investigations. The https:// site was returning a security certificate that was issued for another domain. Why it worked in FireFox anyway and why it didn't work in Chrome, but then it worked after an unauthorized call first, I still don't know, but it is already in the domain of browser internals.

I was trying to access an API on https:// from a page that was hosted on http://. Since the scheme of the call was different from the scheme of the hosted URL, it is interpreted as a cross domain call. You might want to research this concept, called CORS, in order to understand the rest of the post.

The thing is that it didn't work. The server was correctly configured to allow cross domain access, but my jQuery calls did not succeed. In order to access the API I needed to send an Authorization header, as well as request the information as JSON. Investigations on the actual browser calls showed the correct OPTIONS request method, as well as the expected headers, only they appeared as 'Aborted'. It took me a few hours of taking things apart, debugging jQuery, adding and removing options to suddenly see it work! The problem was that after resetting IIS, the problem appeared again! What was going on?

In the end I've identified a way to consistently reproduce the problem, even if at the moment I have no explanation for it. The calls succeed after making a call with no headers (including the Content-Type one). So make a bogus, unauthorized call and the next correct calls will work. Somehow that depends on IIS as well as the Chrome browser. In Firefox it works directly and in Chrome it seems to be consistently reproducible.

and has 9 comments
I had this operation on a Javascript object that was using a complex regular expression to test for something. Usually, when you want to do that, you use the regular expression inline or as a local variable. However, given the complexity of the expression I thought it would be more efficient to cache the object and reuse it anytime.

Now, there are two gotchas when using regular expressions in Javascript. One of them is that if you want to match on a string multiple times, you need to use the global flag. For example the code 
var reg=new RegExp('a',''); //the same as: var reg=/a/;
alert('aaa'.replace(reg,'b'));
will alert 'baa', because after the first match and replace, the RegExp object returns from the replace operation. That is why I normally use the global flag on all my regular expressions like this: 
var reg=new RegExp('a','g'); //the same as: var reg=/a/g;
alert('aaa'.replace(reg,'b'));
(alerts 'bbb')

The second gotcha is that if you use the global flag, the lastIndex property of the RegExp object remains unchanged for the next match. So a code like this:
var reg=new RegExp('a',''); //same as: /a/;
 
reg.test('aaa');
alert(reg.lastIndex);
 
reg.test('aaa');
alert(reg.lastIndex);
will alert 0 both times. Using the global flag will lead to alerting 1 and 2.

The problem is that the solution to the first gotcha leads to the second like in my case. I used the RegExp object as a field in my object, then I used it repeatedly to test for a pattern in more strings. It would work once, then fail, then work again. Once I removed the global flag, it all worked like a charm.

The moral of the story is to be careful of constructs like _reg.test(input);
when _reg is a global regular expression. It will attempt to match from the index of the last match in any previous string.

Also, in order to use a global RegExp multiple times without redeclaring it every time, one can just manually reset the lastIndex property : reg.lastIndex=0;

Update: Here is a case that was totally weird. Imagine a javascript function that returns an array of strings based on a regular expression match inside a for loop. In FireFox it would return half the number of items that it should have. If one would enter FireBug and place a breakpoint in the loop, the list would be OK! If the breakpoint were to be placed outside the loop, the bug would occur. Here is the code. Try to see what is wrong with it:
types.forEach(function (type) {
    if (type && type.name) {
        var m = /(\{tag_.*\})/ig.exec(type.name);
        // type is tag
        if (m && m.length) {
            typesDict[type.name] = m[1];
        }
    }
});
Click here to see the answer

and has 4 comments
Short version: here is the link to the uploaded .NET regular expression. (look in the comment for the updated version)

I noticed that the javascript code that I am using to parse PGN chess games and display it is rather slow and I wanted to create my own PGN parser, one that would be optimal in speed. "It should be easy", I thought, as I was imagining getting the BNF syntax for PGN, copy pasting it into a parser generator and effortlessly getting the Javascript parser that would spit out all secrets of the game. It wasn't easy.

First of all, the BNF notation for Portable Game Notation was not complete. Sure, text was used to explain the left overs, but there was no real information about it in any of the "official" PGN pages or Wikipedia. Software and chess related FTPs and websites seemed to be terrible obsolete or missing altogether.

Then there was the parser generator. Wikipedia tells me that ANTLR is pretty good, as it can spew Javascript code on the other end. I downloaded it (a .jar Java file - ugh!), ran it, pasted BNF into it... got a generic error. 10 minutes later I was learning that ANTLR does not support BNF, but only its own notation. Searches for tools that would do the conversion automatically led me to smartass RTFM people who explained how easy it is to do it manually. Maybe they should have done for me, then.

After all this (and many fruitless searches on Google) I decided to use regular expressions. After all, it might make a lot of sense to have a parser in a language like C#, but the difference in speed between a Javascript implementation and a native regular expression should be pretty large, no matter how much they optimize the engine. Ok, let's define the rules of a PGN file then.

In a PGN file, a game always starts with some tags, explaining what the event is, who played, when, etc. The format of a tag is [name "value"]. There are PGN files that do not have this marker, but then there wouldn't be more than one game inside. The regular expression for a tag is: (\[\s*(?<tagName>\w+)\s*"(?<tagValue>[^"]*)"\s*\]\s*)+. Don't be scared, it only means some empty space maybe, then a word, some empty space again, then a quoted string that does not contain quotes, then some empty space again, all in square brackets and maybe followed by more empty space, all of this appearing at least once.

So far so good, now comes the list of moves. The simplest possible move looks like 1. e4, so a move number and a move. But there are more things that can be added to a move. For starters, the move for black could be following next (1. e4 e5) or a bit after, maybe if there are commentaries or variations for the move of the white player (1... e5). The move itself has a variety of possible forms:
  • e4 - pawn moved to e4
  • Nf3 - knight moved to f3
  • Qxe5 - queen captured on e5
  • R6xf6 - the rook on the 6 rank captured on f6
  • Raa8 - The rook on file a moved to a8
  • Ka1xc2 - the knight at a1 captured on c2
  • f8=Q - pawn moved to f8 and promoted to queen
  • dxe8=B - pawn on the d file captured on e8 and promoted to bishop


There is more information about the moves. If you give check, you must end it with a + sign, if you mate you end with #, if the move is weird, special, very good, very bad, you can end it with stuff like !!, !?, ?, !, etc which are the PGN version of WTF?!. And if that is not enough, there are some numbers called NAG which are supposed to represent a numeric, language independent, status code. Also, the letters that represent the pieces are not language independent, so a French PGN might look completely different from an English one. So let's attempt a regular expression for the move only. I will not implement NAG or other pieces for non-English languages: (?:[PNBRQK]?[a-h]?[1-8]?x?[a-h][1-8](?:\=[PNBRQK])?|O(-?O){1,2})[\+#]?(\s*[\!\?]+)?). I know, scary. But it means a letter in the list PNBRQK, one for each possible type of chess piece, which may appear or it may not, then a letter between a and h, which would represent a file, then a number between 1 and 8 which would represent a rank. Both letter and number might not appear, since they represent hints on where the piece that moved was coming from. Then there is a possible letter x, indicating a capture, then, finally, the destination coordinates for the move. There follows an equal sign and another piece, in case of promotion. An astute reader might observe that this also matches a rook that promotes to something else, for example. This is not completely strict. If this long expression is not matched, maybe something that looks like OO, O-O, OOO or O-O-O could be matched, representing the two possible types of castling, when a rook and a king move at the same time around each other, provided neither had not moved yet. And to top it off, we allow for some empty space and the characters ! and ? in order to let chess annotators express their feelings.

It's not over yet. PGN notation allows for commentaries, which are bits of text inside curly brackets {what an incredibly bad move!} and also variations. The variations show possible outcomes from the main branch. They are lists of moves that are enclosed in round brackets. The branches can be multiple and they can branch themselves! Now, this is a problem, as regular expressions are not recursive. But we only need to match variations and then reparse them in code when found. So, let's attempt a regular expression. It is getting quite big already, so let's add some tokens that can represent already discussed bits. I will use a @ sign to enclose the tokens. Here we go:
  • @tags@ - we will use this as a marker for one or more tags
  • @move@ - we will use this as a marker for the complicated move syntax explained above
  • (?<moveNumber>\d+)(?<moveMarker>\.|\.{3})\s*(?<moveValue>@move@)(?:\s*(?<moveValue2>@move@))?\s* - the move number, 1 or 3 dots, some empty space, then a move. It can be followed directly by another move, for black. Lets call this @line@
  • (?:\{(?<varComment>[^\}]*?)\}\s*)? - this is a comment match, something enclosed in curly brackets; we'll call it @comment@
  • (?:@line@@variations@@comment@)* - wow, so simple! Multiple lines, each maybe followed by variations and a comment. This would be a @list@ of moves.
  • (?<endMarker>1\-?0|0\-?1|1/2\-?1/2|\*)?\s* - this is the end marker of a game. It should be there, but in some cases it is not. It shows the final score or an unfinished match. We'll call it @ender@
  • (?<pgnGame>\s*@tags@@list@@ender@) - The final tokenised regular expression, containing an entire PGN game.


But it is not over yet. Remember @variations@ ? We did not define it and with good reason. A good approximation would be (?:\((?<variation>.*)\)\s*)*, which defines something enclosed in parenthesis. But it would not work well. Regular expressions are greedy by default, so it would just get the first round bracket and everything till the last found in the file! Using the non greedy marker ? would not work either, as the match will stop after the first closing bracket inside a variation. Comments might contain parenthesis characters as well.

The only solution is to better match a variation so that some sort of syntax checking is being performed. We know that a variation contains a list of moves, so we can use that, by defining @variations@ as (?:\((?<variation>@list@)\)\s*)*. @list@ already contains @variations@, though, so we can do this a number of times, to the maximum supported branch depth, then replace the final variation with the generic "everything goes" approximation from above. When we read the results of the match, we just take the variation matches and reparse them with the list subexpression, programatically, and check extra syntax features, like the number of moves being subsequent.

It is no wonder that at the Regular Expressions Library site there was no expression for PGN. I made the effort to upload it, maybe other people refine it and make it even better. Here is the link to the uploaded regular expression. The complete regular expression is here:
(?<pgnGame>\s*(?:\[\s*(?<tagName>\w+)\s*"(?<tagValue>[^"]*)"\s*\]\s*)+(?:(?<moveNumber>\d+)(?<moveMarker>\.|\.{3})\s*(?<moveValue>(?:[PNBRQK]?[a-h]?[1-8]?x?[a-h][1-8](?:\=[PNBRQK])?|O(-?O){1,2})[\+#]?(\s*[\!\?]+)?)(?:\s*(?<moveValue2>(?:[PNBRQK]?[a-h]?[1-8]?x?[a-h][1-8](?:\=[PNBRQK])?|O(-?O){1,2})[\+#]?(\s*[\!\?]+)?))?\s*(?:\(\s*(?<variation>(?:(?<varMoveNumber>\d+)(?<varMoveMarker>\.|\.{3})\s*(?<varMoveValue>(?:[PNBRQK]?[a-h]?[1-8]?x?[a-h][1-8](?:\=[PNBRQK])?|O(-?O){1,2})[\+#]?(\s*[\!\?]+)?)(?:\s*(?<varMoveValue2>(?:[PNBRQK]?[a-h]?[1-8]?x?[a-h][1-8](?:\=[PNBRQK])?|O(-?O){1,2})[\+#]?(\s*[\!\?]+)?))?\s*(?:\((?<varVariation>.*)\)\s*)?(?:\{(?<varComment>[^\}]*?)\}\s*)?)*)\s*\)\s*)*(?:\{(?<comment>[^\}]*?)\}\s*)?)*(?<endMarker>1\-?0|0\-?1|1/2\-?1/2|\*)?\s*)


Note: the flavour of the regular expression above is .Net. Javascript does not support named tags, the things between the angle brackets, so if you want to make it work for js, remove ?<name> constructs from it.

Now to work on the actual javascript (ouch!)

Update: I took my glorious regular expression and used it in a javascript code only to find out that groups in Javascript do not act like collections of found items, but only the last match. In other words, if you match 'abc' with (.)* (match as many characters in a row, and capture each character in part) you will get an array that contains 'abc' as the first item and 'c' as the second. That's insane!

Update: As per Matty's suggestion, I've added the less used RxQ move syntax (I do have a hunch that it is not complete, for example stuff like RxN2, RxNa or RxNa2 might also be accepted, but they are not implemented in the regex). I also removed the need for at least one PGN tag. To avoid false positives you might still want to use the + versus the * notation after the tagName/tagValue construct. The final version is here:

(?<pgnGame>\s*(?:\[\s*(?<tagName>\w+)\s*"(?<tagValue>[^"]*)"\s*\]\s*)*(?:(?<moveNumber>\d+)(?<moveMarker>\.|\.{3})\s*(?<moveValue>(?:[PNBRQK]?[a-h]?[1-8]?x?(?:[a-h][1-8]|[NBRQK])(?:\=[PNBRQK])?|O(-?O){1,2})[\+#]?(\s*[\!\?]+)?)(?:\s*(?<moveValue2>(?:[PNBRQK]?[a-h]?[1-8]?x?(?:[a-h][1-8]|[NBRQK])(?:\=[PNBRQK])?|O(-?O){1,2})[\+#]?(\s*[\!\?]+)?))?\s*(?:\(\s*(?<variation>(?:(?<varMoveNumber>\d+)(?<varMoveMarker>\.|\.{3})\s*(?<varMoveValue>(?:[PNBRQK]?[a-h]?[1-8]?x?(?:[a-h][1-8]|[NBRQK])(?:\=[PNBRQK])?|O(-?O){1,2})[\+#]?(\s*[\!\?]+)?)(?:\s*(?<varMoveValue2>(?:[PNBRQK]?[a-h]?[1-8]?x?(?:[a-h][1-8]|[NBRQK])(?:\=[PNBRQK])?|O(-?O){1,2})[\+#]?(\s*[\!\?]+)?))?\s*(?:\((?<varVariation>.*)\)\s*)?(?:\{(?<varComment>[^\}]*?)\}\s*)?)*)\s*\)\s*)*(?:\{(?<comment>[^\}]*?)\}\s*)?)*(?<endMarker>1\-?0|0\-?1|1/2\-?1/2|\*)?\s*)

The Regexlib version has also been updated in a comment (I don't know how - or if it is possible - to edit the original).

and has 0 comments
I was working on the chess board support on my blog, involving a third party javascript script. The idea was that, if any element on the page is of class pgn, then the parser should try to read the contents and transform it into a chess board.

Traditionally, what you would do is:
  1. load the external scripts
  2. load the external css files
  3. run a small initialization script that finds all the pgn elements and applies the transformation on them
. Now, imagine that I am doing several processes like this. On some blog posts I will talk about chess, but on other I would display some chart or have extra functionality. Wouldn't it be nice if I could only load the external scripts when I actually need them?

In order to do that, I must reverse the order of the steps. If I find pgn elements, I load external scripts. When loaded, I execute the initialization script. Long story short, here is a javascript function to load an external script (or several) and then execute a function when they are loaded:

function loadScript(src,onload) {
  if (src&&typeof(src)!='string'&&src.length) {
    //in case the first parameter is a list of items
    var loadedScripts=0;
    // execute the load function only if all the scripts have finished loading
    var increment=onload
      ?function() {
        loadedScripts++;
        if (loadedScripts==src.length) {
          onload(null);
        }
      }
      :null;
    for (var i=0; i<src.length; i++) {
      loadScript(src[i],increment);
    }
    return;
  }
  var script=document.createElement('script');
  script.type='text/javascript';
  // HTML5 only, but it could work
  script.async=true;
  script.src=src;
  if (onload) {
  if (typeof(script.onload)=='undefined'&&typeof(script.readyState)!='undefined') {
  //IE
    script.onreadystatechange=function() {
      if(script.readyState=='complete'||script.readyState=='loaded') {
        onload(script);
      }
    };
  } else {
    //not IE
    script.onload=function() {
      onload(script);
    };
  }
  }
  document.body.appendChild(script);
}


I hope it helps.

and has 0 comments
As a small joke I've added a new feature to the blog. If you don't see it, it will see you, hee hee! Warning: the eyes are not visible when the pages first load, only if you spend some time reading.

and has 1 comment
I didn't know about this until today, but the technique itself is so simple that it must have worked on every browser from the first introduction of the :visited CSS selector. Think about it: in your site you have a css style that colors the visited links with a specific color. Then you place in your page a list of links to other sites (maybe in a hidden container). Using Javascript, you inquire the computed style for each of the links. Taadaa! You now know the links in your list that the visitor has recently visited.

You can download a PHP demo of the technique from here. Ain't this neat?

Update: I since found another interesting article, showing how a site could (on certain browsers that are not Internet Explorer >:) )see if you are logged on to another. Here is the link.

and has 1 comment
Wow, long title. The problem, however, is simple: when adding an inline Javascript script block that changes the window.location or window.location.href properties, FireFox and Chrome do not retain the original URL of the page in the browser history. The Back button doesn't work correctly.

Going to the Mozilla page for developers I find that both redirect methods are equivalent to location.assign(url) which implicitly sets the url in the browser history chain, as opposed to location.replace(url) which doesn't affect the history and just replaces the current URL. So I get to use one method and get the behaviour of the other!

Enough said. Long story short, the behaviour was not reproduced if the same script was being loaded in a button click event. That means it is another of those annoying Gecko page load completed issues.

The solution? Instead of location=url; use setTimeout(function() { location=url; },1);. I know, really ugly and stupid. If you find a better solution to cause a redirect from javascript, please let me know.

and has 0 comments
The book started really nice, at a beginner to medium level with which I could not feel neither embarrassed nor overwhelmed. The first chapter was about the expressiveness of Javascript and how different styles of programming could be employed to achieve the same goals. This part of it I would have liked to see expanded in a book of its own, with code examples and everything.

The second chapter was also interesting, comparing the interface style of programming with the options available inside Javascript as well as giving some real life solutions. Personally, I didn't think the solutions were valid, as writing the interface as comments and trying to enforce the interface inside methods and getters/setters feels cumbersome and "unJavascriptish" to me.

The third chapter, Encapsulation and Information Hiding, described object creation, private, privileged (not protected!) and public members, while the fourth was dedicated to inheritance. All these are great reading for a Javascript programmer, as they might teach one or two new things.

From then on, 13 chapters described various software patterns and their application in Javascript. Alas, since this was the explicit purpose of the book, I can't say I enjoyed that part of the book. It felt like any other rehashing of the original GoF book, only with the syntax changed. Well, maybe not quite so bad, but it lacked a consistency and a touch of the writer's personality that makes books easy to read and to remember.

That being said, the technical part was top notch and the structure of each chapter made it easy to understand everything in them. The software patterns described were: Singleton, Chaining, Factory, Bridge, Composite, Facade, Adapter, Decorator, Flyweight, Proxy, Observer, Command and Chain of Responsibility.

Overall, a nice book for reference, but not one that I would call memorable. An easy read and also an easy browse, since one can pass quickly through the book and still understand what it is all about.

and has 0 comments
I have been working on a jQuery based control library for a few months and today I replaced the embedded 1.3.2 version with the 1.4.2 version. I immediately noticed an increase in performance. Before, the profilers were screaming at the CLASS function, immediately followed by css. Now, the CLASS function seems to work 10 times faster. Some resizing script that I was using and was kind of sluggish now behaved all perky. I personally believe John Resig did some good things in the new 1.4 jQuery release.

Also, trying to optimize javascript code and having attended a Javascript training recently, I reached some conclusions that I want to formalize and place in a blog post, but just in case I don't find the resources, here are some quick pointers:
  • Javascript has function scope and closure support, which means that a variable defined in a function will be accessed faster than one that is outside or global, also that any function you create inside another function remembers all the variables declared in that scope. You should declare local variables in init functions and also declare local functions that use those variables, essentially guaranteeing faster access and that no one will overwrite them accidentally. Also, cache in this way the global variables and functions that are commonly used, like document
  • Cache the jQuery objects, not the elements. Not only it reduces the overhead of recreating them, but they "track" the underlying elements even if one removes/adds/modifies them.
  • Use the context format find method of the jQuery selector to get to child controls.
  • There are a lot of free profiling tools for javascript: dynaTrace Ajax is pretty cool, but also tools like the IE8 developer toolbar profiler or the famous Firebug and its many addons. You should use a profiler to understand where your bottlenecks are, they might not be where you expect them to be.
  • Redrawing the DOM elements is an expensive operation and changing the style of an element has many side effects. You should check if the value you wish to change in the style of an element is not already set. For example jQuery has the outerWidth and outerHeight functions that should return the same sizes as the value you pass to width and height (at least for divs with overflow not 'visible')


Here is some code that demonstrates the above rules:

/* set an element to be of the same size as another element */
function sameSize(base,target) {
  // jQuery and cache
  base=$(base);
  target=$(target);
  // local variable will be remembered 
  // and accessed faster
  var lastSize={
    width:-1,
    height:-1
  };
  // local function will be private and also accessed faster
  function checkSize() {
    // get the outer size of the base element
    var baseSize={
      width:base.outerWidth(),
      height:base.outerHeight()
    };
    // compare it with lastSize
    // do nothing if this size was handled before
    // use the !== inequality for extra speed (no type conversion)
    if (baseSize.width!==lastSize.width
      ||baseSize.height!==lastSize.height) {
      // get both the declared and real size of the target element
      var targetSize={
        declaredWidth:target.css('width'),
        declaredHeight:target.css('height'),
        width:target.outerWidth(),
        height:target.outerHeight()
      };
      // only change the size (and thus fire all sorts of events
      // and layout refreshes) only if the size is not already
      // declared as such or simply the same for other reasons
      // like 100% layout in a common container
      if ((targetSize.width!==baseSize.width
          &&targetSize.declaredWidth!=baseSize.width+'px')
        ||(targetSize.height!==baseSize.height
          &&targetSize.declaredHeight!=baseSize.height+'px') {
            // Javascript object notation comes in handy
            // when using the css jQuery function
            target.css(baseSize);
          }
      // cache the handled size
      lastSize=baseSize;
    }
  }
  // bind the function to any event you want to
  // since it will only do anything if the size actually
  // needs changing
  base.bind('resize',checkSize);
  $(window).bind('resize',checkSize);
  setInterval(checkSize,1000);
}

/* faster getElementById */
// use a local anonymous function as a closure
(function(){
  // cache the document in a private local variable
  var d=document;
  byId=function(id) {
    return d.getElementById(id);
  };
  // a lot more code might come here, all using byId and accessing
  // it faster since it is local to the closure
})();
/* you might think that this doesn't do much if no other code
in the closure, since byId would be a global function and just as
slow to be accessed, but remember that you only need to find the
function once, while document.getElementById needs to find document,
and then getElementById. And document is a large object. */

/* find the tables inside a div using the context syntax */
var div=$('#myDiv');
var childTables=$('table',div);

and has 1 comment
I started using a script that shows me what javascript errors occur in my blog. I soon found out that there were about 10-20 errors each day, intermittently, the vast majority of them being '_WidgetManager is undefined'. I googled it, of course, only to discover that a lot of people had it, some fix was applied by Google and thus most of the articles on the web were completely unuseful.

Well, what seemed to happen is that some code was added at the end of the blog page, loading a js file, and if the js file was (for some weird reason) not loaded, the script following would throw an error. So I added my own script to create a fake _WidgetManager class just in case the script did not load.

Hoping it might help others, here is the script:
_WidgetInfo=function(){};
_WidgetManager={
 _Init:function() {},
 _SetPageActionUrl:function() {},
 _SetDataContext:function() {},
 _SetSystemMarkup:function() {},
 _RegisterWidget:function() {}
};