#cache busting

Our browsers can be unfriendly when we're updating a site, because the CSS doesn't refresh on each change. Clearing the cache doesn't work. This does:

Try adding a query string after your CSS filename in your HTML's head section.

<link href="main.css?v=1" rel="stylesheet">

You'll have to change the query string every time you make a change. Remove this when you move the updates to production. I like to use ?v=1 as a versioning system on websites; it'll make every person download a fresh new copy on redesigns.

Want to automate changing the query string on changes?

Try a JavaScript or PHP random number generator! This is the PHP I'm using on my sites now:

$refresh = rand();

<link rel="stylesheet" href="/css/main.min.css?v=1<?php if ($_SERVER["SERVER_NAME"] == "localhost") print $refresh ?>" />

This checks if you're using a local or production environment. If you're updating files on localhost (your computer), it'll generate a random integer to add as a query string, which forces CSS refreshes. The if statement makes sure this doesn't happen on production, where you'd want to just update the "v" version.

A Guide to Vanilla Ajax Without jQuery

Brief for Asynchronous JavaScript and XML, Ajax is a mechanism for making partial web page updates. It lets you replace sections of a web page with knowledge that comes from the server, while avoiding the necessity for a full refresh. Making partial updates on this means may be efficient in creating fluid consumer experiences and may lower the load placed on the server.

That is the anatomy of a…