Using Objects Maps

Say you have a lot of variables a1,a2, ... an and have a number x=5 to select the ax variable.

using Objects as a map you can do this quite easily:

var obj = {
    a1 = a1,
    a2 = a2,

    an = an
};
var chosen = obj["a"+x];

Now chosen contains the ax variable.

Pitfall

This is an easy pitfall to make:

(function(){
var Object = Object;

})();

Object ends up undefined. So, a fix for that would be:

(function(){
Var Object = window.Object;

})();

But it is slower than this:

(function(){
var O = Object;

})();

another obvious working Pattern is

(function(Object){

})(Object);

MfG Kambfhase

jQuery: Selecting by ID

<div id="randomid" >

You can make jQuery faster by giving it less information about the element you want to select. In Version 1.4+ jQuery optimizes the selecting logic so that $('#randomid') is super fast. So do not do this:

$('div#randomid') // IDs are unique, so the div is unnecessary
$('div[id="randomid"]') // #id is faster
$('body #randomid') // slower, since we have to find body first
$('#randomid',context) // the context makes jQuery use Sizzle, which is slow!
$('#context #randomid') // see above
$('#context').find('#randomid') // Hell, no!

So stick with the nice and simple:

$('#randomid').do(something)

MfG Hase

jQuery 1.4 for Greasemonkey

For some random reason jQuery 1.4 no longer works with Greasemonkey. But the fix is trivial. Either use this fixed 1.4.2 version with @require, or do it your self: Simply replace the window at the very end of the jQuery source code with unsafeWindow. You might also want to add this line to the beginning of your GM Script:

var $=unsafeWindow.jQuery;

Keep on scripting!


mfG Kambfhase

edit: Either I am to stupid or jQuery is not capable of triggering events out of GM. Or probably both.

Clickmaps for jQuery

I hereby release my very first jQuery plugin called Clickmap.

As the name implies, it captures (nearly) all clicks on the page. This data then is used to create a map on top of the page using canvas that shows the points the user clicks. The canvas is also transparent and does not can be clicked in Firefox 3.6 ( probably also in Webkit). The click simply goes through it.

This is what the clickmap looks like:




How to install/ use:

Include the source code into your project. To display the clickmap call jQuery.clickmap.draw() . Also, jQuery.clickmap.clicks is an array containing all the click data, so you can send that to your server and do further investigation there. You can even decide what should be captured. Look at the code for more infos.

Important Notice:

Clickmaps only includes clicks that bubble all the way up to document.


So if you have problems, issues or complaints comments or send me a mail. If you know how to find out, whether the browser supports pointer-events please tell me!


MfG Kambfhase

Console.log() vs. Alert()

Why do people still use alert()? It's annoying, can only display strings properly, [object Object] is useless. It stops the execution of the script and it needs you to click ok. Why not use console.log instead? Console.log is supported across all modern Browsers, including IE8!

"But my script will break in IE6 if I use console.log"

Dude, it takes 5 lines of JavaScript to fix that problem and you don't want the user to be annoyed by cryptic debugging Information, do you?

if( !window.console){
      window.console = {
              log: window.alert
      };
}

This is not even difficult pro-technique js. Personally I prefer:

var cl = window.console ? console.log : function(){};

Every time you use alert(), God kills a kitten!


mfG Kambfhase

The Bitwise Not Operator aka. ~

I often have seen code like this:

Array.prototype.inArray = function(arg){
 return !!~this.indexOf(arg);
};

Let's assume this piece of code would be C++. this.indexOf(arg) would then return an integer which is the index of arg if arg is in the array, else it will return -1; Since most CPUs use the two's complement the -1 would be represented by 0xFF. All the other indices will be simple binary numbers. The ~ operator flips all bits. So -1 will then be 0x00 where as the other numbers will become something else. The first ! turns the 0x00 into a true and the rest into a false. The last ! swaps that again. So we started with a -1 end ended with a false. A 3 would be converted to true. The sole reason C++ programmers use the ~ instead of >= 0 is to save a few nanoseconds. Flipping bits is slightly faster than a comparison.

But this is not C++ its JS. JS has no integer values. All numbers are of the type best known as double. But that is a difficult standard and since JS was supposed to be easy ~ does not flip the bits in the 64-Bit floating point representation. Instead the number is converted to a 32-bit signed integer in two's complement. Than the bits are inverted. Afterwards it gets converted backwards.


You see that the ~ operator does things slower than expected. Do not use it. It only makes you look rather stupid.


mfG Kambfhase