Play the podcast for this week’s news (New and experimental, oh noes!)

I’m on the road to JSConf 2011 – literally! Drove all day yesterday, slept at a rest area (trying to save money), and I’m now sitting comfortably inside a Starbucks here in Portland, commandeering their Wifi.

There’s an awesome speaker lineup and it promises to be a great event! NodeConf happens shortly afterwards, after what will be a much-needed day of rest.

Oh, and if you’re in a hacking mood or you’re stuck in your hotel room, here’s the schedule for JSConf in JSON format.

Releases

Node 0.4.7
YUI Compressor 2.4.6
ExtJS 4

Upcoming Events

An Event Apart Boston 2011 (May 2-4, 2011 in Boston)
JSConf 2011 (May 2-3, 2011 in Portland, Oregon, US)
NodeConf 2011 (May 5, 2011 in Portland, Oregon, US)
Google I/O 2011 (May 10-11, 2011 in San Francisco)
Web Directions Unplugged (May 12–13 2011, Seattle)
jsday (May 12-14, 2011 in Italy)
Mobilism (May 12-13, 2011 in Amsterdam)
BrazilJS (May 13-14, 2011 in Brazil)
TXJS (June 11, 2011 in Austin, Texas)
An Event Apart Atlanta (June 13–15, 2011, Atlanta)

Tidbits

There’s more to HTML escaping than &, , and “ – Ryan Grove explains why it’s worth going the whole distance with HTML escaping

window.matchMedia() – the latest Firefox nightly now has support for JS-based media query selectors (i.e. “(min-width: 400px)”), including event listener support (fired off when the screen width changes). It will be included in Firefox 6 (MDN docs window.matchMedia reference)

A Collection of JavaScript Gotchas

heatmap.js – a JavaScript Library for HTML5 canvas based heatmaps

Why we should support users with no Javascript – in a word, progressive enhancement (ok, that was two words, not one)

Video: HTML5, CSS3, and DOM Performance (Paul Irish)

squish is a node-based CSS compressor from Dustin Diaz (who’s releasing an absurd amount of code lately…)

Mozilla JavaScript 2011 – David Mandelin gives an overview of planned improvements to Firefox, including a new debugging API (via a Debug object), incremental garbage collection, and the next planned JIT compiler called IonMonkey

Beyond the browser: Microsoft’s ‘C3′ next-gen platform for HTML-based applications

TextMate bundle for UglifyJS

MDN docs: CSS animation – the doc for CSS animations is starting to take shape!
Objects as Arguments in JavaScript: Where Do You Draw the Line? – Rebecca Murphey gives some good reasons why we should use objects instead of enumerated arguments (i.e. fn(arg1, arg2, arg3, arg4) vs. fn(obj)), but not necessarily all the time.

comp.lang.javascript FAQ – huge FAQ for JavaScript (via nathansmith)

Closures explained with JavaScript – another explanation of closures making the rounds. Everyone has their own way of explaining them, and everyone has their own way of understanding and becoming enlightened by the different explanations!

Visualize your iPhone’s location tracking map in 100% client-side Javascript

Yammer Launches New API Sandbox, New Site for Developers

pulley is a tool by John Resig to simplify handling pull requests from GitHub, and I’m sure by no coincidence GitHub released its own improved tool just days later.

pngtocss is a tool to convert PNGs to CSS (that should be obvious from the name!) by Philip Tellis created in response to one of Nicole Sullivan’s tweets. Her tweet also prompted other folks to build similar tools, which she mentions in a blog post.

Experimenting with Mirrors for JavaScript

Streamline your web font requests. Introducing “text=” (Google WebFont Blog) – an API to request only the characters needed from Google’s WebFonts API (via nathansmith and henrrrik)

YUI Compressor’s CSS minifier in pure JavaScript

Learning Node.js

Developing for Multi-Touch Web Browsers (HTML5Rocks)

Everybody’s talking (and translating) with Chrome – speech input through HTML! (speech attribute [WebKit-specific: x-webkit-speech] plus the JS event onspeechchange [onwebkitspeechchange])

Looking into Mirrors – using an introspection library for JS
window.maxConnectionsPerServer – for feature detection in IE9, but it appears to be a global variable? Crockford will be upset.

Fargo is a programming language that runs on Node.js

objectdiff – compare two objects and see where they differ (via jsgoodies)

Modern JavaScript

Modern JavaScript by Rebecca Murphey makes the case that we still have a ways to go in the JavaScript community in terms of dependency management, cross-code communication, and modularity of code, and argues in support of the AMD proposal (Asynchronous Module Definition API). In short, she makes the case that we haven’t found a good way to make everything in the JavaScript landscape play nicely with each other yet. At least in an ideal fashion.

V8Monkey and SpiderNode

Mozilla has taken an interest in Node and is starting to fashion its own flavor using their own JavaScript engine.

You may remember concerns a few months back about Node’s tight coupling to V8, the engine that powers Google’s Chrome browser. Paul O’Shannessy, a Mozilla engineer, echoed the same concern and also explained it as a rationale to build a V8 API on top of Mozilla’s own JavaScript engine SpiderMonkey, resulting in what they call V8Monkey. SpiderNode, on the other hand, is the general term for Mozilla’s fork of Node.

Earlier this week, it looks like they were successful in getting Node to run on V8Monkey briefly before segfaulting. Progress, but there’s more work to be done!

Adapt.js

Adapt.js is a very lightweight JavaScript file that determines which CSS to load before a browser renders a page, as well as after a window resize (which also occurs on screen rotation on mobile devices). It serves as an alternative to building a separate website for mobile or serving content with media queries (which aren’t universally supported, requiring a polyfill for older browsers).

Releases

jQuery 1.6 Beta 1
Sproutcore 1.5
Knockout.js 1.2.0

Upcoming Events

An Event Apart Boston 2011 (May 2-4, 2011 in Boston)
JSConf 2011 (May 2-3, 2011 in Portland, Oregon, US)
NodeConf 2011 (May 5, 2011 in Portland, Oregon, US)
Google I/O 2011 (May 10-11, 2011 in San Francisco)
Web Directions Unplugged (May 12–13 2011, Seattle)
jsday (May 12-14, 2011 in Italy)
Mobilism (May 12-13, 2011 in Amsterdam)
BrazilJS (May 13-14, 2011 in Brazil)
TXJS (June 11, 2011 in Austin, Texas)
An Event Apart Atlanta (June 13–15, 2011, Atlanta)

Tidbits

Actual JavaScript Engine Performance – Crockford uses his own JSLint as a benchmark. But is JSLint really a better benchmark?

Multi-touch game controller in JavaScript/HTML5 for iPad (via JavaScript Weekly)
Videos from the Day of JS on Mobile back in January have now been posted.

Ways to immediately invoke functions (JSFiddle) – not that you should necessarily use all of these techniques, but they’re interesting nonetheless

WebGL Sonic the Hedgehog Game Engine

ECMA-262, 5th Edition: A survey of the latest JavaScript specification

Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces

jQuery Events: Stop (Mis)Using Return False

The IE10 User-Agent String – Microsoft warns about the dangers of user-agent sniffing. There will be some RegExp breakage for IE10… (just as there was with Opera 10)

Early findings: 97% of mobile end-user response time happens at the front end

Videos: jQuery Conf Bay Area 2011

jslintmate – JSLint/JSHint bundle for TextMate

FunctionSource is a new website from the creators of Ajaxian

Spine is a lightweight framework for building JavaScript web applications.

HTML5/JavaScript platform game optimised for iPad

The Complete Javascript Number Reference – a handy resource for converting between number formats

pre-commit checks your JavaScript before you commit. Included are jslint, console.log(), space vs. tab check, and a trailing whitespace check.

Audio: Jqcon 2011 SF Bay Area (Official jQuery Podcast)

Resume: How to not lose 90% of your upload

Get started with object-oriented JavaScript code

Getting CORS Working (cross-domain Ajax)

Slides: Fabric.js — Building a Canvas Library

Node Tidbits

Mozilla jumps into Node.js server project
The Node Beginner Book
Pulley: An Easy Github Pull Request Lander (written in node)
node-spdy: a SPDY implementation in node

iOS Viewport Fixes

With the rise of mobile, desktop developers have had to wrestle with new and uncharted territories, particularly in cases where there’s no close resemblance to a familiar feature on desktop browsers. One good example of this is changing screen orientation, which is roughly analogous to a resize event (which by the way gets fired, along with the orientationchange event where supported). However, the different mobile browser implementations bring all sorts of new troubles and unexpected behaviors.

One case in point is iOS, which has had a bug (feature?) for a long while now that results in unexpected behavior when rotating a device. For instance, after applying a proper viewport metatag with width=device-width, a page might load and display properly, but when the user rotates the screen, the content explodes outside of the current viewport, forcing them to resize the viewport to see the content. One common workaround has been to force the initial and maximum scale to 1 as well as setting user-scalable=no, which has the effect of not allowing users to pinch-zoom. This viewport tag has been on many major sites, including one I helped work on (Yahoo Mobile), but it turns out that people really like pinch-zooming. Developers like it too (see here and here).

So what’s a developer to do? Well, as it turns out we can use some JavaScript fanciness to help us out. We can use iOS’s gesture events to dynamically rescale the viewport tag. Shi Chuan from the HTML5 Boilerplate team offered up his fix, with Paul Irish and Matthias Bynens offering up their own renditions.

Mobile Boilerplate

You’ve probably heard of HTML5 Boilerplate. Well, now there’s a Mobile Boilerplate to check out! Interestingly, this one comes with no JavaScript library prepackaged (the desktop version bundles jQuery with it).

Just as with the desktop version, even if you don’t want to bite the bullet and use the entire boilerplate, it’s a treasure trove of best practices and is definitely worth a look now and again as it evolves.

CommunityJS

CommunityJS is a webpage, not a library! Its simple purpose is to provide a place to find JavaScript meetups around the world. It’s also a nice way of indirectly showing hotspots of JavaScript jobs (the folks going to the meetups likely have jobs nearby).

Curiously enough, Asia only has one meetup in Singapore. There’s either lots of meetups still unaccounted for, or this means there’s a TON of opportunity for folks to organize new meetups there! It would be nice to see some meetups sprout up in China and Japan in particular. We know there’s people there who work with JavaScript!

Ender.js

If you’ve been following along these past few weeks, you’ll know that Dustin Diaz has been getting quite a bit of attention for releasing, one after the other, a few lightweight JavaScript utilities such as reqwest (an XHR wrapper), qwery (a selector engine), $script.js (a JavaScript loader), and tiny DOMReady code. These, along with other open-source components written by some other folks, have been subsumed into Ender.js.

The full package come comes in at just 7k and strikes a balance between the much more minimalistic Zepto and the much more bloated jQuery. Still, I’m unsure if I’d use Ender, if even just for prototyping. I’d rather use something more familiar that’s more importantly time-tested and less prone to unexpected behavior (as John-David Dalton pointed out with the small DOMReady code). Time will probably fix that (and likely increase the bytesize by at least a little with all the edge cases out there). But if you happen to be looking for something lightweight, this might be a good place to start!

Upcoming Events

codeconf (GitHub) (April 9-10, 2011 in San Francisco, US)
Using AMD loaders, such as RequireJS, to write and manage modular javascript (Boston JavaScript) (April 11, 2011 in Boston)
Breaking Development: design and development for the mobile web (April 11-12, 2011 in Dallas, TX)
Faster Facebook (Web Performance SF) (April 13, 2011 in San Francisco)
jQuery Conference 2011 (April 16-17, 2011 in Mountain View)
An Event Apart Boston 2011 (May 2-4, 2011 in Boston)
JSConf 2011 (May 2-3, 2011 in Portland, Oregon, US)
NodeConf 2011 (May 5, 2011 in Portland, Oregon, US)
Google I/O 2011 (May 10-11, 2011 in San Francisco)
Web Directions Unplugged (May 12–13 2011, Seattle)
jsday (May 12-14, 2011 in Italy)
Mobilism (May 12-13, 2011 in Amsterdam)
BrazilJS (May 13-14, 2011 in Brazil)
TXJS (June 11, 2011 in Austin, Texas)
An Event Apart Atlanta (June 13–15, 2011, Atlanta)

Tidbits

qooxdoo 1.4 and 1.3.1 released – qooxdoo, the most underrated JavaScript framework (at least according to Rey Bango), has released a bunch of new features in 1.4, including mobile support, a “Simple” theme, a new kitchen-sink-like Widget Browser, and more
A Recipe for a YUI 3 Application – Satyen (Daniel Barreiro) goes into detail about how to organize a YUI application
WebGL clouds by mrdoob
Sophisticated Sorting in JavaScript
The JavaScript Comma Operator
jsgif: A GIF player in JavaScript
jRumble
Slides: Rare JavaScript Operators
The JavaScript Disruption
ender
WebGL racecar
Why You Should Never Use jQuery Live
How to Build Asteroids with the Impact HTML5 Game Engine
Splitview plugin for jQuery Mobile on the iPad
Native maps speed in Javascript
Physics engines for dummies
Video: why.js: Why JavaScript Matters (Douglas Crockford)
Felix’s Node.js Guide

…And we’re back!

Things have come to a frenzied pace here, as I’m helping to plan the upcoming Frontend Engineering Summit here at Yahoo! This is an internal conference with an awesome array of talks, but even if you’re not at Yahoo!, if you’re in the Bay area on March 28-29, we’d love to see you at BayJax in Sunnyvale here on the Yahoo campus. The first night’s BayJax will be open mic (they’re still looking for more folks to talk!), and the second night will have Steve Souders and Douglas Crockford speaking.

Hope to see you there! On with the news…

HTML5 element support in IE: to shim or not to shim?

Yahoo’s Thierry Koblentz has written a great post that discusses the drawbacks of the pure HTML/CSS way of making HTML5 tags work in IE. Most of you are probably familiar with the problem and the common solution: in older versions of IE, new HTML5 tags aren’t styleable, but a common trick to get them recognized and styleable is to create each type of element first in JavaScript. This method has become known as an HTML5 shim.

However, this relies on JavaScript! So what about folks with JavaScript disabled (up to 2% of users in the US, for instance)? They of course don’t see the styled elements, unless they use “wrapper” elements which they can target instead, which doesn’t rely on JavaScript. But this method doesn’t come without many drawbacks, which Thierry details in his post.

Scrollers aplenty

If you’ve been paying attention over the past few months, you’ve probably seen a few sites that take advantage of scrolling in new and exciting ways.

Most recently, WeSC Footwear released their own version of a “scroller” interface, undoubtedly influenced by Nike (their main competition). I find WeSC’s version interesting but quite dizzying.

TEDx Portland also use an interesting scrolling effect, but only at the top of the page. Once you get below the fold, the page “returns to normal”, so to speak.

Also be sure to check out BeerCamp 2011, which does something completely different and crazy.

iOS 4.3 adds Nitro support (kinda)

iOS 4.3 has added their Nitro engine to mobile Safari, which had made things quite a bit faster JavaScript-wise. Theoretically this should also make native apps with UIWebView and webpages added to the home screen faster, but folks have found this not to be the case. As it turns out, the Nitro engine is only available on mobile Safari itself, launched from the mobile Safari icon. Confusingly, not even web apps added to the home screen via mobile Safari benefit from the new improvements. This means folks who wrap their applications with something such as PhoneGap will not benefit from the latest new improvements.

Some call it a conspiracy, some call it a bug, but in any case Apple has acknowledged the discrepancy. My gut feeling points to Apple fixing this in the next version, but we’ll have to wait and see.

There’s already a casualty of the discrepancy: Blaze software released a statement claiming that Android’s native browser is much faster than mobile Safari. In order to defend themselves, Apple has been forced to admit to the “Nitro gap” in order to defend the speed of their browser in their latest iOS release.

Releases

YUI 2.9.0 preview
Dojo 1.6
Raphaël 2.0 beta
Jade 0.7.0
EaselJS v0.3.2
yepnope.js 1.0.0
Google has announced that they will no longer make new releases of Gears

Upcoming Events

Tuning JavaScript at Disqus (SF Web Performance) (March 21, 2011 in San Francisco)
Build our first Phonegap App! (New York Phonegap Developers Meetup) (March 24 in New York, NY)
BayJax Open Mic and Steve Souders / Douglas Crockford talks (March 28-29 in Sunnyvale)
JS in SA (April 2, 2011 in South Africa)
codeconf (GitHub) (April 9-10 in San Francisco, US)
Breaking Development: design and development for the mobile web (April 11-12, 2011 in Dallas, TX)
jQuery Conference 2011 (April 16-17, 2011 in Mountain View)
JSConf 2011 (May 2-3, 2011 in Portland, Oregon, US)
NodeConf 2011 (May 5, 2011 in Portland, Oregon, US)
Web Directions Unplugged (May 12–13 2011, Seattle)
jsday (May 12-14, 2011 in Italy)
Mobilism (May 12-13, 2011 in Amsterdam)
BrazilJS (May 13-14, 2011 in Brazil)
TXJS (June 11, 2011 in Austin, Texas)
An Event Apart Atlanta (June 13–15, 2011, Atlanta)

Performance Tidbits

There’s lots of performance-related news to catch up on, so this will get its own section this week!

YSlow for Chrome has been released

Google has converted their AdSense ads to be asynchronous (non-blocking), which is good news in terms of performance

Trevmex has posted notes from the Velocity Online Conference, which introduced a YSlow bookmarklet to run on mobile devices

dynaTrace Ajax Edition 3.0 Beta now supports both Firefox and Internet Explorer

Slowcop is a performance measurement tool similar to YSlow except that it’s a hosted service

Loads.in is another useful performance tool that lets you know how fast your page loads, from servers around the world

Steve Souders has posted a mobile comparison of the Top 11 websites, showing an analysis of total requests, DOM elements, and HTML size

Node.js Tidbits

Ryan Grove of the YUI team released Selleck, a Mustache-based user documentation generator in Node.js

Remy Sharp’s inliner is a Node-based tool for inlining assets (images, CSS, JS) in a webpage, mostly targeted towards mobile pages, where reducing requests matters even more.

node-inspector is a debugger for node.js for WebKit-based browsers.

Other Tidbits

John Resig has made a post on speeding up dictionary lookups on both the server side and client-side

Some folks have released a comparison chart of all the JavaScript loaders out there

The creator of Ruby on Rails has announced that Rails 3.1 will ship with jQuery as the default JavaScript library, instead of Prototype

Maximiliano Firtman lays down the particulars of What’s new on Safari for iPhone 4.3 and iPad 4.3

Here’s a QRcode decoder written in JavaScript

Some Mozilla folks are building a V8 shim for SpiderMonkey, Firefox’s JavaScript engine

DontType! is an implementation of the Android screen unlock to be used in place of a low-security password

Jaws is an HTML5 JavaScript game library (another one!) which is not to be confused with the screen reader by the same name.

noisy is a jQuery plugin that dynamically generates background noise (in base64). Check out the demo.

d3 is a visualization library that outputs data as HTML and SVG.

TinySrc now has a data URI api for accessing images

Tony Lukasavage asks an interesting question: Are you actually saving time with mobile frameworks?

Drawing Sprites: Canvas 2D vs. WebGL: Microsoft’s FishIE modified to run a LOT more fish using WebGL instead of Canvas

IndexedDB – The Store In Your Browser (scriptjunkie)

Video: JavaScript: The Evil Parts (Billy Hoffman)

Audio: Why JavaScript Doesn’t Have Operators Yet? (A Minute with Brendan)

Better late than never

It’s been another one of those weeks… but in any case, here’s some links to keep you busy! Here’s the things I want to highlight for this week:

Android 3.0 implements the HTML Media Capture spec, part of the W3C Device APIs and Policy Working Group

dust is a crazy fast templating library

Video: Microsoft, which recently announced that their Windows Phone will soon have a browser based on IE9, showed off some of the browser’s capabilities

PhiloGL is a WebGL framework for data visualization, creative coding and game development.

Releases

node.js 0.4.1
Zombie 0.9.4
Modernizr 1.7
jQuery 1.5.1
JSGameBench 0.3 adds WebGL tests

Upcoming Events

Confoo.CA: Web Techno Conference (March 9-11, 2011 in Montreal, Canada)
MobileCampRDU (March 12, 2011 in Durham, North Carolina)
JavaScript Loading Strategies South Florida JavaScript Group (March 15, 2011 in Miami)
BayJax Open Mic and Steve Souders / Douglas Crockford talks (March 28-29 in Sunnyvale)
JS in SA (April 2, 2011 in South Africa)
codeconf (April 9-10 in San Francisco, US)
Breaking Development: design and development for the mobile web (April 11-12, 2011 in Dallas, TX)
jQuery Conference 2011 (April 16-17, 2011 in Mountain View)
JSConf 2011 (May 2-3, 2011 in Portland, Oregon, US)
NodeConf 2011 (May 5, 2011 in Portland, Oregon, US)
Web Directions Unplugged (May 12–13 2011, Seattle)
jsday (May 12-14, 2011 in Italy)
Mobilism (May 12-13, 2011 in Amsterdam)
BrazilJS (May 13-14, 2011 in Brazil)
TXJS (June 11, 2011 in Austin, Texas)
An Event Apart Atlanta (June 13–15, 2011, Atlanta)

Tidbits

Slides: Fixing These jQuery! A Guide to Debugging

Game Closure Makes it a Breeze to Build Multiplayer, Cross-Platform Games

Video: Matthew McNulty introduces and explains the features of the Enyo framework for webOS

User-agent sniffing is back: Matthias Reuter argues that the HTML5 features implemented in various states of completion in browsers make it impossible to rely on feature detection

Users on reddit have compiled a list of references for JavaScript Mastery

requestAnimationFrame for smart animating: Paul Irish shows how to use requestAnimationFrame in place of setTimeout for JavaScript-based animations, while still providing fallback capability.

The core writing for an updated edition of JavaScript: The Definitive Guide has been finished.

cdnjs is a CDN for lots of JavaScript libraries, not just the popular ones

It looks like work on the Qt JavaScript platform is continuing, despite Nokia’s plan to leave it in the dust (?)

Smallest DOMReady code, ever. (Dustin Diaz) and a response by @jdalton pointing out some problems

Video: Paul Irish explains some tricks for debugging on Chrome

MVC Architecture for JavaScript Applications

Unit Testing 101: Are You Testing Your JavaScript? (Script Junkie)

Firefox 4 for Mobile Beta 5 brings even more performance improvements, to JavaScript and overall.

Node.js Tidbits

weld: Template antimater for Node.JS

Mongoose 1.0 is a MongoDB object modeling tool designed to work in an asychronous environment.

Zakas’s delayed script execution proposal

Nicholas Zakas has revised his proposal for a deferred JavaScript execution attribute. Previously his proposal called for a noexecute attribute, but this has been revised to be a preload attribute.

His proposal is motivated by the lack of any built-in attributes that allow this same behavior. The defer attribute simply defers the execution of code after the DOMContentLoaded event and before the load event, and the async attribute simply tells the script not to be blocking (its default behavior) while downloading and executing, allowing other resources to download.

However, we lack a built-in way of deferring the actual execution of scripts, which would tell them to download but hold off on execution until instructed to do so. This is something the Gmail mobile team first implemented by way of a hack (load the script in a comment block, then strip the comment tags and eval on demand) and something which was incorporated into ControlJS.

Especially with the increased focus on mobile these days, it only makes sense that there would be nothing but support for this proposal, and hopefully we can see it start to creep into browsers in the near future.

Jdrop

Jdrop is a new tool by Steve Souders that allows users of the Mobile Perf bookmarklet to save their on-screen test results to a server, which can be viewed on a nice big desktop monitor.

It was motivated by the fact that it’s no fun to read these test results on a mobile device’s tiny screen. You simply click on the provided “Save to Jdrop” button and away your tests go!

There is one caveat however: you need to authenticate via Oauth, which means you need to login through Twitter or Google or any other account. This might be a bit annoying, but I suppose it’s necessary to prevent abuse.

$script.js

scriptjs is a minimalist attempt at a script loader by Dustin Diaz. Lightweight meaning only 643 bytes!

A very simple test case is loading two scripts, the second of which runs a callback when the script is ready:

$script('foo.js');
$script('bar.js', function() {
  // do stuff with bar.js
});

Another way of doing this is the following:

$script('foo.js');
$script('bar.js', 'bar');

$script.ready('bar', function() {
  // do stuff with bar
});

Diaz ends the post with a comparison with other script loaders, particularly LAB.js:

In particular I wanted to call out the great work done on LAB.js – $script.js is not better or worse. And it is most certainly different. LAB attempts to do some nice cross-browser speed improvements (like downloading via xhr and other crazy browser forks). Hell, we use it here at Twitter, and we love it. The point of $script.js is to get back to the basics of loading script’s w/o blocking other resources, which is where you’ll find the most win.

Amplify

Amplify (on GitHub) is a library to help jQuery components play well together, providing an abstraction layer for data requests, client-side storage, and loose coupling provided by a pub/sub system.

Releases

Node.js 0.4.0 (listen to Ryan Dahl talk about it in the latest node.minutewith)
RequireJS 0.23.0
DOM Monster 1.3.0
PhoneGap 0.9.4

Upcoming Events

Confoo.CA: Web Techno Conference (March 9-11, 2011 in Montreal, Canada)
MobileCampRDU (March 12, 2011 in Durham, North Carolina)
BayJax Open Mic and Steve Souders / Douglas Crockford talks (March 28-29 in Sunnyvale)
JS in SA (April 2, 2011 in South Africa)
codeconf (April 9-10 in San Francisco, US)
Breaking Development: design and development for the mobile web (April 11-12, 2011 in Dallas, TX)
JSConf 2011 (May 2-3, 2011 in Portland, Oregon, US)
NodeConf 2011 (May 5, 2011 in Portland, Oregon, US)
Web Directions Unplugged (May 12–13 2011, Seattle)
jsday (May 12-14, 2011 in Italy)
Mobilism (May 12-13, 2011 in Amsterdam)
TXJS (June 5, 2011 in Texas)
An Event Apart Atlanta (June 13–15, 2011, Atlanta)
Full Frontal (November 11, 2011 in ?)

Tidbits

JSHint is a open-sourced, gentler version of JSLint.
BeerCamp 2011 – scroll the page to see this very cool and different page interaction. If you’re running Chrome, go to about:flags and enable GPU Accelerated Compositing to get more performance (albeit slightly buggy) out of this page (hat tip to @nathansmith).

dotjs is a Greasemonkey-like Chrome extension that allows you to run custom JavaScript based on the filename of the site visited

History.js is a browser history manager that uses newer technologies when available (pushState, etc.) and falls back to a hash-based history when necessary

(pre)Maturely Optimize Your JavaScript

Cross-domain Ajax: Implementation and Considerations

Audio: Closure Versus Prototypal Pattern Deathmatch (A Minute with Brendan)

Giraffe from Hell (WebGL demo)

#-ish – more discussion about the hash tag and browser history, and why you should only use it if it fits your needs

gRaphaël – a JavaScript charts library based on Raphaël

Building Single Page Applications With jQuery’s Best Friends (Backbone.js, Underscore.js, LAB.js, etc)

Is IE9 a modern browser? (see Microsoft’s response)

Canvas From Scratch: Introducing Canvas

960 Grid on jQuery-Mobile

IE9 has plugins for experimental support of indexdb and web-sockets

Paul Irish on surefire DOM Element insertion

Anchor Modeler is a nice Canvas-based modeling tool

NodeJS Tidbits

cluster is a multi-core server manager with plugins support

Blagovest Dachev has written a nice GUI for npm

Re-using Backbone.js Models on the server with Node.js and Socket.io to build real-time apps

node-serialport: node.js + Arduino

BostInnovation interviewed Ryan Grove about his combohandler for node.js

Testing the performance of getter/setter techniques

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

The performance of feature detection

Alex Russell from the Google Chrome team has ignited a debate about the performance cost of JavaScript feature detection, a very popular technique used in everything from Modernizr and has.js to YUI3, which loads JavaScript polyfills when needed (for instance, loading JSON in browsers with no native JSON support).

Alex’s first post prompted much discussion and requests for clarification (is he saying user agent sniffing is more preferable?), which resulted in a second post with numbers to back up his position, along with more clarification, where he seems to be advocating a form of user agent detection on the server-side. Which is actually what many in the mobile world have been doing for quite some time now (i.e. WURFL), simply because there was no other alternative at the time (and the devices couldn’t run JavaScript).

For a bit of a grain of salt, check out Faruk Ates’s response, cautioning against user agent sniffing.

EDIT: Also check out John-David Dalton’s two part video response arguing in favor of feature testing, based on real-world data showing what he argues to be a small performance hit.

Mobile Firefox 4 Beta performance

Mobile Firefox has been a bit of an ugly duckling on the mobile browser scene, getting little attention compared to Mobile Safari, Android, and even webOS. However, this week it proved itself to be a true dark horse by coming out of nowhere and blowing away the performance of every other mobile browser.

Arstechnica ran the SunSpider test on a Nexus One with Android 2.2 and found Mobile Firefox 4 Beta completed the test in a record 3,558ms, beating the native Android browser, which finished at 5,742ms.

On the Mozilla Blog they proudly announce the latest release, mentioning faster startup, page loads, and faster panning and zooming. They also mention the new release is about three times faster on their own Kraken benchmark, about twice as fast on SunSpider, and just a bit faster on V8 (proving once again that not all benchmarks are created equal).

Also of note is that Mobile Firefox seems to be the only mobile browser with add-on capabilities, while all the other browsers are still stuck with JavaScript bookmarklets at best.

W3C Touch Events

The W3C has just released the beginnings of the Touch Events Specification based on Apple’s specification.

This is obviously still a very rough and in-progress document, but what’s most interesting is a deviation from Apple’s spec in the introduction of touchenter and touchleave events (at the request of ppk), which are analogous to mouseenter and mouseleave originally implemented by Microsoft years back.

You can read more discussion about the spec from Doug Schepers (W3C) and ppk.

Correction

The obfuscated JavaScript that appeared in this month’s issue of JSMag (February 2011) has an error. The correct code (which needs to be escaped correctly to paste here) is as follows:

($=[$=[]][(__=!$+$)[_=-~-~-~$]+({}+$)[_/_]+($$=($_=!''+$)[_/_]+$_[+$])])()[__[_/_]+__[_+~$]+$_[_]+$$](_/_)

Which if you remember, is equivalent to alert(1).

For those really interested in unreadable code, also be sure to check out aaencode, which converts your code to Japanese style emoticons

Releases

RingoJS 0.7
jQuery Mobile Alpha 3
jQuery 1.5

Upcoming Events

JS Boot Camp (February 10-11, 2011 in Reston, Virginia, 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)
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)

Tidbits

You can now see the most popular jsperf test cases
HTML5 canvas sprite optimisation shows you why you should round your numbers to the nearest whole number when working with canvas. Related: Iain Lobb’s BunnyMark benchmark (bunnies + performance)
Abusing HTTP Status Codes to Expose Private Information
ECMAScript 5 strict mode in Firefox 4
How to Write Maintainable OO JavaScript Code
Explaining EmbedJS
Phantom Limb
The WebKit PreloadScanner
stylus
audio.js
HTML5 Canvas 3D particles uniform distribution
The Harmony Of My Dreams
opencoweb: Cooperative Web Framework
A dash of speed, 3D and apps (Google Chrome Blog)
Game On Winners: Level Up the Open Web (Mozilla Labs)
AwesomeChartJS
An Intro to Backbone.js: Part 1 – Models and Collections
Introduction to jQuery Mobile
JSApp.US is a nice node.js hosting platform to get code up-and-running in short hack projects.

Introduction

This week has been too busy, so the news will be a bit different. This week we’ll just have a bit of a link dump. I mean that in the nicest, most positive way possible.

Main stories

(Obfuscated JavaScript) JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )

IndexedDB Status Report and Demo – davidflanagan.com

jsgamebench

Upcoming Events

JS Boot Camp (February 10-11, 2011 in Reston, Virginia, 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)
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

jQuery 1.5 RC1
jQuery UI 1.8.9
Zepto.js 0.4

Link Dump!

HTML5 Games 0.1: Speedy Sprites
jolecule
CSS3 transition tests and discussion
chain.js
load.js
Long stacktraces for V8
(Audio) DOM Frameworks (Minute With Mobile with Brian LeRoux)
HTML5 Blizzard: Full Hardware Acceleration in Action – IEBlog – Site Home – MSDN Blogs
ECMAScript 5 strict mode in Firefox 4
SVG animation with JavaScript
IndexedDB Status Report and Demo – davidflanagan.com
PhantomJS: minimalistic headless WebKit-based JavaScript-driven tool
TameTick.com: Why I’m Moving From HTML5 To Flash
CSS value autocompletion, window.onerror and Interactive Validation
Scraping Made Easy with jQuery and SelectorGadget

Twitter, onscroll, and performance

You may have noticed Twitter slowing to a crawl earlier this week while trying to scroll down the page. The issue appears to be caused by upgrading to jQuery 1.4.4, as developer Dustin Diaz states on his blog.

John Resig responded with an explanation of the changes in jQuery. In particular, he explains that while most other functions are already using the native querySelectorAll, jQuery 1.4.3 brought another function .find(’.class’) up to speed by having it default to querySelectorAll. According to tests, there was a slight performance hit but it was negligible, and shouldn’t have brought any applications any noticeable slowdown. So what’s the deal with what happened on Twitter?

Resig points out that Twitter suffered badly as a result of two bad practices: 1) attaching an event handler on the window’s scroll event and 2) not caching the DOM queries. As it turns out, Twitter was re-querying the DOM EVERY time the scroll event fired. It’s amazing how this same mistake is made over and over, even in professional development. Hitting the DOM is expensive! Cache your selectors!

Mozilla Skywriter (Bespin) merged into Ace

Mozilla has announced that Skywriter (formerly known as Bespin) has been merged with Ajax.org Cloud9 Editor.

You can see a live demo here, which is quite impressive. I remember first trying Bespin and finding it impressive, but it’s really been polished. It probably also has something to do with the speed of the browser getting faster. In any case, if TextMate is your favorite editor, you’ll find it hard to distinguish between this and the real thing!

The project’s homepage is now http://ace.ajax.org/ and its Twitter feed is @cloud9_editor. If you were following @MozSkywriter before, you’ll find that you’re now following @cloud9_editor!

CSSOM, variables, and mixins

The CSSOM is a bit of new lingo for changes being introduced to CSS and JavaScript by the Chrome team. The CSSOM is said to be the interface between CSS and JavaScript. You probably know that manipulating CSS in JavaScript isn’t too pretty and can definitely be improved, and as such the Chrome team is sidestepping standards bodies (and their squabbles) a bit and testing out some new syntax.

They’re also implementing variables in CSS, definitely a controversial move, but one that definitely helps folks who maintain any CSS. An example of a reusable color variable might look something like the following:


@var header-color color #06c;
h1 {
color: var(header-color);
}


These slides also cover some more things we can expect to see, such as CSS mixins which promote reusable code, and which were pioneered by CSS preprocessors such as LESS.

Modernizr 2.0 beta

Modernizr 2.0 beta has been released. The team is now joined by Alex Sexton.

The biggest noticeable change is the ability to custom-tailor the download to suit your needs (very reminiscent of YUI3’s Configurator). Say you don’t care about detecting Touch events or any other features. No problem, just uncheck it and click the “Generate It!” button to get your custom download.

Releases

Node 0.3.5
RightJS 2.2.0

Upcoming Events

Paul Irish on HTML5 Boilerplate (January 27, 2011 in San Francisco, CA)
Day of JavaScript on Mobile (January 27, 2011 in Mountain View, CA)
Mozilla/P2PU School of Webcraft (starts January 26, 2011 online)
JS Boot Camp (February 10-11, 2011 in Reston, Virginia, 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)
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 11, 2011 in Texas)

Tidbits

HTML5 has a logo: you’ve probably heard about this by now…
What the Heck is Shadow DOM? is a look at parts of the DOM only accessible by the browser itself, but sometimes styleable. Case example is input type=”range”
ecmazing JavaScript blogs – a list of JavaScript bloggers
The JavaScript arguments object…and beyond is a look at the array-like arguments object, its quirkiness and its possible future
Video: 11 More Things I Learned from the jQuery Source by Paul Irish is a followup to his previous video 10 Things I Learned from the jQuery Source
The M Project is a new HTML5 JavaScript framework for mobile devices (using jQuery Mobile)
martial is a visual map that plots visitors’ ip addresses on a world map (live demo)
Harmony Of My Dreams – Brendan Eich spells out some of the future of JavaScript
Building Reusable Widgets with YUI 3 – Ryan Grove has written a great guide on creating your own YUI3 widgets
Audio: Inspecting node_pcap (node.minutewith) – a detailed look into the JavaScript packet analyzer.
iPad View Source Bookmarklet
Audio: Tim Caswell on Node.js – Node.js community leader explains it and what it has to offer
Audio: The Undetectables with Paul Irish (SitePoint Podcast #95) – chatting about features you can and can’t detect
Firefox 4 Beta 9 – a huge pile of awesome – Christopher Blizzard lays out the details on all the improvements in this iteration, performance included. Hardware acceleration! Woohoo!
When is Mobile Safari not Mobile Safari? – Jason Grigsby explains why the Mobile Safari user agent appears to be inconsistent during the course of a user session