Getting out of Redirect Hell

Recently, many redirect services have been popping up. From my perspective, it seemed to start out with the success of TinyURL.com which saw a lot of use in newsgroups, instant messaging and e-mail. The main advantage at the time was the prevention of problems with clients and servers adding linebreaks to long URLs posted verbatim, breaking the links in the process. With the advent of microblogging and Twitter in particular, TinyURL got more popular and other services started popping up like the popular Bit.ly.

Now, people are voicing concern about Redirect Hell, since services have started creating redirections to redirection services. How does this work? Well, a service like Bit.ly is fairly simple. It allows you to enter an arbitrary URL. It quickly checks if it has seen it before and tells you its short version for it, if it has. If it hasn’t, it generates a new and unique short URL – often a random arrangement of characters like http://bit.ly/d30KsT, which happens to link to this page. Whenever anyone clicks a shortened link, their browser tries to get them that page (starting with bit.ly) and the Bit.ly service just tells the browser the original address, sending the browser there instead (this is called redirection).

If this ‘original address’ is yet another service like Bit.ly – say TinyURL – it will tell the browser what it thinks the original address was and send it there, i.e. redirect it again. Try this one http://bit.ly/cST1h0; did you enjoy the confusing page inbetween? Now Twitter plans on adding another service on top, changing all links to links starting with t.co. So, you could end up clicking a t.co link, getting sent to a bit.ly address, then getting sent to a tinyurl.com address and finally ending up at the lolcats.com address you were interested in.

Now I am wondering: what is stopping a service like t.co from resolving all known redirectors like bit.ly themselves and directly redirecting the user to the non-redirecting result page?

Instead of the user going down the t.co >> bit.ly >> tinyurl.com >> lolcats chain, Twitter could do that in it’s own spare time and update the initial t.co >> bit.ly link to t.co >> lolcats. They would still get all the information they want (i.e. “how many people link to what” and “how many people clicked this link”) and their users get snappy performance. As a bonus, the full redirect chain only happens once. Everyone we care about wins.

I can see how bit.ly c.s. wouldn’t be amused about getting cut out of the loop, but there’s really no stopping it. Unless of course they fight back and block any requests from known t.co ip ranges, but there’s ways around that too…

Settings in the hash part of a URL

The use of Javascript to add interactive components to websites has become commonplace. Whether you use jQuery, Mootools, Yahoo UI or any of the other popular JS libraries to enhance the user interface, AJAX really helps to add fluid interaction driven by server side data, without requiring the entire page to reload. (or AJAJ if you like JSON like I do, let’s just say the ‘X’ stands for ‘any structured data format’)

If you’re serious about accessibility, you’ll also keep the WCAG in mind. One of  its requirements is that you should never hide content behind a technology with limited availability. So, no information presented in a Flash application if you don’t offer a non-Flash alternative. Strict supporters of such guidelines take it one step further and demand that all functionality, even the features you add for convenience or plain bling, is essentially available if most of the supporting technology is turned off.

The reasoning goes a little like this: a website is there to perform a function or provide information. If people want it to look nice, they can have CSS. If they want interaction and save time on page reloads, they can have Javascript. If there is something that absolutely requires more than a webbrowser has to offers (at the time), you can consider writing a Flash application. Video used to be such an application, but HTML 5 promises to change that

The Problem

One part of the interface that’s commonly forgotten in all this is the URL. Of course the WCAG give you some guidelines on how URLs should be formatted, but compared to web pages, that’s like only covering HTML and CSS and forgetting about scripting.

The URL is an important part of the user interface. Some people use it to identify what it is they are looking at. Some of those may even modify the URL as a shortcut to reaching a specific place on the website. The URL is also what all browsers use to create bookmarks and what some add-ons and plug-ins use to get information about what the user is looking at.

But for (very good) security reasons, you have little or no control over the URL from JavaScript, at least not without a round-trip to the server, reloadig the entire webpage. An example of a security reason is that a user should not be fooled into thinking they are looking at ‘paypal.com’ when they are actually looking at ‘iscamyou.net’.

Still, having no control over the URL means that the user is limited to bookmarking the page that they originally visited. Any changes you make to the page through JavaScript interaction won’t be reflected in the URL.

The Solution?

You could notify the server of change on the client using AJAX. But this will only work if the user returns using the same browser, or when they are logged in somehow. Since many people use multiple computers or browsers sharing bookmarks using applications like Xmarks, this doesn’t really work. It’s also no good if you want to share a bookmark with a friend, since the saved information won’t be available to them.

There is one part of a URL that you are allowed to modify using JavaScript, the hash. This the very last part of a URL: protocol://user:password@domain/path?query#hash. For example ‘#/two/four’ in http://grismar.net/hashjs/#/two/four. The problem with this approach is that the hash string is not sent to the server when the browser sends a request.

So, although you can save some information in the URL, allowing you to bookmark it and allowing plug-ins and add-ons to detect a change, it still won’t allow the server to determine what to send you.

The Clincher

The final piece her is to use JavaScript to read the hash right after loading the page and making needed updates (including getting any needed information from the server through AJAX) based on the hash.

Of course you should limit any information in the hash to changes you’re willing to limit to JavaScript-enabled users only. So, for anyone taking the WCAG seriously, this means cosmetic changes or changes in usability that simply require the use of JavaScript to work (animation, dynamic changes, etc.)

I ran into a good use case where I needed this when helping design a search interface for the Nationaal Archief (National Archives) of the Netherlands. Here, the need arose to search in many collections of information at once, while presenting the results in separate areas of the user interface. Some users prefer not to see specific collections and closing one of the results will allow more space for the rest of the results.

From a usability perspective, users might expect to ‘bookmark’ the state of the application as well as the query they had just run. But users also wanted to be able to change the configuration without having to reload the page after every change.

You can see a simplified example of that result here and just view the source (XHTML+CSS+JavaScript) and feel free to use it. The example uses jQuery, but of course this is not required to employ the technique. You can download a copy of jQuery from http://jquery.com.

Get a virtual Linux box on your Windows PC

Some colleagues were asking, so I figured more people might want to know: how to get a working Linux box without breaking your Windows PC. To play with, to run some software you can only get on Linux or maybe even to run some virtual server programs.

Here’s how, using Ubuntu as a distribution (it’ll work for others too):

  • Get Linux
    Download disk image with your favourite Linux bootable distribution. Right now, for Ubuntu, getting the Ubuntu 8.10 stable edition .iso file worked for me, the 9.04 is about to be released as a stable version too.
  • Get VirtualBox
    Download the latest binary of VirtualBox. The VirtualBox 2.2.2 setup for Windows works fine for me.
  • Install VirtualBox
    Using default options, install VirtualBox. You can install it in the default location, since you will be able to put the virtual machines in any folder you like.
  • Create the virtual machine
    In VirtualBox, create a new virtual server. Default settings work fine, but you can tweak the amount of memory and diskspace to your liking. It does need a virtual hard disk, to install Linux on. Create the virtual hard disk where you have sufficient space to contain all the files you want to put on the virtual server.
  • Attach the Linux disk image
    In VirtualBox, point the virtual CD-rom drive to the .iso file with your Linux distro. Once you start the virtual machine, its cd-drive will have this disk loaded and will attempt to boot from it.
  • Start the virtual machine
    The virtual machine will boot using the CD-rom image. If you have the Ubuntu distribution, it will ask you what language you want to use and then offer you the option of booting Ubuntu without installing it. Instead, you can tell it to install Ubuntu, which will install it to the disk image you created.
  • Install Linux
    Follow the instructions of the installer for your Linux distribution. Most of the choices will be straightforward, Google is your friend if they are not.
    Note: if your mouse gets ‘stuck’ in the VirtualBox window, you can free it by hitting the right control button.
  • Install Guest Additions
    VirtualBox offers a set of tools for Windows and Linux guest operating systems. Note: the guest operating system is the OS in the virtual machine. The host OS is the OS of the PC you installed VirtualBox on. To install the guest additions, shutdown the virtual server, download the guest additions for your version of VirtualBox and attach that .iso image file to the virtual CD-drive. Then start your virtual machine and start the appropriate installer from the CD-drive.
    Alternatively, select ‘Devices – Install Guest Additions’ when your virtual machine is running, to do it automatically. But if this doesn’t work, you will be able to do it yourself.
  • Reboot and you’re done!
    Just reboot the virtual machine once more and you’re done! With the most recent guest additions, you’ll be able to seamlessly use the virtual Linux box, running in a window on your desktop. It will even support reading from your real CD-rom drive, floppy drives and USB devices and it will use whatever network connection is available in the host OS.

Of course, if all you wanted to do is run Linux applications on the Windows desktop and you already have a Linux server running somewhere, you could go the way of installing Cygwin and using its X-Server to show applications that run on the remote Linx server. But that’s another blog post ;-).

Get that champagne ready to go

Tonight, at 0:31:30 (23:31:30 PM UTC Feb 13 2009) it will be 1234567890 unit time. In case you’re not as much of a nerd as I am: unix timestamps are used in many database systems around the world to record date/time combinations. In this system, time is counted as the number of seconds that has passed since the start of 1970. Put on the clock tonight and keep that bottle ready to pop!

Sadly, leap seconds are ignored, so since we have counted 24 leap seconds since the start, you might want to leave the cork on until 0:31:54. I’m sure many of my colleagues at the National Archives – used to think about decades and centuries instead of seconds – can see the humour of of a system that won’t work beyond 1970 (or rather 1901) and will be useless starting January 19 2038…

Epoch fail!
Epoch fail!

Add RSS to a phpBB3 forum

I just added a phpBB3 mod which adds RSS feeds to a phpBB3 forum to the forums on this page. Like most phpBB3 mods, it’s a bit of a chore to install. More so since currently there is no easyMod for phpBB3, so everything has to be done manually. But if you follow the instructions in the install.xml to the letter, everything should be fine. Continue reading Add RSS to a phpBB3 forum

SiN Episodes: Emergence

You can love or hate episodic content, but you’ll have to give it this: at least you save a few bucks if you buy something you shouldn’t have. SiN: Emergence as currently available on Steam, packaged with SiN 1 and SiN 1 Multiplayer, falls snugly into that category. Never mind that $5 should be good value for money for any playable FPS created in Valve’s source engine. Continue reading SiN Episodes: Emergence

Gliffy

Gliffy is a web application that fills the gap in open source office software: a Visio replacement. Sadly, it’s not open, nor is it really free. You can get a free account if you’re not using the documents commercially and even then, you can only have 5 active documents in Gliffy at any one time and they’re all public (that is, for the world to see).

Still, as a web-based application, it is surprisingly full-featured and it’s perfect for getting some diagrams quickly sketched out. Of course, if you’re really serious about your diagrams and want them to translate into code or be validated as correct UML, you will still need something like Microsoft Visio or ArgoUML (which is open and free by the way).

Gliffy supports JPG, PNG and SVG export. This is nice since it allows you to quickly save your work for use on a website, or even import the SVG into Visio or some similar product. If you know of other alternatives to Visio, preferably open or free, feel free to let me know. I’m aware of Dia, but that one just doesn’t do the trick. There’s too much focus on making diagrams that fit the rules and not enough “diagram sketchpad” for me.

[rate 3]