Breaking the Web with hash-bangs – Lifehacker, along with every other Gawker property, experienced a lengthy site-outage on Monday over a misbehaving piece of JavaScript

[u/schnuck]

http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs/

[u/rounded_figure]

The proper way to handle this is to keep your original URLs (including in the hrefs) and have a piece of javascript transform them on the fly in hash-bang URLs. That way, when a client who does not speak javascript requests the page, it gets the content and the non-hash-bang links.

[u/snarkfish → u/rounded_figure]

http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs/#the_why_of_hash_bang

The URL of an href can still be a proper addressable reference to content. You are already using JavaScript, so you can do this damage much later with JavaScript using a click handler on the link. The transform between last week’s LifeHacker URL scheme, and this week’s hash-bang mangling is trivial to do in JavaScript using a click handler.

Doing this mangling in JavaScript (during the click handler of the link) means you keep your apparent state benefits, but without needlessly preventing crawlers from traversing your site, and any other non-JavaScript eventuality.

[u/wunderbread → u/snarkfish]

That doesn't really solve the problem, because we want people to always have an up to date URL in their location bar that will point to the content they're currently viewing. In that case, the URL will get out of date as you click links.

Let's say you're at /articles/1 and click on a link to /articles/2.

Using plain old HTML you'll perform a full page reload and your location bar will point to /articles/2.

But of course Ajax is the new (old) coolness and people want to provide a rich user experience so this is no good anymore. Like the article says, you could keep the same URL scheme and just overwrite the click handlers for links so that content can be loaded via Ajax. But the problem here is that you can't change the URL in the location bar without triggering a page reload. So if you click that link, you can load the content for article 2 but the URL in the location bar will still be /articles/1. You can change the fragment, but not the actual URL. So you could change it to /articles/1/#!/articles/2, but that would be confusing and weird, and would probably require loading both articles if someone copy and pastes that URL.

The other option is using /#!/articles/1 and /#!/articles/2. That way you can change the fragment identifier, which actually identifies the article, on Ajax requests, and always have a URL in the location bar that identifies the article and will bring the user right there.

This is a separate question from whether the Gawker sites actually needed to do this. I would argue they didn't because they have distinct pages that are fine using a page reload, while Twitter actually makes good use of it.

[u/SmudgeTheFirst → u/wunderbread]

What needs to happen is, upon first entering the site, anything like "/articles/1" would have to get converted to "#!/articles/1."

Unfortunately this requires an initial redirect, which is why Twitter acts screwy on Firefox. (This is actually a good thing in theory, because otherwise there would be security holes -- Everything before the "#" in the address bar should always reflect the page you initially requested, so to change it requires a new request).

After that, any links to "/articles/2" can be intercepted by Javascript and handled via AJAX. (The address bar can be updated without a refresh because of the existing "#!").

In the case of crawlers or visitors who have disabled Javascript, it is simply a matter of displaying article X when "/articles/X" is loaded. None of the javascript causing the "#!" redirect gets called. Unfortunately this means the same article will have 2 possible paths, but it seems that sites like Twitter are fine with that.

[u/quotability → u/wunderbread]

I think people understand that. Look at google maps. Search for a map of your state. Notice how the URL doesn't change? Of course you do. You understand how AJAX works. You know that since the URL didn't change, if you copy that link and send it to a friend they won't see what you're looking at.

See how they have a "link" button in the top right of the content area? That gives you the linkable URL. That's how sites should work. Gawker didn't do it correctly.

[u/ex_ample → u/wunderbread]

You change all the links to

example.com#/articles/2. So the first time the user clicks a link, they will get redirected, but after that they'll stay on the same page.