Canto

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 Released

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

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)

Are people taking summer vacations out there, or what? It’s been a bit of a slow news week on the Javascript front, but don’t worry, we’ve got plenty of great stuff to keep you busy.

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.

A lot of this week’s news this week is from some of the big shots (Yahoo!, Microsoft, and Mozilla), but it’s still pretty cool stuff so read on for the latest.

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.

Okay, the news this week leans pretty heavily towards general web development stuff rather than Javascript specifically, but it’s good stuff. I promise.

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.

Another week is on its way out, so it’s time to look back at some of the cool stuff you folks have been working on in the week that was.

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.

I just played with JSonduit, and was able to make a data feed from the JSMag blog feed in about 6 minutes.

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.

Connect

Tim Caswell and TJ Holowaychuck, both of whom are members of the ExtJS team, have just released Connect: a middleware framework for NodeJS. In his blog post announcing Connect, Caswell cites Ruby’s Rack as an inspiration for the project.

A Connect server runs a set of middleware modules, each of which performs a specific action when it receives a particular type of message. When a request comes in to the server, each module in turn will see if it can do anything with the request and then pass it to the next module in the stack. The process is repeated in reverse with the server’s response on the way out.

Connect ships with a several stock modules that handle tasks such as authentication, logging, routing, serving static files, and even automatically generating CSS from SaSS stylesheets.

An important thing to understand about Connect is that it is not a web application framework in the traditional sense. You might, however, think of Connect as being a toolkit on which to base a web application framework. I’d wager that we’ll see several such frameworks built for Node using Connect in the coming months.

This is a really exciting project, and it has the potential to really change how the Node community builds applications. Big congratulations to Tim and TJ on this release.

Wu.js

Another functional programming-inspired Javascript library? Heck yeah! Wu.js takes the ball from other functional libraries (such as underscore.js and Functional.js) and carries it even further in following the functional paradigm.

In addition to all of the tropes that many of the functional libraries implement (currying, map/reduce, etc.), Wu has a rich set of iterator methods that give you several interesting permutations on the standard map/reduce patterns. Even better, Wu’s iterators are lazy, so you can go ahead and create one, but any code that it contains will only be executed when you want a value from it.

Seriously, I love this stuff. As long as people keep writing libraries like this, I’ll keep writing about them.

New blogs!

A couple of new blogs have popped up recently that should be of interest to JSMag readers. Badass Javascript showcases the kind of over-the-top awesome work that you’d expect to see on a blog with that name. Personally, I’m pretty partial to the post on the line-breaking algorithm.

Another great new resource is Microsoft’s ScriptJunkie. This site focuses more on tutorials & exposition than news, per se. They’ve already got some great content up, so definitely head over and check it out.

TXJS

Lastly, just a quick note of congratulation to Rebecca Murphey and the YayQuery team for putting on TXJS last weekend. I wasn’t able to go, but based on the tweets I was jealously reading, it seems like it was a great event. A lot of the speakers have posted their slides, so even if you weren’t there, you can still get something from the event. I’m saying this from experience, since Connect & Wu.js were both announced and/or promoted at TXJS.

JAVASCRIPT UI ARCHITECTURE PART II

Kyle Simpson continues his look at JavaScript front-end architecture.

GRAPHING WITH FLOT

Jason Gilmore introduces the Flot graphing library.

GOOD CODING PRACTICES

Evandro Miller illustrates some of the most common JavaScript bad usage cases and shows alternatives to accomplish the same tasks with clean, non-obtrusive script.

SECURING WEB APPLICATIONS PART II

Tom Hughes-Croucher wraps up his look at web application security and how you can keep your sites safe.

JAVASCRIPT BEGINNER’S CORNER – OBJECTS

Tom McFarlin gets you started with objects.

CROSS PLATFORM – RICH EDITORS

Christian Tiberg covers the various options available to embed rich text editors in your JavaScript apps.

RICH ENTERPRISE APPLICATION DEVELOPMENT WITH EXTJS

Andre Buchda illustrates the use of ExtJS as a building block for the replacement of a custom XUL/JavaScript framework for the German company Sixt

COMMUNITY NEWS

Matt Henry rounds up the latest news from the world of JavaScript

Learn more or purchase today