Archive for August, 2011

Our leaders are all in Foreignland!

With riots kicking off left right and centre, an article by Penny Red called Panic on the streets of London keeps reappearing in my timeline.

Apart from some hyberole and cliche (“watching my city burn”, “society is ripping itself apart”), it’s a good article. I find her statement “Riots are about power, and they are about catharsis” to be incisive.

But one thing really grates. Primarily, I find this to be disturbing: “The so-called leaders who have taken three solid days to return from their foreign holidays”

Firstly, and least importantly, why the word “foreign” there? Is it to imply that going abroad is the hallmark of a cigar-chomping, caviar-snorting top-hatted capitalist? It looks as if “going to Foreignland” is code for “disgustingly rich” which, at the turn of the last century it might have been. But it ain’t now.

Most importantly is the implicit assertion that if only our leaders had returned earlier (or not gone to Foreignland at all) everything would be alright. If only our wise paternalist leaders had their hand reassuringly on the rudder of state, there wouldn’t be unrest.

This is, of course, preposterous. This lazy belief in Leaders is prevalent in the right and the left (I’ve seen lots of comments on Twitter from left-leaning friends deriding the fact that our leaders have been on holiday. In holiday season, the bastards).

If only David Cameron hadn’t cut this budget, it implies, Dwayne Scumbag wouldn’t be nicking from an injured boy (video). If only Nick Clegg/ Boris Johnson / Ed Milliband were sitting in their office in a suit and tie, it’ll be OK because it’s not the rioters’ responsibility and it’s not our responsibility – we can all turn on The X Factor and go back to sleep.

But David Cameron, tosser though he is, did not seize power in a military coup. We – as a society – elected him, and no-one seriously expected him to do anything else other than gleefully rekindle Thatcherism.

We – as a society – enjoyed the practically free credit that allowed us to stock up on the shiny consumer durables that are being looted now. And we as a society tell each other that ownership of Brand X or machine Y is so important to your value as a human being that you should break a window to acquire one.

And if we as a society are so infantilised that we believe that we’re helpless until a Leader comes back from Foreignland, smiling benignly to roll up his sleeves and clean up our poo, then we’re in even bigger trouble than it appears.

What worries me is that once Our Leaders come back to take charge, to the relief of both the right and the left, they’ll feel the need to show they’re in charge by Utterly Condemning the Mindless Violence and then getting out the rubber bullets and water cannons. Because whatever it is that’s going on, rubber bullets and water cannons won’t cure it.

HTML5, hollow demos and forgetting the basics

My heart sinks when I see the latest flurry of tweets about some new “HTML5” demo. As someone else said, it’s usually a warning that you’re about to visit a browser-freezing lump of JavaScript without a hyperlink in sight.

I feel the same way when I see someone draw an image of the IE logo, a map of Paraguay showing every branch of Greggs, or a gyrating representation of Konnie Huq’s spleen using only CSS, because I know that the HTML will be a series of empty <div>s with no content at all.

“But it’s just a demo!” you will protest. True. And demos exist to kick the tyres of a technology, to see what it can do and what its limits are. But people learn from demos. People pick them apart to see how they work, and hack them about. So using fundamentally the wrong technology to achieve an eye-candy result doesn’t help anyone learn.

The biggest danger is when that demo mentality leaks into production websites.

The Web is about content. Sometimes that content is video, but we can ensure a text-based representation exists for older browsers, lower-specced devices, slower bandwidths and – of course – people who can’t consume video. Content on the web should be available to all using progressive enhancement, polyfilling and the provision of text alternatives.

I agree with the anonymous author of the provocatively-titled Reckless web development practices are encouraging idiots:

Because these sites are absolutely reliant on JavaScript, or Flash, or a particular browser … in order to display their content, the sites are failing at their job. They’ve taken us back to the early 90s in terms of the maturity of the web. They show an absolute disregard for the building blocks of the web in favour of the shiny’ a repugnant phrase which reflects the shallowness at the heart of many web workers’ outlook. They are style over content.

This isn’t true 100% of the time; a tiny fraction of the Web is games. Games don’t degrade terribly well to plain text or map to HTML semantics. But the fact that we can script first person shooters in <canvas> rather than Flash isn’t a signal to abandon responsible practices on non-game sites – practices such as choosing the most appropriate element for the job and ensuring that the content is available to those unfortunate peasants who aren’t running Opera.Next, a WebKit nightly or Firefox Aurora on the latest greatest hardware.

My colleague Karl Dubost wrote 3 rules of thumb for Web development:

  1. Can I bookmark this information? (stable URIs)
  2. Can I go from here to there with a click? (hyperlinks)
  3. Can I save the content locally? (open accessible formats)

It seems to me that there is nothing inherent HTML5 and associated technologies to diminish the relevance of these rules.

In the first edition of Introducing HTML5, Remy and I closed the book with this advice:

Forget the marketing B.S. of “Web 2.0. We’re at the beginning of Web Development 2.0: powerful languages like HTML5, SVG, and CSS3 will revolutionise the way we build the Web. Browsers support more and more of these aspects of these languages (and you can be certain that more and more support is being added daily).

Of course, have a play with the new features. Experiment with the new markup structures, manipulate video on the fly, and build fun and attractive games and apps that use <canvas>. By reading this book, you’re demonstrating that you’re an early adopter, ahead-of-the-curve, so please set a good example to your colleagues; respect those visitors to your new creations who have older browsers or assistive technologies.

For the second edition (coming soon!) we were worried enough about The Shiny that we’ve augmented it:

It’s vital that we remember that we are dealing with Web development. The Web is based on URLs, hyperlinks and is a method to deliver content. If your amazing demo is basically content-less <div>s being flown around the screen by JavaScript, or if your content is text-as-pixels scripted with <canvas>, if you require a mouse or a touch-screen, or if you have no links, no content or no URLs for bookmarking or linking to, ask yourself: am I developing for the Web, or am I re-inventing DHTML or Flash intros that just happen to run in the browser instead of a plugin?

We mustn’t forget the basics.

Hello, Adobe Edge!

On 1st August, Adobe unveiled Edge, a preview of a product that does non-Flash animation. The magazine .net asked for my reaction, and I gave them an edited version of these notes below. You shouldn’t take this as any official Opera position, by the way.

I think it’s a good move from Adobe, and one that’s been widely expected for a couple of years now. I’ve been predicating it since the HTML5 hype really went into over-drive.

Now motion graphics are increasingly rendered via the Open Web Stack (HTML, CSS, JavaScript, SVG, WebGL) rather than a single-vendor plug-in, designers will require authoring tools that can help them turn their creativity into code. Adobe make their cash from selling authoring tools, not distributing the Flash Player – so if people want to author non-Flash motion graphics using a designer-friendly IDE, someone will provide that IDE. Adobe have a great track record on making IDEs that designers find user-friendly. Seems like a no-brainer to me.

I describe Edge’s output as “non-Flash motion graphics”, for two reasons.

Firstly, Edge doesn’t seem to compete with Flash; its visual metaphors aren’t those of the Flash authoring tool, and it makes simple animated thingies (banner ads, amusing pictures) rather than game-like experiences that you can interact with, or movies with sounds (the things I I associate with Flash.)

Secondly, there isn’t any “HTML5” about Edge at all. Many companies’ marketing people have realised that if I call my dog HTML5′, it’s more likely to win Crufts than if I call it CSS3′ or Open Web Standards’. So everything is HTML5′. It’s a shame, but there we are. Adobe are certanly no more guilty of this than Apple, Google or any number of journalists and analysts.

If you look under the hood of Edge, there isn’t even any use of NEWT – CSS transitions or SVG. In short, what Edge produces is simply old-fashioned DHTML – moving meaningless <div>s around with JavaScript.

This isn’t necessarily catastrophic. A banner ad made in DHTML will render on iOS, whereas a banner ad made with Flash won’t, so there is a win there for site owners – and, let’s face it, some people (the group I call the The iPony Club) see the terms “HTML5” and “iOS” as interchangeable.

More worryingly, Edge produces non-semantic divs and hides textual content in JavaScript. Morena Fiore’s demo animates the word “Why?”, but that text is not in the source code at all. A user without JavaScript simply would not get the textual content at all.

But the Adobe guys are listening:

We started with DIVs because we wanted to get something out there quickly that folks could play with. I say we “started” there because Edge will be evolving rapidly – the product is by no means feature complete.

Hopefully we’ll see regular previews with an increase in semantics and optimisating logic whereby those animations that are best done in cross-browser CSS are done there, whereas those best achieved in SVG or canvas are done there. It’s not impossible, and tools like Dreamweaver show that WYSIWYG tools are not incompatible with semantics and good-quality robust code.

It’s early days yet, and it remains to be seen how cross-browser and lightweight the resulting code will be in the final release, but I tentatively declare it a win for the open web stack and a win for designers (and developers like me) who find scripting animations in a text editor keeps them awake at night in a cold sweat.

Reading List

Web Development


(Last Updated on 21 December 2011)