Twitter Declares Everything Old New Again

Scott Gilbertson — Wed, 30 May 2012 14:00:53 +0000

Image: Twitter

Twitter is optimizing its web interface for speed, ditching several of the supposedly cutting-edge changes it made with the “new Twitter” revamp from 2010. The new Twitter redesign was controversial for its use of hashbang (#!) URLs and because it used JavaScript to build the entire page, content and all.

Now Twitter is returning to tried-and-true server-side methods of building webpages. It turns out using JavaScript to do everything is not such a good idea, at least not if you want your website to be fast.

Twitter says that returning to traditional means of serving webpages “dropped the time to first Tweet to one-fifth of what it was.”

Even better news for those concerned about the future of the web and the longevity of URLs is the news that Twitter is getting rid of its hashbang URLs. The hashbang syntax was originally designed to allow Google’s spiders to crawl Ajax content — content loaded dynamically — but sometime in 2010 hashbang URLs started popping up all over the web, including at Twitter.

The hashbang syntax works well if you use it as it was designed, to surface Ajax content that would otherwise be missed by Google. But it was always an awkward hack, not a cornerstone on which to build a well-designed URL, and extending it beyond its intended use often proves disastrous (as sites like Gawker can attest).

Twitter will begin phasing out hashbang URLs in the coming weeks, starting with its tweet permalink URLs.

Much of the write-up about the new speed enhancements on Twitter’s engineering blog reads like a web development best-practices tutorial from 2001, but there are some new ideas lurking toward the end, where Twitter Engineering Manager Dan Webb outlines Twitter’s new module-based JavaScript loading methods, built around CommonJS.

“We opted to arrange all our code as CommonJS modules,” writes Webb, “This means that each piece of our code explicitly declares what it needs to execute.” In other words, each piece of code is aware of what other pieces it needs to work. That means Twitter can tune how it bundles its code, “lazily load parts of it, download pieces in parallel, separate it into any number of files, and more — all without the author of the code having to know or care about this.”

Webb doesn’t mention Twitter’s front-end toolkit BootStrap in his post, but rolling together CommonJS and Twitter’s own dependency builder — which Webb says is similar to the RequireJS optimizer — sounds like a great addition for BootStrap 3.0.

Take a Tour of the New Twitter

Michael Calore — Thu, 16 Sep 2010 18:58:06 +0000

Twitter launched a full redesign to its website Tuesday, showing off changes that lead Twitter.com away from its humble stream-of-updates past and towards a more interactive, app-like future.

The new Twitter went live to a select few users Tuesday afternoon and began rolling out to everyone else Wednesday. If you don’t see it yet, you will soon.

The website now has a new two-panel view. Your familiar stream of tweets runs down the left side. On the right side is a dashboard of sorts, where you can see recent activity from your followers and the people you follow, trending topics, and the list of people you might want to follow.

Click on a tweet and it expands in the right panel. There, you’ll see rich media like photos and videos, associated conversations, recent tweets by the author, and mini bios for any other people mentioned in the tweet.

Overall, the update plays on features found in popular Twitter client apps like Tweetdeck and Seesmic, and it looks quite a bit like the official Twitter app for the iPad. Somewhat like those apps, you can dive right into videos or photos without leaving the Twitter website, whereas the old site required you to leave the site or launch links in new browser tabs.

Scrolling in the timeline on the left panel is infinite. New tweets keep loading at the bottom as you scroll, so you can just keep cruising backwards into time as far as you’d like.

When you expand a tweet by clicking on it, if there’s a video or a photo from a supported site (YouTube, Vimeo, Flickr and TwitPic were all included in Tuesday’s launch) it shows up nice and big. Videos play right there, and Flickr photos are accompanied by thumbnails to the rest of the photoset, if there is one. You can choose to see embedded photos and videos from only from people you’re following, or from everyone.

Images, videos, maps and retweets are all carried over to the new individual tweet pages. “People can much more quickly grok the context of a tweet,” Twitter CEO Evan Williams said at the launch event Tuesday.

To send a new tweet, you can either use the old box, still in its familiar location, if you’re on your home page. Or, if you’re elsewhere in the system, you can click on the little icon up next to your user profile picture to launch a floating window.

Something else very appy — Twitter has incorporated keyboard shortcuts.

Keyboard shortcuts are definitely a geeky power user feature, but ask anyone who uses them in Google Reader or Gmail and they’ll tell you they can’t live without them. In fact, the keyboard shortcuts are very close to those apps.

@mentions are now accessible from a tab at the top of your timeline:

As are retweets:

There’s a new search box at the top of the page. Run searches and you can save them (click the “Save this search” button up top) to keep track of new results. Saved searches will then live in a tab next to Retweets at the top of your timeline.

Lists are handy — I keep two or three that I browse every morning to catch up on tech news. Twitter has moved your lists into the last tab at the top of the timeline.

The redesign uses some cutting-edge web technology, including LABjs to speed things up and jQuery for the animated, Ajaxy twiddly bits. Also: the awesome Modernizr library, which checks your browser’s capability of handling different HTML5 doo-dads and adjusts the website’s code accordingly.

These changes show Twitter extending a big juicy lollipop to users — by providing people with a more rich experience directly inside the browser, there’s less of a reason to go download an app. This is bound to cheese off a good number of developers who have much blood and sweat (and cash) invested in their own Twitter client apps and web experiences. However, there’s still a place for those apps — Twitter has built this new interface on top of its own API, which means that any capable developer out there can do something very close to this design, or improve on it, on their own.

One big caveat: Twitter has the power to bypass its API rate limit of 20,000 requests per hour that it enforces for third-party applications. Only Twitter and selected partners can pull more tweets than that. These rates will change as Twitter grows, especially now that the service has got over 90 million tweets per day to play with.

Also, it’s doubtful this update will coax users away from their favorite apps.

Many people who use the website to tweet — Williams says 78 percent of active users have used Twitter.com in the last 30 days — will likely adapt to this update rather than reject it and run to a different experience, like a Tweetdeck or Seesmic. It exposes much more information than they’re used to, but by and large, the changes are useful and add more contextual value than visual clutter.

So for people who have only ever used the old Twitter.com, or even those (like me) who use apps occasionally but heavily favor the website, this is a radical change, but a positive one.

Those endeared to their third-party apps will probably look at the new Twitter.com and say, “Huh, neat, looks more like my favorite app than the old site.” Then they’ll go back to their app and tweet about it.

What do you think of the redesign? Tell us in the comments.

See Also:

Webmonkey » NewTwitter

Twitter Declares Everything Old New Again

Take a Tour of the New Twitter