Integrated Google Plus on the Homepage

I’m getting more convinced Plus is the new Twitter, and also the new Posterous. I’ve been posting things on there I previously would have stuck on the Twitter or the Posterous, and so it was time to integrate Plus on my homepage alongside the existing Twitter and Posterous links.

Latest Post

It was pretty easy to integrate my latest Google Plus post (we don’t really have a name for a Plus post yet; a plust?), as I already have a framework in place for showing the last post from an Atom or RSS feed.

First, I found my Plus feed URL thanks to Russell Beattie’s unofficial Plus Atom Feed service:

Using MagpieRSS, you can easily get the last post.

  1. define('MAGPIE_CACHE_ON', false);
  2.   require_once('magpierss/');
  3.   $feed = "";
  4.   try {
  5.     $rss = fetch_rss($feed);
  6.     $recent_post = $rss->items[0];
  7.     $title = $recent_post[title] . " ...";
  8.     $link = "", $recent_post[link];
  9.     $timeAgo = timeAgo(strtotime($recent_post[updated]));
  10.     // show the post
  11.   } catch(Exception $ex) {
  12.     // log exception
  13.   }


Inside the CSS3-rendered vcard, there’s a link to my plus alongside twitter etc.:

  1. <a rel="me" class="url" href="">plus</a>

/+ …. redirect to Plus

Following Tim Bray’s suggestion, I redirected to the plus page. It’s nice to have a memorable URL.

Google Plus: The Good and the Bad

I’m on Google+ and I’ve mostly found it pretty decent in the ~2.5 weeks I’ve been using it. (Also had an opportunity to do dogfood before it went live, but really, it’s a different world once it’s out there and being used for real, so that’s what this post is about.)

Thought I’d sum up my experiences to date. You’ll notice a lot of my comments compare it to Twitter, because after all the crowd has been similar so far. And honestly, I often find myself with something to write and having to decide whether to stick it on T, G, or both. The decision feels kind of arbitrary right now and will probably shift to G over time, unless Twitter gets its innovation seriously on …

The Good

Things to like about Google Plus …

  • The UI! I’ll call out the design first because it’s not been Google’s strong point in recent years. Yes, clean white pages were a breath of fresh air in 1997, but getting long in the tooth now, and Google Plus shows Google’s now getting serious about visual design, and beyond just statistical hue calibration.
  • Engagement. The overall experience leads to much higher engagement than I’ve seen with blogging, twitter, or anything else. For the big guys, you see literally dozens of comments in the first few minutes.
  • No size limit. You don’t have Twitter’s 140 character limit. Fortunately, Twitter taught us the benefits of brevity, so it’s very acceptable to write just a sentence or two. But you can still go all out with an entire paragraph and that’s fine too. And no more shoehorning txt,just 2fit the arbtrary char limit.
  • Comments. Compared to Twitter, I actually have all responses to my status in one place. On Twitter, there’s no UI to see all the responses to a tweet; you have to view them all individually. The comments also facilitate a conversation, whereas on Twitter, you’d end up with multiple tweets and no decent UI (save third parties perhaps) to view the whole conversation.
  • Mentions. Similar to Twitter @ mentions, but because of the comments, + mentions have more of a feel of being summoned into a conversation. It’s certainly easier to get the entire context of the conversation in which you’ve been mentioned.
  • Search. <rant> Seriously a shambles about Twitter is the inability to search through tweets. I can’t even search my own tweets!!! This was one of my initial motivations for using posterous, figuring I’d pipe everything through it. And same reasons others use identica, etc. The problem is you don’t get all the clients, e.g. Tweetdeck. So I ended up sending a lot of tweets which I can’t actually search through. They fall off Google and they fall off Twitter’s own search. It has constantly amazed me that a company in constant search for a revenue stream doesn’t have a full history of content available.</rant> Now, with Google Plus, there’s no search either, but at least advanced users have the option to search using And in all likelihood, we can assume Plus will have search too. (Although Android search shows Google + Search is not a foregone conclusion of excellence…but Plus’s virtues to date promise good things.)
  • Hangouts. I think the concept of video hangouts is immense, as opposed to just standard VC, and will be a great asset for remote teams. (I know some teams already just keep an open skype session running all day.) However, I’m speaking out of my speculatum because I haven’t yet tried it, for reasons explained below.
  • Updates. The team is doing a great job of engaging with the community, listening to the feedback, and making updates. They’re doing a great job if the worst controversy is closing down accounts of sophisticated tech companies blatantly flouting the rules by setting up corporate accounts, complete with filling in their first name, surname, and gender.
  • Android App. A fine production.

The Bad

Things not to like about Google Plus, keeping in mind it’s still in “field testing mode” (“beta” is so web 2.0) …

  • Circle statuses aren’t public. The problem is I want my Twitter-like geeky status updates to be public, but not contaminate the streams of my non-geek friends and family. There’s no good solution for this right now. If I publish a geeky status update to my “webdev” people, they will get to see it, but it won’t be public. If I publish it to “Public”, everyone in my circles sees it. Right now, I’m opting for “Public”, and if others are doing likewise, their non-geek friends and family will freak out the first time they join Plus and run fast in the opposite direction.
  • No groups. A lot has been said about whether circles themselves are a good idea, given that people’s relationships are nuanced and dynamic. But what interests me more than circles is groups. I’m really hoping Google somehow merges Google Groups with Plus; private groups would be particularly powerful for workgroups. The cool thing about groups, like what Facebook has but few people use is: (a) compared to circles, the visibility model is easily understood and predictable – someone can see messages if they’re in the group and can’t see them if they’re outside the group…simples! (b) you don’t have 100 people all adding the other 99 to the same circle and all micromanaging their circles to stay in sync – the owner just adds everyone once…this saves a lot of hassle, it works better for mainstream users who can’t or won’t micromanage circles, and ends up with a single source of truth.
  • Comments UI. As I mentioned on + Comments UI works for the average Joe with a handful of comments. But for Scoble etc, they are reedeeculous! 100+ comments in an hour? With no threading. It’s a mess to read and removes much of the incentive to post anything. This stuff is write-only. Since comments are +1able, G+ should let the popular ones float to the top, or perhaps display them with the others being collapsed. There are some other good suggestions in the comments to the aforementioned + post.
  • Comments and Sharing. The problem with sharing is people will comment on the sharer, not the original. I think it makes sense for everyone to be commenting in the same space, or at least for some easy summary view. I think this is Google being initially biasing towards privacy measures to avoid adverse reaction, but it does lead to comments being even harder to follow.
  • Finding hangouts. I can’t. Maybe that will change now that PlusRoulette is here! Or not. I also hope Google adds the ability to record hangouts at some stage. Lightweight video podcast ftw!
  • No metadata. I get it. Statuses don’t have titles or keywords or anything else because people are lazy and sites that don’t realise that won’t go mainstream. So Google’s being smart here. But that said, for my own use case, there are times when I’d love the ability to tag a post with “announcement” or whatever, so I can later have a feed of those. Anyway, I guess one can work around it by including some hashtag-like token in the actual status. Just making that point, though I realise my own use case is not that which Google is targeting – it seems the lesson has been learnt from Wave et al that Googlers and assorted geeks shouldn’t always be the target audience.

Okay, that’s me done. I’m enjoying Plus and I’m hoping it spurs Twitter and others to build on the awesome. Are you using it? Any other goods and bads?

Update: conversation on Plus

Best Practices for Mailing List Unsubscription

Having spent the past too many hours gearing up for inbox zero or some such, I’m pleased to say almost every mailing list now includes an “unsubscribe” links (even those which I never signed up to! Which I avoided clicking on as they are probably a dodgy way to get you somewhere else). I assume this is some requirement of Spamhaus etc which the lists must follow to avoid falling in the spam folder, which affects their spam status in GMail etc. Also, if lists make it hard to unsubscribe, users will mark them as spam, which is also detrimental to their status on GMail etc.

After hitting “unsubscribe” many times, here’s what works well (of course, this is just from the perspective of an interested user):

  • While most let me unsubscribe immediately, some require login. This is a bad move as I assume many users simply won’t bother, especially if it’s some list you signed up to years ago. Interestingly, those which unsubscribe immediately fall into different categories – some are off-site, so you can only unsubscribe. Others are onsite and once you unsubscribe, you’re also logged in, which is possibly a security risk (maybe a reasonable one, but I don’t think they’ve always considered this happens). In a few cases (e.g. LinkedIn I think), you can unsubscribe, but then you have to log in after that. A fine example of the awesome Amazon-style “semi-logged in” state.
  • A good practice is to provide settings for what you want to receive. But not too many options! LinkedIn is particularly verbose with its new group feature – turns out each group has its own mail settings – a handful of checkboxes for every group. Just say no!
  • Some have a delay of up to three days, which is not just an annoyance, but breaks the UX principle of immediate feedback. You unsubscribe, then you see a new mail a few hours later and think maybe you didn’t unsubscribe after all.
  • Automatic Unsubscribe is best, but as with all “shoot first, ask later” style interfaces (e.g. Auto-Save), you also want to provide an “Undo” facility. One list did that, with a “Did you really mean to Unsubscribe? Resubscribe“. Smart.
  • Some said “We’re sorry to see you go” etc, but a smarter thing I saw was “You can still keep in touch with us on Twitter and Facebook“.

Why I’m Calling BS on the Filter Bubble

The Filter Bubble is a fancy new term for “The Echo Chamber”, and although the idea is not new, we’ll hear a lot more about it in the next few years.

It’s always good to approach new technologies with caution and skepticism, but I am not particularly fussed about “The Filter Bubble”, certainly not anymore than I was ten years ago. Why?

  • New media actually has the complete opposite effect of a filter bubble. Instead of being forced to read all the views from a small handful of newspapers and TV stations, you have unlimited choice if you want it.
  • Personal recommendation systems, based on your browsing habits, don’t have to recommend things similar to what you’ve seen in the past; they can equally introduce randomness and are well placed to bubbling up opposing views.
  • So the choice is better than before, and so are the technologies to specifically break you out of the echo chamber. Then why do people end up in a filter bubble? Because they choose to. Most people are too busy with work and life to go out of their way to explore different news and views.
  • But you’re different. You do want to bust the bubble and you’ll specifically subscribe to challenging RSS feeds and follow Twitter users you disagree with. This is an awesome explanation of what probably happens if you attempt it. TL;DR: empirical evidence people queue up intellectual movies to watch later, but when push comes to shove, they will watch popcorn movies instead. We can assume the same happens when we sign up for different stuff. On the whole, the disruption hurts our head and we end up ignoring it, so the “filter bubble” is just a mirror of our own preferences.

There’s a good discussion along these lines in this week’s On the Media podcast (from around 33:00).

Watch It Later: A Comprehensive Review of four “Instapaper for Video” apps

In the past, I’ve tried pushing videos to Delicious under a “watchlater” tag or adding them to Instapaper, and neither of these options is effective. So it’s great to see this space coming alive, and how! Here are the options.


VHX is feature-rich, with hipster black background and stretching-to-the-edges full screen app experience. Login: Supports login via Twitter and Facebook. (I wish all the other services here also acknowledged site-specific login is passé. Lazy Reg ftw.)

  • Viewing experience: Uses an elastic layout where you can easily drag the side menu in and out to switch to a “almost fullscreen” view and it’s also easy to switch to completely fullscreen.
  • Discovery: The Channel feature is great – connects to your Twitter, Facebook, etc, as well as general media like BoingBoing, to find videos. There’s also a Dashboard to see your friends’ videos (and apparently the general user community if you don’t yet have any friends!).
  • Social features: You can “like” internal to the site and also share to social networks. The bookmarklet is also social.
  • Archiving: A “history” feature includes all the videos you’ve watched. (It was broken for me just now though.)
  • Bookmarklet and Adding: The bookmarklet identifies all videos and lets you click to add to your queue or share it immediately.
  • Other: One major annoyance is it launches straight into a video from the Dashboard, and this is exacerbated by the fact many of these videos are of the “funny viral” variety (Look! It’s a dog spinning around in circles. ROFLMAOCOPTER.) It would be a tiny change, but make much more sense to launch into your queue.


SQURL is also very feature-rich, with more of a “clean website” UI.

  • Login: No Twitter/etc here…need to make a new username/password, etc, you know the drill.
  • Viewing experience: Reminicent of YouTube in HD mode – video takes up most of the screen, with white margins. Controls for sharing/liking available.
  • Discovery: Discovery happens by curation – any user can create a new “gallery” and curate it, and it’s easy to browse these galleries. (Although adding a new video from here to your queue takes 4 clicks – 3 to many!).
  • Social features: As with SQURL, you can “like” internal to the site and also share to social networks. The bookmarklet is also social.
  • Archiving: All your significant actions, not just past videos, are shown in an Activities section.
  • Bookmarklet and Adding: The bookmarklet identifies all videos and lets you click to add to your queue. There’s also a Chrome extension to automatically stick Youtubes/Vimeos into your history.
  • Other: A major selling point is compatibility with many different video platforms, whereas the others seem to be about YouTube and Vimeo.


Instafilm is more about simplicity and has a neat slider to let you filter by time. (I wish it let you choose minimum time, not just maximum; on a day off, I sometimes want to watch a long video I’ve saved up.)

  • Login: Yep, it’s another startup who probably loses 50%+ of potential users because there’s no federated login support. Lazy Registration people!
  • Viewing experience: Didn’t like it as much as the others, found the video relatively small. I like the max-out approach best.
  • Discovery: No discovery. This is arguably a feature – the simplicity helps it to differentiate.
  • Social features: As with SQURL, you can “like” internal to the site and also share to social networks. The bookmarklet is also social.
  • Archiving: Hmm it lets you “Archive” videos, but this seems to mean “Delete”!!! I can’t find the video I archived anymore.
  • Bookmarklet: The bookmarklet is standard, but I did find it reports ok (“filmed”) whether it captures a video or not.


Like Instafilm, Radbox is a more down-to-earth experience that will be familiar to Instapaper users.

  • Login:Hurrah! It’s not just “create a new username and password”. You can at least login with Facebook, though other options would be nice too :).
  • Viewing experience: As with SQURL, a YouTube-like experience – video mostly maxed out on white background, with controls around it.
  • Discovery: No discovery. This is arguably a feature – the simplicity helps it to differentiate.
  • Social features: As with SQURL, you can “like” internal to the site and also share to social networks. The bookmarklet is also social.
  • Archiving: No archive as such, but you can add into a “Lists” as a form of categorisation. This feature, albeit basic for now, could make the service grow into a video an organising tool, not just “Watch Later”.
  • Bookmarklet and Adding: The bookmarklet is standard, and there are several other InstaPaper like tools available: a secret email address for inbound mail additions; an RSS feed; adding from Google Reader; and an API.


I’m on the fence between SQURL and VHX.

Key advantages of SQURL:

  • Platform support is a big deal here, and it seems to integrate with many more video platforms.
  • There’s already an iOS app (Android please). To be fair, I haven’t evaluated any of these on mobile, and SQURL does claim an optimised iOS web UI, though they’re also working on an app.
  • The curated galleries feature is excellent, they’re seeded it with a ton of galleries to begin with, and you won’t run out of interesting content anytime soon.

Key advantages of VHX:

  • Better UI. I like the video watching interface better overall, with its maxed-out videos, although some will find the initial jump into the Dashboard a little painful, and won’t stick around long enough to work out how the queue works.
  • One-click adding videos to queue, from within the app.
  • Exquisite bookmarklet. The way you can choose between adding to queue or sharing it immediately is awesome.
  • Channels are an excellent source of discovery, as an alternative to SQURL’s curated galleries, though so far, they weren’t niche enough to interest me. If they can build better curation into channels, ie custom channels made by users, that will be the best of both worlds.
  • Login via Twitter and Facebook.

For now, I intend to use VHX for day-to-day adding to queue…while using SQURL for its collections of videos in the event I feel like watching a random video that’s not in my queue. This may change fast though as it’s clear there will be a ton more innovation down the line.

I hope you found this useful, and please add any experiences or additional services in the comments.

The New Domain Game (aka “The Incredible Suckage of International TLDs”)

“.com” is over. Done. Late. Ceased to exist.

You will be incredibly lucky to find a green dotcom par excellence. All the good ones, the not-so-good ones, and even the outright mediocre ones are taken. So you have two options: buy an existing domain name or venture beyond the dotcom garden into the international TLD jungle. Buying an existing domain name has many of its own challenges, even beyond the sheer cost of the operation. But I’ll leave that aside for now as I want to comment on the fun of international TLDs here.

Let’s get something out of the way first. The TLDs are supposed to represent countries, I know. TV is Tuvalu, ME is Micronesia, etc. Well, sorry purists, but this is 2011 and .com is scarce. In the real world, I opt for cognitive ease over standards worship. The trend started with and, got steadily bigger over time, and will continue to do so at least until custom TLDs really take off.

The Minefield of International TLDs

Why are international TLDs so tricky to navigate?

  • Each registrar has its own set of TLDs it covers. Due to the bureacracy involved, they will usually just support a smattering of them, so if you’re holding a few names, you better start getting used to maintaining several registrar accounts. Ugh.
  • Some domains seem to only be handled by the original NIC, e.g. .io, so it won’t show up on meta-searches at big registrars.
  • Some domains have a policy of throttling requests at insanely frustrating rates. e.g. .io only seems to allow only about 8 a minute. .gy is similar. I appreciate they don’t want to get hammered, and especially by automated systems, but I don’t know how even legitimate users are supposed to find an optimal domain at that rate. At least offer more lookups via captcha!
  • It’s not clear which registrar manages which TLDs. Their own homepages do little to elucidate on this, often requiring you to perform a domain search before you find out. And even then, their interfaces don’t always make it clear.
  • When registrars do include info on their TLDs, they often break it down geographically – e.g. “European domains”, “African domains” etc.. That’s really irrelevant for most people’s needs. Alphabetical order would make far more sense.
  • There are different rules for each TLD. Some have length restrictions (e.g. .ly apparently no longer allows non-Libyans to register <4 letters). Some require a registered company in the place, etc. Some registrars will accept your order and then complain later (Gandi). Some will silently fail to search for the domain you wanted, instead suggesting other TLDs, without informing you why it didn’t do the search (Dotster).
  • Because of these problems, it’s apparently quite easy to get a high ranking for something like “.mn domain”, so SEOs have come along and made the search problem even more of a challenge. There are sites claiming to let you register a name, but which aren’t actually a registrar. At best, they probably just send your request on to the actual registrar, for a very hefty premium.

A Few Tips

On the whole, .com is still better. If you explain to a non-techie “my website is delicious”, what they’ll hear is “”. Even if you say “that’s delicious as in del dot icio dot us”. Even if it’s a simpler name than that. People just equate web addresses with “.com”. this is even true with “.org”, many will still remember it as “.com”. Those perceptions will inevitably change, but not for another decade, which is about how long it took for naked domains – those lacking “www” – to sink in.

Domainr is a good resource. Not so much for the name suggestions, but the list of registrars against each TLD.

Gandi seems to have the most coverage. On the other hand, I’ve had weird experiences with them in the past, which is why I moved away many years ago. Now I just tried registering a domain yesterday, first time I used Gandi in 8 or so years, and it’s stuck listed as “waiting” with no explanation.

Try using whois or direct nic lookups (e.g. rather than relying on the registrars, as you’ll find more TLDs.

As always with domains, be cautious about making queries. There’s always the possibility a site operator will yoink it before you get a chance. So “whois” is sometimes preferable or “dig” for the truly paranoid. And if you find a domain that suits, and it’s likely to be desirable, be ready to pounce.

“A” is for Asynchronous, Again.

Here’s an infographic I made for my QCon talk this week, Single Page Apps and the Future of History:

I think it sums up a key point about Ajax, which is sometimes overlooked: Asynchrony. One of my first posts on Ajax, back in 2005, covered it, but it still took years to really sink in. At the time, I was thinking mostly of “Asynchronous” as XHR’s asynchronous mode, so seeing it in contrast to running XHR synchronously. But really, the big deal about Ajax is the UI can carry on, while networking happens in the background. That’s what makes filling out forms faster and what makes tools like Google Docs possible, especially in multi-user mode.

Startups Share Chrome Web Store Experiences

Part of my role in developer relations is to work with startups who are using Google’s platforms, and for me, that mostly means people doing interesting things with HTML5 and the Chrome Web Store. Here are some early reports from developers of great apps which were present – and in many cases, featured – on the web store. It’s early days, but the reports here suggest there are benefits in terms of discoverability and usage.

1. indicates how being featured can impact on the stats of a young product:

Thanks to the store, our user base has increased by 780%, achieving the goals we planned for the next 1/1.5 years within the first 3 weeks. Traffic of has increased even more – by almost 1000.

2. SlideRocket

SlideRocket lists their experiences, including installation stats:

#1 Results – The SlideRocket app on the Chrome Web Store received over 50,000 installs in the first 10 days of availability and the volume hasn’t yet dropped off. As much as 60% of SlideRocket’s daily lead flow now comes from the Chrome Web Store.

#10 The revenue share is only 5% – With all of the benefits in points 1-9 we feel like sharing 5% of our revenue with Google is a small price to pay. Compared to the other marketplaces and apps stores which usually charge between 20% and 25%, this is kind of a bargain.

3. LucidChart

LucidChart emphasises that it’s not all about being featured:

First, thanks to the almost 30,000 users who have installed LucidChart to date, we are one of the top paid apps and also one of the highest rated apps in the Web Store.

Google rotates the applications that are featured in the Web Store, so LucidChart has been both featured and not featured in the store. While featured status definitely brings a significant bump in overall exposure and traffic, we have found that the store still brings an important volume of users even when unfeatured. So the Web Store can be an important driver of traffic and user growth for any web app.

They also comment on the nature of users on the store. I think this is an overlooked-point – we often hear X store has X number of users, but the nature of the users and the way they reached the store should also be a factor.

Second and perhaps just as significantly, we’ve found that the Chrome Web Store brings really well qualified traffic to LucidChart. Our user signup rate for visitors via the Chrome Web Store is about 75% higher than traffic from other sources. So the store not only brings significant numbers of new visitors to our site, but it has an even larger impact on the number of new users we’re registering. In fact, it turns out that a visitor to our listing on the Chrome Web Store is almost as good as a visitor directly to our own site.

4. Streamie

This is of personal interest to me, as I know the developer Malte (who now works for Google), and I had a hand in kicking off its Web Store presence. I wanted to scratch my own itch, so I took 15 minutes out to make a Streamie app, which is a lightweight wrapper of the app at Malte has subsequently incorporated the web store presence into the core Streamie code base, which is nice as an open source example of listing on the store, and he’s submitted it to the store. I was pleasantly surprised (given it’s a “beta” app developed in Malte’s spare time) to see Streamie subsequently featured on the front page of the store. He recently wrote about the front-page experience:

I’m personally somewhat surprised with the overall traffic that Streamie is receiving. It is nice that people like it. The Chrome webstore definitely helped pushing the traffic to a new level, though, which, of course, triggered a lot of blog posts and tweets and then more traffic 🙂

Discussion: Great Apps Get Featured

These days, there are many significant platforms for an HTML5-powered app, beyond just running in web browsers, and I think developers who can leverage them will do well. Chrome Web Store is one of those platforms; others include the Android Market, Apple’s iTunes, and so on. But wait, aren’t those “just mobile” platforms? No – aside from the fact that “mobile” means all manner of tablet, phone, and PDA form factors – Android apps also run on TVs, for example, and HTML5 can be the user-interface driver behind that 10-foot experience. And pure speculation, but I’m fully expecting HTML5 (or “open web standards” if you prefer) to power apps running on watches, cars, kitchen appliances, assorted furniture.

It’s going to be perfectly possible to sell a single app on all of those platforms, where the majority – or even all – of the code is reused across the platforms. Beyond app platforms, you can also be featured in other ways, e.g. by using certain (non-app) platforms or APIs. To take a random – and very cool – API, meet Withings, a smart French outfit with wifi scales that upload your stats to a server. Here’s a page where they list apps using their API. Do you think it’s in Withings’ interests to promote these apps?

Now, I do indeed work for a company with app platforms, so take this advice how you will. My main aim here is to highlight the benefits of working with platforms and to be aware that each of these platforms have developer relations people you may be able to work with, under certain conditions. Why would companies who run app platforms provide free to support developers, especially developers who are already committed to building apps for that platform? The reason is it helps ensure developers are building the best possible apps – the platform people see a lot of apps and know what works and what doesn’t. This leads to (a) great apps for users; (b) “role model” apps for other developers. I recommend you bear these goals in mind when you aim to be featured in the store, because they are important considerations when it comes to being featured. A further reason for developer relations is to listen to developers, and feed bugs and requests back to the platform’s engineers.

In terms of the Chrome Web Store, apps that have done well are typically those which are following good UX principles and making the most of the platform at hand. In the case of an HTML5 app on the Chrome Web Store, making the most of the platform could mean apps using application cache, local storage, HTML5 notifications, CSS3 styling, etc. And for packaged apps, suitably leverage extension behaviours, since those are available to packaged apps. Finally, landing page matters, and fortunately for many developers, there is plenty of low-hanging fruit on their landing pages.

HTML5 Fonts: Let’s Make them DRY

The Problem

Much fun can be had designing with the ever-increasing universe of fonts offered by directory’s like Google’s. Photoshop Tamagotchi is a thing of the past as you can rapidly iterate with a few keystrokes. But it’s still a few keystrokes too many …

A niggle with CSS3 fonts is they involve some redundancy. Here’s a real-world example:

  1. @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
  2. @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }
  3. h3 { font-family: Delicious, sans-serif; }

What happened to Don’t Repeat Yourself? We have “Delicious” mentioned five times here! If we switch from the “Delicious” font to the “Pinboard” font, we’ll need to make five changes. And not everyone uses vim, yo. Moreover, we’ll need to locate a suitable font, e.g. Pinboard, and download it.

I get it, this level of indirection serves a purpose. We can give a handle to the font once and then use that everywhere else. Heck, we could even continue to call the font “Delicious”, but surreptiously switch the “src” to “Pinboard-Roman.otf”. But that wouldn’t be very nice, would it?

Now, a font directory like Google solves part of the problem by explicitly allowing you to link cross-domain to Google. In fact, if you want, it will even generate the stylesheet for you. But you’ll still have the same DRY issue in your CSS – for each new font, you’ll need to include the stylesheet and use it in your CSS.

The Solution

Bottom line, I decided to make this crazy snippet, by manually walking through the font directory and picking out every single possible font:

  1. <link href="|Lobster|Droid+Serif:regular,italic,bold,bolditalic|Nobile|Yanone+Kaffeesatz|PT+Sans:regular,italic,bold,bolditalic|PT+Sans+Caption:regular,bold|PT+Sans+Narrow|Reenie+Beanie|Tangerine:regular,bold|Molengo|OFL+Sorts+Mill+Goudy+TT:regular,italic|Vollkorn:regular,italic,bold,bolditalic|Cantarell|Inconsolata|Crimson+Text|Arvo:regular,italic,bold,bolditalic|Cardo|Neucha|Neuton|Droid+Sans+Mono|Cuprum|Old+Standard+TT:regular,italic,bold|Philosopher|Tinos:regular,italic,bold,bolditalic|Josefin+Sans:100,100italic,light,lightitalic,regular,regularitalic,600,600italic,bold,bolditalic|Arimo:regular,italic,bold,bolditalic|Josefin+Slab:100,100italic,light,lightitalic,regular,regularitalic,600,600italic,bold,bolditalic|Allerta|Geo|Allerta+Stencil|Puritan|Puritan:regular,italic,bold,bolditalic|Cousine:regular,italic,bold,bolditalic|UnifrakturMaguntia|Bentham|IM+Fell+DW+Pica:regular,italic|IM+Fell+English:regular,italic|IM+Fell+English+SC|IM+Fell+DW+Pica+SC|IM+Fell+Double+Pica+SC|IM+Fell+Double+Pica|IM+Fell+Great+Primer+SC|IM+Fell+Great+Primer|IM+Fell+French+Canon|IM+Fell+French+Canon+SC|Coda:800|Raleway:100|UnifrakturCook:bold|Covered+By+Your+Grace|Just+Me+Again+Down+Here" rel="stylesheet" type="text/css" />

I’ll repeat that below for ease of cut-and-paste:

<link href=”|Lobster| Droid+Serif:regular,italic,bold,bolditalic|Nobile|Yanone+Kaffeesatz| PT+Sans:regular,italic,bold,bolditalic|PT+Sans+Caption:regular,bold| PT+Sans+Narrow|Reenie+Beanie|Tangerine:regular,bold|Molengo| OFL+Sorts+Mill+Goudy+TT:regular,italic| Vollkorn:regular,italic,bold,bolditalic|Cantarell|Inconsolata|Crimson+Text| Arvo:regular,italic,bold,bolditalic|Cardo|Neucha|Neuton|Droid+Sans+Mono| Cuprum|Old+Standard+TT:regular,italic,bold|Philosopher| Tinos:regular,italic,bold,bolditalic| Josefin+Sans:100,100italic,light,lightitalic, regular,regularitalic,600,600italic,bold,bolditalic| Arimo:regular,italic,bold,bolditalic| Josefin+Slab:100,100italic,light,lightitalic,regular, regularitalic,600,600italic,bold,bolditalic| Allerta|Geo|Allerta+Stencil|Puritan|Puritan:regular,italic,bold,bolditalic| Cousine:regular,italic,bold,bolditalic|UnifrakturMaguntia|Bentham| IM+Fell+DW+Pica:regular,italic|IM+Fell+English:regular,italic| IM+Fell+English+SC|IM+Fell+DW+Pica+SC|IM+Fell+Double+Pica+SC| IM+Fell+Double+Pica|IM+Fell+Great+Primer+SC|IM+Fell+Great+Primer| IM+Fell+French+Canon|IM+Fell+French+Canon+SC|Coda:800|Raleway:100| UnifrakturCook:bold|Covered+By+Your+Grace| Just+Me+Again+Down+Here” rel=”stylesheet” type=”text/css” />

Now include that in your CSS and you can freely use whatever font you want, whenever you want:

  1. h3 { font-family: Neucha, sans-serif; }
  2. div { font-family: "Reenie Beenie"; }

Production Use

I haven’t tested it, but I’m informed modern browsers will thankfully download only the fonts they need, so this is actually a viable solution for sites which will be frequented only by modern browsers, though obviously the snippet itself is too big for sites where performance is critical.

Unfortunately, IE6-IE8 will actually download every single font specified! So really, you should only be using this for development, and ensure production sites only declare the fonts they need. However, don’t lose site of DRY! In the spirit of Agile, DRY, and Continuous Integration, it would still be worth looking at ways to automate that process, e.g. with a server-side solution that generates the minimalist “link” tag.

Of course, the snippet is limited only to the Google fonts, good enough for my aesthetically-challenged purposes, but the principle could be generalised to encompass other font directories. Or someone in a company which has licensed and/or issued a standard set of fonts via their style guide, could also generate a company-specific snippet fot this purpose, containing all fonts. They could then make this a standard stylesheet which could be linked to from any HTML document.

8 HTML5 Features You’ve Never Seen Before [LWS Talk]

I had the honour of speaking at London Web Standards this week along with Opera’s Patrick H. Lauke. @otrops, @twitrnick, and the rest of the volunteer organisers put a ton of effort into each event and it shows.

At this event, I presented “Eight HTML5 Features You’ve Never Seen Before”:

It’s the visual elements of HTML5 that everyone is watching right now, but the present surge of web evolution encompasses much more than that. This talk will overview several important technologies in the “everything else” basket of HTML5 and related technologies: application caching, client-side storage, cross-origin resource sharing, websockets, ping, session history, workers, and geolocation.

The new means of presentation – CSS3, Canvas, SVG, Video, etc. – are a perfect complement to all of this new functionality, allowing it to be visualised and interacted with in fun ways.

Here are the slides.

And a favourite CORS slide:

The Video

Other coverage (thanks all):

Live Blog (thanks @flexewebs)

Notes from Steve Workman

More sketch from Justin Avery:
Sketch Note #lwsdeep HTML5 8 Things