Weblog

TL;DR

Collect, share and discover type combinations with Typ.io. It’s live and you can play with it.

The idea

Choosing one font is easy… finding companions is really hard.

When I start a new project I’ll generally go and have a browse of ColourLovers for palette inspiration. I wanted the same for fonts.

I collect samples of webtype in Evernote that I find around the internet. It’s great as far as it goes but when it comes to acting on the inspiration it’s quite painful: go to the site, inspect the elements I like, check the computed style, copy the font, search Typekit, Fontdeck and Google Web Fonts to see whether they have it. Rinse repeat.

Typ.io

To make my life easier, I made myself a little bookmarklet to extract the font data and built a little app to store the data. That’s Typ.io. On Typ.io I can browse the samples I’ve saved, see what fonts are used and what I’ve tagged them with. Each font gets its own page, illustrated with samples people have saved, and what fonts are commonly combined with it. If I find another sample I want to save for later, I can “like” it.

Take Proxima Nova, for example. It’s all over the shop at the moment. Many designers combine it with Lucida Grande and Helvetica Neue. Agencies and apps seem to favour it. If you want to use it, you can get it from Fontdeck, Fonts.com and Typekit amongst others.

Bookmarklet

You can the latest version of my bookmarklet from the Contribute page. When you find a site with type you like, hit the bookmarklet and follow the instructions.

Chrome Extension

On a friend’s suggestion, I extended the bookmarklet into a Chrome extension. It sits in the bottom right hand side of your browser. Click it to see the fonts being used on the page. Click the fonts to see exactly where each one is employed. Click on the plus to start sending a sample to Typ.io.

Next

I’m trying to make the screenshot stage less painful. I want posting to Typ.io to be a single step, rather than the slightly irritating screenshot and crop course you have to navigate.

Done

And that’s it. Care to try it out?

To distract me from my hangover the other weekend I made a small thing to scratch an itch I have with internet video… It’s called *vidbox and you can read about it in my original announcement.

Here’s the crux of the problem:

• When I’m out and about I check Twitter, Facebook, email etc on my iPhone. 
• Many interesting-looking videos come my way. 
• I want to watch them when I get home. 
• I need some way to get these videos posted to my TV at home.

Almost every app has a share via email option so that felt like the simplest and most flexible way around the problem. 

So my requirement was: every user of *vidbox should be able to send emails containing links to have them added to their queue. 

Cue a quick look at the Heroku addons and a flick through the docs for CloudMailIn, Mailgun and SendGrid. It was close between CloudMailIn and Mailgun but I decided to try the latter. 

Mailgun has a load of fairly complex filtering features; I just wanted all emails to be forwarded to a webhook in my app for me to deal with and it wasn’t entirely obvious how to do this so I thought I’d write it up.

To get Mailgun to forward all email to my app I…

1. installed the addon on Heroku.
2. went to Routes.
3. created a new route.
4. entered a “filter expression” of “catch_all()” and an “action” of “forward(http://myapp.heroku.com/controller/process_email)”
5. saved it.

Good to go. Now every email will be passed on to my app.

And that’s basically it. The best thing about Mailgun (and the bit that surprised me the most) is that you never actually have to deal with email. At all. They break down the email into its constituent parts and post them to you in the data. All I needed from the incoming params was recipient and body-plain but a full list is available on the Mailgun docs.

Every *vidbox user is given an email address of token@vidbox.mailgun.org, where token is a 16 character hash, unique for each user. For each incoming message I can then find the sending user from params['recipient'] and the link from params['body-plain'] (with a simple regular expression). 

So when I find a video that looks interesting while I’m out and about I just forward it to my *vidbox address and voila - it’s in my queue. Sweet!

This was a Sunday hack project to scratch an itch. 

Netflix (in the UK at least) don’t have any way to bookmark stuff to watch later, while iPlayer, 4OD, YouTube and Vimeo all have their own. Cue much switching of tabs. Services like VHX and Spool are great but seem to be aimed at tablet watching, with tiny text that’s hard to read on a TV screen from across the room. On top of that, I want to be able to add to my list from my Macbook at the office and Tweetbot on the bus.

Long story short, I made a thing. It takes in links from a bookmarklet or email, puts them on a 10ft-readable page that doesn’t require re-login and tracks the ones you’ve clicked on.

*vidbox - your sofa-friendly video todo list

While on holiday over Christmas I finally got around to reading The Lean Startup by Eric Ries. I’ve been meaning to pick it up for ages but thought I’d probably know most of it already, having seen him speak and talked to a lot of folk about Lean at various socials. I was completely wrong… It’s one of the best and most inspirational books I’ve read in a while. It also happens to be one of the most misrepresented. I hear a lot of talk about minimum viable product; few mention the scientific method, which was the revelation of the book. This focus on running experiments, in the form of small hypothesis -> test -> learn loops, got me really exited. Talking to David about it, we decided to try out a few Lean principles on Hammer Principle, our neglected baby.

Despite getting a constant stream of traffic, Hammer Principle has been essentially untouched for the last 18 months or so while David and I have concentrated on Aframe. We started a complete rewrite to mark its year anniversary but it got derailed and abandoned.

This time around, following the Lean philosophy, we formulated several hypothesis about users’ behaviour on Hammer Principle, concocted little experiments to test them, wrote small features to gather data and added Mixpanel tracking to try to track the results. 

To give a quick example, Hammer Principle gets constant traffic to programming languages and databases but very little to martial arts. We posited that this was because people didn’t know about our other nails (what we call categories). Experiment: make it obvious that there are other nails to visit by adding a global navigation bar. Measure: people who use the navigation bar who go on to participate in another nail. The initial results have been encouraging (we’re getting about 10% of visitors following this funnel) and we now have a baseline to improve upon. This was our first experiment and I’m not convinced that we necessarily got our process right but there was an unexpected consequence…

Leaving the whole Lean circus aside, having targets and metrics has made working fun again. We develop something small that doesn’t take long and watch the counters tick. Conclusions are drawn and we then decide what to do next. Instead of pouring an arbitrary amount of effort into a black hole, hoping headline metrics like traffic and retweets will let us know whether we’ve done the right thing, we get a real sense of progress towards a goal, which is satisfying and motivating.

It doesn’t matter whether you’re doing a startup or just noodling on a personal project, I highly recommend reading up on Lean and playing with an experiment or two.

My friend and partner in crime, DRMaciver, pointed me to David McCandless & Derek Guo’s shocking visualisation of Atlantic fish stocks in the Guardian. I’d been vaguely concerned about our fish-eating habits. I happen to love fish but the murmurs about the state of fishing has been making me increasingly uneasy, fuelled by documentaries like Shark Water and Blue Planet. But I find it very hard to make a decision about what’s okay to eat. I simply can’t keep the information in my head.

An IRC buddy of mine, Zarkonnen, had a similar problem and turned the Guardian’s data list into HTML and JSON. I pulled in his JSON and turned it into a mobile-friendly, home-screenable list. Nothing fancy but I’ve been using it for the last few days and have found it genuinely useful already.

So, here it is: Which Fish?

I’ve been getting very into personal instrumentation recently, tracking energy expenditure via a Fitbit, weight via some Withings scales, mood via Mappiness,  movies, gigs and books via my very own @oo5 project. I started noting all this stuff  out of curiosity; I didn’t have any concrete plans for the data. There were vague thoughts of some kind of visualisation to help me find correlations between my habits and my general wellbeing. I ran across an anecdote from the Evernote CEO, related by Tim Ferriss, which got me thinking though. This chap had been trying to lose weight for years. He’d tried every fad diet under the sun but while the weight shifted, it always came back. The single most important thing in his road to a leaner, meaner self was simply to weigh himself every day and let his subconscious do the rest.

Since reading that I’ve noticed something about my behaviour as it relates to what I do, where and when. My Fitbit makes me think twice about getting the bus all the way to work; my Withings scales influence my lunch destination; @oo5  (with the help of my Kindle) effects whether I browse the internet, catch up on Instapaper or read a proper book. The simple act of measuring things has changed my behaviour. 

When you can measure what you are speaking about, and express it in numbers, you know something about it; but when you cannot measure it, when you cannot express it in numbers, your knowledge is of a meager and unsatisfactory kind; it may be the beginning of knowledge, but you have scarcely in your thoughts advanced to the stage of science.

— Lord Kelvin in 1884

Curious, I wanted to try measuring some things I wanted to change. I tried using the very beautiful Daytum but it was just a touch too slow to inject into my daily routine. After a bit of a think I decided to make a simple iPhone-installable counter, that could be launched fast, used quickly, and forgotten about. So on the way back from SXSW I hacked together  TallyHo. You can create counters for anything you like, add them to your home screen, and away you go. I’m tracking a whole bunch of things, including cups of coffee, which I should drink less of,  glasses of water, which I should drink more of, and plastic bags, which I want to use less of. 

The main focus is on what you’ve done today. There’s a big number in the middle of the screen telling you how you’re doing. Underneath is the medium term view - how you’re doing this week, and the long term view - how you’re doing overall.

I released TallyHo quietly a while back and uptake has been surprising. Somewhere over 1200 items have been counted to date, with tallies including:

• Cigarettes
• Coffees
• Beers
• Teas
• Indigestion
• Bars of chocolate
• Bags of crisps

At the moment the data gets synced to my server and there’s an option to claim your tally by signing into Twitter, so you will be able to retrieve your data should anything happen to your phone. I might add a sync to Daytum too, to benefit from their lovely visualisations. In the meantime, drop me a line if there’s anything you’d like to see TallyHo do. I’d also love to hear from you if it’s helped you change something (anything!) about yourself.

Web Designer Depot have published my predictions for 2011 alongside a bunch of my favourite designers. Here’s what I had to say, with bonus hyper-linky goodness.

If 2010 was the year that mobile came of age then 2011 will see it move into its own apartment next door to the desktop and start throwing wild parties. Having started as the younger, slightly neglected sibling it’s now on the verge of shouldering the desktop out of the way.

The industry (as articulated by Fred Wilson of Union Square Ventures) is coming around to the idea that mobile could often be the primary platform for new apps. As web developers and designers we are in a great position to take advantage of this shift through infrastructure enhancements like HTML5 and Phone Gap, and frameworks like jQuery Mobile, Zepto and Backbone, along with a horde of others.

All of these are based on technologies we already know and can start working with today. Rather than clumsily reskinning our websites, 2011 will be the year we embrace the philosophy of mobile to produce context aware, task tailored, fundamentally handheld apps.

This time last year I had just arrived in Belize. I was standing on the beach in Placencia, on the world’s narrowest high street, with my brother and friend Brett. Our ferry had been cancelled and we’d spent the whole day working our way from Honduras up the coast by truck, boat, bus and lancha.

With the New Year just gone I thought it might be nice to reminisce so I build a little hack project to help me mine the hundreds of memories that my Flickr stream contains. It’s super basic at the moment but I thought I’d put it live anyway. So. Introducing:

This time last year - Flickr reminiscence

It’s really intended for use on my iPhone but I’ll add a desktop format at some point.

While I was in Central America over New Year I found myself trying to place the Maya, the Olmec and the Aztecs into the timeline of world history. I don’t think I’ve ever seen them in context before - everything I’ve read deals with a single empire, civilisation or region. So I decided to draw a graph to find out. The result is Rise & Fall: The Historical Trajectory of Power & Politics.

Setting about Wikipedia with random abandon, looking up dates and following links I have creating an editorial list of the things I think are noteworthy. I’ve played it fast and loose with dates and inclusions. Broadly speaking: early entries are cultures; late ones are empires. There’s a fine line between them, when there’s any line at all. Cultures tended to be subsumed so their “end” is debatable; empires were conquered but have a tendency to decline so their end is also in question. What I’m trying to say is that this chart is just my interpretation. If you want to know more, have a read. If you decide I’ve made a mistake, drop me an email.

Out of curiosity I also decided to try to give some indication of the cultural legacy of the world’s powers. As a rough yardstick I’m using the number of Google search results for the quoted search “name culture”. This is skewed towards those whose names have continued - Chinese and Egyptian, for example - and against those who have died out - like the Mauryan and Bagan - but it’s an interesting measure.

A couple of features I like:

The straight line marking the end of the Phoenician, Kushite, Greek and Persian empires as the Romans rise.

The big gap between the Romans and the Spanish - the Dark Ages - while Asia and the Middle East flourish.

The Maurya, apparently a golden age for the Indian subcontinent, fading from Western memory and the chart.

Enjoy!

Rise & Fall: The Historical Trajectory of Power & Politics.