Category: geekage

I couldn’t seem to find this in the Movable Type manual, but here’s the code that produces a Recent Comments list in the blog sidebar:

<div class="module">
<h2 class="module-header">Recent Comments</h2>
<div class="module-content">
<ul class="module-list">
<MTComments lastn="6" sort_order="descend">
<MTCommentEntry>
<li>
<a href="<MTEntryPermalink>#c<$MTCommentID
pad="1"$>"><$MTCommentAuthor$></a>
said &ldquo;<$MTCommentBody remove_html="1"
trim_to="100"$>&hellip;&rdquo;
</li>
</MTCommentEntry>
</MTComments>
</ul>
</div>
</div>

A while back, Bruce Lawson and James Craig wrote hAccessibility, about the abbr design pattern and potential problems that it raises for people who browse the web with screen readers. Since then, there has been some useful discussion on how to make microformats more friendly to screen readers, which is great.

Continue reading microformats and accessibility

Last year, after @media, a group of us met up in Greenwich on Saturday morning. I gave a rough guided tour, including the history of the Royal Observatory, John Harrison’s chronometers, the adoption of standard time and ended it all by opening up the 28-inch refractor.

If there’s interest, I’ll do it again this year. Leave a comment below if you want to come along.

I’ve been meaning to post this for a while – revish, a social networking site for book lovers, has been launched by the very excellent Dan Champion. You should all go and sign up and talk about books that you’re reading.

Oh and come to the 33rd Amnesty book sale, Saturday 16th June 2007, Church of the Ascension, Dartmouth Row, Blackheath SE10, and buy some more books to read.

Ever wondered how to draw a Fibonacci spiral using only CSS and JavaScript? Well, wonder no more. If you want to change the amount of the spiral that’s visible, add a parameter ‘scale’ to the URL. Well, it’s actually an approximation to a spiral made by drawing sections of circles, but who’s going to notice? (Fibonacci number generator found at LiteratePrograms.)

Here’s a simple logarithmic spiral. Change a and b in the URL to alter its appearance. It becomes quite dull as b approaches 0. Update: try pressing the cursor keys while looking at the spiral. Negative values of b are kind of fun.

Judge for yourself which of these spirals best represents a nautilus shell.

We’ve now rolled this out across the National Maritime Museum’s collections pages. I think it looks rather nice.

There’s an example page on this site, using one of my photos from Flickr. It fixes an annoying bug in Opera, which doesn’t fire onload events for images loaded from the cache. Consequently, the setup code never ran in Opera, meaning the ‘zoom on/off’ link never did anything. Until I discovered the magical img.complete property. I’m not sure it’s a standard DOM property for images, but it does the job. Opera users can now enjoy the rich JavaScript goodness, rather than looking enviously at the users of web browsers which actually work.

I’ve added keyboard support, since device-independent control is a AA accessibility requirement*. You can focus the control with the tab key. While it has focus, the cursor keys move the magnifier, not the browser window. Shift+cursor keys move it around faster (thanks to Dan Champion for suggesting that improvement).

It supports simple, inline HTML in the popup notes now too – basically, embedded images, links and simple text formatting. I can’t decide if it would be neat, or just plain annoying, to have a note that played an embedded audio clip when it appeared.

The Museum’s trustees are very impressed by it – go me!

*Wouldn’t voice control be cool? Like that bit in Bladerunner where he examines the photo of the bathroom – “Pan left. Stop. Enhance.”

Had a chat at the War Museum last week, in which we talked (among other things) about the difficulty of making large paintings available in detail over the web. This afternoon I knocked together a quick magnifying glass, using CSS and the DOM-Drag javascript library. The code behind it is pretty crappy at the moment (it’s a rehash of the magnifier I wrote about 4 years ago) but I think it looks promising: The British Power Boat Company.

This week, I’ve been mostly grooving to Stevie Wonder…

I had the good fortune to hang out, briefly, with Chris Heilmann after the London Web Standards Group meet-up this week.

As we stood outside the pub, a very nice, but rather inebriated, young lady staggered past with her friends, looked at Chris and went, “It’s Simply Red! I want my photo with Simply Red!”. I laughed at ‘Mick Hucknall’ until she turned, stared hard at me and said, “You. You’re that guy. You know the one. That one. The lady in red.” I stopped laughing, but I let her take her photo with me. A gentleman always accedes to a lady’s requests.

Chr*s de f*cking B*rgh my arse!

The new Maritime Museum prints catalogue is now live. I’m quite proud of this – all of the HTML, CSS, SQL and backend coldfusion code was written by me. Except for the layout, where I used a modified version of Yahoo grids. I also built the SQL server 2000 database which lies behind the site, and is populated by legacy data from some rather large structured text files. The site uses a strict doctype, valid HTML, CSS for layout as well as looks and all of our prints records are now open to Google, via the magic of Google Sitemaps. I’ve also thrown in a little bit of unobtrusive JavaScript, courtesy of a free copy of Jeremy Keith’s DOM scripting book, which I blagged at Geek in the Park.

Oh and did I mention that the 20,000 images are served from our internal image server, again with a bit of coldfusion/Samba magic that I set up? I love getting a chance to do this sort of stuff.

The item level catalogue template uses a table to hold the actual catalogue record. “That’s funny”, I hear you say, “surely a record like that is actually a definition list?” Indeed, I thought that too, and you can see an early version of the catalogue record page in which I did use a definition list, styled with CSS to look like a table.

However, I sent that round a few friends for comment, and pretty much the first response I got was “Why on earth are you using a definition list?” Screenreaders, you see, don’t handle definition lists very well. Consequently, screenreader users find them very frustrating as they have to sit through the reader announcing the whole list, along with guff about whether it’s reading a term or definition. With a properly marked-up table, on the other hand, a screenreader user should be able to jump from one record heading to the next, without listening to the table data unless they want to. So the live site has a table.

Things I learnt from this:

• You can do some pretty powerful things with CSS.
• Just because you can do something, doesn’t mean you should.
• Semantic purity does not necessarily guarantee accessibility. In this case, accessibility wins and we use the solution that doesn’t raise barriers for assistive technologies.