Gawker Learns the Hard Way Why ‘Hash-Bang’ URLs are Evil

URLs are an often overlooked part of web design, yet in many ways they may be the most important aspect of your website as Gawker’s family of sites recently discovered.
Gawker recently launched a multi-site redesign that, no sooner than being unleashed on the web, failed spectacularly, leading visitors to blank pages. The culprit was a […]

URLs are an often overlooked part of web design, yet in many ways they may be the most important aspect of your website as Gawker’s family of sites recently discovered.

Gawker recently launched a multi-site redesign that, no sooner than being unleashed on the web, failed spectacularly, leading visitors to blank pages. The culprit was a misbehaving piece of JavaScript, but when a single line of JavaScript causes your entire suite of sites to fail you no longer have websites, you have, well, nothing.

The problem with Gawker’s redesign is that it uses JavaScript to load everything. That means that, not only is there no chance for the site to degrade gracefully in browsers that don’t have JavaScript enabled, the smallest JavaScript typo can crash the entire website.

Developer Mike Davies has a nice breakdown of why Gawker’s JavaScript-based hash-bang URLs are a bad idea. Originally designed to allow Google’s spider to crawl Ajax content, hash-bang URLs have been popping up all over the web — Twitter and Facebook use them as well — but that doesn’t make them a good idea.

As Davies writes:

the #! URL syntax was especially geared for sites that got the fundamental web development best practices horribly wrong, and gave them a lifeline to getting their content seen by Googlebot.

And today, this emergency rescue package seems to be regarded as the One True Way of web development by engineers from Facebook, Twitter, and now Lifehacker.

The problem in Gawker’s case is that the URLs no longer point to actual content, everything depends on JavaScript parsing the hash-bang to retrieve the content. As Davies writes, “if content cannot be retrieved from a server given its URL, then that site is broken.” Think of hash-bang URLs as a worst practice of URL design.

If you’d prefer not to hang your site’s fate on the most brittle part of the open web stack — JavaScript — make sure you have a publishing system that allows you to design your own URLs and then follow the established best practices for creating good URLs.

If you’ve got Ajax content that would otherwise be missed by Google, then by all means use the hash-bang syntax, just keep in mind that the hash-bang is basically a hack, not the cornerstone of a well designed URL.

Eat at URLs photo by Scott Schiller/Flickr/CC.

See Also:

Test Your Websites With ‘OperaWatir’

You can never run too many tests, especially when it comes to making sure your website is working properly in every web browser. But with a variety of browsers to test in, making sure everything is running smoothly takes time. That’s where Watir (pronounced “water”) comes in.
Watir is a set of open source Ruby libraries […]

You can never run too many tests, especially when it comes to making sure your website is working properly in every web browser. But with a variety of browsers to test in, making sure everything is running smoothly takes time. That’s where Watir (pronounced “water”) comes in.

Watir is a set of open source Ruby libraries for automating web browsers to crawl and test your site. Watir essentially “drives” a web browser the same way your visitors would — clicking links, filling in forms, pressing buttons and so on. Because everything is automated you can test your site thoroughly and quickly.

Opera’s effort, dubbed OperaWatir, is the latest addition to the Watir test suite and joins the tools already available for Internet Explorer, Firefox and WebKit-based browsers. If you’re already using Watir for writing test suites (and you should be if you’re not) OperaWatir means that you can now test across all major browsers.

If you’ve never used Watir before, the Opera Dev Center has a nice tutorial on writing Watir tests tailored to your site. Opera’s tutorial walks you through the Ruby code necessary to automate common actions like clicking buttons, issuing keyboard commands and how to use the sleep command to handle Ajax refreshes.

The second part of Opera’s announcement is OperaDriver, the backend of OperaWatir that communicates with the Opera browser. While OperaWatir is written in Ruby, OperaDriver is written in Java, and it allows developers to create automated tests using the Java-based JUnit testing framework. If you’re not a fan of Ruby, OperaDriver can do the same things using Java.

See Also:

HTML5 Gains Logo, Loses Meaning

What’s that thing flailing awkwardly over the mouth of a mechanical shark? Why that’s HTML5 in its dashing new logo. Yes, the W3C, the standards body that oversees the development of the HTML5 spec, has blessed HTML5 with a snazzy new logo.
Naturally there are badges you can add to your site and t-shirts and […]

The W3C’s new HTML5 logo

What’s that thing flailing awkwardly over the mouth of a mechanical shark? Why that’s HTML5 in its dashing new logo. Yes, the W3C, the standards body that oversees the development of the HTML5 spec, has blessed HTML5 with a snazzy new logo.

Naturally there are badges you can add to your site and t-shirts and stickers are already on sale (a portion of the proceeds go to the development of the W3C’s HTML5 Test Suite). The only thing left to do is figure out what “HTML5″ actually means, and that’s where the W3C has has thrown “HTML5″ over the shark.

HTML5 already enjoys more buzz that a web developer left alone in the back of a Mountain Dew truck (it even has it’s own posse), the only problem is that the buzz makers conflate just about every emerging web technology under the HTML5 umbrella. Purists have long decried headlines proclaiming the glory of HTML5 above an article about JavaScript and CSS 3, but now the one group that ought to know best appears to throwing in the towel and embracing the HTML5 hype.

While the new HTML5 logo looks good, the FAQ that accompanies it is troubling. According to the W3C, the logo is “a general-purpose visual identity for a broad set of open web technologies, including HTML5, CSS, SVG, WOFF, and others.”

It doesn’t really matter if the New York Times thinks CSS 3 or SVG are HTML5, but we’d like to think that at least the organization in charge of describing what is, and is not, HTML5 would make some effort to distinguish between tools. Lumping everything together is as silly as a carpenter referring to every tool in their toolkit as “a hammer.”

As web developer Jeremy Keith quips, “the term HTML5 has, with the support of the W3C, been pushed into the linguistic sewer of buzzwordland.” We had high hopes that Bruce Lawson’s acronym NEWT — New Exciting Web Technologies — would catch on and save HTML5 from buzzwordland, but alas, that appears unlikely.

With the blessing of those who oversee it, HTML5 now apparently means just about anything new and cool on the web. The new HTML5 logo is pretty sharp and the t-shirts look nice, but if we can’t have precise terms and linguistic clarity could we at least get a unitard with belt and cape?

See Also:

Speed Up Your Mobile Site With the ‘Mobile Perf’ Bookmarklet

Speed is the most important element of your website. The best designed, most informative site in the world is useless if it doesn’t load fast enough for people to stick around. Nowhere is this more true than on mobile websites.
Testing mobile websites is something of a headache — there is no Firebug for mobile browsers, […]

Speed is the most important element of your website. The best designed, most informative site in the world is useless if it doesn’t load fast enough for people to stick around. Nowhere is this more true than on mobile websites.

Testing mobile websites is something of a headache — there is no Firebug for mobile browsers, which means no YSlow or other profiling tools. True, you can load the site in desktop browser and profile it that way, but sometimes what works on the desktop isn’t necessarily working the same way in a mobile browser.

That’s why Google developer Steve Souders’ created the Mobile Perf bookmarklet, a handy javascript bookmarklet that you can use to test sites on your mobile devices. The bookmarklet is really just a set of links to other bookmarklets, but combining them all in one place makes life a bit easier.

The Mobile Perf bookmarklet contains links to Firebug Lite, the awesome DOM Monster, CSSess, Zoompf and Souders’ own SpriteMe and Page Resources. If you’ve been looking for an easy way to test website performance on the small screen, grab a copy of the Mobile Perf bookmarklet.

See Also:

Goo.gl URL Shortener Coming Soon to a Twitter Client Near You

Google’s URL shortening service, goo.gl, has added an API, giving third-party developers a way to integrate the service into their own apps. The new API means Twitter clients and other apps that use short URLs can hook into goo.gl just like they do bit.ly and dozens of other shorteners.
The goo.gl API is, like most Google […]

Google’s URL shortening service, goo.gl, has added an API, giving third-party developers a way to integrate the service into their own apps. The new API means Twitter clients and other apps that use short URLs can hook into goo.gl just like they do bit.ly and dozens of other shorteners.

The goo.gl API is, like most Google APIs, a RESTful JSON-based API. There are only three real methods — insert, list and get — but that’s enough info for apps to shorten and expand URLs, as well as fetch history and analytics for shortened links.

The goo.gl shortener is a late entry into an already crowded field, but of course the Google name carries a good bit of weight so you can expect most Twitter clients to add goo.gl to their list of URL shortening options. The goo.gl shortener also has a couple of nice extras like QR codes and, according to stat tracking site Pingdom, it’s both the fastest and most reliable URL shortener out there.

If you’d like to play with the new service, the API documentation and developer guide can be found on the Google Labs site. And yes, the API is a labs project and may be subject to change before it graduates into a real web service.

See Also: