Skip to content

Instantly share code, notes, and snippets.

@peterchappell
Created October 3, 2011 03:16
Show Gist options
  • Select an option

  • Save peterchappell/1258359 to your computer and use it in GitHub Desktop.

Select an option

Save peterchappell/1258359 to your computer and use it in GitHub Desktop.
Notes for hashbangs

1. WHAT ARE THEY?


#! 

Also called a shebang (from unix/linux)

The hash bit is self-explanatory.

Apparently journalists way back when referred to exclamations as bangs (presumably it made it easier to send a telegram).

Sidenote: Personally I prefer the interrobang - as in WTF?! - got a bit obsessed about them for a while back when I was buying a typewriter. Some old typewriters had an actual key that was a combination of a bang and question mark... for real‽‽‽‽‽‽‽‽‽

2. USED IN AJAX WEBSITES


To change the url when the content changes

To facilitate the back button

To allow bookmarking and sharing of content that has been loaded by ajax

Variations:

#

?# 

3. EXAMPLES


There seem to be less examples of the hashbang around now.

Twitter e.g. http://twitter.com/#!/petechappell/favorites

Apparently Facebook were using them:

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

(http://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for)

Apparently Gawker (web magazine) were using them and ran into big problems when they changed their URL structure. (Surprise surprise - see below).

4. GOOGLE AND HASHBANGS


Google has agreed to attempt to crawl a hashbang url IF it follows their pattern (hashbang) AND (very importantly) if it can be rendered by them.

http://code.google.com/web/ajaxcrawling/

Basically Google will turn

www.example.com/ajax.html#!key=value

into

www.example.com/ajax.html?_escaped_fragment_=key=value

and ask your server to render the "escaped fragment" (i.e. the bit that you would otherwise be rendering by AJAX)

5. DOWNSIDES


Not "real" urls.

Disturb the traditional use of a hash.

Rely on javascript to render (problem for crawlers by default).

Can't use standard server-side strategies for managing (e.g. changes to site structure).

6. ALTERNATIVES


HTML5 has the history and pushstate API. Backbone and JQM use a hash as a fallback for older browsers).

PJAX: http://pjax.heroku.com/

Backbone: http://documentcloud.github.com/backbone/

JQuery Mobile (since beta 3): http://jquerymobile.com/

But you are still required to be able to render the page server-side (i.e. without JS).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment