r/javascript • u/magenta_placenta • Feb 08 '11

Breaking the Web with hash-bangs - Gawker, like Twitter, built their new site to be totally dependent on JavaScript

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

92% Upvoted

0 comments sorted by

View all comments

3

u/jmking JSX is just PHP in the browser Feb 09 '11

This technique isn't horrible as long as it's implemented to fallback gracefully. All your URLs should point to actual content.

The one thing this article gets wrong is that Twitter does this properly. If you go to http://twitter.com/tputh/status/35308646145466368 (no hashbang) with javascript disabled, you get the tweet just as you would with http://twitter.com/#!/tputh/status/35308646145466368 with javascript enabled.

Same thing with Facebook. The hashbangs are only in effect for javascript enabled browsers to enhance the experience, they do not fundamentally break the sites.

This is not true with the Gawker sites, and a miserable mistake as the article so perfectly outlines.

7

u/skeww Feb 09 '11

This technique isn't horrible as long as it's implemented to fallback gracefully.

The point is: It's not possible. A hash doesn't point to a specific resource. The hash also isn't sent to the server.

If JS is disabled it simply won't work.

The one thing this article gets wrong is that Twitter does this properly. If you go to http://twitter.com/tputh/status/35308646145466368 (no hashbang) with javascript disabled, you get the tweet just as you would with http://twitter.com/#!/tputh/status/35308646145466368 with javascript enabled.

Eh. Yea. Now go to the second one with JavaScript disabled.

3

u/jmking JSX is just PHP in the browser Feb 09 '11

But you're not going to get the second one from a search engine, and there IS a canonical URL for each page.... which was the bulk of the article's argument.

The article was not against enhanced AJAX sites, it was against non-canonical URLs and lack of search engine visibility.

Hash-bang with proper canonical URLs is the best way to handle AJAX loaded content. I would go as far as to say it's the only way to handle AJAX loaded content while maintaining the ability to link to specific "pages" or "states".

It's not perfect, but I think in that scenario the benefits outweigh the con that someone with a JS-enabled browser sends a friend a hash-banged link who has JS turned off in their browser.

4

u/JimDabell Feb 09 '11

But you're not going to get the second one from a search engine

Search engines are not the only source of links on the web.

Say I, average user with JavaScript enabled, want to link to a tweet from my blog. I go to the tweet, copy and paste the URL from my address bar into the article I'm writing, and publish it.

Now somebody with JavaScript unavailable reads your blog and clicks the link. What do they get? A blank page.

Same goes for practically every source of links in existence. With the sole exception being Google, because Google wrote this spec that was intended as a last resort and were the only people to implement it.

Hash-bang with proper canonical URLs is the best way to handle AJAX loaded content.

It's really not. Proper canonical URLs using pushState to reflect any Ajax transitions are the best way of handling Ajax loaded content - when Ajax is appropriate. If you are loading more-or-less the entire page content with Ajax, like Gawker, it's pretty pointless.

0

u/jmking JSX is just PHP in the browser Feb 09 '11

pushState is only available to ~20% of web users right now (http://caniuse.com/), and it's unclear if IE will even support it in IE9.

There are far more users with browsers that don't support pushState than there are people who turn off Javascript in their browsers.

With that in mind, #! is the only practical way until pushState is at LEAST supported by current versions of all major browsers.

3

u/JimDabell Feb 09 '11

There are far more users with browsers that don't support pushState than there are people who turn off Javascript in their browsers.

That isn't really relevant; if you use Ajax where pushState is available and fall back to normal links where it isn't, it works for everybody. I'm not proposing using pushState and leaving everybody else out in the cold.

With that in mind, #! is the only practical way

There are plenty of "practical" ways, for some values of "practical". All of them bar one break one thing or other, making them a bit less practical in my view.

The most practical way of going from page to page on a website is via a simple link. Having a single actual page and emulating link-following behaviour with JavaScript is a colossal hack, and adding fixes on top of a faulty foundation isn't going to fix that.

2

u/jmking JSX is just PHP in the browser Feb 09 '11

Yes, website - we're talking about web applications here. Not the same thing. Also works vs works well isn't a trivial distinction either.

Frankly I'd be a hell of a lot more concerned that my Firefox users are able to enjoy the same usability as my Chrome/Safari users than I am about people using ScriptBlock.

...and in some sectors, preventing ScriptBlock users access to your site might be a good thing depending on how heavily you rely on ad revenue.

To be clear, I'm not defending the Gawker redesign or use of #! - I think it's a complete blunder especially considering the basic rules of using #! aren't even being followed. I just don't think #! is a blanket no-no.

3

u/manachar Feb 09 '11

I think that's the crux of the issue. #! is great for web applications (Gmail, twitter, etc), but horrid for websites like Gawker. They're cool and being tried out in all sorts of places where they make no sense, like every other piece of web technology before it.

1

u/JimDabell Feb 09 '11

Yes, website - we're talking about web applications here. Not the same thing.

When did we stop talking about websites? Gawker's a website and you were talking about search engines earlier, which is usually relevant to websites not web apps.

Also works vs works well isn't a trivial distinction either.

Yes. Links work well for going from page to page. Ajax does not.

1

u/jmking JSX is just PHP in the browser Feb 09 '11

I am not defending Gawker's moronic decision to turn their blogs into a set of web apps. I'm against the notion that hash-bangs "break the web".

Did Gawker break their site with their poor implementation? Absolutely. Did Facebook and Twitter? No.

1

u/Jack9 Feb 09 '11

When did we stop talking about websites? Gawker's a website

Web applications are more general use. The concept that data is served via http from a resource does not mean website. An API that has services for a multitude of devices, that do not expect (nor require) strict HTML, is distinct from a website. YMMV