Archive: December, 2012

I like sparklines a lot. Tufte describes a sparkline as:

…a small intense, simple, word-sized graphic with typographic resolution.

Four years ago, I added sparklines to Huffduffer using Google’s chart API. That API comes in two flavours: a JavaScript API for client-side creation of graphs, and image charts for server-side rendering of charts as PNGs.

The image API is really useful: there’s no reliance on JavaScript, it works in every browser capable of displaying images, and it’s really flexible and customisable. Therefore it is, of course, being deprecated.

The death warrant for Google image charts sets the execution date for 2015. Time to start looking for an alternative.

I couldn’t find a direct equivalent to the functionality that Google provides i.e. generating the images dynamically on the server. There are, however, plenty of client-side alternatives, many of them using canvas.

Most of the implementations I found were a little heavy-handed for my taste: they either required jQuery or Processing or both. I just wanted a quick little script for generating sparklines from a dataset of numbers. So I wrote my own.

I’ve put my code up on Github as Canvas Sparkline.

Here’s the JavaScript. You create a canvas element with the dimensions you want for the sparkline, then pass the ID of that element (along with your dataset) into the sparkline function:

sparkline ('canvasID', [12, 18, 13, 12, 11, 15, 17, 20, 15, 12, 8, 7, 9, 11], true);

(that final Boolean value at the end just indicates whether you want a red dot at the end of the sparkline).

The script takes care of normalising the values, so it doesn’t matter how many numbers are in the dataset or whether the range of the numbers is in the tens, hundreds, thousands, or hundreds of thousands.

There’s plenty of room for improvement:

• The colour of the sparkline is hardcoded (50% transparent black) but it could be passed in as a value.
• All the values should probably be passed in as an array of options rather than individual parameters.

Feel free to fork, adapt, and improve.

The sparklines are working quite nicely, but I can’t help but feel that this isn’t the right tool for the job. Ideally, I’d like to keep using a server-side solution like Google’s image charts. But if I am going to use a client-side solution, I’m not sure that canvas is the right element. This should really be SVG: canvas is great for dynamic images and animations that need to update quite quickly, but sparklines are generally pretty static. If anyone fancies making a lightweight SVG solution for sparklines, that would be lovely.

In the meantime, you can see Canvas Sparkline in action on the member profiles at The Session, like here, here, here, or here.

Update: Ask and thou shalt receive. Check out this fantastic lightweight SVG solution from Stuart—bloody brilliant!

In his tap essay Fish, Robin sloan said:

On the internet today, reading something twice is an act of love.

I’ve found a few services recently that encourage me to return to things I’ve already read.

Findings is looking quite lovely since its recent redesign. They may have screwed up with their email notification anti-pattern but they were quick to own up to the problem. I’ve been taking the time to read back through quotations I’ve posted, which in turn leads me to revisit the original pieces that the quotations were taken from.

Take, for example, this quote from Dave Winer:

We need to break out of the model where all these systems are monolithic and standalone. There’s art in each individual system, but there’s a much greater art in the union of all the systems we create.

…which leads me back to the beautifully-worded piece he wrote on Medium.

At the other end of the scale, reading this quote led me to revisit Rob’s review of Not Of This Earth on NotComing.com:

Not of This Earth is an early example of a premise conceivably determined by the proverbial writer’s room dartboard. In this case, the first two darts landed on “space” and “vampire.” There was no need to throw a third.

Although I think perhaps my favourite movie-related quotation comes from Gavin Rothery’s review of Saturn 3:

You could look at this film superficially and see it as a robot gone mental chasing Farrah Fawcett around a moonbase trying to get it on with her and killing everybody that gets in its way. Or, you could see through that into brilliance of this film and see that is in fact a story about a robot gone mental chasing Farrah Fawcett around a moonbase trying to get it on with her and killing everybody that gets in its way.

The other service that is encouraging me to revisit articles that I’ve previously read is Readlists. I’ve been using it to gather together pieces of writing that I’ve previously linked to about the Internet of Things, the infrastructure of the internet, digital preservation, or simply sci-fi short stories.

Frank mentioned Readlists when he wrote about The Anthologists:

Anthologies have the potential to finally make good on the purpose of all our automated archiving and collecting: that we would actually go back to the library, look at the stuff again, and, holy moses, do something with it. A collection that isn’t revisited might as well be a garbage heap.

I really like the fact that while Readlists is very much a tool that relies on the network, the collected content no longer requires a network connection: you can send a group of articles to your Kindle, or download them as one epub file.

I love tools like this—user style sheets, greasemonkey scripts, Readability, Instapaper, bookmarklets of all kinds—that allow the end user to exercise control over the content they want to revisit. Or, as Frank puts it:

…users gain new ways to select, sequence, recontextualize, and publish the content they consume.

I think the first technology that really brought this notion to the fore was RSS. The idea that the reader could choose not only to read your content at a later time, but also to read it in a different place—their RSS reader rather than your website—seemed quite radical. It was a bitter pill for the old guard to swallow, but once publishing RSS feeds became the norm, even the stodgiest of old media producers learned to let go of the illusion of control.

That’s why I was very surprised when Aral pushed back against RSS. I understand his reasoning for not providing a full RSS feed:

every RSS reader I tested it in displayed the articles differently — completely destroying my line widths, pull quotes, image captions, footers, and the layout of the high‐DPI images I was using.

…but that kind of illusory control just seems antithetical to the way the web works.

The heart of the issue, I think, is when Aral talks about:

the author’s moral rights over the form and presentation of their work.

I understand his point, but I also value the reader’s ideas about the form and presentation of the work they are going to be reading. The attempt to constrain and restrict the reader’s recontextualising reminds me of emails I used to read on Steve Champeon’s Webdesign-L mailing list back in the 90s that would begin:

How can I force the user to …?

or

How do I stop the user from …?

The questions usually involved attempts to stop users “getting at” images or viewing the markup source. Again, I understand where those views come from, but they just don’t fit comfortably with the sprit of the web.

And, of course, the truth was always that once something was out there on the web, users could always find a way to read it, alter it, store it, or revisit it. For Aral’s site, for example, although he refuses to provide a full RSS feed, all I have to is use Reeder with its built-in Readability functionality to get the full content.

This is an important point: attempting to exert too much control will be interpreted as damage and routed around. That’s exactly why RSS exists. That’s why Readability and Instapaper exist. That’s why Findings and Readlists exist. Heck, it’s why Huffduffer exists.

To paraphrase Princess Leia, the more you tighten your grip, the more content will slip through your fingers. Rather than trying to battle against the tide, go with the flow and embrace the reality of what Cameron Koczon calls Orbital Content and what Sara Wachter-Boettcher calls Future-Ready Content.

Both of those articles were published on A List Apart. But feel free to put them into a Readlist, or quote your favourite bits on Findings. And then, later, maybe you’ll return to them. Maybe you’ll read them twice. Maybe you’ll love them.

In November 2011 we at Clearleft hired out a farmhouse in the countryside and left client work behind for a week and just hacked on something for fun. The result was Map Tales, which I’m very proud of.

We knew straight away that we’d want to repeat the experience in 2012. A few weeks ago we all disappeared into the countryside once again. This time the location was in Dorset and it was less of a farm and more of a manor house. We still decided to call the outing a Hack Farm …although Hack Manor has a nice ring to it.

Before we went away, we got together for a meta-discussion on how to approach the week. We didn’t want to decide what we were going to build before we got there (that’s part of the fun) but there was some talk about doing things slightly differently this time. For example, what if we weren’t setting out to actually launch something? What if the final deliverables were less tangible and more conceptual than that?

My initial reaction was to bristle at the thought of not launching something at the end of the week. After all, I thought, that’s the whole point of a hack day/farm/athon. But I came around to the idea. I think it’s because we succeeded in building and launching Map Tales in one week last year that I was able to accept the idea of doing something a bit different this time ‘round.

We brought some friends of Clearleft along: Mike, Brian, Emil, Andy, Kyle, and Jessica. It was a pleasure spending a week in the country with them.

In total there were eighteen of us there. That’s quite a lot of cats to herd when you’re trying to reach consensus on what to spend a week working on, but after some fun design games and exercises, we agreed on what we wanted to do. Surprisingly the area we all gravitated towards was in the not-so-sexy field of politics.

We designed a service called Politmus. The basic idea was to take the best of the “quantified self” movement and apply it to politics in the UK. The elevator pitch was:

The only personal political opinion tracker that gathers your stance on issues, for disenfranchised voters in the UK who want to feel more connected in a time when we have increased participation in everything but government.

Here’s how we imagined it working. Let’s say your MP is going to be voting on a question in parliament very soon. We’ll ping you with that question and ask how you would vote. Then we can see how well your answer matches that of your MP. Over time, we can start comparing trends: you and your MP; you and your constituency; you and the rest of the country.

There was a lot of research to begin with (not helped by the crappy internet connection), looking at how the UK parliamentary system works. It’s complicated. They Work For You was, unsurprisingly, a huge help in figuring this stuff out.

I got very interested in the potential input mechanisms for voting. A website with a form is the obvious choice, but what about some more old-fashioned media? A postcard? An email? A phone call? SMS?

I did some hacking on the Tropo API to come up with a telephone interface. You can try it on 020 3051 6587. I put together a little video sketch to demonstrate some of these interactions.

Meanwhile a whole lot of work was being done on the voting interface, displaying the patterns of voting over time, and all that good stuff.

One of the areas that yielded the most benefit (and was a real eye-opener for me) was designing an API for the service before any interface decisions had been made. This “API First” approach meant that lots of tricky problems were solved early on, without getting distracted by the implementation issues of which kind of screens (if any) would be displaying the data. It also meant that visual design and development could be done in parallel.

(By the way, the food at Hack Farm was superb. Jessica cooked amazing meals for eighteen people each night!)

By the end of the week, we had some pretty solid deliverables: design principles, some prototypes, an API, branding. But it’s a shame we didn’t actually get a working website. It would have been very hard work, but I like to think that we could have got a minimal viable product out the door.

But we do have something to show. We’ve put together a nice little website that documents the process:

Hack Farm

You can skip straight ahead to the product or can follow along with the day-by-day account.

I hope that the site conveys something of the flavour of this year’s Hack Farm. It was a lot of fun, mostly because of the excellent people gathered together in one place.

Well, there’s been an overwhelming response to the Responsive Day Out. Tickets sold out in less than 24 hours! I guess that I’m not the only one who wants to spend a day listening to what these great designers and developers have to say about the challenges of responsive web design.

So I got in touch with the Corn Exchange to see if there was any way of fitting in some more seats. It turns out there is. So the capacity for the event has expanded a bit and some more tickets have gone on sale.

But if you want one, you’d better grab it fast.

Oh, and remember, if you work at a cool company that wants to have the undying gratitude of web designers and web developers, get in touch about sponsoring a pre- or post-event party.

Update: And that’s it. The extra tickets are now gone too.

When I was travelling back from Webstock in New Zealand at the start of this year, I had a brief stopover in Sydney. It coincided with one of John and Maxine’s What Do I Know? events so I did a little stint on five things I learned from the internet.

It was a fun evening and I had a chance to chat with many lovely Aussie web geeks. There was this one guy, Christian, that I was chatting with for quite a bit about all sorts of web-related stuff. But I could tell he wasn’t Australian. The Northern Ireland accent was a bit of a giveaway.

“You’re not from ‘round these parts, then?” I asked.

“Actually,” he said, “we’ve met before.”

I started racking my brains. Which geeky gathering could it have been?

“In Freiburg” he said.

Freiburg? But that was where I lived in the ’90s, before I was even making websites. I was drawing a complete blank. Then he said his name.

“Christian!” I cried, “Kerry and Christian!”

With a sudden shift of context, it all fit into place. We had met on the streets of Freiburg when I was a busker. Christian and his companion Kerry were travelling through Europe and they found themselves in Freiburg, also busking. Christian played guitar. Kerry played fiddle.

I listened to them playing some great Irish tunes and then got chatting with them. They didn’t have a place to stay so I offered to put them up. We had a good few days of hanging out and playing music together.

And now, all these years later, here was Christian …in Sydney, Australia …at a web event! Worlds were colliding. But it was a really great feeling to have that connection between my past and my present; between my life in Germany and my life now; between the world of Irish traditional music and the world of the web.

One of the other things that connects those two worlds is The Session. I’ve been running that website for about twelve or thirteen years now. It’s the thing I’m simultaneously most proud of and most ashamed of.

I’m proud of it because it has genuinely managed to contribute something back to the tradition: it’s handy resource for trad players around the world.

I’m ashamed of it because it has been languishing for so long. It has so much potential and I haven’t been devoting enough time or energy into meeting that potential.

At the end of 2009, I wrote:

I’m not going to make a new year’s resolution—that would just give me another deadline to stress out about—but I’m making a personal commitment to do whatever I can for The Session in 2010.

Well, it only took me another two years but I’ve finally done it.

I’ve spent a considerable portion of my spare time this year overhauling the site from the ground up, completely refactoring the code, putting together a new mobile-first design, adding much more location-based functionality and generally tilting at my own personal windmills. Trying to rewrite a site that’s been up and running for over a decade is considerably more challenging than creating a new site from scratch.

Luckily I had some help. Christian, for example, helped geocode all the sessions and events that had been added to the site over the years.

That’s one thing that the worlds of Irish music and the web have in common: people getting together to share and collaborate.

Any announcement that begins with “I’m really excited to announce…” usually doesn’t end well. It often means that some startup or product has been bought by Facebook, Twitter or Google. But with that in mind…

I’m really excited to announce… I’m putting on a new event.

It’s called Responsive Day Out and it will take place in the Corn Exchange in Brighton on Friday, March 1st, 2013.

It’s a kind of conference, I guess, but I think of it as more like a gathering of like-minded people getting together to share what they’ve learned, show some examples, swap techniques, and discuss problems. And all of it will be related to responsive web design.

A whole slew of really smart talented people will be speaking: Andy Clarke, Anna Debenham, Mark Boulton, Sarah Parmenter, Elliot Jay Stocks, Laura Kalbag, Bruce Lawson, and many more.

The format will be fun. There’ll be a block of three quickfire talks, just 15 to 20 minutes long, followed by a combined discussion hosted by yours truly, when I’ll be marshalling questions from the audience. We’ll have four of those blocks: two in the morning and two in the afternoon, with each block separated by a break.

I’m really looking forward to trying out this format. I think it’s going to be nice and zippy, with plenty of good solid practical lessons.

There are many different kinds of conferences. There are the big events like UX London with three days of talks and workshops. By the way, tickets for this year’s events went on sale this week—just check out that line-up of speakers! Grab yourself a ticket …or rather, convince your boss to grab you a ticket because, let’s face it, an intensive three-day event like UX London is the kind of thing that requires a training budget.

It’s a very different beast to dConstruct, which remains an affordable “big picture” event despite its stellar line-up of international speakers. I wish it could be cheaper, but there are certain unavoidable costs in any event: venue hire, speaker payment, travel and accommodation—it all adds up.

Then you’ve got the grassroots events like Barcamps and meetups, which ideally are free to attend, with costs covered by sponsorships.

I wish I could make Responsive Day Out a free event but putting it on in the Corn Exchange means there will be costs involving venue hire, lighting and projection. That said, I’ve done my best to keep the event as affordable as possible so…

Tickets are fifty quid plus VAT (a total of sixty quid).

I’ve had to cut a lot of corners to keep the price cheap:

• There will be no lanyards. You’ll just get a sticker or a stamp on your hand or something similarly lo-tech.
• There is no branding to speak of. The website is a simple one-page affair that Paul and I whipped up in a day or two. There will be no banners on stage or in the foyer. There isn’t even a logo.
• There are no speakers from overseas. This makes quite a big differences to the travel expenses—this is one of the reasons why dConstruct and Ampersand necessarily cost more.
• Perhaps most importantly, the speakers are very generously donating their time and considerable knowledge to this event.
• Unless some generous company wants to step up with sponsorship, there will be no after-party or pre-party. If you know of a generous company who would enjoy the undying gratitude of 300 web designers and developers by putting on either a pre- or after-party, please, please get in touch.

So please keep your expectations in check. This will not be a polished event like Build or dConstruct and it might feel a little provincial with its entirely UK-based speaker line-up but hey, fifty quid! Not bad, right?

With that in mind, if you have any interest at all in the design and development challenges involved in building responsive websites, you should grab a ticket and come along to the Responsive Day Out.

I’m really excited!

What is the difference between right and wrong?

What is the difference between a cupcake and a muffin?

What is the difference between a website and a web app?

What is the difference between a startup and any other business?

What is The Cloud?

What is brunch?