I’m a big fan of Clicky Web Analytics – Why? Well mostly because of their excellent Spy feature which I’ve previously discussed here and here. A few weeks back I emailed the developers asking them:

“Something has just occured to me as I stare at the tab with Spy opened – could you add the current active user numbers into the title dynamically everytime that number changes?”

I was thinking something along the lines of Twitter search, or Campfire (and Chatterbloc) which display an unread message count in the title field which is also seen in your browser tab menu:

Why is this helpful to me? Well like most people I use multiple tabs and it really bugs me to have to flip from one to the other all the time to refresh or view updates that have appeared via ajax. Anyway, long story short – Clicky implemented the change within about an hour of my email (which was also awesome btw).

Fluid

So that’s great, my tabs now show me my current active live user count on reynoldsftw.com. But then I started to think… I’m using multiple applications, not just multiple tabs – so when my focus is elsewhere – I can’t quickly see the latest user count without going back to my browser and checking out the tab!

Enter Fluid.app. Fluid is a browser-type application which goes one step further – allowing you to build site specific Mac OSX applications based on websites. What do I mean by this? Well basically – I can create a brand new desktop application out of any website. It will have a lovely icon, and launch in exactly the same way as any other desktop application.

Fluid isn’t just that though. It also gives you added scripting ability in the name of Greasemonkey. What this allows me to do as a user is write a small script (javascript) to interact with the page, and do something with the results. In this case, I am going to create a script which reads the <TITLE> HTML element, looking for the user count in brackets “(10)”, and display a nice badge over the dock icon:

Once complete, I now only have to peer down to my dock for the latest user count – and if I want to dive into the Spy page, I just click the icon, and my web application is open. Awesome work – so how did I do it?

Clicky Desktop Application

So the first step is to make a nice desktop application out of my Clicky Spy page. Download Fluid.app from their website and install (OS X 10.5 upwards). Run Fluid – you will be prompted with a couple of questions around what web page you want to make an application. Enter the URL of the chosen site (this could be Clicky Spy, Twitter Search, GMail – whatever), a name for your app, where you want to save it (Applications folder probably) and what icon you want to use.

Icon wise you have two options, use the favicon (which I used – but doesn’t scale well), or use a nice PNG file. Up to you.

Click “Create” and you’re done. Launch your newly created application. It doesn’t look much different to a browser huh?

GreaseMonkey

So next we need to create the script to infiltrate the <TITLE> HTML element, and extract the count from between the brackets. This is pretty easy – goto the script icon and choose “New Userscript…”:

This will prompt you for a name for the script, and also open up a empty script for you to manipulate in your favourite code editor.

Finally, its time to enter some code. Here is the script I am using to extract the user count (ie “3″) from “(3) Blah Blah”:

// ==UserScript==
// @name        LiveStats
// @namespace   http://fluidapp.com
// @description What does this do?
// @include     *
// @author      SteveReynolds
// ==/UserScript==

(function() {
if (!window.fluid) {
return;
}
function updateDockBadge() {
var badgeString = "";
var title = document.title;

if (title && title.length) {
var start = title.indexOf("(");
var end = title.indexOf(")");
if (start > -1 && end > -1) {
start++;
badgeString = title.substring(start, end);
if (badgeString == "0") {
badgeString = "";
}
}
}

window.fluid.setDockBadge(badgeString);
}
setInterval(function(){updateDockBadge();}, 3000);
})();

Job Done! Just enable the script by clicking its name in the script menu, and reload all scripts. Sometimes this doesn’t work so you might need to restart the app.

This entry was posted on Friday, September 4th, 2009 and is filed under Development, Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.