Dec 13 2008

3

Random words from RSS feeds

Category: PHPTags: ,

Recently my friend Dan has been playing with some design ideas for his new site. He had a list of words that could be dragged like refrigerator magnets. He wasn’t happy with the fact that the words were static and to update them was kinda a pain.

Together we came up with the idea to pull in his RSS feed from his blog and use the words from his descriptions. With his design, we wanted 48 words. We didn’t want any punctuation, numbers or html entities floating around either.

So I wrote the following script for him.

Continue reading “Random words from RSS feeds”

Tags: ,


Dec 04 2008

2

Image Transitions Demo

When I first launched my blog I released the Transitions class at the same time. The header of my blog at that time was my demo. I have since changed the look of my blog and as a result the demo was removed. I have had a number of requests to get it back online so here you go.

Transitions Demo

Overall I am quite happy with how these effects turned out. I think they provide for some nice alternatives over the standard image transition effects that are commonly used today.

I hope you enjoy.

Tags: , ,


Dec 04 2008

3

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: , ,


Dec 04 2008

5

Registry Class for Mootools

I have been building some pretty large apps lately and I found the need for the registry design pattern in some of my javascript. I went with this approach because I wanted to minimize the power my objects had, yet I needed some kind of blackboard where all objects could check and report to.

In addition I found that implementing events onto the class made for a very effective event handler as well.

var Registry = new Class({
 
	Implements : [Events],
 
	conf : {},
 
	set : function(path,value){
		var fragments = path.split('/');
 
		if( fragments.shift() !== '') return false; // remove empty, first component
		if(fragments.length > 0 && fragments[fragments.length - 1] == '') fragments.pop();
 
		var obj = {}; var ref = obj; var len = fragments.length;
		if( len > 0){
			for(i = 0; i < len-1; i++){
				ref[fragments[i]] = {};
				ref = ref[fragments[i]];
			}					
			ref[fragments[len-1]] = value;
			this.conf = $merge(this.conf,obj);
		} else {
			this.conf = value;
		}
	},
 
	get : function(path){
		var fragments = path.split('/');
 
		if( fragments.shift() !== '') return null;
		if(fragments.length > 0 && fragments[fragments.length -1] == '') fragments.pop();
 
		var ref = this.conf; var path_exists = true; var i = 0; var len = fragments.length;
		while(path_exists && i < len){
			path_exists = path_exists && (ref[fragments[i]] !== undefined);
			ref = ref[fragments[i]]; i++;
		}
 
		return ref;
	}
 
});

The class is pretty simple but it provides for a powerful hierarchical syntax. Only two methods are supplied ‘get’ and ’set’.

Example:

var reg = new Registry();
 
reg.set('/Options/Default',{'name' : 'test', 'version' : 1});
 
reg.set('/Options/Default/name', 'changed');
 
reg.set('/dynamically/creates/nested/objects', true);
 
reg.get('/Options/Default');
/* returns
{
 name : 'changed',
 version : 1
}
*/
 
reg.get('/Options/Default/version'); // returns 1
 
reg.get('/');
/* returns
{
 Options : {
	Default : {
		name : 'changed',
		version : 1
	}
 },
 
 dynamically : {
	creates : {
		nested : {
			objects : true
		}
	}
 }
}
*/

I found it extremely useful for configuration objects for classes that were initialized in a tree fashion. It also seemed to help with the readability and organization of code. I also had several places where I had multiple objects doing completely different things to the same Request.JSON result. With this class I just stored it in a single place and fired off my event. I found it extremely useful to use the class as a global event manager for cases such as this. I ended up using a dot notation naming convention for my events which helped greatly in documentation and API design.

reg.addEvent('App.initialize',function(){});
 
reg.addEvent('App.shutdown',function(){});
 
reg.addEvent('Data.feed1.loaded',function(){});
 
reg.fireEvent('App.shutdown');

In my actual production code I had my Registry class implement my Singleton Class Mutator. This way I could initialize the registry object multiple times in my code without the need to worry about scope.

Tags: , , ,


Oct 14 2008

2

New Layout

Category: General

I managed to find a little time this week and dive into Wordpress a bit more. I thought my initial layout was ok, but it felt crowded. My goal with the redesign was to make reading posts easier. I added a little bit of javascript to insert a show/hide button on the top of each post. Overall I am pretty happy with the look and feel. The sidebar isn’t completely resolved, I’ll probably spend a bit of time on that tonight.

With the change I did take my “Transitions” demo offline. Once I get the layout stabilized I will get a working demo back up.

For those of you wondering what is going on with MooCrop. I am in the middle of a complete rewrite. I will keep you posted on the progress.


Oct 10 2008

4

Private Methods with Mootools update(2)

Category: Mutator

UPDATED

I updated my Privates Mutator yet again. Now, if you pass a function into the ‘Privates’ object a bind is created to the class.

Class.Mutators.Privates = function(self,privates){
	self.initalize = (function(){
		for(prop in privates)  this[prop] = ($type(privates[prop]) == 'function') ? privates[prop].bind(self) : privates[prop];
		return self.initialize;
	})();
}

I made a false assumption on how Mutators work within Mootools based on the following code snippet:

            for (var mutator in Class.Mutators){
                if (!this[mutator]) continue;
                Class.Mutators[mutator](this, this[mutator]);
                delete this[mutator];
            }

I was expecting ‘delete this[mutator]‘ to destroy the ‘Privates’ object, it doesn’t!

The ‘delete’ Operator - from “Javascript: The Definitive Guide”

“delete” attempts to delete the object property, array element, or variable specified as its operand. It returns true if the deletion was successful, and false if the operand could not be deleted. If delete is invoked on a nonexistent property, it returns true. Surprisingly, the ECMAScript standard specifies that delete also evaluates to true if the operand is not a property, array element, or variable.

I assume what is happening is ‘this[mutator]‘ is an object property so it should be deleted. It doesn’t get deleted because it is a reference to an object. So the object must be destroyed. The only way to destroy an object in Javascript is to destroy all references to that object.

The following works:

Class.Mutators.Privates = function(self,privates){
    self.initalize = (function(){
        for(prop in privates)
             this[prop] = ($type(privates[prop]) == 'function') ? privates[prop].bind(self) : privates[prop];
        return self.initialize;
    })();
    delete self["Privates"];
    for(prop in privates) delete self["Privates"][prop];
}

Some interesting things to note. Removing ‘delete self["Privates"]‘ fails to work even when this line is called just moments later in the Class Mutators code ( delete this[mutator] ). It must be called before the properties of the ‘Privates’ are deleted.

If I change the last 2 lines to the follow:

	delete self["Privates"];
	privates = null;
	for(prop in privates) delete self["Privates"][prop];

It doesn’t work. Nor does.

        delete this['privates'];
	for(prop in privates) delete privates[prop];

If you have any addition insight into the delete operator or how to elegantly remove object references, please share.

Example:

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


Oct 10 2008

0

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;
	}
});

Tags:


Oct 10 2008

0

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 = {};
	$splat(properties).each(function(property){
		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.

Tags:


Oct 10 2008

4

Mootools Singleton Class Mutator

Category: MutatorTags: , ,

I got really excited about Class Mutators within Mootools after reading Jan Kassens blog. If you have ever used Mootools, you have probably seen the standard Mutators. Extends and Implements. These allow you to augment your Classes to help create an inheritance model within Mootools. What I failed to realize is that Mutators goes well beyond that. They have the ability to ‘morph’ your Classes to make your code easier to read and maintain.

I went ahead and implemented the Singleton pattern into Mootools classes.

Class.Mutators.Singleton = function(self,flag){
	if(!flag) return;
	self.constructor.__instance = undefined;
	if($defined(self.initialize) && $type(self.initialize) == 'function') var init = self.initialize;
	self.initialize = function(){
		if(!$defined(this.constructor.__instance)){
			if($defined(init) && $type(init) == 'function') init.apply(this,arguments);
			this.constructor.__instance = this;
		}
		return this.constructor.__instance;
	}
}

Use:

   var Counter = new Class({
         Singleton : true,
 
        initialize : function(){
              this.count = 0;
        },
 
        hit : function(){
             return ++this.count;
       }
  });
 
var a = new Counter();
a.hit(); // returns 1
a.hit(); // return 2
var b = new Counter();
b.hit(); // return 3 !!!

Honestly, this is more for the OO purist out there. I would have to agree with Valerio that the best way to implement a singleton in javascript is to use a basic object. However, I do think that this could be useful in rare occasions.

Tags: , ,


Oct 07 2008

1

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: ,


« Previous PageNext Page »