Jeremy Visser

Gmail, the awesome webmail service from Google, has been rolling out a massive code refresh over the last couple of weeks.

Messages are now prefetched, so when you click an email conversation, it comes up straight away — no waiting for it to load — which is very pleasant. Also, they have a revamped contacts manager, which looks pretty slick (but is not very intuitive to use, as the buttons are all in the wrong positions). But my favourite feature as a result of all of this is the addition of hash links to the address bar.

If I go to, say Contacts, in Gmail, the URL in my address bar will appear as:

https://mail.google.com/mail/#contacts

If I then go to, an email conversation, it will look something like this:

https://mail.google.com/mail/#inbox/116cdf2dbd05259b

If I bookmark those links, when I open the browser, Gmail will open in the right page.

Previously, Gmail kept the same URL (https://mail.google.com/mail/) for no matter where you were in the site, because everything was loaded by JavaScript on the fly, and they couldn’t be bothered about making “permalinks”. This was a metaphorical nightmare, because if you navigated to a particular email, bookmarked the page (Ctrl+D), then came back later, Gmail would unceremoniously dump you back to your Inbox, leaving you bewildered as to what happened.

A lot of people familiar with today’s web applications tend to have an attitude of Well, duh! It’s a web application. Of course you can’t bookmark stuff — it’s all JavaScript. However, that’s only because today’s web savvy people have simply learned to accept this unintuitive behaviour as the norm: if you try and bookmark a page in a web application, it’ll probably break. As Gmail has now shown, this is preventable.

Hash-links don’t actually cause page reloading. If, say, Gmail changes the URL in your address bar from https://mail.google.com/mail/#contacts to https://mail.google.com/mail/#settings, this will not cause a full refresh, because only the part after the # in the URL has changed.

Hash links are normally used for navigating to specific parts of a document. For example, if I had the following in an HTML document:

<p id="conclusion">In closing, I look good in red.</p>

The following URL would cause the browser to automatically scroll to the paragraph:

whatever.html#conclusion

However, hash links don’t necessarily have to work like that. Web applications like Gmail can simply use the bit after the # for storing little bits of information, like what page you’re on. It’s very easy to do in JavaScript:

var split = document.location.href.split("#");
var hashstuff = split[1];
// then, you do stuff with hashstuff