Trying out my new Ranting Hat, a present from Japan from Nedjma. Please note that rants are just that, and not necessarily eloquent or factual. (And I know that Eric Meyer and Jeffrey Zeldman are not the only two social liberals in the USA; I’ve actually met the other three.)
Oh, and do I have to say that this is a joke, is personal and nothing to do with my lovely employers at Opera? Unfortunately, I probably do.
(I’ll transcribe it when I’m not so tired)
My family and I had 10 days in Hisarönü, near Fethiye where I used to live in the early 90s. The resort itself was as I remembered it: a depressing mass of restaurants offering “full English breakfasts with real pork sausage!” but the hotel had a swimming pool, the mountains gave some cooling breeze, and it was easy to get to Fethiye, Ölüdeniz or the melancholy beauty of the deserted Greek village, Kayaköy.
I tracked down my old friend Asiye, who taught me lots of Turkish in 1993, and who I hadn’t seen since the year 2000 when we bumped into each other, utterly by chance, in the street in Bangkok. (Her Fethiye clothing shop, Şaman, has the strapline “there are no coincidences”.)
I think we can safely say that in 17 years neither Asiye nor I have changed one jot. Then:
Now:
And I’m delighted that there was no reason for my earlier holiday trepidation.
I’ve written an article on making sure your websites have a fighting chance of working across devices (mobiles, consoles etc).
It’s for web designers used to making desktop sites, rather than for people designing iThing apps.
The article was originally called “The ultimate guide to mobile optimisation” but the boss rightly said no (you could write a book about the subject, but all the main points are introduced in the article).
So now it’s called Mobile-friendly: The mobile web optimization guide. Enjoy.
It’s with some trepidation that I look forward to my holiday soon.
There’s the usual worry of booking a package tour—will the hotel be as nice as it seemed on the Web? will the transfer taxi be there? (Actually, I only imagine these are the “usual” worries; we’ve never done a package before).
But I have an extra worry. The last time I visited this town was in 1993 -1995 when I lived there, working as a musician and tarot card reader, and I left because I was run out of town.
The story goes like this.
Opposite the bar that I was working in was a small area where three female students would spread out a cloth on the floor which they covered with hippie jewellry that they’d made in the hope of selling it to tourists. During the quiet parts of the day I’d hang with them, and we’d smoke cigarettes and improve our command of each others’ languages. As occasionally happened when I was young and slim, one of the girls and I became especially friendly.
Towards the end of the season, I was playing my guitar in the bar, and an well-dressed gentleman in his early 40s came and stood by my stool as I took off my guitar for my smoke-beer-pee break. This often happened; people came up to request favourite songs for the the next set. He waited while I carefully put the plectrum under the corner of the scratchplate and put the guitar securely on its stand. And then he punched me in the face.
As I regained verticality, I asked him why he’d done that. “For sleeping with my wife”, he replied. I assured him that he was mistaken, and pointed out my girlfriend who was looking horrified and backing towards the door rather than racing forward to cradle me in her arms. “Yes, he replied. That’s my wife.”
Ignorance is no defence and although true, objecting that that she had neglected to inform me of her nuptial status was unlikely to mollify him. But he didn’t come back with a follow-up punch but instead walked out of the bar, leaving two of his friends behind who very politely informed me that the usual penalty for wronging someone’s honour in such a way is to stab them in the buttocks. The reason is that there are no major blood vessels there, so the victim is very unlikely to die. However, it’s the largest muscle in the body so would take months to heal and lying down, sitting or walking would be agony. It was emphasised that if I were to remain in town more than one night, this might very well happen to me.
I left the next morning for Istanbul.
Seventeen years later, I suspect that none of the protagonists still live there. And I suspect that the years have suitably transformed me from the slim, bronzed beach bum that I was then into an unrecognizable and expanded figure.
But if I’m back early, after begging for a standby ticket at the airport, you’ll know why.
There seems to be confusion about the minimal set of elements that make a valid HTML5 page.
(Amended on prompting from Tab Atkins and Mathias Bynens in comments below.)
The simplest valid document is
<!doctype html>
The title element is required in most situations, but when a higher-level protocol provides title information, e.g. in the Subject line of an e-mail when HTML is used as an e-mail authoring format, the title element can be omitted.
Assuming you’re writing a web page rather than an HTML email, you need the title element, although technically it can be blank.
<!doctype html>
<title></title>
However, you shouldn’t do that. Failure to specify a character encoding which can introduce an obscure but real security vulnerability. So, the simplest valid and secure document looks like this:
<!doctype html>
<meta charset=utf-8>
<title>blah</title>
<p>I'm the content
(You don’t actually need the content, of course, but it’s a pretty rubbish web page without it, and an empty title isn’t much good.)
However, for accessibility reasons, you should declare the natural language of the document (English/ French/ Swahili) on the html element, which therefore means you need that element (note that you don’t need to close it, though):
<!doctype html>
<html lang=en>
<meta charset=utf-8>
<title>blah</title>
<p>I'm the content
If you’re planning to use AppCache to enable offline applications, you’ll need the html element as the manifest attribute goes there.
Internet Explorer 9 Developer Preview 3 and its antecedents can’t apply CSS to new HTML5 elements without a body element. (Try it without body and with body.)
So if you’re attempting to do that, the smallest valid, secure, screenreader-accessible and stylable-in-IE HTML5 page you can have is
<!doctype html>
<html lang=en>
<meta charset=utf-8>
<title>blah</title>
<body>
<p>I'm the content
Just because you can do this doesn’t mean you should, of course. Depending on your colleagues, it could be confusing and thus a maintainability nightmare.
I use the head element, and close those tags that need closing (although I don’t bother with trailing slashes on self-closing elements).
So the minimal valid, secure, screenreader-accessible and stylable-in-IE HTML5 page (not email) that it easily readable and maintainable (subjective, of course) is probably
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>blah</title>
</head>
<body>
<p>I'm the content</p>
</body>
</html>
Enjoy.
(PS, I co-wrote a book!)
I got home to find my author copies of Introducing HTML5 had arrived, straight from the printer in the US. They’ll be on the shelves in a week or so.
Rather than engaging in weird “unboxing” photosets on Flickr, I decided to celebrate this joyous occasion in a different way.
(Images may be NSFW if you work a very prudish environment or are a nun.)
In the pub after presenting on HTML5 at London Geek Night last week, a bloke (Andy?) gave the best description I’ve heard yet of HTML <article>.
Don’t think of article as a newpaper article. Think of it like article of clothing: any discrete item.
It’s not just about newspapers or blogs. So, on amazon, a single product on a product listing page would be an <article>. An individual email in a web-based email app would be an <article> Individual tweets on a twitter client would be <article>.
Last night, Remy Sharp and I did our first ever co-presentation about HTML5 for London Geek Night (and thanks to the organisers: we had a blast. Beer in the fridge for all—that rocks!). For the second time this week, I heard the misconception that the Flash Player will support unencumbered WebM video.
Adobe has announced that it will support the VP8 video codec. WebM, however, is an umbrella term that means VP8 video, with Vorbis audio (the one that Spotify uses, and which is supported by Opera, Firefox and Chrome) packaged up in a profile of the Matroska container format (MKV).
As far as I can tell, from Adobe’s Matt Rozen’s blogpost Flash Player Will Support VP8, there is not yet planned support for Vorbis or MKV:
Can Flash play .ogg audio like it plays .mp3 now?
We carefully consider the technologies we add to the Flash Player runtime based on customer needs. We haven’t announced support for other codecs at this time.
It’s great that Adobe will support VP8. But we shouldn’t yet assume that we can let browsers that don’t natively support unencumbered WebM fall back to the Flash Player.
I’d love it if an Adobean would comment and clarify the situation, as that blogpost is from May 24 so there might be newer information that I haven’t seen.
(There’s a similar situation with IE9. IE9 will support VP8 if the codec is previously installed on the machine—that is, it’s not inside IE9 out-of-the-box. But note this is VP8, with no mention of WebM. However, as Microsoft already uses Vorbis for the audio in Microsoft Halo, we can assume that they have no ideological problem with the audio format).
Opera 10.60 is the first shipping browser with WebM support; Firefox and Chrome have committed to support and have it built into nightlies.
As someone who is timezone-maths challenged and forever dialling into international conference calls an hour early or an hour late, I greatly appreciated the intuitiveness of the everytimezone iPad app by Amy Hoy (idea & design) and Thomas Fuchs (development).
The accompanying blog post Making an iPad HTML5 App & making it really fast said “desktop browsers work, too!” but it didn’t work in Opera.
David Storey, Patrick Lauke and I set about exploring why. The answer was simple: browser-sniffing. The app was only looking for browsers with the strings “webkit” or “Gecko” in the user agent string, and only feeding those browsers the necessary code. So we copied the code and, as a proof of concept, added “opera” to the list of strings being sniffed, and made trivial amends to the JavaScript to send -o- prefixed styles.
Additionally, the main CSS was only using -webkit-border-radius and -moz-border-radius, while Opera and IE9 use the naked property name border-radius. (See my Writing cross-browser, future-proof CSS 3 for more on this.)
Adding this to our proof of concept made the application work in Opera. There are differences; Opera doesn’t support CSS Gradients so those don’t show (although an SVG gradient as a CSS background-image would work perfectly well) and a bug means it doesn’t pick up the Futura font. But visual differences are to be expected on the Web; it’s the content that’s king (or, in the case of an application, the functionality).
We sent this to Thomas, and very sportingly he made the code live, so now everytimezone.com works in Opera too. The moral is that it’s pretty easy to make your sites work across all modern browsers and, while you might expect the user to be coming from one specific device, if your app is on the Web (rather than a W3C Widget or some proprietary format like Apple app store) you can expect visitors using other devices, browsers and operating systems.
Of course, it won’t work in IE9, even though it was announced yesterday that IE9 will support canvas, as the browser-sniffing locks out all versions of IE, past and future. That’s the downside to browser-sniffing: it’s completely non-futureproof. If you make a deliberate policy to block a browser, and a future version of that browser is capable of supporting your code, you have to go back and amend your blocking code. If you have hundreds of sites in your portfolio, that’s a massive commitment.
So congratulations s to Thomas and Amy for a lovely little app; I can now dial into conference calls with confidence and punctuality!
Don’t tell the publisher, but I’ve posted PDFs of Introducing HTML5‘s contents (34K) and Index (84K) so you can see what’s in it. (It’s £13 for preorder from amazon, hint hint.)