View Issue

Home » Newsletters » View Issue

The SitePoint TECH TIMES #264 Copyright (c) 2009
November 3rd, 2009 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tips, Tricks, News and Reviews for Web Coders
by Kevin Yank (techtimes@sitepoint.com)

Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=264

Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved.

INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -

It's impossible to remember how many times I've said this on the
phone to a client: "Can't see it? Try refreshing the page. Hit
Ctrl+Shift+R. Still no change?"

Cache control problems can be frustrating and confusing. If the
above conversation sounds familiar, you need a cache control
strategy for whenever you update your client's web site.

In this issue, Zach Johnson takes a fresh look at this caching
conundrum and explains a cache control technique that's easy to
implement. It could just be the answer you're looking for!

SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -

Do your web forms suck?

Create mindblowingly beautiful web forms
easily with our latest release, Fancy Form Design.

Grab your free sample now

http://www.sitepoint.com/books/forms1/

IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -

- Introduction
- Overcome your Caching Conundrums
- New Technical Articles
- Techy Forum Threads
- More Techy Blog Entries

OVERCOME YOUR CACHING CONUNDRUMS - - - - - - - - - - - - - - - -

by Zach Johnson

Caching is a balancing act. On the one hand, you aim to minimize
load times and bandwidth use by ensuring that images, scripts,
and style sheets are cached by your visitors; however, you still
want to ensure that they're accessing the most recent versions of
all your files.

In this article, I'll show you a few methods for controlling how
your site's files are cached by browsers so you can achieve the
best of both worlds: maintaining optimal performance while
ensuring that any updates are seen immediately, without a hitch
by all of your users.

THE SOURCE OF THE PROBLEM

Let's say you're including a style sheet in your page, with a
link tag such as this:

Browsers will fetch the file /css/styles.css once and then cache
that file. This is usually an ideal behavior. Your site will load
faster for visitors who have cached your style sheet, so your
server will handle fewer requests and consume less bandwidth.

By default, cached files expire relatively quickly. This means
that while you or your team might experience a problem with a
cached style sheet immediately upon making a change, infrequent
site visitors (say once every few days) will probably be
oblivious to any issues with cached content. However, it also
means that visitors will often be downloading files
unnecessarily, leading to longer load times and wasted
bandwidth.

In the interest of improving performance (and perhaps prompted
by YSlow [1], a great tool for benchmarking your site's
performance), you'll want to tell browsers to cache files from
your site for much longer periods of time. You can find out more
about how to do this in this article by Wayne Shea [2], where he
advocates configuring your server to attach "Expires" headers to
your content, telling browsers to keep those files in cache for
weeks or months.

But having done this, your site's visitors may experience
problems when you make changes to images, style sheets, or
scripts. You might think this would be fairly
harmless -- simply presenting an out-of-date version of the
site to some visitors seems like a relatively minor problem.
However, if some elements (such as the HTML) are updated while
others (such as JavaScript files) are loaded from the cache,
elements of functionality might appear broken to your users.

THE SOLUTION

There are a few ways of working around this problem, and I'll go
over them in order of complexity. They all involve some variation
on the same theme: tricking the browser into thinking it's
downloading a different file than the one it has cached.

MODIFY THE FILENAMES

The simplest workaround is to basically rename your style
sheets, images, and JavaScript files every time you update them.
So, for example, you could include a version number in the names
of your files, like this:

While this will work well enough, it can become tedious very
quickly if you're changing your files often or have a large
number of static resources. It does, however, have the advantage
of doubling as rudimentary source control -- you'll have a
history of all the changes you've made to your site laid out in
your file system.

QUERY STRINGS

Another popular method is to add a query string to the end of
your filenames, for example:

With this method, every time you change the version number in
the query string, you'll force browsers to grab a new version of
your style sheet, image, or JavaScript file. The advantage of
this method is that there's no requirement to rename the files
themselves; you only need to change the references in your HTML.

The query string method does, however, have a few caveats.
First, there may be situations where it could conflict with
another legitimate need for a query string after your filenames
(though this is unlikely for static resources). The other and
more significant drawback is that if you modify images used in
your CSS (as background images, for example), you'll also need
to edit your style sheet to append a query string to each of the
image references. Depending on the size of your style sheets, the
number of images they refer to, and the frequency with which you
modify those images, this can turn into a lot of work. After the
jump, we'll investigate a time-saving technique you can use to
avoid all that.

[1] <http://developer.yahoo.com/yslow/>
[2] <http://articles.sitepoint.com/article/save-cash-optimize-cache>

SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -

101 Essential CSS Tips, Tricks, and Hacks

Stop wasting hours trying to fix CSS code using outdated
answers you find via Google. Our 101 tested and proven solutions in The CSS Anthology
are all you need.

Grab four free sample chapters
http://www.sitepoint.com/books/cssant3/

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

THE PATH METHOD

The final method -- and the one I want to focus on -- involves
including the version information in the path of the resource,
rather than in the filename or query string. So, for example:

You probably think that this will involve just as much work as
renaming the files themselves. While this is theoretically true,
in practice there's a clever workaround to save you having to do
that.

What we'll do is use a rewrite rule to make the URL
/css.1234/styles.css (and any other numerical variation of that
path) point to /css/styles.css on the server. To do this with
Apache, you'll need to use mod_rewrite. If you have mod_rewrite
installed and permissions for .htaccess files, setting up a rule
for this is straightforward. You can add the following lines to
the .htaccess file located in your site's root web folder:

RewriteEngine On RewriteRule css[.][0-9]+/(.*)$ css/$1 [L]

This rule uses a regular expression to match any path consisting
of css, followed by a period (.), followed by any number of
numerical characters, and finally a slash. Any path matching
this pattern will be rewritten to just /css/<filename>. The [L]
(meaning "last") specifies that no further rewrite rules should
be applied to this request. If the directory containing your
style sheets has a different name than css, you'll need to
adjust the rule accordingly, replacing both instances of css
with the name of your directory.

IMAGES

What about images? You could manually apply any of the methods
listed above to every image URL on your site; this includes all
url() statements in your style sheets and every src attribute
for every img tag.

That would be a lot of work, though. Fortunately for us, it
turns out to be unnecessary. If you're using the path method to
handle caching of your CSS files, you can automatically reap the
benefits of cache control for the images you load in your style
sheets using url(), without any extra effort.

This technique relies on the oft bemoaned fact that the CSS
url() property is relative to the style sheet's location, rather
than the location of the styled document.

In order for this method to work, images used in your style
sheets will have to be in a subfolder of your style sheet's
location (for example, /css/images/ rather than just /images/).
This makes sense anyway, as the resources used by your style
sheets are logically grouped with the style sheets themselves.

How does it work? In your style sheet, you might have a rule
like this:

#foo { background-image: url(images/foo-background.png); }

Following the path method described earlier, you would include
your style sheet in your document with markup like this:

Because the images in a style sheet are relative to the path of
the style sheet, the path to the image you've used is now
/css.1234/images/foo-background.png! This URL will be rewritten
by the RewriteRule, just like the URL to the CSS file itself.

Any time you change the CSS in your style sheet -- or the images
it references -- you can simply change this version number, and
all your site's visitors will retrieve the correct styles and
images. As well as being a lot less work than changing each
image reference individually, you'll also avoid forgetting any
images, as it's all done automatically.

JAVASCRIPT

I've yet to explicitly mention JavaScript files, but of course
any method used for CSS can also be used for JavaScript. So, for
the path method, you'd have a script tag like:

and a rewrite rule such as:

RewriteRule js[.][0-9]+/(.*)$ js/$1 [L]

These instructions assume that your .js files are located in the
/js/ directory, so you may need to adjust them to match up with
the directory structure of your site.

CONCLUSION

Only the smallest sites can afford to ignore browser caching.
When you take account of caching and engineer your site to take
advantage of it, you can significantly improve performance for
your users, and save money on bandwidth while you're at it. But
like any technology, it's easy to use incorrectly, quickly
causing more headaches than it's worth. Using the methods I've
described, you should be able to gain the most out of browser
caching with as little effort as possible.

It's also important to remember that caching is only one part of
a site optimization strategy; download and use YSlow [1] on all
your sites to make sure you're giving your visitors the fastest
possible experience. Good luck, and happy optimizing!

Post your comments on the article:

Overcome your Caching Conundrums [2]
by Zach Johnson

[1] <http://developer.yahoo.com/yslow/>
[2] <http://articles.sitepoint.com/article/overcome-cache-conundrums>

SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -

3 Months FREE Web Hosting Offer Ends Soon!

Jump-start your online presence this winter with 1&1. Get 3 Months
FREE Web Hosting

* Pay nothing for 3 full months
* Includes FREE domain names, site builder, traffic-boosting tools,
and more.
* Over $400 in free marketing money to promote your web site
* Over 9 million customers trust 1&1!

Start Building Your Website Now!

http://order.1and1.com/xml/order/Home?ac=OM.US.USa09K16733T7073a

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

See you next week for another issue of the Tech Times!

Andrew Tetlaw
techtimes@sitepoint.com
Technical Editor, SitePoint

NEW TECHNICAL ARTICLES - - - - - - - - - - - - - - - - - - - - -

The Foolproof Form Design Formula
by Jina Bolton

The first step to creating a top-notch form is to plan ahead:
conduct research, look for inspiration, and draft
wireframes. In this
excerpt from our brand new release, Fancy Form
Design, Jina Bolton shares her tips for building a solid
foundation for elegant and functional forms.

http://articles.sitepoint.com/article/foolproof-form-design-formula

ColdFusion 9 at Your Service: Image Manipulation with AIR
by Kai Koenig

One of the exciting new features in ColdFusion 9 is the addition
of a web service layer wrapping several aspects of
ColdFusion's
functionality. Kai shows us how to access those services
from an AIR app
to manipulate images online.

http://articles.sitepoint.com/article/image-manipulation-coldfusion-9-air

TECHY FORUM THREADS - - - - - - - - - - - - - - - - - - - - - - -

bbPress theme: Wireframe decision
<http://www.sitepoint.com/forums/showthread.php?threadid=644531>

Attn: Your Web Forms Suck
<http://www.sitepoint.com/forums/showthread.php?threadid=644613>

Help on form reload problem
<http://www.sitepoint.com/forums/showthread.php?threadid=644588>

Can You Get Manipulative? Take The ColdFusion Quiz, and Find
Out!
<http://www.sitepoint.com/forums/showthread.php?threadid=644556>

rollover to replace image
<http://www.sitepoint.com/forums/showthread.php?threadid=644485>

Writing effective home page content
<http://www.sitepoint.com/forums/showthread.php?threadid=644455>

How Do You Explode an Already Exploded Array?
<http://www.sitepoint.com/forums/showthread.php?threadid=644261>

What is the best way to learn about browser compatibility
<http://www.sitepoint.com/forums/showthread.php?threadid=644191>

Dealing with POST data and expired sessions
<http://www.sitepoint.com/forums/showthread.php?threadid=644081>

can graphics be positioned with reference to pixels?
<http://www.sitepoint.com/forums/showthread.php?threadid=644072>

MORE TECHY BLOG ENTRIES - - - - - - - - - - - - - - - - - - - - -

Web Tech Blog: TECHNICALLY SPEAKING

Do Your Web Forms Suck? (1 comment)
http://www.sitepoint.com/blogs/2009/10/29/do-your-web-forms-suck/

Can You Get Manipulative? Take This ColdFusion Quiz and Find
Out!
http://www.sitepoint.com/blogs/2009/10/29/can-you-get-manipulative-take-this-coldfusion-quiz-and-find-out/

Hack Attack: Two Events that All You Mashup Masters Won’t Want
to Miss
http://www.sitepoint.com/blogs/2009/10/27/hack-attack-two-events-that-all-you-mashup-masters-won%e2%80%99t-want-to-miss/

Web Pro Business Blog: STRATEGIES FOR SUCCESS

Why You Need A Business Continuity Plan (1 comment)
http://www.sitepoint.com/blogs/2009/10/30/why-you-need-a-continuity-plan/

How to Use Twitter for Customer Service (10 comments)
http://www.sitepoint.com/blogs/2009/10/29/twitter-for-customer-service/

Podcast Blog: THE SITEPOINT PODCAST

SitePoint Podcast #34: Sorry About the Slashes (2 comments)
http://www.sitepoint.com/blogs/2009/10/30/podcast-34-sorry-about-the-slashes/

ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -

Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)

Find out how to get YOUR sponsorship ad in this newsletter and
reach 95,000+ opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com

HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -

People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's SitePoint Tech Times.

ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Send suggestions and comments to:
techtimes@sitepoint.com

To subscribe, send a blank email to:
subscribe@sitepoint.com

The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php

The SitePoint Tech Times is (c) 1998-2009 SitePoint Pty. Ltd. All
Rights Reserved. No part of this Newsletter may be reproduced in
whole or in part without written permission. All guest articles
are copyright their respective owners and are reproduced with
permission.

SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA

You are currently subscribed to The SitePoint Tech Times as:
[email]

To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php

To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=[email]>

To leave this list, please visit:
[unsubscribe]

Do Not Reply to this email to unsubscribe.

We send this newsletter using Campaign Monitor.
http://www.campaignmonitor.com/

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

SitePoint

View Issue

Topics

Before You Code

Design and Layout

Client-side Coding

Server-side Coding

Site Strategy

Site Marketing

Sell Your Services

Custom Twitter Backgrounds

99designs

View Issue

Topics

Follow SitePoint on...