Archive: December, 2011

A little while back, Andy wrote:

Even if you happen to be a genius in the waiting, there are no svengalis to pluck you from obscurity and put you on the pedestal you know you deserve. … So if you want to contribute to articles, write books and speak at conferences, you’re the only person in the way.

You can contribute to A List Apart. You can write for Smashing Magazine. You can also put a resource written in HTML at your own URL that is retrievable via HTTP …write a blog post, in other words.

If you prefer dead trees, you no longer need a publishing house. Lulu, MagCloud, Newspaper Club …you have incredible resources at your fingertips.

Move The Web Forward is a guide to help web workers of any skill level contribute to web standards.

JSConf is looking for speakers. You have until January 15th to fill in this form and step up to the plate.

The Industry Conference is looking for speakers. Here’s the form for you to fill in.

In a few days it will be a new year. Traditionally this is a time of resolutions and vows of self-betterment. If you were planning on making any kind of resolution related to contributing to the web community, I hope that you’ll find some of these links useful.

And if you choose to ignore these links, that’s fine. But then if at any time in the new year you find yourself kvetching about articles or talks from “the same old faces” …physician, heal thyself.

As the year draws to a close, I find myself casting an eye back on the past twelve months. There are two events that stand out for me:

• Mobilewood—the get-together in the woods of Tennessee that led to the Future Friendly movement and
• Hackfarm—the Clearleft outing to Herefordshire that resulted in Map Tales.

I learned a lot at both events. I think there’s enormous benefit in getting together with your peers for days of intense geekery—it’s quite the learning experience.

Looking ahead to next year, there’s one more such event on the horizon.

Aaron started up Retreats 4 Geeks last year and kicked it off with an outstanding week in the woods with Eric. From March 25th to 30th Aaron and I will be leading Retreat 4 Geeks on Progressive Enhancement. Here’s the best bit: it’ll be taking place on a horse ranch in Clark, Colorado.

I’m expecting an intense three days of hands-on coding bookended with some fun outdoor activities. Based on my experiences this year with these kinds of in-depth, focused gatherings, I think it’s going to be pretty special.

If that sounds like something you’d like to be a part of, you can register your place now. Everything—except your airfare—is included: excellent food, luxurious lodging and multiple days of learning and practicing progressive enhancement and mobile-first responsive design. And if you need any assistance in convincing your boss to fork out for the event, there’s a handy factsheet you can download, print out and leave in convenient spots around the office.

So …maybe I’ll see you in the Rockies?

Dear Apple Claus,

I’ve been a very good boy this year so I hope you don’t me asking for a little present. What I’d really like for Christmas is for you to fix that strange orientation scaling bug in Mobile Safari.

Just in case you’ve forgotten about it, my friend Scott—who has been a very, very good boy this year (what with that whole Boston Globe thing)—put together a test page quite a while back to demonstrate the problem.

Basically, if I set meta name="viewport" content="width=device-width, initial-scale=1.0" then it means a pixel should be equal to a pixel: in portrait view, the width should be 320 pixels; in landscape view the width should be 480 pixels. But in Mobile Safari, if I move from portrait to landscape, the width jumps to a value larger than 480 pixels, which means the hapless user must double tap to bring the scale down to 1:1.

Now, admittedly, I could just set meta name="viewport" content="width=device-width" and leave it at that (or I could additionally declare minimum-scale=1.0). But then when the user changes from portrait to landscape, although it doesn’t have the same over-zooming behaviour, it does scale up. That means I’m not getting the full 480 pixels (it’s effectively still a 320 pixel wide display, even in landscape).

I could make the bug disappear by adding maximum-scale=1.0 or user-scaleable=no but that’s the cure that kills the patient. I also did some hacking with Shi Chuan but what we come up with still feels fairly clunky.

So that’s why I’m writing to you, Father Applemas. Won’t you fix this bug for me?

My friend PPK thinks you won’t fix this bug because it would trigger a reflow (and repaint) of the page …but I know that can’t be the reason because the bug doesn’t occur when going from landscape to portrait!

Also—and this is the really strange part—If I’m looking at a web page on my iPhone/Pod in a custom browser (like the Twitter app), rather than using Mobile Safari, then the bug doesn’t occur.

I don’t get, Apple Claus. Why have one behaviour for webviews in other people’s apps and a different behaviour for your own app?

Anyway, if you could see your way to granting this boy’s wish, it would make for a webby Christmas.

Hugs and kisses,

Jeremy

P.S. By this time next year, it would be lovely to have access to the camera (and other device APIs) from the browser …but I’m getting ahead of myself.

Update: the bug has been fixed in iOS 6.

I flew out to San Francisco last week for An Event Apart. This was the final event (apart) of the year so it was something of a bittersweet affair. This year the line-up for AEA was—with some minor modifications—consistent from city to city:

1. Seattle
2. Boston
3. Atlanta
4. Minneapolis
5. Washington DC
6. San Francisco

It was like a travelling roadshow, a carnival of web geekery. Next year’s AEA line-up will be very different from city to city, showcasing lots of new speakers, so last week’s San Francisco gig felt like the last concert of a tour before the band breaks up.

Well, we went out with a bang. It was a great conference. But then, every AEA this year has been pretty great (see my account from Boston, for example). I saw so many great presentations and met so many lovely people.

With An Event Apart San Francisco falling in December, I was able to extend my travel time into a Christmas-time trip to Jessica’s family in Arizona …but not before spending a week in San Francisco.

I love that town. Admittedly that might be because there’s so many people I know that live there but it’s just a fun place to be a tourist. Coffee at Four Barrel, a Mission burrito, coffee at Blue Bottle, pizza in North Beach, beers at Toronado, wine-tasting in Napa—and all of it culminating in a once-in-a-lifetime trip to The French Laundry.

I put together a Map Tale of my trip, which turned out to be a great way of jotting down my experiences at the end of each day (or at the start of the next day if the day’s exertions proved too much).

It’s been just a week since Clearleft unveiled the Map Tales project that we built at Hackfarm and there have already been some great stories told with the site.

Paul documented his 2009 road trip to South by Southwest.

Alessio put together a photographic guide to his adopted home, showing the secrets of Barcelona.

Andy told two tales of two different trips: wine-tasting in California’s Dry Creek Valley and hanging with the hipsters in East London.

Fellow Brightonian Tom Prior has recreated the story of the famous Stirling Moss victory at the 1955 Mille Miglia, the legendary open-road endurance race in Northern Italy.

I love the simplicity of Oliver and Peter Walk to School that Peter Ruk has embedded on his site—beautifully simple psychogeography.

I’ve made a map tale of the voyage of The Beagle with material fromAboutDarwin.com.

Meanwhile Anna is putting together the tale of the Terra Nova expedition to the South Pole because—get this—a relative of hers was part of Scott’s team!

There’s plenty of room for improvement with Map Tales. It would be nice to have customisation options at some point—colours, fonts, maybe even map tiles. Some narratives would probably work better with aerial imagery, for example. In fact, that’s something that Andy has been tirelessly tinkering with. To get a taste of how that looks, check out Britain From Above, the epic map tale of the 2008 BBC documentary series.

The Never Forgotten House is a beautifully-written piece with a central premise that is utterly, utterly flawed. Once again the truism that “the internet never forgets” is presented as though it needed no verification.

Someday soon, the internet will fulfill its promise as a time machine. It will provide images for every space and moment so we can fact check our memories. Flickr and Facebook albums will only accumulate.

Citation needed. Badly.

Read the article. Enjoy it. But question its unquestioningness. It made me sad for exactly the opposite reasons that the author intended.

Every essential moment of a child’s life is documented if he was born in the West. With digital album after album for every birthday, every Christmas, he will never struggle to remember what his childhood home looked like.

I wish that were true.

It’s December. That means it’s time for the geek advent calendars to get revved up again:

• PHP Advent 2011,
• Adfont Calendar 2011 and
• 24 Ways 2011.

For every day until Christmas Eve, you can find a tasty geek treat on each of those sites.

Today’s offering on 24 Ways is a little something I wrote called Conditional Loading for Responsive Designs. It expands on the technique I’m using on Huffduffer to conditionally load inessential content into a sidebar with Ajax where the layout is wide enough to accommodate it:

if (document.documentElement.clientWidth > 640) {
// Use Ajax to retrieve content here.
}

In that example, the Ajax only kicks in if the viewport is wider than 640 pixels. Assuming I’ve got a media query that also kicks in at 640 pixels, everything is hunky-dory.

But …it doesn’t feel very DRY to have that 640 pixel number repeated in two places: once in the CSS and again in the JavaScript. It feels particularly icky if I’m using ems for my media query breakpoints (as I often do) while using pixels in JavaScript.

At my recent responsive enhancement workshop in Düsseldorf, Andreas Nebiker pointed out an elegant solution: instead of testing the width of the viewport in JavaScript, why not check for a style change that would have been executed within a media query instead?

So, say for example I’ve got some CSS like this:

@media all and (min-width: 640px) {
    [role="complementary"] {
        width: 30%;
        float: right;
    }
}

Then in my JavaScript I could test to see if that element has the wide-screen layout or not:

var sidebar = document.querySelector('[role="complementary"]'),
floating = window.getComputedStyle(sidebar,null).getPropertyValue('float');
if (floating == 'right') {
// Use Ajax to retrieve content here.
}

Or something like that. The breakpoint is only ever specified once so I ever change it from 640 pixels to something else (like 40 ems) then I only have to make that change in one place. Feel free to grab the example and play around with it.

By the way, you’ll notice that in the original 24 Ways article and also in this updated example, I’m only testing the layout on page load, not on page resize. It would be fairly easy to add in an onResize test as well, but I’m increasingly coming to the conclusion that—apart from the legitimate case of orientation change on tablets—the only people resizing their browser windows after the page loads are web designers testing responsive designs. Still, it would be nice to get some more data to test that hypothesis.

I had a good productive Responsive Enhancement workshop in Düsseldorf and Marc was an excellent host. But alas, I couldn’t stick around for the rest of the Beyond Tellerrand conference which was, by all accounts, excellent.

I made my way back to the UK post-haste and started playing rail parkour to get across the country to Herefordshire. There lies The Colloquy—the rural but very comfy location for Clearleft’s week of hacking in the countryside.

Casing out the joint

We called it Hackfarm. The idea was pretty straightforward. For one week we would sequester ourselves in a farmhouse (admittedly it was a farmhouse with a jacuzzi), decide on A Thing to build and then …build it.

Max and Mike graciously agreed to join us with their considerable dev talents. Jessica also joined us, rising to the considerable challenge of catering for a dozen people.

Planning the heist

We didn’t know what we were going to build, ‘though some people had some ideas. We spent the first evening listening to those ideas, discussing them and voting on them until we came to an agreement and decided what the project would be. The next morning, Hackfarm began in earnest.

Part of Hackfarm’s raison d’être was to try out some new things. In that spirit, Andy introduced to the Kanban method and we gave it a whirl.

Everyone got involved in the design process, splitting into ad-hoc groups to figure out personas, generate user stories and sketch interface ideas. It was equal parts hard work and really good fun.

The caper

As the ideas solidified, we shifted to our laptops, firing up graphics programmes and text editors, ready to get down to some building. Again, collaboration was the key. Developers and designers sat down together, pushing pixels and cranking out code.

By the end of the week we had a working website.

The reveal

It’s called Map Tales. It’s a tool to help people tell stories illustrated with maps.

Now there are plenty of map-based narratives out there on the web but many of them suffer from what Schuyler Erle calls red dot fever: a bunch of points shown on a map all at once. One of the design principles that emerged early on at Hackfarm was that the map was secondary to narrative. When you’re reading a story in a book, you don’t know where the next chapter will take you.

Compare this Google Maps narrative with the corresponding Map Tale.

It’s a simple narrative device but it adapts well to stories of all sizes. Rich put together a Mediterranean-spanning Map Tale for The Odyssey while I documented the tale of recreating shots from The Matrix in their filming locations in downtown Sydney.

The site went live on the last full day of Hackfarm but we’ve kept it quiet ‘till now while we sorted out some of the rough edges. I’ve been tweaking the small screen styles a bit while Andy has been working like crazy to finesse the tale creation process.

I know I’m biased but I really, really like Map Tales. I like that it allows anyone to tell a story and then share it or embed it on their own website. I like that doesn’t require any kind of sign-up or log-in process (you get a secret URL for every tale you create that allows you to go back and edit it). I like that it isn’t trying to be another social network.

And I really, really, really like the people who made this. I count myself very fortunate indeed to work with such a great group of smart and talented friends.