March 2008 in the Life of Ben (Blog)

  1. January
  2. February
  3. March
  4. April
  5. May
  6. June
  7. July
  8. August
  9. September
  10. October
  11. November
  12. December

Status of CFG Studio 2 (30th March 2008)

25th of October 2007 was the last time I logged in to GTA Forums. Today I logged in to clarify the status of CFG Studio 2.

It is an editor for handling.cfg and similar files from GTA III, GTA Vice City and GTA San Andreas. The UI is an Excel clone, broadly speaking. Other modding tools at the time seemed to think more textboxes mean better program. I wanted to build the antidote.

Well, other modding tools continued that trend or died. A very notable exception being Collision Editor 2 by Steve M. He was always a class act in GTA modding. This interface was a great improvement over the original version. It makes some mainstream desktop applications you can buy today look like a joke.

CFG Studio 2 remains popular among modders. One of the things I love about making stuff is how it outlasts its creator.

Subscribing to W3C PFWG (28th March 2008)

Henri Sivonen and I discussed aria-posinset and aria-setsize on #whatwg today. He suggested I send feedback to the PFWG’s public mailing list for comments.

I used the web interface to read some messages and get a feel for the list. Jgraham was confused by the absence of a Subscribe link and so was I.

  1. Found Participation in PFWG but this covered different lists.
  2. Found a wonderfully concise set of instructions at the obscurely named W3C Mailing List Administrivia.
  3. Created a message to with the Subject set as subscribe. Just in case a human got involved, I included some text in the body:

    My W3C username is bmillard. I would like to subscribe to <>.

    Ben ‘Cerbera’ Millard
    Collections of Interesting Data Tables

    My participation in HTMLWG is how I already had a username.

  4. Sent it at 4:10pm today.
  5. Received message with the subject CONFIRM snumber at 5:14pm today.
  6. It asked me to send a blank reply to confirm my subscription.
  7. I did so and am now subscribed to the list.

Outlook Express is my mail client. To separate PFWG mail from everything else:

  1. I right-clicked the Inbox entry in the Folders sidebar.
  2. Selected the New Folder
  3. From the menu bar, I selected Tools > Message Rules > Mail.
  4. Clicked New.
  5. Ticked Where the To or CC line contains people.
  6. Ticked Move it to the specified folder.
  7. Clicked the contains people link.
  8. Typed pfwg
  9. Pressed Return to add it.
  10. Pressed Return to confirm the window.
  11. Clicked the specified link.
  12. Selected the Public PFWG folder.
  13. Clicked the OK button.
  14. Set the Name of the rule to Public PFWG Redirect.
  15. Clicked the OK button.
  16. Clicked the OK button.

Rather fiddly. I have a similar setup for a Public HTML folder.

Finally, I sent Structured HTML Precludes aria-posinset and aria-setsize? as my feedback.

So far I am only receiving mail sent to the list if it includes me in the To field.

100% in GT3 (27th March 2008)

Today I completed the last event in Gran Turismo 3. Turns out you need to beat the gold-medal demonstration lap in a series of Time Attacks in the Arcade Mode.

For the past several races I’ve been running with all the electronic aids turned off. Makes the racing much more demanding, for sure. But the tyre physics are so well simulated and I know the tracks so well that this extra challenge is quite welcome. Powersliding the TVR Cerbera Speed 12 throughout the Trial Mountain endurance race was particularly memorable.

There seem to be several different cars you can win from each championship event, or the same car in different colours. So now I’m going through my favourite championships again with a car significantly slower than the AI use. Idea being that I won’t win every race this time so winning the championship will be tough and I should get a different car.

The lifespan of any game in the Gran Turismo series is incredible. Was totally worth buying a PS2 just for Gran Turismo 3 and 4!

Ian Hickson Compliments a Noob (25th March 2008)

Ian Hickson has continued working through table feedback. He and I discussed my research on #whatwg. What is the best markup for dialogue? Here are a few different ways:

My new favourite is <blockquote><table> with <th> for author and <td> for message:

Hixie:i don't believe i've ever looked at so many tables before :)
Hixie:i ended up covering two whiteboards with little table diagrams
BenMillard:I can well imagine!
BenMillard:I think I looked at thousands overall because I wanted to see how consistent each site was
Hixie:thanks for that, it made my life much easier :)
BenMillard:I'm happy to be useful. not bad for a noob :P
BenMillard:what specifically did you find useful about it? was it just having links to lots of genuine data tables in one place?
Hixie:that was a big part of it
Hixie:but also your analyses were useful to clue me in to what was important and useful
Hixie:also your stats were very useful as a way to quantify the qualitative experience of the many tables and the anecdotal impression of the distribution of the types of tables
BenMillard:that's good to know. if/when I do more research, I'll concentrate the resulting document(s) on these useful aspects

<blockquote><dl compact> would be OK. Creating <dialog> seems a bit overkill.


Barely a year ago I had never studied markup. 2 years ago I was completely convinced that “Appendix C” style XHTML was the answer to everything. But now I’m being complimented for studying an issue around HTML5.

When people change their ideas for the better, I think it’s called growing.

ARIA and Clever Use of HTML4 (24th March 2008)

Mozilla’s #accessibility IRC channel is used by Aaron Leventhal, Marco Zehe and various other Mozilla access developers. For the past couple of days, I’ve been there as well.

ARIA Example

Marco Zehe blogged about using aria-labelledby and aria-describedby, ending with this markup example:

<form action="post.php">
<span id="labelShutdown"><label for="shutdownTime">Shut down computer after</label></span></p>
<input name="shutdownTime" id="shutdownTime" type="text" value="10" aria-labelledby="labelShutdown shutdownTime shutdownUnit" aria-describedby="shutdownDescriptor"/>
<span id="shutdownUnit"> minutes</span>
<div id="shutdownDescriptor">Allows you to specify the number of minutes of inactivity after which your computer should shut down.</div>

I added a name attribute to make it a successful control and corrected method to action.

The labelling text gets assembled in this order:

  1. Shut down computer after
  2. 10
  3. minutes

With this as a description for the control:

Allows you to specify the number of minutes of inactivity after which your computer should shut down.

An entirely reasonable form design. But rather a lot of fiddly markup?

Clever Use of HTML

The semantics for this example seem available in HTML4. By my reading:

  1. Implicit form labelling lets you put <input> inside <label>.
  2. <fieldset> groups things together.
  3. <p> is for paragraphs.

So how about this markup, without using ARIA:

<form action="post.php">
 <label>Shut down computer after <input name="shutdownTime" type="text" value="10"> minutes</label>
 <p>Allows you to specify the number of minutes of inactivity after which your computer should shut down.

You could replace the <p> because:

  1. title provides advisory information for humans to read.

So how about this markup, without the <p>:

<form action="post.php">
<label>Shut down computer after <input name="shutdownTime" type="text" value="10" title="Allows you to specify the number of minutes of inactivity after which your computer should shut down"> minutes</label>

As the <label> contains all the components a <fieldset> seems unnecessary. Simple, decade-old structures from HTML4 seem fine for the semantics this example needs.

Copy Editing

The descriptive text here seems redundant due to the excellent <label> text:

Allows you to specify...
The <input> is not readonly.
...the number...
A number is already present in the <input>.
...of minutes...
Already in the <label> text.
...of inactivity...
Not made clear from the <label>. We can adjust the <label>, though.
...after which your computer should shut down
Already in the <label> text.

Leaving us with this:

<form action="post.php">
<label>Shut down computer after <input name="shutdownTime" type="text" value="10"> minutes of inactivity</label>

But Wait, There’s Less!

type="text" is the default, allowing this:

<form action="post.php">
<label>Shut down computer after <input name="shutdownTime" value="10"> minutes of inactivity</label>

As a crude measure of complexity, the ARIA Example uses 490 bytes. This sample takes 135 bytes, 72% less markup.


Full accessibility and usability (apart from browser bugs) can be achieved in this example with simple markup from HTML4. Which is good news for everyone.

Marco has written a follow-up to the ARIA example. I expect there are examples where HTML4 would not be enough and ARIA would fill that gap.

Good Devices are Invisible (23rd March 2008)

Metal cutlery is a good device. Using it makes eating easier once you develop basic coordination and motor control. You don’t even realise you’re using it.

Plastic cutlery is a different story. It rarely fits nicely in your hand due to thick reinforcing beams running along all the outside edges. Despite these, it will bend and flex alarmingly when trying to eat. The knives are usually blunt and if you use more force they are liable to snap.

Eating becomes a worrisome balancing act between making progress through your food and avoiding mechanical failure. Bad cutlery turns a simple meal into a Grand Prix endurance event!

A good device like the metal cutlery becomes invisible because it works for the user. A bad device like the cutlery becomes obvious and annoying because it works against the user.

This applies to all devices. The difference can be as simple as choosing a different material. In software, it can be as simple as using a different control for a particular action.

Eurosport Owns Le Mans (18th March 2008)

Several days ago, British Eurosport’s Motorsports Weekend announced they now own the rights to covering Le Mans for the next 3 years!

I remember the coverage they gave when Bentley won the GTP class and finished 3rd overall, after a 70-year absence from the event. Eurosport commentators really get what the sport is about and what makes it fun to watch, as well as being huge fans of the events themselves.

Aston Martin are in various racing events, including the Le Mans 24 Hours and the Le Mans Series. The most competitive vehicles from Peugeot and Audi are now turbo-diesels.

I’m really looking forward to this!

Zoe and Sarah Tie the Knot (15th March 2008)

The 3rd wedding I have ever attended was today. My half-sister, Zoe is now in a Civil Partership with Sarah. Apparently the Church of England thinks this isn’t a marriage. Everyone else does.

At the party afterwards I gave a speech, something along these lines:

It is said that the path of true love never did run smooth. I think it’s fair to say it’s been a bit of a bumpy ride for Zoe and Sarah. [Thankfully people chuckled at this.] But they’ve stick together, though the hard times and the good times.

They have built a life together. At the end of the day, I think that’s what marriage is all about.

Let’s celebrate the life they’ve built; the life they now share. Long may it continue. To Zoe and Sarah.

[Audience applauds.]

The shortness was to minimise my chances of messing it up. Drinking 2 double “Barcardi and Cokes” during the preceeding hour or two helped to steady my nerves. I was relieved the happy couple liked it since I had kept its contents a surprise.

Accessibility Interest in HTMLWG (11th March 2008)

Only 2% of HTMLWG Participants had recorded their interest in accessibility by May 2007. 4.5% have now done so.

Recorded interest has more than doubled from from 2% to 4.5% over the past 10 months.


Background and Expertise Section

20 Participants, reordered alphabetically by last name:

  1. Chris Adams
  2. Denis Boudreau
  3. Laura Carlson
  4. Joseph D'Andrea
  5. Eric Daspet
  6. Ivan Enderlin
  7. Henrik Dvergsdal
  8. Karl Groves
  9. Thomas Higginbotham
  10. Bhasker V Kode
  11. Murray Maloney
  12. Charles McCathieNevile
  13. Ben Millard (me)
  14. Joshue O Connor
  15. Debi Orton
  16. Gregory Rosmaita
  17. Samuel Santos
  18. Justin Thorp
  19. Jason White
  20. Matthew Wilcox

Tasks Section

2 more Participants, reordered alphabetically by last name:

  1. Thomas Bradley
  2. Darren West

Other Sections

0 Participants in the other sections.


Silent Majority?

At the previous count:

Applying that idea to the current numbers:

If this is true, interest has risen by 50% from 12% to 18% over the past 10 months.

Related Groups

WAI interact with HTMLWG. This count only includes Participants within HTMLWG.


Only 2% last time and 4.5% this time actually recorded an interest in accessibility.


Please include “access” in your entry to any section of that survey if you are interested in usability for people with disabilities. Then your interest will be included in my next count.

If you have no interest accessibility but your name is counted here, contact me and I’ll correct this entry.

Tutorial Index Rethink (9th March 2008)

Back in May 2007 I realigned the index of tutorials for GTA for compactness. This seemed like a good idea at the time. The result was a blob of links for a selection of tutorials and another to all the categories. Impossible to scan through or locate to a specific tutorial.

Compactness versus Comprehension

Scrolling is easier than navigating between pages, so now:

More scrolling, definitely. But now:

The same changes have been applied to edition index pages.

Copy Editing

Descriptions were often rather long and fluffy, so I’ve written them again. The steps I went through for one of them:

  1. An article about why making new cars to the correct dimensions is important.

  2. An article about why making new cars to the correct dimensions is important.

  3. Making new cars to the correct dimensions size is important.

  4. Making new cars the correct size is important affects their performance.

  5. Making new cars the correct size affects their performance.

It now summarises what the article describes in 59 characters. Microcontent ftw.

Building Accessible School Websites (9th March 2008)

Another person who wants to make a living by making websites the right way e-mailed me some questions about my work with Calthorpe Park School. The person is OK with me blogging the conversation as long as I anonymise their part.

I did the work [on my school website] for free because it was so simple.

My work with Calthorpe started for free, too.

Anyway - here it is: [website address]

Looks nice. Intuitive to use. Good markup. Well done!

So now, a couple of years on, a particularly stroppy mother at the school has basically said that it’s all crap and that we need to have a forum on there for parents (which she wants to administrate)

Definitely a troll.

should be looking at this site for inspiration and that she's getting a quote from the guys who did that site to update our school site. I think you can pretty much imagine my reaction when I took a look at that school site

Looks nasty. Nasty to use. Nasty Markup. Nasty.

They have loads of students’ work, which is a very cool thing.

(They rely on frames. I can’t link to their pages sanely.)

The underlying URLs are less nasty than I feared. But still nasty. How does “Biscuits, Speed Project, Tudor, Exploration & Space” become /5/2008/1.html? /work/year5/art/biscuits makes more sense, imho. With a breadcrumb trail on the resulting page so you could reach the index for each level in the URL, naturally.

Hmm, now I’m the one rambling...

I’ve suggested that if they want a forum I’ll install Vanilla

Your first thought was to use Vanilla? Not Invision or phpBB? A [person] after my own heart! Are you single? :-P

Firstly - my personal opinion is that a forum on a school website is a bad idea - it could turn very nasty. If a parent administrates it then it'll turn into a forum for their opinion, not the school. Was this an option that Calthorpe ever thought of and maybe discarded?

I think nobody has asked for an online forum.

We have various parent-run liason groups, such as the Calthorpe Park School Association. More recently, there are plans for a Parent Forum Group.

Our school has about 1,000 pupils. So if 10% of parents want to be active, that’s 50 people to run groups and host meetings. Since all their kids go to the same school, they all live in the local area. This makes meatspace a fine choice for them. It also makes things more social than teh Intrawebnets.

Even with a fully illustrated manual done especially for her she does irritating things such as not providing a decent link text on downloadable documents (just the document name which means nothing!).

Have you put this manual on your website for public viewing? Maybe other people will find it through web searches and share their experiences.

Do you update the Calthorpe site or do they do it themselves via a CMS?

I make all the pages.

Various staff members provide content which goes to Warren Brand, the Assistant Head for Systems & Data. He used to maintain their old website and has been a tireless champion for making it better. He was on board with the accessibility stuff from our 1st meeting.

Each page has its main content in an HTML file. Some PHP is included before and after each file to create the header, breadcrumbs, navigation, sidebar, archive links and footer.

If you update it - do you charge a flat rate per month/year or do you charge by the hour?

Initially for free. But in 2006 Warren decided the time had come to make it a professional arrangement. He even got me backpaid for the work I had done since late 2005. :-)

I’m contracted at a flat rate per week initiall 3 hours per week, which multiples less than what I did. Now it’s 6 hours per week which is often less than I do. It helps fill in what I missed in the early days. It goes through their accounts via the Finance department (about 3 people staff it) with forms and paperwork and stuff.

I am registered as a Sole Trader with Public Liability Insurance valued at £1,000,000 which costs me about £50 per year.

Accessibility is a Solved Problem (Almost) (8th March 2008)

The infrastructure is already in place:

The big stuff has been figured out. Some details still need work:

There is an ever-diminishing place for:

This is the big picture for accessibility, as I see it.

Trying IE8 (7th March 2008)

Refreshing Sage today showed quite a bit of activity in the blogosphere. I soon noticed IE8 has been released.

IE Blog Entries

From earliest to most recent:

Internet Explorer 8 Beta 1 for Developers Now Available
Overview of the main changes developers should be interested in. Along with the smallest possible link to where you download it.
IE Beta Feedback
  • There will be a newsgroup open to all.
  • Microsoft will chose who can transfer that feedback into the bug tracking system.
  • Everyone can view the bug tracking system...if they register with a Microsoft service first.
Why Isn’t IE Passing Acid2?
Because the unofficial copies of the test are incompatible with their security precautions.
IE and IP Licensing
The new features are free to use and the new formats are free to implement.
Activities and WebSlices in Internet Explorer 8
Microformats and Feeds but different.
IE and JScript
More about scripting performance.
IE and CSS 2.1 Testing
Perfect tone making all the right noises. Plus the release of several hundred test cases.
The Default Layout Mode

“Internet Explorer 8 will use its most standards compliant mode, IE8 Standards, as the default when encountering standards content.”

The 3 layout modes are named and given values:

  1. Quirks
  2. IE7 Standards
  3. IE8 Standards


Eric Law has an Enhance IE8 page up already. It includes a quick way of reaching the download links:

Getting and Using IE8

I’m writing this up as a UI review of IE8 Beta 1.

Looks like this was the perfect month to take time off work!

Zoe’s Birthday (7th March 2008)

My sister is now 27 years old. We went to a place I’ve not been to before. I had the spicey chicken wings as a starter followed by 10oz sirloin steak finished off with a caramel banana sundae.

The chicken and the sundae were outstanding. Neither are things I eat very much. This might well be the first time I’ve ever had banana ice-cream. The Boston HTMLWG F2F has turned me into a gourmet! Well, almost.

What Ben Millard would like from CSS3 (5th March 2008)

(Lengthy reply to Tell the CSS WG what you want from CSS3. I’m likely to revise this entry as it’s a quick scribbling of ideas to make the 10th March 2008 deadline. Discussion takes place on the www-style mailing list and the CSS Working Group Blog.)

Big Picture

The things most relevant to my perspective as an author are:

Widespread Implementation of CSS2.1 Features

CSS2.1 defines a lot of really useful things. If only implementation was widespread.

CSS2.1 Selectors

These would allow me to use fewer class attributes:

Tabular values of the display Property

Would help with ease, accuracy and robustness of layout:

As an example, Calthorpe Park School’s layout mixes a combination of:

We shouldn’t need brain surgery for this effect! Tabular display ftw.

Review of some CSS3 Features

Multiple Backgrounds per Element

Enable much tidier markup for highly graphical and flexible layouts, such as Tower College and Umbel. Currently requires lots of <div class> or <span class> to layer all the necessary images.

CSS3 Selectors

Interesting for simplifying markup. Alternate table row styling, borders and backgrounds in nested navigation lists and other groups of specially styled elements, too.

The table of CSS3 selectors has “Meaning” as a column header. A paragraph after the table says each entry should have “Matches” added before it. The header column should be “Matches”, not “Meaning”? The terms “Pattern” and “Matches” are often used in RegEx and other pattern-matching systems, adding a familiarity bonus.


Shorthand properties in Level 3 seem more confusing than need be. Perhaps you should gather feedback on what authors would actually use these for?

Simple shorthand should make the common cases easy. Using the properties individually retains support for all complex cases. Much like the CSS2.1 border properties.

CSS3 Color Module

Having all colours in one CSS specification is convenient. Especially the named colour keywords.

Grid Positioning, Advanced Layout: Template-based Positioning, Perhaps Others

Widespread implementation of display: table-*; would make much of this redundant?


I’m unsure if the suggested solutions here are the best available.

Horizontal Gaps in %-based Layouts

At the moment, I have to:

Setting width as x% minus yem would enable slightly less markup, slightly more robustness and other slight gains.

Table Cell Width and Text Alignment (Columnar Styling)

In the January GCSE Exam Timetable, I have these columns:

  1. Long names of exam papers, aligned left and made as wide as possible.
  2. Names of locations, aligned left.
  3. Times, aligned right. (3 columns.)
  4. Shortened examining board names, centered.
  5. Exam codes, aligned left. (Various mixtures of letters, numbers and punctuation.)
  6. Number of entries, aligned right.

I currently use lots of class attributes. I’ve seen it done other ways. It’s a perennial issue.

How about table markup like this (but without the comments):

<table class="prose">             <!-- Contains long text -->
 <caption>Timetable for <acronym title="General Certificate of Secondary Education">GCSE</acronym> Exams, January 2008</caption>
 <colgroup class="main">          <!-- Exam names, important -->
 <colgroup>                       <!-- Left aligned locations -->
 <colgroup span="3" class="time"> <!-- Right aligned times -->
 <colgroup class="board">         <!-- Centered exam boards -->
 <colgroup>                       <!-- Left aligned exam codes -->
 <colgroup class="number">        <!-- Right aligned numbers -->

No other class attributes would be present throughout the table.

The relevant CSS would be like this:

/* - Data Tables */
table.prose {
 width: 100%;
table.prose .main {
 width: 90%; /* Minimise the width of other columns */
thead th {
 text-align: center;
tbody th {
 text-align: left;
table .number, table .time {
 text-align: right;
table .board {
 text-align: center;

So <colgroup class> would set the styling for these columns. But it would be overriden by styles set on more specific elements, such as the <th> elements. Somehow.

The more tables a website has and the bigger they are, the greater the advantages of columnar styling.

Simplify the Language for Authors

A lot of new properties apply an image to the background of an element in different ways. There is a proliferation of side-by-side layout properties, too. They will not make authors’ lives easier, afaict.

We can set multiple backgrounds on an element using the general-purpose extensions to background. We can create side-by-side layouts using CSS2.1 features such as float, position and display.

Consider how much success HTML gains from trying to be simple for authors...and how much confusion still arises! Contrast that with the complexity of and overlap between all the features and syntax CSS Level 3 proposes.

Reducing the Number of Images and the Amount of Markup

Drop Shadows, Other Shadows

(Specific feedback as requested in CSS Drop Shadows.)

Sometimes, the shadow is cast by more than 2 edges. For example, the outer edges of Kainos’s layout and around photos in its main content. The footer on Umbel has a tall, strong shadow below with faint, thin shadows either side. They are joined with a curving, narrowing, faintening shadow. Each icon in the footer and the navigation list has a very soft, even shadow around its whole circumference.

Designers usually want shadows to look exactly as their visual shows. They drew them so I don’t have to guess and browsers need not figure out a sensible default.

Hard edges ruin the effect of soft drop shadows. They are better as graphics, at least in professional designs.

Using alpha-transparent PNGs with border-image would make box-shadow redundant. In turn, multiple background-image per element makes border-image redundant. They are equal in terms of markup optimisation, afaict.

So why have box-shadow? I can’t think of a reason.

Graphical Borders

I did the borders on Umbel by adding extra elements via Javascript. Each one is sized, positioned and given a background-image from the main CSS. I’ve seen it done other ways, all require adding extra elements one way or another.

I think multiple rectangular portions of a single graphic applied to the main containers would be best for this. No need for border-image and related attributes.

Selecting Rectangles from an Image

Each background-image and border-image requires a separate image file, afaict.

Selecting rectangles from an image allows all decorative graphics to be taken from a single image file. The markup can be as minimal as border-image would enable. A single HTTP transfer would download all the decorative images for that page (or for the whole website):

It is used in the UI for Mozilla and its extensions is similar to CSS Sprites. But selecting specific rectangles of an image file allows infinite variations in the size of the element without other parts showing up. This removes the need for empty space in the image file, reducing filesize.

You might spread decorative graphics across up to 3 images:

for regular patterns along with alpha transparency effects, such as drop shadows.
for photographic decoration such as “smiling people”.
for low bit-depth decoration such as icons or simple repeating patterns.

This would maximise image compression at the expense of 1 or 2 HTTP requests. If all your graphics are handled fine by one format, you’d only need 1 image.

Adding content images and graphical headings with <img src alt> would remain, of course.

Notes about Authorship of Examples

I was involved in making each website I’ve given as an example. I have a maintainance contract with Calthorpe Park School. I do not maintain the other websites.

Haircut 4 (4th March 2008)

Same place and style as my previous haircut in October 2007, quarter of a year ago.

Month Off (4th March 2008)

My boss of awesomeness, Phil Smears, has agreed to reduce the amount of work he sends me from sdesign1 for this month. This lets me resume numerous side projects.

Making some of these side projects pay me is one of those side projects. Even just a little bit would make working on them much more sustainable.

Busy professionals want to help web standards and open source projects but can’t take time out of their lives to do so. If I’m successful in getting sponsorship, helping other people get sponsorship is something I’d like to do.

Flippin’ Wardrobe (3rd March 2008)

A 90° rotation of my wardrobe has made my bedroom a lot easier to get into. Before, you had to kind of waltz between it and a low worktop.