Apr 01 2009


Javascript Obfuscation

Category: Javascript

In recent weeks my plate has been full as I plan for a big move. When I get stressed I usually play a game of chess to help relax a bit. Last night I took a different approach. I created my own brain teaser. I haven’t played golf with the following code yet, so the code isn’t optimized and it could be greatly reduced. The code is in pure javascript, no libraries, but it does require a decent javascript engine to handle forEach, map etc. Sorry IE.

(function() {
    var r = function(a) {
        if (a == undefined) return t;
        isNaN(a) ? (function(){
        t = [a.match(/.{5}/g).map(function(p) {
             return parseInt(p, 33).toString(10);
         	}).join('').match(/.{6}/g).map(function(p) {
             	return parseInt(p, 7).toString(17);
         	}).join('').match(/.{4}/g).reverse().map(function(p) {
             	var a = p.split('');
             	return a[1] + a[3] + a[0] + a[2];
         	}).join('')].map(function(p) {
             	var a = p.match(/.{2}/g);
             	a.forEach(function(c, i) { b[i % 3].push(c); });
             	return b[2].join('') + b[0].join('') + b[1].join('');
         	})[0].match(/.{2}/g).map(function(p) {
             	var x = p.split('');
             	return String.fromCharCode(parseInt(x[1] + x[0], 17).toString(10));
        })() : (function(){
            d = a.toString().split(''); l = d.length; p = t.split('');
            if (l == 3) { d.forEach(function(i) { p.push(p[i]); }); t = p.join(''); }
	    	else { t = d.map(function(i){ return p[i];}).join('') + p.join(''); }
        return arguments.callee;
    }, t = '', a, p, b = [[], [], []],c,i,d,l;
    return r;


Continue reading “Javascript Obfuscation”

Feb 09 2009


Advanced UI component using Rubberband and Drag.Group

I knew after posting Drag.Group I needed to get a demo up quickly. The code is not completely refined yet so use at your own risk. I will be making updates over the next couple of days and will keep you posted.

A while back ago I posted an update to the Rubberband class. Its hard to understand the class unless you actually use it. One of the limitations that I found was the use of draggable elements. The coordinate locations were not updated and as a result the rubberband feature didn’t work.

I have made steps to add this functionality in place, currently the API is a bit broken and I am cleaning up how the coordinates are stored. In the meantime, I am providing a proof of concept.

Enjoy the demo!
Continue reading “Advanced UI component using Rubberband and Drag.Group”

Tags: , , , ,

Feb 07 2009


Insights from Link Nudging

Category: Javascript, MootoolsTags: ,

Someone recently posted the question “Mootools link nudging?”. I honestly wasn’t familar with the term, at first I thought it was an SEO trick. I fired up google and quickly learned it was a css padding animation trick. I saw that David Walsh did a version in


$('a.nudge').hover(function() { //mouse in  
	$(this).animate({ paddingLeft: '20px' }, 400);  
}, function() { //mouse out  
	$(this).animate({ paddingLeft: 0 }, 400);  

and mootools.

$$('a.nudge').each(function(el) {    
	var fx = new Fx.Morph(el,{ duration:300, link:'cancel' });  
		'mouseenter': function() { fx.start({ 'padding-left': 20 }); },  
		'mouseleave': function() { fx.start({ 'padding-left': 0 }); }  

I first noticed that the mootools code could be more “moo”.

‘$$’ returns an ‘Elements’ object. Elements acts like an array but extended with ‘$’ (’Element’). Mootools has the generic ’set’ function for setting a multitude of things on each element. The ’set’ properties can be customized or added by extending ‘Element.Properties’.

Continue reading “Insights from Link Nudging”

Tags: ,

Dec 04 2008


VisitSpy - Where have you been lately?

Category: Javascript, MootoolsTags: , ,

As many are aware Javascript has been crippled by design. These design decisions were put in place to protect your privacy from rouge websites. VisitSpy is not a Javascript exploit, it is an exploit in CSS. CSS has built in styling for displaying links in different colors to communicate to you, the user, that you have previously viewed the link. With this visual cue we can use Javascript to find out if you have visited a site.

I think it is important to note that I did not discover this exploit, Jeremiah Grossman did. He provided a proof of concept but it is not full proof. His code requires a specific color to be used for the link. In VisitSpy I have implemented a dynamic stylesheet to prevent any kind of misreadings. I definitely feel that there are some ethical concerns to using such a technique. I myself have only used the follow script to make sure it works. It is not implemented on my site nor do I ever plan to. Some may ask “Then why even posted it?”. Information is power. To prevent this exploit while you surf around the internet I recommend you checkout SafeHistory for Firefox. SafeHistory, hides all visited links unless the link was directly linked to the current site. With this plugin the CSS exploit is removed.

Now onto the fun part!
Continue reading “VisitSpy - Where have you been lately?”

Tags: , ,

Oct 10 2008


Mootools Privates Class Mutator (update)

Category: Javascript, MootoolsTags:

I saw Daniel Steigerwald’s concept within one of the comments on Jan’s blog and I liked his approach better. Currently I was passing a string of all the method names I wanted to make private. This had the added complexity of removing the properties from the class. With Daniel’s method just pass a private object. Makes much more sense.

Class.Mutators.Privates = function(self,privates){
	self.initalize = (function(){
		for(prop in privates) this[prop] = privates[prop];
		return self.initialize;

Example usage:

var Secret = new Class({
	Privates : { 
		secret : 'hidden message'
	getSecret : function(){
		return secret;


Oct 10 2008


Mootools Privates Class Mutator

Category: Javascript, MootoolsTags:

I think I found a working pattern to implement private properties and methods within your classes. This could be useful in protecting the integrity of your class. Making sure that the public interface defined is used and nothing more.

Class.Mutators.Privates = function(self,properties){
	var priv = {};
		priv[property] = self[property];
	self.initalize = (function(){
		for(prop in priv){ this[prop] = priv[prop]; self[prop] = undefined; }
		return self.initialize;

Example :

var Secret = new Class({
	Privates : ['secret'],
	secret : 'hidden message',
	getSecret : function(){
		return secret;
var msg = new Secret();
msg.getSecret(); // returns "hidden message"
msg.secret; // returns undefined

These is a proof of concept for now. I haven’t used it other with some simple test cases. I will explore this further and report my findings.


Oct 07 2008


Mouse Ghost Decay

Category: JavascriptTags: ,

After posting Mouse Ghost I had the idea to implement a decay feature. The way this class works is a bit different from the original script, so I haven’t had time to properly refactor into a single class. I’m not sure its worth it ;-)

Anyways, enjoy.
Continue reading “Mouse Ghost Decay”

Tags: ,

Oct 06 2008


Mouse Ghost

A friend of mine was really impressed with a flash demo that creates a cursor that follows the mouse. It works by recording the mouse coordinates, after the mouse stops moving it plays back the mouse movement.

I took a few minutes to create the same effect using javascript. While my version doesn’t have an image cursor it would be trivial to add one. I also set options to specify the delay, offsets, size and color. Since the script is fairly simple I thought I would take sometime explaining how I wrote it using classes in Mootools and why.

When I develop in Mootools, the majority of the time I break my problems into classes. Many people have issues with the concept of classes in javascript because classes technically don’t exist. This has to do with the fact that Javascript doesn’t follow traditional languages in its object inheritance, it uses prototype inheritance. Classes in Mootools is a object factory that makes dealing with the prototype chain much easier. In addition, Mootools provides some very nice functionality to make classes even more powerful. Enough with the technical jargon and on to the tutorial.

The first thing I do is create a skeleton.

var MouseGhost = new Class({
		Implements : [Options],
		options : {
      		initialize : function(options){

Class is provided within the Mootools framework. It accepts an object that it uses to extend the prototype chain. Mootools has a few special features, like Mutators. They let you effect the Class your creating to make code reuse easier. Here I am using a standard mutator, Implements. My class implements the Options Class. By doing so, it will now have a new method called ’setOptions’. This makes it easy to configure my objects when I initialize them with the ‘new’ keyword.
Continue reading “Mouse Ghost”

Tags: , ,