(no podcast this week – Boo! Check back next week)

Chrome for Android

Google has just released a beta of Chrome for Android, which is available for those running Android Ice Cream Sandwich (aka “the 1%”). This isn’t JavaScript-specific news per se, but it is HUGE news for web devs who are all too familiar with the shortcomings of Android’s native browser.

As always, the Sencha folks have released an excellent overview of the features in their HTML5 Scorecard:

Compared to the stock Android 4 browser, there is a substantial number of additional HTML5 features: Web Workers, Web Sockets, HTML5 Input Types, overflow: scroll, requestAnimationFrame and more. That’s not to say that Chrome for Android has absolutely everything. As detected by the other handy testing site for HTML5, many newer features are absent, notably Shared Workers and WebGL. The video codec cold war also continues: Ogg Theora and Ogg Vorbis support is still not there — which is not a surprise.

Another very nice tool in Chrome for Android is Remote Debugging straight out of the box. This lets you use your Web Inspector on desktop Chrome to peer into the inner workings of the browser as it’s running on your phone.

Also check out Tony Gentilcore’s overview on his blog.

ASCII Fluid Dynamics fanciness

Designer and developer Nick Kwiatek’s website has been making the rounds because of a particularly cool (and fast!) ASCII art and fluid dynamics mashup. Go check out the site and try waving your cursor around. And yes, that means it sadly doesn’t work on mobile.

A quick peek underneath shows that Nick uses a fluid dynamics library built by Oliver Hunt. Nick then builds on top of it and adds a neat ASCII display out of it. Pretty cool, and also a good way to get your website/portfolio passed around once it goes viral.

“If you’re using Node.js, you’re doing life wrong”

This rant against Node.js has been floating around a bit this week, probably in part due to its troll-like sensationalist title. I could swear I saw this exact same article floating around a few months back, making the same arguments, but I suppose that’s just what you call a case of déjà vu. Aha, I remember what I’m thinking of: Node.js is Cancer (Ted Dziuba) – another purposefully sensationalist title.

In any case, it’s good to see counterarguments to Node.js being the general savior of all things backend. This is a short article, but there are several points to the argument: 1) V8 doesn’t belong on the server, 2) callbacks are hard to debug, and 3) the argument that asynchronous/nonblocking doesn’t necessarily mean scalable, or even fast.

Certainly the case can be made that V8 on the server side isn’t necessarily a good combination, as that’s not where it was originally intended to be. There will be bugs.

As for the argument against callback spaghetti: that’s certainly an issue, especially for those coming from classical language backgrounds. But that’s not to say there aren’t good tools or best practices to ease this burden – Node offers a (partial?) stack trace, and there is also a recommended pattern of naming what would usually be anonymous functions, so you can track down exactly where your code is blowing up.

As for the argument about nonblocking not necessarily meaning scalable: this is certainly true. Node.js can handle many connections on a single CPU, but that doesn’t mean a single CPU is going to be scalable for everyone’s needs. Folks are already learning how to remedy that obviously (I’m reminded of Matthew Eernisse’s talk from NodeConf 2011).

Probably the best counterargument to the article comes from actual usage at scale by large companies. If Node.js is so doomed to fail, it seems like it wouldn’t have been adopted and successfully used by these companies.

JS1K

JS1K is resuming its annual tradition of holding a competition to do amazing things in just 1K of JavaScript. The suggested theme this year is Love. If you’re interested in participating, check out the rules and keep in mind the deadline is March 14, 2012.

Already there’s some excellent entries, including this canvas rose by Román Cortés, with a blog post detailing how he did it. You may remember Román as the guy who made the awesome 3D canvas Christmas tree for the last JS1K.

Tidbits

The Future of JavaScript – take a peek today! – the Chrome team introduces some new JavaScript stuff you may not be aware is already available.

The good, the bad, and the ugly of scrolling animation sites

CORS for XHR in IE10

grunt is a task-based command line build tool for JavaScript projects

Enhance Your Website with the FullScreen API

Modernizr 2.5 has been released

HTML5 Doctor has a good overview post of the relation between the Media Capture API (HTML-only) and getUserMedia (navigator.getUserMedia in JavaScript)

JavaScript Weekly #65

Multimedia

(slides) Creating Responsive HTML5 Touch Interfaces (Steven Woods of Flickr)

(audio) HTML5 Audio: HTML5 + Flash (in a tree): Past, Present, Future? (Scott Schiller, Flickr)

(slides) jQuery Mobile Keynote – UK Conference

(audio) Herding Code 133: Derick Bailey on Backbone.js

(slides) Geo interfaces for actual humans (Eric Gelinas of Flickr)

(audio) Nonbreakingspace (NBSP) is a new podcast worth checking out. Currently there’s shows up with interviews with Paul Irish and Ethan Marcotte

GitHub Most Watched This Week (JavaScript)

twitter / bootstrap

bartaz / impress.js

Victa / curtain.js

jairajs89 / Touchy.js

tommoor / tinycon

Upcoming Events

(This isn’t a complete list. See more upcoming JavaScript events listed on Lanyrd)

JavaScript Conference (February 27, 2012 in Düsseldorf, Germany)

UtahJS (March 29, 2012 in Park City, UT, USA)

JSConf US 2012 (April 2-3, 2012 in Scottsdale, AZ, USA)

Breaking Development 2012: Orlando (April 16-18, 2012 in Orlando, Florida)

Mobilism 2012 (May 10-11, 2012 in Amsterdam, Netherlands)

JsDay 2012 (May 16-17, 2012 in Verona, Italy)

O’Reilly Fluent: JavaScript and Beyond (May 29-31, 2012 in San Francisco, California, USA)

BackboneConf 2012 (May 30-31, Boston, MA, USA)

Listen to this week’s podcast (February 6, 2012)

psd.js

psd.js is the beginnings of a Photoshop PSD parser in JavaScript! Right now it only essentially extracts metadata information – such as image size and layer information – but it’s off to a good start! You can even drag and drop files right into the page and have the information read out, although I was a big unsuccessful with some larger PSDs.

Eventually psd.js hopes to be able to output to PNG or canvas and extract information from single layers, so keep an eye on it, or better yet – help them out!

This sort of follows on the heels of trying to implement every format imagineable in JavaScript (see a compilation of all the formats available so far), and I suppose of the general desire to have a Photoshop-like image editor right in your browser.

turn.js

turn.js is a clever page-turning effect inspired by iBooks and elsewhere. It does work pretty smoothly on tablets and phones, at least on iOS, because it uses hardware accelerated transforms.

My only gripe is that it’s a jQuery plugin. Seems like there’s not a lot that should depend on jQuery here, but oh well. What I’d like to see next is something closer to the Flipboard-style page-turning. I got something like this almost working last year – maybe it’s time to dust off that code and get it working!

Ryan Dahl steps down from Node.js

(illustration by James Halliday)

This week marks the passing of the reigns of Node.js from Ryan Dahl to Isaac Schlueter, who created NPM. Ryan is said to be working on other research projects at Joyent and didn’t really want to get Node.js to get in the way.

Whatever the reasons, people seem ok with it. Personally, I think Isaac will be a bit of a better spokesman for the project. Ryan never struck me as a great speaker (I say this, being someone who’s not a great speaker myself!), and had more than a few talks that were a bit too rough around the edges. I think he had been getting better over time, though. But I’m sure we’ll see Ryan here and there still:

“Ryan is still the benevolent dictator … The FL is ‘for life’ and he’s not dead yet. Node will always be his project that he invented.”

Silicon Angle has a really well-written and well-researched story on the transition and a bit of insight into Isaac’s background. It concludes with some great advice by Isaac, possibly hinting at burnout – or avoiding burnout – being the reason for Ryan’s departure:

It’s clear that Schlueter loves programming, but he does warn against working too hard. “We as a technology culture need to learn how to stop burning out,” he says.

Schlueter took three months off in 2010 and didn’t work. He says it was a really refreshing way to clear his head. “Node wasn’t developed because Ryan was a Joyent employee,” Schlueter says. “It was developed while he was taking time off and living in Germany and had a great idea.”

“The insane startup culture work ethic thing is fine up to a point,” he says. “But you have to know when to step back and take a breather.”

As someone who basically did the same thing, as I spent three months in Japan last summer, I couldn’t agree more!

Tidbits

Touchy.js is a wrapper for dealing with touch events.

serenade.js is a new client-side MVC framework

Christian Heilmann lays down the particulars of classList (OR: why you should start learning native JavaScript instead of relying on libraries)

I think I’ve linked to this before, but it’s worth another look – a sort of Rosetta stone for jQuery and JavaScript.

Dart Synonym is a Rosetta Stone of sorts for translating JavaScript to Dart

ShareJS is a concurrent editing library, meaning that you can accomplish something similar to Google Docs (which lets multiple users edit documents at the same time). In fact, someone’s been editing the sample text field as I type this!

jquery-ajax-localstorage-cache is a jQuery plugin by Paul Irish for caching AJAX responses in localStorage

filtrr is an experiment with Instagram-style image filters in JavaScript

Node at scale: What Google, Mozilla, & Yahoo are doing with Node.js

Web Equation has a nice handwriting recognition tool for solving math equations

JPC2000: JavaScript Production Center is a mixpad that lets you drag and drop MP3s to play and mix at your heart’s content

Modernizr with Low Battery is a practical application of the new battery API. For instance, it lets you be conscientious about users’ low battery levels by scaling back transitions, animations, and other CPU/GPU-intensive operations when necessary.

A base64 encoder in 109 bytes

Remote Tilt is a tool by Remy Sharp to test accelerometer events – without the actual accelerometer!

JavaScript Optimization: Grunt.js

Using the Vibration API – Part of WebAPI

An Introduction to HTML5 web messaging

(Drama warning) A bit of drama between Yehuda Katz and Jeremy Ashkenas regarding Backbone and Ember

A canvas rose in 1k! and an explanation by the author

Understanding process.nextTick()

Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

Other roundups

The world’s abuzz with JavaScript news. May as well link to the other JS roundups here!

JS Monkey is a new weekly newsletter that’s just started a few weeks ago

Weekly Badass JS Roundup #7

JavaScript Weekly #64

Multimedia

(slides) Mobile & Desktop Cache 2.0: How To Create A Scriptable Cache

(audio) Build Tools (JavaScript Jabber)

(video) Advanced HTML5 JavaScript: Down ‘n Dirty (Kyle Simpson / getify)

(audio) The Javascript Show Episode 29: Backbone.js 0.9.0

(audio) The JavaScript Show Episode 30: jQuery Mobile 1.0.1

Releases

PhoneGap 1.4

Bootstrap 2.0

GitHub Most Watched This Week (JavaScript)

blasten / turn.js
alexmic / filtrr
twitter / bootstrap
jairajs89 / Touchy.js
visionmedia / uikit

Upcoming Events

(This isn’t a complete list. See more upcoming JavaScript events listed on Lanyrd)

An evening with the Flickr FE dudes (Bayjax) (February 6, 2012 in Sunnyvale, CA, USA)

jQuery UK 2012 (February 10, 2012)

HTML5 Game Jam (February 10, 2012 in Paris, France)

NodePDX (February 10-11, 2012 in Portland, Oregon, USA)

JavaScript Conference (February 27, 2012 in Düsseldorf, Germany)

UtahJS (March 29, 2012 in Park City, UT, USA)

JSConf US 2012 (April 2-3, 2012 in Scottsdale, AZ, USA)

Breaking Development 2012: Orlando (April 16-18, 2012 in Orlando, Florida)

Mobilism 2012 (May 10-11, 2012 in Amsterdam, Netherlands)

JsDay 2012 (May 16-17, 2012 in Verona, Italy)

O’Reilly Fluent: JavaScript and Beyond (May 29-31, 2012 in San Francisco, California, USA)

BackboneConf 2012 (May 30-31, Boston, MA, USA)

Listen to this week’s news roundup (January 30, 2012)

I really should have named today’s update “Planes, Trains and Automobiles”, since those were all involved with my commute this unusual morning! This week’s podcasts is surely enough recorded from SFO Airport, so I hope you enjoy the atmosphere and the occasional interruptions!

Enyo.js open-sourced

As you may already know, HP has open-sourced webOS and has just started making things available, starting with the release of Enyo (on GitHub), the JavaScript framework that powers webOS. The core of the library is designed primarily for mobile, so its aim is to be small (13KB gzipped), and is of course designed to be modular.

Want to get started? Here’s Enyo’s Hello World, which doesn’t look too bad:


new enyo.Control({
content: "Hello World from Enyo"
}).write();


While getting your bearings you can also have fun in the code playground, which lets you immediately see the output of your code.

Enyo reminds me of a cross between Sencha/ExtJS and other more JS-centric libraries. The result is a framework where pages and modules are written in JSON-like syntax, but allow customizations in user-defined functions, which wasn’t a functionality that seemed to be available with Sencha (at least from my cursory first glance). Choosing between the two, I think I’d definitely want to try Enyo first, especially given the fact that it was developed for mobile and seems a bit less bloated.

Since webOS also uses Node.js, it should be interesting to see the interplay between the two when more of the internals of webOS are revealed in the coming months.

Jed

Jed is an internationalization helper for JavaScript written by Alex Sexton. The name is a play on Jed Schmidt, who you may know as a JavaScript developer and translator living in Japan. The library itself is inspired by Mozilla’s own gettext.

HTML5 Please

HTML5 Please is a new effort from Divya Manian, Paul Irish, and friends, to give an all-in-one site with both HTML5 cross-browser support information as well as recommendations for polyfills and fallbacks. This information has been variously available on disparate sites, but has never been more easy than now!

When can I use and Modernizr do a great job in informing the users of available features and how to feature detect them. The Modernizr polyfill wikipage also does a good job of listing all the available polyfills. What we felt missing was the glue that bound all this information together, to tell the user what the best tool for the job was: either on its own, or with a polyfill or a sensible fallback.

Be sure to check out Divya’s introduction which comes with a backstory and everything!

WAT

You may have seen a short video with programmer humor floating around recently – that’s because it’s been making the rounds in all the usual places! The talk by Gary Bernhardt pokes fun at some weird things that happen in Ruby and JavaScript during type coercion. All this happens amidst roaring laughter (it doesn’t seem that funny, does it?). The whole thing leads up to this JavaScript gem, which you may have seen circulating separately a few months back:


Array(16).join("lol" - 2) + " batman"
> "NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN batman"


If you thought nothing productive could come from this video, Adam Iley is here to prove you wrong by showing you exactly what’s going on with each of these type coercion anamolies in his post The WHY of WAT.

Also be sure to check out the discussion on reddit.

Just for fun

And just for fun this week, Michael Wolfe has a funny and true answer to the question Why are software development task estimations regularly off by a factor of 2-3?

Tidbits

ECMAScript 6 support in Mozilla

The top 20 HTML5 games (.net Magazine)

Server-Sent Events (Remy Sharp)

Web Storage Support Test is a handy tool to check localStorage/sessionStorage/globalStorage limits in various browsers (as an aside, had anyone heard of globalStorage before?)

PhotoBooth Style Live Video Effects in JavaScript and WebGL

The client-side templating throwdown: mustache, handlebars, dust.js, and more

jsgif: A GIF player in JavaScript

Creating Files through BlobBuilder

Binary Tetris

Weekly Badass JS Roundup #6

JavaScript Weekly issue #63

Here’s a pretty crazy/impractical WebGL reader demo

Elijiah Manor has been messing around with emoticons in JavaScript

…and on that note of character encoding in JavaScript, does JS support UCS-2 or UTF-16?

AMD support for Underscore and Backbone (James Burke)

Font.js: A Powerful Font Toolkit for JavaScript (Badass JavaScript)

Seriously.js: A Realtime, Node-Based Video Compositor for the Web (Badass JavaScript)

Zip.js is a library for zipping and unzipping files via the Filesystem API

node-google-voice is a Google Voice API for node.js

MorningStar – A step-sequenced bassline synthesizer using JavaScript and HTML5 Canvas

Deferred and promise in jQuery

Getting Rid of Synchronous XHRs explains the phasing-out of synchronous/blocking XHR requests

The Drumlet is a new drum machine library

Multimedia

(audio) Episode 28: JavaScript MVC Frameworks

(slides) The Edge of HTML5 (Eric Bidelman)

(audio) JavaScript Jabber is a new JavaScript podcast with AJ O’Neal, Charles Max Wood, Jamison Dance, and Yehuda Katz

(video) Meet Crockford’s JSDev

(audio) The Changelog Episode 0.7.1 – Spine, and client-side MVC with Alex MacCaw

GitHub Most Watched This Week (JavaScript)

twitter / bootstrap
enyojs / enyo
vesln / todo
SlexAxton / Jed
LearnBoost / up

Upcoming Events

(This isn’t a complete list. See more upcoming JavaScript events listed on Lanyrd)

Node Summit (January 24-25, 2012 in San Francisco, California, USA)

jQuery UK 2012 (February 10, 2012)

HTML5 Game Jam (February 10, 2012 in Paris, France)

NodePDX (February 10-11, 2012 in Portland, Oregon, USA)

JavaScript Conference (February 27, 2012 in Düsseldorf, Germany)

UtahJS (March 29, 2012 in Park City, UT, USA)

JSConf US 2012 (April 2-3, 2012 in Scottsdale, AZ, USA)

Breaking Development 2012: Orlando (April 16-18, 2012 in Orlando, Florida)

Mobilism 2012 (May 10-11, 2012 in Amsterdam, Netherlands)

JsDay 2012 (May 16-17, 2012 in Verona, Italy)

O’Reilly Fluent: JavaScript and Beyond (May 29-31, 2012 in San Francisco, California, USA)

Listen to this week’s podcast (January 20, 2012)!

iOS Orientationchange Fix

jQuery Mobile’s Scott Jehl has released iOS-Orientationchange-Fix (read his blog post). This has been a persistent annoyance on iOS since its release. You may be familiar with the mobile viewport tag, which allows you to properly fit sites to fill the screen and be sized appropriately (think of the mobile viewport as a sort of magnifying glass that can be zoomed in or out). The problem is that on iOS, rotating the screen screws around with the viewport, leaving the user zoomed-in when they rotate into landscape mode, for instance.

The easiest fix has been to forcibly constrict the min/max values of the viewport to 1 and disable the user pinch-zooming (all of these things can be specified with parameters in the viewport tag). But that’s no good, because now we can’t zoom in on things.

Another attempt at a soluton was by Shi Chuan, who tried taking advantage of iOS gesture events to dynamically change the viewport tag when the user pinch-zoomed.

This latest attempt by Scott Jehl cleverly taps into the device’s gyroscope, which tracks changes in the device’s orientation (not to be confused with the accelerometer, which tracks changes in motion). In JavaScript land this is the deviceorientation event. This is getting fired off constantly, checking for when the user is rotating the device, in the hopes that we can fire off some code before the orientationchange event gets fired. This code checks orientation and then dynamically changes to viewport tag to prevent viewport zooming. After the orientation changes, the code re-enables zooming for the benefit of the user. Whoo!

My only concern here is that the deviceorientation event gets fired off constantly, which is a potential memory hog and battery drain. It would be better to put the function call in a setTimeout (borrowing a performance pattern from window resize and scroll events), but I suppose the danger is that if the user rotated too fast, the function would never get fired.

One last thought on this – from my iOS app developer friends, I’ve heard that app developers get access to more events, such as events that fire before, during and after device orientation events. Other than Apple fixing the zooming issue themselves, that would be the next best thing, and would give us web developers a lot more goodies to use in other applications.

So, Apple, how about a beforeorientationchange event, eh?

JavaScript Patterns

Shi Chuan, of Mobile HTML5 Boilerplate fame, has compiled JavaScript Patterns, a set of best practices in JavaScript, culled together from a variety of articles and books. Most entries follow the helpful approach of showing the antipattern first (what not to do), followed by the right way to do it.

As with any explanations that are boiled down and simplified, some of the meaning and the details may get lost, so Shi has made sure to include a link to the original source where he could. The last thing we in the JavaScript community want is for these things to become dogma without any justification!

It looks like Shi is also starting a series of JS Patterns posts on his blog, going into more details about he patterns, so be sure to follow up there!

jQ.Mobi

jq.Mobi (by appMobi) is another new mobile framework targeted at iOS and Android specifically. It jumped on the jQuery-is-too-bloated bandwagon and asserts that it can do things better, smaller, faster, while retaining the familiar jQuery-like API everyone’s so familiar with already.

Wait, doesn’t this sound familiar? What about zepto.js? jq.Mobi insists that it can do things better than both jQuery and zepto.js. What do we say to that? Jsperf or it didn’t happen!

To be fair, jQ.Mobi does beat both jQuery and zepto.js in the main jsperf test they link to. But a closer look reveals that this is only a test of a DOM append method, something that is necessary but not sufficient for a fair comparison between the frameworks. I can’t find references to any other tests that were run – I want to be charitable, but as far as I can tell, the speed of the entire framework is based on a test of only one method in the library.

Tweaking the jsperf URL, we can see that there’s two previous iterations of tests, jqm1 and jqm2. Unfortunately, the latter test looks to still be in development, and the former is an earlier version of the append test before optimizations were made to the framework.

There’s been a lot of development on both jQuery and zepto.js at this point, and it’s easier to chuck them both out and start from scratch (see NIH), so I think it’s fair to remain skeptical on this one until we see more exhaustive performance comparisons. In terms of filesize, jQ.Mobi is very trim, so it has the advantage of filesize at this point, so at least it has that going for it. In terms of performance, I’ll stay skeptical at this point, although it would be certainly be awesome to see some true alternatives to the other big libraries out there!

(side note: there’s also some controversy brewing over the naming of the library, if you like geek drama)

Tidbits

Nokia Maps 3D WebGL is a worthy competitor to Google Maps, which also now has an experimental WebGL mode. Is WebGL the future of map apps?

Textarea Auto Resize (jQuery Plugin)

Short Musings On JavaScript MV* Tech Stacks (Addy Osmani)

What You May Not Know About jQuery

traversty is a simple headache-free DOM traversal library

Simplicity and JavaScript modules is an argument for AMD modules, and AMD is Not the Answer is a counterpoint

Introducing ObjectHandler is a clever use of passing arguments through addEventListener (didn’t know you could do that!), but I’m unsure about the usefulness of what is actually being proposed

What’s Coming in jQuery Mobile 1.1 and Beyond

The Top 10 Javascript MVC Frameworks Reviewed

Here’s a GameBoy Color emulator in JS!

es6-collections is a collection of ES6 shims/polyfills

Happy Fun Coding is a jsfiddle/jsbin/jsdo.it-style code playground specifically targeted at coding games in JavaScript.

browser.js is a collection of JavaScript hacks and workarounds implemented by Opera

filer.js is a wrapper library for the HTML5 Filesystem API, which aims to make it more accessible to coders more familiar with UNIX-style commands such as ls, cp, mv, etc.

An Object is not a Hash (Guillermo Rauch)

Captain Obvious on JavaScript and some ensuing discussion on reddit

resumable.js – resumable/restartable uploads via the HTML5 File API

Different flavors of JavaScript

Why is ಠ_ಠ a valid JavaScript variable name, but ♨_♨ is not? (via reddit)

node 0.7.0 unstable has been released

Multimedia

(video) AustinJS videos

(slides) Mobile Device APIs (James Pearce)

(slides) Slides from meetjs summit

(video) Mr. Bool – Course JavaScript – lots of free JS videos for beginners.

GitHub Most Watched This Week (JavaScript)

twitter / bootstrap
bartaz / impress.js
steelThread / redmon
shichuan / javascript-patterns
appMobi / jQ.Mobi

Upcoming Events

(This isn’t a complete list. See more upcoming JavaScript events listed on Lanyrd)

Node Summit (January 24-25, 2012 in San Francisco, California, USA)

jQuery UK 2012 (February 10, 2012)

HTML5 Game Jam (February 10, 2012 in Paris, France)

NodePDX (February 10-11, 2012 in Portland, Oregon, USA)

JavaScript Conference (February 27, 2012 in Düsseldorf, Germany)

UtahJS (March 29, 2012 in Park City, UT, USA)

JSConf US 2012 (April 2-3, 2012 in Scottsdale, AZ, USA)

Breaking Development 2012: Orlando (April 16-18, 2012 in Orlando, Florida)

Mobilism 2012 (May 10-11, 2012 in Amsterdam, Netherlands)

JsDay 2012 (May 16-17, 2012 in Verona, Italy)

O’Reilly Fluent: JavaScript and Beyond (May 29-31, 2012 in San Francisco, California, USA)

Hello there, it’s been a while! Oh dear, another year has passed. And it seems that I’ve been stocking up a year’s supply of JavaScript tidbits to dump on the unsuspecting populace! Ok, not quite, but I do have quite a backlog, that’s somewhat in chronological order, starting with the newest items:

David Walsh has a demo of Mozilla 11’s new Battery Status API

js.js is another new JavaScript interpreter written in JavaScript (why oh why?)

The craziest Javascript implementations is a roundup of some of the more ambitious and crazier projects in JavaScript (face detection, Java VM, x86 emulator, etc).

The pitfalls of using objects as maps in JavaScript

2011: A Badass JavaScript Year In Review

sandbox is a JavaScript sandbox for node.js

Improving Function.prototype.bind

Deobfuscating malicious code layer by layer

localStorage Read Performance

Proposal: Scripting detection using CSS media queries

Vanilla JavaScript FTW translates jQuery to plain old JavaScript. It’s time to learn straigh tup JavaScript! Use polyfills if you need to!

Deobfuscating malicious code layer by layer

Subtyping JavaScript built-ins

CoffeeScript trolls Node.js

A Fix for the iOS Orientationchange Zoom Bug

JSDev is a new project by Douglas Crockford (introduced in his Google+ post)

JavaScript weekly #60

Understanding JavaScript OOP

W3C: Speech JavaScript API Specification

Firebug 1.9 New Features

AMD – Why, What and How (by Mike Wilcox)

impress.js is a fantastic new slideshow framework that uses 3D transforms to great effect. The demo is vaguely reminiscing of the style of “typography” videos.

qooxdoo 1.6 has been released, and has new features such as offline storage helpers, support for CSS3 animations/transforms, and new mobile UI widgets.

The developer’s guide to mobile frameworks

esprima is a JavaScript parser written in JavaScript, designed to be educational than anything else

Fabric Engine Server Performance Benchmarks – interesting benchmarks that pit compiled JavaScript (via the Fabric Engine) against compiled C++

JavaScript Scope and Context – Not the Same Thing! (simply stated: functional scope versus object context [i.e. "this"])

Let’s have a look at some recently landed Web APIs for Firefox – John Hammink takes us on a cruise through the camera API, indexedDB api, phone vibrate api, etc

Paving the way for open games on the Web with the Gamepad and Mouse Lock APIs

nodeinfo is phpinfo() for Node, which displays environment and system information

buster.js is a new JavaScript test framework currently in beta

A Case Against Using CoffeeScript

Up Close and Personal with HTML5 IndexedDB

Discussion: JSON vs. Markup Fragments

XMLHttpRequest (XHR) is now a “living” document without a particular version number

iWebInspector is a remote debugging tool for the iOS Simulator

BicaVM: A JVM Implementation in JavaScript

when.js is a lightweight Promise and when() implementation

A Look at Popcorn

Visual Event is a bookmarklet that helps figure out which events are attached to particular DOM nodes. It goes a bit beyond the tools available in Webkit Inspector (in Safari/Chrome) and “decodes” the events added by various popular JS libraries.

Flash is dead. Long live the internet.

Thomas Fuchs asks: what’s the best way to force an element to redraw when it acts up (Webkit)

Shapesmith is a visual WebGL editor that looks so easy to use that even I could (maybe) use it!

Adobe is also shifting its focus away from Flex

You can now import data directly from Google Analytics into caniuse.com, letting you know how many users will be able to see new browser features you may decide to implement on your site

node just surpassed Ruby on Rails in terms of watchers on Github (does that count for anything?)

Production Teardown: Flickr’s Asynchronous Script Loading

Using CORS

Video Subtitling and WebVTT

The W3C has a nice friendly page for getting started with the Audio API, including goodies such as examples of looping without gaps

Microsoft has put up a really slick demo of the Windows Phone 7 interface in HTML/CSS/JS. Try it on your phone – looks like it only works with touch events.

dhteumeuleu – nice collection of JavaScript animation experiments

David Mandelin has posted the latest issue of hisJS Development Newsletter

KendoUI is a new UI framework targetting desktop and mobile (you pretty much have to these days!). Check out the demos here: http://demos.kendoui.com/.

PPK has discovered that you can use iOS’s Siri as a screen reader of sorts

The Script Tag (Chris Coyier) – what script tag variations work and which ones don’t?

Are We Playing Yet? is a handy HTML5 audio test suite. Think of it as Modernizr just for audio. Sweet!

WebGL around the net, 1 December 2011 – a collection of awesome WebGL links

Generating RSS feeds from a Backbone.js Collection in Node.js

(slides) Here’s a demo of the camera and microphone apis (navigator.getUserMedia)

Blazing fast node.js: 10 performance tips from LinkedIn Mobile

Multimedia

(audio) Full Frontal 2011

(video) Paul Irish: HTML5 For a Cross-Browser World (London JS)

(video) Max Goodman – Making Waves: A Primer in Pure JS Generated Audio

(video) Scott Schiller: Adding sound to HTML

(video) YUIConf 2011 videos and slides

(slides) Scalable JavaScript Application Architecture (Nicholas Zakas) – an oldie but goodie

(slides) ECMAScript 5 (Damian Wielgosik)

(slides) Large-scale JavaScript Application Architecture (Addy Osmani)

(slides) Polyfilling the HTML5 Gaps (Addy Osmani)

GitHub Most Watched This Week (JavaScript)

ckrack/fbootstrapp
bartaz/impress.js
codejoust/session.js
twitter/bootstrap
lokesh/color-thief

Upcoming Events

(This isn’t a complete list. See more upcoming JavaScript events listed on Lanyrd)

jQuery UK 2012 (February 10, 2012)

HTML5 Game Jam (February 10, 2012 in Paris, France)

JavaScript Conference (February 27, 2012 in Düsseldorf, Germany)

UtahJS (March 29, 2012 in Park City, UT, USA)

JSConf US 2012 (April 2-3, 2012 in Scottsdale, AZ, USA)

JsDay 2012 (May 16-17, 2012 in Verona, Italy)

Listen to the podcast for November 11, 2011

insertAdjacentHTML

Mozilla has a nice overview of insertAdjacentHTML, a DOM function that’s intended to supplement innerHTML. It’s a bit less destructive and plays nicely with content that’s already in the DOM. For instance, whereas innerHTML completely blows away whatever is inside the container element, insertAdjacentHTML has handy positioning features (beforebegin, afterbegin, beforeend, afterend) that allows the newly inserted content to work around existing content.

Classes in JavaScript?

While there will always be a clamour for “keep your Java out of my JavaScript!”, it seems that classes might be finally coming to the next iteration of JavaScript. To be fair, classes aren’t specific to Java, but come from C++ and other languages that implement more of a classical inheritance paradigm which a lot of non-frontend folks are probably most familiar with.

There’s a problem, however, as JavaScript uses a different paradigm, that of prototypal inheritance. It seems that any implementation of classes would then have to be simply “sugar” on top of the prototypal model.

There’s also a problem with backwards compatibility. If we introduce new class keywords (”class”, “extends”, etc.), older implementations of JavaScript will not recognize the syntax and will fail.

There been some discussion recently over how exactly classes should look in JavaScript. It seems like it’s going to happen one way or another, it’s just a matter of time. So let’s at least do it well, right?

Here’s an awkward proposal from Mozilla’s es-discuss mailing list, which uses a really strange syntax (<| !?). Yehuda Katz also offered up his own version.

The creator of CoffeeScript, Jeremy Ashkenas, also weighed into the debate with his own succinct version, which garnered a lot of attention. In response to Jeremy’s proposal, Brenden Eich offered his own modification.

Finally, Nicholas Zakas offered a summary of Jeremy’s proposal and offered his own backwards-compatible version.

Twilight of Flash and Silverlight

Interesting news this week as Adobe laid off hundred of folks to make room for more of a focus on HTML5 technologies. It also announced plans to cease development of mobile Flash.

In related news, Microsoft may halt development on Silverlight. This wouldn’t come as a surprise, as Microsoft has also been shifting more towards HTML5 and its related open web technologies, away from more proprietary technologies.

Yahoo! Cocktails

Yahoo! recently announced Livestand, another Flipboard clone for iPad. It’s actually surprisingly well-polished and worth a look. Most of it is powered by web technologies in web views, which is pretty impressive.

The backing technologies include YUI3 and Node.js for the middle tier, which Yahoo calls Cocktails. Cocktails is made up of a variety of technologies, notably what Yahoo! calls Mojito (the Node.js MVC) and Manhattan (the cloud hosting environment).

From what I understand, Yahoo is planning on open-sourcing Cocktails, so it will be interesting to see if it’s successfully adopted anywhere else outside of Yahoo!.

Libraries and Frameworks

Mulberry is a new mobile framework from Toura (check it out on Github)

benchmark.js is a multi-platform benchmarking library that supports high-resolution timers

zappa is a CoffeeScript-optimized interface to Express and Socket.IO

JSBoy – JavaScript Gameboy Color Emulator

*[data-markdown] – a very simple markdown-to-HTML script by Paul Irish

flatiron is an unobtrusive framework initiative for Node.js, aiming to let developers put together the building blocks of their applications as they see fit

Moment.js is a lightweight library for date parsing, manipulating, and formatting

Notifier.js is a Growl-like notifier for webpages (requires jQuery)

Tidbits

Building a slimmer jQuery (heads up: live() is now deprecated)

The trap of the performance sweet spot – the tradeoff of performance for code readability

JavaScriptCore, the WebKit JS implementation – a fascinating exploration of JavaScriptCore compared to other JS engines. A dense read but interesting if you’re interested in lower-level stuff.

Terse JavaScript 101 – part 2

jQuery now has a standards team to represent the jQuery community to standards bodies and browser vendors

David Flanagan is working on dom.js at Mozilla – an implementation of the browser DOM in JavaScript

WebGL Inspector: An advanced WebGL debugging toolkit

Optimizing Vector Usage in JavaScript (and other high-level languages, too)

What are some bad jQuery practices to avoid? (Quora)

Nodefest Tokyo summary (Japanese)

Boulderdash in JavaScript

How to Scrape Web Pages with Node.js and jQuery

How One Missing “var” Ruined our Launch (or, as someone on Twitter phrased it, “The dangers of brogramming”). Run JSLint/JSHint, people!

Andrew Hedges has a test page for the new JavaScript fullscreen API

Enabling & Using WebGL on iOS – if you hack at it hard enough, you can use WebGL in web views on iOS (or with iAd)

Backbone.js Resources

IE10 has HTML5 history! (pushState, replaceState, etc)

Facebook Acquires Team Behind HTML5 App Platform Strobe; SproutCore Lives On

Paul Hayes has whipped up a polyfill for media query list listeners, events that fire when media queries are matched. It seems like the most common use case is a screen rotation, in which case it’s probably easier just to tie into the onresize event, but in the case of more complicated media queries, this is for you!

Function.prototype.notifier (Web Reflection) – for monitoring the lifecyle of functions

IE10 is by far the best-performing browser in test262 (official ECMAScript compliance test) – only 6 fails, compared to Firefox 8’s 164 fails and Chrome 16’s 415 fails!

Organizing your application using Modules (require.js)

Mozilla’s wiki for their JoystickAPI

Releases

jQuery 1.7

vows 0.5.13

Node 0.6.0

AmplifyJS 1.1.0

Popcorn.js 1.0

RightJS 2.3.0

Hydra.js 1.2.0

jQuery Mobile 1.0 will be out soon!

Multimedia

(book) Eloquent JavaScript is now on GitHub

(audio) NodeUp episodes five and six have been released

(video) JSConf.eu Video Roundup (Badass JavaScript)

(video) Wakanday 2011 videos are starting to surface

(video) SPLASH 2011: Brendan Eich – JavaScript Today and Tomorrow (interview)

(audio) The JavaScript Show Episode 21: jQuery 1.7, jQuery Conference 2012, Node Toolbox

(video) Node.js and you by Simeon Bateman

GitHub Most Watched This Week (JavaScript)

twitter / bootstrap
dglittle / smiler-slider
zurb / foundation
joyent / node
TapQuo / Lungo.js

Upcoming Events

(see more upcoming JavaScript events listed on Lanyrd)

Full Frontal JavaScript Conference (November 11, 2011 in Brighton, UK)
jQuery Summit 2011 (November 15-16, 2011 online)
W3Conf (November 15-16, 2011 in Seattle, WA, USA)
Copenhagen JS (November 17, 2011 in Copenhagen, Denmark)
indieconf 2011 (November 19, 2011 in North Carolina, US)
LyonJS (November 21, 2011 in Lyon, France)
London JS: Web Components & HTML5 (November 25, 2011 in London, England)
jQuery UK 2012 (February 10, 2012)

Listen to this week’s podcast (October 29, 2011) (23:05 minutes)

I’m trying a little something different this week. I hope you guys like pictures.

Brenden Eich + “I Like Ike” mashup by @lonnen

140 byte synthesizer

A while back Jed Schmidt created a simple little project on GitHub called 140 bytes – a simple Gist that encourages other people to fork the project and write their own little utility functions in 140 bytes of JavaScript. Combine this on the other side of the spectrum with someone experimenting with very short C programs that output interesting sounds, and we now we have a tiny music generator in JavaScript!

To be more specific, we have the function to generate the sound structure itself (134 bytes):

(t<>14&3]>>(0×3dbe4688>>((t>>10&15)>9?18:t>>10&15)*3&7)*3&7]&255

And the function to read this and turn it into something audible (138 bytes):

function(f){for(var t=0,S=’RIFF_oO_WAVEfmt ‘+atob(’EAAAAAEAAQBAHwAAQB8AAAEACAA’)+’data’;++t<3e5;)S+=String.fromCharCode(eval(f));return S}

The result is a meme that keeps coming back to haunt us all. (apologies in advance).

Video: An End To Negativity

Chris Williams, the organizer of JSConf, gave a poignant speech at the recent JSConf EU, promoting “an end to negativity”, which has several implications. The first is that we shouldn’t be so hostile towards other languages such as Dart, which seek to supplant JavaScript or improve on it. We should be more open-minded and try to embrace change and progress. The second implication affects our dealings with each other – we should be more positive in our dealings with one another. We’re all one community, one family, and should treat each other as such.

This may sound a little overoptimistic or hippyish even, but I enjoyed Chris’s talk and totally agree with it. We should not only be concerned about our code, but ourselves as human beings, physically and mentally. Many of these JSConf videos may be outdated in a few years’ time, but this talk by Chris is something that should stand the test of time and still be useful to us many years down the road.

I’m not sure how well-received Chris’s talk was, as there may not be as much social reward for following the rules and not being outspoken. Along those lines, James Padolsey has a rejoinder for Chris’s talk. In his opinion the problem is not necessarily negativity so much as living and feeding off of social feedback, which is something that’s in every community really, and causes problems everywhere.

Sencha Touch 2.0 Developer Preview

Sencha Touch 2.0 Developer Preview has been released, along with updated docs and kitchen sink examples.

Of particular interest is promised improved performance on Android. I tried the kitchen sink demo on a Nexus One running the older Android 2.2 OS, and it ran decently. The page transitions were impressively fast, but the inertia scrolling was still sluggish. It’s probably much better on newer, faster Android phones, but I wish we didn’t have to worry about implementing inertia scrolling everywhere. Android 2.2+ as well as iOS5+ now offer support for fixed-positioned elements, which was the reason for developers implementing inertia scrolling as far back as 2007 with the original release of the iPhone (with Apple developers writing Pastrykit, the library that powered the iPhone User Guide).

Can we just implement fixed-positioned elements and worry about more important UI stuff now?

In any case, it’s good to see more progress on Sencha Touch, which is probably the mobile framework with the most slick UI out there right now.

Dart (again)

A few weeks back we of course had all the controversy over a leaked Google email detailing their plans for a JavaScript replacement called Dart, as well as their plans for world domination. Ok, I made that second part up (or did I?).

Back then, we only had the unreleased email to go off of, which meant a lot of speculation and overall hand-waving. Now that Dart has been officially announced, with a website and all, folks have had a chance to give it a better appraisal.

The general sentiment from JavaScript developers has been negative, which is a predictable reaction, since Dart aims to replace JavaScript, after all. There’s also a sentiment that Dart takes a lot of cues from Java, which of course is seen as a very bad thing in the eyes of us JavaScript developers.

So does anyone have anything good to say about Dart? From what I’ve heard, there’s been very little, but I have heard praise for Dart’s handling of the DOM. Dart took something that’s been up for debate by standards bodies (query/queryAll with CSS selector syntax) and implemented it straight away. This replaces what in JavaScript is getElementById, getElementsByTagName, getElementsByName, getElementsByClassName, as well as the much more verbose querySelector (qs) and querySelectorAll (qsa).

There’s been a really huge reaction to the release of Dart – here’s a pick of some of the most popular postings:

“Dart” out in the open – what’s it all about?
Dart; or Why JavaScript has already won (PPK)
What Is Wrong About 17259 Lines Of Code (Web Reflections)
“Hello world” in Dart – the now-famous “Hello world” that’s been floating around, along with a lot of amusing comments
Why Dart is not the language of the future
The Essence of Google Dart: Building Applications, Snapshots, Isolates

Tidbits

Letter Bubbles is a fun little game powered by JavaScript and HTML5, and it has the polish you might expect from a Flash game. Pretty slick!

JSFiddle has been updated to support SCSS (Sass) and Coffeescript, as well as a bit better mobile support.

Broadway: An H.264 Decoder in JavaScript Running at 30fps

Detecting JavaScript/canvas speed as a feature?

Dead simple background parallax scrolling in javascript

Scaling Isomorphic (running on client and server) JavaScript code

140bytes Music SoftSynth

Lets Make a 3D Game: microphysics.js

Multiphase Flow in JS, based on a much better-forming version in Flash

Are We Mobile Yet? is a site to track Firefox Mobile’s progress in implementing device access APIs (camera, NFC, Battery, etc.)

Simple, maintainable templating with JavaScript (Nicholas Zakas)

task.js is a library making it easy to do I/O (XHR calls, etc) without callbacks, in a simpler way

Stop Nesting Functions! (But Not All of Them)

Playing with HTML5 video and getUserMedia support (Opera)

Getting Started with Web Audio API (HTML5 Rocks)

Terse JavaScript 101 – part 1

Isogenic Engine is a new isometric JavaScript game engine

Organizing your application using Modules (require.js)

Beginners guide to AMD and RequireJs

PimpMyJS: Uglify or Beautify your JavaScript, it’s your choice…

Native Fullscreen JavaScript API (plus jQuery plugin)

addEventListener, handleEvent and passing objects – a clever way of preserving object context without having to worry about binding functions

List.js makes lists searchable, sortable, and filterable

Lets Make a 3D Game: microphysics.js

Testling is a new JavaScript testing framework

Announcing the jQuery Standards Team (jQuery blog)

LightningJS – for sandboxing and asynchronously loading third-party JavaScript

Writing Modular JavaScript With AMD, CommonJS & ES Harmony (Addy Osmani)

Opera has finally added support for cross-origin resource sharing (CORS)

Node.js

Node API changes between v0.4 and v0.6

RailwayJS – MVC framework for NodeJS

Releases

RequireJS 1.0

SugarSkull 0.9.1

Node 0.5.10

Underscore.js 1.2.1

Multimedia

Video: Modernizr with Faruk Ates

Audio: Boot To Gecko (A Minute with Brendan)

Video: The Future of JavaScript with David Herman of Mozilla

Slides: Remote Debugging the Mobile Landscape

Enter the Third Dimension: Introduction to WebGL (Ilmari Heikkinen)

GitHub Most Watched This Week (JavaScript)

zurb / foundation
twitter / bootstrap
olark / lightningjs
h5bp / html5-boilerplate
joyent / node

Upcoming Events

(see more upcoming JavaScript events listed on Lanyrd)

New Game Conference (November 1-2, 2011 in San Francisco, CA, USA)
Google Dart, Foundation and WebFWD (SFJS) (November 1, 2011 in San Francisco, US)
Why wait for Harmony? Use Asynchronous Modules with jQuery now! (jQuery Boston) (November 2, 2011 in Boston, MA, US)
red dirt.js (November 3, 2011 in Oklahoma City, OK, USA)
Nicholas Zakas on High Performance JavaScript (Web Performance Boston) (November 3, 2011 in Boston, MA, USS)
jQuery Mobile Unconference (November 3, 2011 in Mountain View, CA, US)
YUIConf 2011 (November 3-4, 2011 in Sunnyvale, CA, US)
Lets Talk Windows 8 Development with Metro, JavaScript and HTML5 (November 7, 2011 in TBD)
Full Frontal JavaScript Conference (November 11, 2011 in Brighton, UK)
jQuery Summit 2011 (November 15-16, 2011 online)
W3Conf (November 15-16, 2011 in Seattle, WA, USA)
Copenhagen JS (November 17, 2011 in Copenhagen, Denmark)
indieconf 2011 (November 19, 2011 in North Carolina, US)
LyonJS (November 21, 2011 in Lyon, France)

This week’s podcast (I was hoping to keep it short, but I kept talking and talking… sorry!)

Libraries, frameworks, and code

Cube – open-source visualization for time series data

chainvas – chaining sugar for Canvas

JS-Forth: Forth Interpreter in JavaScript

when.js is a lightweight Promises and when() implementation (from CommonJS)

MongoSpy is a MongoDB monitor that outputs through your browser’s console

Swipe is a lightweight mobile slider

Sudoku Solver in 140 bytes

Kit’s Universal Module Pattern

google-js-test – lightweight JS unit testing with V8

Tidbits

Zynga has open-sourced a scroller and viewporter

For those who enjoy drama, a famous troll posted an inflammatory article that got a lot of attention called “Node is cancer”. It elicited a lot of responses, including node-fib, which shows the proper way to implement a nonblocking long-running operation, “Node Cures Cancer”, which shows that the fibonacci sequence is even more expensive in other languages, and finally Ryan Dahl’s response to what was essential just flame bait.

Changing Perceptions of JavaScript (Alex Kessinger)

Using html5 geolocation api to get the distance of the visitor from me – walks you through the math (trigonometry, oh noes!) to calculate latitude/longitude distances.

UglyJS is a site (dumpster?) that collects terrible JavaScript snippets

Organize Your Code with RequireJS

Script yielding with setImmediate (Nicholas Zakas)

Firefox now supports mouseenter and mouseleave (ppk is celebrating somewhere)

The Future of JavaScript is Here! Approved for ECMAScript 6

In Firefox and Chrome, typeof turns out to be a ton faster than a truthy test. The reverse is true in Safari and IE…

Firefox now has support for a watch method for objects, which seems to act similarly to the new ECMAScript getters and setters.

New-In-A-Spec us an attempt to follow new changes in DOM4 and ECMAScript 6. I’m not sure how long it’s going to be updated, but it’s worth a look at the moment.

HOWTO Create a Windows 8 Metro App with JS and YUI 3

It’s been a long time coming, but Function.prototype.bind is finally in WebKit’s JavaScriptCore
Addy Osmani is at it again with Essential JavaScript Namespacing Patterns

Microsoft’s implementation of JavaScript has been called JScript. Now with the latest Visual Studio 11 Preview, JScript has been renamed to JavaScript

AMD Module Patterns: Singleton

Code Review: EventEmitter2 (by Alex Young of DailyJS)

Decoding jQuery – jQuery.inArray() (Shi Chuan)

Building Offline Experiences with HTML5 AppCache and IndexedDB (IEBlog)

Another JavaScript Quiz floating around out there

New stuff in Firefox 9 (via Paul Rouget): Type Inference, navigator.doNotTrack property, mouseenter/mouseleave events, Camera Capture (mobile), chunked XHR, etc

JavaScript Face Detection + Canvas + Video = HTML5 Glasses!

Closures for Dummies (or why IIFE !== closure)

Nitobi (makers of PhoneGap) aquired by Adobe

When web standards fail us – Nicholas Zakas comments on still unresolved problems in JavaScript: cookies, string formatting, date formatting, and UI paradigms, and overly-complicated touch events

Animating with javascript: from setInterval to requestAnimationFrame

A Quick Look Into The Math Of Animations With JavaScript

bind, apply, and call trap

Intel’s Parallel Extensions for JavaScript

Introducing Google JS Test

Live vs. Static Node Lists

Mozilla Brings WebSockets API to Firefox for Android

altJS is a list of languages that output JavaScript

Online JSON Parser/Prettifier

Writing Javascript for Size – how to write code that will minimize better (specifically for UglifyJS)

Multimedia

(slides) WebKit in your living room (Matt Seeley, Netflix) – great slides with lots of new information about optimizing performance

(slides) CapitolJS, RiverTrail (Brenden Eich’s CapitolJS slides)

(book) PhoneGap Beginner’s Guide

(slides) Server Side jQuery

(slides) Responsive web design from the future

(slides) Pragmatic responsive design

(video) Javascript Testing at Google Scale (Cory Smith)

(book) HTML5 Games

jQuery Mobile Keynote 2011 (Todd Parker & Scott Jehl)

Releases

YUI 3.4.1

Raphaël 2.0.0

jQuery 1.7 Beta Release (overview by Addy Osmani)

Wink Toolkit 1.4

GitHub Most Watched This Month (JavaScript)

Notificon
scroller
bootstrap
diveintohtml5
jquery

Upcoming Events

Frontend 2011 (October 10-12, 2011 in Oslo, Norway)
SenchaCon 2011 (October 23-26 in Austin, TX, USA)
NodeFest (October 29, 2011 in Tokyo, Japan)
New Game Conference (November 1-2, 2011 in San Francisco, CA, USA)
red dirt.js (November 3, 2011 in Oklahoma City, OK, USA)
YUIConf 2011 (November 3-4, 2011 in Sunnyvale, CA, US)
Full Frontal JavaScript Conference (November 11, 2011 in Brighton, UK)
W3Conf (November 15-16, 2011 in Seattle, WA, USA)
indieconf 2011 (November 19, 2011 in North Carolina, US)

Listen to this week’s podcast
(Podcast edit: I mistakenly mention Respond.js, which is actually a media query polyfill – I’m actually talking about Responsive images)

Google Dart

By far the biggest news of the week isn’t JavaScript, but rather a language called Dart (formerly Dash?), which certain factions within Google hope will replace JavaScript, according to a leaked internal email. Never mind that none of the language has yet been revealed, but the political posturing is already happening, and battle-lines are being drawn.

It doesn’t help that the internal email obviously hasn’t been polished by Google’s PR, and offers up some seemingly damning language:

What if other browsers don’t follow us with Dash?

Lars has promised to “sweet talk” the other browser vendors and, while we
are all eager to see this, we recognize this is a very difficult road.

JavaScript heavyweights from all over have been weighing into the controversy, including Brendan Eich himself, who’s been quite active on Hacker News. Google’s own Alex Russell has also blogged about the issue and has distanced himself from the leaked comments, while also emphasizing that “…it was a draft and doesn’t reflect either the reality of what has happened in the meantime or even the decisions that were taken as a result.”

It seems this is just the start of the controversy. We’ll see more about Dart unveiled at GOTO next month.

I’ll leave you with Stoyan Stefanov’s thoughts on the matter.

More info:
JSPerf, of all places, has a good summary of the situation.

Dash-ing and Dart-ing ahead of JavaScript (FunctionSource)

Google’s post-JavaScript Web plan raises hackles (CNET)

Critics call foul as Google takes aim at JavaScript with Dart (Ars Technica)

Dash/Dart (Peter van der Zee)

Responsive design on Boston Globe’s website

Responsive design has been gaining more momentum recently, and the responsive design philosophy has launched on the revamped Boston Globe website. It’s mostly CSS media queries at work, of course, but there is a bit of JavaScript magic here as well, with Modernizr and Responsive images.

A lazy approach to responsive design would be to serve the same images to all clients, regardless of the capabilities of their screens. These images would be downscaled and would display nicely, but there would be a whole lot of wasted bandwidth. Responsive images have been included here to make sure that only the appropriate images get delivered, instead of wasting bandwidth. A small image is delivered by default, then where necessary a larger version of the image gets delivered with a bit of JavaScript trickery.

There’s also a concern here about really old phones, such as old Motorola V3s (aka RAZRs) and their ilk. Though these phones are steadily being replaced, around the world there’s still a proliferation of non-smart phones (dumb phones?) with old browsers. So what happens when we send a nice brand new website like the Boston Globe to those phones? Send too much data and the phone will crash or won’t render the page. The pageweight limit is a very real concern for those phones. So unfortunately a server-side approach, meaning user-agent sniffing, still has to be taken for those old phones. If those devices still make up a significant share of traffic (they do, speaking globally), then a solution still needs to be put in place for them. We’re in a transition: if we want to send content to everyone, we can’t do everything on the client side (yet).

More info:
Introducing the new responsive-designed BostonGlobe.com

How the Boston Globe Pulled Off HTML5 Responsive Design

SugarSkull

SugarSkull is a simple client-side router for single page apps that intends to replace backbone.js routes and aims to be lightweight and simple, and only sets out to be a client-side router and nothing more. It primarily uses a hash to keep track of page state on the client. Not even a hash-bang!

So what’s the deal? But what about hash-bang and the HTML5 history API? The author emphasizes that SugarSkull doesn’t aim to make these things work, as they require server-side routing. The aim of this library is only client-side routing, to the detriment of SEO and otherwise (a clear word of caution there, then). But if that’s what you’re looking for, then SugarSkull might be for you. It has no dependencies and, as it has to be said, it’s not a jQuery plugin.

Libraries/Frameworks

Touchy Boilerplate is a new mobile app library aimed at iOS and Android devices

stream.js implements a new data structure: streams, which can have an infinite number of elements and are similar to arrays and linked lists

Winston is an asynchronous logging library for node.js

move.js is another helper library for CSS3 animations

concrete is a simple continuous integration server written with NodeJS and CoffeeScript

ligament.js is a tongue-in-cheek jab at JavaScript MVC frameworks by Yehuda Katz. Here’s the entire library: “M = {}, V = {}, C = {};”. The moral of the story, according to Yehuda: folks should start getting used to using Object.create. And no, there’s no jQuery plugin or support for vapor.js .

Releases

jQuery 1.6.4

Node v0.5.7 (unstable)

Tibits

A humorous history of JavaScript

Asynchronous Programming in JavaScript with “Promises”

WebKit Page Cache II – The unload Event – quite an old article, but useful

Creating a Javascript Templating Engine

MVC Todo (by Addy Osmani) uses the familiar “Todo list” demo to show the differences between the major JavaScript MVC frameworks out there, including SproutCore 2.0, YUILibrary, JavaScriptMVC, Spine.js, Backbone, Sammy, KnockoutJS, AngularJS, and more (phew!)

T-Mobile JavaScript comment stripper breaks websites – carrier “transcoders” do more than just strip comments. They sometimes compress images, or otherwise mangle your website. But things can go horribly wrong even when they just do something as innocuous as strip comments.

Dojo Tutorial: Using dojo.behavior

JavaScript is Not Web Assembly (Isaac Schlueter) and some responses to his post on Hacker News and elsewhere.

World Domination Using Arduinos and Websockets

WebVI is a browser-based version of vim.

Joe Hewitt is back at work on Scrollability, and claims that iOS 5 will still need it, despite natively supporting position:fixed and overflow:scroll elements. He has a new demo which now uses -webkit-keyframes for much improved performance. And a version 1.0 release with documentation is right around the corner.

Next Mobile Features is a blog post outlining some wish-list features for mobile devices, including JavaScript APIs for triggering and controlling haptic feeback (vibrating after touching the screen) and a hope that touch events will eventually get “force” and “radius” properties.

More evidence that understanding and using prototypes leads to lighter weight and more performant code, versus using the Crockford-style module pattern. More discussion on Hacker News.

It looks like the Javelin.js website has been hacked? It’s been up for at least a few days with this:

Javelin is a large, bloated library with an unintuitive, verbose syntax and very few features. It performs sluggishly and is sparsely documented. You will find that browsing its inelegant, poorly written source is an unwelcome experience. Javelin makes it quite difficult to write code that works on more than one browser. Javelin was developed at Facebook.

New JavaScript editing features for Web development in Visual Studio 11 Developer Preview

IE10 is coming with loads more HTML5/CSS3/JS goodness

Mobile HTML5 is a nice compatibility table for HTML5 support on mobile operating systems

Multimedia

(video) Brendan Eich – Ecma TC39: The Good, The Bad, and The Ugly (TXJS 2011)

(video) Google I/O 2011: Use Page Speed to Optimize Your Web Site For Mobile

(slides) Web Site Acceleration with Page Speed Technologies

(audio) NodeUp Episode 4

Test-Driven Development (TDD) with Node.js: video, audio, pics

GitHub Most Watched This Week (JavaScript)

kerning.js
bootstrap
MigrationsMap.net
node
RiverTrail

Upcoming Events

Lindsey Simon: Use 10,000 Browsers (September 21, 2011 in San Francisco, CA, US)
onGameStart (September 22-23, 2011 in Warsaw, Poland)
Node.js Conference Italy (September 24, 2011 in Brescia, Italy)
Web Expo 2011 (September 22-24, 2011 in Prague, Czech Republic)
HTML5 Dev Conf (September 27, 2011 in San Francisco, CA, US)
Modernizr with Faruk Ates (September 29, 2011 in San Francisco, CA, US)
Back to the Front (From the Front) (September 29, 2011 in Cesena, Italy)
jQuery Conference Boston (October 1-2, 2011 in Boston, US)
JSConf EU (October 1-2, 2011 in Berlin, Germany)
Future of Web Apps (October 3-5, 2011 in London, UK)
Lessons learned from WSGI/Rack applied to Node (SFJS) (October 6, 2011 in San Francisco)
Fronteers 2011 (October 6-7, 2011 in Amsterdam)
HTML5.tx (October 8, 2011 in Austin, Texas, USA)
Frontend 2011 (October 10-12, 2011 in Oslo, Norway)
SenchaCon 2011 (October 23-26 in Austin, TX, USA)
NodeFest (October 29, 2011 in Tokyo, Japan)
red dirt.js (November 3, 2011 in Oklahoma City, OK, USA)
YUIConf 2011 (November 3-4, 2011 in Sunnyvale, CA, US)
Full Frontal JavaScript Conference (November 11, 2011 in Brighton, UK)
W3Conf (November 15-16, 2011 in Seattle, WA, USA)
indieconf 2011 (November 19, 2011 in North Carolina, US)

Listen to this week’s podcast (September 9, 2011)

Patterns For Large-Scale JavaScript Application Architecture

Patterns For Large-Scale JavaScript Application Architecture is a lengthy article by Addy Osmani detailing some basic principles of writing a large-scale JavaScript application. It’s inspired by a classic Nicholas Zakas talk outlining some of the same principles (hey, I think I remember listening to that talk live!).

Addy has some short-attention-spanned (and “weekly roundup” people such as myself) in mind as he gives a tweet-sized summary:

Decouple app. architecture w/module,facade & mediator patterns. Mods publish msgs, mediator acts as pub/sub mgr & facade handles security

The basic idea is that a webpage is a collection of modules, some of which can (and do) talk to each other. But here’s the catch: not all of the modules can be expected to be present. Module A might want to send a message to Module B, but it will potentially break if Module B isn’t present, or perhaps if Module B hasn’t yet loaded, creating a race condition. This is called tight coupling: the app only works when all the modules are tightly coupled together and depend on each other. Here’s the thing: the larger an application becomes, the harder it is for everything to depend on each other.

The basic solution is decoupling through a pub/sub system. Modules broadcast and subscribe to events which are controlled by one controller that oversees them all. Sort of like an evil mastermind, except not evil.

You may already have experience with loose decoupling in JavaScript in other ways. For instance, if you’ve ever used event delegation or jQuery’s live(), you’ll know that you can attach events to DOM elements that may not exist yet. This is because you attach the event to the parent container (analogous to the evil mastermind controller), and all elements, present and future, will have events that bubble up to this container, leaving it to figure out how to proceed. It’s the same concept!

Deferreds are also another practical use of loose coupling that you may already be familiar with. Recently introduced in jQuery, deferreds and promises have been in other more robust libraries for a while (such as Dojo). A practical use case might be an Ajax call: a simple Ajax call might have two callbacks: a success and a failure callback. However, deferreds offer a decoupling by essentially abandoning callbacks and moving to a pub/sub system. Now multiple modules/processes can subscribe to a single “Ajax success” event. And modules/processes can even potentially subscribe to the success event in the time between the Ajax request is sent and before it’s received. Again, it’s loose decoupling at work!

Yahoo Abandons Maps API, Node.js app, and CEO

It’s a busy week for Yahoo. In one master stroke, it’s killed off its aging Maps API, killed off Sled, its Node.js experimental app, and paid its CEO over 10 million dollars to get told to take a hike (sorry for the bitterness).

The writing has been on the wall for quite a while for its JavaScript Maps API. Surely it was a matter of time, but it’s still quite sad. Sadly, a team I worked with was doing some really great work on upgrading the API for a new release, but it looks like that will never see the light of day. That being said, even with all their effort, Google has been ahead of the game for years and with many more resources, making sure that all potential competitors are playing a losing game.

Sadly, this also means all of Christian Heilmann’s old geo-mashups are going to die…

Yahoo also let go of Sled, its Node.js experiment. But there’s a bit of good news for this one: its name was changed to Postmile and the project was open-sourced on Github. Surprisingly, there doesn’t seem to be much there. It has the description of being “a collaborative list making tool built using JS, Node.js, and MongoDB” and has the appearances of being someone’s weekend project. I’m sure there’s more to it than that, but on first glance that’s what it seems to be.

And last but not least, true to its trend of destroying more than it creates, Yahoo also fired Carol Bartz, its CEO. Ok, I’ll let others report on that bit. The bitterness ends here.

deck.js

deck.js is another new spiffy HTML5 slide framework. I have to say that I like this one out of all web-based slide frameworks I’ve seen so far, and I’m considering it for my next presentation. Oh yes, and it seems to work pretty well on the iPad, unlike the now-immortalized HTML5 Slides.

I used to consider using the age-old S5 framework because of its wide browser support, but found both the CSS and JavaScript to be seriously outdated and bloated. That and the fact that most of my presentations are given to folks with newer browsers, I guess I shouldn’t feel too bad that any presentations developed with these HTML5 slide frameworks aren’t going to work everywhere.

Libraries and Frameworks

Paladin is a Mozilla initiative to support open-source gaming. It includes the Paladin 3d game engine, which is soon-to-be renamed.

BoltJS is a UI framework by Facebook, built on Javelin.

fox.js is a CSS grid maker that uses ASCII art to make the grids. Interesting… hmm…

Creating Fast Buttons for Mobile Web Applications – another article posted earlier this year. Shows how to get around the ~300ms delay on mobile devices. This code has now been adapted to be used elsewhere, including the Mobile Boilerplate.

Scott Jehl has written some code that normalizes hiding the address bar on both iOS and Android. It also seems to explain why we should use scrollTo(0,1) instead of scrollTo(0,0).

maddy is a functional object operations library

Tidbits (articles and such)

What’s different in the new WebSocket protocol (HTML5Rocks)

Christian Heilmann points out that Firefox 7 now does reverse geocoding in navigator.geolocation (ip to address lookup)

Object-Based Inheritance For ECMAScript 5 – this was written almost a year ago, but it’s a nice introduction to using Object.create()

jQuery File Size is a site by Mathias Bynens (@mathias) that tracks jQuery’s file size over time. Uncompressed, minified, gzipped, minified and gzipped, you name it!

Native webcam support and orientation events – technology preview – I missed this earlier this year. It turns out the Device API is now known as navigator.getUserMedia, and it’s actually been implemented on Opera Mobile!

Paul Irish points us in the direction of some cool stuff Niklas von Hertzen has been building, including html2canvas, something to blur elements on a page (uses html2canvas), something that modifies fonts on the fly with JavaScript, and a pathfinding algorithm that works by analyzing canvas pixel data.

Folks have discovered that they can use getElementsByClassName or getElementsByTagName for simple selectors, which is a bit faster than using querySelector. Now a patch has landed in WebKit which looks like it does this natively!

What came before WebSockets? – in an industry with a lot of newcomers, it’s immensely helpful to know not only what’s available now (WebSockets), but how it was done in yesteryear. It’s also immensely helpful because an unfortunately large percentage of the world still uses browsers from yesteryear.

How To Setup A Cheap Exception Notifier for JavaScript – taking advantage of window.onerror to let developers know that stuff blew up in their app. I had no idea you could log errors to Google Analytics!

John Allsopp lets us in on the now well-supported DOM selectors such as getElementsByClassName and querySelector/querySelectorAll, which should ideally eventually replace DOM-helper libraries

Some interesting discussion on WebSQL vs indexedDB on Google+.

Superpacking JS Demos – helpful for those competing in JS1K, but not really practical for most folks.

Looks like Joe Hewitt is working on updates to Scrollability, and he seems to think it necessary despite updates in iOS5 that supposedly render it unnecessary.

Chrome now has support for sending and receiving binary messages (and as Blogs and ArrayBuffers)

Chris Coyier has found that generated content is accessible via JavaScript on some browsers

Why was the arguments.callee.caller property deprecated in JavaScript? (StackOverflow)

Simple Facial rigging utilizing morph targets powered by three.js (WebGL)

Decoding jQuery – .toArray() – Shi Chuan has a nice series going that digs deep into jQuery to provide insight into all sorts of little JavaScript tricks.

Nicholas Zakas has been messing around with ES6 proxies to create a DOM builder

Akshell is a JSFiddle-esque JavaScript editor with all sorts of bells and whistles: buttons to preview the code and even commit to Git.

Node.js tidbits

Node Knockout winners have been announced

Keeping “require” modules DRY in Node – Michael Mahemoff gives a quick tip on cleaning up that mess up require() statements at the top of your Node code.

Multimedia

(video) YUI Open Hours: Loader Changes, Tips and Tricks
(slides) RequireJS (ParisJS)
(slides) The State of HTML5: Summer 2011 (Paul Irish)
(slides) High Performance Mobile (Steve Souders)

Releases

jQuery Mobile Beta 3 now includes pushState support, iOS5-compatible fixed headers and transitions, and the Mobile Graded Browser Support has also been updated.
Knockout 1.3.0 Beta
curl 0.5.2
Socket.IO 0.8.3

GitHub Most Watched This Week (JavaScript)

bootstrap
paladin
FitVids.js – handles video sizing as a jQuery plugin. My comment: if it’s based on Thierry Koblentz’s article, why do we need a JavaScript-based solution?
node
html5-boilerplate

Upcoming Events

Frontend Conference (September 9-10, 2011 in Zurich, Switzerland)
Breaking Development: Web Design and Development for Mobile Devices (September 12-14, 2011 in Nashville, TN, US)
HTML5 application frameworks (HTML5 Silicon Valley) (September 13, 2011 in Mountain View, CA, US)
Test-Driven Development with Node.js (Node.js SF) (September 13, 2011 in San Francisco, CA, US)
Lightning Talks on Sencha Touch, multiplayer.js and Tales from Node Knockout (GamesJS) (September 14, 2011 in San Francisco, CA, US)
dojoconf (September 16, 2011 in Arlington, VA)
Webkit UI performance, Angular.js (Bayjax) (September 16, 2011 in Sunnyvale, CA, US)
Future of Mobile (September 16, 2011 in London, UK)
CapitolJS (September 18, 2011 in Washington DC)
Lindsey Simon: Use 10,000 Browsers (September 21, 2011 in San Francisco, CA, US)
onGameStart (September 22-23, 2011 in Warsaw, Poland)
Node.js Conference Italy (September 24, 2011 in Brescia, Italy)
HTML5 Dev Conf (September 27, 2011 in San Francisco, CA, US)
Modernizr with Faruk Ates (September 29, 2011 in San Francisco, CA, US)
jQuery Conference Boston (October 1-2, 2011 in Boston, US)
Future of Web Apps (October 3-5, 2011 in London, UK)
Lessons learned from WSGI/Rack applied to Node (SFJS) (October 6, 2011 in San Francisco)
HTML5.tx (October 8, 2011 in Austin, Texas, USA)
SenchaCon 2011 (October 23-26 in Austin, TX, USA)
red dirt.js (November 3, 2011 in Oklahoma City, OK, USA)
YUIConf 2011 (November 3-4, 2011 in Sunnyvale, CA, US)
Full Frontal JavaScript Conference (November 11, 2011 in Brighton, UK)
indieconf 2011 (November 19, 2011 in North Carolina, US)