Having recently seen UglifyJS and having used some of the more obvious tricks (!0 === true, !1 === false, etc) myself, I wondered if there was a way you could shrink down what’s transferred even more…

As a proof of concept I’ve knocked up a (hopefully fairly) simple perl script that will wrap your code in a closure and replace a lot of the internal indexes that are used with global symbols, which when compressed with YUI/Uglify should reduce filesize overall.

I’ve already been using this method in bookmarklets, and I’m sure many others have too, but I couldn’t find an existing tool to do this (and I thought it would be interesting trying to break JavaScript files down for parsing…).

In case you don’t know, the dot notation in JS is just a shorthand for using square brackets:

    var obj = { 'test': true, 'value': 'Hello World!' };
    obj.test; // true
    obj['test']; // true

which means you can also do:

    var k = 'test';
    obj[k]; // true

In simple bookmarklets I often have a few calls to getElementsByTagName or querySelectorAll which I reference in the main closure as strings in variables like getElementsByTagName__ or querySelectorAll__, so I wanted to see if it was possible to automate this process, and if so how hard it would be.

Well, it was pretty frustrating and I’m sure it hasn’t worked out as anywhere near the simplest solution (I am almost certain the regular expressions could be simplified!) but I thought I’d share in case anyone else thinks the same and could perhaps improve upon this or point me to an existing solution.

Here are some size comparisons using jQuery 1.8.3 as an example.

Standard Library:

raw: 331,286 bytes
min (jquery.min): 93,636 bytes
yui: 105,103 bytes
uglify: 92,604 bytes

Parsed:

raw: 369,687 bytes
yui: 95,093 bytes
uglify: 82,682 bytes

Now there are some drawbacks with my implementation here, it won’t remove or add to an existing closure, so you might have redundant code at the tope of your file, but as this is just a proof of concept I haven’t really parsed the JS so I didn’t want to potentially trash anything… Also if you rely on being in the global scope (Prototype for example) this will likely break your script. Other than that I haven’t encountered anything that’s been broken in this jQuery example by the process, but that certainly doesn’t mean nothing’s broken! I’ve also assumed DOM-centric script, using this as a short reference to the window as the default in minify.pl, but in Symbolise.pm it’s disabled by default.

Are there any other tricks that could get even more bytes squeezed?

Does gzip totally negate this work? (Probably does, but this was interesting nonetheless!)

If you’d like to play with this yourself, you can access the perl script here or there’s a github repository.

To use it, put it in a folder and run:

    perl minify.pl filename.js > filename-parsed.js

Edit: After posting on reddit, I received a couple of comments about how gzip affects the on-disk numbers:

    $cat jquery-uglify.js | gzip | wc -c
    33341 # 32.49KiB
 
    $cat jquery-parsed-uglify.js | gzip | wc -c
    34731 # 33.85KiB

So gzip does totally negate these changes! Which makes sense I suppose from the fact that there’s extra overhead that can’t be compressed away (the closure and all the arguments/parameters).

I showed my 5-year-old nephew the construction cheat in Sonic the Hedgehog the other weekend and he thoroughly enjoyed printing rocks everywhere on the screen, so I wondered if it would be possible to do something similar in JavaScript, since people love using the Konami code for easter eggs, why not Sonic?

I opted for native javascript, not using any libraries for easy portability.

I’ve encountered a few issues on some sites that already capture keypresses, but for the most part it’s worked ok. I’ve only tested this on Chrome and Firefox (Mac, latest versions) but it should work fine on Windows. No idea about IE… Probably not, but I did try to use cross-browser methods where applicable!

The commented source is here and the script is enabled on the blog so you should be able to use it anywhere.

Have fun!

Oh, here are some sprites for good measure:

There’s no demo I’m afraid, however the bookmarklet should work on just about any WebDAV server (at least, it worked on mine…), but you won’t have pretty code highlighting .

I’ve set up a github repository but you can use the bookmarklet directly.

Note: This will almost certainly not work in IE and I’ve only tested Firefox and Chrome (latest versions).

EDIT: minor update and moved to GitHub pages instead of using raw which caused problems with the CSS on Firefox.

Why does parseInt(1/0, 18) == NaN, but parseInt(1/0, 19) == 18 and parseInt(1/0, 25) == 185011843?

Javascript apparently has the division by zero problem solved, due to (x > 0)/0 being equal to Infinity, an object (constant?) in JS in the same vein as NaN. It interacts with NaN as well, in that Infinity - Infinity or Infinity / Infinity == NaN, but Infinity + Infinity or Infinity * Infinity == Infinity. Also there’s -Infinity, just for fun.

When parseInt()ing the value infinity, internally it must run .toString() to get the value which returns "Infinity". Base 19 has the numbers 0-9 and then goes on to the letters a-i (there’s a table in the stackoverflow article) of which the first letter of "Infinity" matches, returning 18, when you up the base to 25, all the letters up to n are parsed turning the ‘number’ "Infinity" into 185011843. Interestingly that also means that parseInt(Infinity/Infinity, 25) == 14648!

It enables you to have complex, chained if required, keyboard events bound in a very simple, powerful way with no reliance on an underlying library.

Example usage:

Mousetrap.bind('d', function() {
    Post.next();
});
 
Mousetrap.bind('a', function() {
    Post.previous();
});
 
Mousetrap.bind('x', function() {
    Post.delete_selected();
});
 
Mousetrap.bind(['command+a', 'ctrl+a'], function() {
    Post.selectAll();
});

Find out more, test and download it here, or access the git repository here.

This script extends the return from window.setTimeout and window.setInterval to be an object itself that you can stop() and restart(), preserving the function for further use.

var t = window.setTimeout(function(timeout) {
    // timeout argument is the timeout object itself
    console.log('test');
}, 300);
// test
t.restart();
// test
 
var s = window.setInterval(function(interval) {
    // interval argument is the interval object itself
    Messages.check();
}, 1000);
// Interval
s.stop();
// Interval
s.complete;
// 9
s.cancelled;
// 1

Please note: I’ve only really tested this in Chrome! I can’t see why it wouldn’t work in other browsers, I guess maybe some of these would be protected, but I’m not sure… If that’s the case, it wouldn’t be too difficult to utilise the alternative new Timeout(function(){ }, 400); syntax…

There’s a bit more (not much!) of an explanation here and the code is available here. There are no prerequisites for this code, should run on plain old Javascript.

Edit: Minor update to the script to include the object in the callback.

Since my example was on a fairly empty page, I thought I’d link to a couple of sites that are using it in the real world:

• Lunaii-dollmaker.com – a great header, excellent style
• Attackemart.in – a great idea utilising horizontal and vertical movement
• lsd.in.ua – a good example on the homepage

If you’re using the script and think your sites is a good example of utilising the parallax effect, please leave me a message!

I am going to try and work on a full set (that can be incrementally loaded), but this has been sufficient for my needs so far.

Use it here!

Edit: I’ve updated the Tool to allow for various functions, input via literals (\x0d or \u02f4), returning to multibyte in the text area and other fixes. The same link will work.

This link was incredibly helpful with my investigation and testing!

This bookmarklet will reload all the associated stylesheets in the current document. It looks for all <link/> elements with rel="stylesheet", removes from the DOM and re-adds them appending a ?_=1234567890 (or &_ depending on the URL, where the numbers represent the JS timestamp) into the <head/>.

Hopefully this will help someone suffering similar pain to myself!

Reload CSS (Add the link to the left to your bookmarks to use!)

Please note: I haven’t tested this in IE, but surely it’ll work… Right?

Full commented code:

(function(document, getElementsByTagName, toString, match, href, length, i) {
    var head = document[getElementsByTagName]('head')[0],
        links = document[getElementsByTagName]('link'),
        store = [];
 
    // iterate over all the existing s
    for (; i < links[length]; i++) {
        // if it's a stylesheet
        if (links[i][href][toString]()[match](/\.css/)) {
            // clone the element, false is needed as Firefox requires the deep flag
            store.push(links[i].cloneNode(!1));
 
            // then remove it from the DOM
            links[i].parentNode.removeChild(links[i]);
 
            // decrement i, because links is a NodeList (not an array) and when the element is
            // removed from the DOM, it is also removed from the NodeList
            i--;
        }
    }
 
    // iterate over the stored items
    while (store[length]) {
        // strip out any previous cachebusting querystring
        store[0][href] = store[0][href][toString]().replace(/([&\?])_=\d+/, '');
        store[0][href] = store[0][href] + (store[0][href][toString]()[match](/\?/) ? '&' : '?') + '_=' + Date.now()[toString]();
 
        // put the element in the 
        head.appendChild(store.shift());
    }
})(document, 'getElementsByTagName', 'toString', 'match', 'href', 'length', 0);

Event.live = function(s, e, f) {
    Event.observe(document, e, function(event) {
        if (Element.match(event.target, s)) {
            if (!(f.call(event.target, event))) {
                event.stop();
            }
        }
    });
}

To use this run something like the following:

Event.live('div#doesnt_exist_yet a.button', 'click', function() {
    // run this when the button is clicked
});

Hope this helps!