The Man in Blue

Signal vs. Noise

Haven't people figured out by now that any decrees made by 37signals only ever work for 37signals?

Cubescape Highlights

My great uncle Jeremiah once told me these wise words: "If you give a man a painting, he will enjoy it for one day. But if you give a man a canvas, he will draw a giant penis on it." It's that memory of old uncle Jezza that brought a nostalgic tear to my eye as I looked through the submissions on Cubescape.

As with any user generated content, looking at what people have done with Cubescape fills me with equals parts dismay and wonder. Because the dismay is somewhat more obvious, I thought I'd share some of the wonder that I've stumbled across.

Some people did Pacman the character. This person did Pacman the game.
OMG! Anti-aliasing!
Although there's lots of video game characters, none can ever out-cute Bub and Bob.
There's something surreal about these larger than life cursors.
I'm amazed no one else has done Tetris.
You lost.
The Internet needs Domo-kun
I'm liking the simple, symmetrical expansion of hmmm.
Although quite a few people have attempted it, BestSteve was the only person who has completed the entire Firefox logo.
Could this be real?. If so, congratulations Ria and Deb! (And also commiserations to Deb).
A nice use of ambiguous cube perspective to make an Escherian stairwell.
Cubescape is the language of the world!
I just like the name of this one.
The CubeWorld has many rainbows, but this one is the best.
What could be better than one rainbow? Two rainbows!
Cookies!
Great self portrait.
Pyramids are easy. Cones are hard.
A weird colour combination, but it works.
Cute faces.
It's actually a Penrose triangle, but whatever.
Nice text!
Euro 2008 is right around the corner, so let's have a football match.
Picturesque but slightly acid-tinged landscape.
Nice abstract structure by Graham.
Idyllic little park.

Thanks to everyone that's submitted a Cubescape. Keep on cubing and I'll keep my eye out for more works of genius.

Cubescape

" />

Cubescape: Your own digital landscape

Sometimes I get a little obsessed. And that obsession takes me down a long, winding path. Some might even say a laborious and twisted path.

The latest focus of my obsession? Cubes.

I can't explain it really. Perhaps it has something to do with my fascination in the indivisible building blocks of our digital lives -- pixels. But any reasoning aside, the net result is that you get to enjoy the fruits of my labour. A labour involving lots of animation, shadows, a completely bastardised version of ray-tracing, and one big sprite image. So without further ado, I present to you Cubescape. A tool for isometric jiggery pokery.

Please don't even try it in Internet Explorer 6. (And why would you? What's a browser without alpha transparent PNGs?)

I always take great pleasure in providing people with the tools to create something new, so, I leave Cubescape in your capable hands and await what astounding feats of imaginative ingenuity you'll deliver to my blogstep.

A hearty but insufficient thanks to Michael Koukoullis from Agency Rainford for bringing me out of the dark ages (of flat files) and setting up the backend which drives this little project. I know how much pain it caused him to leave the haven of Rails for the hell of PHP.

Circtangles: A JavaScript art installation

" />

The thought only just occurred to me that I'd never used the newly emerging technology for creating rounded corners in CSS -- border-radius. So to rectify this, I set about experimenting with abstract uses for rounded corner rectangles. This is the result:

Circtangles

border-radius is only available in ~~Firefox~~ Gecko and ~~Safari~~ Webkit, so don't bother trying Circtangles out in anything else.

There's a few tweakable options at hand for you to try out, but they all result in a rather nice looking piece of randomly generated art. To generate different random patterns you can hit the regenerate button at bottom centre.

A couple of notes about using border-radius in your CSS:

Safari's rounded corners look so much better because they're anti-aliased.
Safari's border-radius is also less buggy than Firefox's -- Firefox (v.2) will not let you specify a border-radius that is larger than half the height of the total element height.
Safari (true to form) has much faster redraw when changing the display properties of large numbers of objects (so Firefox will be a bit slow on this experiment).
If you're accessing Mozilla custom CSS attributes via the DOM, you should capitalise the "M" in "Moz". So, for example: -moz-border-radius becomes MozBorderRadius.

So, with those caveats, enjoy Circtangles. I can only wait for the day when rounded corners are native to every browser out there.

An abundance of Web Directions news

" />

There's so much Web Directions news, I don't know what to do with it all. Well, I'll get the most exciting tidbit off my chest first:

I'm taking my Oscar-winning* workshops on the road around Australia†. I'll be guiding inquisitive programmers through the Frontiers of JavaScript at both Melbourne's Web Directions UX and also Canberra's Web Directions Gov: Revenge of the Sith. So if you're going to be in either city during May and you'd like to learn some of the more interesting things you can do with JavaScript, come along!

The second piece of Web Directions news is that my podcast from Web Directions North '08 has gone up. I posted the slides to The Future of Web Interfaces a while ago, but now that you can hear the words behind them they'll actually make sense. If you've got an application that can play MPEG-1 Audio Layer 3 files, then download the audio here.

News part 3: early bird pricing for WD UX and WD Gov runs out on April 11, so if you want to grab a bargain you'll have to dive in quick.

And finally, Maxine did such an accurately biting expose of my character that I've signed her on to write the screenplay for my biopic.

* May not have won an actual oscar

† The version of Australia which just contains Melbourne‡ and Sydney

‡ I just wanted to be able to use a double dagger

Accidental Clicks

" />

When you start trying to click on your Photoshop mockups, that's when you know you've got a good interface.

widgEditor 1.0.1

" />

As with most of my output, I originally coded widgEditor to satisfy my own curiosity about WYSIWYG editors. Its actual uptake amongst users has -- and still -- takes me thoroughly by surprise. And that's the main reason why I'm feeling a bit guilty at letting it languish in non-maintenance limbo.

Although there's been silence for almost 3 years, the development of widgEditor has continued in private, and I've changed the code enough to be able to release a version 2 ... soon. But for the moment I'm issuing a point upgrade to the original; just enough to fix the most annoying bug: the inability to use widgEditor in Firefox 2+ when it starts with no content.

The bug is -- rather strangely -- caused by the way that the stylesheets are created inside the widgEditor iframe. Previously, I'd just write an entire HTML document into the iframe using document.write() (shudder), but it seems Firefox doesn't like this too much. Creating the stylesheets using standard DOM methods gets around this bug. Internet Explorer still needs the document.writed way, so there's a small code fork. Problem fixed.

As a minor bonus to the point release, the code for widgEditor is now hosted on code.google.com, so anyone who has bugs, feature requests, etc. can now post them using the tools there. Version 2 will be going up there as well, so stay tuned!

Download widgEditor 1.0.1

See widgEditor in action

Future of Web Interfaces Slides

" />

Here are the slides (PDF, 69MB) for the presentation I gave at Web Directions South 2007, and updated to present at Web Directions North 2008, minus my dry wit (and stuttering, perplexed forgetfulness).

Actually, it's minus a fair bit. This presentation was chock full of video -- 1.7GB worth, to be exact. So you won't get any of that. But a PDF might do you some good, so here it is (PDF, 69MB).

The presentation itself is about where I see web design heading in the next couple of years. In a nutshell: designs will become even more flexible and users will get control of the interface.

Enjoy!

Update 07/04/2008: The podcast is available for download.

Anti-Santa

" />

It's December 20, so you should be pretty sick of Christmas shopping by now. But don't let that acidic Chirstmas vitriol fester in your stomach until it explodes in a shower of turkey giblets on December 25. Let it out at Anti-Santa and save some rainbows for your relatives during this festive season.

My personal favourites include:

Brought to you by a 72 hour coding spree at the Nerf Palace.

Hands on gets a thumbs up

" />

Last week I did some JavaScript workshops in Perth, and I have to say: it was the most fun I've ever had inside a classroom. (As a teacher or a student.)

The normal procedure for workshops (including mine) is that the "lecturer" stands up in front of the "class" and delivers 7 to 8 hours of content. That's you (the student) listening to me (the teacher) for 7 to 8 hours. Sure, I might get you to raise your hand a few times, force you into thinking about getElementById for a few minutes, and maybe even spur you into writing a few things down. But at the end of the day you leave with a pocketful of slides and a head full of DOM jargon. I have no idea whether it was helpful to you, or whether I was just drying my throat out.

Last week was a revelation though. Because it was on-site training, I could rely on everyone having access to a computer, so I decided to pack the workshop full of practical exercises -- exercises where the people I was talking to got to put the code into practice.

I have no idea why I didn't do this before.

Once someone jumps in front of a computer and starts trying out what you've told them, that's the only way you can find out whether they get it. And if they don't? Well, then you make sure they do -- you can take a look at their code, see what they're doing wrong, explain some of the points that matter to them and make sure that they're confident enough to code up something by themselves.

So from here on in I'm stating a new mission objective for workshops: get everyone in front of a computer and don't let them leave until they can code. :D

My next JavaScript workshop is going to be in Vancouver, Canada of all places, at Web Directions North 08. We're going to be skipping all the boring junk so we can dive straight into the fun bits, so if you'd like to join in register at the website and REMEMBER TO BRING YOUR LAPTOP!