Hawksworx

A little while ago, inspired by Simon Willison’s demo of Nodejs at the FullFrontal conference, I felt the urge to make something, anything, using Nodejs.

Nodejs gives lightening fast, event driven IO with Javascript running server-side in the rather nippy V8 Javascript engine. Until Nodejs, I hadn’t seen much need to bring Javascript to the server other than for testing and as a bit of a novelty.

Nodejs changed all of that. Built by Ryah Dahl with a strict philosophy that none of its procedures should ever perform a blocking operation, it has a single threaded architecture and relies heavily on the use of a single event loop. Anyone with a good knowledge of Javascript or even just a familiarity with jQuery will be familiar with the pattern of event handlers, callbacks and closures needed to build some really rather powerful things, quickly and easily with Nodejs.

For my part, I just wanted to make something to explore the ease in which Nodejs could support comet-style long polling for some real-time, collaborative task. The Web is already getting flooded with examples of chat rooms and IRC servers built with Nodejs, but I really wanted to make something that felt like a real web application, not an example.

To that end, I resurrected an old idea which I first built circa 1999 for randomly choosing someone from a list to make the tea. Not earth-shattering, but a bit of fun and simple enough for me to see through to completion. For this incarnation, dubbed Teafr.com, I piggybacked on the lists feature of Twitter to allow people to create and manage their lists of potential tea-makers somewhere they are already comfortable. My app would allow a user to recall a list of their choosing and then perform a lottery, selecting a winner (or loser) from the list at random. To add a little suspense (in the loosest possible sense) I added a basic animation which gradually got slower until the winner was revealed.

I captured a couple of videos showing teafr.com doing its stuff, one of them on an iPhone.

The fun part of this for me was in allowing this lottery and the animation to be visible to everyone viewing the same list from wherever they are. Nodejs makes it trivially simple to handle long-lived http requests so that all clients could listen out for the initiation of a new lottery event. Since this is all just lightweight HTTP, HTML, CSS and Javascript, it also runs pretty nicely on both my iPhone and Palm Pre. It is rather satisfying to stand next to someone who is viewing the site on a desktop machine, and then start their screen animating with a quick tap on your handset.

Cheap thrills, I know.

It seems to me though, that the cheapness of the thrills is what is so exciting. I’m no rocket scientist, and I managed to create this entire application, complete with real-time online views in a couple of evenings work. The short hop and low cognitive friction for a Javascript developer to be able to build these kind of things from end to end is incredibly liberating. I’m bursting at the seams with ideas for things I want to build, and am now capable of building with a new, powerful and yet familiar tool set.

The only detail which kept my new toy from the masses was having a suitable place to host it. I’ve been using Dreamhost for a while now and have to say that I’m pretty happy with them, but even with the great level of control and access to your server that they give you, you need a little bit more control to compile and run Nodejs. The easiest and cheapest way that I found to host Nodejs powered site was with a dedicated virtual server. There is no shortage of providers in this space and as Web developers get more sophisticated, the use of this kind of solution is getting more commonplace. I opted for Linode which is working out rather nicely for me, but equally, I could have plumped for a similar offering from Slicehost or Amazon Web Services. I’ll soon migrate all of my sites onto the single Linux instance that they host for me.

For now though, I need to resist the temptation to spend all of my spare time (ha!) noodling away with Nodejs, MongoDB, jQuery and various other fun things which ’speak Javascript’ that smart people on the Web keep on creating and selflessly sharing with the world for free.

Recently I saw Tim Stevens post on Twitter about a slide show he had built using his Liveloom application. His slide show grabs some photos from Flickr tagged with ‘Osmosoft’ and then renders them with all manner of visual effects using Flex.

While the visual effects available via Tim’s app are impressive, I’m a big advocate of open web standards and enjoy making things from HTML and Javascript, rather than using tools like Flex. My first encounter with the slide show made by Liveloom was on an iPhone where it couldn’t run. The temptation to cobble together a simple Flickr mashup which could operate in any Javascript capable browser was too much to resist.

Let’s not pretend, that there aren’t already slide show mashups galore, or that I was going to be able to rival some of the advanced visual effects that Liveloom can offer, but making a simple, attractive slide show which could run on lots of devices seemed like a fun and valuable exercise. I was also keen to see just how quickly and easily I could produce this using jQuery. I’m forever going on about how good jQuery is at manipulating the DOM, so this seemed like a good chance to demonstrate that.

I shared the result my efforts as the ‘Poloaroiderizer’ and after getting some great feedback, promoted it to its very own domain. Check it out over at polaroiderizer.com

As it turns out, the task was incredibly simple and took just a few hours one evening. The interface is rendered with HTML and CSS. As such, it will work in any modern browser. I used jQuery to request JSONP from the Flickr API. JSPONP gets you around the cross domain scripting restrictions and delivers JSON to the browser which is a snap to parse and render. There is no logic on the server. All of my code is run in the browser.

The animations are provided by CSS and DOM manipulation, made simple by jQuery’s animation functions. The display needs Javascript to render, so without it Polaroiderizer is a bit toothless, but that doesn’t mean we can forget about those without Javascript. If you submit a flickr tag while you don’t have Javascript capabilities, the form will submit your tag to the standard flickr interface and you’ll find yourself at the flickr search results page. This is another example of progressive enhancement. A topic close to my heart that I tried to demonstrate recently on Unobtrusify.

Another little bonus of building this slide show app this way, is that it is super-easy to share the results. I made sure that the tag entered was echoed into the address of the page as the page fragment identifier. Manipulating and interrogating the frag id can be useful in Ajax applications as my colleague Michael Mahemoff explained recently. When the page loads, it looks for a tag stored in the frag id as its starting point. That means you can bookmark slide shows and share them as easily as email a URI. Here are a few:

http://polaroiderizer.com/#PhilHawksworth http://polaroiderizer.com/#TheWebIsAgreement http://polaroiderizer.com/#TED2009

Just in time for the 2008 NBA playoffs, and heavily influenced by Robbie Clutton’s marvelous UK football scores service, I have created NBA Results

This simple service monitors results published as RSS feeds from TotallyScores and then sends updates to twitter. By following NBA Results on Twitter, you can get alerts of all NBA match results. Only interested in updates for your team? That’s fine, you can choose instead to follow your team. There are currently accounts for:

twitter.com/celtics_results

twitter.com/cavs_results

twitter.com/hornets_results

twitter.com/jazz_results

twitter.com/lakers_results

twitter.com/magic_results

twitter.com/pistons_results

twitter.com/spurs_results

I’ll be adding more teams ready for next season, but if you want to make sure that you can get updates on Twitter of your team’s results, feel free to email me (phawksworth [at] gmail [dot] com) and push your team to the top of my todo list.

I’m also readying MLB Results to provide Major League Baseball results. MLB Results will be active very soon. As with the NBA teams, please poke me if you want to get updates for your team and I’ll be sure to create their account.

The code which drives this, is my first outing into the world of Python. You can find the code here. Feel free to take it and use it as you wish. I also welcome feedback and suggestions on the code, please be gentle though, as I said, this is my first time playing with Python.

Many thanks to the nice folks at Carsonified for permission to use their site’s background image on NBA Results. Thanks also to Balakov who published the image used for each NBA team twitter account icon under a Creative Commons license on flickr.

Over the last couple of days I have got to meet some members of the BT SDK team. I’m likely to be working quite closely with some of these guys over the coming months in my role at Osmosoft and so it was great to get to meet them and see how they work.

There is a great feeling of energy and enthusiasm in the team, which I found infectious. I personally am rather excited about getting the chance to play with some of the cool features of the BT SDK to build some funky web apps. As a newcomer to the telecoms sector, I find that the functionality being exposed through the SDK are inspiring me to build all kinds of gizmos, widgets, gadget, and do-hickies. I’ll be shouting about some of those here soon, no doubt.

..but I find myself wondering, what would you build?

Read the rest of this entry »

Last night the newly assembled Osmosoft crew attended WikiWednesday - a regular meeting of technologists and business folk who share an interest in matters of all things wiki. These monthly sessions are an opportunity for people to discuss the use of wikis and any issues that surround them, from techie issues to business cases and adoption patterns.

We were lucky enough to be given the opening slot to demonstrate our latest toy - an implementation of TiddlyWiki which leveraged BT’s SDK to initiate phone calls. UnaMesa’s Martin Budden and our own Paul Downey demonstrated what we dubbed ‘Speed Geeking’, a little mashup which interpreted a set of contact details gathered from the WikiWednesday attendees as hCards and then randomly paired up the contacts so that a phone call could be created between each pair. It isn’t typical to hear a speaker at such an event remind the audience to “please keep your phones turned on!”, but that was how this session began. It ended with a room full of people coupled via phone calls, waving at each other across the room as they identified which stranger they had been connected to. Ring-tone chaos!

Read the rest of this entry »