"web development" in Weblog

(ux + ui + product) * (design + hacking)

On Wednesday evening I had the pleasure of speaking at TEDx Newcastle, kindly organised by the good folk at Codeworks. My talk was about the memory of experiences.

Unless we make underwear or the like, our products probably spend most of their existence in the memory of our customers. In Stories and Experience I run through what we can do to help ensure that the experiences we design become memorable stories after the fact.

Slides (on Slideshare)

Books

QIF Converter

25 September 2009 · project · web development · wesabe · finance · heroku · ruby · qif

I’ve been using Wesabe for a few months now and I love it. I’m finding accumulating financial data quite addictive. Unfortunately, of the banks I use only my current account has any kind of export. I wrote a little script to parse my downloaded statement HTML into QIF files and over the weekend I decided to polish it a little and slap it on Heroku.

The result is my QIF Converter. It’s dead simple: you copy and paste from your online transaction into the textarea, specify how it’s formatted and hit convert. That’s pretty much it. If you want to import the transactions into your own financial planning app then you can just download the QIF file. If you’re using Wesabe and you have the downloader plugin installed you can just hit upload to Wesabe and you’re done. I’ve been using it to import the ridiculous PDF statements my bank insists on pensioning my old transactions into too. Bing!

Learning Ruby

27 June 2009 · web development

A friend of mine wants to learn to program. I recommended either Ruby or Python and petitioned the Lazyweb for good places to start. In case they’re of use to anyone else, here are the recommendations I got back:

Poignant Guide

Way out in front is the Poignant Guide. It’s by why. It starts with a cartoon strip. Awesome.

Tryruby

An in-browser console. Allows you to dip your toes in the water without having to get your systems all set up. Bonus for the terminal-shy.

Hackety Hack

Calling itself the “coder’s starter kit”, Hackety Hack seems to be a self-contained, multi-platform training course, including a console, tutorials, cheat sheets and a place to store your own little apps. It’s currently being re-worked but worth keeping an eye on.

Have you ever taken a look at the Google Social Graph API? In their words it:

returns web addresses of public pages and publicly declared connections between them.

Eeerrrr, okaaaay. What it means is that Google can connect the various profiles you have created for yourself around the web - on Flickr, Last.fm, Twitter, and dozens of other sites.

They do this by looking at the links on these profile pages and the declared relationships of those links.

http://gmpg.org/xfn/ http://www.foaf-project.org/

And there’s one relationship that doesn’t seem to get as much attention as it might: rel=”me”. This tells the reader/parser that the link’s href attribute refers to the page owner. Most of my profiles list my website (donotremove.co.uk).

That only makes the claim in one direction. Basically, it’s an unsubstantiated claim. To reassure Google that I really do own both donotremove.co.uk and twitter.com/mikesten both of those sites need to claim each other. A kind of double opt-in. And this is where “me” pages come in.

A “me” page is a place to claim your distributed identities.

http://socialgraph.apis.google.com/lookup?q=www.last.fm%2Fuser%2Fmikesten%2F&edi=1&edo=1&pretty=1&callback=&fme=1

It’s taken me about 4 years to get around to making one of these for myself but having finally made a “me” page, I thought I’d run through the concept.

Frankenstory

8 April 2009 · project · web development

As a kid, did you ever play that game where you write a few lines of a story, fold the paper over and then pass it on? Well, I did but I’d completely forgotten about it. Fortunately my friend Tone hadn’t…

The game’s called Exquisite Corpse or Consequences - depending on where you come from - and is ludicrously good fun. Tone grabbed his mate Suzie and with him acting as middle-man Suzie and I gave it a try over email:

Thomas the tank engine rolled into the station, just as he did at 6:43 every morning. The platform was quiet - it was still too early for the morning rush of commuters - and he coasted to a halt, perfectly in line with the lights at the end of the platform. But before he could open the doors to get the hell outta there, the roof came crashing down. “Man!” Shouted Rock Master Scott, “the roof is on fire!”… the Dynamic Three jubilant that their jail was finally burning yelled in unison “we don’t need no water let the motherfucker burn!”. Scott smiled… they were free now. Together they fled into the forest, shooting furtive glances back the way they had come, desperately hoping no one had noticed their escape. No one had and before long they hit the main road back into town. From the safety of the thick undergrowth they peered left then right to see Killa Gorilla cooking dearest Kevin on a spitroast. Hooting and banging his chest, they knew they’d make dessert if they stepped out. With no way back they thought fast; “what would Jesus do?” or “what would Rambo do?”. Pulling out their machine guns they were home for tea.

The End

It was so much fun that we decided to make it as a little web app! Suzie as designer, me as developer (unusually) and Tone as wrangler. The result is Frankenstory, which is loads and loads of fun! Give it a try, let us what you think, and hopefully tell your friends.

A couple of mates of mine recently came back from Tanzania and looking at their photos, particularly the ones of Zanzibar with the beautiful mix of what looks like Arabic, Indian and Roman architecture, got me thinking. I know very little about Africa between Egypt and South Africa. So I bought a couple of books. But they all strongly advice checking out current travel advice before making any plans. Over on the Foreign & Commonwealth Office’s website they have a nice long list of places you should and shouldn’t go… Which is great except that I discovered that my geography is patchy at best and I can’t place half the African countries on a map.

I decided that what I really needed was a map. A little scraping, some geolocation (with a manually added exception for Georgia to make sure it got pinned next to Russia and not South Carolina) and a Google Map later I had something working. Nothing too fancy but it’s already proved to be dead handy for me so I thought I’d put it live. And thus I present the Foreign & Commonwealth Office Travel Advice map.

I have the honour and terror of presenting at @media Ajax on home turf this November. It’s a privilege to be speaking alongside the likes of Brendan Eich (creator of Javascript), Douglas Crockford (inventor of JSON), John Resig (JQuery lead) and about a dozen other top dogs.

In a lineup like that I clearly can’t talk about nuts and bolts Javascript. Instead I’m taking a slightly unusual tack for me: revelations. Since Ajax came along my job has changed in ways I wouldn’t have predicted. Technically I’m a flavour of designer yet after many years of specialising I’ve found myself having to skill up again.

  • To keep a handle on what the rest of the team produce I’ve become a testing fanatic;

  • I’ve had to go back and relearn how to program - not to necessarily produce back-end code but to understand what the real implications of my design decisions are;

  • I’ve been converted to Agile practices as a means of effective collaboration.

None of these things are traditionally within the remit of ‘design’ but they all feed into producing a successful app. To try and describe these changes and what I’ve done about them I will be presenting But I’m a Bloody Designer! on the first day, straight after the keynote by the Ajaxians.

So, the lineup’s great, it’s in London. @media Ajax: coming soon. Say hello if you decide to come…

I’ve just done my Building Better Webapps presentation at the Spring Experience in Miami. I it went pretty well, as far as I can tell, but I realised that there were a whole bunch of links I wanted to give out that weren’t on the slides. For anyone who’s interested here they are, and for anyone who dragged themselves out of bed on a Sunday morning to come see me speak: Thanks, I really enjoyed it! Many thanks also to all the Spring folk who’ve made my weekend thoroughly enjoyable.

Introduction
Don’t bet against the internet
Web standards
Progressive enhancement
Graded Browser Support
A-Grade Browser Support Chart
HTML
HTML Mastery Links
CSS is Worthless
Microformats
Bill Gates: “We need microformats”
CSS
Div Mania
Modular CSS
A CSS Framework
Playing Nice with the Other CSS Kids
CSS: Specificity Wars
Specificity
How To Clear Floats Without Structural Markup
hasLayout
Javascript
A DOM Ready Extension for Prototype
The JavaScript Library World Cup
Notes on JavaScript Libraries
Javascript and Accessibility
AJAX and Screenreaders: When Can it Work?
Making Ajax Work with Screen Readers
FlashAid
Bringing new life to applets with Ajax
Web 2.0: Is Converging Towards the Desktop Good?
Unobtrusive Javascript
RailsConf Presentation Slides and Example Code
Hijax
The Enron Explorer

This honestly wasn’t planned but you know Jeff Skilling was just sentenced to 24 years this morning for his part in the Enron collapse? Well it just so happens that while developing the SONAR application at Trampoline we decided to use the Enron email archive, which was made public as part of the FARC investigations, as our test data set. The results were so much fun that we’ve turned it into a standalone technology demo… It’s been in limited release to friends and family for the last few days but with the news today it seems to be spreading beyond our control. There are a few bugs in there (mine are almost all back button related!) but mostly I think it works. So, without any further ado I give you the Enron Explorer.

Just to keep things topical, it’s also worth mentioning that Jeff Skilling is responsible for my absolute favourite email out of the whole lot. How’s this for the head of what was the 7th largest company in the world: “Fuck you, you piece of shit. I can’t wait to see you go down with the ship like all the other vermin. Smug, paranoid, unhappy mother fucker. Eat shit.”

So IE7 has finally been released and the inevitable security exploits have already started surfacing. I’m very glad to see it, to be honest. The new CSS support is very welcome, even if it is playing catchup to the rest of the field.

And I’ve got it running standalone too. Jon Galloway’s IE7 Standalone works just fine with a single change to the ‘IE7 Standalone Setup.bat’ file.

Download IE7-WindowsXP-x86-enu.exe from Microsoft, making sure you save it instead of running it. Follow all Jon’s instructions but before running ‘IE7 Standalone Setup.bat’ change: IE7RC1-WindowsXP-x86-enu.exe /extract:Installation /quiet to IE7-WindowsXP-x86-enu.exe /extract:Installation /quiet.

That’s it. All done. Continue following Jon’s instructions and it should all just work.

Page 1 of 5

Getting around