Cascading Style Sheet and JavaScript Versioning

The problem

Let’s say you have a page with some complicated layout:

You go into the HTML and CSS files and make a slight change and when you reload the page you get this:

Why did this happen? Well, if we look at the network tab of the Developer Tools in Chrome:

You will see the following row:

The problem is happening because of what’s displayed in the sixth column that says “(from cache)”. The browser is using it’s cached version of the CSS file which causes the layout to go all haywire (new version of HTML + old version of CSS). It’s easy enough to fix by forcing a refresh of the page which causes all the files to download again and fixes the problem. But what if you’re users don’t know this fix? Then it just looks like your sites is broken and who wants to pay for a broken site. Even worse, what if the JS doesn’t match up causes a validation to fail and data is lost?

A Good Solution

A very, very fast solution to this problem is to just create a version number for the files and append it to the file name in the HTML:

style.css?version=1.1.3

When you update the version number in the HTML file the browser will see it as a new version of the file and download it instead of using the cached version. The only downside to this is that you need to remember to update the version number or write a script to update it before you deploy the site (I would recommend the script).

This works extremely well if you’re serving a static site because it can be done once and will be extremely fast.

A Better Solution

If you need a quick fix to this problem and have static files that change regularly you can append the modified time of the file to the file name in PHP this would be done using the following:

echo 'print.css?', filemtime('/path/to/print.css');

This would result in the following output:

print.css?1340220984

Then when you update the file the “version” is automatically updated for you:

print.css?1340223233

The Best Solution

According to High Performance Web Sites: Essential Knowledge for Front-End Engineers (and I agree with it) the best solution to hosting JS and CSS files is to have few external JS files for each page and few external CSS files for each page. This will drastically reduce the number of requests each pages makes and improved the front end performance of your website (as well as reduce the load on your servers on the backend).

The solution I have come up with is to create a class that takes a series of JS and CSS files and concatenates them all together and performs the following actions to minify the page so there aren’t any wasted bytes:

1. Remove comments
2. Convert return characters to spaces
3. Convert multiple whitespace characters to a single space character

The result of this process will get a unique name based on the oldest modification time of the input files which will then get linked to in the HTML.

A slightly better solution is instead of having a single JS and CSS file for each page you create a single JS/CSS file for the generic elements of the site and then have individual JS/CSS files for each module/section so you don’t cause the user’s browser to download a lot of data it doesn’t need.

When implementing this it’s important to have a way to keep the files from being regenerated every time the pages are generated. I would recommend placing all the files in a common directory and importing them all at once. Then once the output has been created place a flag file in the same directory that contains the new filename and when you deploy the site delete these files so a rebuild happens.

Getting the Current Version of Zend Framework

I've been using the Zend Framework at work for the past two months and I've been playing with it during my free time to work through some of the things I've had problems with at work or didn't understand completely.

I started using it on my OSX laptop with XAMPP and got errors in odd places. I worked out that the version that was in XAMPP was very behind (I haven't updated it in a while so that might be my fault). In order to find this I had to look into how you determine what version of Zend is was using. It turns out that Zend_Version::VERSION contains the current version. I'm going to add this to all of my projects to make it easier to troubleshoot issues.

Telling if an Element is Hidden Using jQuery

I had a problem a couple days where I needed to tell if an item was visible on the page and I thought I was going to have to do some crazy checks to see if it was a series of options and it turns out you only have to do the following:

$('#item').is(':visible')

That's it. You throw that into an if and you're done.

Scaling PHP Book

After reading How 30 Days Without Social Media Changed My Life it provided a link to a book the author is working on titled Scaling PHP. I was so impressed by the premise of the book I purchased the alpha version of the book and it's cool because the author provided a read-only GitHub repository so we can see the book as it develops.

If you're interested in making high performance PHP sites I would recommend signing up for the email list so you know when it will come out.

How UserVoice uses Trello & Google Docs to make UserVoice better every day

I don't remember how I ran across this but the UserVoice blog has an interesting article on how they use Trello to do their product development:

http://www.uservoice.com/blog/index.php/founders/trello-google-docs-product-management/