Make Prototype.js TINY – Keep Compatibility

Prototype.js is a very popular AJAX framework used when building dynamic websites. You will find Prototype in most Ruby on Rails projects as it is included by default, and for good reason; Prototype.js is a great library that includes a lot of functionality.

Unfortunately it is rather large in size, weighing in at roughly 50KB.

Although many have managed to reduce the file size of Prototype by paring down the code and gzipping the file, we’re going to use an additional tool to approach the problem, one from the Mozilla foundation that appears to work very well – Rhino.

(Oh, in the interest of full disclosure, I am a Java fanboy, having studied at a university that got a lot of Sun funding back in the day. I hope you can see past that and check out this Javascipt hack, I really do.)

An informative quote from the Mozilla page for the Rhino project goes like this:

“Rhino is an open-source implementation of JavaScript written entirely in Java. It is typically embedded into Java applications to provide scripting to end users.”

Alright then, so what you have is a Java bytecode version of Javascript that will work in most browsers.

Sounds interesting, let’s see what we can do with Protoype.js!

I decided early on to use a Rhino tool that I found on the Dojo site that allows me to compile Javascript and make it Rhino compatible. The page give you a brief walkthrough and some examples on how to use the tool, so I won’t need to cover that here in detail.

So we compile our Prototype Javascript file, let’s see what our results are then, shall we?

Before: 47445

After Rhino: 32716

After Rhino and gzip: 9454

So it’s at about 9KB now!

In order to utilize the new file, upload it to the directory that houses your original Prototype javascript file, then any instances of prototype.js in your code to prototype.jgz (zipped javascript).

You’ll also want to change your .htaccess file so that you handle the new script properly by typing pico (or nano or vi or what-have you) .htaccess:

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} ".*Safari.*" [OR]
RewriteCond %{HTTP:Accept-Encoding} !gzip
RewriteRule (.*)\.jgz$ $1\.js [L]

AddType "text/javascript;charset=UTF-8" .jgz
AddEncoding gzip .jgz

You'll notice here that we're doing user agent detection for Safari. When I did my testing it seemed to be spotty, so what we're doing is falling back to javascript if we see that the user is using Safari. We're still compatible, and the code works everywhere else.

Dreamhost Stats Rewriting and Typo with .htaccess

If you run Ruby on Rails apps, or a Typo installation on Dreamhost, you may have noticed that you cannot access your stats page. Here’s the code that will get it running, quick and dirty, and have you poring over stats for HOURS!

You’ll want to login to your server using SSH, then edit the .htaccess file in your public folder, from within your home directory. Here’s how I did it as an example:

# pico /

Cut and paste the following code:

# This is the stats rewrite rule for use with Dreamhost

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/stats/(.*)$ [OR]
RewriteCond %{REQUEST_URI} ^/failed_auth.html$
RewriteRule ^.*$ - [L]

(select the code, use CTRL+C on windows, or APPLE+C on a Mac, then to paste use SHIFT+INSERT on most SSH clients, or simply right-click and select paste from the menu)

You can put this anywhere in the .htacess file and it should work, as long as it is after the

RewriteEngine On

rule that already exists.