Facebook has featured in social media blogs recently for adding a Konami code Easter egg in their home page. In this blog post I show you how to add similar “functionality” to your site using Javascript.

First, the full code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// check to make sure that the browser can handle window.addEventListener
if (window.addEventListener) {
    // create the keys and konami variables
    var keys = [],
        konami = "38,38,40,40,37,39,37,39,66,65";
 
    // bind the keydown event to the Konami function
    window.addEventListener("keydown", function(e){
        // push the keycode to the 'keys' array
        keys.push(e.keyCode);
 
        // and check to see if the user has entered the Konami code
        if (keys.toString().indexOf(konami) >= 0) {
            // do something such as:
            // alert('Konami');
 
            // and finally clean up the keys array
            keys = [];
        };
    }, true);
};

The script adds a callback function to the keydown event which stores the keycode in the keys array. It then checks the array against the pre-defined konami array (which contains a keycoded version of the Konami code).

Found the Konami code (or any other easter eggs) on the web? Let me know in the comments.

There is a major problem with the approach of many internet based companies. Don’t get me wrong, I’m as much a fan of them as anybody, but if they want to survive they need to get smart. And fast.

Very simply, the majority of internet based companies are not self-sufficient. Without massive injections of cash from their investors/founders they would not survive their first year in business. This is due to their inability to raise any revenue from their user base.

Continue reading »

[Update] I’ve recently changed my JavaScript framework to MooTools, hence the rf.Highlight demo isn’t working properly. The plugin itself hasn’t actually changed so should still work perfectly fine on your own site.

I needed a simple implementation of the famous Yellow Fade Technique (YFT) for a new product that we are developing at Redflex. We struggled to find a YFT jQuery plugin that was simple to use, had a small file size and supported chaining. I give you rf.Highlight.

To highlight an element simply call:

$('#element').highlight();

And, of course, it is also customisable (default values are shown):

$('#element').highlight({
    color: [255, 255, 187],  // rgb color of the fade (yep, it doesn't have to be yellow!)
    duration: 400,  // duration of the fade in milliseconds
    quality: 20,  // quality of the fade (the higher the number the better)
    wait: 3000  // initial pause before the element starts to fade
});

Continue reading »