Software As She’s Developed

Convincing argument that it really is different this time round, compared to the days of “pen computing” and windows tablet edition at the start of the decade.

Microsoft always loved the stylus, but most people hate it. Apple and others understood that actually touching the screen is far more appealing than using some funky pen. And touch requires an entirely different user interface, which Microsoft was unwilling or unable to build into Windows until Windows 7. The casual observer might believe that the usability difference between pen and touch is small. But using a pen is an unnatural act, one that until very recently only a tiny minority of people ever engaged in. The psychological payoffs for using a pen on paper are the tactile feel of the paper, the instant feedback of the trail of ink and the physicality of stacks and files and binders of paper notes. Pen-based computer systems don’t offer any of those payoffs.

Touch is one of seven reasons cited. Others include the rise of e-readers, HD video on demand, app stores, and mobile-specific operating systems like Android.

A further reason would be improvements in soft keyboard technologies. That a soft keyboard could work, as on the iPhone, was a surprise to many; we probably won’t see those funky projected keyboards taking off any time soon. While some will say the tablets aren’t for performing serious work, everyone needs to type occasionally, at least to perform a web search.

Another reason is battery improvements, though we’re still a long way off from being able to play HD video, surf the web, and chat on skype, simultaneously and all day long.

Great, now we have all the reasons in the world. Unfortunately, we don’t have the CrunchPad anymore and the Apple rumour is just that. Will tablets really take off? For all the arguments, there remain some unanswered questions.

Most important, the form factor; although lighter and thinner than ever, they are still awkward to hold, maybe awkward enough for only geeks to love and certain professionals to tolerate. This is an area where Apple surprise us just as they did with the MagSafe power adaptor. It was innovative, unexpected, useful, intuitive, and a product of the physical world rather than the digital world. They’ll do well to repeat that feat with some kind of stand for the rumoured tablet.

The other thing is connectivity. I can’t see these taking off in a big way unless they ship with a 3G sim card, like the Kindle. We’re finally entering an era of more SIM cards than people and it makes a whole lot of sense – at least among retail consumers – to treat bandwidth like oxygen, instead of having to bash wifi into working for us. It’s true that wifi itself works well these days – the client detects the type of encryption and asks for a password. The problem comes when it’s restricted, i.e. a hotel has to give you a special password or you have to pay for it via a website. That’s where the friction comes, and it gets even worse with these systems that proxy everything and kill the session when you leave the browser (say, to send a tweet from a twitter app). Many of us will still need wifi as bandwidth isn’t ready for high-end uses like HD video – and also while data roaming charges remain stiflingly high – but a built-in sim card is the only way forward as the default mode of connectivity. I’m currently paying £7.50 per month (~ $12) for 3GB/month download, and came with a new USB modem. At a rate like that, it’s a no-brainer for tablets.

These are the slides from my ScaleCamp presentation, covering various techniques for various styles of On-Demand Javascript, including Script Islands, “async” and “defer” attributes, and library support.

One of the interesting things at ScaleCamp is that many of the folks there are dealing with third-party advertisers and analytics providers. This leads to very different on-demand Javascript drivers from those of us mostly dealing with enterprise web apps. If you’re a small fish in a big pond, you’re pretty much held hostage to the script tags of leading advertisers and trusted analytics companies in your industry; if they serve the script slowly, it blocks your page from loading and therefore messes with user experience. That’s why some of these new techniques are so critical, notably the dynamic async script tag technique the Google Analytics came out with at a very timely moment, just a couple of days before this presentation.

"Script Island" is what I'm calling a design pattern I alluded to here. The pattern is to embed Javascript in your HTML like so:

When the page loads, the browser should say "I don't know what 'x-deferred-script' is, and therefore ignore the concents of the script tag. You eval it manually later on, using something like eval($("script#greeting").html()); This is similar to Google's trick of embedding Javascript in comments, but has the additional benefit of keeping Javascript where it should be, in a script tag. This way, it plays nicer with code editors (e.g. Vim happily handles syntax highlighting) and analytical tools. (Technically, those tools should probably do the same as browsers and not treat anything inside a script tag as Javascript, but fortunately for us, they do.)

Script Islands are useful in the following situations:

• With a complex web app - lots of Javascript - where you want it to load quickly and without lots of processing or round-tripping back to the server. Sometimes, it's a better user experience to load the lot in one go, show something, and eval() the rest of the Javascript once the basic app is running (perhaps in anticipation of a separate "page" or another part of the application). This is a special case of Predictive Fetch; it makes sense Google would use (a variant of) Script Island for the mobile edition of GMail, where round trips to and from the server are expensive.
• With a single-page application (SPA) like TiddlyWiki, where all the code is inside the HTML file. Each of the script islands is a separate module, and a microkernel is responsible for loading the scripts according to different rules. For example, the scripts might contain "depends" attributes to declare they depend on other scripts, so the microkernel sequences the script loading. Or another scenario might be that the user has some control over which scripts get loaded; instead of deleting the other scripts from the file, you keep them around in case the user wants to repackage the SPA, with a different set of scripts.

BTW I originally used <script src=""> to trick the browser into not evaluating the script tag's innerHTML. Thanks to Jeremy for coming up with the more elegant alternative of a type=x-tiddler (which I stated above in the more generic form type=x-deferred-script).

It's five years and a thirty-seven minutes today since I hammered out those momentous first words on this blog:

I started the blog primarily as a space to host podcasts. How irony!

It's been a blast. Great way to reflect on things, get feedback, etc etc, you've heard it all before about blogging anyway, but it's true. Thanks to everyone reading this.

I must especially thank James Robertson, whose talk at SPA 2004 helped explain what blogging is really about.

Update: Digg celebrates its fifth birthday. I never noticed Digg started the day after this blog. If only I'd added voting ...

Update - some links:

Pauls deck/audio (needs a bit of time to buffer)

slide deck

Standard live blogging alert

I'm here at GumTree offices in Gumtree, thanks kindly to @cyberdees++ letting me know about this lunchtime talk. Paul Annett (@nicepaul) just gave a fun talk about "oooh that's clever" design, which contains lots of fascintating ideas and examples around the subtle things, the hidden and unexpected and often functionally pointless, that delight people and get them talking.

Is this Stuff Relevant? 13 Million People Can't be Wrong

To demonstrate how people are fascinated by little secret details, he begins talking about his magic trick he posted to youtube, "This'N'That magic trick" with no less than 13M views. The interesting thing is the attention to detail people have, where the most commented thing is the few frames in which the third "magic card" is exposed. It's like they have now discovered a little secret they can tell their friends about.

Offline Examples

You see similar things offline too: (sorry no links - I'll just let you google these)

• The hidden arrow in the FedEx logo.
• The hidden bear in the Toblerone "mountain" logo.
• The Aerosmith logo, which still says Aerosmith upside-down.
• Darren Brown's Trick or Treat logo, where the Trick is the Treat logo upside-down.
• The "truce" logo, where another "truce" fits into it.
• The Venetian Snares logo.
• Mickey Mouse symbols - Disney hides them in different places, e.g. a silluoette in a picture, a figure in a man-hole cover in the theme park, and even a field on Google Maps.
• The bottom of an Innocent Smoothies carton, containing various messages.
• The inside of Moo card packages, which contain little hidden cartoon figures when you dismantle them.

Hardware and Software Easter Eggs

This has been going on a while in technology with easter eggs. There are hardware easter eggs such as a cheetah on a microchip. Look at the glow an Apple Mighty Mouse makes. An irregular pattern? No...it's definitely a real mouse outline. And of course software easter eggs, e.g. "about:mozilla" in Firefox, the saga continues.

The parallax employed on the Silverback website is a well-known example of this. (In fact, @psd talks us through it on I Can't Believe It's Not Flash.) Parallax has been used elsewhere since then. The holding page for twequency used it nicely. Tweet1 also has some lovely effects like this, and also has an easter egg figure (at least one) appearing. A lot can be done with parallax, e.g. you could use it jumble sites around. The effect here is just a demo, but could be expanded to something more.

It adds to the brand of a large company when you see it has a sense of humour, e.g. zooming into Google Moon would give you yellow cheese. Try "ascii art" or "recursion" searches.

dConstruct site had a nice easter egg where the hidden top bar would switch different stylesheet. Some people said it detracts from the experience, breaks proper design principles, etc.; but the point is, no, users can still get everywhere, it's just a bit of a delighter for people in the know.

Transparency

There are many interesting uses of transparency:

• Modernista has a funnny iframe idea. Good example of transparency, which is a concept that's under-used. Skittles also did this, much controversially, partly because they copied the idea from modernista.
• This trailer shows fake browser with things breaking out of it to promote the movie's 3-d ness.
• fatuus.de
• CSS Zen Ocean (zen garden project)
• webleeddesign.com
• Wario Land video breaks your expectations of YouTube, such a well known site structure. Good example of a commercial application. Likewie, iPod Touch ad on Yahoo! Games.
• HEMA similarly breaks your expectations of an e-commerce site.

What's the Point of All This?

Kano Model of Customer Satisfaction: 2 dimensions. Customer satisfaction and Execution. "Performance needs" tend to improve both at the same time, e.g. quick hotel check-in; quick e-commerce delivery. "Basic needs" where execution is higher won't delight (ie improve satisfaction) but they are just expected and their absence will cause negative satisfaction. "Excitement needs" - e.g. these little design features we've been talking about.

These change across time. What excited you last year becomes expected this year, i.e. as enough time passes, the expected need becomes a basic need.

Q&A

I asked paul about how to get these features known, when you obviously don't want to just blab about them on your blog. With big sites, you can rely on people to discover these things by accident or investigation, but with little sites, they could sit for years without anyone spotting them. He mentioned it could be as simple as telling a few friends and see where that goes as one route. A more technical trick is positioning some text outside the document. Users will see it when they zoom out, and it would also be interesting to experiment with an image at the edge of a document turning out to be something unexpected when you zoom out to see the whole thing. "View Source" is another common thing you can play with. Tangentially related are playful copyright messages and 404 pages.

Someone mentioned "contextual delighters". Things specific to certain users. e.g. "Welcome fellow Reddit user. Could also do the "styling visited links" hack to freak people out. Who's going to make a site where your website tries to log into other websites using the same username and password, then says "actually you used the same password on flickr, so please change it"! (Paul urges us not to try this at home!)

standard live blogging warning

Continuing on from part 1 ...

Phil Hawksworth: Playing with Each Others' Toys

Phil describes the open source spectrum, from open-fan to open-curious to open-skeptic.

Open source is about sharing, so in that spirit, he's going to show us some toys he's made.

First up, Polaroiderizer. One of his lessons from this was don't register a domain name that can be spelt and pronounced in many different ways! But back to Polariser...

The tool is made with simple technologies, requiring nothing more than some text files. HTML and CSS, JQuery, Flickr API. Able to be put together in just a couple of evening's work.

Next specimen is Pinboard. Similar tech. This time, there's a server, so he's used the excellent Sinatra. Along with Ruby and SQLite. He did the whole thing in Heroku, pushing to it via Git.

And then there's vlolly, Phil's ticket to an early retirement as soon as it goes viral. Another open source project with Ruby, using base62 gem to generate unique IDs.

Rain Ashford: Open Source Gaming for Handhelds

Having convinced us she is a true gaming geek, Rain walks through a few of the nicer open source games out there, including:

• Malice
• Lemmings
• Word Up!
• Meteorea
• Setsuzoku no Puzzle (hosted on "DS Scene" so it must be cool)
• Pocket Physics
• NitroTracker
• FreeDroid Classic (based on C64 "Paradroid")
• XRoar (Dragon emulator for DS and GP32)
• Nethack (DS and GP32 ports)- still going on strong

This session yielded the most challenging question of the night: Can you smell a wumpus?

Robbie Clutton: iPhone Dev

What's all this objective C? A bit like C and C++, but also message based like Smalltalk, which is dynamic but not, and object-based like Java. In other words, it's a different paradigm to what you're probably used to and it gets tricky working out which languages to take design patterns from.

When Robbie started looking at how developers can embed a web view into their app, he started wondering about the possibilities of developing an app that's mostly a plain old web app. Doing this would make development incredibly easy and you could get data from the local device in addition to the cloud. However, you don't get any device integration, and some events like gestures don't translate well.

Enter Phonegap. It's open source, cross device, and gives you integration with native features like vibration and the accelerometer. The way they do this is quite neat - your app basically connects to a phonegap server. So you do things like vibration by making standard Ajax calls. (The calls actually go to URLs with "gap://" protocol). Demonstrating the power of open source with a strong community, Robbie's submitted patches which have gone back into the product.

HTML 5 is a better way to do it in some respects. One of the obvious downsides is it doesn't show up as a native app, though you can still provide a HTML5 manifest so the app loads straight from the phone. There's also the question of talking to specific device features. You can do it in a limited form with device-specific meta-tags, but of course it ruins the whole standards-based approach to web development; move to another phone and you've got a port job ahead of you.

One of the nice things about this approach is you can use it elsewhere too, e.g. if you can put the whole thing in standard HTML, CSS, and Javascript, you just create a simple XML file, run "adl application.xml", and you now have an Adobe Air powered desktop app.

standard live blogging warning

I'm here at TheTeam offices in London Bridge, with a number of my Osmosoft colleagues for this open source event.

Event Announcement

The agenda:

• Iain Farrell, Canonical - Ubuntu Update
• Julien Fourgeaud, Symbian - Managing the Symbian community
• Jeremy Ruston, Osmosoft - HTML5 and the slow death of Flash
• Leisa Reichelt, Disambiguity.com - Drupal 7 Update
• Phil Hawksworth, The Team - Playing with each others toys: Developing with open technologies
• Rain Ashford, BBC - Open Source Gaming for Handhelds
• Robbie Clutton, BT - iPhone development using web technologies

Canonical: The Ubuntu Developer Summit

Iain explains the process of updating Ubuntu. Happily enough, the release cycle is 6 months, coinciding nicely with these OSSAT events, hence the trend is set for an update each OSSAT.

Every 6 months, there's a big Ubuntu shindig; this is (I think) just after the last release ships. All ~240 employees invited and ~30 invited people from the community. Room for talks - the schedule is always evolving even during the conference - and spaces for just hacking. Very online too for those who can't make it - stereo recording in every room. All the audio, mixing, publishing, and so on is power by the magic of open source. Naturally.

The design process is generally speaking 6 months ahead of the development process, i.e. in cycle t, they're thinking about what they'll be developing in cycle t+1. For users, a 6 month cycle means lots of incremental improvements, as opposed to

Julien Fourgeaud: Symbian's Community Programme

Nokia started as an alliance and Nokia then purchased Symbian Ltd. When that happened, there was a move to open source the code. Julien explains the ecosystem - 90 people maing up the foundation (people in US, UK, Finland, Japan, China, elsewhere) - working with a large community of consumers, ODMs, OEMs, and operators. They often run BOFs embedded in other conferences.

What's Symbian doing to get consumers what they want? They're creating initiatives to get agile and engage in dialogue going with consumers. [I would have liked to see more on this, but it sounds like they're just at the start of the path here.]

Of possible relevance to the next talk, Symbian's portal is a Flash-heavy representation of standard web technologies such as hyperlinks ...

Jeremy Ruston on HTML5 and the Slow Death of Flash

Jeremy points out he's dogfooding by presenting in Cecily, his 3D zooming and panning interface powered by open web technologies. He points out the anti-Flash vibe isn't new, with Jacob Nielson having declared Flash "99% bad" back in 2000. A few of the problems with Flash are:

• Battery drain
• Crashy
• Can't exploit hardware acceleration (except video and certain blitting operations) - the operations of HTML5 have been designed to take advantage of it
• Big opaque ball of bits - can't reach in and get at the data/content inside
• Controlled by media interests (e.g. to ensure ads are watched)
• Breaks the web UI, e.g. browser navigation, text selection, accessibility
• Not properly open - the license stipulates for what purposes you can use it (restricts uses such as downloading video)
• Not compatible with open source - can't ship as part of open source; so a pain for users as it requires a separate download.

Jeremy shows Chrome Experiments and I Can't Believe It's Not Flash (the site I made with @philhawksworth which should really be launched at some point. ahem.)

He walks through the history of Flash. He explains there was a time when they looked quite innovative, but it's become more closed systems and walled gardens, with silly license fees. So a young person who wants to get into the industry is required to pay 500 quid to get started with it.

Where does HTML5 fit in? A couple of weeks ago, When Can I Use launched, and the meta-message of that site - when you look at the complicated matrix of HTML feature support - can be interepreted as "Damn, HTML is complicated". This led some to say - why would I want to use HTML5 when I can get it up and running, cross-browser compatible - with Flash right away. So Jeremy's call to action is to take a few steps back and build some kller authoring tools that let us do similar things in Javascript.

In Q&A, @psd points out that Flash lets you make nice toys, but HTML5 lets you build something better than Flash, i.e. the data inside there.

Drupal 7 Update

Leisa Reichart explains the design work going on with Drupal 7. Where most open source (including Drupal) is done bottom-up, grassroots, stuff, there's an element of top-down design here. Leisa's talking about "open source design" (#d7ux), where she's spent around 85% of her time engaging the community to help with design, rather than just doing it herself. The community includes end-users, agencies whose customers are using the CMS, and also other designers and usability studies. (Reminds me of the message in the community session at OWF - don't just engage programmers, but also translators, designers, tech writers, etc.)

They set up a WordPress, yes WordPress, blog to act as the community portal; because (a) Drupal takes too long to get a very nicely designed blog; (b) it sent out a message to the Drupal community and got them engaged.

She also shows a nice eye-tracking study, something you don't see much in open source land.

I only came across the MHTML image hack over the weekend, while listening to @jeresig on the new jQuery podcast (incidentally not the only jQuery podcast to be launched in the past week or two).

The MHTML image hack lets you embed images with text, just like ye olde data: URI hack, but in a way that works for IE6. MHTML is MIME for HTML.

Of course, I immediately wondered if it could work in a single-page web app like tiddlywiki, and it turns out it can, though my quick exercise still has some problems.

IE6 TiddlyWiki images demo here

As I wrote on the demo itself:

Normally, images are contained in a separate location, pointed at from HTML IMG tags or from CSS background-image properties. However, Tiddlywiki is a style of web app where everything resides in one file. So how to include images?

The usual hack is to embed data: URIs (http://en.wikipedia.org/wiki/Data_URI_scheme). However, no go for IE6 and IE7. Hence, a "newer" technique - newer meaning recently discovered. That is, MHTML (http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/).

I was curious if MHTML worked in single-file HTML pages, reading off a file URI, and to my surprise it does. That said, it's not perfect at all. Firstly, I had to hard-code the location, because I don't know how to refer to "the current file" within the MHTML link. (I suppose a workaround would be to output the image file and refer to that with a relative URL, but we lose the benefit of everything being in one file.) Secondly, I played around with various base-64 images and this arrow one (from the phpied.com demo) was the only that worked .

So it's a proof-of-concept with many gaps left for the reader to fill!

Hopefully people play with this further. At 3002 days old and counting, your grandpa's browser isn't going anywhere fast.

I just heard on the new jQuery podcast that jQuery docs will be getting comments. jQuery just got a whole - even more - useful. This is direct from the horse's mouth, an interview with jQuery head honcho John Resig.

I've felt for a long time jQuery has been ahead of the pack with its documentation, and since then both jQuery and its docs have gone from strength to strength.

One thing I was still missing though is user comments.

PHP leads the way here, with the official API docs allowing user comments at the bottom (example). No-one can anticipate all the issues that will arise, so why not open up docs to the developer community? Allowing user comments is also an easy way to help keep the docs up to date (if something of a compromise.) It could also be done as a wiki, if the wiki is managed well. (The Rails wiki is a good example of a well-maintained wiki that receives frequent contributions from people in the know.)

I was missing it until I heard that announcement. Again, jQuery's leading the way.

I realise there are spam complications, but user comments are a no-brainer for making documentation useful. I continue to derive huge benefit from user comments. (To wit: The user comments about random number seeding were of vital importance in the making of the site I realised earlier today. I use them pretty much every time I have a PHP problem.)

I've even thought of making such a project myself, so much did I miss doc based comments.

The docs are being migrated from MediaWiki to WordPress. FWIW I think the OWF could benefit from a similar architecture if the wiki is going to engage with the community. As I've learned from AjaxPatterns and maintaining the tiddlywiki comments plugin, most people would rather append comments than updating a wiki. Updating a wiki is intimidating for some, and in any event, requires much more thought in order to make it coherent. Comments tend to be easier to moderate too because of their atomic nature.

Anyway, great news for jQuery and the community!

What is "IE6 is Older Than Your Grandpa"?

IE6isOlderThanYourGrandpa is a site I launched today to commemorate IE6 turning 3000 days old. A milestone like that should be an interesting piece of trivia, like celebrating the birthday of the tape recorder. However, IE6 is still in wide usage today, making this milestone more tragedy than trivia. 3000 days in internet time is the equivalent of several decades in human time; we've seen many critical developments on the web, none of which were anticipated by IE6.

I know something else that IE is older than.

Great, please add it to the comments below or let me know, preferably with a wikipedia link. If it's well known to the global community, I'll add it to the site.

How do I know if I'm using IE6?

Visit this site to find out.

(To those who can't believe this question has any purpose...see here.)

How does IE6 hold users back?

IE6 holds end-users back in many ways. It runs dynamic websites slower than modern browsers. It goes against many web standards, so applications often don't work as well. As time goes on, and it becomes more and more ancient and less and less popular, web developers will simply stop supporting IE6 for certain features, or just give up on supporting the browser at all. Finally, modern browsers have features designed to make them more helpful in terms of searching, bookmarking, and viewing websites. They are also more secure in many cases.

How does IE6 hold developers back?

Web developers have to support users running many different browsers inside many different operating systems and devices. Fortunately, there are standards established to provide some consistency across all these platforms. Unfortunately, IE6 significantly deviates from these standards. Thus, developers have to pour substantial resources into supporting IE6 alongside other browsers, at the expense of making a better website. This is why you get web developers constantly complaining about IE6 on blogs and twitter.

If IE6 holds developers back, how come the examples you cite - Google Maps, YouTube, and others - still work in IE6?

Firstly, there's a selection bias here; to make examples accessible, I've specifically chosen sites that, though they are revolutionary, do work in IE6. The truth is that no major site would ignore IE6; it's too big to ignore. The trend's changing though; even Google released its new hotness - Google Wave - without IE6 support. The team apparently found it too much work to support this relic of a browser, so they suggested IE6 users install the Chrome Frame plugin; if you're doing that, you may as well just install the Chrome browser. There are also many smaller sites, demos, and browser extensions that don't work in IE6 and will never work in IE6. Even for sites that do work, the experience is typically faster and richer in modern browsers.

In the case of an app like Maps, Google has directed considerable resources and brains to solving the problem of building something innovative, while still supporting IE6. Smaller developers simply don't have the option to do that.

Furthermore, when you see video, sound, and rich graphics inside IE6, you're not really looking at IE6, but Flash, Silverlight, or Java installed on top of IE6. These third-party technologies are becoming redundant, as modern web browsers implement open standards for video, sounds, and rich graphics. Apart from the lock-in aspect inherent in many third-party plugins, there are several compelling reasons to prefer open web technologies.

Is this an anti-Microsoft campaign?

No. Compared to most of my peers in the tech community, I actually have a lot of respect for what Microsoft has done to further access and ease-of-use in the IT industry. Oh, and for the record, I do not know and never have spelt Microsoft with a $ in its name . I am speaking here not about Microsoft, but IE6, a specific product Microsoft released at a specific time in the distant past. The same company has since released two more major versions, so if you prefer Microsoft, look at IE8, not IE6. According to Microsoft, IE8 is "faster than ever", "easier than ever", and "safer than ever". Compare it to Firefox (my personal favourite, let it be known), Apple's Safari, Google's Chrome, or Opera; or many other niche options, and choose the one you like the most. Best of all, they will all cost you a big fat zero. (This is not to say that IE8 is perfect; it's still the least standard-compliant of all these options, but it's big step up from IE6.)

The real question is why corporate IT departments continue to mandate IE6. There are a range of reasons for that, some reasonable and some very irrational ones, but I'd rather focus on the benefits of upgrading and leave the cost-benefit analysis to others.

Where can I find more info?

Here.