Jeremy Keith's Blog, page 144

Update

The Brighton Digital Festival kicked off with a one-two punch of geek conferences: dConstruct and Update.

Update was a labour of love from Aral who worked hard to put together an eclectic, slick event. It was mostly aimed at iOS developers but there was a lot of other stuff in there too, including a range of musical performances. Some speakers, like Matt Gemmell and Sarah, talked specifically about iOS design and development while others, like Cennydd, spoke of broader issues.

In my opinion the most important talk of the day was delivered by Anna who laid bare the state of Britain's education system—and by extension, Britain's future. She relentlessly hammered home her points, leaving me feeling shocked and angered at the paedophobic culture of our schools. But there was also hope: as long as there are young people of Anna's calibre, the network—as wielded by digital natives—will interpret technological clampdowns as damage and route around them (see also Ben Hammersley's amazing speech to the IACC).

I also spoke at Update. I went in to the lion's den to encourage the assembled creative minds to forego the walled garden of Apple's app store in favour of the open web. The prelude to delivering the talk was somewhat nerve-wracking…

The night before the conference, Aral arranged a lavish banquet at the Royal Pavilion. It was amazing. I'm ashamed to say that after a decade of living in Brighton it was my first time inside the building. But I wasn't able to relax fully, knowing that I had this 18 minute potentially contentious talk to deliver the next morning.

When I got home, I decided I should do a run-through. I always feel like an idiot if I practice a talk by speaking to the wall but in this case I wanted to make sure that I crammed in all the points I wanted to make. I started up Keynote, opened my mouth and …bleaurgh! That's a pretty good approximation of how legible I sounded. I realised that, although I knew in my mind what I wanted to say, when it came time to say it out loud, I just couldn't articulate it. I tried for about an hour, with little success. I began to panic, envisioning my appearance at Update consisting of me repeating "Um, know what I mean? Right?"

The day of the event arrived. I was the second speaker. Aral introduced me. I walked on stage and opened my mouth…

And I didn't screw it up. I made my case without any uhm-ing and ah-ing. I actually had a lot of fun.

I thoroughly enjoyed addressing a roomful of Mac-heads by quoting Steve Jobs. "You don't need permission to be awesome" he once said. That's true on the web, not so much on the app store.

Naturally, there were some people who took umbrage with the message I was sending. The most common rebuttal was that I was being unrealistic, not considering the constraints of day-to-day work and budgets. To them, I would quote Steve Jobs once more:

Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo.

In fact I finished up my talk with a slide of one of the Think Different posters; the one with John Lennon. I ended with a quote from Working Class Hero that I thought was a fitting summation of my feelings when I see talented creative people pouring their energy into unlinkable walled gardens:

You think you're so clever and classless and free but you're still fucking peasants as far as I can see.

(had I been writing my talk on an iOS device, I would no doubt have finished by saying "you're still ducking peasants as far as I can see".)

My talk was soon followed by a panel discussion about iOS vs. Android vs. Windows Phone 7 vs. the web vs. whatever else people are currently throwing their time and energy into. In fairly short order it turned into me vs. everyone else.

Now here's the thing when it comes to any discussion about mobile or the web or anything else of any complexity: an honest discussion would result in every single question being answered with "it depends". A more entertaining discussion, on the other hand, would consist of deliberately polarised opinions. We went for the more entertaining discussion.

The truth is that the whole "web vs. native" thing doesn't interest me that much. I'm as interested in native iOS development as I am in native Windows development or native CD-ROM development. On a timescale measured in years, they are all fleeting, transient things. The web abides.

Get me going on universally-accessible websites vs. websites optimised for a single device or browser …then I will genuinely have extremely strong opinions that I will defend to the death.

Still, the debate at Update was good fun. The whole event was good fun. Nice work, Aral.

Tagged with
updateconf
conference
brighton
event
ios
mobile
native
update2011

Makers in Brighton

While I was compering dConstruct, I interspersed the between-talk banter with information about some of the events taking place under the banner of the Brighton Digital Festival. It's a busy month, to put it mildly.

The day after dConstruct, Brighton played host to a Mini Maker Faire in the foyer of the Brighton Dome. I went along in the morning to check it out and MY HEAD ASPLODE!

It was splendid. So much creativity, so much fun and so many lovingly-crafted gadgets, all under one roof. It was immensely popular too. The crowds didn't let up all day. I hope that the next time there's a Maker Faire in Brighton—'cause it should definitely happen again—that it can take place in a bigger venue (like the Corn Exchange) so that we call all geek out in comfort together.

I commend Emily and all of the other organisers. Top job, hardware hackers, top job.

Tagged with
brighton
hacking
makerfaire
bmmf
event
hackers
hardware

dConstruction of the Fables

dConstruct is over for another year. It was, once again, a day packed full of far-reaching ideas and thought-provoking presentations. Even if you didn't necessarily agree with everything a speaker had to say, you certainly got plenty of food for thought.

I had the pleasure of playing compere for the day, which was an absolute pleasure. I thoroughly enjoyed every talk, though some of them polarised the audience. It was interesting to see some people rate a talk as their favourite—Don Norman's or Kelly's, for example—only to have the very same talks dismissed by other people.

Craig's impassioned piece on The Shape Of Our Future Book was probably the most polarising of all. Personally, I loved it—especially the story he told. Others hated it, which they made very clear on the Twitter backchannel (which in turn elicited a dickish reaction from me—I don't mind when people trash my talks but I hate to see my friends getting picked on; I should just avoid looking at Twitter while my friends are on stage).

Both Craig and Kars demonstrated great courage in their presentations—Kars discussed the touchy subject of the recent riots from a design perspective. They have my admiration, as does Kevin Slavin who knocked it out of the park with his assassination of AR, despite feeling extremely poorly. He's a trooper.

Matt delivered a tour-de-force talk with the help of his Galifreyan prop. Needless to say, Frank wowed everyone with his charm and smarts, but that's to be expected.

Some people have written up their thoughts:

Sjors Timmer: dConstruct 2011 – a review
Tim Holden: My notes from dConstruct 2011
.net magazine: Report: dConstruct 2011
Rik Lomas: dConstructive Criticism

Some of the reports picked up on the polarising nature of the conference. It prompted Colly to right a thoughtful piece on Conferences and expectations:

With this in mind, I do think us organisers have a responsibility to manage the expectations of our attendees through our websites and other material. Regular attendees will know the score, but if we introduce newcomers to the nuances of events and their intended focus, we can help avoid the vocal disappointment of those expecting something very different for their money.

He makes a very good point. In fact I thought about writing a post right before dConstruct tickets went on sale to discourage people from getting a ticket if they were expecting to be spoon-fed easy answers to difficult problems or to come away with any practical takeaways: it's not that kind of conference. But I find it quite hard to describe what dConstruct is: it's much easier to describe what it isn't.

I genuinely wish that some of the naysayers hadn't come along to dConstruct—their place could have been taken by somebody willing to meet the speakers halfway. We at Clearleft definitely need to make sure that we make it clear what attendees can expect from dConstruct. But I'm encouraged by Matthew Solle's defence of the dConstruct ethos:

It is not the responsibility of established events like dConstruct to dumb down its content to appease attendees who are reticent or negative to programmes that challenge, take risks and attempt to look towards an uncertain future rather than settle for appeasement, naval gazing, and safe.

I'm already looking forward to dConstruct 2012.

By the way, the music that was playing during the breaks was curated by Tantek. All the tracks are licenced under a Creative Commons attribution licence:

Novia En Venus by thesatellite
Bigger Than Us (Arc Eye Remix) by Arc Eye
Rising io by YearOne
Postrock 1 by kay90
fabula by Ghost Orchid
Rising by [aI]
What Makes Us So Uncommon (Short Trip Remix) by The Echelon Effect
A 5 by Elipsys
The Beach Ave Off-Ramp by Matthew Austin
Safe & Sound (Loon Calls) by Daughters & Orchids

..I no longer know what I say by ANOA

RUB/BUR by thesatellite

How Things Could Be, How Things Are Not by Forsaker

And here are some sketchnotes from the day:

Boon Chew's set on Flickr,
Joe Mathewson's cheeky cartoons and, of course,
Eva-Lotta's great sketchnotes.

Tagged with
dconstruct
dconstruct2011
conference
brighton
event

Impostor syndrome

I'm living inside Keynote these days. I've got a string of speaking engagements coming up and I'm freaking out about all of them.

The big one is the full-day dConstruct workshop I'll be leading called Responsive Enhancement. I've been working on it solidly for the last month and I hope that it's all going to come together this week. I'm quite excited about it. If anything, my concern is that there won't be enough time in one day to cover all the things I want to geek about.

Lest you think that is a blatant plug to entice you to book a place on the workshop, that ship has sailed, my friend: the workshop sold out a while back. But you can still book a place on Scott's jQuery Mobile workshop or Josh's Mobile Design workshop. And remember, a workshop ticket gets you complementary access to the dConstruct conference (which sold out in a day).

Maker Faire Brighton will take place the day after dConstruct but I'll probably be too busy making frantic last-minute preparations for Aral's Update conference at the Brighton Dome two days later. I've been invited to deliver an 18 minute rant and permission has been granted for me to be as controversial as I wish. I'll try not to disappoint. Tickets are still available if you want a piece of the action.

Later that week I'll be up in London for the Adobe Expressive Web Tour. In this case, I haven't explicitly asked permission to rant but I'm going to do so anyway. Hey, if you're going to ask me to give a talk called "The State of the Web" in the same month that you dump Adobe Muse on the world, you've gotta expect some flak, right?

Then I'll be flying out to Nashville for the Breaking Development conference which kicks off on September 12th. I'm feeling distinctly outclassed by the ludicrously smart line-up of talent that will be presenting there. And I'm supposed to open the show! gulp

Given that the title of my talk is There Is No Mobile Web, it may sound like I am once again courting controversy, but actually, I consider that to be a fairly uncontroversial viewpoint.

Much as I'm looking forward to the time in Tennessee, it's a shame that I'll have to duck out of town in the middle of the Brighton Digital Festival. I'll miss out on BarCamp Brighton and Flash On The Beach.

Fortunately I will still be in town for Brainy Hacks on September 6th. It looks like Clare is putting together a great event: an evening of brainstorming design solutions for a non-profit:

Calling all creatives, strategists and planners - we need you to donate your brain to charity. We have a great brief from a not-for-profit organisation and you have two hours to solve it competing in teams of up to five to have your idea judged the best by our mega judges.

But if the time is going to pass pleasantly—with some food and drink to stir the creative juices—then a sponsor needs to step up and claim the glory. If you know of an appropriate organisation, get in touch with Clare.

Now, if you'll excuse me, I need to get back to frantically putting slides together while I swirl deeper and deeper down into a pit of inadequacy-fuelled pseudocompetence.

Tagged with
speaking
conference
dconstruct
updateconf
brighton
bdconf
brainyhacks

A matter of protocol

The web is made of sugar, spice and all things nice. On closer inspection, this is what most URLs on the web are made of:

protocol://domain/path



The protocol—e.g. http—followed by a colon and two slashes (for which Sir Tim apologises).
The domain—e.g. adactio.com or huffduffer.com.
The path—e.g. /journal/tags/nerdiness or /js/global.js.

(I'm leaving out the whole messy business of port numbers—which can be appended to the domain with a colon—because just about everything on the web is served over the default port 80.)

Most URLs on the web are either written in full as absolute URLs:

a href="http://adactio.com/journal/tags/nerdi..."
script src="http://huffduffer.com/js/global.js"

Or else they're written out relative to the domain, like this:

a href="http://adactio.com/journal/tags/nerdi..."
script src="http://adactio.com/js/global.js"

It turns out that URLs can not only be written relative to the linking document's domain, but they can also be written relative to the linking document's protocol:

a href="http://adactio.com//adactio.com/journ..."
script src="http://adactio.com//huffduffer.com/js..."

If the linking document is being served over HTTP, then those URLs will point to http://adactio.com/journal/tags/nerdi... and http://huffduffer.com/js/global.js but if the linking document is being served over HTTP Secure, the URLs resolve to https://adactio.com/journal/tags/nerdiness and https://huffduffer.com/js/global.js.

Writing the src attribute relative to the linking document's protocol is something that Remy is already doing with his HTML5 shim:

If you have a site that is served over both HTTP and HTTPS, and you're linking to a CDN-hosted JavaScript library—something I highly recommend—then you should probably get in the habit of writing protocol-relative URLs:

This is something that HTML5 Boilerplate does by default. HTML5 Boilerplate really is a great collection of fantastically useful tips and tricks …all wrapped in a terrible, terrible name.

Tagged with
urls
nerdiness
linking
protocol

Re-tabulate

Right after I wrote about combining flexbox with responsive design—to switch the display of content and navigation based on browser size—I received an email from Raphaël Goetter. He pointed out a really elegant solution to the same use-case that makes use of display:table.

Let's take the same markup as before:

This is the main content.

This is the navigation.

foo
bar
baz

The source order reflects the order I want on small-screen devices (feature phones, smart phones, etc.). Once the viewport allows it, I'd like to put that navigation at the top. I can do this by wrapping some display declarations in a media query:

@media screen and (min-width: 30em) {
body {
display: table;
caption-side: top;
}
[role="navigation"] {
display: table-caption;
}
}

That's it. It works much like box-orient:vertical with box-direction:reverse but because this is good ol' CSS 2.1, it's very well supported.

We can solve the other issue too: making those list items display horizontally on larger screens:

[role="navigation"] ol {
display: table-row;
}
[role="navigation"] ol li {
display: table-cell;
}

Once again, I've put a gist up on Github (get me! I'm like a proper computer nerd).

Update: And Remy has put it on JSbin so you can see it in action (resize the live preview pane).

So there you go: we've at least two different mechanisms in CSS to re-order the display of content and navigation in response to screen real-estate. The default is content first, navigation second—a pattern that Luke talked about in this interview with Jared:

Yeah, one of the design principles that I'll be talking on the tour about, for mobile, is content first, navigation second; which is just really putting something up right away that somebody can engage with, and saving the pivoting and the navigating for later.

There's, basically, UI patterns that you can use to make that happen. I'm still surprised at how many, both mobile websites and applications, the first thing they give you is a menu of choices, instead of content.

Don't get me wrong, the menu's important, and you can get to it, but it's actually the content that the immediacy of mobile, and the fact that you're probably on a slower network, and in some cases you're even paying for your data transfers, right? Giving you a list of choices as your first time experience tends not to work so well.

Luke Wroblewski — Designing Mobile Web Experiences » UIE Brain Sparks on Huffduffer

Tagged with
responsive
design
layout
css
table
display
content
navigation

Re-flex

I was in Minnesota last week for An Event Apart Minneapolis. A great time was had by all. Not only were the locals living up to their reputation with Amy and Kasia demonstrating that Kristina isn't an outlier in the super-nice, super-smart Minnesotan data sample, but the conference itself was top-notch too. It even featured some impromptu on-stage acrobatics by Stan.

A recurring theme of the conference—right from Zeldman's opening talk—was Content First. In Luke's talk it was more than a rallying cry; it was a design pattern he recommends for mobile: content first, navigation second. It makes a lot of sense when you're screen real estate is at a premium. You can see this pattern in action on the Bagcheck mobile site (a button at the top of screen is simply a link that leads to the fragment identifier for the navigation at the bottom).

Later on, Eric was diving deep into the guts of the CSS3 flexible box layout module and I saw an opportunity to join some dots.

Let's say I've got a document like this with the content first and the navigation second:

This is the main content

This is the navigation

Using box-orient:vertical and box-direction:reverse on the body element, I can invert the display of those two children from the order they appear in the source:

body {
display: box;
box-orient: vertical;
box-direction: reverse;
}

If I wrap that in a media query, I can get the best of both worlds: content first, navigation second on small screens; navigation first, content second on larger viewports:

@media screen and (min-width: 30em) {
body {
display: box;
box-orient: vertical;
box-direction: reverse;
}
}

Works a treat (once you include the necessary -webkit and -moz prefixes).

I thought I'd take it a bit further. Suppose the navigation has a list of links:

This is the navigation.

foo
bar
baz

I could use flexbox to lay those items out horizontally instead of vertically once the viewport is large enough:

@media screen and (min-width: 30em) {
[role="navigation"] ol {
display: box;
box-orient: horizontal;
}
[role="navigation"] li {
box-flex: 1;
}
}

Here's the weird thing: in Webkit—Safari and Chrome—the list items reverse their direction: "baz, bar, foo" instead of "foo, bar, baz." It seems that the box-direction value of reverse is being inherited from the body element, which I'm pretty sure isn't the right behaviour. But it can be easily counteracted by explicitly declaring box-direction: normal on the navigation.

What's a little trickier to figure out is why Firefox is refusing to space the list items equally. I've put a gist on Github if you want to take a look for yourself and see if you can figure out what's going on.

The new CSS3 layout modules and responsive design could potentially be a match made in heaven …something that Stephen has been going on about for a while now. Check out his talk at Mobilism earlier this year.

You'll notice that he's using a different syntax in his presentation; that's because the spec has changed. In my example, I'm using the syntax that's currently supported in Webkit, Gecko and Internet Explorer. And, as Eric pointed out in his talk, even when the newer syntax is supported, the older vendor-prefixed syntax won't be going anywhere.

Tagged with
responsive
design
css3
flexbox
aneventapart
aea
minneapolis
conference
layout
standards

Days of science and hacking

I've got some tasty science announcements. Of course anything I have to say is going to be upstaged by today's revelation about Mars. Those NASA showboaters.

Anyway, here's Ariel's keynote from OSCON in Portland last week.

Science Hack Day took centre-stage. Ariel has put together instructions for creating a Science Hack Day in your city. The front page of the wiki now contains a list of places where people are hoping to coordinate an event.

If you want to help make a Science Hack Day happen in Portland, get in touch with rocketeer Nathan Bergey—the science hacker behind the brilliant ISS Notify lamp.

Live in Cape Town? Want a Science Hack Day? Get in touch with ex-pat Dutch astronomer Carolina Ödman.

If you want to help make a Science Hack Day happen in San Diego, get in touch with biologist Jun Yin—the science hacker behind wearable DNA.

It looks like there's quite a lot of interest in organising a Science Hack Day in Dublin to coincide with the Dublin City Of Science event in 2012. Get in touch with Ellen Byrne if you want to be involved.

Those are just a few. There are many more.

One event that's definitely going ahead is another Science Hack Day San Francisco on November 12th and 13th. If last year's event at the Institute For The Future is anything to go by, this will be unmissable.

And you can go.

No, really. In a Steve Jobsian style "just one more thing" addendum to her OSCON keynote, Ariel announced that the Alfred P. Sloan Foundation is providing a grant to fund the Science Hack Day Ambassador Program:

Thanks to this generous support, 10 people interested in organizing a Science Hack Day from around the world will be selected to win a scholarship for a trip to Science Hack Day San Francisco, occurring November 12-13, 2011, where they'll experience first-hand how Science Hack Day works and connect with a global community of organizers. This Science Hack Day Ambassador Program will award individuals who are motivated and planning to organize a Science Hack Day in their city.

To apply, start organising a Science Hack Day in your city and then fill in the application form. The scholarship will cover airfare, four nights in a hotel and $300 for expenses. Ten lucky ambassadors will be winging their way to the bay area this November.

It's time to get excited and make things with science in your corner of this pale blue dot.

Tagged with
science
hackday
scihack

Hot topics, transcribed

As ever, I had a lot of fun moderating the hot topics panel at this year's Web Directions @media in London. Thanks to all of you who left questions on my blog post.

I had a great line-up of panelists:

Relly,
Brian,
Bruce and
Doug.

We discussed publishing, mobile, browsers, clients and much much more. The audio is available for your huffduffing pleasure and I've had it transcribed. I've published the transcription over in the articles section of this site, so if you prefer reading to listening, I direct your attention to:

Web Directions @media 2011 Hot Topics Panel

Web Directions @media 2011: Jeremy Keith — Panel: Hot Topics on Huffduffer

Tagged with
wdx
webdirections
atmedia
conference
panel
transcription
audio

The Lost Lemonworld

When the always-excellent Radiolab podcast turned its attention to the subject of creativity and motivation in an episode called 'Help?', they spoke to Elizabeth Gilbert who reminisced about interviewing Tom Waits on this topic:

He was talking about how every song has a distinctive identity that it comes into the world with, and it needs to be taken in different ways. He said there are songs that you have to sneak up on like you're hunting for a rare bird, and there are songs that come fully intact like a dream taken through a straw. There are songs that you find little bits of like pieces of gum you find underneath the desk, and you scrape them off and you put them together and you make something out of it.

And there are songs, he said, that need to be bullied. He said he's been in the studio working on a song and the whole album is done and this one song won't give itself over and — everyone's gotten used to seeing him do things like this — he'll march up and down the studio talking to the song, saying "The rest of the family is in the car! We're all going on vacation! You coming along or not? You've got 10 minutes or else you're getting left behind!"

Last year the New York Times ran a profile of The National, written while they were still recording the wonderful High Violet—my favourite album of last year. The piece circles around the ongoing problems the band were having trying to tame the song Lemonworld:

Since January they'd done it bright, done it drowsy, done it with violin parts overnighted from Australia by Padma Newsome, done it so many ways Bryce despaired, "It's a riddle we can't solve."

This is exactly what we've been going through with Salter Cane. For about a year we had a song that had been defying us, stubbornly refusing to reach that breakthrough moment where it all seems to come together. We took a break from the song for a while and when we came back to it, we tried approaching it as a new piece. That seems to be working. It's finally coming together.

In the end we realised that we trying to make the song into something bigger than it needed to be. Sometimes it's okay for a song to be small and simple. That seems to be the case with Lemonworld:

Matt said afterward, "we tried so hard and it always seemed to fail as a rock song. It lost the charm of the ugly little demo. Now it's the ugliest, worst-mixed, least-polished song on the record, and it took the longest to get there."

I think that Lemonworld is a strong song. It even stands up to be being butchered by me on the bouzouki.

Lemonworld on Huffduffer

Tagged with
music
saltercane
thenational
song
creativity