Nabaztag REST API

I’m having quite a bit of fun with my rabbit, cambridge, at the moment. Their were a number of projects at Hackday involving the ever so cute Nabaztag and I had a feeling I’d probably go home and adopt one. The idea of a rabbit with APIs was simple too much fun.

Nabaztag

The Nabaztag API docs can be found in two places (the rest of the site unfortunately has a number of issues when it comes to finding information easily); in the help section and on the API site. The latter are much better than the former by the way.

Lots of people have already been hacking on the wireless rabbit. Their are some good tools over on the Nabaztag Sourceforge project, a handy Ruby module and a prospective PEAR module for PHP.

I’ve been getting more and more into the ideas behind REST recently and one thing that disappointed me a litte was the HTTP RPC style Nabaztag API (note to anyone thinking REST simply means using a GET request rather than something like SOAP or XML-RPC, it doesn’t). I couldn’t help seeing PUTs to ears and POSTs to the mouth.

Inspired a little by Arals Bunny Talk I’ve started implementing parts of the API in a RESTful manner, and used my API abstraction layer to build a similar application.

Head over to morethanseven.net/presents/nabaztag/ and send me a message (via my rabbit obviously) or, er, play with cambridges ears (he likes that). At the moment the API is configured only for my rabbit, although you can download the source code and run it yourself if you like. It requires PHP5 at the moment as one of the required modules is PHP5 only. But you are using PHP5 now aren’t you?

If you don’t want to use the form you can access the API directly. Here are a couple of examples using curl:

<code>curl http://morethanseven.net/presents/nabaztag/ears/left</code>

<code>curl -X 'PUT' http://morethanseven.net/presents/nabaztag/ears/left/13</code>

<code>curl -X 'POST' -d "message" http://morethanseven.net/presents/nabaztag/mouth</code>

Their’s a litte documentation in the source. I’ll add more methods, more documentation and maybe make an API anyone with a Nabaztag can use by authenticating either as I need it or if people actually want it. Let me know what you think (via the rabbit obviously!)

Ruby on Rails on Nokia N800

My latest job has allowed me to get back into playing with Rails, something I’ve been meaning to do for a year or so. Having got everything up to date and installed on my virtual server and on my laptop I couldn’t resist seeing if I could get it going on my N800.

The reasons for this are mainly that the idea of a wireless web server in my pocket is pretty intriguing. Think about it. If you’re at an event with Wi-Fi you can just point people to an IP address and hey presto they have access to your details, or a set of photos, or whatever you want to show them. I’ve also got nginx installed, but I’m not as yet that up on running python or PHP behind it on the N800. So, no need to carry around the laptop. OK, maybe it’s just me and all this going to web conferences? We’ll have to see if I actually knock up anything useful for the next conference and see. Saving that I’ve been travelling quite a bit recently and it’s handy when reading a Rails book to be able to try out the examples.

Anyway, it turns out that you can indeed install Ruby and Rails on the N800, although their isn’t much information around and non of it worked exactly as stated for me - hence this post.

I followed along with a pretty good tutorial, although I already had Red Pill Mode, XTerm and SSH installed. Ruby is also now available in the Garage.

The crux of the post is that you can find the required packages, in particular for Gem, here. But unfortunately that is were the problems start. I ran into exactly the same problem as described in the comments in the above post, on this blog post and on this Internet Tablet Talk forum thread. Specifically, Gem hanging, crashing or returning a segmentation fault in the yaml.rb file on line 133.

The problem appears to be (this is me guessing here) with gem and the N800 being able download all the info for Gem to update it’s package list. The solution, or rather a suitable workaround, is to download the individual gems yourself to the local file system or a memory card and then install them from there. You can get all the Rails gems here. A quick script/server later and I had the familiar Rails welcome screen on port 3000. This should in theory work for oher gems as well. You can either download them directly or use Gem on a local machine and them move the files across via bluetooth or USB.

A round-up

Being busy is to be expected with this new start-up malarkey but whoa. The problem is I have even more ideas for real posts or articles (the type you research, play around with, then write properly) and, for the next few weeks, not the time to do them justice. I’ll be back with gusto when I find the time. In the interim here are a few things from the last month or so I consider cool.

  • I has Nabaztag! Sorry, but I couldn’t resist after Hackday. Expect API hacking and silly photos on flickr aplenty.
  • Oh, Hackday was an absolute blast. Thanks to Matt, Ian, Tom and the cast of hundreds.
  • I’m working on a cool Ruby on Rails app in the real world, up here in Newcastle no less.
  • media":http://vivabit.com/atmedia2007 was, yet again, fab. A (very) late shout to Patrick and the umper lumpers. Can I make it tomedia Ajax?
  • Refresh Newcastle got a minor update with more flickr and upcoming goodness. Tag things refreshnewcastle for some lovin.
  • hedgehoglab.com has a few more pages, a survey on web training needs and more microformats than you can shake a stick at.
  • I’ll be at dconstruct (just). Another jigsaw piece of my increasingly bloody minded attempt to get to as many UK web get-togethers as possible.
  • I’ll be along to ncl.rb tomorrow night (thursday) and in the pub afterwards if anyone is around. Their have been a few good events in Newcastle recently, only some of which I’ve managed to get along to. I’m considering getting an Open Coffee do up and running in Newcastle as well. If anyone is interested let me know.

More (interesting) work beckons…

Target(ing) on CSS3

Apologies up front for the bad pun but I’ve been busy playing with another little feature found in CSS3, namely the :target pseudo-class.

It’s actually pretty well described in the CSS3 Selectors module, (although given that the specs make lots of use of partial URLs the spec style sheet is crying out for use of said selector to I digress).

Put simply it allows you to style elements of a page that are the target of in page anchors, ie. <a href=”#target”>in page link</a>

For example. The following CSS hides all div children of an element with an id of example3.

<code>#example3 >div {
    display: none;
}</code>

The we can say “if said element has been targetted then display them all”

<code>#example3:target >div {
    display: block;
}</code>

So if you visiting #example3 you would see the divs, otherwise they will be hidden away.

I’ve set up a couple of examples over on morethanseven.net/presents/target.

These examples basically remove the need for Javascript implementations but I’m not sure whether I’d actually use either of these. But you get the general idea. One thing about the examples was their simplicity compared with similar approaches though.

It’s already pretty well implemented according to this handy compatability table from CSS3.info and I would imagine an ideal candidate for Andy Budd’s CSS2.2.

Encoded Characters in CSS3 Generated Content

A quick, but hopefully informative post on something that took me a little time to work out and I thought might trip a few others up too.

I’m playing with quite a bit of CSS3 at the moment for our new company site. It seemed like a good excuse to put into practice lots of progressive enhancement and the like and so far is going nicely if I do say so my self.

The CSS3 Generated Content Module has some nice little bits in and I decided to use it to put some icons after external link ala wikipedia (but with nicer icons). Actually what I wanted was simply an arrow and I didn’t really need an image for that did I?

Well my first try went a little something like this:

<code>p a[href^="http:"]:after {
    content: "#8594;";
}</code>

Nope, no luck. By the time it hits the browser it’s not what I was looking for. I didn’t think old style named entities would work but what the heck?

<code>p a[href^="http:"]:after {
    content: "&rarr;";
}</code>

Nope. As I thought. No luck their either. I also tried the character itself (but forgot to put that in the first post - thanks Joe) but again to no avail.

<code>p a[href^="http:"]:after {
    content: "→";
}</code>

Some digging around and I managed to infer the correct syntax from some hidden away examples about something else.

<code>p a[href^="http:"]:after {
    content: "\2192";
}</code>

You need to use the Unicode encoding. Doh. Job done.

Introducing hedgehog lab

For both of you who care what I get up to during my work hours this post is for you. I’ve finally gotten involved in a new startup with a couple of friends. Look out for hedgehog lab related goings on in a Newcastle near you. We’ve got plans being drawn up as I type (multi-tasking) but a smattering of training and consultancy on web standards design and development and a very health dose of some of those new fangled online products (all with as many microformats as I can sneak in) sounds like fun to me.

hedgehog lab:http://hedgehoglab.com/

Bye bye to all the people at TH_NK. It’s been great for two years and I’ll miss the cunning hit and run attacks on asp.net that have yielded some pretty good results. I’m sure you’ll get more done without me being quite so obstinate!

It’s not just the impending job move that has been keeping me so busy. I finally, after much useful feedback and patience from Matt got my first Digital Web article done: APIs and Mashups For The Rest Of Us. As the title suggests it’s a quick run through the various goings on, in particular on what I find so interesting about the concepts of Open APIs and this web of data thing. I even squeezed in some talk of Microformats Let me know what you think. Thanks to Sam as well for a useful early proof read and to Tiff at Digital Web (who also has some interesting things to say on this here industry on her new blog, Lost Cog)

End of self reverential post. The list of real things I have to blog about is frankly too long to wait around. And it’s not helped by these trips to london which frankly just give me even more to write about. Incase anyone is interested (and more to remind me), expect something on automated site testing, some musings and code (!) for doing useful things with microformats, some cool CSS3 (or is it CSS2.2 now?) tricks and something involving flickr which should actually be quite interesting if I get the time.

JSON configuration example - Printing

As a quick follow up to my previous post on unobtrusive javascript I thought I’d expand it even more, but this time in an attempt to make it easier to use.

As we’ve already mentioned javascript should be treated like any other programming language - not necessarily left to the experts but their should ideally be an expert involved somewhere along the line. One way of doing this is to abstract out configuration from programmatic logic. This massively helps with code resuse as well, leaving everyone to play to their strengths. It’s interesting to note that even programmers who would always store configuration settings seperately when writing PHP or Rails applications don’t always get around to doing the same in Javascript. Hell, I used to be one of them until Chris Heilmann pointed out how patently obvious the solution was while at The Highland Fling.

The answer is JSON. I think it’s nearly always easier with a quick example so here’s the Print snippet from the previous post but this time with a few configurable options:

<code>var Print = {
   config: {
      "id": "iNav",
      "classname": "has-print",
      "text": "Print"
   },
   init: new domFunction(function() {
      if (list = document.getElementById(Print.config.id)) {
         if (list.nodeName.toLowerCase() === 'ul') {
            if (Print.hasClass(list,Print.config.classname)) {
               var item = document.createElement("li");
               item.className = "print";
               var link = document.createElement("a");
               link.href = "#";
               link.onclick = Print.printpage;
               var txt = document.createTextNode(Print.config.text);
               link.appendChild(txt);
               item.appendChild(link);
               list.appendChild(item);
            }
         }
      }
   }),
   hasClass: function(element,cName) { 
      return new RegExp('\\b''&#43;cName'&#43;'\\b').test(element.className);
   },
   printpage: function() {
      window.print();
      return false;
   }
}</code>

The main thing we have done is to add a new block:

<code>config: {
   "id": "iNav",
   "classname": "has-print",
   "text": "brand new text"
},</code>

This is simply a JSON object of name/value pairs. You can easily alter the right hand values and change the workings of the app. You then reference the settings in the rest of you’re code using dot notation:

<code>Print.config.text</code>

In the above example our configuration directives are stored in our Print object. Depending on the circumstances of use you might find it easier to have a seperate Config object which stores all the configuration settings for the entire site.

Unobtrusive Javascript Example - Printing

In lieu of some real posts here’s a quick code sample to keep things ticking along.

I’m sure you’ve had the need to place a nice print button on a web page from time to time. If you haven’t you’re probably alone. A quick google will throw up lots of results for print javascript - the problem is that most of them are horribly obtrusive.

OK, so it’s easy to write something like:

<code><a href="#" onclick="window.print();">print</a></code>

But the problem is What if you turn off javascript? The following unobtrusive script automagically adds a print link to the page - in this case as part of a list item which is added to the unordered list with the id of iNav and a class of has-print.

<code>var Print = {
   init: new domFunction(function() {
      if (list = document.getElementById("iNav")) {
         if (list.nodeName.toLowerCase() === 'ul') {
            if (Print.hasClass(list,'has-print')) {
               var item = document.createElement("li");
               item.className = "print";
               var link = document.createElement("a");
               link.href = "#";
               link.onclick = Print.printpage;
               var txt = document.createTextNode("Print");
               link.appendChild(txt);
               item.appendChild(link);
               list.appendChild(item);
            }
         }
      }
   }),

   hasClass: function(element,cName) { 
      return new RegExp('\\b'&#43;cName&#43;'\\b').test(element.className);
   },

   printpage: function() {
      window.print();
      return false;
   }
}</code>

With something like this you want it to load as soon as the dom is ready, rather than on page load. Brothercake’s domFunction comes to the rescue here. The namespacing is based on Stuarts technique which should make it more capable of just being dropped in to any site.

The only problem with this is that it’s just a little longer than the original. I think this is down to one often missed fact, at least until recently - Javascript is a programming language and should be treated as such.

Some good news

Yeah, I just got my confirmation email for hackday in a months time.

Hack Day: London, June 16/17 2007

So, who else is going along and does anyone have any ideas they want team mates for? I’m thinking something mobile or microformats related or alternatively something I know very little about. Any ideas?

Oh, and I know I’ve been quite around the place lately, more on that when I can talk about it.

CSSx.x

Andy gave a great thought provoking presentation (exactly what conference presentations should be) at the recent Highland Fling shindig on the future of CSS which he’s written up into a good thought provoking blog post on CSS2.2

The Problem

As web standards developers we want new toys! I took to CSS because it made sense set against the madness of table based layouts, not necessarily because it appeared easy or flexible. CSS has turned out to be hugely flexible, but some of that flexibility has come at the expense of some weird and wonderful and successful techniques. I love this ingenuity, I’d like to think that the original CSS specification allowed for this cleverness in real world use.

CSS3 has stalled. CSS3 is trying to solve a whole host of massive problems that others are better placed to comment on, but I’d love to hear some comment from members of the working group. If I’ve missed a regular blog by a working group member please leave a comment and let me know.

I’m a real believer in open standards and I think that it’s this issue that worries me more about the pace of CSS development. Yes, I want new toys, or more specifically I want to be more efficient (yes rounded corners, I’m looking at you) but actually, I’d rather have a good CSS3 spec than a fast and loose one. But the immenent fight between Flash/Adobe and Silverlight/Microsoft is showing how productive huge commercial companies can be when it wants to get something done. Both are introducing interesting new tools and allowing for what could be improvements to usability (or horribly confusing interfaces but hey). CSS and HTML should be the glue that binds all this together in a web where everything plays nicely together. But if CSS provides too little or too late then this is put in doubt. And if CSS falls I dont see microformats, rdf, html5 or whatever making a real dent - and I really want a semantic web (upper and lower case).

The Solution?

Well, I’d like to say the solution isn’t Browser Wars II - A good idea this time?

Andy’s suggestion of an interim step (or steps) between now and CSS3 modules raises a problem. If the working group do the work then it takes their eye further off getting CSS3 modules out. If they don’t, will they accept suggestions from outside? Will outsiders be able to grok the whole standardisation process?

What we need is a commercial company with lots of smart people and lots of cash - with a track record of working with standards. A member of the W3C would be a plus. Ideally they should have something invested in the web as a platform, maybe even in a smarter, cleverer, semantic web.

Google to the rescue maybe? If you’re really cynical you could see Silverlight as an end run around Google’s apparent dominance of the web as a platform. Lock content away in proprietary silos and traditional search becomes less appealing? And surely Google has lots to gain from the long term adoption of anything that increases the semantic nature of the web. If CSS is a battleground then maybe they need to come out and make a stand(ard)?