The Man in Blue

Four things

You can always tell how popular you are by how long it takes for a meme to get to you. After following quite a few links I ended up at a dead end over a month ago ... my ego is at an all time low, thanks Lucas and John :P

Four jobs I've had

Web designer
Web programmer
Web developer
Web author

(Seriously, I've never worked as a fast food underling like any of you peons :P )

Four movies I can watch over and over

Four places I have lived

My bedroom
A fort made from couch cushions
Basement of the Melbourne University Computer Science building
13th Century Mongolia

(Just Melbourne)

Four television shows I love to watch

Four places I have been on vacation

Hong Kong
Sovereign Hill -- the most neat-o tourist extravaganza in Victoria!
Sydney
Gold Coast -- home of the teenage drinking binge

Four of my favourite dishes

Chinese custard buns
Deep fried, salty, chilli squid from Pacific House
Meat lover's pizza from Topolino's, Fitzroy Street
Mum's cheesecake

Four websites I visit daily

Four places I would rather be right now

Four bloggers I am tagging

Maxine Sherrin (just to see if you she'll post something that doesn't support her "money, money, money" mantra :P )
Cam Pegg (maybe he can co-write it with Chuck Norris)
Nikita Kashner (don't you want to know what food goes into that midriff?)
Doug Bowman (he needs an excuse for a blog entry)

Resolution dependent layout update

» Change CSS layout according to browser width «

After Dave Shea ran into a spot of trouble integrating my rather experimental resolution dependent layout script of yesteryear, I thought I'd update it to make it a bit more robust.

The problem that a few people noted on the Rosenfeld Media site was that Dave had changed the script to fire once the page loaded, so you'd get the usual flickering effect as the browser displayed content on arrival, then the script would fire some seconds later (accounting for images, etc.)

In the original version this was gotten around by initialising the script at the very end of the <body> -- not terribly unobtrusive, and annoying to maintain (ahhhh ... 2004, how long ago you were).

The new version of the resolution dependent layout script counteracts this by executing before any of the content has arrived. This is possible because for most browsers all the script has to do is check the browser width, then change the stylesheets accordingly; it doesn't have to interact with any of the content at all. If the script is placed after the stylesheets -- in the <head> -- then all is dandy, you'll get zero flicker.

The exceptions are Internet Explorer for Windows 5 & 5.5. They can't actually tell you the width of the browser, so you have to measure the width of the <body>. Unfortunately, that doesn't exist until the entire <body> has been downloaded. So, for those browsers we revert to the page load event. BUT! To sweeten the deal, we set a cookie everytime that the browser's width is calculated. As poor IE 5/5.5 users move around your site, each successive page can check the cookie value instead of waiting for the page to load. So the only time they get flicker is the first time they come to your site.

The page load and window resize event handlers now also use standard event listeners, so this script won't interfere with any other scripts that you might be running on your page at the same time.

Internet Explorer 5 for Mac officially sucks, so it don't get nothing.

It's cool to be old school

When you're working in a technology field it always seems like the motto is "newer is better". Having just turned the Web 2.0 corner, we're now looking ahead to Web 3.0, and dreading Web 4.7. Don't use PHP, use Ruby on Rails. Not DHTML, it's AJAX. Gameboy? PSP! MD? MP3!

But there's just some things that don't seem to get any better. Products from days past that they'll never seem to top.

A couple of months ago, my keyboard died. This, my friends, was a sad event. 101 keys is precisely where it's at -- it's the optimal balance of features and precision. Any less, it's incomplete; any more and you have a device that's littered with dangerous finger landmines that can easily pop-up an OS dialog in the middle of a life and death rocket duel.

So, it was with great trepidation that I trekked down to my local computer emporium to purchase a new one. Needless to say, it was a great disappointment.

When I'm typing, I like people in the next room to think that they're under siege by an M240G machine gun. I like keys with a spring action that could launch a small Russian satellite into low earth orbit. Furthermore, the whole assembly has to weigh enough to cause a small bulge in the fabric of space-time. Cheap plastic knock-offs from Crapco don't have this. They do have buttons that can change the volume on your lawnmower and open up the preferences menu in your dwarf throwing simulator, but no machine gun audio, orbital action, or gravity multiplying sturdiness.

As desperate as I was, however, I had to fork out for one of these flimsy knockoffs and then struggle to type on it for the next two weeks -- its featherweight build moving all over the desk, its confoundingly placed shortcut keys reducing productivity by an estimated 47%.

When my parents later reminded me that there was the carcass of a 486 in their basement that I could butcher, I was in raptures. The weight ... the spring ... that weirdly off-colour plastic shell. Keyboard heaven.

Sure, it's part nostalgia and part resistance to change that makes these old school items seem unbeatable, but there's also an undeniable quality to them. I'd like to know: what's your old school obsession?

Happy Holistmaskahzaa

Always feels like we should slow down as we approach the Christmas/New Year's zone, but I'll be dammned if I can afford to stop working.

I finished the final edits on the JavaScript Anthology a little over a week and a half ago, so get ready to camp out at your favourite bookstore sometime around the end of January. :P

In the meantime, happy holidays/christmas/chanukah/kwanzaa!

Birthday 2.0

Oh! My blog birthday almost passed without me noticing; it's just been that short a year.

I can't believe that it's been two years since I first put up this site. Feels more like 700 days ... 730 at most.

I was thinking earlier this week about how much this site has changed my life. The entire course of my life has been neatly and totally redefined by the people I've met and the opportunities I've gained; simply by putting my thoughts up here.

If it wasn't for this weblog, a fellow by the name of Andrew Fernandez (Dez, where are you!?) might never have contacted me about this small enclave called the Web Standards Group. I might never have met Russ Weakley, never have heard of Web Essentials 04, never have written SSCrabble (though that might have been a good thing) ... it's all so fractal. Swirls and eddies.

This year those chaotic currents brought me some of the greatest fortune I've had in all my life:

And of course, the new and renewed acquaintance of a whole bunch of more-than-friendly people who get the Web. Yeah, you. (Awwwwwwwww ... unless you're one of the people that bugs me about getting footerStickAlt to work on their website. If so, piss off.)

I don't know if it can, but here's hoping that year 3 can top all that. (I figure South by South West will give it a good try, so see you there!)

We're professionals, but do we have a profession?

Web professionals, it's the topic du jour. (Follow-the-link goes: Andy Clarke, Molly Holzschlag, Roger Johansson, WaSP, PPK ... and on.) If you aren't going to read all that, the premise is that we should be able to excommunicate people who can't be bothered to learn "best practice" from the inner circle of Web professionalism.

Hey, I'm all about excluding people -- love nothing better than a bouncer and a velvet rope -- but what are we excluding them from here? What profession are we being professional about?

Every person I work with on the Web did not enter the workforce as a Web professional. Sure, they were programmers, graphic designers, engineers, teachers, lawyers ... anything but. And that's the great thing about the Web -- its open nature. The way that you can stumble over it one day, then be building it the next. But it's also that nature which makes it so hard to define, to codify. Perhaps that's the way that all professions started out -- some people who were good at doing something did it for long enough, and then thought: hey, why not start wearing wigs and having sidebars? Voila: the legal profession, and by the way, now you all need a degree.

But right now, I still think that we're just a bunch of people that are good at doing something. There's no accreditations which we can wave in front of clients and say "trust me, I'm a Web professional". From what I can see of most higher education Web courses they barely know what to teach as the essentials, let alone give their students a decent understanding of each and every competing standard or practice that pops up on a regular five minute cycle.

Part of our job is still convincing clients that what we do has value. As much as I'd like to think it, even the Standards set out by the W3C are not well developed enough -- or even well known enough by the majority of people in our industry -- to form a codified body of knowledge which could be the basis of a profession.

And as far I see it, this isn't a bad thing, just a challenge. The Internet is so immature we don't even know whether we'll be coding HTML and CSS in five years, so don't beat on the people who haven't yet decided to join the party. I don't know about you, but I'm in this because I have an opprtunity to shape something, to contribute to something completely new. Right now you can join a W3C working group, create a microformat, re-define the way people use CSS. You can even have a role in defining the structure by which all web pages could take shape via John Allsopp's WebPatterns.

So do that. Go out, be loud, be positive. Build a profession.

Don't annoy me with your crappy form field focus

» Improved Form Field Focus «

OK, when you have a page that is mainly about a form, focusing on the first field can be a good thing. Your index finger has a finite number of clicks in it, so why waste them on form elements? Jakob Nielsen even mentioned it among his tips this year, to prevent making one of the Top Ten Web Design Mistakes of 2005.

But, what happens when focusing the first field interrupts the user's flow of action? This:

Name:

Yes, while the page was loading you've already filled out the first field and moved onto the second. By the time you've looked up from your two finger tapping, you see that something's gone awry and your form data is out of whack. Grrrrr.

Solution? Write a field focus script that pays attention to user interaction.

OK, so your JavaScript code just went from 1 line to 78, but with good reason -- it's less likely to piss off your users. What the focusField() function on my example page does is:

Check whether the user has focused on a field already. If so, do not attempt to refocus.
Check whether the user has entered data into a form field already. If so, do not attempt to refocus.

The reason the script is extra long, is because handling text selections is probably the worst supported feature in all the browsers. Internet Explorer does it well. Mozilla does it differently, with no support for form field selection. Safari does it slightly worse than Mozilla, Opera worse again, and anything else you shouldn't even think about.

IE is the only browser that lets you tell whether a form field is focused, so it's the only one that executes that step, but all the other browsers check whether data has been entered, so at least you get most of the benefits and reduce your annoyance factor by about 90%.

Even if you don't use this particular script, the one thing that you should take away from reading this is that sometimes the solution can be worse than the problem.

Tested in Internet Explorer for Windows 5/5.5/6.0, Firefox 1.0.4, Opera 8.0, Safari 1.3 and Internet Explorer for Mac 5.2

Update: Bad offender: Google advanced search

WE05: Presentation notes for "JavaScript and the DOM"

Although you won't be able to get the full effect of my crazy spinning bowtie and manic grin, you can download my presentation notes and example files for "JavaScript and the DOM" below. Voted "Most Smartarse Presentation of the Conference"!

Most of the examples will only work in Firefox due to the fact I couldn't be bothered CSSing them for anything else. (Plus, alpha transparent PNGs are way cool.) No guarantees are made for how they'll work online, I was only concerned with performance in an offline presentation environment. You can download the entire presentation as a ZIP file, if that's a concern.

Presentation notes

Most of the content of the presentation was delivered as spoken addendums to what's on the slides, but I've bastardised Eric's s5 code to display the slides on one page, and added some annotations inside <ins> tags (styled light blue), so you can get the gist of what was going on.

GeekBox '98: Meyer vs. Bowman

Yes, the game that started the vicious rivalry between two previously affable compadres. Use the left mouse button or any keyboard button to give Doug Bowman his comeuppance.

Slideshow Transitions

An example of some moderately cool effects in JavaScript. (Works fine on my 3GHz desktop, but will probably chug on anything else.)

Form Usability

Hit the submit button to see the JavaScript error handling on each of these:

JavaScript OSX

Not to be outdone by Dean Jackson's SVG OSX dock impersonation, here's my version. Except it's the whole OS! Well, I cheated a little bit (again, because I didn't want to spend too much time on CSS). But, you can:

Drag any of the desktop icons around
Drag any of the desktop icons into the trashcan
Double click the "IAUDIO" icon to open up a finder window (just a big image)
Drag the finder window around by click-hold-dragging the window title
Close the finder window
Mouseover the dock to get a magniyfing effect (dodgy PNGs I pulled from OSX screenshots ahoy!)
Click on the Safari icon to open up a Safari window
Click on the Safari "Bookmarks" menu item to get a dropdown menu
Click on "The Man in Blue" in the "Bookmarks" dropdown to go there
Visit any web site by selecting the address field and typing in an address
Drag the Safari window around by click-hold-dragging the window title
Minimise the Safari window
Restore a minimised Safari window

Bugs: I don't wanna know about 'em.

This is fairly image intensive, so you'll definitely get a better experience if you download the ZIP and run it off your own computer.

Obviously, to code a fully functioning interface would take a while, but you could extend the code here fairly easily, so go for it :)

widgEditor (progressive enhancement)

widgEditor is a WYSIWYG editor that features graceful degradation to a simple textarea for non-JavaScript-enabled user agents.

ZIP of whole presentation (1.2MB)

If you'd like to experience the true, "right there on my computer" experience, here's a ZIP file of the original presentation (no annotations) and the examples.

Update: Although this opens me up to all sorts of Photoshoppery and revenge boxing matches, photos of my presentation are available on flickr. Kindly uploaded by the lens-master himself, Amit Karmakar.

The obligatory Web Essentials 05 post

In my (1 year) tradition of letting other people say sensible things about the Web Essentials geekfest, here are my moments from Australia's greatest conglomeration of kick-ass Web developers for 2005:

Getting to hold a conversation with the the navel of the behemoth that is The Veen. (Truly one of the Web world's greatest presenters.)
Getting deferred to by presenters anytime they mentioned JavaScript, out of fear that I actually might know something. (They needn't have worried.)
Meeting the man, and instantly envisaging my new career -- manufacturing lego man models of T. Celik. (Taking orders for delivery in November 2005.)
Aptly demonstrating the disadvantages of requiring JavaScript by trying to run a JavaScript presentation sans-JavaScript.
Gaining some taxi-en-route-to-king's-cross enlightenment from John Allsopp as to why Isaac Asimov moved to Sri Lanka. (Its ability to support geo-synchronous satellites ... "and the poontang".)
Getting a hug from Molly.

Don't worry, although Russ Weakley deleted my podcast because I dissed him at the start of my presentation, the notes and examples will be up somewhere shortly.

JavaScript: The Book

It's been a badly kept secret by me, but it might come as a surprise to a couple of you that for the past four months I've been writing a book for SitePoint. It's tentatively titled "The JavaScript Anthology" and gets right into the guts of DOM scripting with practical examples that you can use on your website straight away.

I've been co-writing it with the inestimable James Edwards (Brothercake), king of accessible scripting and ultimate menuing. It's been great to work with another developer who's so in tune with Standards-based, accessible JavaScript -- I think we complement each other perfectly, and not just because we both work between midnight and 8AM.

We've tried to make the book as complete as possible, covering everything from script initalisation and string handling, all they way through to application development and animation. So, as they say, it's suitable for everyone ages 5 to 95. It takes the format of a series of solutions to common questions, such as "How do I validate an e-mail address field?" or "How do I create a slider control?", so it's really easy to flick to a solution just when you need it. However, if you're more the snuggle-up-and-read type, the solutions are still grouped thematically, so you can progress smoothly through all the facets of JavaScript.

I can definitely support what every author says: writing a book is damn hard work. But I think that the research and thought that has gone into this project will make it a great reference for the new wave of client-side scripting. If for nothing else, just so I've got somewhere to look for that pesky regular expression syntax.

The last key was pressed on the first draft today, so it looks set for release early next year. Hopefully you'll find it a worthwhile and valuable addition to your book collection!