Just spent a great day at a workshop run by Heather Champ and Derek Powazek.

It’s become a bit of a tradition to spend the last Thursday and Friday of September in Sydney for Web Directions South and this year’s no exception. Usually C and I add a few days to the gig and see some of the sights (or, at least, the shops) while we’re there. This year with work pressure and so on it’s going to be a whistle stop visit. In on Wednesday afternoon and out on Saturday morning. A shame but there you go. It’s been a good year for travel this year and my carbon feet are certainly feeling a bit big for my boots.

With the advent of applications such as Brightkite and Twitter bots, people are starting to Tweet what are, essentially, machine data via Twitter. It occurs to me that a prefix of “#m” for example before the data would allow Twitter clients to ignore the information or re-purpose it into a more meaningful message, in much the same way that Flickr hides machine tags.

Calling all Auckland web types! The wonderful folks at Webstock are organising a nationwide series of workshops and mini-Webstocks in the coming months starting in Auckland on May 5 and 6 with Andy Budd and Tantek Çelik, then Garr Reynolds of Presentation Zen fame in late June.

Ludwig and his team at Botany Downs Secondary College come through again. Sign up now for Barcamp Auckland 2 immediately!

Liverpool through to the Champions’ League semi-finals. Excellent!

Wouldn’t it be cool if you could search video or still images by sketching a rough shape from a scene and having a search engine identify all frames that contain that geometry?

A change is as good as a rest, so they say. So here I am changing wasabicube again in the quest for the Holy Grail of layout and design satisfaction. You’ll notice the adoption of slab serif in the logotype. You’ll notice the relative minimalism. You’ll notice the serif in the body content. All changes from the previous design.

Whether they know it, or not, everyone attending is an expert at something and has the opportunity to present and generate the content. The schedule emerges at the start of the day and the fun begins – the more attendees, the more content and the more discussion. This is going to be a great day! Register now! [Aside—Yikes! A post!]

The time for an Intel Mac is at hand and I’m caught in a couple of quandries; MacBook or MacBook Pro; buy now or wait for Merom?

Another long spell between posts (I’m going to have to work on some sort of New Year’s resolution about this posting malarkey). This time we have the heat of a mid-December Auckland to thank for it.

It’s been a hectic few weeks, hence the lack of activity here at wasabicube. A couple of days after WE05 we started the tortuous process of moving house. Even though the move was only a short distance it never fails to amaze me just how much effort and upheaval are involved. Nevertheless, we’re installed now and very pleased with the new place.

I’ll post more about Web Essentials but that will have to wait until I get a clear spell to regather my thoughts (they seemed quite gathered just prior to the move – must have packed them away by accident). In the meantime, check out the fantastic WE05 Deep Remix and WE05 Upbeat Remix (music courtesy of the multi-talented John Allsopp)! If you were there you’ll be transported straight back, and if you weren’t you’ll get a very quick feel for what WE05 was all about. Superb!

World Usability Day

Tomorrow (Thursday) is World Usability Day. For those of you in Auckland, the Auckland UPA presents Open Your Eyes to Usability! (Via Justine at Userfaction)

WE05 was a real blast – so many talented speakers and delegates and so many insights and ideas flowing that my head is full of a great, buzzing, excitement for improvements to both wasabicube and to the Web applications and site at work.

The highlights were many; I was able to meet with some of the individuals that have been a huge influence to me over the years such as Eric Meyer, Doug Bowman and Jeffrey Veen and to be inspired by the likes of Molly Holzschlag, Kelly Goto, Tantek Çelik and Derek Featherstone to name but a few. In addition, it was a great opportunity to put faces to the names that I’ve come to know through the Web Standards Group and other nooks and crannies of the Web.

My hopes for live posting from the conference were dealt a blow by the WiFi connection requiring Windows users to disable all their security software before being able to establish a connection to the University network. Yeah, right! So it was with some envy that I watched the (large number of) Mac users blogging live. Should have brought C’s iBook along – so it goes. I was left with pay by the half-hour access from the hotel, so my last post and posts to Flickr were rather hurried, frantic affairs – minimal tagging, pithy descriptions and so on.

WE05 was all I expected and more. Starting with Jeff Veen’s workshop on Wednesday; a full day delivered with incredible enthusiasm and humour that has turned my thinking around to figuring out how we can build user-centric applications rather than our current product-based approach.

The conference proper began with an excellent keynote address by Molly Holzschlag on the State of the Web and was followed by a full programme of tremendous quality. Particular highlights for me were Jeff Veen’s presentation on Designing the next generation of Web apps, Doug Bowman’s incredibly inspirational presentation Zooming out from the Trenches, Kelly Goto’s Web Redesign: Workflow Redefined, Tantek Çelik’s discussion of microformats and Eric Meyer’s demonstration of Rapid Design Prototyping with Standards.

As I said, the quality of the presentations was outstanding, so it’s very hard to pick out the highlights. Russ, Peter, Maxine and John, along with all the others behind the scenes, did a fabulous job.

If you couldn’t attend or to relive the experience, WE05 was podcast, flickr’d (and flickr’d some more), Wikied and blogged extensively this year.

I’d absolutely recommend WE06 if this year’s is anything to go by!

This post is (almost) live from WE05 in Sydney, Australia.

Yesterday, we had the pleasure of attending Jeffrey Veen’s Web Essentials Workshop presentation of Designing the Next Generation of Web Apps. A thoroughly engaging and thought-provoking day discussing the issues surrounding the creation of applications for Web 2.0.

On Saturday, 17 September, New Zealanders went to the polls to vote in our three-yearly General Election.

The polls closed at 7pm and over the following five or six hours the advertisers were treated to an opportunity to pitch their wares to the nation during television and radio specials, on several channels, as the results were relayed by breathless presenters to a waiting public.

Just a second! Amid the hoop-la it’s easy to forget that, at the close of vote, the result had been firmly set, but was locked in boxes throughout the country. The so-called “race”, being manically pored over by the political analysts and excited presenters, was actually a commentary on the efficiency of the counting!

The “oohs” and “ahhs” as the results unfolded were, in fact, a slow-motion dissection of the counting skills exhibited by the various electorates. The small, conservative, rural electorates were counted first suggesting the National Party was romping home. After around three hours the totals from the larger, centre-left, urban centres tipped the balance in favour of the incumbent Labour and its allies. Hold the front page!

To their credit TV3 discussed this effect, but State-owned TVNZ’s coverage made it seem like the political mood of the country was changing before our very eyes!

Perhaps it’s the same thing that archaeologists find exciting about the painstaking uncovering of an ancient site. The thrill of a very slow chase but without the advertising dollar!

In the event the provisional result has been pretty much a tie between the major parties (both receiving around 40% of the vote), with their abilities to form workable coalitions with the smaller parties being the decider. That and the results of the around 218,000 special votes that will have been counted by 1 October. We shall wait and see!

Astonishingly a month has flown by. While this partly reflects a recent lack of inspiration to tinker with the wasabicube design, it’s also a symptom that work and home life have not left many gaps to be filled by blogging and photography.

In that light, a recap of the august moments of the month, so far:

Interpol

We had the pleasure of seeing Interpol live at the St James on 2 August and met up with Darren and Amanda there. Darren flickr’d some photos.

Books

A little flurry of Amazon-ordered books has arrived over the last couple of weeks, including:

Professional CSS: Cascading Style Sheets for Web Design

An excellent book by some of the luminaries of the Web: Christopher Schmitt, Mark Trammell, Ethan Marcotte, the now found Dunstan Orchard and Todd Dominey

Thinking With Type: A Critical Guide for Designers, Writers, Editors, & Students

by Ellen Lupton

Getting Things Done: The Art of Stress-free Productivity*

by David Allen (just call me an ass-hat, mouth-breather whydotcha?!)

* what’s the likelihood of me finding the time to finish this book?

I’m expecting Bulletproof Web Design: Creating Flexibility with XHTML and CSS by Dan Cederholm to arrive by the end of the week. If it’s anything like his previous book, Web Standards Solutions, it will be a fantastic addition to the bookshelf.

A List Apart redesigns

A List Apart has launched version 4.0, and it’s a stunning design by the multi-talented Jason Santa Maria along with the likes of Eric Meyer on CSS, Dan Benjamin on CMS, and Erin Kissane & Jeffrey Zeldman on writing and direction.

Over the years A List Apart has played an invaluable role in extending my appreciation of Web design techniques and been a great catalyst.

Design in Flight flies again

Andy Arikawa’s Design in Flight has been resurrected as an online magazine and, it seems, it’s future is assured. Very good news!

Web Essentials 2005

I’m off to Web Essentials 2005 in Sydney, Australia, at the end of September, including a workshop with Jeff Veen from Adaptive Path on Designing the Next Generation of Web Apps. I’m hoping this will give me real impetus with the Web apps I’m developing at work.

Web Standards Group

Darren and I think it must be time to get another Web Standards Group meeting organised in Auckland. Since the last informal gathering in June we’ve had a few more contacts from interested parties, so watch this space – we’re gearing up again!

Google have released Google Moon as a sibling to their Google Maps and Google Earth offerings.

The Moon map is made up from photos taken by NASA during the missions to the Moon in the ’60s and ’70s. The landing sites of the Apollo missions are shown and can be zoomed to reveal surprising detail.

While you’re checking out things lunar, John Perkinson has posted a stunning capture of the full moon.

I’ve been snowed under lately so it’s time for a bit of a recap of a few bits and pieces.

Design In-Flight’s final landing

Andy Arikawa’s excellent Design In-Flight magazine has come to an end. Andy cites a lack of time as the main reason for his decision to call it a day. As a sweetener, though, he’s published a July 2005 Mini-Issue.

Thanks for the great work you did on DiF, Andy, and to the other excellent contributors, it has been very much appreciated and will be missed.

Here’s Dunstan! Oh, he’s gone again!

Dunstan Orchard briefly surfaced to announce that he would no longer be posting to his blog – again, a lack of time being the culprit.

Very generously Dunstan’s made the entire archive of his blog available as a download.

Controversially brilliant

And as we bid farewell to a couple of favourites, we can greet @media 2005 conference organiser Patrick Griffiths’ splendid new (liquid) Vivabit site, designed with Cameron Moll.

There’s been a little flame-war over the design at the Web Standards Awards (best not click the link without putting on your tin hat and your fireproof underwear)!

Ten to midnight, last night (NZST), marked the twentieth anniversary of the bombing of the Greenpeace flagship Rainbow Warrior as it was moored at the Marsden Wharf here in Auckland. The attack was carried out by French Government DGSE agents with the authority of the then president, François Mitterrand, and resulted in the murder of Portuguese photographer Fernando Pereira.

It is interesting to note that this arrogant act of international terrorism went with barely a murmur of condemnation from the leaders of the nations that now call themselves the coalition in the war against terrorism.

More information from Greenpeace New Zealand.

Last night (NZST), at around 10pm, we heard via email of the terrible bombings in London. Initially somewhat muted, I became more saddened and angry as accounts of the events unfolded both on television and from postings by witnesses on the Web. The impressive stoicism displayed by those interviewed underlined the futility of such an attack on Britain. The character and sense of humour of the people under these circumstances comes to the fore. I was also impressed by the lucidity of the Prime Minister, the Home Secretary and of the Lord Mayor of London – none of your trite, wooden, clichéd Bushisms – thank goodness.

My condolences go to those suddenly affected by this tragic event and to the victims of similar, frequent, atrocities in the world’s trouble spots that go, for the most part, without mention.

We had what I think was a successful first meeting to discuss web standards, and related bits and pieces, in Auckland last night. We were fortunate to have ten individuals brave a cool, winter’s night and bring their experiences and opinions of web development with, and without, web standards.

We now have a core of organisers that will be able to make these meetings a regular feature. Excellent!

After some recent enquiries and a lively, international, thread bemoaning the lack of WSG meetings outside Australia (Wellington excepted!), Darren and I have finally taken the plunge and firmed up a date, time and location for an informal WSG meet-up in Auckland.

The gathering will be open to anyone interested in developing with web standards who wants to come along and will have the aim of creating the foundation for a regular, structured, Auckland meeting.

Meeting details

Place

The Belgian Beer Café 136 Hurstmere Road Takapuna Auckland

Date

Wednesday, 22nd June 2005

Time

7:00pm

RSVP

Please email me to express your interest so that we can make sure the venue can cope with demand!

I’ve been handed the Musical Baton by Darren:

Total volume of music files on your computer…

A sad reflection of my sloth at committing my 700+ CDs to hard drive is that I’ve a mere 859.5 MB on the work computer (and I think it’s important not to overlook that 0.5!) — there’s just a little more on the machine at home.

The last CD you bought was…

My memory is hazy, it was either Turn on the bright lights, Interpol or Puzzle, Tahiti 80 (but it could have been both bought at the same time).

Song playing right now…

Ceremony, New Order

Five songs you listen to a lot, or that mean a lot to you…

In no particular order:

• Radio Free Europe, REM
• Us and Them, Pink Floyd
• Knives Out, Radiohead
• Not Even Jail, Interpol
• Crash, The Primitives

It’s amazingly difficult to come up with such a short list, especially with the competing demands of the listen a lot/mean a lot requirement and the sheer variety of music that I enjoy, so this list is representative rather than definitive [Geez, next you’ll be setting the lawyers onto it! Lighten up! – Ed).

An even more amazingly difficult task is coming up with five bloggers whom I know and who haven’t already juggled the baton — so I’ll defer, just like Michael Green, and leave the baton to any Kiwi bloggers who read this site. As that will be a task in itself, and in the interests of symmetry, I will hand the baton on to Darren in the hope that it will encourage him to put something on his site!

Yesterday marked the ten-year milestone for Jeffrey Zeldman’s zeldman.com (if I’m not mixing my spacio-temporal metaphors) – a fine achievement.

It’s six or seven years since I started noting what Mr Zeldman had to say and his message of web standardisation started to influence my day-to-day work. His combination of well articulated argument, practical advice and the ability to aggregate important developments from far and wide has had a strong influence on the world of web development.

While it would be exaggeration to suggest that without Jeffery Zeldman‘s persuasion I’d still be firmly planted in the <table> and spacer GIF school of mark-up, it was he who gave me the early “heads-up” and was the catalyst for change.

Congratulations!

[It should be noted that, in spite of that, an early and long-standing requirement that we support Netscape 3 has meant it’s taken just as long to purge the pre-standards mark-up from some of the products with which I’m involved. Ahem.]

They’re widening the only road onto the peninsula where we live and, it transpires, in order to widen a road first you must narrow it… The works have been going on since October but have come to a head this week. This morning I calculated (as you can when you’re stationary for extended periods) that I was travelling considerably slower than the 1.2km/h that David Coulthard exceeded the pit lane speed limit on Sunday’s European Grand Prix. Yes, an hour to travel 900m – it’s a record! I’m seriously considering getting up half-an-hour before I go to bed…

In other news; comments are now active in the photo section. Still a bit of a work-in-progress and fundamentally requires me to post some photos that are comment-worthy, but an interesting exercise nevertheless.

Liverpool are European Champions again! After an astonishing comeback from 0-3, against AC Milan, in Istanbul, Liverpool pulled back 3 goals in the first seven minutes of the second half. They held on to 3-3 through extra time and won 3-2 on penalties to take the Cup. Having won the competition 5 times this cup will stay at Anfield. An excellent start to the day!

Yesterday I had a request for the site to be available in the state it was in when Andy Budd put it up for inclusion in the CSS Vault back in February last year.

Things have moved on a bit since then, both in terms of my knowledge of CSS and my desire to keep the site fresh. However, by complete coincidence I was lying awake the other night thinking that since the CSS Vault still drives quite a bit of traffic my way I should at least have a mechanism in place to allow the punters to find the site as they’d been lead to expect it. So it was fortunate that when JDM dropped me a line that the wheels were already in motion.

So, without further ado, here is a facsimile of wasabicube version 3.0!

In order to get the “look and feel” of v3.0 I’ve hidden the sidebars that are now part of the wasabicube furniture, so until I formalise something for v3.0, you will need this link to get back to version 6.0.

Please note that the CSS used differs somewhat from the original. This is due to structural changes that were made to the markup to improve the site’s semantics. There may be some areas of today’s site that do not render perfectly with the version 3.0 CSS.

I may try to get version 4.0 running again, but it relied on a different underlying markup for the navigation (suffering fairly heavily from div- and class-itis). Anyway, watch this space.

Recently, Jason Kottke implemented a CSS/DOM drop-down list on his home page to tie in with some AJAX-served content. Unfortunately the drop-down suffered from a distracting flicker when viewed with Firefox. I decided to investigate the problem and come up with a flicker-free solution. The result is a rare wasabicube article.

Royale with cheese

Mike Brown of Signify has just put up a copy of his recent presentation designed to convince web site managers and people who commission web sites — especially in the New Zealand government sector — of the value of a web standards-based approach.

The presentation uses Eric Meyer’s S5: A Simple Standards-Based Slide Show System. As an additional bonus, if you print out the presentation or view it with print preview, there are speaking notes for each slide.

Memory games

Finally after months of good intentions, I’ve revamped the presentation of the links page. It now boasts a cookie-based memory of which topic areas you were last looking at and a new graphical treatment for both the wasabicube v6.0 and wasabicube v5.0 skins.

Background

This article was inspired by Jason Kottke who recently installed a CSS- and DOM-based drop-down list on his homepage.

The approach taken is that the list, a <ul>, is initially declared with display: none; in CSS. A block element (that represents the ‘landing zone’) has a DOM call attached to its onmouseover event that changes the display attribute of the <ul>’s style to block. The <ul>, in turn, has its onmouseout attribute set to return the style’s display attribute back to none.

The problem

Unfortunately, in Firefox for Windows the drop-down suffers from wild flickering as you move the mouse down the list. This is not ideal and it got me working on a solution …

After a spell of tinkering with my take on Jason’s drop-down list, I established that the problem wasn’t only confined to Firefox but to Mozilla 1.7.7 as well — so it’s a fair bet that it’s a problem on all Gecko-based browsers, for Windows at least (it isn’t a problem on Firefox for BeOS).

The problem appears to be related to the way Gecko handles the onmouseout event. As the mouse is moved down the list the onmouseout event is called for the <ul> even though the mouse hasn’t left the confines of the <ul>. The effect is that the drop-down is briefly hidden then re-shown — hence the flicker. It’s possible it has something to do with the mouse entering the area taken up by each <li> that causes the onmouseout to trigger. In any case there is a solution:

The solution

The answer is to take advantage of the browsers’ innate ability to trigger the showing/hiding of the list via CSS rather than the DOM. This is achieved by using the :hover pseudo-class on a containing block element.

Suppose the containing block has an id of dropdown and the <ul> has an id of droplist:

<div id="dropdown">   <span>My dropdown list</span>   <ul id="droplist">     <li>Item 1</li>     <li>Item 2</li>     <li>Item 3</li>     <li>Item 4</li>     <li>Item 5</li>   </ul> </div>   

We can cause the droplist to appear by setting the following CSS rule:

#dropdown:hover droplist {   display: block; }   

This will reveal the list as the mouse moves over the dropdown element and will remain showing as long as the mouse remains over (the now enlarged) dropdown.

However, there’s just a tiny problem with this scheme! Internet Explorer, bless it’s little cotton socks, doesn’t know what to make of :hover on any element other than <a>, so it ignores it and the drop-down does not drop down.

After much preamble, then, we’re at the heart of the solution. The idea is to use the onmouseover and onmouseout events only if there’s no other choice. This means that browsers that know how to :hover can do their native thing and those that don’t can use the DOM.

So, how do we know if the browser we’re dealing can play dice? The answer is a DOM routine that is called from the page’s onload attribute and a global variable to keep track of whether, or not, the browser knows how to :hover —

<script type="text/javascript"> //<!-- //<![CDATA[   var g_bH = false;    function init(p_strId) {     g_bH = false;     var l_E = document.getElementById(p_strId);     if(l_E && document.defaultView) { if(document.defaultView.<span class="exDesc">⇒</span> getComputedStyle(l_E, 'hover')) {   g_bH = true; }     }     l_E = null;   } //]]> //--> </script>   

(The ⇒ signifies that the line would, but for display considerations, continue on the same line.)

The script shown here would be placed in the <head> block of the page, but could just as well be included from a linked JavaScript file.

The page’s <body> would read:

<body onload="init('dropdown');">   

The code fragment if(document.defaultView.getComputedStyle(l_E, 'hover')) { relies on two things: firstly that the element’s :hover attribute appears in the CSS

#dropdown:hover droplist {...}   

in this case and, secondly, that the browser implements the document.defaultView.getComputedStyle() directive (which IE cannot).

If the :hover declaration is in the CSS and the browser understands then we set a global variable g_bH to record the result. We could call a function every time we wanted to know, but it’s more efficient to set a global since the CSS entry and the browser’s capability won’t change underneath us.

Now it’s just a simple matter of adding the onmouseover and onmouseout attributes to the dropdown <div>:

<div id="dropdown"  onmouseout="if(!g_bH){document.<span class="exDesc">⇒</span> getElementById('droplist').style.display='none';}"  onmouseover="if(!g_bH){document.<span class="exDesc">⇒</span> getElementById('droplist').style.display='block';}">   

Now, when the mouse hovers over the dropdown <div> either the browser will show the droplist <ul> because it is responding the the CSS rule, or set the droplist’s style.display if if can not. When the mouse leaves the dropdown again the CSS rule will be envoked if the variable g_bH is false, or the style.display will be set if not.

See the accompanying example for details of how this could be implemented. Feel free to use this implementation if you find it of any use.

My intentions of posting about all sorts of stuff since we got back from the UK didn’t come to anything. Now, with the deafening clatter of the keyboard, here’s a bit of a re-cap:

Web Essentials 2005

The great news at the beginning of the month was the announcement that Web Essentials 2005 will be on 29 and 30 September and is open for registrations. I didn’t waste too much time testing out the registration process!

WE05 promises to even bigger and better than last year’s exceptional inaugural effort with resentations by the likes of Molly Holzschlag, Eric Meyer, Tantek Celik, Jeff Veen, Kelly Goto, Doug Bowman, and Derek Featherstone. Early-bird registration is available until June 30.

Basecamp

After reading Stan’s article Independent Workflow back in February I decided that I’d been met with a watershed of references to Basecamp and better see what all the fuss was about.

Basecamp is a creation of 37signals, whose brilliant Defensive Design for the Web is one of a handful of essential books for anyone who designs web sites. Basecamp is a project manager with what seems to be, at first glance, very few of the features you’d expect from a traditional project management system (I’m thinking of MS Project and the like here), however, I signed up for the free Basecamp plan, which allows you to have only one project. This was all I needed to get my work schedule in order. 37signals offer several monthly subscription rates that allow increasing numbers of projects and the ability to fully personalise the system.

Initially I didn’t quite ‘get it’ but, as I loaded up my project, started associating my to-do lists with my milestones and automatically updating my Mozilla Calendar from Basecamp’s iCal calendar feed, I had a bit of an epiphany — the approach all started to make sense. Jon Hicks writes about a similar moment &mdash although, unlike Jon, I haven’t been using it collaboratively but I must have hit some sort of milestone-and-to-do-list threshold that caused the penny to drop — I suddenly felt in control.

By all accounts, once you start managing a number of people and allow clients access to Basecamp’s messaging system it all gets rather good.

Check out the two spin-off products from Basecamp: Ta-da Lists and the recently released Backpack. Ta-da lists is a very useful, stand-alone, implementation of Basecamp’s to-do lists — I use it to keep track of personal to-do items — and Backpack is like a personal information manager on the web. You can create pages an include to-do lists, diary entries and images. A neat feature is the ability to set reminders. At the allotted time Backpack sends a message via email or, if your mobile phone service is provided by one of the listed companies, you can get our reminder by SMS.

Malarkey redesigns

Andy Clarke has done a brilliant job of redesigning And all that Malarkey with a special treat for IE viewers! Jeremy Keith will, no doubt, be very happy with the site’s newly found fluidity.

Waxmuseum

For those that follow the fate of the Waxheads, the Waxmuseum is now fully database-driven.

After last week’s game (not because of last week’s game, I hasten to add) Clive, the venerable Waxheads goalie has added himself to the Waxmuseum. Clive announced his retirement after more than 20 years in the team. He will be sorely missed. Luckily, he’s said to be coming out of retirement for this week’s game — but that could have something to do with the a proposal for after-match drinks …

On Monday at 5am we got back from an excellent three weeks in the UK. However, I’m only just pulling myself out of from under the steam-roller of what I assume must be a nasty case of having been lagged by the jet.

On past trips to the ‘old country’ I don’t recall having been lagged quite so comprehensively. However, this time we broke the golden rule of whatever you do, keep yourself awake until the evening and snatched just a wafer-thin, teeny-weeny, seven hour, nano-sleep-ette during the day …

Upshot: late to bed, then sitting up, wide-eyed, eating cornflakes by 3am. Brilliant!

Doug over at Stopdesign has my complete sympathy.

Look what Malarkey’s started!

What’s new?

Another round of tinkering with wasabicube has revealed Version 6 – much less “Aussie” in appearance (no disrespect intended to our friends across the ditch who’re currently destroying us at cricket).

I’ve continued with part of the theme started in Version 5 and softened it a bit. Additionally, the photo pages have a new style with much less ridiculous hover behaviour than before. The previous hover onslaught was intended to remove most of the distractions from the image. When the mouse was hovered over the picture all the usual descriptions, thumbnails etc. would appear. There may well be merit in that approach but I need to refine it somewhat. This will have to do in the meantime.

Many moons after I first used Paul Sowden’s stylesheet changer, it’s back. So if you’re an Aussie or for any other reason, you can still view the site in its Version 5 guise using the button at the foot of the sidebar.

I’m working on an interesting new menu effect but it still needs some refinement to gracefully handle changing text sizes.

Books

As mentioned in the previous post Dave Shea and Molly Holzschlag’s the Zen of CSS design has been added to my library. It’s an excellent book and covers so much more ground than I had expected (the joy of blindly* pre-ordering on-line!). Lots of good design ideas, from typography to color to layout, not just a list of ways to skin a cat [err, garden – Ed].

During the week I received a package by post containing a copy of Kevin Guilfoile’s first novel, Cast of Shadows, which I was lucky enough to win in a Limerick competition via Coudal Partners Infrequent Mail! Thank you guys, it’s proving to be a great read. Now, I just need to work out how to spend less time in front of the computer and more turning pages … I feel a holiday coming on!

SXSW Interactive

SXSW has concluded and sounds to have been another fantastic event this year. I have to admit to a degree of “developer envy” seeing the number of designers and developers, who have inspired me, making the journey. In fact, most of my Designer’s blogs list seems to have been in attendance this year. SXSW is firmly affixing itself on my list of things to do.

*Though it’s hardly blind given the authors’ credentials.

Dave Shea and Molly Holzschlag’s new book, the Zen of CSS design, arrived from Amazon today – two months after I pre-ordered it. At first glance it looks to have been well worth the wait.

The subject for Issue 3 of JPG Magazine has been decided. It’s “fabulous”, which any regular visitor to Heather’s site should have seen coming!

I’ve been a bit slack fixing a positioning error in the sidebar here at wasabicube that showed up under IE6/Win. Turned out that I had the flickr badge set too wide. All sorted now. Fabulous.

For the Waxheads and those that revel in vicarious minutiae, the Waxheadlines page now sports a statistical rundown of the team’s performance since the start of 2002. Watch this space for additional informative breaks-down in the near future.

Saddened, though perhaps not surprised, to hear of the death of Hunter S Thompson, yesterday.

With the long weekend here (Auckland Anniversary day on Monday) I was able to spend a little while improving xipsite, my homebrew site manager (it would be a stretch to call it a CMS). The improvements have allowed me to make my templates more succinct and, as a side-effect, I decided it was high time the site became XHTML 1.0 (Strict) into the bargain.

It was a pretty painless process: apart from picking up a few typos that had been lurking in the site for a while, the only real change I had to make was removing language="JavaScript" attributes from my script tags.

I’ve added a couple of RSS feeds to the site. There’s one for blog entries and one for my occasional postings to the photoblog(ette). In the near future there’ll be Waxheadlines feed for for all those avid Waxheads fans that must be out there …

You’re now looking at what would have to be called the beta release of wasabicube version 5. There are probably a few issues to deal with, especially for IE/Win 5, and I’ve got some work to do in the Waxheads’ Player Status page [Update: new Waxheads Player Status page] (in the meantime it’ll serve well as a reminder of what version 4 looked like).

Let me know if you find anything strange and I’ll do my best to sort it out soon.

A belated Happy New Year to you and a hope that 2005 brings all that you could possibly want from it – I’m expecting a busy and rewarding year ahead.

News

Heather Powazek Champ and Derek Powazek have just released the first issue of JPG Magazine.

Scientific progress goes ‘boink’

The start of the new year has seen me wanting to wave a new broom through wasabicube and through the on-line tools and sites I’ve developed at work.

Keeping my eye on the Web Standards Group mailing list, I’ve become acutely aware of the burgeoning skill levels, in both CSS and markup, being displayed by the web development community. With an increased uptake of the web standards message and the associated discussion that engenders, a lot of techniques are becoming well known and well understood.

It turns out that a great wodge of the methods I used in the “old days” of standards-based layout have become dated and some would say we were naïve to have used them in the first place. I’ve cast a critical eye over my code and have been shocked to find a high level of <div>itis and class bloom. To paraphrase someone on the list, the other day, using divs and spans with CSS styling is just so 2001!

So, the year so far has been dedicated to pulling the markup and CSS from the primordial standards soup, cleaning it up and paring it down. This is time-consuming but ultimately rewarding stuff.

I intend to write about these exploits in the near future as I’m sure they’ll provide amusement if not a little education.

The year’s come screaming to an end leaving very little time for posting to this site or even making the subtlest of incremental changes. I’m hopeful next year will allow me much more time to improve and add to wasabicube.

I’ll be heavily involved in setting up the inaugural Auckland meeting of the Web Standards Group sometime in the early part of the new year. On that note, if anyone knows of a free venue with a data projector in the Auckland region please do get in touch.

All that remains for me to do is to wish you all a fine holiday season and look forward to a fabulous 2005!

Those of you with your eyes skinned (as a child I was very worried when my dad used that expression) will have noticed the photo option that appeared on the menu a time back. Finally, the photoblog(ette) has landed, albeit in an unfinished state.

There’s plenty of work to do, including a sensible archive page and some tweaks to fix up some glaring display problems if you’re unlucky enough to be using IE.

The relocation at work has gone pretty well after, finally, getting our frame relay circuit installed (a month after it was promised). Just some server changes to do over the next couple of nights and all will be settled before the Christmas break. That’s the plan, in any case …

Earlier today, I read Adam Greenfield’s post, about New York’s new MoMA, in which he mentions the museum’s use of Web-like navigation cues.

When travelling recently I recalled hearing a theory that suggested it was just a matter of time before passports and lengthly check-in periods would be unnecessary at airports. The airport would recognise the traveller as they arrived and instantly ascertain whether, or not, they were eligible to travel. No archaic bits of paper required.

If buildings and businesses could instantly recognise an individual, and with a trail of cookies left behind, it wouldn’t be a giant leap for all sorts of applications to arise. Imagine having the leek and potato soup shown as “visited” on a restaurant menu along with your rating out of ten.

But then there are the privacy issues …

The days have flown by at an alarming rate. We (mostly) successfully relocated the office a couple of weekends ago – still waiting for our frame relay Internet connection, however. Since then I’ve been immersed in a programming project.

Good news is that Firefox has gone 1.0!

Sad news yesterday that Emlyn Hughes has died. I well remember my school days in Wales re-creating famous Liverpool moves in the playground where we’d pretend to be Emlyn Hughes, John Toshack, Kevin Keegan, Steve Heighway and the like.

Perhaps in keeping with that sombre news, here’s another Alcatraz photo:

It’s a fortnight since we were on Alcatraz, a wet Tuesday in the Bay Area. I felt this view captured the frustration that the inmates must have felt with sights and, apparently, sometimes the sounds, of the city so close by.

Very much taken aback this morning by the news that John Peel has died.

Here we are half way through the month and no October posts so far! I know that the two of you, whom I count as my audience, must be thinking “if Doug Bowman can travel Australia and New Zealand and still manage to post, what’s up with that wasabicube fellow?”

Between programming projects, an imminent relocation at work, a busy social schedule and a new camera to get to grips with, there’s been very little time left in the day. I’m desperately keen to get back into some web site improvements, though, realistically, that’s not likely to happen until sometime in November, because we’re off to San Francisco on Sunday for a few days and then there’s the work move to Mairangi Bay…

In the meantime, for your viewing pleasure, here are a few shots from the new acquisition. The first two were taken while we were pottering around the Chancery the other night. These were near the One Red Dog restaurant.

This next one was taken of the Bean Rock lighthouse on the ferry to Waiheke Island to celebrate our first wedding anniversary. What a brilliant year it’s been.

Clearly, 300×200 doesn’t come anywhere near doing the images justice, so part of the improvements at wasabicube will be the addition of an official photoblog(ette) with room for larger images.

Our regular Wednesday evening run starts by the heliport at Mechanics Bay. Whenever the helicopters come or go the toddlers get excited. So do some of the grown-ups.

The sun was out during the weekend – in fact, it felt decidedly spring-like after some cold and wintry weather lately. To mark the change in seasons, one of our succulents has shot out a triffid:

And, yes, the photoblogging appears to be on-going!

In other news; version 1.0 PR (preview release, codenamed ‘Greenlane’) of Firefox is out. Browse happ(il)y!

Those of you that know Auckland will appreciate the geographical codenames that have been given to the last few Firefox releases: ‘Three Kings’, ‘Royal Oak’ and ‘One Tree Hill’. Due, no doubt, to the influence of lead developer, Ben Goodger.

I spent most of Sunday buried in Java code, although I did have time to take this photo of the contents of our nut bowl. Looking forward to getting some time to tinker with wasabicube and start to implement some of the features I’ve been dreaming up. It’s a busy old life.

Last night the full moon was very clear. This was taken from what was a very chilly deck:

Soy long and thanks for all the fish… – another sushi lunch despatched!

I’m a couple of days late reporting the much anticipated relaunch of The Hivelogic Narrative. Dan Benjamin called on the talents of Jason Santa Maria to help with the revamp. Nice work.

Dave Shea has uplifted Mezzoblue in, what I think is, a great improvement on his previous take.

Oh, and by the way (this via the also recast All In The <Head>):

We spent the weekend in Dunedin with my folks. On Sunday the weather turned chilly. We were lucky to get a flight out on Monday after a good dumping of snow overnight:

Before you start thinking “this is just becoming a photo-blog”, I’ve almost finished a major re-design of the markup and CSS at work, so I expect, shortly, to have time to describe the process and to make some much-needed improvements around wasabicube as well.

In memory of our friend Barry, whose birthday was on the 6th, we declared Saturday a Photo Day and headed up to Matakana with our cameras at the ready. Lots of good subject matter at the Morris & James Pottery & Tileworks:

Hee hee! I’ve just stumbled on Caterina’s reference to the flapface phenomenon over at Flickr. Très amusant! Even more so if you grab your trusty camera and have a go yourself.

A good plug for Firefox at the Sydney Morning Herald.

It’s a good treatise on what’s to like about Firefox but it’s a shame the article wheels out Microsoft’s business practises with respect to Internet Explorer’s current, dominant position. While I do have sympathy for the argument that Microsoft used its position to gain market share for its browser, it has to be said that, for those of us designing Web sites in the mid- to late-‘90s, IE did a much better job of rendering our designs as we intended them. Not only that, it was a much better user experience too! To refresh your memory you only have to go back as far as 2001’s Netscape 4.7x (I still have large institutional customers running this version), resize your window and watch the entire page reload. You can infer from this the code crud that Netscape was buckling under. The weight of unmanageable code stifling design and usability is often a neglected subject when discussing the “browser wars”. (There’s discussion along these lines and insight into decisions made by Netscape, unrelated to Microsoft, that hastened their fall from dominance, in Wired 8.08’s interview with Marc Andreessen.)

Similarly with respect to criticisms of security – holes are highly likely to be found in a complex system if you’ve got a large enough installed base.

I don’t want to appear as a Microsoft apologist. I do use and promote Firefox as the browser of choice whenever I can, and I get at least as frustrated with Redmond’s take on CSS as the next guy. Anyway, rant over!

I feel ridiculous! Last night I discovered the existance of the <dl>, <dt> and <dd> tags! I suppose rediscovered would be more accurate – I’d seen them before, it just never occurred to me where I might use them… Reading my way through Dan Cederholm’s book; there they were! So, after several years of building table-less forms with great wodges of <div>s, <span>s and liberal helpings of class, I’ll be able to significantly prune my markup.

It’s come at a good time; I’m working my way through Selector’s online products and teasing them into XHTML 1.0 Transitional and CSS validatable markup. So far the Selector Measure of Resilience meets the standards with the other products and a Web site re-launch hot on its heels. Exciting times.

Dunstan Orchard has redesigned his site. Perhaps recrafted is a better word. There’s a plethora of well thought out detail. Also under the redesign heading is Design by Fire – a work-in-progress but looking good.

Thunderbird 0.7 has arrived!

Incredibly, a year has passed since wasabicube became a blog. I’m still not sure what motivated me to start blogging. I am sure that the output hasn’t been sufficient to call it a journal, nor has it been as studied as I’d intended, but it’s been a great experience. In what was an exciting year on the home front and a somewhat frustrating year at work, wasabicube has been a great creative outlet.

There have been several redesigns over the year – January’s design catching the eye of Andy Budd and, subsequently, Eric Meyer. Both inspirational characters and a huge source of motivation for me to make something of wasabicube. I haven’t come close to matching their prodigious output but I’d like to think I’m gradually creating a useful resource.

I’m looking forward to the coming year and whatever it will bring wasabicube.

As I drove to work this morning, local time, the surprise package of Euro 2004 went on to beat the hosts, Portugal, and win the final. Apart from the monumental achievement by the Greek side it’s an excellent excuse to put up a photograph I took at the Acropolis in June 1998.

With a rise in interest for stencil-based art, a story from Yorkshire of an un-graffiti artist caught my eye while trawling Boing Boing.

From an enquiry by an interested reader, I’ve decided to throw my tuppence-worth into the That Wicked Worn Look ring (thanks, Ramon). I’ve created a short tutorial explaining how to get a scratchy, weathered effect using Corel PHOTO-PAINT.

Background

The inspiration for this article came from Cameron Moll’s That Wicked Worn Look series, and from a reader’s enquiry about how I used Corel PHOTO-PAINT’s Weather effect to age an image.

Implementation

The starting point I usually take when creating graphics for the Web is to create a vector image in CorelDRAW.

By trial and error I’ve found it best to scale the image by 400%, say, before exporting it to PHOTO-PAINT. Once there I scale it back to its original size. This gives a much smoother result than importing CorelDRAW images directly.

Next, in PHOTO-PAINT, I pretty much follow Cameron Moll’s first tutorial in order to create the creases and worn edges.

Once happy with the edges, I apply the PHOTO-PAINT’s Weather effect (Effects | Creative | Weather). With a bit of experimentation I’ve found that a good result comes from applying the effect twice:

• Apply the effect with an angle of say 80 degrees with a strength of 15, size of 1 and a randomize value of, say, 165.
• The apply it again at an angle of 90 degrees, with a higher strength, say 85, again with a size of 1 and a randomize value of 194, for example.

Note: play around with the Randomize button until you get a scratch pattern that looks natural for each application of the effect.

Perhaps the key thing I’ve discovered is to have the two angles of weathering – it somehow looks more convincing than having all the scratches going in the same direction.

To coincide with the shortest day here, and the much anticipated arrival of a parcel from Amazon today, here’s to a little light reading after tonight’s Waxheads’ game:

• Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm
• Web Design on a Shoestring by Carrie Bickner
• Universal Principles of Design by William Lidwell et al.

Excellent!

Lock up your chickens, Firefox 0.9 is out!

I’ve come under the influence of Cameron Moll and Jason Santa Maria:

This is really a bit of a knock-off of Cameron’s example and there’s definitely room for improvement. Choosing white for ‘wasabicube’ is not particularly realistic given the hammering the tag has obviously undergone – looks like it’s been dragged through gravel.

The worn effect is in part based on Cameron’s first tutorial – giving the notches and crease – followed by a couple of judicious applications of Corel PHOTO-PAINT’s Weather effect, set to Rain, for the scratches.

Elsewhere, Dan Cederholm has been caught up on the fringes of the current redesign trend with some tweaks to his site; Jon Hicks has taken the Textpattern route, rather than the CMS darling du jour WordPress; and I really love this photo by Jeremy Hedley – it’s like the subject is in a world of his own, all the while within some sort of giant clockwork mechanism.

There been a rash of redesigning lately. One of the most recent is Douglas Bowman’s beautifully executed Stop Design.

It’s hard to believe that Stuff and Nonsense has only been around for a month and has already developed into quite a body of work.

Cameron Moll provides more than clues to That Wicked Worn Look in his continuing series. Excellent for those of you wanting to create a site with a well-thumbed feel.

The other day, while out walking on Ponsonby Road, an idea came to mind to do a series of photos capturing the twiddley bits that adorn the buildings in the area. Today I took my camera. These are the first in the series:

(Just a little annoyed about the twig…)

And, in other news…

While I wait for his new book to wing its way to me, fresh off the press, Dan Cederholm answers Ten Questions for the Web Standards Group.

Not much has happened on the wasabicube front of late, owing to other commitments. However, I have made some modifications to the logo:

The previous cube icon seemed too angular. It’s always been a work-in-progress, so I expect there’ll be further tinkering. Next, I’d better soften up the favicon.

Eighty-nine years ago, tens of thousands of Allied and Turkish troops perished in a military mis-adventure that became a turning-point in the maturing of both Australia and New Zealand’s national identities.

Nearly 6 years ago I visited the Gallipoli peninsula, where I took these pictures. It is an incredibly solemn place.

Memorial to the New Zealand Expeditionary Force at Chunuk Bair and the Atatürk memorial:

The Ari Burnu memorial:

The text of the memorial reads:

“Those heroes that shed their blood and lost their lives… You are now lying in the soil of a friendly country. Therefore rest in peace. There is no difference between the Johnnies and the Mehmets to use where they lie side by side here in this country of ours… You, the mothers, who sent their sons from far away countries wipe away your tears; your sons are now lying in our bosom and are in peace. After having lost their lives on this land they have become our sons as well.” Atatürk, 1934

This, from Stanmore Bay, on the drive to work:

Before getting to the business of the day; this was the view out the office window tonight, just before sunset:

The Waxheads’ Player Status meter has found its way on to the menu panel in celebration of its revamp. Of special interest is the new ‘shirt status indicator’, indicating the lucky possessor of the shirts for the week – the one whose washing machine may never function in quite the same way again following contact with the Waxheads’ caustic kit. The menu placement is a temporary measure until I get around to building the sub-menu system – for which I’ve some interesting ideas germinating.

In a narcissistic fit I discovered that ‘waxheads’ now gets a first place spot on Google. We’d been talking about Googling for Waxheadlines the other day when I removed the links from my old site and several Waxheads were unable to find the page. When last I looked we were buried somewhere around four pages in. Progress indeed. With this level of exposure, the likelihood of a serious bid from the Thai Prime Minister mustn’t be discounted!

On the way home last night I deviated into the city to take some pictures of the Sky Tower. I quite like the distressed qualities of this over-exposed shot:

Here’s a shorter exposure:

Yet more layout twiddling – I can see this is going to go on for a while! Perhaps the right aesthetic will reveal itself once all the content has been sorted out. Soon there’ll be a system of sub-menus and a bibliographical page referencing some of the design and programming books from which I’ve drawn techniques and inspiration.

On the subject of techniques; this latest incarnation of wasabicube uses a technique I came up with to get the background image layout working properly in IE/Win. When floating a div, that has it’s own background imagery, within a div that itself has a background image, IE seems to insert margins to the right or left of the image. This has at least two undesirable side-effects:

• The containing div’s background image has background-coloured ‘borders’
• The floated div’s background image doesn’t extend to the edge of the containing div

An answer is to place a overflow: hidden; entry in the CSS defining both the containing and contained divs. And to makes sure the background image placement is appropriate for the type of float. E.g. top left no-repeat; when floating to the right. In addition it’s necessary to have some ‘sacrificial’ pixels at the appropriate edge of the image that will be the background for the floated div.

I’ll research this and see who’s come across the problem and how they’ve fixed it, and let you know.

Lunch-time, yesterday, on Franklin Road:

Friday saw the first anniversary of Dave Shea’s excellent CSS Zen Garden. Quite possibly the best and fastest way to convince anyone of the merits and versatility of developing Web sites with CSS.

I’ve just posted a change to the links page that is somewhat of a work-in-progress and, as such, needs just a teeny-weeny bit of work before it’s quite as useful as it might be. Anyway, I’ll introduce cookie-based persistence to your check-box preferences very soon and will resolve the problems in Opera. I the meantime, have yourselves a fine weekend!

Jeffery Zeldman has redesigned The Daily Report for the spring, the Sydney Morning Herald has joined the Web Standards brigade with its new layout, and Thunderbird 0.6 is go! F.A.B!

The view from the office tonight:

A week has hurtled by with things seemingly unchanged at wasabicube. Behind the scenes, however, I’ve been busy on a couple of projects (more of which later, perhaps).

In the “It looks like I’d better get a new bookcase” department; my copy of Eric Meyer’s ‘More Eric Meyer on CSS’ arrived in the post from Amazon on Friday. I haven’t had a chance to have an indepth look through it, but what I’ve seen is likely to spur on some useful improvements around the site. Excellent!

Recently, Cameron Moll noted that we all started somewhere. So, for amusement, I’ve dusted off an early personal Web site (circa 1997), liberally replete with <font> tags and held together by a sturdy <table> framework! Lovely!

You may have noticed the green mist descending from the top of these pages. I’m not entirely convinced it adds to the site. What do you reckon? I’m in the process of adding some alternate stylesheets and tidying up some of the site’s structure, so I’ll be able to make the mist optional. In addition, there’ll be a resources page, full of links to design and standards related sites, plus a list of the books I’ve found useful to date. Stay tuned.

Just because Jon did:

1. Grab the nearest book.
2. Open the book to page 23.
3. Find the fifth sentence.
4. Post the text of the sentence in your journal along with these instructions.

Astute readers will probably guess where this is from:

“Change that one line of code, and they can all be purple, yellow, maroon, or any other color you desire.”

This must be the subliminal effect of being washed over by an eclectic DVD image stream – suddenly, the furniture cries out to be subject.

Our sofa partly illuminated by the credits from ‘Meeting people is easy.’ taken with an 8 second exposure at f2.8.

We spent Easter at my parents’ in Dunedin, where the weather was better than expected, but still a shade on the chilly side for us naturalised northern types.

It’s always nice to see the South Island’s craggy features from the aircraft on the flight down. In comparison, the North Island, with the exception of a couple of volcanic protrusions, just gently undulates, really.

North Canterbury wore an early winter coat as we trundled overhead.

In other news: I received my brand spanking new copy of Eric Meyer’s ‘Cascading Style Sheets: The Definitive Guide, 2nd Edition’ in the post on Thursday. I’ve only managed a brief flick through it, so far, but it looks excellent!

After another late-night round of tweaking in the wasabicubicle, I’ve added a drop shadow to the menu panel. Despite liking the site’s plain appearance and having received very encouraging comments, I thought it still just a little bit too plain.

In the process the CSS has become more succinct, although it still needs a spring-clean (or autumn-clean, I guess). I’m really keen to add some interesting alternative style sheets for viewer entertainment and, when time permits, I’d like to up the graphical content…

I managed to navigate yesterday morning unscathed by April Foolishness. I didn’t see much evidence of trickery, but that’s possibly a reflection of working in a small office with very little outside contact. Our timezone being what it is, the Web-based pranks didn’t really kick in until today.

So, my daily pilgrimage to Stopdesign and mezzoblue had me chuckling. Over at Dunstan’s, meanwhile, the sheep are justifiably frightened and the barn is burning!

I’ve been looking for an excuse to post this picture for a while. None has arisen, so I’ve posted it anyway.

I took it late last year and, apart from adding a bit of much needed colour to the page, I find it quite a cheery shot.

I’ve been a little bit slow off the mark adding this entry – the site has been in stasis while I converted it for the new site management tool I’ve been writing. It’s still early days, but I can now automatically upload any changed pages via FTP and make full use of include files, global site constants and local page constants to keep the maintenance workload, for site-wide changes, to a minimum. Next stop: full content management? We’ll see.

I digress, the reason for this entry is that more congratulations are in order for some sites I’ve found very inspirational: SimpleBits has won the Best-designed Weblog, mezzoblue the Best Canadian Weblog and Antipixel has taken out the Best Asian Weblog at the 2004 Bloggies.

Congratulations to Dave Shea and all the contributers to CSS Zen Garden who have not only won the Best Developer’s Resource but also the Best of Show awards at this years SXSW Web Awards.

Background

This is an update of an earlier article, which was inspired by David F Miller’s Zebra tables article for A List Apart.

In order to make data tables easier to read it’s useful to ‘stripe’ every other line with a subtle background colour so the eye can track easily across each column for a given row.

The JavaScript function described below is the one I use to stripe the Waxheads’ results table.

My solution^* is a short function that sets the class of either the odd or even rows of a table. Thus, you can have full control over the guide stripes’ appearance via the page’s stylesheet.

As in David’s example, if the row already has a class defined then the function won’t replace it with the guide stripe class. Unlike David’s example, the row is updated whether, or not, it has a background colour set as I feel the background colour of the row should be being set via either the row’s or the table’s style.

Implementation

Striping a table is straightforward. Firstly, include the javascript in a <script> block. Alternatively, and better if you’re going to stripe tables on more than one page, load the JavaScript from an external file using:

<script language="JavaScript" type="text/javascript" src="myJavaScript.js">

Next, identify your table with an id attribute. For instance:

<table id="myTable" summary="Stripey table">

Now, either directly from a <script> block within the page, or from the onload attribute in the <body> tag, call, for example:

tableStripe('myTable' 'myStripeClass', true)

(So, from the onload attribute it would be:

<body onload="javascript:tableStripe('myTable' 'myStripeClass', true)">

The parameters passed to tableStripe() are, in order, the id of the table, the class name to apply to the row and, finally, a Boolean to determine whether to apply the class to the odd (true) or even (false) rows.

The JavaScript source is fairly succinct:

function tableStripe(p_strId, p_strClass, p_bOdd) {    var l_Table = document.getElementById(p_strId);    if(l_Table.rows) {     for(var l_iIndex = (p_bOdd ?  0 : 1);<span class="exDesc">⇒</span> l_iIndex &lt. l_Table.rows.length;<span class="exDesc">⇒</span> l_iIndex += 2) { var l_Row = l_Table.rows.item(l_iIndex);  if(!hasClass(l_Row)) {   l_Row.className = p_strClass; }     }   } }

(The ⇒ signifies that the line would, but for display considerations, continue on the same line.)

Handily, the DOM provides a rows attribute in the table class, which is a list of all the table’s row elements in the order in which they appear. We simply traverse the list and, depending on whether we want to apply our class to odd or even rows and, if the row hasn’t already got a class attribute, we set the row’s className attribute to our supplied class name.

The rows are indexed from zero. We set our starting index to zero for an odd start and one for an even start and then traverse the list in steps of two. If the current row doesn᾿already have a class we apply our own.

For a working example, view the Waxheads ’ results page’s source code.

This article is a work in progress. I’ve noted that both this technique, and David’s don’t work for IE5.01/Win, I will look to see if there’s a work-around that can be applied in that case – let me know if you find other issues with other browsers.

// this function is needed to work around // a bug in IE related to element attributes function hasClass(p_Element) {    var l_bRet = false;    if (p_Element.getAttributeNode("class") != null) {  l_bRet = <span class="exDesc">⇒</span>    p_Element.getAttributeNode("class").value;    }    return l_bRet; } 

For more information about the DOM see Document Object Model (DOM) Level 2 HTML Specification

Since writing the Stripes article, my mate Nigel and I have been exchanging optimisation suggestions for my original algorithm. This has prompted a re-write of the article and the algorithm – both now being somewhat more to the point!

Nigel’s been amassing some fantastic photographs since he splashed out and bought his Canon EOS300D SLR last year.

It’s very good news that Eric Meyer has been hard at work on ‘Cascading Style Sheets: The Definitive Guide, 2nd Edition’ and a sequel to his excellent ‘Eric Meyer on CSS’ in the form of ‘More Eric Meyer on CSS’.

Also scribbling furiously has been Dan Cederholm who has ‘Web Standards Solutions: The Markup and Style Handbook’ out soon.

Background

This article was inspired by David F Miller’s Zebra tables article at A List Apart.

I’ve created a JavaScript function to stripe the Waxheads’ results table. I’d been intending to automate the tedious process of adding guide stripes to the Waxheads’ tables for a while but, until seeing David’s article, hadn’t found the impetus.

My solution is a short function that sets the class of either the odd or even rows of a table. Thus, you can have full control over the guide stripes’ appearance via the page’s stylesheet.

As in David’s example, if the row already has a class defined then the function won’t replace it with the guide stripe class.

Implementation

To stripe your table is pretty straightforward. Firstly, identify your table with an id attribute. For instance:

<table id="myTable" summary="Striped table">

Now, either directly from a <script> block within the page, or from the onload attribute in the <body> tag, call, for example:

tableStripe('myTable' 'myGuideStripeClass', true)

The parameters are, in order, the id of the table, the class name to apply to the row and, finally, a Boolean to determine whether to apply the class to the odd (true) or even (false) rows.

The JavaScript source is fairly succinct. Handily, the DOM provides a rows attribute in the table class, which is a list of all the table’s row elements in the order in which they appear. We simply traverse the list and, depending on whether we want to apply our class to odd or even rows and, if the row hasn’t already got a class attribute, we set the row’s className attribute to our supplied class name.

The rows are indexed from zero, so we set our starting index (zero for an odd start and one for an even start) and then traverse the list in steps of two, checking whether the row already has a class and, if not, applying our own.

I’ve borrowed David’s hasClass() function, for the IE compatibility reasons he describes in his comment.

For more information about the DOM see Document Object Model (DOM) Level 2 HTML Specification

This article is a work in progress. I’ve noted that both this technique, and David H Miller’s don’t work for IE5.01/Win, I will look to see if there’s a work-around that can be applied in that case – let me know if you find other issues with other browsers.

Where does the time go? It’s been a while since the last post. I’ve had a number of projects demanding my attention at work and at home.

This morning, inspired by David F Miller’s Zebra tables article at A List Apart, I created a JavaScript function to stripe the Waxheads’ results table. I’d been intending to automate the tedious process of adding guide stripes to the Waxheads’ tables for a while but, until seeing David’s article, hadn’t found the impetus.

My solution is a short function that sets the class of either the odd or even rows of a table. Thus, you can have full control over the guide stripes’ appearance via the page’s stylesheet.

The clouds, viewed from our deck last night, were fascinating. The streaked appearance must have something to do with the strong wind – some sort of periodic beating, maybe? They’d formed very distinct bands but dispersed quickly. In fact, the banding had lessened noticeably between first seeing them and grabbing the camera.

<!—

—>

I’ve been tinkering with the CSS again to create a two-column list on the links page. I’m not so sure it looks as clean as before but it’s definitely easier to use.

This is for personal interest but, in case you’re curious, here are the places I’ve visited over the years. Though seeing all of China highlighted, thanks to a few days in Hong Kong as an eleven year-old, is probably exaggerating a touch!

You can create your own visited country map or write about it on the open travel guide.

There’s now a print stylesheet at wasabicube. If, and I know this is probably a stretch, you’re suddenly gripped by the need to print something from these pages it should now look at least half-reasonable.

Nigel (of hat fame) has just set up the first cut of his new site TheLab where he is “combining theory with empirical research for data driven decision-making.” It’s well worth a look, especially if you’ve got a heap of data lying around begging for analysis.

I’ve just done a quick spell of tidying around the site. Seems there have been a few visitors lately and I’m embarrassed to say that quite a number of XHTML validation errors had been lying about under cushions and down the back of the fridge. I guess this is a product of making changes on the fly and hand-coding but really no excuse if I want to trumpet being W3C valid!

And the source of these welcome guests? Well, I’m absolutely honoured that wasabicube has been given a mention by Messrs Andy Budd and Eric Meyer. Incredible.

The feeling is described in an entry by Jon Hicks that echoes the sudden mixture of elation and fright.

It must be time to wheel out Tantek Çelik’s Box Model Hack and deal with the IE5/Win issues!

I’m happy, in the meantime, with the new layout. Some graphical content wouldn’t go amiss, though – hope to get on to that soon. I’ve also got to attend to the IE5/Win display issues…

The Waxheads have started the year with a fine 3-3 draw, despite a much depleted squad and a late kick-off.

And, in the good news for browsing department, I see that Firefox 0.8 has been released. Excellent!

It doesn’t seem a hundred years since wasabicube was put through the wringer with a design that was supposed to imbue it with light and air. Mark missed. Here we go again!

I’ll introduce a couple of new sections soon: a gallery of photographs and a small portfolio of design work I’ve done over the past few years.

There’s been more than a passing interest from the Waxheads to enter the next competition, which starts at the beginning of February. You’d better start watching this space.

The vague rumblings of a new wasabicube layout have been detected within! I’ve just done a quick run through the CSS and have replaced the fixed pixel font-size entries with ems, but I’m not happy with the current look – not enough whitespace and nothing graphical. So, expect a change over the next little while. It will give me a chance to pare the current bloat out of the CSS as well.

Not going to start tonight, it’s too hot in here (I’m at work but the air-con doesn’t do anything after 17:30 (local). Another time.

BTW hope the year’s turning out well so far.

It’s a little late but here’s to an excellent 2004 to anyone who stumbles onto wasabicube.com.

2003 was personally huge and wonderful. However, work, and much of the way of the world, bore the hallmarks of irrationality and confusion.

In the spirit of the new year I’m looking forward to more personal highlights and vast improvements in the other spheres.

After much to-ing and fro-ing I’ve finally bitten the bullet and forked out for a more serious web-hosting package. Still not super-serious, but this will give me the scope to offer scripts, database-backed applications and so forth. Game on! Excellent!

Is it just me or has anyone else in the Auckland region noticed that the clouds recently have been very Simpsonesque? I suppose, I’d better take a photo so you know what I’m on about…

I’ve been busy lately redesigning the Selector web site. I’m uploading it in parallel to the existing site and expect it will go live early next week.

In a Zen-like flurry of icing, Nigel posited the following little koan: “who sits at the head of a square table?”, To which he had no answer, nor cake.

My friend Roly has a TrackMaster-framed, Triumph-powered flat tracker for sale. He’s written about it here.

After a wonderful wedding and fabulous honeymoon I’m back on deck. Although, as you can imagine, I’d rather still be honeymooning in the tropics, I’m getting back into the swing of a working week and planning (in my ’spare’ time) the next iteration of wasabicube.

A small stylesheet twiddle has solved the problem of Opera displaying the sub-navigation down the page instead of across. By setting the sub-nav elements’ width to 100% the flow is now as I’d wanted. It remains to be tested in Konqueror, which had the same rendering problem (who knows, they’re probably right.)

I’m going to have to invest some time in getting an archive feature for this blog…

Also, today, I’ve removed a big chunk of “classitis” out of the blog page. Much better.

What on earth was Mr Holmes thinking?

Another stoic display from the Waxheads saw a 3-3 draw to round out the final game of the competition. That should put us in fifth spot, though the league table at PYCC is nothing if not bizarrely inconsistent, so don’t hold your breath.

Well, it didn’t stay static long – another stylesheet leaps into play to give us another new look! Thanks to Dan Cederholm of SimpleBits for providing the inspiration for the new menu system. Still some work to do for IE5/Win and Opera users. Please bear with me.

Nigel, a colleague of mine, has been receiving more than his fair share of attention with respect to his hat: He is now casting around for opinion as to whether comments, such as “nice hat!” and “are you ”http://www.allblacks.com/teams/allblacks/williams_ali.asp">Ali Williams?", are sincere or merely thinly disguised mockery. Any ideas?

On a whim, a new layout. More precisely: new stylesheets. Could this turn into my very own css Zen Garden? Don’t touch that dial!

The tableless layout looks awful in Opera 7.11 and IE6/Win (and I haven’t dared to look at IE5/Win!) So, thank you Mozilla Firebird for looking so good, but there’s work to do…

It just struck me as amusing, as I walked over the the supermarket to get some lunch, that some businesses in our building use a document destruction company called Recall – isn’t that missing the point, somewhat?

At last the directories pages are tableless – just the Waxheads pages to attend to sometime…

I’ve been playing around with the layout of the directories pages. I’m going to rid them of the table layout they’ve enjoyed to date. Just need to hone the dynamic div solution a little so that the main page height is maintained. Bear with me.

By the by, ain’t this the truth!

The site now looks slightly less bizarre in IE5/Win thanks to the strategic placement of the BMH in the CSS.

In a classic case of burying my head in the sand, I had failed – perhaps knowing what I would find – to have a look at the site with IE5/Win. What a shambles! I will have a crack at tweaking the stylesheets with Tantek Çelik’s Box Model Hack tonight. Stay tuned, olden browser users.

By the way, the Waxheads managed a fine 2-0 win with only 5 players against a more than full strength 6 Pack last night.

I’m mightily impressed with Instant Saxon, the XSLT and XQuery processor, which has just managed to make very light work of transforming some 35Mb XML files I created overnight at work. Very cool.

Here’s an extract from Next Handbook’s “Programming in C++” under the heading Microsoft Internet Explorer [Full Install]:

…IE6 offers a stable and error-free browsing experience and new fault collection services help identify potential problems that need to be fixed in future updates…

Excellent!

Idly staring at my phone’s calendar revealed this convenient association:

I wonder what other important features I’ve missed?

The Waxheads played out a hard-fought 3-3 draw to win the playoffs for fifth to eighth place. Simon’s nicely taken shot, on the rebound, in the the dying seconds, securing the draw. Thanks to a superior goal difference Payless Bins were pipped to fifth place of sixteen teams.