My dearly beloved website clients: over time, your sites are loading faster and faster¹ — and there’s nothing you can do about it. Just another fringe benefit of having me as your web developer.

Homepage speeds (all data points), Oct 2010 to Apr 2012

Homepage speeds (averaged), Oct 2010 to Apr 2012

Coincidentally, our happy little graph here appears to evoke a logarithmic trend.

¹: As measured with Google’s Page Speed extension for Firefox, which rates a page’s loading speed based on these criteria.

I write and edit code for a living. Because I enjoy what I do, I have this insatiable thirst for knowledge and self-improvement: “How can I write this function in fewer lines?” “How can I make this CSS bullet-proof?” “How can I make this page load faster?” Not for a second do I purport that I come up with solutions solely on my own. I have this small army of disparate web developers at my disposal — a collection of developers that, for all intents and purposes, functions as an extension of my own brain.

Kroc Camen

Where do I begin? Kroc was one of the first to fully embrace the still-emerging HTML5 specification, his Video for Everybody! just works, and his approach to writing CSS and .htaccess is refreshing and enlightening.

Dean Edwards

After Microsoft released IE6 in 2001, the company essentially stopped all browser development for five years. However, during that time, a man in the UK was busy writing a script that, when run in IE6, corrected many of the rendering bugs inherent in that browser and even added support for certain CSS rules that IE7 would eventually support. If you’re curious or pedantic enough to parse through Dean’s code, you will soon realize that he is insane.

Joe Hewitt and other Firebug contributors

When I write code, I usually have the Firebug pane open constantly. I wouldn’t be as efficient or effective at what I do without Firebug. Proper respects to Joe Hewitt and other contributors to Firebug: some anonymous, some not well known.

Paul Irish

I just know it: news will soon surface that the man known as Paul Irish is actually several Google employees working collaboratively under the same alias. The man seems to have his paws in everything. Deep breath: HTML5 Boilerplate. Move the Web Forward. Modernizr. CSS3 Please. HTML5 Please. W3Fools. HTML5 Readiness. Front-end Code Standards & Best Practices.

And it doesn’t hurt that he’s deeply knowledgeable, funny, and — might I add — handsome.

Steven Levithan

In the short 15 months that I worked alongside Steve, I learned more about web development best practices, regular expressions, and JavaScript than I had in all years prior. Many of my Oh My God, it’s full of stars! moments are because of Steve.

Jens Meiert

Jens is the expert and I enjoy reading his posts about code maintenance. He’s also a bit of a Renaissance man. I get deeply jealous if I think about it too much.

Eric Meyer

Eric, for a while, was the go-to guy for all things CSS. He wrote CSS: the Definitive Guide, for Pete’s sake! Eric is a dog who has had his day, but he can still churn out thought-provoking posts.

Ben Nadel

It seems that whenever I have a ColdFusion problem that I need to solve, my search ends when a Ben Nadel blogpost succinctly tells me exactly what I need to know. That’s not at all an oversimplification.

Chris Pederick

Chris, British-born but now residing in California, is the author of the invaluable Firefox extension Web Developer. Every time the extension has a major update, I send Chris a thank you gift from his Amazon wishlist. Along with Firebug, Web Developer is indispensable to developers — I couldn’t imagine the browser without it.

John Resig

The creator of jQuery, Resig made JavaScript interesting again and is arguably the man most responsible for its resurgence.

Steven Souders

Steve, an former employee of Yahoo (now with Google), is the one who got me interested in web page speed optimization. However, in a strange twist of fate, I never installed his YSlow browser plugin, but instead opted for a similar plugin, Google PageSpeed. But still, Souders wrote the book on front-end page performance.

So you’ve been a good little developer and define expires headers for page assets such as CSS, JS, and images. Let’s say you specify that the caching of CSS files expires one week after initial access. But if you modify a CSS file, your visitors could potentially load stale cache for up to one week.

One solution is to rename the file. For example, main.css would become main.2011-08-12.css This will effectively create a unique cached version of the CSS file. But this solution could get cumbersome with frequent updates, or with disparate references to the asset. A second solution is to add a query string to any references to the asset, for instance, main.css?2011-08-12. Proxy servers will treat this reference as a dynamic file and will likely not cache it. Browsers will treat this as if it were a unique file and re-cache it.

A refinement to our second solution is to automatically add a query string to references to the asset, but only when it’s necessary to do so. The following function, assetQueryString(), does just that. It takes two arguments:

1. The reference to the page asset
2. (optional) Maximum file age (in days) in which the query string will be appended

The function determines the file modification date and determines whether or not to append a query string, and for how long. The value of the query string, conveniently, is the last modification date of the file. Or, more accurately, it’s the number of days between the Unix Epoch and the last modification date.

PHP

function assetQueryString ($filePath, $maxAge = 7) {
	$today = intval(strtotime(date("Y-m-d")) / 86400);
	$fileDate = intval(strtotime(date("Y-m-d", filemtime($_SERVER['DOCUMENT_ROOT'].$filePath))) / 86400);
	$days = $today - $fileDate;

	if ($days <= $maxAge) {
		$filePath .= "?".$fileDate;
	}
	echo $filePath;
}

// usage:
<link rel="stylesheet" href="<?php assetQueryString("/templates/style/main.css"); ?>">

ColdFusion

<cffunction name="assetQueryString" returntype="string" output="FALSE">
	<cfargument name="filePath" type="string" required="TRUE" />
	<cfargument name="maxAge" type="numeric" default="7" required="FALSE" />

	<cfparam name="Variables.unixFileDate" default="0" />
	<cfset Variables.expandedFilePath = expandPath(filePath) />
	<cfset Variables.unixEpoch = CreateDate(1970,1,1) />

	<cfif fileExists(Variables.expandedFilePath)>
		<!--- determine last modified date --->
		<cfset Variables.unixFileDate = DateDiff("d", Variables.unixEpoch, getFileInfo(Variables.expandedFilePath).lastmodified) />

		<!--- determine today's date --->
		<cfset Variables.unixTodaysDate = DateDiff("d", Variables.unixEpoch, Now()) />

		<!--- append unique query string to file path if the file was recently modified --->
		<cfif Variables.unixTodaysDate - Variables.unixFileDate LTE maxAge>
			<cfset filepath &= "?" & Variables.unixFileDate />
		</cfif>
	</cfif>

	<cfreturn filepath />
</cffunction>

<!--- usage: --->
<link rel="stylesheet" href="<cfoutput>#assetQueryString("/templates/style/main.css")#</cfoutput>">

Chesapeake ADHD Center of Maryland is my most recent client: an ADHD psychotherapy practice in Silver Spring, MD. As was the case with Ann Dolin’s site, the original codebase was inherited. Apparently, the website was originally created in an old version of Dreamweaver — and all of its WYSIWYG glory. Sigh. With over 150 pages (and file names such as cooltext449991252_001.png) the codebase had become an unmaintainable morass of untemplated spaghetti, with nary a single redeemable line of code. The site was razed to the ground and reborn in the ashes.

Chesapeake ADHD has undergone more of a reorganization than a redesign; in fact, I view my design as more of an improvement upon the original — the essential design elements can still be seen.

When I inherited the project, the site’s Page Speed score was a somewhat respectable 78. Now? Try 96. The law of diminishing returns should kick in soon.

You may remember a site refresh I did for Ann Dolin last summer: her own tutoring business, Educational Connections. This spring finds her personal site, anndolin.com, getting a subtle makeover and a substantial speed boost.

Before the refresh, the site’s Page Speed score hovered in the high eighties. Not bad, by any measure. The original codebase was inherited, and I had done all I could to increase page load times (save for completely redoing the site, which was using a WordPress template of questionable character). The stars realigned with this recent redesign, and her Page Speed score is positively screaming with a score of 97.

My derivation of Eric Meyer’s latest Reset CSS, but for current browsers:

:not(button):not(input):not(optgroup):not(option):not(select):not(textarea) {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}

body {line-height:1;}

ol, ul {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}

table {border-collapse:collapse; border-spacing:0;}

Meyer’s first rule — in which we reset margins, padding, borders, and fonts — quickly becomes unwieldy as we explicitly list out all elements, save for a few typically used in forms. Instead, the negation pseudo-class provides a succinct way of selecting these elements. Internet Explorer 8 and below will still need to be fed the more verbose rule, however.

Update

Ah. It turns out I spoke too soon. The negation pseudo class carries a higher specificity than a simple element selector. So in practice, my method would be at least cumbersome. It was a nice mind exercise while it lasted…

And, no, I’m not talking about alpha-methylphenethylamine or the dopamine receptors in my brain. Nay; I’m referring to improving the efficiency of two aspects of my daily life:

My recreational running speeds over various distances

In the early months of 2010, I began to notice that running at a given speed — say, 7 MPH was progressively taking less and less effort as my overall weight and health improved. So, naturally, I started to increase my average speed. 8 MPH became the new 7 MPH and it looks as if 9 MPH is becoming the new 8 MPH. In July, I started to keep track of my personal records for various distances and times. Records continue to fall, so I know that there’s still room for improvement.

Web page load times of websites for which I code

In September, a random blog post keyed me in to the goodness that is Page Speed, a Firefox extension, that, with the help of Firebug, analyzes a web page’s assets and server settings against a set of web performance best practices and assigns a numeric score between 1 and 100. Do you see where I’m going with this? I now have a somewhat-tangible way of expressing a web page’s speed and a method for calculating speed improvements over time!

Educational Connections

In June, Annie got a referral from a book publisher in need of graphic design and layout for an upcoming title. As it turned out, the client also needed intensive web development, which presented a golden opportunity for Annie and me to work together for the first time. The book, Homework Made Simple (left), features her cover art, layout, and illustrations.

For the website, Annie provided page mockups, designed the logo, and gave much-needed creative input. I made a decision early on in the redesign process to ditch the site’s integration with WordPress — a decision I didn’t make rashly. WordPress definitely has its uses, but for Educational Connections, the drawbacks of WordPress outweighed the benefits.

The site is unique among my projects in that it boasts prominent stock photography of photogenic children and teens. I didn’t think I’d ever say this, but I believe I have a new-found appreciation for happy, bubbly stock photos.

Practical Pockets

Practical Pockets caters to, admittedly, a very niche market. Post-surgical recovery accessories for women? Hey — the site can’t redesign itself. A caveat: page content is served by a CMS which the client edits from time to time, so any peculiar page-specific layout decisions were probably not made by me.

I think my greatest accomplishment for Practical Pockets is that, even though I developed in Firefox and Chrome, used beaucoup progressive enhancement, and tended to push “aggressive” CSS rules, my Internet Explorer fixes file consists of a single float declaration.

For both of these projects, I “flipped the switch” and opted for the HTML5 doctype. Many developers are of the impression that HTML5 is “the future.” The future is now! Coding from the beginning in HTML5 now means not having to go back and correct markup later, as Jens Meiert can attest.

For the past 30 days, IE6 visits composed less than 5% of all browser visits to mattbrundage.com, a new low. Because the 5% threshold has now been breached, I’ll take this opportunity to state that, finally, IE6 is no longer a supported browser. Wow, it felt really good to type that! I had been flirting with the idea of dropping support for some time. In fact, it was supposed to be a Christmas gift to myself. But it is finally official.

What are we left with? Managing the quirks of IE7 and IE8 is a walk in the park compared to the frequently illogical rendering behavior of IE6.

Perhaps not coincidentally, Google is phasing out support for the 8 ½-year old browser — with support at YouTube to end just a couple of days before IE9 is announced at MIX10.

List of fun things to do in a post-IE6 world

• start using alpha transparent PNG
• start using CSS2/3 selectors
• start using inline-block instead of float
• start using “px” and “pt” again in font-sizing (perhaps)
• start using position:fixed
• stop adding cellspacing="0" to tables
• stop filling empty table cells with “ “
• More fun things to do