Archive for June, 2012

Reading List

Web Standards, innit?

Industry

Misc

  • Dear Einstein, do scientists pray? A 1936 letter from a Sunday school pupil to Einstein, and his reply.
  • The Beatles Never Existed – There was never just one group of 4 individuals calling themselves “The Beatles”. There were multiples of each character performing as “John”, “Paul”, “George” and “Ringo”. They all looked identical to each other except for a few features here and there.
  • Fuck Yeah Hotel Hallway – A tribute to the artistry of hotel carpet patterns. Scroll up and down fast and the pictures do weird things to your eyes.

Holiday

That’s it from me for a few weeks. I’m off to take my mum, uncle, cousin and powdered Grandmother to Cambodia (my Nan had always wanted to visit Angkor Wat so we’re scattering her ashes there). Kisses!

Review: Design Is A Job by Mike Monteiro

I’ve been doing a lot of flying lately, and can’t use the lappy on a plane so decided to read computer books (so the boss can’t berate me for enjoying myself on company time) and review them, actually on a blog rather than simply tweeting “Awesome!” or “EPIC FAIL”.

Presumably because I have incriminating photos of Zeldman, the A Book Apart people send me free copies of their publications, but they haven’t asked me to review them, let alone required me to be nice.

This book accompanied me to Bulgaria and I was, I confess, pretty sceptical. I’ve seen a lot of hand-wavy “design and inspiration” talks at conferences (“Look at the lovely Flickr images, I’ve got an iPad, aren’t we all awesome“). I’ve also seen lots of scarily aggressive Americans talk about how they went from start-up to millionaire in less time that it takes me to get around to scratching my balls in the morning, and disliked those talks even more because they displayed a very un-British lack of taboo about money.

Therefore, I was worried that a book about design and money would be some ghastly hybrid of this: “Hey, we’re all children of the universe which is awesome and like, totally full of, like, emptiness. So make all your websites full of whitespace, then grab that mofo and leverage it into the dollar domain!”

My fears were unfounded. Firstly, there is precisely zero designer handwaving in this book. The author explicitly rejects that:

A designer requires honest feedback and real criticism, and that’s not going to happen in a realm where colleagues or clients are worried bout crushing the spirit of a magical being. The sparkly fog of affirmation gets in the way…A designer solves problems within a set of contraints…a designer understands goals…

There is money talk, as there has to be in a book called “Design is a Job”. But there was even a section entitled “Your ethical responsibility” in which Monteiro writes

You have a responsibility to the community at large to make sure that what you’re signing up to design is worth being designed…So before you take on a client, ask yourself whether the problem the client is asking you to solve is one that you feel good about attaching your name to…There is absolutely nothing wrong with making money…but making it to some else’s detrimnent makes you complicit in that persons’s downfall. If a product you design does harm, then you have done harm.

The author (who I’ve never met and know nothing about) comes across to me as a craftsman – someone who takes pride in the job he does, and the wider craft, but who wants to make an honest living doing it. Whether it be design, or branding, or coding doesn’t really matter. Monteiro writes about design because that’sd what he knows best, rather than because the points made in the book are only relevant to product or web design.

Standout chapters for me were the ones that deal with sticking to your own process and the importance of having lawyers. If I were ever in business by myself – regardless of what type of business – I’d keep those chapters close by me.

To conclude: I’m surprising myself to be recommending this book, even though I expected to hate it. Lots of practical advice, written without bullshit in a voice that seems Monteiro’s own rather than that of his editor or publisher, and which can be read on a couple of European flights.

Specifying which camera in getUserMedia

getUserMedia started life as a nice little API that allowed the developer to grab video and/ or audio from a device.

navigator.getUserMedia({audio: true, video: true}, success, error);

It’s shipping for camera access in Opera 12 desktop and Opera Mobile 12 and implemented in Chrome nightlies.

The spec has ballooned since I last looked at it in detail. There is a new “constraints API” which adds significant complexity, while the language of the spec isn’t rigorous (yet). This is likely to delay standardisation yet the simplest use-cases that it originally met are the core features.

Originally, it had a method for authors to hint to the user agent which camera to use – you could suggest “user” for the camera that faces you, or “environment” for the camera that faces outwards. This has disappeared from the spec, to be dealt with later, once the complex capabilities & constraints API is fleshed out.

Should the author be able to specify which camera should be used? It seems to me that this would be a good idea. For example, my mobile phone camera is usually set to use the rear-facing “environment” camera, but if I were to start up a video-conferencing app (or any of the fun “Photo booth” apps on Shiny Demos) I’d like the app to switch to using the forward-facing “user” camera without my having to manually switch camera. (Some devices don’t have hardware switches, so would require me to go to a system preference to change which camera to use, which would be a major pain in the arse.)

I strongly feel that the Working Group should allow authors to choose which camera to use before fleshing out advanced capabilities & constraints APIs which are beyond the use-cases of many authors.

However, although most phones will continue to have two cameras, some devices like the Mito 611 have more than two. How do we write a specification for hinting which camera to use with multiple cameras?

Reading List

Web Standards

Web Industry

Misc

Heartwarming corner

“Raising an Olympian” – a 3 minute video from Kavita Raut’s rural Indian mum. Even though it’s an ad and I’m a cynical old bastard I found it quite touching.

Why HTML5 urgently needs an HTML adaptive images mechanism

After the recent kerfuffle about the draft HTML specification for a mechanism for adaptive images, and an excellent compromise suggestion by Florian Rivoal (Opera’s CSS WG rep), the mailing lists have gone quiet again.

(If you don’t know why we need such a mechanism, read Matt “Grrr” Wilcox‘s article Responsive images: what’s the problem, and how do we fix it?.)

We’ve needed such a mechanism for a while, but it’s particularly urgent now. Webkit has implemented a new non-standard CSS function called -webkit-image-set:

selector {
background: image-set(url(foo-lowres.png) 1x,
                      url(foo-highres.png) 2x) center;}

The changeset describes it:

The idea behind the feature is to allow authors to provide multiple variants of the same image at differing resolutions, and to allow the User Agent to choose the resource that is most appropriate at the time. This patch will choose the most appropriate image based on device scale factor.

(Read the email/ specification for -webkit-image-set.)

As far as I can tell, it will be in Safari 6 (OS X 10.8, shipping in July) and Mobile Safari for iOS 6, so we’ll be able to do adaptive background images but not adaptve content images.

Once that happens, I bet it’s 0.03 nanoseconds before developers convert <img src=”foo.blah” alt=”useful alternate text”> into an empty <div>s with adaptive background images using -webkit-image-set and (please!) a fallback background images for non-webkit browsers.

Why wouldn’t they? Retina screens will download massive but beautiful images, while users of lower-res phones save bandwidth by downloading smaller images instead of huge images and then reducing them down. Problem solved.

And, unfortunately, people who don’t download images, or can’t perceive images won’t get any alternate text, as there is no content <img> element any more. Those guys have always been last in the pecking order and there’s no reason to assume they’ll get a better deal this time.

And that’s why some agreement on <picture>, <pic>, <img srcset=”…”> (whatever it is; I don’t much care) needs to happen, and fast.

Update 22 June 2012: WHATWG conversation mysteriously dried, so Matthew Marquis wrote to W3C HTML WG and proposed Florian’s suggestion.

Review: Build Mobile Websites by Castledine, Eftos, Wheeler

I got this book free in lieu of payment for my Sitepoint article Notes on Designing Websites for the Asian Market. When it arrived, I looked in the index for “Opera” and found no entry at all. As this is a book is called “Build Mobile Websites and Apps for Smart Devices” and is about designing mobile websites (not just apps), I decided that the book would be another iOS wankathon, and put it immediately in my recycling pile. (“iOS wankathon” is the technical term employed by medical professionals to describe articles/ books/ conference talks that stupidly assume all mobile users have iPhones or other webkit-based browsers.)

Luckily, I decided to give it a go and picked it up just before getting a flight. It’s actually a really good book, with only one webkit wank (a very low number when “apps for smart devices” is in the title).

There’s good information on responsive web design, although it doesn’t replace Ethan Marcotte’s book, it summarises well. The second edition should add information on CSS Device Adaptation (“CSS viewport”) now that IE10 and Opera support it.

I found the chapter on design for mobile very useful with its different patterns for organising information. The chapter “markup for mobile” was less so, probably because I know more about markup than design.

One slight niggle – in an example app, the use of ellipsis is shown by including the name of a person “I am a celebrity with an incredibly long name for some unfathomable reason”. Long names seem quite common in Thailand, Sri Lanka, Russia, Greece etc; it’s only “unfathomable” if you think in the context of English names.

The only example of webkit wanking comes in the “Mobile web apps” chapter. In order to navigate from page to page, -webkit-animation is used with no other vendor prefixes. The authors have ensured that a simplified page swap is available on other browsers, but that tests WebKitTransitionEvent in JavaScript. Why not just use all the vendor prefixes and the non-prefixed version, and only then fallback to a “simplified” page swap? It’s particularly remiss when Firefox supported Animations from May 2011, while the book was published in June 2011.

Better still would be to ensure that vital functionality like navigation is available everywhere and only then progressively enhanced.

In conclusion, this is a decent book. Client-pleasing stuff such as touch, accelerometer, geolocation is covered. But while it was languishing on my shelf more cutting-edge features have become available. You can still learn from this book now, especially if you’re interested in sites that work well on mobile rather than all-singing all-dancing applications, but it would be good to see a second edition that addresses getUserMedia and proper cross-browser vendor prefixing.

Responsive Web Design: preserving images’ aspect ratio

Probably too obvious, but I thought I’d post it anyway.

One of the fundamental building blocks of responsive web design is ensuring images sit within their containers by a simple CSS rule img {max-width:100%;}.

Generally, this works splendidly. But if you’re “reponsifying” an old site, you might find that the authors included the images’ heights and widths as attributes in the HTML.

In this case, the img {max-width:100%;} can wreck the aspect ratio when the image is squeezed, as the width is forced by the CSS to shrink, but the height is still set in the HTML. See my photo of the most overloaded truck in the world and narrow the browser window.

This is easily cured without trawling through the markup and removing HTML height attributes. Simply extend your img CSS so it reads img {max-width:100%; height:auto;} and aspect ratio is preserved.

Reading List

HTML5, CSS 3

Mobile and cross-device development

Misc

Live Coverage – WooFone Developers Conference 2012

I had tickets and meant to go to the Apple developer conference yesterday, but took the wrong train and ended up at the Acme wooFone Worldwide Developers Conference instead. As I was already here, I decided to stay and, for posterity, here are my tweets.

10:00 am: Music stops. Audience members begin moistening. Some consumer electronics are about to be shown!

10:02 am: Not-Steve looks sharp as hell, bluejeans and black button up shirt, sou-wester and novelty Hello Kitty aqualungs. Crikey, he’s good looking. I mean, phew. Oh wow! I’m sure he just looked at me!! Hi, Not-Steve!! I love you, Not-Steve!!!!

10:07 am: “Our goal has always been to do great work, and in doing so, make shitloads of money.”

10:15 am: Holy Crap! Acme vacuum cleaners: instruction manuals in 4 new languages, including Aramaic!

10:20 am: Ask-the-Acme AnswerTastic™ any question about root vegetables or Nicaraguan pogostick champions! 24/ FUCKING 7 !!!!!!!!

10:25 am: Ask-the-Acme AnswerTastic™ has 2 different voices – John Inman from Are You Being Served, or comedy Latvian! Awesome!

10:26 am: Lady next to me has full rectal prolapse due to excitement.

10:29 am: Also, Acme Nut-o-lump ScanFabulous™! Rest testicles on screen and it instantly detects any change in density, shape or volume!!!!

10:31 am: Acme Laydee-Bump ScanFabulous™ Companion model for ladies nestles between breasts and performs similar function.

10:38 am: All devices to be 10% smaller due to government of Somewhere Poor agreeing to reduce legal of age of the children mining raw materials. Crowd goes Wild!

10:42 am: Wow! The Acme Upload-a-Foto™ feature brings NATIVE #HTML5 UPLOAD STUFF OFF PHONE TO THE FUCKING CLOUD !!!!!!!!!!! A Miracle!!! Now, you can TAKE A PHOTO on your device AND UPLOAD IT TO A WEBSITE. Competitors must be trembling now!!!!!!!!

10:44 am: entire front row hyperventilate and are stretchered out.

11:00 am: Acme Hipsta-Helpa™ brings turn-by-turn navigation to guide hipsters to the nearest wanky bar for microbrewery beer and obscure music!

11:07 am: Man in front of me with elaborate facial hair and a skateboard spontaneously human combusts. It’s what he would have wanted.

11:10 am: Acme wooFone now with HDMI !!!!!! HDM – FUCKING – I !!!!!!! Which stands for “Handover Da Money, Idiot”. Cloud-based! always-on! Social! HDMI!!!!!

11:12 am: The exclamation mark key on my keyboard falls off.

11:15 am: Ushers issue umbrellas (with “I love Not-Steve” slogan) as there is a tsunami of body fluids squirting from the press gallery.

11:18 am: Two minutes hate start. Android phones ceremonially burned.

11:20 am Keynote ends. Without a doubt, the most important day in human history. He has gone, but His legacy is with us. Not a dry seat in the house.

Luckily for me, Macrumours live-blogged the Apple conference, which was, of course, completely different from the one I attended.

Top ten English love songs

(Originally written in 2006 and languished in my draft posts folder until resurrected after hearing “Will You” in a bar in Sofia)

After rubbishing the inclusion of “Wonderful Tonight” in Molly’s list of three great love songs, here’s my list:

  1. Lightning Seeds “Pure”

    A fantastically hummable, happy tune that manages to sound both fresh and comfortable every time you hear it. In contrast to the plodding obviousness of Clapton’s “Wonderful Tonight” lyrics, the Lightning Seeds’ lyrics are full of metaphors like “leaves pour down, splash autumn on gardens / as colder nights harden”. The chorus is just lovely:

    Just lying smiling in the dark
    Shooting stars around your heart
    Dreams come bouncing in your head
    Pure and simple every time

    Anyone who doesn’t smile when they hear this has a heart of stone and ears of cloth.

  2. Hazel O’Connor – “Will You”

    A song about yearning:

    Take off your ice, bare your soul.
    Gather me to you and make me whole.
    Tell me your secrets, sing me the song.
    Sing it to me in the silent dawn.
    It’s getting kinda late now.
    I wonder if you’ll stay now, stay now, stay now, stay now
    or, will you just politely say “goodnight”.

    What elevates this from “very good power ballad” is the finest saxophone solo in the history of everything.

  3. Joni Mitchell – “Morning Morgantown

    A beautiful tune and typically poetic lyrics celebrating being in together at dawn, having fun with the one you love.

    But the only thing I have to give
    To make you smile, to win you with
    Are all the mornings still to live
    In morning Morgantown

  4. Fairport Convention – “Who knows where the time goes?”

    Sandy Denny’s finest song ever. Her voice is so clear, and so pure, and the lyrics are just a tiny bit dark (what does “until it’s time to go” mean? Their death?). But it’s not just a Sandy Denny solo song; the lead guitar, bass and drums add so much, too.

    And I am not alone while my love is near me
    I know it will be so until it’s time to go
    So come the storms of winter and then the birds in spring again
    I have no fear of time
    For who knows how my love grows?
    And who knows where the time goes?

  5. Beatles – “Here There and Everywhere”

    Of course, there are loads of fab Beatles love songs, such as “I’ve just seen a face”, and “something”. But this gentle McCartney composition gets my vote for the simplicity and directness of the lyrics and the minimal instrumentation.

  6. Undertones – “Teenage Kicks”

    From the first drum beats, to the opening chords, to the guitar solo and handclaps, to the three chord ending, there’s nothing superfluous and nothing missing from this perfect song about teenage attraction.

  7. Nick Drake – “Northern Sky”

    Nick Drake made a lot of pretty tunes before he died, but this is the finest.

  8. Bob Dylan – “Love Minus Zero (No Limits)”

    There has to be a Bob in this list, and it was hard to choose between this, Visions of Johanna and I Want You. But this has a catchy tune, with Dylan’s usual obscure metaphors and literary references, and culminates in the uncharacteristically direct and emotive description “my love is like a raven / at my window with a broken wing”.

  9. Dolly Parton – I Will Always Love You”

    Forget the preposterous hair and Vegas trimmings; this is a great song, beautifully sung by its author. Forget the horrible, incomprehensibly caterwauling vile mess that Whitney Houston made of it out of your head and listen to it again. Now.

  10. SLF – “Barbed Wire Love”

    A lovesong set in the warzone of late 70s Belfast, with wit and acid, some sex and a great punk rock tune.

    I met you in No Man’s Land
    Across the wire we were holding hands
    Hearts a-bubble in the rubble
    It was love at bomb site

    When I fell it was awful nice
    Caught when not suspecting vice.
    The night was rife with wasteland life
    You set my arm alight

My list of the best non-English language songs coming soon. In the meantime, any disagreement with this top 10 should be recorded below, although doing so is an admission that you don’t know the first thing about music, and your favourite band is rubbish.