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: Hacking, Javascript, 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: design pattern, Javascript, Mootools, registry
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: Mootools
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 undefinedThese 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: Mootools
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: Javascript, Mootools, Mutator
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: Javascript, Mootools
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: flash replacement, Javascript, Mootools
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!
Tags: Javascript, Mootools, rubberband
All too often from clients and friends I get requests to add something 'flashy' to their site. I have found myself in the position way too many times arguing against flash, when in fact my audience doesn't care. I have resorted to the answer "Sure" just to please them. More often then not I just create the effect using javascript. The result being that they don't even know it isn't even flash.
This will be the first of many in a series of what I'll refer to as "I can't believe its not flash!" 
Recently, I had a request to create a text animation when you rollover a particular piece of text. This effect would add each letter in one by one with a specified delay. I created a class called 'SlidingText' with Mootools.
First the CSS:
#slidingText {
padding: 0 0 0 0;
margin: 15px;
font: 14px Arial;
list-style-type: none;
cursor: pointer;
width: 200px;
}
#slidingText li {
text-transform: uppercase;
margin: 5px 10px;
padding: 0 0 0 0;
}The main thing to note about the css is the elements we are going to animate ( 'li's ) have a defined width. By doing this we remove any bouncing or any other weird effects when we manipulate the DOM.
The HTML:
<ul id="slidingText">
<li>javascript</li>
<li>mootools</li>
<li>text effects</li>
<li>sliding text</li>
<li>this is not flash</li>
</ul>
Make sure you have included mootools, and SlidingText.js (download link below).
window.addEvent('domready'), function(){
$('slidingText').getElements('li').each(function(el){
new SlidingText(el);
});
});
- javascript
- mootools
- text effects
- sliding text
- this is not flash
[inline]
[/inline]
Tags: flash replacement, Javascript, Mootools, text effect
Transitions provides image transition effects that until now have been limited to flash. Transitions uses css in a creative way to perform the effects. By creating a grid and offsetting the background images in each cell a multitude of effects can be achieved. This script pushes the limits of what a browser can do, and in doing so, it is not an ideal fit in all situations. Use with caution.
Currently, Transitions provides 4 different types of image transitions.
- Disolve: Parts of the image randomly disappear.
- Sweep: The picture is removed from a defined point in the picture, the effect spreads out in all directions from that point
- Blinds: The picture is removed like a blind closing from a direction (left,right,top,bottom)
- Gobble: Removes a row at a time moving left to right, and right to left zigzagging until the image is removed
Each effect has multiple options, including random. The class itself also provides the ability to randomize the effect.
I highly encourage you to play with the ‘animation option’ on the top of this blog to get a better idea of what each effect does. I strongly suggest that you do not turn on the fade option unless you have a very modern computer. The save button will save your settings in a cookie, and restore the effects to your liking the next time you visit this blog.
Requires: Mootools Core, Assets
I will have a follow up post shortly that will provide documentation and examples.
Upcoming Features:
- Standard Fade ( for completeness )
- Randomize image rotation option
- Add Events for better control and features
- More Transitions!
Update:
View Demo
Tags: flash replacement, Javascript, Mootools