Javascript

Javascript code samples and development strategies

Controlling Client-side Caching of Javascript and CSS in Drupal

Posted Mon, 08/09/2010 - 22:38 by jeremy.zerr

While updating CSS and Javascript files on a Drupal website, I ran into a problem.  I couldn't force users to see those new versions of the CSS and Javascript files because as we all know, Javascript and CSS files are cached in web browsers.  So that left me with a problem, since the new Javascript files were needed to allow the website to operate properly.

After looking for a solution, I found that Drupal already handles this, it has a mechanism to allow you to control the client-side cache of people visiting your website.

I know what you are thinking, there's no way you can do that.  Well, you can, you are not manipulating your user's cache, you are instead just pointing them to a new URL.  Its much easier to explain in the video:

So you see, even if your CSS or Javascript files do not change contents, you can force the users of your site to grab a new copy from the server by simply passing a dummy query argument that is different from what you currently have.

The way that you can allow this functionality to happen when developing your own custom modules or themes in Drupal is to make sure that you use drupal_add_js or drupal_add_css to add your files.  That is what allows Drupal to track your files and properly append the dummy query argument to the end.

Very tricky, but very effective, and completely eliminated all the problems I had with users complaining of problems every time I did a release and had CSS and Javascript changes.

Google AJAX Libraries API hosts your javascript libraries online

Posted Thu, 07/10/2008 - 17:17 by jeremy.zerr

One of the most important tools that we have access to as web developers are open source javascript frameworks and toolkits.  You know, tools like jQuery, prototype, dojo, scriptaculous.

I think you are a lot like me in that you always find it a real inconvenience to always go out and download the latest source, bring it into your development project, and include it in all of your files.  I ALWAYS have different projects using different versions of prototype!

You probably also hate that it takes forever to load all of these toolkits in your webpages.  They are so useful, you can't really design without them, but they increase your page load time a lot.

Well, there are others like you out there, and a good thing that some of them work at google.

Google AJAX Libraries API has approached these problems by hosting these open source javascript libraries and wrapping an interface around them to be able to load the most current version, or even a specific version in the past.  All without actually including any source code locally.  No more storing released versions of prototype in SVN.

This also has the potential to make loading the various javascript libraries take no time!  Let me explain.  The more people that start usin the API, the better chance you have that the javascript library you are using is already in the cache!  You know there are tons of others out there using those tools, why not use that to your advantage and save some page load time.

So you may be wondering if this is hard to use.  Not at all.  Simply include the Google AJAX Libraries API source file, and use google.load.  Here is an example.

  <script src="http://www.google.com/jsapi"></script>
  <script>
    // Load jQuery
    google.load("jquery", "1");
  </script>

I really think Google is on to something here and I hope it catches on!

Syndicate content