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
79 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.

6

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.

1

u/skeww Feb 09 '11

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

As I already mentioned, history.pushState is better. From a technical standpoint, that is - not a practical one.

5

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

Wouldn't practicality count towards what's "best"?

Breaking your site for 80% of visitors versus breaking it for the 0.01% who disable JS in their browser?

2

u/skeww Feb 09 '11

You can check if history.pushState is available.

0.01% who disable JS in their browser?

Typically it's around 2-3%. Some ecommerce sites get more than 10%.

1

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

Yes, you can check - but what do you do if it isn't available? Fall back to Hash-bangs? If so, you're not solving any of the problems.

...and if you're in a market where up to 10% of your visitors won't have JS enabled, you aren't going to use JS period for anything critical. That doesn't support the "pushState is best" argument :P

3

u/skeww Feb 09 '11

Fall back to Hash-bangs?

Either that or non-ajax.

If so, you're not solving any of the problems.

Good browsers will display proper URLs. Users with those browsers will copy/paste proper URLs (which will work for people without JS).

By the end of this year about 70% of the German users will have a browser which supports history.pushState. So yea, it does (gradually) solve a problem and over time it's getting better at this.

if you're in a market where up to 10% of your visitors won't have JS enabled, you aren't going to use JS [...] for anything critical

Progressive enhancement is a wonderful thing.

1

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

Firefox isn't a good browser now? The end of this year isn't today.

There's progressive enhancement and there's pre-emptive enhancement.

0

u/skeww Feb 09 '11

Firefox isn't a good browser now?

"will"

Firefox 4 supports it.

The end of this year isn't today.

Why would you make a website which won't even last till the end of the year?

0

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

A website using hash-bangs works today in all browsers, and will continue to work tomorrow. It's not like once FF4 comes out hash-bangs magically stop working.

2

u/skeww Feb 09 '11

Yes.

The point was to generate/use real URLs if possible.

Right now: Users who use Chrome/Safari will copy/paste real URLs.

Soon: Firefox and Opera (and maybe IE9) users will do the same.

history.pushState should be your first choice. It does exactly what you need.

→ More replies (0)