For a project at work this week I needed to modify a Javascript library so that under a particular condition it would generate a JS event that could be handled elsewhere in the application.  Why use JS events rather than just call a regular JS function? Well, I guess partly to maintain consistency with the way that other events are handled within the app, and partly because it’s a more elegant solution: When an event is thrown, if there’s nothing to catch and handle the event it doesn’t matter but when you call a JS function you need to be sure that the function exists otherwise you’ll end up with JS errors on the page so you have to first test that the function exists before you call it. Also an event can propagate up through the ancestory of objects on your page so it can be handled at whichever level is most appropriate or handled in different ways at different levels.

In JQuery the syntax for creating an event handler is exremely simple, for example, given the following HTML:

<div id='container'>
   Click me!
</div>

…the JQuery code to handle for the click event would be:

$('#container').click(function() {
   alert('You clicked me!');
});

In the above example, the “click” method is a shorthand utility method provided by JQuery, but is the same as:

$('#container').bind('click', function(e) {
   alert('You clicked me!');
});

There’s a whole bunch of standard HTML events that the browser may generate in response to user input (and that can be handled in similar fashion). You can also get JQuery to generate these events programatically.

It turns out that you can create a handler for your own custom event in exactly the same way, just change the name of the event (“click” in the example above), to the name of the event you want to create and be sure to use the longhand “bind” method. E.g.

$('#container').bind('myEvent', function(e) {
   alert('My event just fired');
});

Then, when you want to trigger this event, use the err… “trigger” function:

   $('#container').trigger('myEvent');

Because we’re using events rather than a straight method call (and JQuery 1.3 or later) we could write another handler for myEvent but on an ancestor of #container – the document body in this case. The handlers would be called in order, first on #container, then on the body. If we want to prevent the event from bubbling up through the DOM we can kill it with the stopPropagation() function:

$('#container').bind('myEvent', function(e) {
   e.stopPropagation();
   alert('My event just fired');
});

I was surprised by just how simple this was once I realised that the process for custom events is exactly the same as that for standard browser events.

TinyURL bookmarklet in action

If you just want to try this out, drag the link below to your bookmarks toolbar, then click the new bookmark. I’ve only tested in Firefox 3.04 so far so your mileage may vary if you use another browser. Let me know in the comments if you find this useful or have any problems.

Tiny

(v1.1 updated Dec 6th: The generated tiny url is now automatically selected ready to be copied)

Read on for a description of how it works…

What it does
Inspired by the WTFramework bookmarklet I decided to create a TinyURL bookmarklet that would generate a shortened url without opening a new browser window and without navigating the user away from the current page. It took me a little while to figure out how to define a callback function within a bookmarklet (thanks to Dion Almaer for a useful tutorial) but I got it working in a couple of hours and I quite like it. Thanks also to Oskar Krawczyk for the CSS which I “borrowed” from the aforementioned WTFramework.

How it works
When you click the bookmarklet, I first check whether the UI element is visible and if it is, remove it:

var el=document.getElementById('__tiny');
if (el){
document.body.removeChild(el);
}

This makes the bookmarklet act as a toggle: Click once to show the UI, click again to remove it. The WTFramework bookmarklet also removes the UI when the user clicks on the UI element itself  but I removed that functionality from this bookmarklet as the user is likely to want to click and select the tinyurl to copy it which would be difficut if the UI disappears on mouse click.

If the UI is not present, I generate a URL which is called via script injection to circumvent the browser’s same origin policy (i.e. I generate as script tag, set its src attribute and add the tag to the DOM):

var scriptTag = document.createElement('script');
scriptTag.type='text/javascript';
scriptTag.src='http://json-tinyurl.appspot.com/?callback=window.tinyCallback&url=' + document.location;
scriptTag.id='__tinyURL_script';
document.body.appendChild(scriptTag);

The response is a JSONP formatted string. TinyURL provides a very simple API (e.g. http://tinyurl.com/api-create.php?url=http://www.droza.net/blog) but doesn’t offer a JSONP interface – I was going to create one with Yahoo Pipes, but found that a suitable JSONP wrapper for TinyURL already exists, hosted in Google’s AppEngine (e.g. http://json-tinyurl.appspot.com/?callback=window.tinyCallback&url=http://www.droza.net/blog) so I use that instead (thanks Simon!).

After the script tag is added to the page, the browser will call the API and the response will invoke the tinyCallback function (I check to see whether the function already exists before declaring it to prevent declaring it twice if the bookmarklet is used multiple times on the same page). The callback constructs a semi-transparent UI element positioned in the top-right of the browser page and sets its content to be the generated tiny url. The bulk of the code is CSS:

window.tinyCallback = function(data) {
var c=document.createElement('span');
c.id='__tiny';
c.style.opacity='0.7';
c.style.filter='alpha(opacity=70)';
c.style.border='solid 2px %23fff';
c.style.textDecoration='none';
c.style.textAlign='left';
c.style.position='fixed';
c.style.zIndex='9000';
c.style.top='15px';
c.style.right='20px';
c.style.background='#000';
c.style.styleFloat='right';
c.style.padding='7px 10px';
c.style.color='%23fff';
c.style.font='12px Lucida Grande,Helvetica,Tahoma';
c.style.MozBorderRadius='5px';
c.style.WebkitBorderRadius='5px';
c.style.WebkitBoxShadow='0px 0px 20px %23000';
c.style.MozBoxShadow='0px 0px 20px %23000';
document.body.appendChild(c);
c.innerHTML=data.tinyurl;

It then removes the script tag that it added to the DOM, just to keep things tidy:

var x=document.getElementById('__tinyURL_script');
if (x){
document.body.removeChild(x);
}

After creating the script I used Dean Edward’s packer to minify the code to a single line sans-whitespace suitable for using in the href attribute of an a tag.

The full code
For reference, the listing below is the full non-minified sourcecode

var el=document.getElementById('__tiny');
if (el){
document.body.removeChild(el);
} else {
var scriptTag = document.createElement('script');
scriptTag.type='text/javascript';
scriptTag.src='http://json-tinyurl.appspot.com/?callback=window.tinyCallback&url=' + document.location;
scriptTag.id='__tinyURL_script';
document.body.appendChild(scriptTag);
}
if (!window['tinyCallback']) {
window.tinyCallback = function(data) {
var c=document.createElement('span');
c.id='__tiny';
c.style.opacity='0.7';
c.style.filter='alpha(opacity=70)';
c.style.border='solid 2px %23fff';
c.style.textDecoration='none';
c.style.textAlign='left';
c.style.position='fixed';
c.style.zIndex='9000';
c.style.top='15px';
c.style.right='20px';
c.style.background='#000';
c.style.styleFloat='right';
c.style.padding='7px 10px';
c.style.color='%23fff';
c.style.font='12px Lucida Grande,Helvetica,Tahoma';
c.style.MozBorderRadius='5px';
c.style.WebkitBorderRadius='5px';
c.style.WebkitBoxShadow='0px 0px 20px %23000';
c.style.MozBoxShadow='0px 0px 20px %23000';
document.body.appendChild(c);
c.innerHTML=data.tinyurl;
var x=document.getElementById('__tinyURL_script');
if (x){
document.body.removeChild(x);
}
}
}
void(0);

It’s taken me a while I’ll admit but I’ve just got around to releasing the sourcecode for the XBMChumby widget I wrote which displays the XBMC “Now Playing” queue on the Chumby. I decided early on that my very basic skills as a flash/ActionScript developer weren’t up to developing this to it’s full potential so now if anyone is interested in taking it further please checkout the code and get in touch if you have any problems building it etc etc etc.

The sourceforge project page is: https://sourceforge.net/projects/xbmchumby/

…or you can point your CVS client at xbmchumby.cvs.sourceforge.net

If you’re viewing this post in your feedreader, head over to the site to see the example graph!

I’ve been experimenting with Javascript libraries for building graphs dynamically in the client browser. In the past if I’ve wanted to create simple bar graphs I’ve used divs and css – an approach has the advantage of being super lightweight (read “fast”) and usually works cross-browser without too much hassle. The big disadvantage is that it’s inflexible (limited to bar graphs and difficult to update the data once the graph has been rendered) and is a pain to code if there’s more than a couple of rows of data to be plotted.

A few minutes on Google last week came up with a couple of examples of Javacript libraries that can produce much fancier graphs. I’ve settled on PlotKit because it produces beautiful graphs, works in the major browsers (using either Canvas or SVG) and has the most developer friendly licence, .

The example below gets a feed of the BT shareprice from Google (fed through a Yahoo Pipe to convert to JSON – the pipe can be reused as it takes the ticker symbol as a parameter). It then iterates over the feed data to populate the graph and finally calls render() on the graph object.

A handy library to keep in your developer toolbox!

Although not relevant for the data I’m graphing here, PlotKit can also draw really sweet pie charts.

So I’ve been messing around with various different widget frameworks on and off over the last few months as preparation for a workshop I’m going to be involved with. I started out with Yahoo Widgets (née Konfabulator) mainly because the examples that I’d seen looked the prettiest. Although perhaps not strictly widgets, I’ve also started to look at facebook applications, but that’s a subject for another day. My favoured widget framework at the moment is Google Gadgets for a number of reasons:

• The barrier to entry is low because it’s pretty much standard javascript and html with an xml descriptor.
• You write a gadget once and can view it in iGoogle, GoogleDesktop, Blogger or in an iframe embedded in any webpage.
• As with all Google APIs the documentation is great and there’s a lot of developer support.
• It plays nicely with other Google APIs.
• …finally, if you’re going to back one widget framework, who would bet against Google?

I find the best way to learn is just to get stuck in so I created a couple of simple examples, one to display a user’s timeline from twitter and another to display recent announcements made on another site I wrote, Tell’M. They both follow very similar principles: pull down an rss feed, parse it for interesting fields and render the display. Both also have a few user preferences that can be set to customise the feed.

My interest had moved on to other things recently but this week I started to look at gadgets again because the workshop is coming up soon. I found my two gadgets in the google directory and was disheartened to see that my twitter gadget had received two negative comments – one because of a security restriction of ajax (cross-domain policy) and twitter (which will only accept a POST to update status so I can’t use script injection). After a bit more digging around I found that Google now display average weekly page views for gadgets and my twitter gadget is receiving 14,546 page views per week! I guess it’s easy for a developer to do something just to satisfy their own curiosity and think that nobody else will ever use it. I’ve now added Google Analytics to both my gadgets just to check that all those page view are not generated by me!

Seems there are lots of ways of doing this, but this worked for me (on an Oracle DB). It returns the size of the database table in megabytes:

select bytes/1024/1024 from user_segments where segment_name='<table_name>'

Despite sounding like a mouthwash, Plaxo is a nifty tool that can be embedded in any site to allow a user to select contacts stored in their address book on Yahoo! Mail, GMail, Hotmail and others. Plaxo interfaces to all of these sites for you so that you don’t have to write code for several different APIs. Perfect for situations where you want to offer users the ability to send emails from within your application (e.g. “recommend to a friend”, “share this page” etc).

Plaxo do some clever javascript/iframe jiggery pokery to circumvent the browser’s cross-domain restriction. The only issues that I can with this approach is that your users have to submit their username/password via plaxo (although they do promise not to store these details and the calls back to plaxo are over https). I’ve knocked together a quick demo.

For something I was playing around with at work, I wanted to be able to retrieve an rss feed, parse it and post the title/description fields to another website site at timed intervals. These days I only really write in Java and JavaScript but Java seemed like such a longhand way to achieve this. I probably could have written a shell script, but it’s such a long time since I wrote shell scripts that I’d have been starting from scratch so I decided to take a look at Python… and so far I’m impressed. Very impressed.

From start to finish this probably only took a couple of hours and that includes referring back to the api docs for almost every line I wrote. The code below fetches a feed, and extracts the title field from the items. Each time it finds an item, it adds its guid to a text file so that it can ignore items that have been previously processed. I’m sure this can be tidied up lots, but for a first attempt I’m pretty happy (for simplicity I’ve removed the code that posts the items

import urllib
from threading import Timer
from xml.dom import minidom

def retrieveXml(url):
    #get the feed
    f = urllib.urlopen(url)
    xmldoc = minidom.parse(f)
    f.close()

    # read the history (assumes the file already exists)
    historyFile = open('./history.dat','r')
    history = historyFile.read()
    historyFile.close()
    found = False
    # iterate through each item in the feed
    items = xmldoc.getElementsByTagName('item')
    for item in items:
        title = item.getElementsByTagName('title')[0].firstChild.toxml()
        guid = item.getElementsByTagName('guid')[0].firstChild.toxml()
        # if the current item isn't in the history, then use that
        if history.find(guid) < 0:
            found = True
            break
    # if we found a new entry while iterating over the feed...
    if found:
        historyFile = open('./history.dat','a')
        historyFile.write(guid  + "n")
        historyFile.close()
        # for now just print the title to screen
        print title
    t = Timer(10.0, retrieveXml, [url])
    t.start()

retrieveXml('http://f1.gpupdate.net/en/xml/rss/1.xml')