techno.blog("Dion")

Sometimes you can get in the zone just enough to be productive on a plane. On my flight to Mexico City yesterday, I created Endpoint a project that contains a server proxy, JavaScript client, and Greasemonkey Script with a mission. The mission is to take a URL, work out if it is a redirect (via a Location: header), and then return the final endpoint for it.

Why did I do this?

I was brainstorming functionality for a Twitter client with James Strachan (he is working on gtwit) and we talked about how annoying tinyurl / is.gd / snurl / you name it URLs are. They don’t tell you where you are going, and you could get Rick Rolled (if you are lucky) or much much worse.

So, I wanted to create a library, and one client (Greasemonkey) to test it out. Then anyone else could use it too to resolve directly from their Web pages.

How does it work

You load up the JavaScript via script src and then you can call resolve, passing the URL and a callback that will get the result. A few examples:

// Simple version
Endpoint.resolve('http://snurl.com/2luj3', function(url) { 
  alert(url); 
});
 
// Using the original URL to work out if it has changed
Endpoint.resolve(
  document.getElementById('testurl').value, 
  function(url, orig) { 
    alert(url); 
    alert(Endpoint.isRedirecting(url, orig));
  }
);
 
// How it is used in the Twitter Endpoint Resolver
Endpoint.resolve(url, function(resulturl, originalurl) {
  if (!Endpoint.isRedirecting(resulturl, originalurl)) return;
 
  newtext = newtext.replace(originalurl, resulturl, "g");
  jQuery(el).html(newtext);
});

Under the hood, a bunch of stuff is happening. I would love to be able to just use XMLHttpRequest to dynamically hit the URL and look at the headers, but the same-origin policy stops me.

This is why I have the server proxy, which returns a JSONP callback.

When you call resolve(url, callback) the script tag is created on the fly and added to the DOM. The callback function is all handled to allow multiple calls, and then the chain unravels.

Here you can see it all in action, showing how my Twitter stream will go through and the URLs will dynamically change from their tinyurl versions to whereyouaregoing.com:

I wanted to use App Engine to host the server proxy, but unfortunately I can’t work out how to do that yet. You have access to the URLFetch API to access resources from App Engine. Unfortunately for me, one of the features is that it understands redirects and just goes on through to the full resource itself, with no way to get the endpoint from the headers in the response.

It was also interesting to read Steve Gilmor talk about these services all be it in a post that is hard to actually understand ;)

Also, Simon Willison just put up a simple service on App Engine, json-time, that “exposes Python’s pytz timezone library over JSON.” I think that we will see a lot of these types of mini-Web services hosted on App Engine. Taking Python utility and making services from its goodness is an obvious choice.

Gmail recently got a JavaScript facelift which has subtle new features. For example, calendar attachments, smart top notices when you are disconnected and how the interface is retrying, and more.

However, most Greasemonkey scripts broke. This is bad news for me, as without Mihai’s macros script I feel real pain as I try to vi my way around the interface.

The new Gmail interface did add more keyboard shortcuts such as:

• shift + i: Mark as read
• shift + u: Mark as unread
• shift + 3: Move to trash (not actually new, but not many people seem to know this one)
• shift + 8 and a, n, r, u, s, t: Select all, none, read, unread, starred, unread

But, this isn’t quite enough. Luckily, Mihai has stepped up and ported over his work.

He has ported over:

• g: Go to label
• l: Apply label
• b: Remove label
• e: Archive (regardless of view, unlike “y”)
• d: Discard (mark as read and archive)

and added:

• f: “Focus” the current view (only show unread, starred or inbox messages)

What is really cool is how Dan Pupius and the team have truly acknowledge the Greasemonkey folk and have given us hooks to help us monkey around with Gmail:

For those of you adventurous enough to look at the script source, you’ll notice that it uses a gmonkey object that is present on the window, which in turn gets you a gmail object with methods like getNavPaneElement() and getActiveViewType(). What this means is that the version of Gmail, in addition to being faster, also has semi-official support for Greasemonkey scripts. I’m pretty sure official docs for this API will be out soon, but in the meantime, feel free to look at the script and use a tool like Firebug to investigate the properties of the gmonkey and gmail objects and play around.

Thanks Mihai and Dan!

Man I love Greasemonkey. I am a heavy user of Google Code, and there are a few links that I wish were on the site for my use cases. I could bug the team to get these links added, but to begin with, I wanted to add them for myself to see if I really needed them.

I have changed two pages, first the home page:

All I did here was add a link to my open source projects page. Before hand, I would have clicked on Project Hosting and futzed around, or just remembered to type /u/ and gone via history. Now I have a big bold link on the top right thanks to the simple userscript.

Secondly, I have changed the project pages to add:

• A tab to go directly to the trunk of the Subversion repository for the project. This saves 3 normal clicks
• A link back to my projects on the top right, for jumping between projects. Ideally, I would change this to have a drop down of the projects.

This simple userscript does the deed.