Kambfhases Blög

Using Objects Maps

2010-06-02T03:51:00.000-07:00

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

2010-05-24T05:07:00.002-07:00

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

2010-03-04T01:45:00.000-08:00

<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

2010-02-22T10:36:00.000-08:00

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

2010-02-16T04:10:00.000-08:00

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()

2010-02-12T04:37:00.000-08:00

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. ~

2010-02-11T10:53:00.000-08:00

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

Scientific Research proves: Paul Irish is human!

2010-02-10T02:27:00.000-08:00

Note: This is not about a turing test with Paul.

Last week I have have been on irc://irc.freenode.net/#jQuery to ask for an advice:

<khase> Best Practice Question: I currently add a custom enabled-attribute to a couple of spans. I preserve classes to be for styling only, as the enabled attr, is used for more things than just layout. Is one method faster/better than the other or is it just amatter of taste?
<thelaings> hey ppl
<timmywil> khase: which method are you using?
<erichynds> khase: creating custom attributes can cause memory leaks
<khase> i use attr for "enabled" and class for classes. :o
<thelaings> i'm trying to get a better understanding of .data
<timmywil> sounds right
<thelaings> is it only used for ajax or for data already on the page?
<ajpiano> thelaings: .data() is just a accessing a gigantic cache
<ajpiano> $.cache
<ajpiano> everything is stored in that cache
<BarelyFitz> erichynds: custom attributes causing memory leaks? isn't that only if you attach a javascript object to it?
<ajpiano> event handlers, and any arbitrary .data() that is assigned by you, jquery, or any plugins
<innociv> .data() is sort of like having <element CustomDataCacheProperty="">
<innociv> SORT OF.
<erichynds> BarelyFitz: I don't know the specifics - just what i've been told. that is entirely possible
<paul_irish> khase: classes are faster for traversing/selecting
<khase> h,
<khase> hm, gotta rethink my code then.
<innociv> faster than attr? Yeah.

It sounds likely that .class is faster that [attr]. I was curious and wrote a small test case.

Firefox 3.6, JIT enabled, more runs/s is better:

Create() addes 100 span childs to the body. Every second of these has the customattr-attribute set to "value". The rest has the class customclass. Using create(200,5) would create 200 spans of which each 5th has the custom attr instead of a class.

testClass tries to call $(".customclass") as often as possible within a second; obviously testAttr calls $("[customAttr]").

For some weird Firefox internal reason [attr] is slightly faster than .class. Using SRWareIron though, with the same settings, .class is faster:

testClass avg runs/sec: 31579

testAttr avg runs/sec: 29970

So what do we learn from this? Even though [attr] might be faster in some cases, do not ninja-optimize your classes to custom attributes! Classes should be the way to go for css and boolean data.

Last but not least: Paul Irish, you are wrong! :P But hat is what makes us human, so dont worry.

mfG Kambfhase

ps. Paul, you are awesome. What you do is awesome and yayQuery is So Just Cloud!

Hello world!

2010-02-09T09:43:00.000-08:00

Welcome, stranger!

I'll start this new blog with a project of mine I have been working on for quite a long time: NotSoSimpleSudoku

It basically is a Sudoku-engine written in web-based languages as HTML, CSS ans JavaScript. The little tricky part about this engine compared to other is, that it supports different sudoku variations. An 8x8 grid sudoku and 9x9 X-sudokus are already implemented.

To try it out simply load this archive or head over to googlecode and have a look in the trunk.

I hope you enjoy my blog.

mfG Kambfhase