eBooks, libraries and Firefox add-ons

A while ago I discovered that my local library offers a large collection of eBook downloads for free. This is great for my Sony Reader (ignoring for the moment that DRM on Linux is painful and also that I really want a Kindle) and it means I’m constantly downloading books from the library. I quite like using the Amazon site for finding books because it offers that “other people also bought…” feature but it then becomes a pain to check if the book exists on the library site (most do not).

In an attempt to have a play with Jetpack, the new Firefox add-on environment that allows add-ons to be written in JavaScript, I decided to write a simple add-on to check the library site for matching books when I’m browsing Amazon. While doing this, I stumbled upon Open Library, a great site that is trying to create a single Web page for every book ever published. More importantly, it offers a handy HTTP API.

The add-on is in no way perfect but feel free to try it out by downloading from here. Go to an Amazon page (e.g. here) and you should see a link appear to the Hampshire Digital Library version of the book if one exists:

Source available on github.

Node JS

Node JS has generated a lot of interest lately so I’ve had a bit of a play and so far I like what I see. Most of the publicity about Node seems to be to do with performance; this is because it doesn’t use the traditional model of spawning one thread per client connection. That in itself is great but not of direct interest to me. However, this model allows you to perform asynchronous actions without worrying about the event loop and threading. For example, the following HTTP server code snippet sends the response to the client from within a nested asynchronous callback function:

var http = require('http');
http.createServer(function (request, response) {
    doSomethingAsynchronous(function () {
        doSomethingElseAsynchronus(function () {
            response.writeHead(200, { "Content-Type": "text/plain" });
            response.end("Hello World\n");
console.log("Server running at http://localhost:8124/");

This event loop model, plus the ability to use the same programming language on the client and server (although server-side JavaScript has been around for a while) is definitely something that has caught my attention.

Using JSLint from gedit in Ubuntu 10.10

I tend to use gedit as my editor for most of my development work as it has a great number of plugins that enhance it’s ability as an IDE. Some of the plugins I find most useful include Code Comment, External Tools, Save without trailing space, Session Saver, Symbol Browser, TabSwitch and Word Completion.

One thing I thought would be really useful would be to validate my JavaScript using JSLint from within the editor, rather than manually or via a build process. It seems a few other people have had the same idea but the plugin I found didn’t seem to work and other instructions (e.g. here) generally seemed to require SpiderMonkey which didn’t seem to be in the Ubuntu repositories (not that I looked very hard).

I worked out how to do it myself by using the instructions other people had used and came up with the following:

  1. Install Rhino (sudo apt-get install rhino)
  2. Download the Rhino version of JSLint (details here)
  3. Enable the External Tools plugin for gedit (Edit->Preferences->Plugins)
  4. Setup a new External Tool in gedit (Tools->Manage External Tools) with the following (or similar) settings:

    • Command: js /home/garethj/.gnome2/gedit/plugins/jslint.js $GEDIT_CURRENT_DOCUMENT_PATH
    • Shortcut Key: <Control>j
    • Save: Current document
    • Input: Nothing
    • Ouput: Display in bottom pane

Then all you need to do is open a JavaScript file and hit Ctrl+j. Here it is in action:

Worth noting that it should be possible to do this without having to save the document and actually pipe the current document content into JSLint/Rhino but this was sufficient for my needs.

Map controls for a single image with OpenLayers

For a demo recently I needed to display a map, have pan/zoom controls, add markers and overlays etc etc. Google Maps (or similar) to the rescue right? Not in this case. Unfortunately the place wasn’t real, it was a location within the Battlefield 2 game being used for some simulation of research we were doing. Now I know it’s possible to use something like Google Maps to display my own map tiles etc but it looked complicated and I think I’d have to pretend I was working with real latitude/longitudes etc. Then I stumbled upon OpenLayers. I actually knew about OpenLayers before, as an open-source client-side library for mapping controls. What I didn’t realise was how flexible it was and that I could simply give it a single image and my own coordinate system and then let it do all the rest. This example from the handy list of OpenLayers examples demonstrates how it works in just a few lines of JavaScript. Perfect.

Programmatic page layouts using dojo and existing markup

The layout tutorials for dojo that I’ve seen all seem to fall into two categories:

  • Markup-based: adding dojoType properties to HTML elements in the markup
  • Programmatic: creating HTML elements in JavaScript

When using a toolkit such as dojo for layout rather than standard CSS, my preference would be to keep the dojo layout stuff entirely in JavaScript, separate from the markup, whilst still using HTML to describe my content. This allows an easy transition to/from dojo and CSS layout techniques, doesn’t clutter the markup with dojo specific stuff that would only be needed when JavaScript is enabled, and just provides a cleaner separation. I was sure this must be possible in dojo and it is; it just doesn’t seem to be well documented anywhere.
Continue reading

Presenting from a single canvas with HTML5

I’ve always been a fan of non-standard presentation techniques to help engage the audience. One that’s caught my eye recently is the idea of presenting from a single canvas, using a defined path but with the ability to digress. The two current offerings I know about for this technique are Prezi and JessyInk (see here and here for some comparisons between the two).

I figured that it would be nice to use some of the new features in HTML5/CSS3 to do this so you can just put together a standard HTML page (which is your 2D canvas – not to be confused with the new canvas element!) and have the traversing/zooming/rotating for free. This would also mean no need to require browser plug-ins (e.g. Flash for Prezi). SVG is a nice option but I’m guessing more people have standard HTML skills.

I’ve put together some code (called fivePrez for want of a better name), a rough attempt at doing some of this stuff. Unfortunately it currently only works on Firefox 4 which is still in beta. I haven’t even managed getting it working on Chrome because Webkit seems to do things differently (possibly positioning differences when you’ve scaled an element?). So if you have a version of Firefox 4 running, please try the demo. Otherwise, check out the video below. It’s not the best example but hopefully it gets the point across. Remember, the elements on the canvas are not moving/scaling/rotating into view, the canvas itself is moving so all the elements stay where they are in relation to each other.

Currently fivePrez works simply by including the fivePrez.js JavaScript file (and jQuery) and specifying (using JavaScript) a list of CSS selectors to define the path to traverse (e.g. fivePrez.setPath(['#element1', '#element2']);). Keyboard and mouse controls are option and work by including the appropriate keyboard/mouse script. The keyboard module allows you to traverse the path as follows (which should allow for using a remote clicker):

  • Right/Page Down: next
  • Left/Page Up: previous
  • Up: home (i.e. standard rendering for the page)

The mouse navigation allows you to double-click an element on the path to zoom straight to it.

I’ve also implemented a callback option to allow you to be notified when an item on the path is being moved to / away from as follows:

  function (viewId, viewSelector) {
    // View displayed
  function (viewId, viewSelector) {
    // View hidden

This is useful for e.g. starting/stopping video as I do in my example.

The code generally works by finding the element using the CSS selector provided in the path, determining the element’s current position, rotation etc and then performing a CSS transform on a parent container (generated by fivePrez) so all elements move with each other and the selected element is moved to the centre of the window and rotated appropriately.

Obviously this is very rough round the edges but interesting for a proof of concept. I might give it a go for my next speaking engagement if I’m confident it’ll do the trick. The main problems at present seem to be to do with editing rather than viewing; ideally it would at least have some user interface controls and the ability to drag around the canvas with the mouse.

Worth noting that Google have put together a nice example using HTML5 as a presentation technology to demonstrate the new standard (and Chrome of course).

Installing Firefox beta nightlies in Ubuntu

There’s a handy PPA for installing Mozilla Firefox nightly builds on Ubuntu but as well as the Firefox 4 builds, it also contains Firefox 3 nightly builds. Thanks to Dom I learned how to reduce the priority of the Mozilla daily PPA using pinning so packages from the standard repositories take priority over any from the Mozilla one, even with a higher version number. Instructions are as follows (tested on Ubuntu 10.04):

First add the PPA. Then edit /etc/apt/preferences.d/ubuntu-mozilla-daily-pin-400 and /var/lib/synaptic/preferences (the latter to ensure ‘Mark all upgrades’ in Synaptic does the same as Update Manager / apt-get) to contain the following:

Package: *
Pin: release o=LP-PPA-ubuntu-mozilla-daily
Pin-Priority: 400

Now the firefox-4.0 and firefox-4.0-gnome-support packages are theoretically ready to be installed. However, I had some installation issues which were solved by created a couple of files:

  • /usr/bin/firefox-4.0sudo (link to the executable using ‘ln -s /usr/lib/firefox-4.0b2pre/firefox-4.0 /usr/bin/firefox-4.0‘)
  • /usr/lib/firefox-4.0b2pre/firefox-4.0-restart-required.update-notifier (just create an empty file)

Now your Firefox 4 nightly build should be regularly updated and can be run by executing the firefox-4.0 command. Your existing stable Firefox 3 build should be unaffected.