Ed Eliot - Latest Blog Entries

Unix Permissions Calculator Released

Ed Eliot — 2009-03-02T14:55:12-00:00

Over at Project Fondue we've just released a new tool - Permissions Calculator. If you always had trouble understanding how Unix file permissions worked then this is the tool for you.

It allows you to specify the permissions you need by ticking checkboxes and it then generates the correct octal code for use with chmod. Alternatively supply it with an octal code and it'll provide a breakdown of what permissions that code corresponds to. The URL of the breakdown is bookmarkable making it easy to share with other people or to cross link from online documentation.

Additionally the tool can generate the symbolic values needed to added permissions to an existing, base permissions set.

Favicon Generator & Editor Released

Ed Eliot — 2009-02-10T02:18:54-00:00

I've been working on several projects with a couple of former colleagues (Stuart Colville & Cyril Doussin) and we've just released the first of these - a favicon generator. The CSS Sprite Generator tool we released back in 2007 has also had a new lick of paint and we've set up Project Fondue to promote our work so check back often for new tools.

Here's an extract from the about page text from the Favicon Generator which explains exactly what it does.

This tool provides an easy way to convert any GIF, PNG or JPEG to ICO which is supported by all modern web browsers. It also enables you to create favicons from scratch via a handy online editor. Additionally the editor lets you manually tweak generated favicons to ensure the best possible result.

Inbound Link Analyser - a tool for analysing links to your site

Ed Eliot — 2008-10-14T13:23:39-00:00

Eric Migralia, of Yahoo! YUI fame, has just released a tool, Inbound Link Analyser, for listing and analysing inbound links to any site. It's utilises YUI extensively and, I'm sure, provides a fantastic example of how to use a number of the core YUI components. I strongly recommend a browse around the source. Data for the tool is taken from Yahoo!'s Site Explorer API and del.icio.us.

So far the tool has helped me unearth plenty of inbound links I hadn't discovered through the usual suspects (Google Analytics, Feedburner etc) so given how much I like trawling through this stuff I'm guessing I've got plenty of fun filled browsing ahead of me.

The interface also lists other pages that have been indexed for the domain entered. Clicking on these or any of the inbound links opens separate tabs within the interface for you to analyse those resources further.

Eric's written a short introduction over on his blog (also newly released) so I'd suggest heading over there and checking that out first.

Here's a link to an analysis of my CSS Sprite Generation tool. It provides plenty of data to start exploring the tool with.

Vote for my SXSW 2009 panel proposal

Ed Eliot — 2008-08-14T15:26:58-00:00

Stuart Coville, Nicole Sullivan, Stoyan Stefanov and myself have put forward a panel proposal for SXSW 2009 - Practical Website Perfomance. We'll be covering a number of frontend techniques aimed at improving site performance, discussing how the way browsers work affects performance and generally discussing what we've learned about developing high traffic websites.

If this interests you please take a moment and head over to the SXSW panel picker to vote for our panel.

Source code for version 2 of CSS Sprite Generator

Ed Eliot — 2008-07-13T10:41:10-00:00

Stuart and I have just released the source code for the latest version of our CSS Sprite Generator. As mentioned in my previous post the code has undergone a major refactoring and support for Image Magick has been added which greatly improves the quality of the images produced. Additionally there are options for tweaking the number of colours used in the output image, the image quality and for compressing images through OptiPNG.

Download a tar.gz of the source or check out the Bazaar branch.

Version 2 of CSS Sprite Generator released

Ed Eliot — 2008-06-23T12:42:06-00:00

Stuart and I have just released a new version of our CSS Sprite Generator. We've given it quite a major overhaul and it now uses Image Magick to generate sprite images instead of GD. This produces much higher quality images and fixes all of the related bugs filed. Additionally we've added options to control the number of colours used in the sprite image for PNGs and GIFs and the image quality for JPEGs. Finally we've added an option to pass sprite images through OptiPNG to compress the output when using PNGs. This frequently results in at least a 50% decrease in file size and should save trips to Image Ready to post optimise your images.

Behind the scenes we've completely restructured the code and heavily commented it to make it easier to understand. We'll be updating Launchpad with this latest version of the code in the next few days. Stay tuned.

The addition of these features has meant we're missing a number of translations. If you think you can help us fill in the gaps for your language please drop us a line or visit our translation help page for more information.

As you can imagine CSS Sprite Generator is very CPU intensive and therefore requires a fairly high quality hosting environment. To help support future development and hosting costs we're now selling a couple of small graphical button ads along side the text links we've sold on the site up until now. We've tried to ensure these have been added as unobtrusively as possible so hopefully they won't impact your experience whilst using the tool. If you're interested in advertising we've got a page which gives all the details of the options available.

For the future we're mulling over a number of ideas for new features. One in particular is the addition of a REST based API (returning JSON and serialised PHP). We'd love to hear what you think about this and your thoughts on what else we should add to the tool going forward.

Opera releases Dragonfly for Opera 9.5 beta 2

Ed Eliot — 2008-05-06T13:46:11-00:00

Opera has released Dragonfly, their Firebug like developer console, as part of the latest release Opera 9.5 beta 2. It looks pretty promising - at a quick glance I think it compares favourably with the equivalent tool in Safari 3.

The initial version includes a JavaScript Debugger, a DOM Inspector, CSS Inspector, error console and a command line and, although it doesn't currently offer editing capabilities, they'll follow shortly as well as the ability to inspect XHR/HTTP headers.

I used Opera as my main browser for a couple of months at the start of the year but found myself reluctantly returning to Firefox as I was having to run it almost all the time anyway for access to the developer tools. The addition of editing capabilities to Dragonfly will likely see me return to Opera as I found it much snappier and memory usage over time much lower.

More information and download details available from the official Dragonfly web site. Chris Mills has also posted a detailed walk through explaining how to use the tool on the Opera Developer site.

Mobile Browser Concurrency Test

Ed Eliot — 2008-04-28T14:52:44-00:00

Cloud Four, specialists in mobile development, have set up a research project aimed at finding out more about the capabilities of mobile devices to determine the performance implications of building web sites for the wide variety of devices available. Inspired by desktop browser research, such as that carried out by Yahoo!'s Exceptional Performance Team, they're particularly interested in finding out the following information:

What is the number of concurrent http connections that the mobile browser supports both per domain and overall?
Does the mobile browser support gzip or other methods for reducing the size of pages?
Does the mobile browser support caching if you set the Expires header far into the future?

They plan to publish the information under a creative commons license to allow mobile web developers to benefit from their findings.

You can help them by running their test suite from your mobile phone's web browser.

Problems building MySQLdb on Mac OS X 10.4 (Power PC)

Ed Eliot — 2008-04-17T03:00:07-00:00

Over the last couple of days I've been trying to build and install MySQLdb on my PowerPC based Mac Mini with very little success. I got the following message followed by a ton of type errors:

Compiling with an SDK that doesn't seem to exist: 
/Developer/SDKs/MacOSX10.4u.sdk
Please check your Xcode installation

I tried reinstalling Xcode Tools to see if it would solve the problem but with no success. Anyway after searching around it turns out that the installer doesn't add a required SDK package which you can find in Xcode Tools->Packages on the install disk. It's called MacOSX10.4.Universal.pkg.

I (and others) have not had similar problems on Intel based Macs running Tiger or Leopard so I'm guessing it's specific to the PPC install.

With that out of the way - on with Django.

Automatic versioning of CSS, JavaScript and Images

Ed Eliot — 2008-04-07T15:24:00-00:00

See comments for important information about HTTP caching issues with URLs containing query string parameters.

When including CSS and JavaScript resources in your pages you should version file paths and update these version numbers every time the files change. This is necessary as a visitor's browsers may, depending on settings, continue to cache files even after a change. This can result in a mismatch between your HTML and these external resources which may cause rendering or functionality problems. One will likely encounter similar caching issues with images.

So if we work on the basis that we should version these resources and that changing version numbers forces the browser to reload those resources then we can actually gain large performance improvements by explicitly instructing the browser to cache them for an extended period of time (say 10 years) thereby limiting the number of times the browser goes back to check for fresh copies.

This can be achieved fairly easily within the virtual host settings of your Apache conf file. Simply add the following directives within the relevant virtual hosts section substituting /assets/ with the file path corresponding to the location where your CSS, JavaScript and images are stored.

<Location /assets/>
ExpiresActive On
ExpiresDefault "access plus 10 years"
</Location>

If you have the mod_deflate module installed then you can gain an additional performance benefit by gzipping CSS and JavaScript resources to reduce the amount transmitted down the wire.

<Location /assets/>
ExpiresActive On
ExpiresDefault "access plus 10 years"
SetOutputFilter DEFLATE
</Location>

These directives can also be added to an appropriately placed .htaccess file but as Stuart explains there are performance implications with this method so it should only be chosen if you don't have access to your Apache conf files (perhaps because you're using shared hosting).

Applying both these settings covers off a couple of recommendations made by Yahoo!'s YSlow performance testing tool so not only will you end up with a faster site but you'll also improve your YSlow rating by a grade or two.

Of course manually versioning files is a pain, it's repetitive and as Stuart is always reminding me manually repetitive tasks should be eliminated wherever possible. In the past I wrote a script which automatically merges CSS or JavaScript files and versions the combined output. Here's some simpler code which versions individual files based their last modified date - every time the file is updated it's version number updates accordingly.

<?php
class Version {
private static $aLookup = array();
public static function Get($sFilename) {
if (!array_key_exists($sFilename, self::$aLookup)) {
$sRealPath = realpath($_SERVER['DOCUMENT_ROOT'] . "/$sFilename");
if (file_exists($sRealPath) && ($iTimestamp = filemtime($sRealPath))) {
self::$aLookup[$sFilename] = $iTimestamp;
$sFilename .= "?v=$iTimestamp";
}
} else {
$sFilename .= '?v='.self::$aLookup[$sFilename];
}
return $sFilename;
}
public static function GetLink($sFilename) {
return '<link rel="stylesheet" type="text/css" href="'.self::Get($sFilename).'">';
}
public static function GetScript($sFilename) {
return '<script type="text/javascript" src="'.self::Get($sFilename).'"></script>';
}
public static function GetImage($sFilename, $iWidth, $iHeight, $sAlt = '') {
return sprintf('<img src="%s" width="%d" height="%d" alt="%s">', self::Get($sFilename), $iWidth, $iHeight, $sAlt);
}
}
?>

Download plain text version (Updated version to fix HTTP caching issues)

Using it is pretty simple - wrap the required function around the file path you'd normally have supplied to link, script or img tags.

<link rel="stylesheet" type="text/css" href="<?php echo Version::Get('/css/dark.css'); ?>">

In fact it's even easier than that - I've also provided some wrapper functions which make outputting link, script and img tags a little bit easier. The example above could be written more simply as follows:

<?php echo Version::GetLink('/css/dark.css'); ?>