Wednesday, February 9th, 2011
#!
102

What a Hash! Understanding Gawker's Redesign and Hashbang URLs

Because my goal is for all of you to be semi-fluent in code, because if you are not at least vaguely proficient, the coming decades will leave you behind, I expect you all to read this take on the Gawker redesign, Javascript and hashbang URLs—a situation that the author, web developer Mike Davies, calls an "architectural nightmare." There will be a quiz. (One current outcome of the Gawker Media site redesign? Nothing they publish appears in Google News at this time.) Seriously, it's possible for the layperson to read this without smelling toast, I promise!

102 Comments / Post A Comment

cschack (#1,401)

I actually thought 4 Chan were fucking with them again.

jhonmarshal (#275,625)

@In order to fully comprehend this, I'm going to require Moylan's 10 Rules for Straights Who Want to Understand Code. coffee heaven opinie

scroll_lock (#4,122)

In order to fully comprehend this, I'm going to require Moylan's 10 Rules for Straights Who Want to Understand Code.

saythatscool (#101)

Rule No. 10 – Your site is successful when it resembles a 7th Grade Social Studies textbook on World History.

saythatscool (#101)

Rule No. 9 – If you're not reading Gawker through a tablet, you are an abject failure and we don't want your business.

saythatscool (#101)

Rule No. 8 – If Rupert's doing it, it's clearly the answer.

saythatscool (#101)

Rule No. 7 – You get one story at a time, hoi polloi. No mas, no menos.

scroll_lock (#4,122)

@stc: RE: #8- so this new code requires us all to marry Asian ladies 70 years our junior?

scroll_lock (#4,122)

But wait- If they get rid of abject failures they'll have to disband their current stable of commenters.

saythatscool (#101)

Well done, scrolly.

saythatscool (#101)

Rule No. 6 – Taxi TV is on to something here….

saythatscool (#101)

Rule No. 5 – Only primitive tribesmen holding baubles don't put #! in their URLs.

scroll_lock (#4,122)

Holding my baubles will give you a ! in your URL.

KarenUhOh (#19)

I want to believe, I really do. But the smelling toast part obviously comes after the pillar of salt.

IBentMyWookie (#133)

a propos of nothing: I like reading the word "hashbang" in Cher's voice.

scroll_lock (#4,122)

*Singing* it in Cher's voice like it's "Halfbreed".

Lockheed Ventura (#5,536)

Gawker is clearly the first "post-Google" blog. Get with it.

Multiphasic (#411)

Gawker is also a "post-Gawker" blog, so there's that as well.

mrmcd (#9,309)

Translation for normals: Gawker's redesign did a bunch of trendy post-twitter javascript bullshit that not only pisses off web standards nerds, but also makes their website more likely to break and harder for search engines to index.

Everyone point and laugh at Gawkers terrible tech. Good children.

hockeymom (#143)

Am I understanding correctly…basically they added "!" to all their URLs and screwed everything up?

HereKitty (#2,713)

Thank you! That was my takeaway also. (Then I smelled something that might be toast and might be the cast-iron skillet I'm seasoning, and I got a little distracted.)

mrmcd (#9,309)

Sorta. The #! is a result of how URLs work and some suggested best practices guidelines Google came up with a while back once the use of ajaxy stuff everywhere started making it impossible to index anything. The main complaint is that before URLs would point to actual articles, now they just point to a single javascript deathstar that then renders the article based on whatever is after the #! part of the URL.

The problem with this is that if your javascript deathstar is ever less than fully operational (sorry), then you're entire site breaks. On top of that, anything that isn't following Google's weird way of resolving #! URLs won't be able to cache or index any of their content, which makes it more vulnerable to traffic spikes and hurts search engine rankings. So despite all the time and money invested in this big redesign, there's significant evidence that their tech is an absolute train wreck and most of the effort was put into "make it purty like ipad" rather than something that holds up well against the myriad ways people access and index content online.

Not that is means Gawker will fail. Having robust and clean tech is always a help, but most software is terrible to one degree or another, and having something that falls apart regularly isn't automatically a deal breaker. See also: twitter, tumblr, facebook.

scroll_lock (#4,122)

@mrmcd: Not afraid to be Aspergery!

mrmcd (#9,309)

@scroll_lock: Whatever man. I'm only here because it's convenient to get my celebrity gossip and 1,500 word critiques of W3C non-compliance all in one place.

jolie (#16)

@mrmcd: scroll_lock's a girl. (!!)(Erm, excuse me: #!)

mrmcd (#9,309)

@jolie: Sorry, my apologies. Everyone's genitals look kind of blurry on this low rent non-ipad optimized website.

scroll_lock (#4,122)

@mrmcd: You and me both, dude.

@jolie: My doctor said the operation was a complete success!

jhonmarshal (#275,625)

@HereKitty Sorta. The #! is a result of how URLs work and some suggested best practices guidelines Google came up with a while back once the use of ajaxy stuff everywhere started making it impossible to index anything. The main complaint is that before URLs would point to actual articles, now they just point to a single kerium

Connor (#4,136)

Dr. Penfield, I smell burnt toast!

Lol, I remember when all the nerds were worried about proprietary XHTML extensions from Microsoft. This thing's just sitting right there, taunting them with the phrase "do no evil."

Oh the code stuff was okay. Took "…and the trust of their audience" to set off the smoke alarms.

Leon (#6,596)

Hashbang sounds like something fun to do with a brazilian lady at a youth hostel in Turkey.

WindowSeat (#180)

Only way I can read G****r now is on my iPhone. Have you seen what the new design does on a netbook? Urgh.

deepomega (#1,720)

Thanks, Choire. I'm not up on best practices for web dev any more, and it's nice to dip my face into the limpid pool of Ajax for a moment, before running off screaming in the direction of graphic design and animation.

jolie (#16)

It appears that all my (admittedly limited) coding skillz were kidnapped sometime in 2010. The ransom note was probably sent to my AOL account.

boyofdestiny (#1,243)

I know how to italicize things in comments.

BadUncle (#153)

My coding skills atrophied in the mid-90s, when design and development became separate specializations. Thank god. Because I can't tell a hashbang from a Wutang.

jolie (#16)

@bod: do you know that The Awl doesn't allow for bolding and italics all at the same time? I can't recall which one cancels the other out but I'll let you know as soon as this comment goes up

jolie (#16)

@self: shit shit shit way to make a damn fool of yourself, you asshole.

deepomega (#1,720)

What about underlines guys what about italic underlines for when I feel emphatically whispery

deepomega (#1,720)

@me: NOOOOOOOO

boyofdestiny (#1,243)

@jolie and deep: Showing off.

jolie (#16)

just playing around with something

jolie (#16)

OKAY HOW THE FUCK CAN THIS SITE ALLOW STRIKETHROUGHS BUT NOT UNDERLINING ALKSHFLSKFHLSKFHLSFKH HOW?????

petejayhawk (#1,249)

I want blinky text abilities.

Back in the olden days, I once accidentally broke Deadspin entirely by going apeshit with HTML tags in the comments.

jolie (#16)

@pete: So basically what you're saying is that you're responsible for the current redesign?

petejayhawk (#1,249)

NOOOOO. That was, like, 4 redesigns or so ago. I lose track of all Gawker's Hungarian economic stimulus programs.

DoctorDisaster (#1,970)

Guys, shitty <u> underlining has been replaced by CSS borders.

SeanP (#4,058)

So, can we do blockquote?

It would appear not.

Nerdery aside, the redesign certainly hides their content nicely. Perhaps that was the goal?

It hides most of the comments too and won't let me reply to the ones I can see.

scroll_lock (#4,122)

@Clarence: This comment makes me want to cook you a fourth-date Porto Rikkin steak.

BadUncle (#153)

You know, David Carson specifically art directed Ray Gun to inhibit actual reading of the magazine's terrible articles.

LondonLee (#922)

I hate Carson's work. That interview with Bryan Ferry that he set all in Zapf Dingbats so you couldn't read it all because the great David Carson decided in his wisdom that it wasn't that interesting particularly pissed me off. The punk isn't fit to light one of Ferry's cigarettes.

BadUncle (#153)

Yeah, his ethos is pretty much antithetical to mine. And yet he's rich and famous, and I am not.

jhonmarshal (#275,625)

@BadUncle IA MENGENAKAN blangkon, dan celana tiga perempat yang tidak dimaksudkan sebagai modis, melainkan menuruti busana tradisional seperti kostum ketoprak humor. Benar juga ia suka melucu, tapi ia bukan sekadar pelawak. Ia muncul tiap hari di Lembergar.farby palette blond

!'m in ur URLz screwing up ur page viewz.

MikeBarthel (#1,884)

I am interested in this and mostly understood it but am still unclear on a) what Ajax is, and b) what Java is doing on these websites that HTML can't.

DoctorDisaster (#1,970)

a) Ajax changes the content of a page on the fly. Normally you have to load a new page to view new content, which means it checks all the styles and design and whatnot. Ajax just grabs the content itself and plugs it into a frame that you already loaded.

b) I'm like the only person here who never read Gawker, so I can't speak to their specific uses for Ajax. Twitter and Gmail use Ajax to put a TON of content on a single page without making you load it all at once. Judging by the way most people here talk about Gawker, I assume they use Ajax to feed Nick Denton puppies and peasant children.

SeanP (#4,058)

What DoctorDisaster said. Also: it's JavaScript, not Java (they sound similar but are different in many important ways). HTML is a markup language, whereas Javascript is a scripting language. This is sort of an oversimplification, but HTML lays out where the various elements are going to go on the page, Javascript makes them do things, and a third technology – CSS (Cascading Style Sheets) – indicates how the various elements are supposed to look. Ajax is a particular way of using these big three technologies to produce web sites that have a lot of the functionality of desktop applications.

Clip Arthur (#2,024)

To try to explain on another angle: If you have ever gone to a website like the Huffington Post or the new Gawker, load a page and as you are reading—and without you doing anything—a new headline pops-up that is JavaScript making an AJAX (Asynchronous JavaScript And XML) call behind the scenes to fetch new content. Basically when you load the page a JavaScript program is loaded into your browser that says something like "Every 60 seconds, I will contact this URL and get XML content to update the HTML with." When 60 seconds hit, the call is made, an AJAX responder sends the data back to the JavaScript program in your browser which then says "Hey, I have new stuff! I will update this part of the page."

And specific to the Gawker design. Wow! It is past buggy. I code for a living and do Object Oriente JavaScript and wow… What a piece of crap. They paid for that? Because that stuff is really "Alpha" quality software. And they proudly launch it as if it's the greatest thing since sliced bread? Past delusional. That site is hubris in real-world form.

Keep it simple, stupid. Stupid indeed.

Ronit (#1,557)

That's actually kind of amazing. Thanks Choire

popljonilev (#240,654)

I have been studying this topic for a long time. You have provided great information in your post and some things I have not seen in other content I have read by others.
artisan grocery store

chajopechan (#240,854)

I am currently teaching a class and part of the curriculum involves this subject matter. Do you have any other posts I can look at regarding this?
worthingtonmillwork.com

yranalbhrs (#240,874)

I enjoyed reading your article and found it to be informative and to the point. Thank you for not rambling on and on just to fill the page.
ask-accountingsoftware.com

ortmhogay (#240,972)

I am interested in this topic and would like to find out some more information as my friend need information on this topic. Do you have any other articles about this?
foreclosure attorneys

eliphntas (#241,039)

Your approach to this topic is unique and informative. I am writing an article for our school paper and this post has helped me a lot. Cheers
portfolio risk analysis software

hmsepndni (#241,235)

I am preparing my assignment paper and gathering information on this topic. Your post is one of the better that I have read. Thank you for putting this information into one place.
kdr creative media

daywelfuns (#241,274)

I am doing a report on this subject. Your article is full of really useful information. I will make sure to come back to check out your posts for my next report. Cheers
houston logo design

vryanonims (#241,276)

This was an excellent article. It has some valuable content on this topic. Thank you for compiling it into an easy to read and well written post.
chiropractor watkinsville ga

misiekpl (#242,183)

I'm like the only person here who never read Gawker, so I can't speak to their specific uses for Ajax. Twitter and Gmail use Ajax to put a TON of content on a single page without making you load it all at once. Judging by the way most people here talk about Gawker, I assume they use Ajax to feed Nick Denton puppies and peasant children. e-papierosy

wicki (#243,657)

tutaj
That interview with Bryan Ferry that he set all in Zapf Dingbats so you couldn't read it all because the great David Carson decided in his wisdom that it wasn't that interesting particularly pissed me off.

khuramsony (#243,948)

A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. I was exactly searching for. Thanks for such post and please keep it up. Great work.
Terry, Simon & Kelly, PLLC

I would like to say that this blog really convinced me to do it ! Thanks, very good. We are really happy just for this post in this website.

acompanhantes de são paulo

bill.marks234 (#269,404)

Twitter and Gmail use Ajax to put a TON of content on a single page without making you load it all at once. J raspberry ketone

03212616077 (#272,775)

Is there any way to render only submenus of relative parent items of main menu in another region, using php code somewhere in theme templates, without using block or modules?rebelmouse.com/bestantiagingserum/

bill.marks234 (#269,404)

I would like to say that this blog really convinced me to do it ! Thanks, very gsdadood. We are really happy just for this post in this website.a amway

dgo1 (#254,892)

great site, nice information, should be more sites like this, keep so !

Filmes Online

dgo1 (#254,892)

great site, nice information, should be more sites like this, keep so !

Filmes Online Grátis

anmanblack (#275,833)

great site, nice information, should be more sites like this, keep so ! Ranjish

jhonmarshal (#275,625)

There has been a mixed reaction from the electorate to the MDC-T’s withdrawal of its electoral challenge from the constitutional court. opinie coffee heaven

jagoseo1 (#275,975)

I will do Penguin Safe 4 PR7, 7 PR6, 18PR5, 30PR4, dofollow Backlinks actual pr links to Boost seo.Order 4 times togther and get one time free.

jagoseo1 (#275,975)

christian h. girlfriend activation system pdf reviews gives you high definition access to a closed-door seminar (videos, audio, and written transcripts) which reveals a step-by-step system for meeting, attracting, and dating the woman you want and ultimately turning her into your loyal, committed girlfriend.

03212616077 (#272,775)

studying this topic for a long time. You have provided great information in your post and some things I have not seen in other content I have read by others.how can i make hemorrhoids go away

jagoseo1 (#275,975)

Learning how to talk dirty to a guy is a surprisingly hot topic and there just isn't a lot of good stuff out there if you want to learn how to do it without feeling stupid, embarrassed, or totally awkward in the process.Click this to check >> rebelmouse.com languageofdesirereviews

alexmen (#277,503)

I definitely enjoying every little bit of it. It is a great website and nice share. I want to thank you. Good job! You guys do a great blog, and have some great contents. Keep up the good work. View this site

jagoseo1 (#275,975)

Buy facebook likes real and safe on fiverr.com>> fiverr Fan Pages

jagoseo1 (#275,975)

Buy facebook likes real and safe on fiverr.com>> fiverr Fan Pages

400570828@twitter (#247,613)

very interesting information, thanks!

Filmes Online

jagoseo1 (#275,975)

The 21dayfix is a weight loss program that relies on simplicity at its core to attain the fastest results possible.

jagoseo1 (#275,975)

The 21dayfix is a weight loss program that relies on simplicity at its core to attain the fastest results possible.

jagoseo1 (#275,975)

If you are one of those girls that want to start their modeling career then it is advisable that make your portfolio so that you can present yourself as an experienced model. besocial-blog.weebly.com

jagoseo1 (#275,975)

If you want to have better relationships with men and have the desire to make men want you more, then the Drama Method is for you. rebelmouse.com

jagoseo1 (#275,975)

I will promote website or anything to 6000000 facebook promotion and 2500 twitter followers

sergiobarata (#281,055)

Thanks combination of suitable and useful information and well-written sentences that will certainly entice your sense.

Sitio para festas

anmanblack (#275,833)

relationships with men and have the desire to make men want you more, then the Drama Method is for you …. best face serum

jhonmarshal (#275,625)

Translation for normals: Gawker's redesign did a bunch of trendy post-twitter javascript bullshit that not only pisses off web standards nerds, but also makes their website more likely to break and harder for search engines to index. vitamin c serum

anmanblack (#275,833)

Translation for normals: Gawker's redesign did a bunch of trendy post-twitter javascript bullshit that not only pisses Alexandra Stewart

gamurcio (#282,463)

valuable and excellent design, as share good stuff with good ideas and concepts.

Sitio eventos

If you're not reading Gawker through a tablet, you are an abject failure and we don't want your business. http://www.spring.me

Post a Comment