Chrome ditches H.264

Google released a bombshell this week by dropping support of the H.264 video format. The rationale behind this is Google’s pledge to support open video formats, which is the same philosophy behind Mozilla Firefox and Opera. And yet it’s no coincidence that Google is behind the WebM (VP8) codec, one of the main open video formats being pushed. Many have questioned this decision, especially given the fact that Chrome still supports Flash, which is not open.

You may know H.264 as the de facto video format powering iOS devices. The trouble is that the codec isn’t open, and the company behind it, despite extending their royalty-free period to 2016, will still have legal precedent to charge consumers in a few years. The format’s future on the web is uncertain, despite being ubiquitous.

In the end, it seems clear that people would have felt better about Google’s decision if it had no vested interest in the success of any particular video format. Now it seems pitted against Apple more than ever before.

Microsoft responded in a strange and thinly-veiled post implying that Google’s move is akin to the failure of Esperanto.

These are interesting times to be sure!

UPDATE: Google just today released a more detailed post about their decision.

Mobile Perf bookmarklet

One of the first fruits of Steve Souders’ recent focus on mobile performance is a suite of mobile performance tools bundled together in a Mobile Perf bookmarklet.

The bookmarklet loads in the extra tools by way of dynamically inserting script blocks. After loading, the user can run Firebug Lite, DOM Monster, SpriteMe, CSSess, and Zoompf through a small menu. Steve mentions that the suggestion to make the tools a meta-bookmarklet (including several bookmarklets) came by way of his discussions with Thomas Fuchs, who in the course of the conversation open-sourced DOM Monster (thanks!).

Reddit’s crowdsourced list of JavaScript game engines

Over the past few week’s we’ve been trying to track the slew of new JavaScript game engines being released, and it’s nice to see folks on reddit try to track them as well. In addition to providing a link to each engine, this in-progress list also attempts to note the license and the type of engine (2D, 3D, isometric, etc.) as well as other various details.

In short, if you’re considering making a game in JavaScript and already know a few requirements, this list will probably be your first stop!

Releases

YUI 3.3.0 brings support to Android, IE9, and Firefox 4
jQuery 1.5 beta
Node 0.3.4

Upcoming Events

Performance of the new Twitter (SF Web Performance Group) (Jan 17 in San Francisco)
jQuery: Making Javascript fun again (HTML5 Silicon Valley) (January 18, 2011 in Mountain View, CA)
New Adventures in Web Design (January 20, 2011 in Nottingham, England)
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 (January 2011 online)
JS Boot Camp (February 10-11, 2011 in Reston, Virginia, US)
Confoo.CA: Web Techno Conference (March 9-11, 2011 in Montreal, Canada)
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

Arbor.js is an interesting new graph visualization library using web workers and jQuery
scopeleaks.js is a small script to detect stray global variables
What Can Be Done About 3 Gotchas in IE9 Beta – DeviantArt developer mudimba discusses some issues and workarounds working with canvas in IE9
Silk is an experimental drawing canvas that produces pretty amazing patterns (iOS version is still in development)
Partial Application in JavaScript – Ben Alman describes functional programming concepts such as partial application and currying in JavaScript
memcached.js is a port of Memcached to JavaScript running on Node.js
PopcornJS is a new HTML5 video framework
three.js is a 3D engine by mrdoob
Get up to speed with Mozilla’s IndexedDB Primer
Video: People of HTML5 – Remy Sharp
HTML5 Guitar Tab Player with the Firefox 4 Audio Data API
Douglas Crockford talks about recent updates to jslint
mug, a JavaScript compiler for the JVM written in Clojure
Learning Advanced JavaScript is a set of interactive slides by John Resig in anticipation of his upcoming book
spec is an event-driven JavaScript unit testing library
JavaScript Full Screen API, Navigation Timing and repeating CSS Gradients – Peter Beverloo takes a look at the new onwebkitfullscreenchange event
CamanJS Revisited – Improving Render Times by Ditching Web Workers – a case where not using web workers proved more performant
ES5 strict mode support: new vars created by strict mode veal code are local to that code only
ES5: Strict Mode (Rob Sayre’s Mozilla Blog) – Firefox 4 now supports strict mode more fully than any browser

jspp

jspp: JavaScript Pre-Processor is a new node.js package heavily inspired by PHP (Hypertext Preprocessor), as the name suggests. This seems like something perfect for frontends most familiar with PHP who are just learning node.js (like me).

jspp runs initialization JavaScript in a PHP-like block: <?jspp.init /* code */ ?>. After the block is closed, we can output regular HTML just as in PHP. It might be a little confusing, but any further server-side JavaScript is processed in plain old script tags with a special MIME type: <script type="application/jspp">/* code */</script>. This will make more sense after you see the examples on the website (click the link above!).

If you have npm (more than likely if you’re running node.js), just type this to install: npm install jspp

node-scraper

node-scraper is a fairly simple screen scraper that relies on node.js and jQuery. Though I’ve been admittedly slow to jump on the node.js bandwagon, I’ve always thought node.js would be the perfect platform for a screen scraper or web crawler. Instead of finding content with regexes (eek) you can find content just as you would on the client side with your favorite selector engine, in this case jQuery (or Sizzle to be more precise).

node-scraper is pretty basic: it allows you to specify one or many pages to be scraped and allows you to specify a callback for each. There’s also a setting to allow you to throttle back connection attempts so you don’t pound any particular server.

I realize this wasn’t made to really be a web crawler, but it would be handy if a future iteration of node-scraper supported link following. I’ll put that on my wish list!

Nike Better World

And now we’ll take a brief departure for a not-so-JavaScript news update.

I’m not particularly a fan of Nike, but their new site Nike Better World is worth a look. It’s made in the spirit of Ben the Bodyguard and other one-page scrolling webpages. It achieves a neat effect, with some layering of graphics to achieve a parallax scrolling effect. Other than just scrolling, the page can be navigated by buttons on the right side of the page pointing to each section. What’s also somewhat fun is a counter at the bottom of the page which keeps track of how many pixels you’ve scrolled.

When you pry into the source code you’ll find plenty of new semantic HTML5 tags (yay) but soon will find that they’re actually being used incorrectly (boo). Each section of the page is within a Section element, which makes sense, but some sections only contain one child (Article), which itself contains one child (Header), which contains all of the content for each section.

There’s still a bit of confusion over how to use these new elements correctly. We used to have div-itus (overuse of divs in webpages), now it seems we’ll be seeing a lot more of HTML5-itus. Don’t be afraid to use divs where it makes sense to!

Upcoming Events

jQuery: Making Javascript fun again (HTML5 Silicon Valley) (January 18, 2011 in Mountain View, CA)
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 (January 2011 online)
JS Boot Camp (February 10-11, 2011 in Reston, Virginia, US)
Confoo.CA: Web Techno Conference (March 9-11, 2011 in Montreal, Canada)
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)

Tidbits

The “catch” with try…catch by Ben Alman examines a quirk of using the variable “e” in IE6-8 (the lesson: use another variable name)
Exploring JavaScript for-in loops (JavaScript, JavaScript) – an extensive look at using the for-in loop properly (including using some new features in ECMAScript 5), and of course an examination of some IE quirks
OOP The Good Parts: Message Passing, Duck Typing, Object Composition, and not Inheritance by Nick Fitzgerald
Spotlight – Recommend Tools And Resources For JavaScript Developers: Issue 1 – Addy Osmani gives a weekly round up of the latest in JavaScript. This week’s focus is node.js.
5 Things You Might Not Know about jQuery written by David Flanagan as a tie-in to his latest book
How to develop a HTML5 Image Uploader by Paul Rouget explores uploading and manipulating images through JavaScript
Backbone and couchdb by Ben Nolan
Audio: Brian LeRoux on HP Palm WebOS 2.0 (Minute With Mobile)
WebKit implements Mozilla’s animationTime property
Require.js: Integration with Has.js (require.js documentation) – uses the power of Has.js and Closure Compiler to remove dead/unsupported code
jsshell: Shell/bash in Node.js
List of languages that compile to JS
2010 Through the Lens of YUI Theater – Eric Miraglia of YUI has posted links to tons of videos recorded last year. Lots of JavaScript, Node.js, and other frontend topics. Awesome resources!

Zombie.js

Zombie.js looks to be a great new JavaScript testing tool for node.js. It creates a headless browser instance and is able to request webpages and run tests against them. It handles unit tests in a familiar way, as well as simulating real user events such as filling in forms and clicking buttons in a way that’s inspired by the Ruby-based tool Webrat.

For more information on getting started, the developer Assaf Arkin has written an excellent introduction.

evil.js

evil.js is a JavaScript library to prevent hotlinking of your JavaScript files.

You may remember back when Douglas Crockford snuck in an alert() on json.js hosted on his website (before he moved it to GitHub). Sites that were hotlinking directly all the sudden got an alert() pop up on every page load.

evil.js goes one step further, or rather many steps further. It overrides alert() with eval() (which is supposedly evil). It also screws around with many other built-in methods, pointing Math.max to Math.min as well as completely obliterating XMLHttpRequest.

In essence, evil.js truly lives up to its name.

Even More Game Engines!

Last week we got introduced to Impact, CraftyJS, and jgen, and this week even more game engines are popping up!

This week we have Propulsion (check out this balloon game demo) and GammaJS.

If you want to see more, check out this list of 16 Javascript Game Engines (it seems to be missing some of the latest ones however).

Upcoming Events

Closure Tools: Principles and Practice – Michael Bolin (January 6, 2011 in Boston, Massachusetts)
jQuery: Making Javascript fun again (HTML5 Silicon Valley) (January 18, 2011 in Mountain View, CA)
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 (January 2011 online)
JS Boot Camp (February 10-11, 2011 in Reston, Virginia, US)
Confoo.CA: Web Techno Conference (March 9-11, 2011 in Montreal, Canada)
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)

Releases

CoffeeScript 1.0.0
node v0.2.6

Tidbits

Functions: Question “about surrounding parentheses” – Dmitry A. Soshnikov gives a very academic description about using parenthesis in immediately-invoked functions
jQuery Blog: Hotlinking To Be Disabled January 31, 2011
2011 is year of the Server-Side JavaScript – Assaf Arkin writes about why server-side JavaScript is getting bigger, despite being around since the beginning of JavaScript
jQuery’s $.extend is slow is a real example of a performance hit paid for an abstraction provided by a JavaScript library
Top 10 Things that JavaScript Got Wrong is a very nice concise introduction to some idiosyncrasies when using JavaScript
pyxc pj (”pixie pj”) is a Python Cross-syntax Compiler from Python syntax to JavaScript syntax
Ask HN: What charts javascript library to use? – a question on Hacker News elicits some comments about some good JavaScript charting libraries available
Testing REST services with JavaScript – Alexander Beletsky talks about testing REST APIs on the client-side, right where they will be used
Building Large-Scale jQuery Applications – Addy Osmani lays out the particulars of developing large-scale projects: dependency management, MVC code organization, tempting, pubsub implementation, build process, minification, and testing.
YQL: Using Web Content For Non-Programmers by Christian Heilmann is a gentle introduction to using perhaps the best API created (in my very biased opinion)
jQuewy is ironically a YUI3-style easy way of loading other JavaScript libraries. Helpful for speeding up prototyping, or perhaps for the extremely lazy.
Tobi: expressive server-side functional testing with jQuery and jsdom
CouchDB from JavaScript – about using the built-in CouchDB jQuery extension couch.js
jsFace is a framework for implementing Object Oriented Programming in JavaScript

Happy holidays, Merry Christmas

This week’s news is a bit late, but it’s packed full of good stuff for you to read over the next week. Have a good time, and go smash some Christmas lights (just virtually, of course).

Apple iAd brings new life to PastryKit

Normally I wouldn’t be so excited about a new technology to deliver ads, but a reader on my developer blog pointed out that Apple’s internal mobile JavaScript framework PastryKit seemed to be the predecessor to the new iAd JS (Apple developer login required). This seems to be a correct assumption, as the new iPhone user guide (view with an iPhone user agent) now uses iAd JS as its core JavaScript framework (it previously used PastryKit). That’s quite interesting, considering the iPhone user guide doesn’t deliver ads!

What’s even more telling is that many old PastryKit method names map directly onto the new iAd namespace:

• PKUtils becomes ADUtils
• PKObject becomes ADObject
• PKSize becomes ADSize
• PKNavigationView becomes ADNavigationView
• PKView becomes ADView
• PKScrollView becomes ADScrollView
• etc…

This is quite exciting, especially now that we have official documentation! However, it’s unclear if third party developers will be able to use iAd for non-ad applications, as Apple seems to have done with their own iPhone user guide.

Game engines

There’s been an explosion of new JavaScript game engines being released!

Impact (developer’s blog) was finally released)! We got a first glimpse back in October with a video of the game Biolab Disaster running on the iPhone.

CraftyJS is a lightweight JavaScript game engine with some demos that aren’t particularly impressive on their own, but pretty good considering the library hasn’t been around too long. What seems to be more impressive here is the terseness of the code.

jgen is a new game engine that comes with a pretty nifty map editor right of out of the box.

Google Body Browser

Body Browser is a stunning new Google Labs product that harnesses the power of WebGL and Canvas to bring a 3D interactive model of the body straight to the browser. Because it depends on WebGL, it means this demo will only work with Chrome, Safari (running on Snow Leopard), or Firefox 4.

What’s almost as interesting as the actual implementation is taking a little peek under the hood! If you click on the Resources tab in Developer Tools (or Firebug), you can check out the spritesheets that are being used to render the textures: the upper throat, the bones in the spine, ribs, a section of the heart.

For more WebGL fun, check out the Quake II GWT Port, also released by Google developers. And check out the Google Chrome GPU team’s recent presentation slides.

Releases

YUI 3.3.0 Preview Release 3 – with all-new AutoComplete, Charts, DataTable, Dial Control, and Resize Utility
npm v0.2.13
Socket.IO 0.6.3

Upcoming Events

jQuery: Making Javascript fun again (HTML5 Silicon Valley) (January 18, 2011 in Mountain View, CA)
Day of JavaScript on Mobile (January 27, 2011 in Mountain View, CA)
Mozilla/P2PU School of Webcraft (January 2011 online)
JS Boot Camp (February 10-11, 2011 in Reston, Virginia, US)
Confoo.CA: Web Techno Conference (March 9-11, 2011 in Montreal, Canada)
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)

Tidbits

node-postgres – Pure JavaScript node.js PostgreSQL client
Bulletproof JavaScript benchmarks (by Mathias Bynens and John-David Dalton) – takes a look at various ways to measure JavaScript performance accurately
Thoughts on script loaders (Nicholas Zakas) – Zakas gives his opinion on some of the issues new script loaders should be solving and some they shouldn’t
On Script Loaders – the creator of LABjs responds to the newer HeadJS and ControlJS libraries
How I did the 1kb Christmas Tree – Román Cortés goes into detail about how he created the 3D canvas Christmas tree
EaselJS is a new library for working with Canvas, breaking up visual updates into separately-managed modules
ECMAScript 5.1 (PDF) clears up technical and editorial errors in the ECMAScript 5 specification
Firefox 4 Beta: Latest Update is Here, with WebGL – WebGL is now on by default in Firefox 4!
Delegation vs Inheritance in JavaScript (JavaScript, JavaScript) tries to get us away from the inheritance paradigm by using delegation instead
Glittery mouse (JS1k entry) – it sparkles!
Audio Sprites (and fixes for iOS) – Remy Sharp explains the ins and outs of playing audio on iOS
Tangram (Chinese) is a JavaScript library by Chinese developers at Baidu, optimized for Chinese users
Developers Harness New Accelerometer and Gyroscope Support in Mobile Safari – watch some demos of developers playing around with the new APIs
longTap is the new Hover! Announcing Hoverable.js – a new jQuery plugin for touch devices
Zombie.js – insanely fast, headless full-stack testing using node.js
(Audio) Andrew Dupont on Prototype, Scripty2 and Other Community Goodness (JSConf Live) – some talk about the state of Prototype and other frameworks

ControlJS

ControlJS is a new tool by Steve Souders that’s been introduced over a series of blog posts. Coming from Souders, you know it’s got to be about performance! In particular, ControlJS is for making scripts load faster, which is accomplished by async loading, delayed execution, and overriding document.write (which is often used by ads).

Tutti

Tutti is a new console tool for testing JavaScript. So what’s so different? You can run it on different browsers simultaneously!

All you do is go to the site and create a “room”, then copy the link into another browser. Now everything you run on the command line will be run on both browsers!

You can run it on mobile devices, which takes away the pain of trying to type in JavaScript statements on a touchscreen.

Minute With Node.js

Minute With Node.js is a new podcast from the folks who put out A Minute With Brendan.

The first entry, “Streams, Streams, Streams”, is definitely over my head, but it’s an interesting listen for anyone riding the node.js wave.

Tipped

Tipped is a new JavaScript framework specifically for making all variations of tooltips. It uses BridgeJS to enable it to ride on top of multiple JavaScript libraries (Prototype, jQuery, or MooTools).

One awesome thing about this is that all the tooltip demos are right on the main page. Each icon you hover over show you a tooltip displayed with a new configuration. With these easy demos, you can pretty much figure out on the spot if Tipped would be useful for your own site.

Releases

node-v0.3.2
Zepto.js 0.3

Upcoming Events

JS Boot Camp (February 10-11, 2011 in Reston, Virginia, US)
JSConf 2011 (May 2-3, 2011 in Portland, Oregon, US)
NodeConf 2011 (May 5, 2011 in Portland, Oregon, US)

Tidbits

What to Read to Get Up to Speed in JavaScript (Rey Bango)
HTML5 Canvas Tutorials – all sorts of canvas experiments
Roll your own JavaScript lambda syntax – trying to improve the JavaScript syntax for anonymous functions
Mozilla Labs Hacks – a place for not-so-polished Mozilla Labs projects that we can experiment with. Included is Emscripten (compiles C/C++ to JavaScript), doctest.js (testing framework for JavaScript), and Doctor JS (code analyzer)
CamanJS Benchmark – Firefox 4 is kicking Chrome (dev channel)’s ass – some evidence that Firefox is quite faster than Chrome in some cases
(Audio) JavaScript, Hyperspeed (A Minute With Brendan)
Installing Node and npm (by Isaac Schlueter on the Joyent blog)
Global eval() in JavaScript
The truth about non-blocking JavaScript (Nicholas Zakas)
Strict Mode Is Coming To Town (Douglas Crockford)
Announcing ECMAScript 5.1

Crankshaft for V8

Crankshaft is a new JIT compilation infrastructure for V8, the JavaScript engine that powers Chrome and node.js. It offers very significant speed gains and has increased V8’s performance by 50% on their its own V8 benchmark suite, as well as increase the page load performance by 12% for JavaScript-heavy pages such as Gmail.

There’s also an interesting note explaining that Crankshaft has a less noticeable effect for smaller scripts, such as those in the SunSpider benchmark:

“The idea is to heavily optimize code that is frequently executed and not waste time optimizing code that is not. Because of this, benchmarks that finish in just a few milliseconds, such as SunSpider, will show little improvement with Crankshaft. The more work an application does, the bigger the gains will be.”

As always in this friendly JavaScript engine arms race, Mozilla was at the ready with a friendly response by David Mandelin, which included his analysis and pointed out some of the new concepts Crankshaft brings to the table. He also mentions, most importantly, that Mozilla’s own JavaScript engine JaegerMonkey won’t get left behind.

WebSockets disabled by default because of caching proxy vulnerability

WebSockets has now been disabled by default in Firefox and Opera due to a security vulnerability detailed in this paper.

This post at the Pusher App blog offers a bit of a level-headed explanation, explaining that the vulnerability isn’t with WebSockets itself, but with buggy caching proxies which are susceptible to cache poisoning. It offers the explanation that the vulnerability was detected with Java and Flash clients, and has probably been in the wild for quite a while with technologies other than WebSockets. It’s only now come up likely because of the expected scrutiny and poking around on a new up-and-coming technology like WebSockets.

It’s interesting to note that Chrome was going to follow suit and also disabled WebSockets by default, but decided to leave it on, in favor of using a different handshaking mechanism (CONNECT) that appears to be immune to the vulnerability.

Christmas tree in canvas (JS1k)

With the Christmas JS1k competition under way, a few entries are starting to make the rounds! This canvas-based 3d rotating Christmas tree is quite impressive all on its own, and even more impressive considering it’s 1023 bytes, just one character short of the 1k limit.

Releases

JavaScriptMVC 3.0: Good To Go! – Jupiter JavaScript Consulting
Popcorn.js 0.2 Facelift – Popcorn.js 0.2 Facelift – Bocoup Web Log
qooxdoo 1.3

Upcoming Events

Node.js Camp SF (Dec 14, 2010 in San Francisco)
The Faster Websites Online Conference (Dec 16, 2010 online)
JS Boot Camp (February 10-11, 2011 in Reston, Virginia, US)
JSConf 2011 (May 2-3, 2011 in Portland, Oregon, US)
NodeConf 2011 (May 5, 2011 in Portland, Oregon, US)

Tidbits

A Web of Sync: Sencha developer James Pearce discusses MVC and the open web stack.
JavaScript Advent Calendar 2010 のリンク集-: a Japanese JavaScript Advent Calendar in a JSON object on GitHub.
JavaScript Snow: DHTML Snowstorm: by Flickr developer Scott Schiller
htracr: a packet sniffer and visualisation tool for HTTP (in node.js)
JavaScript has become the most popular language on GitHub (overtaking Ruby).
LivelyCouch: a framework that integrates Node.js with CouchDB and is driven by HTTP events
jquery Mobile + CouchDB: Part 1 – Getting Started
oia: A port of the Io programming language to Javascript.
Implementing a Fixed Position iOS Web Application
The Latest Updates to JavaScript 1.8.5
Loading Javascript Modules | Programming, Languages, Tools
The Big List of JavaScript, CSS, and HTML Development Tools, Libraries, Projects, and Books – Rey Bango
Namespacing in JavaScript | JavaScript, JavaScript
stackJS: A javascript module loader and dependencies handler
PHP Advent 2010 / JavaScript for PHP Developers
BitmapData.js: HTML5 Canvas API implementation of the AS3 BitmapData class.
InfoQ: Yehuda Katz Discusses SproutCore
Font events: Using JavaScript callbacks « The Typekit Blog
DailyJS: Node Tutorial Part 5
High Performance Web Sites :: Evolution of Script Loading
Backbone.js: Introducing The Backbone Store! by Elf Sternberg
HTML5 Script Execution Changes in Firefox 4 Beta 7
sprite.js: a framework that lets you create animations and games using sprites in an efficient way
capuchin: A JavaScript implementation running on the Rubinius VM
Coding Better Object-Oriented JavaScript with Closure Compiler
Animating Isosurfaces with WebGL and Workers

Head.js

Head.js is a sort of mashup of a script loader, a feature detector, and an HTML5 shiv/shim in just over 2kb of JavaScript. It gives the developer different configurations for loading and execution of scripts. For instance, you can load in parallel and execute either in order or in the order they arrive.

There’s also CSS3 feature detection which is heavily influenced by Modernizr, meaning that the results of the feature detection are added as classes on the HTML tag (targeted through CSS via “.boxshadow” or “.no-boxshadow” for instance). These detected features are also added through JavaScript to the “head” namespace variable. Head.js also adds convenience classes for browser detection (”.ie6″ and “.lt-ie8″ [less than IE8]) and screen size detection (”.lt-640″ and “.lt-1024″).

And last but not least is an HTML5 shim/shiv to make new HTML5 elements styleable in older version of IE!

There’s quite a lot packed into this little file!

Free eBook: Let’s Make a Framework

Over the course of the year, Alex Young posted a series of articles on how to make a JavaScript framework. Now he’s packaged it all up and made it available for free in a variety of formats!

The book details how to implement JavaScript classes that can inherit and extend, how to create a selector engine, deal with events, support touch screen devices, and all the other nitty-gritty details.

Ben the Bodyguard

Ben the Bodyguard is an upcoming iOS security product, and its site has gotten a bit of hype for the way they’ve decided to explain their product. As you scroll the site, a fixed-position character appears to walk down the street as his surroundings pass by around him, triggering speech bubbles and events at certain times.

We know JavaScript-based sites are event-based, and most of us are used to thinking about these events in terms of clicks. On this site we’re still in that event-based world, but all the events are triggered by the scrollbar instead of clicks. Just think of the scrollbar as an interactive timeline.

It’s just a fun interaction that’s not terribly hard to implement, but its execution is unique. It also works on mobile, and is somewhat hilarious to watch with a momentum scroll on an iPhone. In other words, go check it out!

Webdev Advent Calendars

It’s that time of year again! Tons of web geek advent calendars for you to read:

• 24 Ways
• Performance Calendar
• HTML5 Adventure Calendar
• PHP Advent 2010
• WordPress Advent Calendar

Upcoming Events

Mozilla Labs Gaming in London (Dec 6, 2010 in London)
Mobile Monday Silicon Valley (Dec 6, 2010 in San Francisco)
D: Dive Into Mobile (Dec 6-7, 2010 in San Francisco)
Times Open – Hack Day (Dec 8, 2010, New York, NY)
Node.js Camp SF (Dec 14, 2010 in San Francisco)
The Faster Websites Online Conference (Dec 16, 2010 online)

Releases

Firebug 1.6.0
LABjs 1.0.4 (via Badass JavaScript)

Tidbits

Audio: ECMA, TC-39, and Bears – Oh My! (A Minute with Brendan)
Flapjax (via Badass JavaScript)
Sheet.js (via Badass JavaScript)
JSON and JSONP
Ext JS 4 Preview
JavaScript in Ten (arbitrarily long) Minutes
Video: Lots of videos from YUIConf 2010 have been posted
You Must Learn JavaScript
DepthJS is a browser extension (currently Chrome) that allows the Microsoft Kinect to talk to any web page.
Keep a node.js server up with Forever

iOS 4.2 brings Accelerometer and WebSockets support

The recently released iOS 4.2 brings some major additions to mobile Safari, including accelerometer and gyroscope support (through the DeviceOrientation API, WebSockets support, and TrueType fonts support.

For acceleration, there’s now a new “ondevicemotion” event to tinker around with. For the gyroscope (for devices that support it), the data can be captured from the existing “ondeviceorientation” event.

It’s good to see some major progress in mobile Safari, which is now trying to keep pace with the rapid advances Android is making. Mobile Safari, as far as I can tell, is the first mobile browser to implement WebSockets. We’ll see if the impending (and overdue) release of Android 2.3 Gingerbread will do the same.

Colour.js

Colour.js is a small simple library for converting between CSS color formats. What this means is that it can handle anything from named colors (”black”, “white”, etc.) and hexadecimal colors to the newer RGB/RGBA and HSL/HSLA formats.

If you’re already familiar with HSL (hue, saturation, lightness), you’ll know it’s relatively simple to lighten an existing color. For instance, when looking at a prototype of the page you’re working on and deciding that the color hsl(0, 50%, 50%) should be lightened, all you do is increase the lightness value a bit: hsl(0, 50%, 60%)

I know what you’re thinking: “I thought I was reading JavaScript news, not CSS news?” Here’s where Colour.js comes in. Say you’re working with RGB (red, green, blue) color formats instead, and you want to lighten the color rgb(0, 100, 150) a little bit. Oh no, that’s almost humanly impossible! Colour.js can compute this value for you with a little bit of magic:

Colour("rgb(0, 100, 150)").lighten(10).toRGBString(); //"rgb(0,134,201)"

W3C drops the Web SQL Database specification

During the summer the W3C stopped work on the Web SQL spec and slapped this notice on the page: “This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.”

In other words, all the browsers implementing the spec chose to use Sqlite to implement the spec, but the W3C felt it was necessary for at least one browser to implement the spec with another database. The W3C didn’t want to tie the spec to a particular SQL implementation.

Now just last week the W3C put up a bigger and scarier-looking announcement on the page: “Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.” To me this looks indistinguishable from a big old “DEPRECATED” banner at the top of the page, and reactions on Twitter have been similar.

What’s now unclear is how the browsers currently supporting Web SQL databases will handle this. There’s undoubtedly many applications that have now been written that depend on the Web SQL database, and it wouldn’t exactly be pretty having the rug pulled out from under them by removing support. In any case, what is now clear is that the indexedDB spec, just recently implemented in Chrome, is now king.

Upcoming Events

Mobile Monday Silicon Valley (Dec 6, 2010 in San Francisco)
D: Dive Into Mobile (Dec 6-7, 2010 in San Francisco)
Node.js Camp SF (Dec 14, 2010 in San Francisco)

New Releases

Prototype 1.7 released
SproutCore 1.4.4 released
CoffeeScript 0.9.5 released (via Badass JavaScript)
Processing.js 1.0 released (via Badass JavaScript)

Tidbits

JS1k #2, Xmas edition
Preview: Enyo app framework for webOS, an upcoming cross-platform JavaScript UI framework developed by Palm/HP (check out the video as well)
förbind: a service for connecting users, running on node.js with socket.io (by Remy Sharp)
Book: Pragmatic Guide to JavaScript (Christophe Porteneuve)
The new BlobBuilder() interface enables Web Workers without external files (and saving HTTP requests!).
Video: Survey of 3rd-Party (Mobile) JavaScript Toolkits from the folks at Palm/HP
Playing with Audio Visualization
Arrhythmia.js, a new take on rhythm validation
xc.js, a framework for 2D canvas games
Dataview.js is a JavaScript library connecting data objects to selected view
Announcing cssess: The Bookmarketlet That Finds Unused CSS Selectors
How to Detect Nudity with Javascript
Paren-Free (Brendan Eich’s blog
Kinect + Javascript hack shows potential for web interfaces

Microsoft accused of cheating the SunSpider benchmark

Perhaps one of the biggest pieces of JavaScript news this week is that suspicions have grown that the Internet Explorer 9 team cheated the SunSpider JavaScript benchmark. The allegation resulted from Mozilla developer Rob Sayre finding a specific test that completed ten times faster than in any other browser.

Ars Technica has a great description that offers a fair explanation: that this optimization is due to dead code elimination. It also calls into question the SunSpider test itself, called “cordic”, that computes sine and cosines using a CORDIC algorithm. The trouble is that JavaScript has much faster sine and cosine functions built-in (Math.sin(), Math.cos()), making this cordic test a good opportunity for code elimination and replacement.

One of the things that makes this so suspicious is that making theoretically trivial changes to the test code results in the test taking around 20 times longer to complete. However, Ars Technica offers the fair explanation that we don’t necessarily know what Microsoft’s compiler is doing or how minor changes to the code are interpreted.

Google’s 20 Things I Learned About Browsers and the Web

Just yesterday Google released “20 Things I Learned about Browsers and the Web, a free ebook written in response to the 20 year anniversary of Tim Berners-Lee’s proposal for the World Wide Web.

This very short introduction to the web probably doesn’t have too much content you don’t know already, but the way it’s executed is the highlight. It almost seems like a Flash app, but then you realize it’s all built on open web technologies (the good old trifecta of HTML5, CSS3, and JavaScript). It utilizes the application cache (which means it works offline!), remembers the current page with the help of JavaScript local storage, and surprisingly utilizes HTML5 canvas to dynamically generate the page flip animations.

Read more on the Google code blog.

Essential JavaScript & jQuery Design Patterns For Beginners

Essential JavaScript & jQuery Design Patterns For Beginners by Addy Osmani (technical reviewer Alex Sexton) is a free minibook aimed to be a practical introduction to using design patterns. As such it introduces some patterns that might be familiar to you: the singleton, module pattern, revealing module pattern, facade pattern, factory pattern, etc.

For those looking for a bit more of a deep dive, I recommend reading Stoyan Stefanov’s JavaScript Patterns and then Ross Harmes and Dustin Diaz’s Pro JavaScript Design Patterns.

Upcoming Events

webOS Developer Day (Nov 20, 2010 in New York City)
D: Dive Into Mobile (Dec 6-7, 2010 in San Francisco)
Node.js Camp SF (Dec 14, 2010 in San Francisco)

Tidbits

Face detection jQuery plugin
Video: Using Clojure, NoSQL-Databases And Functional-Style JavaScript To Write Next-Generation HTML5 Apps – Stefan Richter on Vimeo
Video: Socket.IO: WebSockets for everyone by Guillermo Rauch (jsConf EU)
Highcharts – Interactive JavaScript charts for your web pages
Extending Objects with JavaScript Getters
Higher Order Javascript
JavaScripts tools – TextMate bundle
Audio: The arguments Argument (A Minute With Brendan)
Installing Node.js on a Dreamhost Shared Server
Emulating Lossy RGBA Images with HTML5’s Canvas Element

node-canvas: Server side HTML5 canvas API

node-canvas (on GitHub) is a project to get the HTML5 canvas API working on the server. On first glance this may seem completely pointless, but as you begin to think about it, it really makes sense. There are still a lot of people using browsers that don’t have canvas support, which makes it a pain to provide fallback content. A server-side implementation of the canvas API greatly helps this process.

Flickr, for instance, now uses the canvas element to display photo statistics. The fallback is simply a static image generated by the server, which is usually coded in PHP or some other server-side language. Using node-canvas, a developer could potentially copy the code used to render the canvas on the client and reuse the same code on the server. Now that is quite powerful!

Be sure to check out the screencast for a little demo.

jQuery Mobile Alpha 2 released

jQuery Mobile Alpha 2 has just been released, putting jQuery on track for one more alpha (or beta) release before a final 1.0 release planned for January 2011.

It looks like there’s been huge progress, as this second alpha release fixes about 200 tickets. It looks like many parts of the code have also been refactored for the sake of clarity and performance.

Here’s a few of the improvements:

• List views: up to 3x speed improvement (depending on the platform)
• Select menus: accessibility improvements
• Scrolling and fixed-positioned elements: improved performance
• URL navigation: overhauled and greatly improved. Addition of changePage method.
• jQuery UI Widget Factory: all jQuery Mobile widgets have been moved to this, giving the developer added control (ability to disable controls, etc.)
• Global Configuration: ability to override jQuery Mobile’s initial configuration to allow for customized loading of widgets, etc.

Also be sure to check out the jQuery Mobile 1.0a2 demos and documentation.

Gordon: An open source Flash runtime written in pure JavaScript

Gordon is quite an ambitious project by Tobias Schneider that allows you to run Flash SWF files in pure JavaScript. It does this by trying to utilize SVG for vector-based animation, as well as Web Workers to process large SWF’s as a background process.

It has support for all the big browsers, with the exception of all versions of Internet Explorer (even IE9?).

I know it’s now a knee-jerk response for developers to shudder at any mention of Flash, but this (along with other tools such as Sencha Animator) are paving the way in weaning the web off of its reliance on Flash.

Tidbits

Fasten Your Seatbelts – Firefox 4 Beta adds new JavaScript power and faster graphics
Firefox 4 Beta for Mobile is Now Faster and Sleeker
Usage of javascript libraries for websites
Audio: A Minute With Brendan: A Threaded Discussion
Ryan Dahl – Joyent & Node
Announcing a Node.js Book Project (Tom Hughes-Croucher)
Sencha Touch RC1 Released
Dynamically generating MIDI in JavaScript
Coverage of YUIConf 2010
GitHub: Top Languages (JavaScript is set to overtake Ruby)
How to stop a video or audio element downloading
YUI’s Luke Smith shows the evolution of YUI’s coding styles
Video: yayQuery Episode 20