Automatically Version your Javascript & Stylesheets

arkin — Mon, 04 Aug 2008 17:34:06 +0000

Recently, I was browsing the internet, as you do, and I came across a great little article that discussed the automatic versioning of stylesheets, javascript, flash and image files.

As i constantly have to hold shift when refreshing to get a full page refresh, I decided this method was genius and decided there were a few things needed to make it perfect.

First of all, I couldn’t get the cache code which goes in .htaccess to work, after closer inspection you must make sure mod_expires is enabled on your server (if you run your own), otherwise you will see a 500 error.

Secondly, the autoVer ended up breaking my javascript and stylesheet files as I name them with multiple periods and it was subsequently replacing them all with numbers so i ended up with filenames like framework.1230203232.version.21302302.two.js which is a bit over the top.

Anyway, this is my revised version, for those of you who haven’t read Particletree, you don’t necessarily need to, I will cover all the required parts.

First of all, we modify .htaccess so that it sets an expiry date on all stylesheets, images and javascript files.

.htaccess


    ExpiresActive On
    ExpiresDefault "access plus 10 years"

#Rules for the versioned files
RewriteRule ^(scripts|css|images)/(.+)\.([a-zA-Z0-9]+)\.(js|css|jpg|gif|png)$ $1/$2.$4 [L]

This will make all images, stylesheets, flash and javascript cache for 10 years (reduces load on your server and bandwidth costs) and also adds the RewriteRule which handles the version file pointing to the normal files.

Next, we want to add the function, ideally you want this defined on every page, so stick it somewhere good.

the Auto Version function

function autoVer($f){
    if (!file_exists($_SERVER['DOCUMENT_ROOT'].$f)) return $f
    return substr($f,0,strrpos($f,'.')+1).base_convert(filemtime($_SERVER['DOCUMENT_ROOT'].$f),10,36).substr($f,strrpos($f,'.'));
}

In the case that php cannot find the file, it still might exist, so the function just returns the parameters it was given.

Next, we rewrite the HEAD part of your html, this file must be PHP for it to work, and the function must be included (either at the top of the page or within another file).

My HEAD area

&lt;head&gt;
&lt;title&gt;arkinEx.com - Autoversion Your Javascript &amp; CSS Stylesheets&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
&lt;meta name="author" content="arkinEx" /&gt;
&lt;link rel="stylesheet" type="text/css" href="<?=autoVer('/resources/stylesheets/design.css')?>" /&gt;
&lt;script type="text/javascript" src="<?=autoVer('/resources/javascript/mootools-core.js')?>"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="<?=autoVer('/resources/javascript/mootools-more.js')?>"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="<?=autoVer('/resources/javascript/mootools-pastejax.js')?>"&gt;&lt;/script&gt;
&lt;/head&gt;

Which, then, will produce a nice output something like this:






You get the idea, so try it out, let me know how you found it.
The Original Article: “Automatically Version Your CSS and Javascript Files“.

jQuery Javascript Framework

arkin — Wed, 28 Nov 2007 22:08:53 +0000

Recently I tried to take my knowledge of Javascript to a new level, because, on the whole, it was pretty dire.

Whilst looking into new techniques and reading tutorials I came across some useful Javascript frameworks, specifically, jQuery, which caught my attention immediately.

Why did i pick jQuery?

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

There are a few reasons why jQuery caught my eye:

Easy to understand and pick up/learn.
Minimalistic in size and functions.
Great documentation (and examples).
Plugins archive to die for.

Easy to understand and pick up/learn.

When comparing jQuery to the other frameworks (such as prototype/scriptaculous/ext). I found jQuery very easy to understand, it has great documentation on every function and the function names relate to what they are actually doing.

An Example:

$("p.surprise").addClass("ohmy").show("slow");

This would change the paragraph html element with class=suprise to class=”surpise ohmy”.

If there were any height, width, opacity differences, it would alter them slowly.

Not only are the functions incredibly easy to understand and learn, but they implement well together.

Minimalistic in size and functions.

When you download jQuery (1.2.1), you have 3 download options:

jQuery for production use @ 14Kb (Minified and gzipped)
jQuery for development and testing @ 77Kb (Uncompressed)
jQuery for non-gzip users @ 26Kb (Packed)

For the first option, it would take a standard user less than a second to load the jQuery library when visiting your site, even if they were 56K it would only take around 2.8 seconds, which is not bad considering it takes alot longer to load the average image.

Great documentation (and examples)

When i first starting learning and trying to understand jQuery, the functions and methods of using them were not sticking in my head, so I frequently had the jQuery API Documentation open which has great tutorials, examples and demonstrations to help you understand where you are going wrong and how certain features are supposed to operate.

Plugins archive to die for

At my last count, the jQuery Plugins directory had just over 500 plugins in 20 categories. Not only that, but each one of the plugins comes unpacked meaning you can edit the code to suit your needs.

This was the best feature i probably found because i could see how other users had implemented jQuery to their own requirements and i could also take a look at their code to understand the jQuery framework further.