No Mod Required

Designing the Moment: Web Interface Design Concepts in Action I like Hoekman's books. They remind me of really good web writing, in that they're efficiently written, but still full of real examples and strong insights for immediate (and beneficial) takeaway. Personally, I've implemented a couple of his suggestions within days of reading certain chapters and have filed away others for future reference. It's worth mentioning, I'm a relatively good fit with him philosophically, so your mileage may vary on the action items, but no matter what your approach is to web design, both this and Designing the Obvious are worthwhile reads.

It made quite a splash recently so I'm sure some of you are curious about Amazon's new Content Delivery Network (CDN) service, CloudFront. I know the Amazon Web Services suite of tools can be a little intimidating for non-developers, so this article outline how pretty much any reasonably technical person can get themselves up and running on CloudFront and can start reaping the benefits of geographical optimized content delivery.

This article assumes you already have both an S3 account and a CloudFront account (or at least know how to set each up.)

The Basics

The basic process works like this:

1. Place an object (IMG, FLV, etc) in an S3 bucket and ensure that it's publicly readable
2. Create a CloudFront "distribution" based on that bucket. CloudFront will auto-generate a *.cloudfront.net domain name for you to use to reference your object
3. Link to your object using the domain name an appropriate path (e.g. http://random1234.cloudfront.net/path/to/your/object.jpg)
4. When a user requests the object and Amazon CloudFront chooses the appropriate location from which to serve your object
5. Speed ensues

Bucket Explorer

Bucket Explorer is the preferred solution around these parts. It's fast, easy to use and offers custom headers (which allows performance geeks like myself to set far future expires headers.) It also has a beta version with built-in support for CloudFront.

The only drawback is that it's a commercial product. Actually, for me, that's not a drawback as I'm happy to pay for good software. I know some people are less apt to use a commercial package for something like this, so I mention it.

That said, this is definitely the best solution, so at the very least set yourself up with a trial version and give it a go.

How to Set Up CloudFront With Bucket Explorer

1. Click Bucket : Create

   

2. Name your bucket. If you plan on using your bucket as with a CNAME, then you must name the bucket exactly as the CNAME record (e.g., media.example.com)

   

3. Make it public (people have to be able to access it) by setting the All Users checkbox

   

4. Upload your files. If needed, follow the instructions here for uploading files with far futures expires headers.
5. Make a distribution by clicking on the distribution button

   

   That opens up your distribution list.

6. Once there click new.

   

7. Select your recently created bucket

   

8. Click Create, Bucket Explorer will go about it's business, creating your distribution. This might take a few minutes.

   You'll see it in the list as "InProgress."

   

9. Even if it's InProgress, selecting it and clicking update will allow you to complete the final step, which is getting the CloudFront URL you'll need to access your files. Simply select the domain name and use your system's copy command to get the domain into you clipboard.

   

10. Now, all you have to do is reference the newly created domain name and the needed file path to access your assets.

S3 Firefox Organizer

S3 Firefox Organizer is a free, Firefox add-on that allows you to manage S3 buckets and files from the comfort of a Firefox tab. Very easy to use and priced right (although I encourage donations if you find it useful,) the only thing holding back S3 Firefox Organizer from being my main S3 tool is the lack of a few advanced features (far futures expires headers being a big one.) One advanced feature that they do have is the ability to manage CloudFront distributions.

1. In your remote window, right click and select Create Directory or click on the Create Directory button.

   

2. Give it a name. Once again remember to match the bucket name to the name of the domain if you're planning on using a CNAME with this bucket.

   

3. Right click on your newly created bucket and select Manage Distributions
   
4. This will bring up the distributions dialog. click Create Distribution:
   
5. It'll create the distribution. Refresh the list below and you'll be able to select your newly created distribution. Click Copy to get the URL onto your clipboard and you're ready to start using your new distribution.

   

And there you have it, two easy ways to get up and running with Amazon CloudFront. If you run into any problems leave a comment and I'll try to clear up any issues you might have. I can't guarantee anything (including that the above tutorial won't turn your site into a smoking wreck ), but I'm always keen to help.

I've cooked a turkey or two in my time.

I'm just saying…

That Turkey is a thing of beauty. Hopefully it will look like this when done (mine from two years ago):

I mess around with this site a lot. This week, in particular, has been interesting. In the past week I:

• Moved my interface images over to CloudFront, Amazon's new Content Delivery Network (CDN.) I'm especially hoping this will increase initial page view performance for my site in Europe and Asia, where I've always had some lag. I'll be monitoring my bounce rate to see if that's the case. The initial results are positive (an overall reduction of 1-2% in my bounce rate over the past week), but the numbers are still too small to really draw any conclusions.
• Took advantage of Firefox's Link Prefetching to speed up all those next gallery links. I tested it out and between link prefetching and all the caching I do, browsing gallery pages in Firefox 2+ is screaming fast.
• Added some copy and rewrote some of the text/labels right here on the blog. Spurred on by the blog chapter in Designing the Obvious, I decided to implement a couple of his recommendations. Within 20 minutes of having read the chapter, I'd changed the header for the comment section, added the little descriptive blurb below it and changed the label for my RSS icon from "FEED" to "Subscribe."

  Small changes all, but maybe they'll improve the experience for folks.

  Or maybe not.

  And if they don't? I'll try something else

This kind of ongoing enhancement is core to the way I approach web design/development. I often speak of sites as being living organisms and this is the kind of thing I do to keep mine growing/evolving in positive ways.

Fun times.

I was reading John Resig's Browser Page Load Performance post earlier today and followed up from there on the concept of Link prefetching. Currently supported by Firefox 2+, Link prefetching is a browser based mechanism for fetching "future" content. Considering I wrote (and ultimately scrapped*) similar functionality for my gallery pages, I was obviously intrigued.

In its basic version it looks like this:

<link rel="prefetch" href="/images/big.jpeg">

With the href being the target content and the rel attribute triggering the prefetching mechanism. Pretty simple. I've already implemented it here on my gallery pages.

One thing I would like to see, and this is hinted at on the above linked Mozilla FAQ page, is prefetching performed automatically on anchor (<a>) tags with rel attribute set appropriately. In my mind that would be any anchor with a rel attribute of next, but the prefetch value would be fine as well. Personally, if that were supported I wouldn't have any (or very little) work to do to take advantage of this feature and in a general sense it would build on what people are already doing using prev, next and toc rel attributes on gallery links.

*it was scrapped because I hated the idea of forcing bandwidth usage on people with metered accounts. Since this is a browser based mechanism, it should be relatively painless for people in that situation to control whether or not content is prefetched.

Midnight Run I'd seen this before of course. Still, even on this third or fourth viewing Midnight Run more than holds its own. It's funny, exciting, and features a couple of great performances by Charles Grodin and Robert Deniro.

I was also reminded how much I miss real stunts. Obviously nothing here was of the caliber of what you'd see in 1980s vintage Hong Kong action, but it was still brave men and women doing scary things in a real physical space. As exciting as they can make CGI these days there's nothing as thrilling to me as seeing real stuntmen doing their thing. Here we had some car chases, riding some rapids sans raft, a couple of big jumps into water. Nothing incredible, but still a lot more exciting than watching a rubbery computer generated uber-avatar do the same thing.

On another note… HOLY CRAP I'VE ONLY SEEN 23 MOVIES THIS YEAR. There were weeks back in the day where I probably watched 23 movies.

Sad.

Right now Internet Explorer 6 averages about 10-12% of my traffic here (11% for the past month.) While I won't dismantle existing support mechanisms, I will no longer test new features in IE6 and going forward I will not support or test for IE6 for the new version of the site.

The good news is, I rarely do anything here that will tax IE6 heavily and the redesign will likely be architected in such a way that it will probably work pretty well in IE6 even without specific attention. The bad news is, 11% equals about 6000 people and the thought of annoying, even slightly, that many folks over a month worries me. The thing is, I just can't support three versions of a browser, especially when one of them is such an odd man out. IE7/IE8 are comfortably supportable browsers. IE6 plainly sucks.

Spurred on by this:

Microsoft: IE 8 won't be done until 2009

So I've got to draw a line in the sand.

Now if I can just convince them to do the same at work…

I'm not sure how I'm going to codify this style, but it sure is a lot of fun. I'm going to start to work on larger scale pieces, which should be kind of crazy to try to post on the net.

I thought I was going to have to dig into some PHP to set up my newly hatched CloudFront account. Not so (although that would have been kind of fun.) As I should have guessed, the folks who put out Bucket Explorer have already cooked CloudFront support into a beta of Bucket Explorer.

Bucket Explorer, for those of you who don't follow my every movement (which means basically all of you,) is the app that I praised for providing custom header support for Amazon S3.

Bravo guys.

And while I'm at it, bravo to Amazon for putting together a CDN service that even DIY guys like me can afford. Being obsessed with performance like I am, the ability to serve content from geographically opportune locations with no minimum and low rates is officially cool.