Canvas is one of the most exciting features of HTML5, but it’s not necessarily an easy tool to use. Even once you’ve gotten the hang of it, the code written in service of the API can be extremely verbose, and not very pleasant to look at. No less than David Flanagan, author of the Rhino book, has written a very handy wrapper library around Canvas. Canto offers several huge improvements on the API. One of the simplest but most impactful improvements is the ability to chain method calls. Additionally, Canto extends the existing Canvas methods, such as lineTo(), to let you specify more than two arguments. Doing so will invoke the same methods multiple times. Additionally, Canto includes methods that mimic the behavior of the path attribute of the SVG element, allowing you to do SVG-like drawing within a Canvas element.

Note that Canto doesn’t include any major abstractions on top of the existing Canvas API, so if you don’t understand the basics of Canvas, it isn’t going to write your drawing code for you. However, it will save you a heck of a lot of typing and probably make your drawing code more readable and maintainable. If you’re doing any Canvas work, it’s definitely worth giving Canto a look.

Unveil

Speaking of Canvas, Unveil is a very promising new data visualization library that draws its graphs using Canvas. Unveil creates rich, interactive graphs using JSON datasets. It has lots of common graph types built in (histograms, scatter plots, and some others), and also has an intuitive API for creating new chart types.

One of the ways in which Unveil differs from other, similar libraries is in the ability to specify different framerates for different stages in an animation. This allows you to increase the framerate when there’s a lot of movement in the graph, but then to lower the framerate again between major actions. This helps keep CPU utilization to a minimum.

Unveil is in the fairly early stages, so the library’s author recommends not using it outside of WebKit browsers yet. But once the cross-browser bugs are squashed, it’s going to be extremely useful. If you’re curious to learn more, check out the (very good) documentation.

On the whole, Unveil gives you a lot of very Flash-like interactivity in Canvas. This is exactly the kind of tool we need more of if Canvas is going to make inroads in creating animations in the browser without plugins.

DailyJS on Touch Devices

I’ve called attention to DailyJS’s “Let’s Make a Framework” series on a few occasions. This week, they’ve started a new “chapter” in the series that covers touch devices (e.g. mobile devices & tablets). The first installment covers device orientation. There’s not a whole lot in this first post, but orientation isn’t exactly the most complicated topic in mobile development. I’m mostly mentioning it because they’re sure to give some great coverage of the twistier areas of mobile javascript in future posts. The whole “Let’s Make a Framework” series has been great so far, so keep your eyes peeled.

Dojo 1.5 is out, and there’s a heck of a lot of new stuff in this release. In addition to improvements to the core codebase, there are scads of extremely useful feature additions. For instance, Dojo now shows how forward-looking it is with its excellent cross-browser support for HTML5 & CSS3 features, such as CSS animations, local storage, Canvas, among others.

Additionally, the new release has a whole slew of mobile-specific features many of which are geared toward providing native-like experiences in the browser. Once such feature is the inclusion of the TouchScroll library for simulating native scroll mechanics. This is one of the few areas in mobile development where a library is truly necessary, so kudos to Dojo for going that route. Additionally, they’ve provided a stripped-down version of the library to reduce the load time.

The other change I’d like to call out is the improved UI. Form inputs in Dojo widgets now have a standard height, which makes a huge difference. The one-or-two pixel differences you previously saw in some widgets were often annoying, so this is a very welcome improvement. The new Claro theme is also very handsome, if you’re using Dijit.

If you haven’t checked out Dojo, now would be a great time to do so. With this new release, the Dojo team has made the most compelling argument yet that their framework deserves your attention.

Google Javascript Style Guide

Google has done the community a huge favor and published their style guide for Javascript code. This should be a huge boon to any large Javascript project that is looking to standardize on a coding format. In addition to making code more readable and (in my opinion) cosmetically appealing, many of the rules contained in the guide will help you avoid quirks of Javascript interpreters.

Of course, in addition to the formatting rules, there are several recommendations on best practices as well. For instance, the document has a recommendation regarding how to create closures while avoiding memory leaks. And finally, the document closes with a handful of tips on writing idiomatic Javascript, such as using the ternary operator and short-circuit booleans.

All in all, it’s a highly recommended read.

A few articles worth your attention

This week there have been a fair number of compelling articles that are worth a look. I wanted to call out a few here, just in case you missed them.

• Prototypes and Inheritance in JavaScript – One of the central features of Javascript, and also one of the least understood, is the system of prototypal inheritance. More often than not, if this features is used, it’s in an attempt to shoehorn something like classical (Java-like) inheritance into Javascript. In this article, Scott Allen does a great job of introducing the topic of prototypes and makes a good case for adding them to your utility belt.
• 10 Things I Learned from the jQuery Source – Okay, this isn’t from this week, but it’s a great video, and one I can’t believe I haven’t linked to before. In it, the intrepid Paul Irish calls out 10 interesting Javacript techniques he learned by reading the jQuery source. In addition to teaching you some new things about Javascript and jQuery, it’s a great argument for the idea that one of the best ways to learn about the craft of programming is to read other people’s source.
• Redirect caching deep dive – Souders has some sobering news about how bad a job browsers do with caching redirects.

Diffable is a new project from a scrappy little web firm called Google. Here’s the idea behind Diffable: If a user has a version of your page’s Javascripts cached, the next time that user visits your page, they’ll only have to download any changes to those scripts.

Diffable was initially developed by members of the Google Maps team who have reduced their page-load times by ~1200ms for users who have the older versions of the Maps scripts in their cache. Granted, they get those kinds of results because they’ve got 300k worth of scripts, so you’re not likely to see that kind of a jump unless you’ve got a similar payload. That said, this is a great utility and one that’s certainly going to get a lot of attention.

Def.js

There are any number of libraries out there that build something like classical inheritance into Javascript. Most of them give you something that looks like Java or C++ classes. Def.js is a new library which implements classical inheritance using something a lot like Ruby’s syntax and object model, complete with automatically-invoked initialization methods.

As much as I love Ruby, I also really love Javascript, so I’m not necessarily keen to mix up their syntaxes (I’m also not in any particular hurry to forsake prototypal inheritance). That said, this is a clever hack, and I’m sure there are plenty of folks out there who will put it to good use.

(Hat tip to DailyJS)

Nodeload and Multi-Node

This week, a couple of awesome new Node.js server projects were unveiled. The first of these is Github’s Nodeload. Nodeload is now responsible for serving tarballs and zipped archives of code in Github repositories. The old system used multiple Sinatra & Resque instances to do the same task, but new(-ish) Githubber, Rick Olson, saw the opportunity to apply Node’s non-blocking I/O to replace all of those resources.

Another cool new Node server project is Multi-Node. Multi-Node lets you specify a number of node server instances to be created, along with a port to listen on, and then defers to the OS kernel to handle load-balancing between the nodes. Even better, rather than operating independently of each other, the nodes can communicate with each other allowing for Comet-like interactions between servers. Great stuff.

Defer

Defer is a new CoffeeScript extension that gives you a super-simple way to handle data from asynchronous processes (such as Ajax requests, HTML5 database access, etc.). Normally, in order to get data back from an asynchronous method, you’d need to do so through a callback that executed when the method returned. This is a common pattern, but it’s one that isn’t always terribly readable, and is fairly tough for new Javascripters to wrap their brains around. Defer gives you some CoffeeScript sugar (no pun intended, I assure you) to let you write familiar looking method calls and assign their return values to a variable, just like you’d do with a synchronous method. Very handy stuff, especially if you’re already using CoffeeScript.

(Hat tip: Badass Javascript)

Data URIs make CSS sprites obsolete

The always prolific Nicholas Zakas has a great post up on his blog titled Data URIs make CSS sprites obsolete. The main argument he makes goes like this: We want to reduce the number of HTTP requests we make, so we put all (or at least a lot) of our background images together in on image file (a technique known as “spriting”). However, CSS sprites are a pain to work with. What we need is a way to cut down on HTTP requests without having to perform the CSS positioning acrobatics normally required with CSS sprites. Zakas’s solution is to use data URIs to put the image data directly in your stylesheets. It makes the CSS significantly larger, but that will cause less of a performance hit than issuing the additional HTTP requests for the sprited images.

Unfortunately, data URIs aren’t supported in IE < 8, so you’ll still need to fall back to sprites if you need to support IE 6 & 7. Still, Zakas’s solution is a great one, especially if you use his CSSEmbed tool, which automatically creates the data URIs and puts them in your CSS for you. Make it part of your build process, and you’re good to go!

Knockout

Knockoutis a new framework for connecting your HTML views to your model data. Primarily, it observes some data object, and when that object changes, it will update the corresponding view with the new data. Additionally, it has its own templating capabilities. The framework’s author, Steven Sanderson compares Knockout usage to the patterns you’d employ in Silverlight, so its something that .Net developers might want to check out.

Mobile Browser Cache Limits

Figuring out just how much data can be stored in mobile browser caches and under what circumstances those caches persist. A new post on the YUI blog features a ton of new research into the current state of these limits. Rather than summarizing their results, I suggest reading (and bookmarking!) the article. The data are indispensible.

Dion & Ben step down as Ajaxian editors

Lastly, as you probably all know already, Dion Almaer and Ben Galbraith have stepped down as editors of Ajaxian. The site will continue, and Dion & Ben will continue to contribute occasionally, but they’re handing the editorial reins over to TechTarget, the company that actually owns the Ajaxian.com domain. Ajaxian has done a ton of good for us Javascripters during Dion’s & Ben’s tenure, so I want to personally extend my thanks to them.

ES5 support in IE9

The Internet Explorer team has been hard at work on building as much ECMAScript5 (ES5) support as possible into IE9.
Kangax has updated his ES5 implementation table to reflect the new ES5 features, and has a nice blog post detailing what’s been done and what still needs work. There are certainly still a few head-scratchers in there, as Kangax points out, such as host objects not inheriting from Object.prototype. Still, the IE team’s work is really impressive, and IE9 has at least a partial implementation of everything in ES5 except for strict mode. You can check out their progress by running the most recent platform preview.

Another sign of Microsoft’s commitment to the ES5 standard is the test suite they’ve created to check for ES5 feature support. ECMA currently doesn’t have an official suite to check for ES5 conformance, and Microsoft is leading the charge to put one in place to help ensure interoperability between different Javascript interpreters.

This is great stuff, and it’s extremely encouraging to see the commitment that Microsoft is making to supporting web standards.

Yahoo!’s Boomerang

Boomerang is a new utility for measuring website performance as it is actually experienced by your users. Tools like Page Speed and YSlow can give you an idea of how long it takes for various parts of your sites to load. But by virtue of their being installed in your browser, the data you’ll get will only represent performance on your local network or from whatever off-site locations from which you happen to test, and only in your browser of choice.

Boomerang remedies this deficiency by using a new approach to collecting performance data. It’s just a small snippet of Javascript that you include in your pages. It collects some data about page load times (among other things) and sends it back to your server. That way, you get data from as many different locations and OS/browser combinations as your site has visitors.

Bespin 0.9a1

Mozilla has just updated their Bespin in-browser IDE with some impressive new features. One big new feature is code completion based on Ctags (a format that should be familiar to Vim and Emacs users). At the moment, it looks like Javascript is the only language for which code completion is supported.

The other big feature for this release is pretty impressive from an implementation perspective. Now users of Embedded Bespin can have multiple Bespin editors on a single page. As the engineers point out in their blog post announcing the release, Bespin’s plugin system made it particularly challenging to sandbox completely separate instances of the editor on one page. Incidentally, this problem is very similar to the one that motivated a lot of the core design decisions that went into building YUI3. I haven’t dug into the Bespin source, but it would be a good exercise to compare and contrast their solution to YUI’s.

SproutCore lead leaves Apple

Charles Jolley, the lead developer of SproutCore, has announced that he’s leaving his job at Apple to start his own company. This is particularly interesting, since in his blog post about the transition, he implies that SproutCore was being hindered by its being developed under Apple’s roof. As this won’t be the case any longer, Jolley promises lots of new stuff coming to the framework.

ChromeKit

ChromeKit is a new library for creating desktop-like UI elements in the browser. It allows you to create windows with full chrome that allow you to do all of the things you’d expect to be able to do with windows in your main OS (i.e. drag, resize, minimize, etc.). It does this using pure HTML/CSS/JS (okay, it uses images too in a couple of spots).

ChromeKit does a pretty decent job of progressively enhancing its windows in order to give an impressive degree of cross-browser and legacy browser support. In newer browsers, there is also plenty of sexy CSS3 & vendor-prefixed goodness to make the windows look extremely slick.

Probably the coolest features of ChromeKit are the experimental Mac-like (Exposé) and Windows-like (Aero flip) window management effects. Even if you can’t imagine ever having to use ChromeKit, you might still want to take a look at the Exposé implementation as an example of some pretty heavy Computer Science stuff being brought to bear in Javascript (The library author attributes his solution to the Exposé window packing/arrangement problem to a paper called “Guided Local Search for the Three-Dimensional Bin-Packing Problem”).

PlaceFinder

PlaceFinder is a sweet new REST API from Yahoo! that gives you dead easy geocoding and reverse geocoding information all with a simple GET request. If you send PlaceFinder a street address or a place name that it knows about, it will give you the latitude and longitude for that address or place. Conversely, if you give it coordinates, it will return the address (among other data about the location). With HTML5 geolocation getting to be ubiquitous, it’s trivial to get a user’s geographic coordinates, but with PlaceFinder it’s just as easy now to take those data and turn them into a representation of the location that’s actually useful.

If you take a look at the examples in the PlaceFinder documentation, you can see a few of the hard problems that the API solves for you for free, such as localized place names and bounding boxes from a point. And of course, since PlaceFinder is just a REST API, you can easily query it through YQL, so if you’ve already got any YQL features in your application, it should be pretty trivial to start consuming PlaceFinder data.

HTML5 Rocks!

The Google Developer Relations team is publishing a new site called HTML5Rocks that contains demos and tutorials about all of the cool things you can’t do in Internet Explorer (I kid. Although they do feature Chrome Frame pretty prominently on the main page). So far the content is (unsurprisingly) absolutely top drawer. The tutorial on speeding up your webapp with HTML5 contains a ton of pearls for optimizing a forward-looking app.

HTML5Rocks is brand new, but there’s already a lot to love there, and it’s sure to only get more and more useful. So you’ll definitely want to bookmark it or stick it in your feed reader.

Ext JS is now Sencha

Ext JS, the company behind the Ext JS Javascript libraries and tools, has changed its name to Sencha. To go along with the name change, they’ve also brought two open source projects, jQTouch, and Raphaël, into the fold. It’s worth pointing out that jQTouch & Raphaël will remain MIT licensed, although their project leads have both come on board with Sencha.

Between the name change and last week’s exciting release of the Connect middleware framework for NodeJS, you’d think the Sencha folks wouldn’t have any other big announcements lined up. You’d be wrong though, since they’ve also announced the new Sencha Touch framework for developing native-like apps for iOS & Android devices. Sencha Touch gives you a ton of handy tools to make developing mobile web apps easier. It gives you enhanced support for touch events as well as providing a library of custom gesture events. Additionally, it comes with a lot of common mobile UI widgets as well as icons and graphics.

One note of caution: Sencha says that the main Sencha Touch library weighs in at around 80k, which is pretty hefty for a mobile framework. This might cause you some performance headaches since the iPhone won’t cache any single page component that weighs in over 25k. However, you can work around this by using the offline application cache (i.e., declare the asset in a cache manifest).

All in all, it’s been a very productive week for the newly minted Sencha team, so congratulations to them.

Cohorts

Cohorts is a pretty sweet library for doing multivariate tests on your site. In the context of web design/development, multivariate testing is usually used to determine which design elements generate the most clicks or conversions. So imagine you wanted to test whether a red or a green “Buy it Now” button would get more clicks. Just add the Cohorts code, set up two cohorts (one that will get the green button and one that would get the red). After you run the tests for a while, you’ll get results telling you the number of people who saw each of the different colored buttons, and of those, how many went ahead and clicked. By default, the events it tracks will be reported in your Google Analytics, although you can roll your own reporting solution. That’s pretty slick.

PDF.js

PDF.js is a new library for generating PDFs in Javascript. It provides a handful of methods for adding and formatting text and other document components (e.g. fonts, images). You then use those methods to build a PDF document that can then be output as a data URI (if you’re running the code in a browser), or directly to the filesystem (if you’re running the code in NodeJS).

The browser implementation looks to be fairly buggy, based on the developer’s comments, but it’s still a noteworthy achievement, and the Node version works pretty well.

http://jsonduit.com/feedinfo.html?id=7q6 takes you to the feed info, with the ability to create a custom widget for display on a site.

With some slightly stronger authoring tools, this would allow ‘common folk’ to identify parts of a page they’d like to be accessed, create a ‘feed’ from them, then pass just the feed to developers for processing.  As it stands, it’s still a bit more of a geeky tool, but useful nonetheless.  It’ll be interesting to see what people use this for.

Traits.js

Traits.js is a library that allows you to use traits in Javascript. In case you’re not familiar with the idea of a trait, it’s something like a mixin (though traits are more flexible) or an abstract class (less apt, but maybe a more familiar concept given its use in PHP & Java). The idea first popped up in Squeak and PLT Scheme, and most recently has become a big part of Scala (along with several other languages). A trait is essentially a collection of methods that can be imported into an object. The Traits.js library allows you to compose traits (i.e. make a new trait by combining other traits), overwrite trait methods, and even provides a way to resolve conflicts among trait methods with the same name. It’s a very clear but powerful API.

The library uses a lot of the awesome new ECMAScript 5 object-manipulation API (a good discussion of which you can find here) Better still, it works with both ECMAScript 3 as well as ES5, so while it conforms to the new standard, it is still fully functional in older ES implementations.

If you’re interested in this stuff, you can see a very in-depth tech talk (video, slides) that goes into a fair bit of detail about Traits.js. Also, there was a lengthy discussion of traits this week on the es-discuss mailing list.

ES5 Implementation Tracker

Speaking of ECMAScript 5, here’s a quick pointer to a list of ES5 implementations. It’s pretty much just a roundup of bug tracking tickets for several Javascript engines that follows those engines’ progress in adding ES5 features. If you want up-to-the-minute news about when you can use a particular part of ES5 in a given browser, this is the place to look.

Scriptsrc.net

Scriptsrc.net provides a simple way to get links to several popular Javascript libraries hosted on Google’s CDN. Just tap a button, and the script tag containing the link to the library is copied to your clipboard. As a side note, I’d be curious to hear why the site’s authors omitted YUI3, when they included YUI2. Other than that, it looks like a handy resource.

Well, that’s it, folks. The first weekly roundup of Javascript news here on the JSMag blog. Did I overlook something of epic importance? Let me know in the comments. Or just @ me on Twitter.

Have a look at these couple demos:

http://mugtug.com/sketchpad/

http://js-fireworks.appspot.com/

Do these sorts of things continue to carry the same feeling of ‘magic’ for you that they did when you first saw them?