Peter Wilson

Putting the “distributed” in CDN

I wrote yesterday that Google appeared to have taken the “distributed” out of their public CDN hosting of a variety of JavaScript libraries. I even provided some trace routes comparing their CDN to Microsoft’s. I was wrong.

Unlike James Collins, we don’t have terminal access to any servers in Australia. As I’ve detailed before, our sites are hosted in the US. James was kind and diligent enough to do some further testing comparing Microsoft’s CDN to Google’s. He found they resolved as follows:

Location	Google	Microsoft
Melbourne, AU	US	Sydney
Sydney, AU	Sydney	US
Perth, AU	Sydney	US

If you have the chance, I’d love you to test where ajax.aspnetcdn.com and ajax.googleapis.com resolve to for you. You can do a traceroute and you should be able to work out the destination from host names and response times. Letting me know via twitter is probably easiest, my username is @pwcc.

Obviously, I should have done all this checking before writing the post. By failing to do so, I look a bit of a tit.

Taking the “distributed” out of CDN

Note: After publishing this article, I was given the results of traceroutes from other Australian cities. The results showed I was wrong.

Over on Twitter @bobearth, prompted me to run some trace routes against the Google CDN and compare it to the Microsoft CDN. It appears Google have taken the distributed network out of their CDN.

As you’re probably aware, CDN is an abbreviation for content distributed network. The idea behind them is that American users will be served content from a server located in the US or Canada, Australian users will be served content from a server located in Australia or the Pacific, and so on.

!important is Important

The !important declaration has really bad reputation, and deservedly so. As is often the way, this reputation results from abuse rather an inherent problem with the property itself. An example of its abuse might be:

#nav {
  float: none !important;
  /* where did I float this? */
}
/* ...jumble of code... */
ul#nav {
    float: left;
}

There are, however, instances where the !important declaration is the best tool for the job.

Big Red Framework

We’ve updated the base WordPress theme we use at Soupgiant for WordPress 3.1+ and to make more use of the WordPress API.

Along with the standard features you would expect in a WordPress framework, it includes

templates for the Theme My Login plugin,
custom default code for Formidable / Formidable Pro plugins,
custom html output for the Grunion Contact Form plugin, and,
a child theme starter.

Never use the framework proper to set up a theme, set up a child theme instead.

Copy the files from the starter directory into the base folder of your child theme
Create the sub-directory assets in your child theme
Copy the framework’s assets/child/ directory into the assets directory of your child theme

See the WordPress codex page on child themes for more information.

More documentation to come!

Guest Post on Digging into WordPress

Jeff and Chris have been kind enough to publish Hosting Client Sites on a WordPress Network as a guest post on Digging into WordPress.

Regular updates keep WordPress secure and expand the feature set, ensuring the platform meets both the developer’s and their client’s needs.

The flipside of regular updates is the maintenance of WordPress installs. Once you start maintaining more than a few installs for your clients, keeping both plugins and WordPress up to date can become a bit repetitive.

Setting up a WordPress Network, using the multisite feature, reduces maintenance time. Upgrading all your sites becomes almost as easy as upgrading it for one.

Head over to Digging into WordPress to read the post and leave a comment.

Caching Google’s WebFont Loader

The Google WebFont Loader provides the following sample code:

WebFontConfig = {
  google: { families: [ 'Tangerine', 'Cantarell' ] }
};
(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

The line in bold indicates version one of webfont.js is being loaded. As with Google’s other hosted libraries providing a more, or less, specific version number will effect both browser caching and whether the webfont.js is upgraded automatically.

Version in code	Version provided	Caching period
1	Latest in Version 1 tree (currently 1.0.17)	1 hour
1.0	Latest in Version 1.0 tree (currently 1.0.17)	1 hour
1.0.17	Version 1.0.17	1 year

By using the exact version number in your code, the load time of your site will improve on return visits as webfont.js will already be cached in your visitors browser. It will be cached on your visitors first visit if they’ve visited another site using the exact version in the last twelve months.

You can see the latest version available by visiting the Google Libraries Developer Guide. You can specify the exact version number in your code by replacing the bold line in the code sample above with:

'://ajax.googleapis.com/ajax/libs/webfont/1.0.17/webfont.js';

Soupgiant WordPress themes on Github

Update: We’ve released our updated framework and renamed it the Big Red Framework.

The Soupgiant base WordPress themes are now available on GitHub. There’s no documentation at this stage, I’ll write up a blog post with details in the coming weeks.

There are two parts to the theme

Soupgiant Parent Theme
We use this as the parent theme across multiple projects. Any bug fixes or new features applied to this theme will be available to all child themes.
Soupgiant Child Theme
Starting point for each project. Once duplicated for the project, CSS styling and per project PHP customisations are applied/overridden in the child theme. Most projects require a custom header.php & footer.php.

As I say, documentation to come.

HTML5: I couldn’t (quite) do it

For most of my career as a web developer I’ve produced websites that work without JavaScript. For the JavaScript impaired the sites may be missing a minor visual feature or be a little clunky in places, but they work and the meaning remains clear. It doesn’t bother me that, sometimes, the cost of allowing for sites to load without JavaScript can mean missing out on the latest web fashion. I’m not a big fan of fashion.

Currently, web development is undergoing some major transitions: the HTML5 spec is being developed and CSS3 is being implemented. The browser wars have returned, although this time around, it’s a battle to win developers’ hearts by implementing the newest standards.

Now is the time for developers to re-evaluate their past practices; moving on from the old and embracing the new. I kept that ethos in mind when upgrading the Soupgiant WordPress base theme recently. Among other things we were porting it to HTML5.

Forms are forms, not lists

Respecting someone or their publication does not prevent one from disagreeing with them. In fact, I think to nod along saying “you’re so right, OMG, you are so right!” is less respectful than listening to and considering what they say. That dealt with, allow me to disagree with some people I respect.

Frequently, I see HTML forms coded as lists. I’ve seen this in code by some publications and people I highly respect, such as on A List Apart. The code may be:

<form action="example.php" method="post">
<ol>
  <li>
    <label for="itemOne">Item One</label>
    <input id="itemOne" name="itemOne" />
  </li>
  <li>
    <label for="itemTwo">Item Two</label>
    <input id="itemTwo" name="itemTwo" />
  </li>
</ol>
</form>

Selectivizr with CSS on a sub-domain

Updating a WordPress starter theme recently (among other things I was porting it to HTML5), I needed to decide which shims and/or polyfills to use. I starterd with Remy Sharp’s HTML5 enabling script but another to consider was Selectivizr to improve IE‘s support of CSS3 selectors.

One of the disadvantages of using Selectivizr is it rules out using a CDN for one’s style sheets. To quote their site:

Style sheets MUST be hosted on the same domain as the page due to browser security restrictions. Likewise, style sheets loaded using the file: protocol will not work.

After umming and ahhing for a couple of days, the following solution involving conditional comments, occurred to me:

<!--[if gte IE 9]><!-->
<link rel="stylesheet" href="http://cdn.example.com/styles.css" type="text/css">
<!--<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" href="/styles.css" type="text/css">
<![endif]-->

With a few lines of conditional comments, browsers supporting the relevant selectors natively can take advantage of the performance boost from a CDN while developers can take advantage of the advanced selector support provided by Selectivizr for IE<9 users.

I’ve set up a quick demonstration in which three paragraphs have different ARIA roles – featured, unfeatured and neverfeatured – different styles are applied to each paragraph using [role=something]. The demo renders fully in: IE 6-9beta, Firefox (Win & Mac), Chrome (Mac), Safari (Mac), and Opera (Mac).