News roundup: isotope, hash-bangs, node.js and V8, IE9 to support Geolocation

isotope

isotope is a jQuery plugin to create some pretty crazy dynamic layouts. If you resize any of the pages in the demo, you can view the page elements not only rearrange, but do so with smooth transition animations.

Isotope has various filtering and sorting functions for rearranging all the components on the page, including the ability to sort by type or even the width of an element. This is a bit hard to give justice to in words, so be sure to check out the demo.

Hash-bangs (!#) and RESTful, crawlable webpages

On the subject of webpages entirely reliant on JavaScript, last month I got a taste of what it was like when a JavaScript-dependent page such as Twitter broke, leaving me with an almost blank page. I suspect my problem wasn’t widespread, but it made an impression on me. Suddenly an unexpected JavaScript error made the page ridiculously brittle, leaving me with nothing more than the page header, the only content that was delivered from the server in a good old-fashioned and time-tested way.

Earlier this week a JavaScript error on Gawker’s new JavaScript-based pages causing multiple sites on their network to fail completely. It was the same problem I had earlier with Twitter, except this outage wasn’t local to just my machine. So what’s with this? Is this what we have to look forward to in websites of the future?

In essence, what these new JavaScript-based sites are doing is changing a multiple-page RESTful model to a single-page non-RESTful model. New pages are loaded via JavaScript, and page state is preserved by changing the URL hash tag, which is well-supported in many browsers. In the original RESTful model of the web, two pages might’ve looked like this:

http://example.com/page1.html
http://example.com/page2.html

Even if the pages were controlled by query strings, they could still be differentiated on the server side, for instance:

http://example.com/?foo=page1
http://example.com/?foo=page2

Appropriate page content would then be served up depending on these parameters. However, now in the age of the JavaScript-controlled page, the state is only preserved by the hash tag:

http://example.com/#page1
http://example.com/#page2

The trouble is, when this request gets sent to the server, the hash tag is stripped and the pages are indistinguishable. This is why we only see the server sending back the generic header content for the page. And when the JavaScript breaks, the header is the end of that page, full stop.

This also presents an issue with indexing by search engines, which prompted Google to introduce a hashbang (#!) scheme which makes the page indexable.

Some progress is being made with preserving RESTful URLs in JavaScript applications with pushState, but it’ll be some time before this is widely supported. For now it looks like we’re stuck with the hash tag.

There’s been some good discussion on this topic by Mike Davies, Time Bray, and a host of others.

On the coupling of node.js and V8

Bruno Fernandez-Ruiz (Yahoo! Fellow, VP and Platform Architect) has raised some concerns about the tight coupling of node.js to Google’s V8 engine. He raises the concern that V8 was primarily designed for the browser, and while the engine has been made to be fault-tolerant in a browser, it hasn’t necessarily been made the same way for code running on a server, where faults are more catastrophic and affect many more users. He also brings up a concern about Google’s responsiveness: “Sometimes Google is responsive, but sometimes it might not [sic].”

Joyent has written a response:

Overall, it’s a valid concern, partially enforced by the fact that we’ve left the github page titled “Evented I/O for V8 javascript”. We have debated this internally and have intended to correct it. It is also currently true: Node.js is only implemented on V8 but that’s only because we’re going to focus on making node.js awesome first.

Bruno has a followup reply here. It’s also worth checking out the discussion on Hacker News.

Internet Explorer 9 release candidate introduces Geolocation, WebM, CSS3 2D transforms

Microsoft is inching closer to a release of IE9 by making available a release candidate for download.

Most notably, IE9 now supports geolocation, perhaps in response to the volume of requests prompted by folks such as Tantek Çelik.

ZDNet has a good overview of what’s new in IE9.

Upcoming Events

JS Boot Camp (February 10-11, 2011 in Reston, Virginia, US)
jsBBQ (February 12, 2011 in Oakland, CA, US)
High-Performance Mobile (SF Web Performance Group) (February 16, 2011 in San Francisco, CA) – a talk given by yours truly
Confoo.CA: Web Techno Conference (March 9-11, 2011 in Montreal, Canada)
MobileCampRDU (March 12, 2011 in Durham, North Carolina)
JS in SA (April 2, 2011 in South Africa)
codeconf (April 9-10 in San Francisco, US)
JSConf 2011 (May 2-3, 2011 in Portland, Oregon, US)
NodeConf 2011 (May 5, 2011 in Portland, Oregon, US)
jsday (May 12-14, 2011 in Italy)
Mobilism (May 12-13, 2011 in Amsterdam)
TXJS (June 5, 2011 in Texas)

Releases

node.js 0.4
fxCanvas 0.2 (brings HTML5 Canvas to IE via Flash)
Ace 0.1.5 – now comes with “Coffeescript Mode”
EaselJS 0.3
jsgamebench 0.2

Tidbits

Blaze.io is a new tool for testing mobile performance. It’s a service that allows people to schedule a page to be tested by actual devices in a lab. A report is generated with an overall assessment of website performance as well as a waterfall chart of the requested resources. Steve Souders was all over this one as soon as it was released.

Video: Paul Irish on HTML5 Boilerplate is required viewing for anyone doing anything on the frontend. Even if you don’t want to use HTML5 Boilerplate, there’s a lot of useful tidbits and best practices here to warrant watching.

jsfx is a JavaScript-based sound effects library using the magic of the audio element

Tips on Learning JavaScript – Andy Walpole has some nice tips for getting started with JavaScript. He advocates first getting comfortable with HTML and CSS, and not immediately jumping in bed with a framework such as jQuery, but instead learning plain vanilla JavaScript and the DOM first.

JavaScript Garden is quite a nice elegant collection of common JavaScript “gotchas”, with some nice explanations. Definitely recommended.

How to Write Maintainable OO JavaScript Code – Ara Pehlivanian gives an introduction to writing OO JavaScript.

LimeJS is (another!) new game framework for both the desktop and iOS devices.

On UA sniffing, browser detection, and Alex’s post – Nicholas Zakas weighs in on the recent discussion on the performance cost of feature detection.

Microsoft has updated their indexedDB prototype/demo, bringing it up to date with the most recent revisions to the W3C spec.

Video: jQuery 1.5 – The Promise Lands (yayQuery Episode 21)

combohandler is Ryan Grove’s Yahoo! CDN-style combo handler written for Node.js

Script execution order post-mortem – Hixie explains the details about a decision in the Dynamic Script Execution Order spec to allow dynamically-created scripts to load in a non-blocking (asynchronous) way by default, unless otherwise requested (by setting script.async = false)

Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and more – a JavaScript shim for making media queries work where they wouldn’t otherwise.

Publishing Events In YUI3 – David Martin goes into details about creating custom events with YUI3

Treesaver is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS

minimal.js is a minimal (as advertised) HTML+JSON templating engine. The syntax is minimal, logical, and quite nice.

(Japanese) Yahoo! Japan Maps SDK released for iPhone & Android, with 22 different map UI styles.

command-line jQuery for node.js

fabric.js seems to be quite a bit faster than Raphael in these two tests: test1 and test2

The W3C Web Performance Interest Group has been formed this week.

The proposals for jsconf 2011 talks are now available for viewing.

HTML5 Games 0.2: Integers are Your Friends discusses some interesting new tips for performance, particularly on hardware-accelerated iOS devices

The webOS SDK 3.0 preview has been released to Early Access program developers (which you can apparently get on by emailing pdc@palm.com), which includes the new Enyo, a JavaScript framework which enables native hardware acceleration and faster load times.

PlayBook, BlackBerry’s in-development tablet, looks to have a browser that supports the Accelerometer, Flash, Web Sockets, and Web Workers.

zip is an implementation of unzip in JavaScript for node.js.

sourcekit is a Textmate-like editor inside Chrome (install it here).

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

2 Comments

  1. Seems like you missed John-David Dalton’s screencast series in reponse to the UA sniffing / feature detection debate: http://allyoucanleet.com/2011/02/05/the-cost-of-feature-testing/

  2. Ah, never mind, you’ve edited the previous post and added it in there.

Leave a Reply




© webdevpublishing 2011