Jeremy Keith's Blog, page 146

Shanghai

My trip to Shanghai went swimmingly. It kicked off with W3C Tech, which was a thoroughly lovely event.

I gave my talk—The Design Of HTML5—with the help of an excellent translator performing consecutive interpretation. It was my first time experiencing that—I had previously experienced simultaneous translation in Spain and Japan—and it was quite a good exercise in helping me speak in complete, well-formed sentences (the translation usually occurred at the end of a sentence).

Once my talk was done, I took some questions from the audience and was then showered with good wishes and tea-related gifts. They really made me feel like a rockstar there; I've never had so many people want to have their picture taken with me or have me sign their copies of my books—the publishers of the Chinese translations of DOM Scripting and Bulletproof Ajax were also at the conference.

W3C Tech was held on the east side of the river so I spent the first few days in the futuristic surroundings of Pudong. Once the event wrapped up, myself and Jessica moved across to a more central location just off Nanjing road. I quite liked the hustle and bustle, especially once I remembered the cheat code of "bu yao!" to ward off the overly-enthusiastic street merchants. I wish there were something similar for the chuggers here in the UK, but I have the feeling that the literal translation—"do not want!"—will just make me sound like a lolcat.

Anyway, I had a great time in Shanghai, doing touristy things and taking lots of pictures. I particularly enjoyed getting stuck in at street-level exploring the markets, whether it was electronics or food. The fried dumplings—sheng xian bao—were particularly wonderful. I plan to deliver a full report over at Principia Gastronomica.

So long, Shanghai. 'Till the next time.

Tagged with
shanghai
china
travel
conference
w3ctech
translation

The Kindle connection

There is little to do on the bus ride from Brighton to Heathrow other than to listen to an iPod. So that's exactly what I did on Thursday morning, using the time to catch up on some podcasts.

I listened to a Radiolab short called Pass the Science featuring the author Richard Holmes. Robert Krulwich positively raves about his book The Age of Wonder.

Immediately after that, I listened to an interview with Freeman Dyson. I had to grit my teeth through the climate denialism to get to the good bits about his spaceship designs.

Dyson on Heresy, Climate Change, and Science on Huffduffer

During the interview, the subject of books came up. I knew that Dyson occasionally reviewed a book or two, having read his article about James Gleick's The Information. He mentioned that one of the finest books he had recently read was …The Age of Wonder by Richard Holmes.

The coincidence was too much. I decided I had to have this book. I jotted down the name of it in my notebook. Then I remembered …I had my Kindle with me.

Risking motion sickness, I turned it on just long enough to navigate to Amazon and download the book, overcoming my loathing of its hateful DRM.

Just to recap: based on recommendations received through audio signals sent from a handheld device that stored time-shifted conversations, I connected to a global network of machines to exchange currency and download a file onto another handheld device—all whilst travelling in a moving vehicle.

Living in the future feels pretty cool.

It was even cooler when I entered a heavier-than-air metal craft that was capable of counteracting the force of gravity long enough to take me halfway around the world in just half a day.

Wandering around Shanghai in a semi-jetlagged state also feels like living in the future—given timezone considerations, I kind of am in the future—and it also feels pretty cool.

The problem with seeing so many new sights and experiencing so many new experiences is that I have grown used to sharing them with the world via Twitter. Alas, the Great Firewall of China was forcing me to go cold turkey.

But then Jessica discovered something: it turns out that the 3G Kindle can circumvent China's censorship (for now). My feeling of disconnectedness vanished the moment I pulled up mobile.twitter.com and saw the beautifully mundane updates from my friends across the world.

I still hate the DRM and I still have issues with the ludicrous pricing models of digital books but that's twice now in as many days that the Kindle has given me something more than just a good reading experience.

Tagged with
kindle
travel
shanghai
china
reading

Zånhae nights

It's been good to be back in Brighton—especially over the past few days while Tantek has been around—but now it's time for some more travel …and nipping up to the first day of UX London doesn't count.

I'm going to Shanghai. Shanghai! I know, right‽

Ostensibly, the reason I'm going to Shanghai—I just like repeating that—is to speak at an event called W3C Tech this weekend. But I'm not about to turn around and hop on the first flight back, so I'm going to be spend the week afterwards being a tourist.

I fully expect to culture shocked but I'm really looking forward to this. So many things to see! So much food to try!

If you're familiar with the megacity, I'd love to hear your suggestions. Feel free to leave a comment (that's right: comments!) and assuming adactio.com isn't blocked by the great firewall of China, I'll check out your recommendations.

Oh, and on the subject of the dodgy web situation, I'm guessing you won't be seeing any Twitter updates from me for a while. Also, if you send me an email, you probably won't get a response any time soon …that's got nothing to do with censorship; I'm just crap at responding to email.

旅途愉快!

Tagged with
shanghai
travel
conference
w3ctech

Lazy loading on Huffduffer

If you look at my profile page on Huffduffer, this is what you'll see:

my details,
what I've huffduffed,
links to subscribe to my podcast and
my tag cloud.

That's the core information for that page, preceded by a header with site navigation and followed by a footer with some additional links.

Because I've provided a URL with my details, there's some extra information displayed in the sidebar:

my other profiles on the web, as determined by Google's Social Graph API,
MP3s recommended by Last.fm,
my latest updates on Twitter.

It's a similar situation if you look at a piece of audio I've huffduffed. The core information is:

all the details about the audio (title, description, tags),
who else has huffduffed this,
possibly-related items and
links to share and embed the audio.

In addition, because I've used a machine tag—book:author=cory doctorow—the sidebar contains:

related articles from The Guardian,
sales information from The New York Times,
books on Amazon.

In both cases, this supporting information isn't essential; it's just nice to have.

There's a potential performance problem though. Because this extra information is coming from third-party services—and despite the fact that I'm doing some caching—it could delay the display of the whole page. So I took some time on the weekend to adjust the architecture a little bit. Now the extra information is requested with Ajax once the core information has already loaded. This is lazy loading.

Now I've introduced a dependency on JavaScript, which is far from ideal, but because this is just "nice to have" information, I think it's okay if it isn't seen by a subset of visitors.

In fact, because this extra lazy-loaded stuff takes up valuable screen real estate, I think it might be acceptable to only serve it up to visitors who have the screen real estate to accommodate it:

if ($(document).width() > 640) {
// do lazy loading here
}

So if you load my profile on a small screen, you won't see my latest tweets or my Last.fm recommendations. Likewise if you look at something I've huffduffed that's tagged with music:artist=radiohead you won't see information from Last.fm, pictures from Flickr or albums on Amazon unless you load the page with a wide enough viewport.

Now it could be that the real issue here isn't viewport size, but connection speed …in which case I'm making the classic error of conflating small screen size with limited bandwidth. A script like Boomerang, which attempts to measure a user's connection speed, could be very handy in this situation.

Lazy loading is the new fold

I was chatting with James about the implications that lazy loading could have for earlier phases of the design process: wireframing, page description diagrams, and so on.

Traditionally, you've got only two choices when judging what content to include: either something is on the page or it isn't. You can use hierarchy, position and contrast to emphasise or de-emphasise the content but fundamentally, it's a binary choice. But with conditional lazy-loading there's a third option: include some content if the user's circumstances warrant it.

Once again, Luke's Mobile First approach is a useful thought experiment. It can help prioritise which elements are core content and which could be lazy-loaded:

Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn't room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize.

So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today's desktop-accessed Web sites. That's good user experience and good for business.

Sometimes there are political reasons for wanting the "extraneous detours and general interface debris." Lazy loading for large-screen users could be the least worst option in that situation. Semantically speaking, the kind of content that might be marked up in an aside element might be a good candidate for lazy loading …if the viewport is large enough.

I have a feeling that we're going to be seeing a lot more of lazy loading as the responsive web design revolution rolls on. Used judiciously, it could provide plenty of performance benefits. But if it's taken too far, lazy-loading could be disastrous, resulting in sites that rely on JavaScript to load their core content—I'm looking at you, Twitter.

Tagged with
responsive
design
lazyloading
javascript
ajax
huffduffer
mobile

Respond

Yesterday I documented the way I invoke media queries on Huffduffer while making sure that desktop versions of Internet Explorer get the layout styles. There's an alternative way of serving up layout styles to IE that doesn't involve splitting up your stylesheets.

Supersmart Scott Jehl has written a handy script called Respond that's a textbook example of a browser polyfill:

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will

In the case of Respond, you just need to make sure that you close every min/max-width media query declaration block with a comment:

/*/mediaquery*/

The script then executes those blocks if the specified conditions are met. You can see it action on the demo page.

The advantage of using this solution is that you don't have to split up your styles into two documents (one for content styles, one for layout). The disadvantage is that it introduces a JavaScript dependency.

Use whichever solution works best for you, but note that two things remain constant:

You should still begin with linearised styles and only apply float and width declarations within media query blocks—think Mobile First (though I think of this as device-independence first).

You might still want to use a conditional comment to pull in Respond to avoid the extra HTTP hit for non-IE browsers. In that case, you may as well use the same clause to stop IE Mobile from parsing the script:

Tagged with
responsive
mediaqueries
javascript
respond
browsers
script

Windows mobile media queries

When I met up with Malarkey right before An Event Apart in Seattle he told me about a quick bit of guerrilla testing he had been doing. He popped into a store selling Windows Phone 7 devices and started surfing the web. Specifically, he started looking at sites using responsive design like Jon's and Colly's.

Most of the sites he looked at displayed the desktop layout instead of adapting to the smaller dimensions of the screen. That's because the rendering engine for Windows Phone 7—some bastard hybrid of IE7 and IE6—doesn't support media queries. So if you're using media queries to undo width and float declarations, the media queries won't be executed.

A better option is to begin with the layout-less version and use media queries to add in width and float declarations for the browsers that are wide enough to get that layout—this is kinda like Luke's Mobile First approach. But if you do that, versions of Internet Explorer less than 9 won't get those layout declarations even though the browser window is wide enough (IE9 is the first version to support media queries).

On Huffduffer I get around this problem by using conditional comments. First of all, I split off the layout styles into a separate stylesheet that is called with a media query in the link element:

(This isn't ideal because now there is an extra HTTP request, but hear me out.)

Older browsers—including plenty of mobile browsers—won't download the layout stylesheet so they'll just get the linearised content. That's all well and good but it leaves Internet Explorer out in the cold. Using a conditional comment, I can point older versions of IE to the same layout stylesheet:

Now older versions of Internet Explorer also get the layout styles. This would all be fine and dandy except for the fact that Windows Phone 7 will also get the layout styles because it will understand the conditional comment. Curses!

But with one little tweak to the conditional comment, we can tell Windows Phone 7 not to follow the link:

That's why Huffduffer serves up the layout styles to desktop versions of Internet Explorer but just gives the linearised layout to Windows Phone 7 …as observed by Andy in an AT&T shop on a rainy afternoon in Seattle.

All of this should become moot by September when word has it that Microsoft will upgrade the engine of Internet Explorer Mobile to be closer to IE9. Until then, this combination of stylesheet separation and conditional comments is the most robust way I've found to target as many layout-capable browsers as possible.

Tagged with
responsive
mediaqueries
css
ie
windows
mobile
browsers

Botonomy

In his talk at the Lift conference last year Kevin Slavin talks about the emergent patterns in trading algorithms, the bots that buy and sell with one another occasionally resulting in events beyond our comprehension. It's a great, slightly dark talk and I highly recommend you watch the video.

This is the same territory that Daniel Suarez explored in his book Daemon. The book is (science) fiction but as Suarez explains in his Long Now seminar, the reality is that much of our day to day lives is already governed by algorithms. In fact, the more important the question—e.g. "Will my mortgage be approved?"—the more likely that the decision will not be made by a human being.

Daniel Suarez: Daemon: Bot-mediated Reality on Huffduffer

Kevin Slavin mentions that financial algorithms are operating at such a high rate that the speed of light can make a difference to a company's fortunes, hence the increase in real-estate prices close to network hubs. Now a new paper entitled Relativistic Statistical Arbitrage by Alexander Wissner-Gross and Cameron Freer has gone one further in mapping out "optimal intermediate locations between trading centers," based on the Earth's geometry and the speed of light.

In his novel Accelerando, Charles Stross charts the evolution of both humans and algorithms before, during and after a technological singularity.

The 2020s:

A marginally intelligent voicemail virus masquerading as an IRS auditor has caused havoc throughout America, garnishing an estimated eighty billion dollars in confiscatory tax withholdings into a numbered Swiss bank account. A different virus is busy hijacking people's bank accounts, sending ten percent of their assets to the previous victim, then mailing itself to everyone in the current mark's address book: a self-propelled pyramid scheme in action. Oddly, nobody is complaining much.

The 2040s:

High in orbit around Amalthea, complex financial instruments breed and conjugate. Developed for the express purpose of facilitating trade with the alien intelligences believed to have been detected eight years earlier by SETI, they function equally well as fiscal gatekeepers for space colonies.

The 2060s:

The damnfool human species has finally succeeded in making itself obsolete. The proximate cause of its displacement from the pinnacle of creation (or the pinnacle of teleological self-congratulation, depending on your stance on evolutionary biology) is an attack of self-aware corporations. The phrase "smart money" has taken on a whole new meaning, for the collision between international business law and neurocomputing technology has given rise to a whole new family of species—fast-moving corporate carnivores in the Net.

Tagged with
algorithm
bots
business
finance
trade
singularity
accelerando

Skillful stories

After spending almost a month on the other side of the Atlantic, it was nice to return to Brighton to find it in the first bloom of Spring. Just a day or two after I returned, I was able to enjoy a nice wander around the Spring Harvest food festival sampling the culinary delights and randomly bumping into fellow geeks like Aral, Steve and Mark.

Such is the scenius of Brighton. There's always plenty of smart folk around to gather together with, as evidenced by the multitude of geek gatherings like Build Brighton, dotBrighton and UX Brighton. Last night it was the turn of Skillswap, expertly organised by James.

Skillswap hasn't been about swapping skills for quite a while. Instead it has morphed into a curated evening of related short snappy presentations sometimes followed by an ensemble Q and A. Last night's theme was Skillswap Seeking Stories and it was a humdinger.

Phil Gyford expounded on his wonderful Pepys' Diary project and how it has been nurtured over time. Gavin O'Carroll spoke about Spacelog—one of my favourite sites—and the structure of narratives, games and websites. The marvellous Matthew Sheret, who really impressed me at History Hackday, wrapped it up with a demonstration of the power that each of us has to use the internet to tell stories with our data. "You are Time Lords!" he exclaimed, and illustrated his points with some lovely artwork he commissioned from Tom Humberstone.

It was very generous of Phil, Gavin and Matt to give up their time and travel down from London to deliver such a fantastic evening of thought-provoking entertainment. Seriously, it was better than some paid conferences I've been to. And—thanks to the sponsorship from Madgex—there was free beer ("free" as in "free beer" …as in "beer!" …as in "free beer!!").

Anna was working her podcasting magic, recording the talks. You can subscribe to the Skillswap Huffduffer account if you want to hear them once they're ready.

Tagged with
brighton
skillswap
stories
spacelog
narrative
pepys

Orientation and scale

Paul Irish, Divya Manian and Shi Chuan launched Mobile Boilerplate recently—a mobile companion site to HTML5 Boilerplate.

There's some good stuff in there but I was a little surprised to see that the meta viewport element included values for minimum-scale=1.0, maximum-scale=1.0, user-scalable=no:

Setting user-scalable=no is pretty much the same as setting minimum-scale=1.0, maximum-scale=1.0. In any case, I'm not keen on it. Like Roger, I don't think we should take away the user's right to pinch and zoom to make content larger. That's why my usual viewport declaration is:

Yes, I know that most native apps don't allow you to zoom but I see no reason to replicate that failing on the web.

But there's a problem. Allowing users to scale content for comfort would be fine if it weren't for a bug in Mobile Safari:

When the meta viewport tag is set to content="width=device-width,initial-scale=1", or any value that allows user-scaling, changing the device to landscape orientation causes the page to scale larger than 1.0. As a result, a portion of the page is cropped off the right, and the user must double-tap (sometimes more than once) to get the page to zoom properly into view.

This is really annoying so Shi Chuan set about fixing the problem.

His initial solution was to keep minimum-scale=1.0, maximum-scale=1.0 in the meta viewport element but then to change it using JavaScript once the user initiates a gesture (the gesturestart event is triggered as soon as two fingers are on the screen). At the point, the content attribute of the meta viewport element gets updated to read minimum-scale=0.25, maximum-scale=1.6, the default values:

var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
document.addEventListener("gesturestart", gestureStart, false);
function gestureStart() {
for (i=0; i

That works nicely but I wasn't too keen on the dependency between the markup and the script. If, for whatever reason, the script doesn't get executed, users are stuck with an unzoomable page.

I suggested that the script should also set the initial value to minimum-scale=1.0, maximum-scale=1.0:

var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i

Now the markup still contains the robust accessible default:

…while the script takes care of initially setting the scale values and also updating them when a gesture is detected. Here's what's happening:

By default, the page is scaleable because the initial meta viewport declaration doesn't set a minimum-scale or maximum-scale.
Once the script loads, the page is no longer scalable because both minimum-scale and maximum-scale have been set to 1.0. If the device is switched from portrait to landscape, the resizing bug won't be triggered because scaling is disabled.
When the gesturestart event is detected—indicating that the user might be trying to scale the page—the minimum-scale and maximum-scale values are updated to allow scaling. At this point, if the device is switched from portrait to landscape, the resizing bug will occur because the page is now scaleable.

points out that . That's a pretty straightforward update:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i))

Mathias Bynens updated the code to use querySelectorAll which is supported in Mobile Safari. Here's the code I'm currently using:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}

You can try it out on Huffduffer, Salter Cane, Principia Gastronomica and right here on Adactio.

Right now there's still a little sluggishness between the initial pinch-zoom gesture and the scaling; the scale values (0.25 - 1.6) don't seem to take effect immediately. A second pinch-zoom gesture is often required. If you have any ideas for improving the event capturing and propagation, dive in there.

Tagged with
mobile
javascript
scripting
iphone
ipad
orientation
accessibility
scaling
resize
ios

Principles Apart

I was nervous as hell before my talk at An Event Apart Seattle. I don't normally get quite so nervous but it was a new talk and also …it's An Event Apart! They set a very, very high bar.

Once I got on stage though, I just started geeking out. I was talking about design principles, a subject I find fascinating. I'm hoping that some of my enthusiasm for the subject helped make for a compelling presentation.

It was a whirlwind tour, starting with a long-zoom look at design principles in history before moving on to the web, where I took an up-close-and-personal look at CSS and quite a bit of HTML, before pulling back again to talk about our planet, our solar system and our galaxy. Yes, there was a space elevator.

I mentioned a range of people, organisations and projects that have documented their design principles, but rather than fill up the slides with lots of URLs, I gave just one URL at the start (and end) of the talk:

principles.adactio.com

That's where I gathering today examples of documented design principles. By "documented" I mean "published on the web." There are some really interesting principles from disciplines like urban design but as long as they are locked up in books that aren't addressable on the network, I can't link to them.

This is a fairly small-scale project so I figured a wiki might be overkill but if you know of any good documented design principles that should be added to the list, let me know

Tagged with
aneventapart
conference
seattle
aea
design
principles
documentation