Why Bother at All?

Every time I make change to to the design of our gardening website I need to check that I haven’t broken anything. In an ideal world I’d test the site on all combinations of browser and OS; realistically IE and Firefox covers 99% of our visitors so that is what I focus on. Testing with IE (specifically IE6) is a very unpleasant, but unavoidable part of web design.

How to Test Multiple Versions of IE?

Since it can’t be avoided, the main ways Web Designers have to test the various versions of Internet Explorer are:

1. Use the standalone versions (a good option)
2. Use the free Virtual PC images from MS to run different OS’s and browsers on one PC (what I’m doing)
3. Buy lots of hardware and Windows licences (which I have no intention of doing)

Why Not Use Standalone Internet Explorer?

Using the standalone versions of internet explorer has worked well for me in the past but conditional comments need a registry edit to work properly and some other stuff doesn’t work at all. It’s all explained on the site and whoever created the standalones did a great job. There are still a couple of reasons I’d prefer to use the MS provided Virtual PC images.

1. Bearing in mind how rubbish IE is generally, I’m not filled with confidence that hacked standalone versions will behave in the same way they do when installed ‘cleanly’ as MS intended.
2. I use WATIR to automate a quick visit to each page and check there are no horrendous rendering errors; running a WATIR script automatically opens, and tests with, the ‘installed’ version of IE. This means if you have IE7 installed properly and IE6 installed as the standalone version, you can’t run WATIR tests on IE6 (well, I don’t know how – suggestions welcome).

Testing Multiple Versions of IE on a Single PC (For Free)

Although Virtual PC itself is free, normally you need to buy extra Windows license for each Virtual Machine. Fortunately Microsoft provide free images that allow the likes of you and me to test different versions of Internet Explorer. The catch is that the images expire after a few months – as a guide, the ones I downloaded today (20th Jan ’09) have been out since Dec ’08 and are good until the end of April ’09.

Installing Virtual PC and Images

Once you download Virtual PC (for free), installation is an absolute doddle; just run setup.exe and keep clicking ‘next’.

The same goes for downloading and extracting the IE VPC images; aside from choosing a directory for them there’s nothing to it.

Starting a VPC Image

To get started running one of the disk images, start up Microsoft Virtual PC (Start > All Program > Microsoft Virtual PC). There’ll be no virtual machines by default so click on ‘New…’ to set one up…

There’s a bunch of screen shots at the bottom of this post that show the process, but basically you want to create a new Virtual PC, choose a name, OS, RAM and then select to use ‘An existing virtual hard disk’ (the image you downloaded earlier from Microsoft).

That’s it! If you go to the Virtual PC Console, select the Virtual Machine you just set up and click on ‘Start’ You will have another version of Windows start up as if it’s an app running on your physical machine – cool huh?

Networking

I had one small issue with networking which was easily resolved from the VPC console. My physical PC has two network cards with only one actually connected. The virtual PC’s I set up all opted to use the disconnected one by default. If your VM doesn’t have connectivity go to the VPC console, select the VM you’re having issues with and click on ‘settings’. Double click on ‘Networking’ and choose the port your VM should use.

Notes…

I installed VPC 2007, SP1 which according to the site runs on: Windows XP Professional, Windows XP Tablet PC, Windows Server 2003, Windows Vista Business, Windows Vista Enterprise, and Windows Vista Ultimate.

Screenshots of setting up a Virtual PC

Select "New..." to create a new Virtual PC

Choose "Create a Virtual PC"

Choose a sensible name for your VPC

Choose the correct operating system (the free ones are XP)

I accepted the default 128MB RAM

Select 'Existing virtual Hard Disk'

Choose the .VHD file downloaded earlier

Just click 'Finish' and you're hot to trot

Your new Virtual PC is displayed in your VPC console.

I’ve noticed more and more hand drawn elements and rough edges being incorporated into site designs. Andy Clarke’s fabulous Stuff and Nonsense and Erskine design both use rough edged dividing lines which I really like. I even borrowed the idea for our gardening website, Grows on You, to get an ‘organic’ feel in the design – particularly in the soil footer. Greg Wood (of Erskine) has also introduced hand drawn elements (including a super cool ginger bread man) into his recent redesign.

Basically, I like the natural look, and a recent post on the new border-image CSS3 property got me thinking about hand drawn speech bubbles – the sort of thing that might be used for comments in a design with a   hand-drawn theme.

Caveat – Does not work in all browsers

CSS3 is not finalised yet and this method will only work in certain browsers. The only one I have tested, and the one I used to get my screen shots, is Safari. I also believe the nightly build of Firefox support border-image.

How I created the Speech bubble using CSS3

First I created a speech bubble image; it’s 100 x 100 pixels and I tried a few different ways of getting lines that had a hand drawn feel – you can see it zoomed in below, together with guiding lines. I used the guidelines so I new which parts of the image would get stretched and where the corners (which aren’t stretched) should go. Starting at the top, they’re 15px 15px 15px and 30px in from the sides – numbers you’ll see again later in the CSS.

Speech bubble

Next for the html – nothing special there, just a div with a class of “comment”.

The HTML

<div class="comment">
<p>Hey. great idea!</p>
<p>Well, it would be if you could draw.</p>
<p>These hand drawn style designs are all well and good, but wouldn't the speech bubble look better if it wasn't drawn by a two year old?</p>
</div>
<div class="comment">
<p>And what about tiny comments?</p>
</div>

Then for the CSS; this is taken almost straight from the example I mentioned earlier with a few tweaks to the border sizes.

The CSS

.comment{
border-width: 15px 15px 15px 30px;
-o-border-image: url(bubble.gif) 15 15 15 30 stretch stretch;
-icab-border-image: url(bubble.gif) 15 15 15 30 stretch stretch;
-khtml-border-image: url(bubble.gif) 15 15 15 30 stretch stretch;
-moz-border-image: url(bubble.gif) 15 15 15 30 stretch stretch;
-web-kit-border-image: url(bubble.gif) 15 15 15 30 stretch stretch;
border-image: url(bubble.gif) 15 15 15 30 stretch stretch;
}

All the browser vendors have their own syntax for the border image property, but one day (hopefully) you’ll only need the first and last line of all that CSS.

The end results

After a few versions of the speech bubble image, here’s what I ended up with:

The speech bubbles

There’s definitely room for improvement but I like that I have a hand drawn container that will stretch to hold whatever you put in it. Now all I need to do is use web fonts to get some pretty handwriting inside the bubble.

Limit on file_column uploads

file_column puts all uploaded files in one directory, so if you hit 32k photos (or whatever) you hit an operating system limit and it barfs with this error…

Errno::EMLINK (Too many links -/some/file/column/storage/directory).

This means you have to delete the local files after putting them on S3 if you want to handle more than 32,000 uploads. Which leads nicely onto gotcha number 2…

file_column plugin still needs the local files (kinda)

If you move files to S3 and then start removing them locally (to free up disk space or stay below 32k files) validations that require the file to exist will fail. In our case, we have a file_column validation on filesize. Since the validation requires the local file to check file size, it errors if the file isn’t there.

To get round this, we set a flag (we called it stored_remotely) on the Photo object. This is checked in the file_column validations code and the validation is skipped if it’s set to true. We set the flag after the initial upload and we’ve confirmed it’s on S3. Which is where gotcha numer 2 blends seemlessly into gotcha number 3…

S3 gets confused over plus signs in keys

Trying to confirm an object was stored to S3 using S3Object.find fails if the key you used had a ‘+’. Say you you have an S3 object with a ‘+’ in the key; if you try to do an S3Object.find for an object with ‘+’ in the key, it fails. However, it finds the object if you replace the ‘+’ with a space. When you list objects, the returned keys also has spaces instead of any plus signs. To work around you need to replace the ‘+’ with a space.

Here’s the weird thing: If the object is an image and you’re serving it directly from S3, having plus signs in the uri works just fine, for example:

<img src =”http://bucketname.s3.amazonaws.com/key+name_with_a_plus.jpg”/> serves the image just fine, but…

AWS::S3::S3Object.find(http://bucketname.s3.amazonaws.com/key+name_with_a_plus.jpg , bucket_name) fails to fnd the object but it does find the object using a key name of “key name_with_a_plus.jpg”

Hope this saves you some time and hair pulling.

The motivation for this at the moment is to use S3 as a backup for large image files posted on our gardening website which we don’t serve and to free up some disk space on our servers. We use file_column but that probably isn’t too relevant for this post. We don’t, at the moment, want to serve images from S3.

If you haven’t already implemented file upload and storage with Ruby on Rails you might still find this post useful but both attachment_fu and paperclip support S3 out of the box so you might want to look there.

Basic setup of S3 with Ruby…

First the obvious – set up an account with Amazon’s Web Services.

As instructed in the Intro to AWS for Ruby Developers I installed the S3 gem accepting all dependencies. You should specify the versions for each dependency if you need to know how to re-create your configuration…

$sudo gem install xml-simple --version 1.0.11
$sudo gem install builder --version 2.1.2
$sudo gem install mime-types --version 1.15
$sudo gem install aws-s3 --version 0.5.1


Or if you don’t care and just want to get it going…

$sudo gem install aws-s3

Before diving in to the code I did a quick test using the useful s3sh (like console but for s3) so start that up.

$s3sh

Then you’re ready to get started. I opened an S3 connection, created a bucket and put a file into my new bucket. Bucket names have to be globally unique, not unique to an account, like domain names .

>> AWS::S3::Base.establish_connection!( :access_key_id => 'your key', :secret_access_key => 'your secret key')

=> #<AWS::S3::Connection:0x1588a44 @access_key_id="your key", @options={:persistent=>false, :server=>"s3.amazonaws.com", :port=>80, :access_key_id=>"your key", :secret_access_key=>"your secret key"}, @http=#<Net::HTTP s3.amazonaws.com:80 open=false>, @secret_access_key="your secret key">

>> Bucket.create('bucketname')
=> true
>>

>>AWS::S3::S3Object.store("bonsai.jpg", open("./Desktop/bonsai.jpg"), "bucketname", :access=>:public_read)
=> #<AWS::S3::S3Object::Response:0x11237200 200 OK>

Once I’d done that I put the url in the browser to check I could see the image (Note that if you configure the bucket in any way (e.g. you create a European bucket) it’s recommended (required?) you put the bucket name first in the URL. Bucket configuration is done when you create it so in the example above I did no configuration and can use…

http://s3.amazonaws.com/bucketname/bonsai.jpg

If you do configure yours, use…

http://bucketname.s3.amazonaws.com/bonsai.jpg

So, that was me with Amazon’s S3 installed and working, now on to getting it working with file_column but more about that later.

You’re probably going to find a few photos and accounts of my travels, and you’ll find some techy stuff too – I’m co-founder of Grows on You, a place to find garden ideas. We develop in Ruby on Rails so there’ll be bits of that. You might find the occasional rant about Internet Explorer’s tragic implementation of CSS too, my apologies in advance far any of them.

Eventually I’ll get round to doing my own CSS design for this blog.

Basically I hope you find something interesting, and maybe even useful! If not, my mum says she’ll read it anyway.