Basil and I spent last week working at IDEO building a new site, Social Canvas, in preparation for Tom Hulme’s presentation at Wired Conf.

Social Canvas is currently a prototype for showcasing presentations and encouraging conversations around them.

It was a quick project, we only had a few days to build the site and we approached it in the spirit of Tom’s presentation - prototype quickly and Launch to Learn.

When prototyping sites, I like to be able to grab existing libraries and plumb them together to achieve quick results. Open source libraries are the building blocks that allow me to get up and running quickly, my job as a developer is to make sure everything plays nicely together.

For a developer, half of the battle is knowing what’s out there and what is worth using. The libraries listed below are used on Social Canvas and are definitely worth looking into.

D3.js

I used this for the activity chart at the top of the page. D3 makes it very easy to create great looking SVG data visualisations, graphs and maps.

I’ve been using D3 on a few projects lately and it’s awesome. It’s going to be one of those libraries that I end up using everywhere.

jQuery Waypoints

This is a great jQuery plugin that triggers events when you scroll to elements.

A common use case of jQuery Waypoints is to make sticky elements, these are elements that when scrolled to stick to the top of the browser window. See how the slide preview navigation is sticky on Social Canvas.

When designing Social Canvas, it was very important to IDEO that people could link to individual slides. Originally, the site had a page per slide and each slide had it’s own URL. We made navigating between the individual slides super quick with the use of Pjax but the point was raised that this wasn’t a good format to be able to scan whole presentation.

We then changed the format so that all the slides are displayed on a single page. To retain the ability to link to individual slides I attached a waypoint to each slide that uses window.history.replaceState() to update the browser URL with a permalink to the slide. If you scroll down the page, you’ll see the URL repeatedly update.

The reason I stuck with slide URLs of the form

/launch-to-learn/slide/3

rather than anchor URLs

/launch-to-learn#slide-3

was so that if we decide to switch back to the one slide per page format, any existing links to slides won’t break.

Visiting one of these slide URLs will currently do a server side redirect to the relevant anchor link, ensuring that you are taken to the correct point on the page. E.g.

http://socialcanvas.ideo.com/presentations/launch-to-learn/slide/2

Keymaster.js

Keymaster is a super simple way to add keyboard navigation to a site.

Browsing a presentation with the keyboard feels completely natural and so I added keyboard navigation for the cursor keys and spacebar (and j & k for the geeks).

Pusher

Whilst it’s not difficult to host your own websocket server using something like socket.io, when you are up against the clock it’s nice to be able to use someone else’s service. It’s like hosting on Heroku, when you need to get something hosted quickly, you just push it to Heroku.

This is what Pusher are doing with websockets, they make it so easy that it’s often not worth your time setting your own up. Their service is great, it just works and it’s one less thing to think about.

We wanted a few live updates on Social Canvas and implementing these with Pusher was trivial.

Redis

I use Redis in practically every project that I do now. I’ve never had a problem with it, it always ‘just works’.

On Social Canvas I used it to very quickly hack together the liking & voting functionality. It’s also used for various caching purposes around the site.