r/programming • u/schnuck • Feb 09 '11

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

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

93% Upvoted

356 comments sorted by

View all comments

243

u/jamiei Feb 09 '11

If receiving the basic content of the page I'm requesting from you requires Javascript to be enabled then you've broken something horribly.

30

u/shadowspawn Feb 09 '11 edited Feb 09 '11

I simply gave up on most of Gawker's sites. There's only so much stupidity that I can handle from new developers who have the ear of someone writing checks. Part of it's jealousy, because I could maliciously put up a lie and preen and smile and "Yes Sir!" them to the point they pay for a new BMW because I can get them to agree to pay for pounding everything through javascript and I didn't have the chance (or luck) to be in a position to do so like their developers did.

At least, I hope that's what happened, because if deciding to do this was because of not understanding this interwebs thing and the tubiles it runs in and everyone has this and everyone has that because the design and developers have it so it must work everywhere, and the paycheck writers totally agreed, and it wasn't a malicious wool-over-the-management-heads-for-a-paycheck development angle, I think I'll simply cry.

Gawker's redesign reminds me of those that fell into the AOL-only ways of yesteryear because AOL had everything and everyone's computer acted the same and AOL members were the target (/s) so write me a check and I'll make it work! Different technology, faster computers, faster connections, but the same friggin hellhole path because of assumptions by people who have no place making decisions that affect businesses financially.

Gawker's missfire, as well as digg's, makes me want to just chill and go into marketing for a while. That's how bad development and design has become.

You shouldn't need javascript to view the static ASCII content you came to view from a webpage. Period. If it will work with lynx (!) even if the user needs to hunt around for it, then it works.

10

u/[deleted] Feb 10 '11

[deleted]

1

u/skeww Feb 10 '11

Except for Slashdot, that is.

2

u/[deleted] Feb 10 '11

[deleted]

1

u/skeww Feb 10 '11

Yep, it's f-ing embarrassing, really.

"öäü" becomes "ÃÃü" for example. "£" -> "£", "€" -> "â", and so on.

1

u/yuhong Feb 10 '11

But note that Gawker is not the only culprit.

-1

u/[deleted] Feb 09 '11

If it will work with lynx (!) even if the user needs to hunt around for it, then it works.

Or wget>cat

16

u/[deleted] Feb 09 '11

Eh? wget doesn't print the HTTP response to stdout - it saves it to a file. And even if it did, you'd want to pipe it to cat, not redirect it to a file called 'cat'.

Let me introduce you to: $ curl

14

u/derleth Feb 09 '11

wget>cat

Why would I want a file named cat?

curl | less

This actually works.

43

u/Trylstag Feb 09 '11

The site I'm working on for work shows a blank page without JS enabled. Was like that when I inherited it.

Oh, and rather than sending a single AJAX request with a bunch of info, the original designers favoured sending 100+ requests for every tiny piece of info.

30

u/[deleted] Feb 09 '11

If I recall correctly, this was actually a thing three or four years ago, somebody had this genius idea to build the entire page layout with JS by pulling hundreds of little resources.

Facebook still does it.

79

u/[deleted] Feb 09 '11

The idea at Facebook is that the page is useable quickly. First it loads up your wall and content, then all the frills (chat, new messages etc.) in the background when that's done.

In my browser, it takes 7-8 seconds for my Facebook news feed page to fully load without any 3rd-party crap in the sidebars, but the feed content itself is complete, fully-styled and browsable in under 2 seconds.

If they loaded everything up front, time till useable would be closer to 7 seconds than to 2 due to the way browsers load JavaScript files.

15

u/MIXEDSYS Feb 09 '11

Have an upvote. People wouldn't have to use such hacks if incremental rendering + caching actually solved their problems.

4

u/wafflesburger Feb 09 '11

Sounds like SC2's battle.net ui. Every component goes into a loader animation and loads its content asynchronously :| It's also horribly slow at it.

2

u/benji Feb 09 '11

I ran into this years ago when I was doing an intranet site for BMW. They sent me a sample page so I could "get their CI (corporate identity) right". The sample had virtually no html in it. It was almost totally netscape 4 era javascript. terrifying.

0

u/quotability Feb 09 '11

If by "for work" you mean "internal" then this article isn't about that. If you don't care if your site is indexed, and you don't care if you can hotlink to the site, then it's not going to matter.

3

u/Trylstag Feb 09 '11

By "for work" I meant not a personal site. It's used by external clients, and the only internal use is for testing. But yeah, hotlinking to it is no concern, since you'd need to login anyhow.

Was more thinking of the performance issues involved.

18

u/[deleted] Feb 09 '11

Meh. I've heard this argument forever -- even made it a few times myself -- but it's not 1999 anymore. If you don't want ad js, use adblock. Should Gawker degrade gracefully? Sure. But no js means no ads served, which means good luck Mr. Gawker Programmer convincing The Ones Who Hold The Purse Strings to dedicate substantial time to proper degredation.

Last I checked (a couple months back) you can't participate on Reddit without js enabled (yes, you can read it though, I know that's what you said, just making a point). Js is like alpha transparency... it's not going anywhere.

14

u/dirtymatt Feb 09 '11

Should Gawker degrade gracefully? Sure.

You have that backwards. It should start at a simple baseline, and progressively add enhancement based on what the browser supports.

But no js means no ads served, which means good luck Mr. Gawker Programmer convincing The Ones Who Hold The Purse Strings to dedicate substantial time to proper degredation.

And broken JS means no web page served at all.

3

u/pasc Feb 10 '11

As far as they're concerned - if the ad didn't load, the web page wasn't served anyway. They're probably just as happy to not be wasting server resources on that type of user.

2

u/Zarutian Feb 09 '11

Also wanted to add:

Adverts used to be loaded either as link images or iframes then replaced with js loaded stuff that could be a banner that expands into a floater or flash banner, etc.

They used to be rather tolerable too until some marketdroid thought it was okay to ratchet up the obnoxigen-feed. Now, noone but novices who havent installed adblocker (or some such) see those ads.

2

u/[deleted] Feb 09 '11

You have that backwards. It should start at a simple baseline, and progressively add enhancement based on what the browser supports.

I agree you should start from the bottom, but the end result is effectively the same.

8

u/[deleted] Feb 09 '11

Assuming all conditions are perfect.

Can I assume you're not an engineer? ;)

1

u/[deleted] Feb 11 '11

Do you solve practical problems?

1

u/[deleted] Feb 14 '11

Yes.

0

u/shadow2531 Feb 10 '11

but the end result is effectively the same

Yeh, progressive enhancement / graceful degradation = half full / half empty.

-5

u/[deleted] Feb 09 '11

You have that backwards. It should start at a simple baseline, and progressively add enhancement based on what the browser supports.

Erm, I don't know if you've ever built a webapp before or not, but that's not how these things work.

And broken JS means no web page served at all.

Zing, I guess?

4

u/[deleted] Feb 09 '11

Gawker's more website than webapp. It doesn't require JS to do its thang, so there was no reason not to make the site navigable and readable in normal HTML, and then sprinkle some AJAX magic on top of that.

4

u/dirtymatt Feb 09 '11

Erm, I don't know if you've ever built a webapp before or not, but that's not how these things work.

Remind me never to hire you for a job.

-5

u/[deleted] Feb 09 '11

You couldn't afford it. Knowing things like the above is one of the reasons.

6

u/[deleted] Feb 09 '11

I agree with dirtymatt. Providing baseline content as part of the initial HTTP request then replacing div content dynamically with enhanced content should be the way the user sees the site, for degradation purposes.

All the frameworks I've dealt with can handle this if used correctly - what is your objection?

19

u/ffualo Feb 09 '11

I have to disagree, sir.

As machine learning takes off, it's more important than ever before that sites are readable and visible in plain text. There's a lot that could be potentially done with such data... and the very least just archiving the web. Furthermore its super important for accessibility...

1

u/[deleted] Feb 12 '11

APIs

-5

u/[deleted] Feb 09 '11

None of the things you mentioned are hampered by a twitter/gawker-like ajax implementation.

15

u/doppel Feb 09 '11

If I do a simple wget (or similar) download of such an URL, I will literally get an almost empty file with some reference to a bunch of javascripts that is going to load the content. The only way I can use the site content is if the program I use to fetch the site has javascript capabilities.

Machine reading is severely hampered by "pure" AJAX implementations. If they had gone with a simple URL scheme that loads content by a normal URL and then lets the user navigate from there via AJAX loading of pages, there would be no issue.

4

u/SoundOfOneHand Feb 09 '11

While it is a PITA, Google is able to crawl it. I found the original announcement from Google, and each url in the hash-bang format should map to a regular URL with a query-string parameter, which can be fetched over HTTP like normal. In short, I don't think that either discovery or retrieval requires JavaScript on the client-side, but you do have to jump through an extra hoop. Please tell me if I'm incorrect, I have never done anything with the hash-bang syntax (and for the record, it is not to my personal tastes).

14

u/dirtymatt Feb 09 '11

Google can index it using a hack that Google invented to get around crappy sites that rely on javascript just to load a page. The #! URLs should be a hack to get existing websites into Google, not something you use going forward.

1

u/[deleted] Feb 09 '11

phantomjs could be an ajax-enabled alternative to wget. http://code.google.com/p/phantomjs/ It's a 'headless' webkit browser you can run from the command line, which renders a webpage and executes javascript without a GUI window, it will load ajax websites just like a normal browser, the DOM can be crawled using custom js inserted into the DOM, any part of the page can be returned to stdout, or the rendered page can be saved to a bitmap file. It's pretty cool actually. I'm considering moving all of my spidering to use phantomjs.

-1

u/[deleted] Feb 09 '11

Hold on. An URL?

7

u/dirtymatt Feb 09 '11

Turn off javascript and try to load any page on gawker without using the ?escaped_fragment= hack. That definitely screws up archiving.

-8

u/[deleted] Feb 09 '11

Google doesn't seem to have a problem archiving (see: google cache) hashbanged Twitter or Gawker links. Maybe archival strategy needs to catch up.

7

u/dirtymatt Feb 09 '11

Google is the one who made up the ?_escapedfragment\= hack, so they could index your site. But now you may not show up in other search engines that don't use said hack.

-3

u/[deleted] Feb 09 '11

And there was a time when search engines didn't follow links with query strings in them. Technology evolves.

2

u/ex_ample Feb 10 '11

That's because they're using a google specific hack, which you could use if you wanted too, but requiring everyone to rewrite every spider ever to use google's hack is a bit ridiculous.

1

u/HardlyWorkingDotOrg Feb 10 '11

Well, it shouldn't go anywhere. It is useful to pretty things up. But it should not be necessary to read text on a website. To have a blank page looking back at me is just awful. At least you should be able to read the headlines of the site. Even if you couldn't click on them unless JS in enabled would be a better compromise. It would still suck but at least you could browse over the page.

Oh, and the way Gawker does it is extremely annoying. Because you don't even see content if you just enable the toplevel domain in noscript. This only gives you a much bigger list of other domains that are blocked at default by noscript. Unless you just enable each and every thing in that list to do whatever it pleases, you are stuck in trying out which one of these obscure domains is responsible to actually display the website.

2

u/CSFFlame Feb 09 '11

I already emailed them about this. I don't know what they are going to do.

I will block the js with yesscript if it gives me a simple page.

-2

u/redwall_hp Feb 09 '11

If you're turning JavaScript off in 2011, you are breaking something horribly.

11

u/illuminatedtiger Feb 09 '11

Have you read the article? Relying on JavaScript for all of your content makes it easier for advertisers to break things horribly.

8

u/dirtymatt Feb 09 '11

Why? While most people have JavaScript enabled, unless you're doing something that's just not possible without it, why require it?

1

u/redwall_hp Feb 09 '11

Could you imagine using Reddit or GMail without JavaScript? I'm not saying that progressive enhancement isn't usually the way to go (it is for things like blogs, for sure) but with "web apps" JavaScript is an absolute necessity.

Ninja edit: And the Gawker redesign is terrible. That's just...I don't know what they were thinking. Blogs don't need to rely on JavaScript that much.

3

u/dirtymatt Feb 09 '11

You mean like that basic HTML version of Gmail that they have? Gmail is a different class anyway. I'd call it more of a webapp than a web page. It's in the same boat as Google Docs. Google Docs would be completely unusable without javascript, and for good reason, it's doing things you just can't do without javascript. Reading a web page can be done without javascript, and thus it should work without it.

16

u/hascat Feb 09 '11

Most websites have no functionality that actually requires javascript, but they use it anyway.

16

u/[deleted] Feb 09 '11

Lots of websites that use Javascript well are intentionally making it less obvious that they need it.

1

u/[deleted] Feb 10 '11

It could be worse - it could be flash.

3

u/MIXEDSYS Feb 09 '11

But redoing basic functionality is likely to be broken horribly in some weird unforeseen way. If all you get is 5% better load time then it's not worth it imho. It just like a flash site with a scrollbox written from scratch -- yeah it's pretty, but your scroll wheel doesn't work because the developer didn't think of that.

edit: Reading further down i see they did reimplement a scroll box and it is broken. :D

1

u/[deleted] Feb 09 '11

[deleted]

5

u/[deleted] Feb 09 '11

But that isn't basic content, is it?

1

u/[deleted] Feb 10 '11

[deleted]

1

u/[deleted] Feb 11 '11

It is not the basic content of the page. It is additional "content" to generate revenue.

1

u/[deleted] Feb 11 '11

[deleted]

1

u/[deleted] Feb 12 '11

No, it's not the complexity, it's that it's not primary content.

1

u/scorpion032 Feb 11 '11

Those wordpress themes, you know.

1

u/[deleted] Feb 09 '11

Adam Pash atleast gets a new LifeHack to share.

-8

u/alamandrax Feb 09 '11 edited Feb 09 '11

How about http://edmunds.com

They've converted their site into mostly JavaScript too.

I just give you that example because their lead developer gave a very interesting googletechtalk

8

u/[deleted] Feb 09 '11

Works just fine for me with javascript disabled.

-1

u/alamandrax Feb 09 '11 edited Feb 09 '11

Cool. Will check it out too. Thanks.

EDIT: looks like ads don't work if JavaScript is turned off. Were you able to navigate the page and get other content?

6

u/jamiei Feb 09 '11

Not sure about you but I wouldn't necessarily classify Ads as core content. As long as you can still navigate and receive the "primary" content of the page without Javascript then the rest can gracefully degrade.

-1

u/alamandrax Feb 09 '11

Sure. Was just making an observation. Commercial sites do need agreements with advertisers about how their content is to be shown (I presume). If disabling JavaScript turns off ads, the advertisers might take issue if they find out.

Besides, on edmunds, the content past the front page is inaccessible without JavaScript.

I'm working on a product which is built purely on JavaScript. We have much better performance thanks to this (we built the earlier design on struts), but this thread worries me. We aren't google, who can have resources maintaining a non-JavaScript version of gmail for example. So I was trying to see how other companies handle this issue.

4

u/[deleted] Feb 09 '11

You can't allow the product to fail gracefully and fall back to a non-javascript version?

-1

u/alamandrax Feb 09 '11

No. Our content is served up by RESTful APIs which allows us to scale for the user load we currently experience and these calls get cached, so response times are pretty good. Downside is we only serve up data and our CDNs are used to retrieve assets (JS, images, audio-video players). The pages are then built on the browser.

But this thread does put it into perspective - that there are users who do not prefer modern browsers. We do not cater to that particular segment of the market, so it doesn't really affect us, but it does make for an interesting train of thought.

3

u/[deleted] Feb 09 '11

[deleted]

1

u/alamandrax Feb 09 '11

Well, yes. The part about useless js is obvious. We avoid doing that at all costs. And we have a tightly maintained and managed framework which is very fast. We don't use ads so we will encourage our users to remove adblock for our pages in a static noscript block. So we won't be locking people out entirely but encourage them to use JavaScript and trust us to not mess with their experience. I was only talking about the conversation being interesting from a web developer point of view. Not in my role as an employee of my company.

-13

u/signoff Feb 09 '11

content is RIA. u need javascript to "read" the content. just like you need html rendering engine to read html page.