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


Oct 06 2008

5

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){
			this.setOptions(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: , ,


Oct 03 2008

0

Under the Hood

Category: WordpressTags:

I have always had a curiosity for how things work. As such, I figured I would devote a little bit of time explaining what makes this site run. As my understanding of the Web has matured I have adopted the philosophy that “The web is organic in nature. A website is like a garden. Like plants, information needs to be planted, nurtured and sometimes weeded.” So it is important to remember that this is not an end point but a starting point.

In my efforts to get my site up and running I first took a step back and identified what I wanted to accomplish and what were my resources. It be clear that the most valuable resource was time, I don’t have much of it. I made the decision to pick a platform that was quick and easy to get up, but at the same time give me some wiggle room to be creative. It is probably obvious to some, but for those unaware this site is built using Wordpress. I have used a variety of frameworks and website solutions, some of them great, but none are as easy to install or have as many add-ons as Wordpress.
Continue reading “Under the Hood”

Tags:


Oct 01 2008

1

Rubberband Select

Category: UtilitiesTags: , ,

A while back, Chris Esler wrote a terrific script for custom selection of elements within the DOM called Rubberband. I have found the use of Rubberband extremely handy when dealing with complex UI management. While Rubberband functioned exactly as described I found a few minor issues that I needed resolved before implementing.

The major annoyance I had with Rubberband was the actual selecting part. When selecting, the browser also selects and highlights the DOM in the background. I found this to be annoying and distracting, both hurt usability.

The second issue I found had to do with recycling the object. In my case, I was adding and removing elements to my selectable area. This required me to use the rebuild function. I found a slight bug that prevented this from working.

Both of these issues are no more!

Click to download Rubberband (enhanced)

Tags: , ,