Archive: August, 2012

A recent post on the Twitter developer blog called Changes coming in Version 1.1 of the Twitter API has been causing a lot of consternation amongst developers of Twitter apps (and users of said apps). Now it may well be that a lot of this consternation may be caused by some misunderstandings—the post is not very clearly written.

For example, in the section headed Display Guidelines will be Display Requirements, the following dictum is issued:

We will require all applications that display Tweets to adhere to these. Among them: linking @usernames to the appropriate Twitter profile, displaying appropriate Tweet actions (e.g. Retweet, reply and favorite) and scaling display of Tweets appropriately based on the device. If your application displays Tweets to users, and it doesn’t adhere to our Display Requirements, we reserve the right to revoke your application key.

As it happens, I’ve started recently embedding tweets on my site here using the embed code provided by Twitter. But it seemed pretty clear to me that the new proclamation wouldn’t apply to me: the blog post is talking about usage of the Twitter API. So if you retrieve a tweet using the API, you must display it according to the display guideli—er, requirements. Fair enough.

Just to double-check, I asked one of my (many) friends who work at Twitter. “These display requirements …they don’t apply to me quoting a tweet on my blog, right?”

The answer I got surprised me. Apparently the display guidel… requirements do apply to me. If I want to quote a tweet on my website, I’m supposed to use the embed code to make sure that people can favourite/retweet/follow, etc.

Fuck. That. Shit.

If I want to quote something from another URL, I will do it. I’ll use a blockquote element of course, but I will not be told what markup and JavaScript I must include on my site.

This reminds of those companies that don’t get the web, that have rules in their terms and conditions about how you’re supposed to link back to their website. Twitter’s hammerheaded approach seems remarkably clueless for such a hitherto clued-up company.

I’ve gone back through my previous blog posts where I was using the official embed code and I’ve stripped it out of each and every one. If you are quoting a tweet on your site, I strongly encourage you not to use the offical embed code. I strongly encourage Twitter to stick their display requirements where the sun don’t shine.

Here’s something Jason Kottke said:

I love Twitter the service and I am starting to really dislike Twitter the company.

That’s a tweet. I’m quoting it. I’m not using Twitter’s embed code. I’m not adhering to the display requirements.

Come at me, bird.

Update: So, according to Ryan Sarver the new display gui…requirements only apply to API-retrieved tweets after all (as I first thought). I told him that wasn’t what I heard from a Twitter employee and he said:

We need to be clearer, internally as well.

He went on to say:

We don’t expect every reporter/blogger to do the full thing. However, we do want them to link back to author, attribute, etc.

I said a guideline to that effect would be just fine, but a requirement would not. He agreed, comparing it to journalistic standards and ethics.

I could have linked to those tweets I just quoted from. I chose not to.

There has been a minor outbreak of handwringing and soul-searching amongst bloggers recently. Jon Udell asked Where have all the bloggers gone? Tim Bray responded with his own thoughts on the Blogodammerung. Paul Ford rallied with some straight-up old-fashioned blogging about the rotary dial.

For quite a while now, people have been pointing the finger at Twitter and Facebook, lamenting that these short-form services are time-sucking all their writing energy. There’s probably some truth to that but as harbingers of blogging doom go, they’re pretty weak. Some of us manage to both blog and tweet (I know, right‽).

If your craving to write is satiated by a service that limits you to 140 characters, then maybe blogging was never the right medium for you in the first place. Although, that said, most of the early blogs (or link-logs) tended to have short, snappy updates.

But there’s a more fundamental difference between posting to Twitter, Facebook, Tumblr, or Google+, and posting to your own blog. Unless you’re using a hosted service, your blog belongs to you. I’m not talking about ownership in the sense of copyright—I’m sure all those other services have T and Cs that make sure you retain to the rights to what you write. I’m talking about owning the URLs.

Scott puts it best when he writes Your words are wasted:

You are pouring your words into increasingly closed and often walled gardens. You are giving control - and sometimes ownership - of your content to social media companies that will SURELY fail.

He’s absolutely right. Over a long enough time period, all third-party services will let you down. There was a time when Friendster was too big to fail. There was a time when it wasn’t possible to imagine a web without Geocities. I’ve been burned by Pownce. Magnolia.

When Delicious was going to be “sunsetted” by Yahoo, a lot of people moved to Pinboard, a service that distinguishes itself by having the shocking business model of actually charging for use. That’s good, and it certainly increases its longevity, but it’s still somebody else’s domain. I decided to move my bookmarks over to my own site.

Now that there is much discontent around Twitter’s ongoing metamorphosis into yet another ad-driven media company, people are moving to App.net, a platform that you pay for and whose Alpha service looks a lot like Twitter without the bad parts. But it’s. Still. Somebody. Else’s. Domain.

I suspect that some of the recent blog-handwringing and blog-soul-searching was prompted by the launch of Medium, an intriguing service that seems to be making lack of ownership into a feature rather than a bug. Instead of your words being defined by you, the author, they are subsumed into the collective and defined by their subject matter instead.

That doesn’t appeal to me, but if this feature request from Dave Winer were implemented, I could get behind Medium 100%:

Let me enter the URL of something I write in my own space, and have it appear here as a first class citizen. Indistinguishable to readers from something written here.

I’m a card-carrying Pembertonian. I have no problem with other services syndicating my words but I want to host the canonical copy. That’s what I’m doing with my journal. That’s I’m doing with my links. I’m not doing it with my tweets (unlike Tantek). I’m not doing it with my photos.

That’s the one that worries me the most. I have over 14,000 pictures on Flickr (I keep offline backups, of course). I pay Flickr and that’s a good thing. But it’s still only a matter of time before Flickr goes the way of other Yahoo properties.

Last year I went to IndieWebCamp in Portland to brainstorm and hack with like-minded people who want to be homesteaders instead of sharecroppers. It was an excellent gathering. And now it’s going to happen again, but this time it’s happening in Brighton.

Two days after dConstruct—and one day after Brighton Mini Maker Faire—we’ll gather at The Skiff for a mishmash of BarCamping and Hackdaying.

You should come. Add yourself to the guest list and the Lanyrd page.

I’ll see you there.

For over a decade the home page of this website has effectively been a splash screen.

A splash screen! The only person with a splash screen these days is @adactio.

— Drew McLellan (@drewm) July 27, 2010

Well …not exactly. I mean, it’s not as if it contained an animation and a “skip intro” link. But it has been very minimalist: a brief one-sentence explanation of what this website is and a brief one-sentence description of the latest post I’ve published.

Most blogs are standalone sites—i.e. the blog isn’t part of a larger site—so the home page and the latest blog posts are one and the same. My site is a bit different. The blog part—my journal—is just one piece. There’s also the links section and the articles section. That raises an interesting question: exactly what should the homepage contain?

I’m a great believer in well-designed URLs but oftentimes the home page is something of an exception (one of the reasons I advocate designing the home page last). The URL / doesn’t tell you anything about the resource. There’s basically two different ways to go: keep it really, really minimal (like I’ve been doing for ten years) or make it a patchwork containing a little bit of everything (the way that most news websites work).

For the past few months I’ve been contemplating making the switch from the minimalist to the maximalist approach for the home page of this site. On the one hand, I think it’s RESTfully correct to have the URL adactio.com/ return a terse description of what the site is, with links to further resources. On the other hand …it’s a splash screen.

After much deliberation, I’ve decided to flip the switch.

It’s a bit of a shame. I quite enjoyed being one of the last people I know to have a quirky intro page. But the new home page alleviates a concern I’ve had for a while. I get the feeling that a lot of people have only been paying attention to what’s written in my journal without realising that I post multiple times a day to the links section. The new homepage shows everything—journal entries, links, and articles—grouped by date. It is, if you like, a stream.

It’s exactly the kind of stream that Anil Dash writes about in Stop Publishing Web Pages:

Most users on the web spend most of their time in apps. The most popular of those apps, like Facebook, Twitter, Gmail, Tumblr and others, are primarily focused on a single, simple stream that offers a river of news which users can easily scroll through, skim over, and click on to read in more depth.

Glossing over the lack of definition for “app”, there’s a good point here. The “stream” idea makes a lot of sense …in the right situation. That situation is the list view. If you think about the situations where the never-ending stream has been employed—Twitter, Facebook, Instagram, Pinterest—they are views of lists, usually reverse-chronologically ordered lists.

Going back to URL design, these kinds of list views are the ones that often have a single URL filtered with a query string. You’re much more likely to see /newest?page=2 or /popular?start=10 than you are to see /newest/page2 or /popular/10-20. There’s a good reason for that. While the kind of resource located at the URL remains unchanged—a list of items—the specifics are likely to change every day or hour or even minute—which items are in the list.

So traditionally list views have been paginated using query strings. The streams that Anil is talking about are an alternate way of navigating list views that does away with pagination and query strings. I think that this way of navigating a list view can work well but, as always, the devil is in the details.

First of all, there’s the issue of when to append to the stream. This could be triggered by the user with a link—“load more”—or you could assume that when the user gets to the current end of the list that they’ll automatically want to load more …the dreaded infinite scroll.

As Frank put it:

Infinite scroll is so frustrating for me. It turns every website into a battle I can’t win. There’s no finishing, only forfeit.

— Frank Chimero (@frankchimero) July 11, 2012

Quite apart from any psychological implications, there’s a usability issue here. Interpreting one action by a user—scrolling down the screen—as implicit permission to carry out another action—load more items—is a dangerous assumption. It’s similar to the tyranny of mouseover:

If I click on a link, I am initiating an action. If I fill in a form and press a submit button, I am initiating an action. But if I move my mouse over a page element, I am not initiating an action.

Oh, and if your site has footer, please do not use infinite scroll. Think about it.

In case you hadn’t guessed, I’m a big proponent of allowing the user to explicitly request more items to be appended to a stream rather than using the infinite-scroll pattern.

That said, you could introduce a nice compromise. What if, when the user scrolls down the screen, you begin pre-fetching the next items in the list? That way, when the user explicitly requests more items they’ll load lickety-split.

Anyway, you’ll notice that the new home page of adactio.com is still using pagination. That’s related to another issue and I suspect that this is the same reason that we haven’t seen search engines like Google introduce stream-like behaviour instead of pagination for search results: what happens when you’ve left a stream but you use the browser’s back button to return to it?

In all likelihood you won’t be returned to the same spot in the stream that were in before. Instead you’re more likely to be dumped back at the default list view (the first ten or twenty items).

If your stream is self-contained—like Instagram or Pinterest—then there’s no problem. Twitter attempts to get around the problem by showing you the linked content inline where possible (with some judicious use of oEmbed) and by opening external links in a new window or tab—not so much the cure that kills the patient as the cure that ignores the problem.

In my case, my home page stream is crammed full of hyperlinks. Until there’s a way to make unpaginated streams work nicely with the back button, I’ll stick with pagination.

Anyway, I hope you like the new home page. If you do, you may want to subscribe to the RSS equivalent of the combined stream of my journal, my links, and my articles.

Daniel recently asked a question on Twitter:

I vaguely recall someone (@lukew?) posting examples of ‘open nav’ icons (eg Path and Facebook) showing an emerging de facto standard. Link?

— Daniel Burka (@dburka) August 9, 2012

It was this article by Malarkey that he was looking for. Andy did a great job of comparing the iconography used for navigation in mobile apps and responsive sites. His conclusion:

Unless our navigation’s arranged in a grid (and so we should use a grid icon), I’m putting my weight behind three lines because I think it’s most recognisable as navigation to the average person.

The three-lines icon is certainly very popular, as can be seen in this collection of mobile navigation icons I gathered together on Dribbble.

But Tom has some reservations:

@dburka @adactio @malarkey I’m a bit suspicious of the three lines thing when not in a clear button though. Looks like a drag affordance

— Tom Coates (@tomcoates) August 9, 2012

Andy Davies points out another potential issue:

@sunpig @adactio Chrome canary is now using the triple line for the menu toolbar button twitter.com/andydavies/sta…

— Andy Davies (@andydavies) August 9, 2012

I noticed this in the more recent versions of Android too. It does indeed look a little odd to see the same icon used in the browser chrome and in the document within the browser.

But I still think it’s a good shorthand for revealing a list of items.

The unicode character ☰ ☰ (U+2630) is the Chinese trigram for sky (or heaven)—one of the eight bagua. It consists of three horizontal lines. Now that could be a handy resolution-independent way of representing navigation.

Alas, when I tested this on a range of mobile devices, some of them just showed the square box of unicode disappointment. I had much better luck with the unicode symbol for black down-pointing triangle ▼ ▼ (U+25BC).

Mind you, with a combination of @font-face and sub-setting we’re not limited to what the browser ships with—we can provide our own icons in a font file, like what Pictos is doing.

Here’s a cute little markup pattern for ya.

Suppose you’ve got an input element that has—by means of a list attribute—an associated datalist. Here’s the example I used in HTML5 For Web Designers:

<label for="homeworld">Your home planet</label>
<input type="text" name="homeworld" id="homeworld" list="planets">
<datalist id="planets">
 <option value="Mercury">
 <option value="Venus">
 <option value="Earth">
 <option value="Mars">
 <option value="Jupiter">
 <option value="Saturn">
 <option value="Uranus">
 <option value="Neptune">
</datalist>

That results in a combo-box control in supporting browsers: as you type in the text field, you are presented with a subset of the options in the datalist that match what you are typing. It’s more powerful than a regular select, because you aren’t limited by the list of options: you’re free to type something that isn’t in the list (like, say, “Pluto”).

I’ve already written about the design of datalist and how you can use a combination of select and input using the same markup to be backward-compatible. I like datalist.

I also like the placeholder attribute. Another recent addition to HTML, this allows you to show an example of the kind of content you’d like the user to enter (note: this is not the same as a label).

It struck me recently that all the options in a datalist are perfectly good candidates for placeholder text. In the example above, I could update the input element to include:

<input type="text" name="homeworld" id="homeworld" list="planets" placeholder="Mars">

or:

<input type="text" name="homeworld" id="homeworld" list="planets" placeholder="Saturn">

I wrote a little piece of JavaScript to do this:

1. Loop through all the input elements that have a list attribute.
2. Find the corresponding datalist element (its ID will match the list attribute).
3. Pick a random option element from that datalist.
4. Set the placeholder value of the input to that option value.

Put that JavaScript at the end of your document (or link to it from the end of your document) and you’re all set. You might want to tweak it a little: I find it helps to preface placeholder values with “e.g.” to make it clear that this is an example value. You can do that by changing the last line of the script:

input.setAttribute('placeholder','e.g. '+value);

You also might want to show more than one possible value. You might want the placeholder value to read “e.g. Mercury, Venus, Earth, etc.” …I’ll leave that as an exercise for the reader.

Whenever I mention the communal Brighton device lab on Twitter, or post pictures of the devices, I always get questions about it. So here’s a quick rundown of how things are set up.

Most of the devices are plugged in to two 10-port powered USB hubs made by Trust.

I tend to clump the devices by operating system: a bunch of Android devices here, a bunch of Windows Phones there. That might just be my mild OCD; there isn’t really any particular advantage to doing that.

I’ve also rearranged the home screens to be consistent. All the Android devices have these icons, in this order:

• Browser
• Settings
• Opera Mobile
• Opera Mini
• Adobe Shadow

Adobe Shadow is a very handy way of avoiding manual refreshes on Android and iOS devices. It has a lot of moving parts, but it’s worth setting it up. As well as installing the Adobe Shadow app on each device, you’ll need to download and run the desktop app on the computer you’re “driving” with and you’ll need to install a Google Chrome plug-in. It’s worth taking the time to do it though: you’d spent a lot more time manually refreshing each and every device.

More often than not, you’ll want to test websites before they launch so you’ll need some way of looking at locally-hosted sites. Localtunnel and showoff.io are just two ways of doing that—I’m sure there are many more. Personally, I use showoff.io for $5 a month and it works well for me.

Finally, there’s the question I get asked more than any other…

@adactio ooo I like those stands where are they from? Thats exactly what we need @seriousfoxhq

— Josh Crowder (@JoshCrowder) August 10, 2012

@adactio What are the fancy stands all the devices are sitting on?

— Vincent Pickering (@VIPickering) August 10, 2012

@adactio, where did you get those stands? @stubbornella

— Khoa Nguyen (@khoaski) August 10, 2012

The stands are from The Iron Mill just outside Ballymena in County Antrim. The iPhone stands are nice and sturdy, they work for other models just fine, and delivery is free within the UK and Northern Ireland.

And now, here’s Remy conducting mad experiments with JSbin at the device lab:

Just when I thought the first week of September couldn’t get any better, Brighton SF has ramped up: there will now be three world-class science fiction authors for me to be fanboyishly nervous around. Adopted Brightonian Jeff Noon is going to be there!

So for the princely sum of seven British pounds, you can spend an hour and a half in the company of these SF luminaries:

• Brian Aldiss,
• Lauren Beukes, and
• Jeff Noon.

Blow me down with a psychedelic feather!

It’s less than a month until the Brighton Digital Festival and I’m already ludicrously excited …and somewhat nervous.

The festival will kick off on September 2nd with fireworks …digital fireworks, courtesy of Seb.

The 2nd of September is also the first Sunday of the month, which means it’ll be time for The Geekest Link pub quiz at The Caroline Of Brunswick. And yes, this will be an official Brighton Digital Festival event. If you want to start swotting now, the rounds will be:

• Artificial Intelligences,
• Simulated Realities,
• PC Games,
• CGI picture round and, of course,
• General Nerdage.

I’ll be there, hoping to improve on last night’s performance when our team—Quidditch Pro Quo, Clarice—pulled ahead from a very shaky start to come in second. Second! If you’ve been to the Geekest Link before, and you know how hardcore it can be, you’ll understand why we were so pleased with that result.

The next day, the internet geekery gets in to full swing with Reasons To Be Creative—formerly Flash On The Beach—running from Monday, September 3rd to Wednesday, September 5th.

Wednesday, September 5th is also when the dConstruct workshops kick off. The two workshops going on that day—Ethan’s and Remy’s—are already sold out, but there are still some spaces available for the workshops on Thursday, September 5th from Lyza and Jonathan. They will kick ass, so I highly recommend grabbing a workshop ticket, which comes with a free pass to the dConstruct conference day.

On the same afternoon, Improving Reality will be taking place over at the Pavilion theatre, featuring Warren Ellis amongst others. Once that wraps up, there’ll be a break—time for a drink at the bar—and then, from 6pm it’s time for Brighton SF.

This is what I’m nervous about. I think it’s going to be great—in fact, I know it’s going to be great because it features the great Lauren Beukes and the great Brian Aldiss—but I’m going to be playing the part of the evening’s chat show host. I’ve always enjoyed moderating panels at conferences like @media, South by Southwest, and Mobilism, so I’m hoping my nervousness will evaporate and I can enjoy it.

Seriously, it’s going to be pretty damn great so if you have any interest in speculative fiction, grab a ticket for just £7. Better yet, grab a combination ticket for Improving Reality and Brighton SF together for just £20.

All of those great events will be happening in the lead-up to the big one: dConstruct on Friday, September 7th. I still can’t quite believe the fantastic line-up we’ve got, and I’m looking forward to every single talk. I’ll be introducing the speakers on the day so I hope I don’t make too much of an idiot of myself.

Amazingly, there are still a few tickets left for dConstruct! When I say “a few”, I really mean a few …a handful might be more accurate. But if you’ve been thinking about going, you’ve still got a chance to get in there and snap up a ticket.

If you’re thinking of coming en masse from a single company, check out the sponsorship options. The magnificent Mailchimp and Heart Internet are already on board. As well as our gratitude, you will get your logo on the website and badges, a number of free passes, and a stand at the conference to show off your wares.

If you’re not into the stand idea, another option is to sponsor the pre-party or after-party—always a big hit with the attendees. Or you could sponsor a coffee cart at the event; the coffee from the Brighton Dome is notoriously crap, so any company that sponsors a Small Batch coffee cart will earn the undying gratitude of the multitudinous geeks. Drop me an email or give me a call if you or someone you know wants to be the hero of the hour.

Just one month until dConstruct …I can’t wait!

Put the kettle on, make yourself a cup of tea, and settle down to read a couple of thought-provoking pieces about networked devices.

First up, Scott Jenson writes Of Bears, Bats, and Bees: Making Sense of the Internet of Things:

The Internet of Things is a growing, changing meme. Originally it was meant to invoke a giant swarm of cheap computation across the globe but recently has been morphing and blending, even insinuating, into established product concepts.

Secondly, Charles Stross has published an abridged version of a talk he gave back in June called How low (power) can you go?:

The logical end-point of Moore’s Law and Koomey’s Law is a computer for every square metre of land area on this planet — within our lifetimes. And, speaking as a science fiction writer, trying to get my head around the implications of this technology for our lives is giving me a headache. We’ve lived through the personal computing revolution, and the internet, and now the advent of convergent wireless devices — smartphones and tablets. Ubiquitous programmable sensors will, I think, be the next big step, and I wouldn’t be surprised if their impact is as big as all the earlier computing technologies combined.

And I’ll take this opportunity to once again point to one of my favourite pieces on the “Internet of Things” by Russell Davies:

The problem, though, with the Internet Of Things is that it falls apart when it starts to think about people. When big company Internet Of Things thinkers get involved they tend to spawn creepy videos about sleek people in sleek homes living optimised lives full of smart objects. These videos seem to radiate the belief that the purpose of a well-lived life is efficiency. There’s no magic or joy or silliness in it. Just an optimised, efficient existance. Perhaps that’s why the industry persists in inventing the Internet Fridge. It’s top-down design, not based on what people might fancy, but on what technologies companies are already selling.

Fortunately, though, there’s another group of people thinking about the Internet of Things - enthusiasts and inventors who are building their own internet connected things, adding connectivity and intelligence to the world in their own ways.

You can read it on your networked device or you can listen to it on your networked device …while you’re having your cup of tea …in a non-networked cup …with water from a non-networked kettle.