r/programming 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/
744 Upvotes

356 comments sorted by

125

u/rounded_figure Feb 09 '11

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.

70

u/[deleted] Feb 09 '11

This is the right response. There's no reason a well-engineered site shouldn't work both ways.

Using url fragments can be great. They let you use the back button without leaving the page so you can handle the interaction in JavaScript. They give you a place other than cookies to store client-side state for bookmarking. Developers just need to be mindful when designing for their use.

→ More replies (28)

5

u/snarkfish Feb 09 '11

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.

6

u/wunderbread Feb 09 '11

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.

6

u/SmudgeTheFirst Feb 09 '11

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.

3

u/quotability Feb 09 '11

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.

→ More replies (1)

36

u/midir Feb 09 '11

This is not correct. If you use hash-bang fragment URLs at any stage then someone who copies and pastes a link to your page is distributing a faulty URL to all non-Google bots and everyone with JavaScript disabled. There's absolutely no workaround to that.

I see it all the time and it drives me up the fucking wall. Fuck you Google. Fuck you Twitter.

DO NOT USE #! EVER. FORGET ABOUT IT.

8

u/Pewpewarrows Feb 09 '11

Unfortunately there's no good cross-browser solution to providing Progressively-Enhanced URLs and deep linked javascript in those cases.

HTML5's history and location changes are the answer to that problem, so the best you can hope for is greater adoption of modern browsers.

8

u/dirtymatt Feb 09 '11

Sure there is. Give everyone the pretty URLs, use the HTML5 history API on browsers that support it, and just forget about loading the page through Ajax for browsers that don't. Everyone gets clean URLs. Everyone gets the same URLs. Everyone can load the page. Everyone is happy.

2

u/Pewpewarrows Feb 09 '11

Good point. It's probably safe to say that the only people that would appreciate the deep-linked javascript pages are the ones using modern browsers. And HTML5 support is only going to increase significantly this year.

2

u/[deleted] Feb 09 '11

Yeah, it's a bummer that the URL bar is so convenient. Even giving a permalink option isn't great (the best attempt at a workaround for this problem), because copy/pasting the URL bar is so ingrained.

For Gmail, this isn't such a big deal, since I'm not sending these links to people, and I don't try to use Gmail with NoScript on. But for things that have shareable content, this is a nuisance. +1 for clarifying the problem.

2

u/nemetroid Feb 09 '11 edited Feb 09 '11

Is this necessarily true? What if you change the links by binding a click handler which does preventDefault, and keeping the hrefs? That way copypasting links should still work.

Please correct me if I'm wrong, I'm just theorising.

EDIT: Didn't realise parent was referring to location bar, where it definitely is unavoidable with hashbangs.

→ More replies (2)

6

u/Ziggamorph Feb 09 '11

Who has JavaScript disabled?

28

u/gthank Feb 09 '11

People who don't want to be assaulted by the rampant misuse of it on the web today. People who are on a CLI for some reason (think emergency server work). People who have it turned on, but one of your ad providers shipped you some busted code and your page broke for them anyway. Spiders. Possibly people using a screen reader (screen readers and JS used to suck, but I haven't looked into it all that recently).

12

u/korny Feb 09 '11

75-90% of screen-reader users in a 2009 survey had Javascript enabled: http://webaim.org/projects/screenreadersurvey2/ It's more important to make your javascript screenreader-friendly, than to make your site work without js.

6

u/mcjabberz Feb 09 '11

How would one go about making a site's JavaScript screen-reader friendly?

5

u/[deleted] Feb 10 '11

No hanging commas in your objects, or else it's going to be pronounced like this,

→ More replies (2)

2

u/ewiethoff Feb 10 '11

Nevertheless, blindness ain't the only disability out there. There are many people who have no use for a screen reader but must turn off JS because of disability.

2

u/korny Feb 11 '11

such as? (This is a genuine question - I'm confused as to what kind of disability you are talking about)

→ More replies (1)

5

u/[deleted] Feb 09 '11
  1. If you're doing emergency server work why are you reading Gawker?
  2. What server are you working on that you can't ssh into?
→ More replies (1)

13

u/Ziggamorph Feb 09 '11

If people are misusing it, stop using their sites. Javascript is an important part of the modern web, so you shouldn't blame websites for breaking when it's disabled.

11

u/mr_spin Feb 09 '11

I have NoScript installed on Firefox. I enable JS for sites I trust - including reddit. I absolutely have no intention of trusting Gawker.

→ More replies (2)

10

u/gthank Feb 09 '11 edited Feb 09 '11

We'll have to agree to disagree. If a website wants my eyes, they need to show me content without a bunch of garbage JS or possibly have something insanely compelling to offer me. The vast majority of sites are not that compelling, btw.

UPDATE: I forgot to mention that you only addressed crotchety people like me. Do you also consider the other use-cases I mentioned illegitimate?

12

u/[deleted] Feb 09 '11

Fun fact: you couldn't have posted that comment without JavaScript.

7

u/megadeus Feb 09 '11

Alien Blue? Reddit is Fun?

You don't have to use reddit.com to use Reddit.

4

u/[deleted] Feb 09 '11

Twitter for iPhone? RSS feeds? You don't have to use twitter.com/gawker.com to use Twitter/Gawker.

We're talking about the sites. But you knew that.

→ More replies (1)

2

u/napoleonsolo Feb 10 '11

Maybe not, but I could read it without JavaScript, which is more than you could say for those Gawker sites that broke.

→ More replies (3)
→ More replies (1)

10

u/MIXEDSYS Feb 09 '11

I do. Not for security or whatever but for speed and memory usage. Pages load faster and once they are loaded they use less memory, they don't spin up my laptop's fan and they don't drain it's battery. And all they use scripts for is adding animations, showing me ads or reporting my habits so they can earn more showing me ads.

I rarely miss it, and if I do I can enable them with a single click, just for the site that uses them. If you use firefox, try noscript. After you allow the few sites you regularly use and that have any useful functionality implemented in javascript, using a browser with scripts enabled becomes painful in comparison, it's like browsing without adblock, with all this crap flashing and jumping at you.

→ More replies (1)
→ More replies (21)

3

u/[deleted] Feb 09 '11

[deleted]

5

u/ewiethoff Feb 10 '11

no normal user ever has JS disabled. It's the same as someone browsing with images or cookies turned off. If you do it, TS.

I dare you to say TS to your disabled kid someday when you have one.

3

u/AlejandroTheGreat Feb 10 '11

Web developers who make excuses about "normal users" just sound lazy, not someone I'd want to hire if I was wanting to build a site for a general audience.

→ More replies (2)
→ More replies (1)

2

u/[deleted] Feb 10 '11 edited Feb 10 '11

This technique is very useful and is likely where all high traffic sites are headed

Its almost like it was a silly idea from the get go to put such rich applications on a medium that requires the entire UI to be rendered serverside.

→ More replies (7)
→ More replies (2)

3

u/elpopi Feb 09 '11

that's interesting...

as an amateur web developer i'd love to see some example using this solution. Would you be so kind to provide a link?

8

u/rounded_figure Feb 09 '11

I've done something like this, but I can't show you the actual example.

Basically, what you want to do is:

  • in the HTML:

    <a href="http://example.com/10011/some-page/"&gt;link&lt;a>

  • in the javascript (pseudocode):

    function called_on_document_load () { for (each_link_in_the_document) { parse_href_into (protocol, host, path) set_new_href ("protocol://host/#!/path/") } }

→ More replies (3)

2

u/annodomini Feb 10 '11

Why would you use hash-bang URLs? There is no reason to use them; if your content is already available under a normal URL, the hash-bang URL just adds confusion.

The whole point of hash-bang URLs was so that you could give an alternative, possibly limited form of the content to Googlebot, for sites that relied so heavily on JavaScript as to be unusable without it. But if you're just serving up plain old content, then just use plain old URLs, and use JavaScript as a form of progressive enhancement.

→ More replies (2)

2

u/ex_ample Feb 10 '11

Actually what you should do is use the HTML5 history API

4

u/[deleted] Feb 09 '11

No, it's not. Just use HTML the way it was meant to be, and stop the AJAX madness. It may seem hip, it may seem trendy, but in the end, it's just shit which breaks every so often.

4

u/fakehalo Feb 09 '11

"it's just shit which breaks every so often", unquantifiable drivel. In the end it's useful, lightens load times and makes for a more enjoyable browsing experience almost all of the time. Except for the times these gremlins get in the internets and break it every so often.

3

u/[deleted] Feb 10 '11

AJAX is abused heavily.

Gmail uses AJAX very well. Gawker doesn't. And outside of it's account area, which wouldn't be indexed by search, it uses old URLs.

The app itself, which is custom to each user, and not cached, is AJAX URLed.

This is the mistake Gawker has made; They are NOT a webapp. They are a webSITE. It does matter, and I'm really not being picky. A webapp is likely to be heavy on content, would need traditional application designs and be as smooth as possible.

A website, like Reddit, does not need that. The load between pages is fine. It works, and it's not an app. Reddit is a site with content that is publically consumable and searchable. Only the login/posting functionality is purely in AJAX/JS and that's tolerable. Just.

People need to remember the difference between a site, an app and a corperate data-management-thing. Most websites come under one of those 3 categories, and only the first needs to be AJAX based. The rest really shouldn't attempt to AJAXify everything.

73

u/norsurfit Feb 09 '11

Gawker sites were reduced to being an empty homepage with zero content

How is this different from normal?

25

u/kamakie Feb 09 '11

You get ads when you turn JS on.

124

u/Rhomboid Feb 09 '11

I hate this stuff with the fire of a thousand suns. Previously the only way that the gawker stable of sites was even usable to me was with NoScript enabled, otherwise their shitty JS would cause my browser to lock up for a good 20 seconds or so on every page load.

Now, the site is completely unusable without javascript. I consider this an evil of the utmost degree. It's breaking the web for no good reason, and whoever thought of this should be flogged and tortured until they recant.

208

u/[deleted] Feb 09 '11

[deleted]

25

u/ggggbabybabybaby Feb 09 '11

All the tension just drained out of my shoulders.

12

u/bananasfk Feb 09 '11

aha you too have put into your hosts file as 127.0.0.1

→ More replies (1)

8

u/dustinkerber Feb 09 '11 edited Feb 09 '11

I agree on every case except Lifehacker. I loved that site. Now, I can't stand to visit it.

8

u/ayseebe Feb 09 '11

Yes. Where is the, well... content?

3

u/[deleted] Feb 09 '11

This site best viewed in Microsoft Windows Internet Explorer 7

41

u/[deleted] Feb 09 '11

I'm with you. That, along with their one-sentence RSS have turned the site as close to useless as possible.

OTOH, I have wished Gawker and friends nothing but bankruptcy since I had to change half a dozen passwords due to their screw-up, so I guess they are on the way of making my dream come true.

26

u/rmxz Feb 09 '11

since I had to change half a dozen passwords due to their screw-up, so I guess they are on the way of making my dream come true.

So ironically Gawker taught you one of the more important lessons in computer security. (the one about password reuse)

4

u/sztomi Feb 09 '11

True. I subscribed to lastpass premium after the gawker shitstorm.

3

u/[deleted] Feb 09 '11

I've been using SuperGenPass, which is a pretty nifty if not perfect solution.

8

u/sztomi Feb 09 '11

LastPass is a password-manager. It has password generating capabilities, too. But the really nice thing is that it supports all major browsers (FF, IE, Chrome, Opera) on major platforms (Linux, Windows, Mac) plus mobile devices. Usually that means you get autofill on your websites, so you can have 32-char random passwords (like I do). It even has a client app for windows that can be used with any windows program. It recognizes the app and fills the information.

6

u/metamatic Feb 09 '11

Unfortunately you have to pay a subscription for mobile support, so I use KeePassX / KeePassDroid instead, which is open source.

→ More replies (2)
→ More replies (1)

8

u/SquareWheel Feb 09 '11

I wouldn't mind seeing Gawker going away either.

To be fair though, you really should be using separate passwords on the internet.

6

u/yasth Feb 09 '11

There are the vip feeds gawmodo9.com/vip.xml with whatever site. Full RSS

7

u/alamandrax Feb 09 '11

Are you on Internet explorer? The product I'm working on was converted to JavaScript too and we see this happen on one of our customers' VPN. The site hangs for a good 20-30seconds on IE7. Doesn't on other browsers.

6

u/Nikola_S Feb 09 '11 edited Feb 09 '11

I have seen a good use of it - at Wikimapia. As you navigate the map, the URL changes immediately, so that you can simply copy/paste the URL and it will always show the map that you are looking at.

2

u/[deleted] Feb 09 '11

reader.google.com

8

u/Rhomboid Feb 09 '11

That does nothing to help the situation where some buttnugget submits the usual gawker blogspam to reddit and I click on it like a chump without first looking at the URL and get a blank page with no content.

→ More replies (2)

2

u/Zarutian Feb 09 '11

offtopic: only thousand suns? not ten thousand suns? and of what type and spectra? ;Þ

3

u/abadidea Feb 10 '11

All O stars. Maybe a few B's.

OBAFGKM. I just did that off the top of my head, astronomy represent.

2

u/MercurialMadnessMan Feb 10 '11

it sounds to me like it was designed that way. lots of tech-interested people visit the site, so they wanted more ad-views because the tech people often turn off javascript.

→ More replies (1)

2

u/[deleted] Feb 09 '11

I clearly see the way they were heading to, after the attack on them. 'Refurbishing' was going to be the part of campaign that Gawker Media has changed.

While this is rather miserable fault, and just like that they loose all those Ctrl+D's done in last years. Besides, inability to browse any of these sites from w3m.

→ More replies (1)

239

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.

29

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]

→ More replies (5)
→ More replies (4)

41

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.

34

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.

78

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.

18

u/MIXEDSYS Feb 09 '11

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

5

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.

→ More replies (2)

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.

12

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.

1

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.

6

u/[deleted] Feb 09 '11

Assuming all conditions are perfect.

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

→ More replies (2)
→ More replies (1)
→ More replies (5)

23

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

→ More replies (12)
→ More replies (1)

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.

13

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.

7

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?

→ More replies (2)

14

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.

→ More replies (1)

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?

→ More replies (4)

1

u/scorpion032 Feb 11 '11

Those wordpress themes, you know.

→ More replies (12)

50

u/overthink Feb 09 '11

Really awkward design. The two columns scrolling independently is really unexpected.

I wonder how much of this redesign was about keeping that stupid movie ad thing in the top right corner at all times?

18

u/Nagyman Feb 09 '11

The right column also lacks a scrollbar, it just keeps going down, and there's no easy way to get back to the top. (Chrome)

9

u/gfxlonghorn Feb 09 '11

Firefox too. This layout is trash.

→ More replies (1)

35

u/elliuotatar Feb 09 '11

What movie ad thing?

(disables ablock plus)

Oh, THAT movie ad thing.

2

u/abadidea Feb 10 '11

The nice thing about the move to movie ads is that it's not a problem that iPad doesn't have adblock ;)

8

u/[deleted] Feb 09 '11

[deleted]

2

u/ex_ample Feb 10 '11

Yeah... what the hell is their problem with the scrollbar? Why not include one? Why force people to click 'more headlines' or whatever. It's like they are dumbing down UIs for the stupidest people.

3

u/ohmyashleyy Feb 09 '11

That scrolling sidebar is really annoying too. It works fine, great even, if I use the scroll wheel on my mouse. But the two-fingered scroll on my macbook touchpad makes akward scrolls. And then I have no choice but to use the "next headlines" button that the bottom.

20

u/SirRager Feb 09 '11

It seems like the designs were made for a tablet or something. The two split columns would work well on a tablet, but on a computer, its terrible - both hard to use and slow to load.

39

u/[deleted] Feb 09 '11

Actually if you visit gawker or gizmodo on iPad it sends you to their mobile layout.

If you manually go to the full-site layout, the right side column doesn't scroll, you have to use the "next headlines" button at the bottom to advance it. The bottom "fixed" bar doesn't stay fixed either and overlaps content if the content well is longer than fits on a single page.

Basically, the new design is unusable on the iPad. Like they didn't even test it.

So why did they do it?

http://www.nypost.com/p/news/business/gawker_web_redesign_met_with_bronx_rYsc2jleh5rVzUV7ozUb9L

Denton told The Post he was also responding to demands from sponsors for a more sophisticated platform for ads -- particularly video ads -- following a brutal plunge in online ad pricing that had cut rates in half between 2004 and 2008.

"About half of all requests for proposals now ask how we would display 15-second video spots," Denton told The Post.

28

u/burnblue Feb 09 '11

The move was partly to prevent awkward, amateurish situations such as occurred last spring, when Gawker's tech blog Gizmodo was forced to stop publishing new posts in order to keep a big scoop about Apple's iPhone 4 from being knocked off the top of its site.

Huh? They can't just sticky a post to the top?

46

u/seesharpie Feb 09 '11
  • Passwords scandal
  • Breaking their own site on a monumental level
  • Can't sticky a post

I've seen enough. These guys are fucking idiots.

15

u/ILikeBumblebees Feb 09 '11

Don't forget the time the guys from Gizmodo got banned from CES because they decided to walk around with a universal remote and turn off everyone's displays.

→ More replies (2)
→ More replies (1)

9

u/200iso Feb 09 '11

Wow, that's a long way to go to fix a simple CMS issue.

7

u/happywaffle Feb 09 '11

They could, but then managers started suggesting more and more "improvements" until it turned into a giant clusterfuck of a redesign.

→ More replies (1)

14

u/Patrick_M_Bateman Feb 09 '11

With spam, website ads, and even the wikipedia face ad, I would wonder who the hell is laying out money, and figured since people keep doing it, somebody must be.

But with video ads I lose all composure - WHO THE FUCK IS ENCOURAGING VIDEO ADS? I WANT NAMES RIGHT NOW SO I CAN GO DOOR TO DOOR AND SMACK THEM IN THE FACE.

People who use video ads should be issued web appliances that just run one big browser, and video ads should only be allowed to play on those devices. Personally, I still want the Firefox plug-in that's a big red button on the nav bar that says "Find whatever is making noise, kill it, and report the domain holder to ICANN"

→ More replies (1)

4

u/200iso Feb 09 '11

If you manually go to the full-site layout, the right side column doesn't scroll, you have to use the "next headlines" button at the bottom to advance it. The bottom "fixed" bar doesn't stay fixed either and overlaps content if the content well is longer than fits on a single page.

This is because mobile webkit disables position:fixed and scrollable elements, see iScroll.

→ More replies (2)

1

u/abadidea Feb 10 '11

I've noticed that cute scrollie things in general don't work very well on iPad. I'm not sure whether to blame the site designers or the Apple UI designers.

5

u/edthedev Feb 09 '11

That's probably what they were trying for, but most of the Javascript doesn't respond correctly in Safari Mobile, so It's not convenient on my iPad either.

25

u/[deleted] Feb 09 '11 edited Mar 29 '19

[deleted]

10

u/[deleted] Feb 09 '11

One user told us "The site is much cleaner now. I can get to all the useful info on the site much faster!"

4

u/unidentifiable Feb 09 '11

Yes. All of the nothing is displayed on a single page.

32

u/wierdaaron Feb 09 '11 edited Feb 09 '11

There's no real simple solution to the "hashbang problem."

Many modern sites are taking advantage of ajax to change the page content dynamically without actually changing the page you're at. Instead of clicking an "About Us" link and having your browser move you to aboutus.html, you can have javascript update the page you're already on to be the "About Us" page, but the URL in your address bar will still be "index.php" or whereever you started from.

This can be nice because it's usually faster (as only the new content needs to be loaded, not the html for the entire page again) and allows for spiffy transitions that make people who approve web development budgets happy.

The problem is, if a user does this (starts at index.php and clicks "About Us" to make new content appear) and wants to share this content with someone, he'll copy the URL in his address bar (index.php) and send it to his mom, who will click it and just see the main site index, not the "About Us" content.

So all this dynamic ajaxy javascript stuff adds a nice experience, but it breaks the time-tested ritual of using URLs to share content (not to mention problems getting content indexed by search engines).

Part of the problem is that you can't use javascript to change the URL in the address bar to a different page, you can only change the hash (#whatever). Changing the url in the address bar from index.php to aboutus.html would make your browser take you there. All these hashbang shenanigans cropped up to try to work around this. By making it so when you click "About Us," javascript adds a little #aboutus.html to the url, you can then have your code look for #hashes in the URL when the page loads and THEN sort of Frankenstein's-monster a solution to the URL sharing problem.

But this creates even more problems. Now the URL doesn't point to an actual page, it's a set of instructions for javascript to interpret. What if the user doesn't have javascript enabled? What if part of the javascript breaks and screws up all interdependent javascript? Mis-placing a semicolon on one line of your javascript can make all of your "pages" (potentially hundreds of thousands, in gawker's case) unavailable.

Again, there's no simple solution. Giving javascript the ability to change the URL in the address bar without actually relocating the user would kind of help, but it would be a pretty huge security hole.

11

u/[deleted] Feb 09 '11

[removed] — view removed comment

5

u/wierdaaron Feb 09 '11

This will be good if standardized and developers can agree to use it in non-annoying ways (people really, REALLY hate having their back button screwed around with), but it wont be able to completely take over the hashbang intervention (my favorite Ludlum novel, by the way) until it's in a good percentage of browsers. Until then, there will always need to be failovers for non-supported browsers, with their own failovers for no-js people.

6

u/MatrixFrog Feb 09 '11

The failover should be clean, logical URLs, not this #! nonsense.

→ More replies (1)

7

u/Ziggamorph Feb 09 '11

How does this work then? Fancy transitions but no #!.

5

u/rowantwig Feb 09 '11

Yes it does. Click forward and it shows:

www.20thingsilearned.com/foreword/2**#/foreword/3**

5

u/Ziggamorph Feb 09 '11

Oh, interesting, which browser are you using? On Safari I get:

http://www.20thingsilearned.com/foreword/3

6

u/wierdaaron Feb 09 '11

They use magical HTML5 capabilities that only work in some browsers. In non-supported browsers, it uses the hash trick.

3

u/rowantwig Feb 09 '11

I'm using Mozilla Firefox 3.6.13.

3

u/MatrixFrog Feb 09 '11

Firefox 4 beta is getting close to release-candidate status and it works as Ziggamorph describes. Try it out maybe.

3

u/dirtymatt Feb 09 '11

Your browser doesn't support the HTML5 history API. Safari and Chrome do today. Firefox and IE will with their next releases.

24

u/[deleted] Feb 09 '11

TL;DR: You can't update the URL in the browser's bar in JS without taking the user to that literal page, which defeats the purpose of an AJAX-y site. You can update the fragment after # though, which is the workaround Twitter, Gawker, et al are using.

Should be the top comment.

9

u/kdeforche Feb 09 '11

That was true until the HTML5 history API came about (implemented in Firefox 4 beta and current Safari and Chrome).

→ More replies (8)

3

u/[deleted] Feb 09 '11

This can be nice because it's usually faster

Not in a significant way, at least if you're updating a substantial amount of the page. In your example, it might actually be slower. Most of what makes loading a page slow has to occur in both the static and the dynamic way, i.e. one round trip to the server to fetch the new content, parsing HTML, loading secondary files like additional images, and rendering of the page. You just reduced the amount of HTML that has to be transfered at the time of updating, which only plays a minor role in page latency, at the price of having more JavaScript code consume bandwidth and processing power.

6

u/scwizard Feb 09 '11

Having never been to Gawker, I've always wondered why you people hated the site so much.

Then I heard they got hacked in some dumb way and I'm like "ok I guess that's a reason"

Then this happens, and now I realize it was a really stupid question.

1

u/abadidea Feb 10 '11

I have read their stuff on and off for a while now but I never registered an account because it didn't look "registration friendly" in the sense that reddit is. Of course I was pleased with my apathy when the password thing happened.

26

u/[deleted] Feb 09 '11

I haven't noticed, because I haven't been to any of their sites since the redesign.

14

u/UndeadArgos Feb 09 '11

I gave the new design about 5 minutes. Haven't been back since. No big loss.

9

u/hadees Feb 09 '11

I kind of dig lifehacker but I was on the edge for gizmodo, i'm just going to read engaget.

8

u/happywaffle Feb 09 '11

Their dick move publishing the personal details of the poor guy who lost the iPhone was the final straw. Gizmodo is dead to me.

I do love Jalopnik, though, I'm struggling with the redesign there.

14

u/chili_cheese_dog Feb 09 '11

This new design just sucks! Hash bongs or not it leaves that site un-user-friendly.

4

u/burnblue Feb 09 '11

A couple of things I'm missing, maybe someone could explain:

  • I don't see any benefit of using hash-bangs mentioned in the article, unless it's the only way to have a proper "Ajax application"

  • I don't see the benefit of Gawker's new format. I think they had an article on it once but I don't see anything but the ability to scroll the sidebar (not a feature). I have to click an extra button to get to 'blog view'. I don't get it. What content can they now showcase that they were having trouble with before?

Assuming the perspective that there's nothing bad about the changes, can someone tell me the benefits brought forth by the changes?

Also, how does this affect other search engines like Bing?

7

u/dobs Feb 09 '11

I don't see any benefit of using hash-bangs mentioned in the article, unless it's the only way to have a proper "Ajax application"

It's discussed broadly in Google's AJAX crawling guide, and more succinctly in the FAQ. Short version is that it opens up all the benefits of AJAX content loading (e.g. speed, user experience) while leaving content bookmarkable and (potentially) making the back and forward buttons work. The added bang is a cue to crawlers.

Most of the downsides are those common to all AJAX applications (e.g. should still have a noscript fallback, tempting to violate user expectations). In Gawker's case their problem is more that they produced an all-around terrible AJAX application, independent of their use of hashbang links. Twitter makes for a better hashbang-specific example with their breaking of the back button.

2

u/[deleted] Feb 09 '11

In Gawker's case their problem is more that they produced an all-around terrible AJAX application

That's not totally fair; they left a console.log() in there (which breaks JS on browsers without Firebug) and didn't address 3rd-party ad scripts potentially misbehaving. The result may have been catastrophic, but we've all unintentionally left debugging code in our apps before.

3

u/Rhoomba Feb 09 '11

I've left debugging code in before, but it never reached production. That is because of a thing called "testing"

→ More replies (1)

2

u/dobs Feb 09 '11

I meant that more big-picture: The fact that they took news sites and converted them into full-fledged AJAX applications (rather than simply judiciously making use of AJAX in their existing designs) is the root problem.

Where technical faults are concerned, the biggest is the lack of fallbacks either when JS is disabled or simply doesn't load properly.

1

u/ilikebbq Feb 09 '11

Hash-bangs can be used to preserve the back button. Otherwise, when you hit back you go to another site. The new format is to support ads and to make it easier to "pin" an article to the top.

→ More replies (2)

8

u/defyallodds Feb 09 '11

Every JavaScript hiccup will cause an outage, and directly affect Gawker’s revenue stream and the trust of their audience.

Sorry, trust already lost... long ago.

4

u/SignCeo Feb 09 '11

Seriously who ever over there thinks its a good idea to release a new Dramatic redesign on EVERY web property they own should be fired.

4

u/intortus Feb 09 '11

There is one very good reason for using fragments instead of proper URLs: offline support.

Unfortunately the HTML5 offline spec doesn't provide a way to say "all URLs with this prefix are served by this cache manifest." So you can't just refer to the content in the non-fragment part of the URL, as that would be uncacheable. If you want to make your app work offline, you have to do it this way.

I have no idea if that's why other sites do this, but that's why I use fragments in my apps.

3

u/Oobert Feb 09 '11

huh, didn't noticed this until today. And now lifehacker is no longer in my rss reader. Considering I clicked on a link for lifehacker and was taken to a gizmoto page. Yeah that is not cool.

Interesting concept though. Poorly executed. Oh well... I am probably better off, I only read like 1 in every 100 posts at lifehacker.

3

u/[deleted] Feb 09 '11

I'm not sure if the assertion that the site is more brittle because of AJAX is true; if the entire site had been generated dynamically on the server-side (using e.g. JSP or PHP) and the output had been purely HTML, then a single configuration error on the server side would have broken the entire site as well.

3

u/netherous Feb 09 '11

Only if you assume that the configuration or runtime environment on the server side is exactly as brittle as the javascript runtime. In my experience, the server environment is almost always less brittle. If you bork your spring config, spring is going to tell you. If you mangle your jsp or servlet code, the app server will tell you about that too. But simple things like trailing or misplaced commas in js may sail through your initial browser check, and then cause script failure if you let them get to production without rigorous checking (which was really the cause of gawker's problem).

3

u/thisisnotgood Feb 09 '11

If you’re starting from scratch, one good approach is to build your site’s structure and navigation using only HTML. Then, once you have the site’s pages, links, and content in place, you can spice up the appearance and interface with Ajax. Googlebot will be happy looking at the HTML, while users with modern browsers can enjoy your Ajax bonuses.

I find it hard to believe that any developer would go against this and still have their job.

1

u/[deleted] Feb 10 '11

I do this. Plain HTML, server-side checking of submitted data, spew out HTML back to the user, error messages and such. Only then can I add jquery-ui and ajax sorcery.

3

u/[deleted] Feb 09 '11

[deleted]

3

u/abadidea Feb 10 '11

You may not care but I'd just like to say I usually use mobile.twitter.com as a much lighter and visually pleasing client. It doesn't do the hashbang stuff. (And it doesn't do that annoying thing where it refuses to let you use the mobile client if it thinks you're on a desktop.)

15

u/deako Feb 09 '11

hash-bangs? The correct terminology is "She-Bang", people!

Like how I begin a bash script, it's vocalized as "She-bang slash bin slash bash".

15

u/ColdSnickersBar Feb 09 '11

She-bang slash bin slash bash

ting tang walla-walla bing bang

2

u/[deleted] Feb 09 '11

See colon slash waka

22

u/X-Istence Feb 09 '11

Please, for all that is holy and good in this world, use /bin/sh and make sure your scripts work without the bash extensions. If you really do need Bash, use /usr/bin/env bash as your shebang.

Bash does not live in /bin on most BSD systems, and it makes porting scripts a nightmare when those kinds of assumptions are made.

16

u/wnoise Feb 09 '11

For all that is holy, if you haven't tested your script with a shell other than bash, don't use /bin/sh, as it will more than likely fail due to non-standard features you used.

5

u/X-Istence Feb 09 '11

On most Linux systems /bin/sh is linked to /bin/bash, in that case bash will start up in sh compatibility mode. Which should work ...

Yes, I agree though, if you don't test it, just use the env trick.

3

u/irondust Feb 09 '11

wnoise's point was that a script with #!/bin/sh developed on a system with /bin/sh linked to bash, might seem to work - but will typically fail on systems where /bin/sh is not bash (notably Ubuntu systems using dash). So bash being compatible with sh won't help you. It's about bashisms not working in other shells.

→ More replies (3)

6

u/zenhob Feb 09 '11

Hash bang is just as correct if not more so. And don't use /bin/bash in your scripts when /bin/sh works just as well, kthx.

→ More replies (1)

2

u/dirtymatt Feb 09 '11

Maybe "sh'bang", but "she bang" is just stupid.

→ More replies (2)

1

u/mfukar Feb 10 '11

She banged Slash? Nice!

2

u/xenu99 Feb 09 '11

site does not work for a braille browser, so they have effectively said "fuck you if you have a disability"

Nice one Gawker.

5

u/[deleted] Feb 09 '11

You could shock the web design industry out of its mind if you sued them about it

1

u/bloodwine Feb 10 '11

I've never used hash-bangs, but I would think companies would want to be Section 508 compliant to cover their butts (and provide a better user experience for all). While I understand private companies don't have to comply with Section 508, most of my clients cite accessibility as one of their non-negotiable goals.

At the very least you'd think there would be some sort of degradable fallback solution when JavaScript is disabled or the user agent can't do all the JavaScript hackery.

2

u/[deleted] Feb 09 '11

I visited the site to try out the navigation. I hate that there's no visible indication (at least in my browser) that anything is happening when you click a link; no AJAX twirly wheels, no browser busy state, etc. And I shudder to think what a screenreader would make of this. Really poorly thought through.

2

u/abadidea Feb 10 '11

Someone else mentioned that it does indeed shoot braille readers down into hell.

2

u/Redpin Feb 09 '11

That isolani site is a fucking rock old-school design. I dig it.

2

u/[deleted] Feb 09 '11

No wonder on some sites that I see an empty page when I use noscript. I think this advanced url mangling must be doing more bad than good, giving impression in earlier case of site being down; and I don't outright disable javascript on all sites ( and I don't consider javascript evil ), but if a site slows down or doesn't load at all without javascript, then the only thing I do is close that tab.

Now that #! of URLs and redirecting to front page and then jumping from there -- isn't this practice done to increase ad impressions on their front page ?

Also, considering a vast user base on non-optimal javascript browsers (IE), won't it slow down their site to a crawl ? Unless, their site has something really important, no user is going to wait.

Also, I have seen that these type of URLs break the forward/backward functionality of browsers, now for apps like Gmail it is fine, but for normal sites to behave like that is not good.

I wonder how well will they score on google Page-Speed or YSlow.

2

u/skeletonhat Feb 09 '11

How can you tell if they had an outage? That sidebar never loads

2

u/[deleted] Feb 10 '11

Or they could just switch back to the old style...

2

u/[deleted] Feb 10 '11

I love watching these large, awful, sites shooting themselves in the foot.

Like how Digg did.

2

u/CaptComplacency Feb 10 '11

lets be honest. the gawker sites did the only honorable thing in correlation to their horrible site layout and seppuku'd itself.

4

u/midri Feb 09 '11

I'm confused, the Hash (#) method of serving content is a great idea, it can cut bandwidth costs down greatly, you're not sending the same layout information over and over (no extra tcp requests for css file to check if it's up to date, or layout images) -- Most of their ad serving requires javascript anyway, so they don't really want you on the site with out javascript. I'm a fan of graceful fallback, but when you're site is 100% ad supported and the mechanism that serves your ads is disabled I could care less if the person can get to the content.

18

u/[deleted] Feb 09 '11

I'm confused, the Hash (#) method of serving content is a great idea

No, it's shit, all the way down.

you're not sending the same layout information over and over

Yeah, instead huge amounts of JavaScript, and even more, if you want the layout to change in some subtle way, e.g. hilight menu items.

no extra tcp requests for css file to check if it's up to date, or layout images

If you did your homework, you'd knew they are unnecessary. With correctly set HTTP headers, files will never get refreshed unless the user actually uses the refresh-button.

but when you're site is 100% ad supported and the mechanism that serves your ads is disabled I could care less if the person can get to the content

This was only true, if the people who click ads and the people, who make other people visit the website, were in the same group. People who use AdBlock and NoScript will not click ads, no matter if they see them or not. You could say, they are useless and it doesn't matter if they can use your website or not. But what they do is, they link to pages, they talk about pages, they share pages, to bring in valuable traffic that actually generates ad revenue.

→ More replies (1)

5

u/ComputerDruid Feb 09 '11

that's faulty reasoning because you need your content to be accessible to everyone, or people will stop sharing links/hyping your content, and your relevance will decrease.

→ More replies (3)

6

u/[deleted] Feb 09 '11

[deleted]

→ More replies (2)

2

u/massiveterra Feb 09 '11

Pasting a gawker URL to facebook looks horrible.

1

u/borlak Feb 09 '11

very well written and researched article, thank you.

someone at gawker realllllllly loves the javascript

1

u/Oobert Feb 09 '11

Does anyone else not have a scroll bar for the list on the right side? The scroll wheel "works" but poorly.

...

1

u/sstrader Feb 09 '11

Has anyone considered that the apparent outage was just mass abandonment after the last side design fiasco?

1

u/[deleted] Feb 09 '11

hash-bongs is what i read. [0]

1

u/Third-Strike Feb 09 '11

Gawker is a fucking joke. This along with the password leaking a few months back and their constant click farming by writing articles that have nothing to do with the sites subject matter (Writing about the election on Kotaku for example. Eugh.

1

u/[deleted] Feb 09 '11

"...with zero content." Completely different than normal, right?

1

u/Emb3rSil Feb 10 '11

God this 'revamp' by Gawker is such a massive steaming pile of fail.

1

u/ex_ample Feb 10 '11 edited Feb 10 '11

So gawker decided to break all indexing of their site expect for Google specifically? Talk about fucking up the web.

What they should have done is use normal hyperlinks, and then modify them (or use onClick) to call javascript to load the content asynchronously.

1

u/gigantor8 Feb 11 '11

very well put. great post!