News Roundup: IE9 and SunSpider, 20 Things I Learned, New Design Patterns book

Microsoft accused of cheating the SunSpider benchmark

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

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

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

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

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

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

Read more on the Google code blog.

Essential JavaScript & jQuery Design Patterns For Beginners

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

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

Upcoming Events

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

Tidbits

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

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

News roundup: node-canvas, jQuery Mobile Alpha 2, Gordon

node-canvas: Server side HTML5 canvas API

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

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

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

jQuery Mobile Alpha 2 released

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

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

Here’s a few of the improvements:

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

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

Gordon: An open source Flash runtime written in pure JavaScript

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

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

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

Tidbits

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

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

News roundup: Canvas face detection, how YUI could improve its image, users with JavaScript disabled

Introduction

This week’s news is self-admittedly Yahoo-centric, so apologies in advance! It’s been a bit of a slow news week in general, which means this week’s news we’ll be more in the style of checking out some interesting JavaScript discussions instead of reviewing new libraries or scripts.

Face Detection with Canvas

Chinese developer Liu Liu has ported his C-based computer vision library to JavaScript and implemented a demo of face detection with JavaScript!

We’re now in the days of faster JavaScript engines that can begin to handle computationally-heavy tasks such as this, and it’s not a far stretch to imagine that client-side face detection would be faster than sending a request off to a server and waiting for a response. Not to mention that such an implementation would be much more scalable, shifting the burden of processing from the server to the client. And if a site is overwhelmed with more clients, the clients all bring to the table more number-crunching machines.

(via Badass JavaScript)

How could YUI3 improve its image?

This post on Quora got a lot of attention and prompted an interesting discussion. The author claims that YUI3 is really on par with jQuery but obviously hasn’t turned out to be as popular. So how could YUI3 improve its image?

John Resig, the creator of jQuery, is the top-rated response, yet he actually echoes many of the sentiments of other (less-notable) responders before him. One of the less controversial suggestions is that the multiple domains YUI3 resources lives on should be consolidated into one. Another suggestion that makes sense is that the focus should now be on YUI3, even though there are many sites still running on YUI2 (it’s the old legacy code problem). I definitely agree with this, as it was somewhat embarrassing to see a book about YUI2 come out just a few months ago.

One of the most controversial suggestions is that YUI should break off from Yahoo and become completely open-source, where everyone can make contributions. That would certainly be nice, but I definitely don’t see this happening, and I’m unsure it’s worthwhile for YUI to try something like that.

How many users have JavaScript disabled?

A few weeks back, Nicholas Zakas wrote on the YDN blog about estimating the number of users with JavaScript disabled. His analysis uses statistics gathered from visitors to the Yahoo homepage.

One of his conclusions, after filtering out automated requests by bots, estimates that in the US, 2% of actual users have JavaScript disabled. This comes out to roughly 6 million visitors to the US Yahoo homepage each month, which is quite a substantial number.

The post attracted quite a bit of attention and many questions and criticism, notably from Mike Davies (formerly of Yahoo Europe), who criticizes Zakas for failing to fully disclose the measuring methodology, using a pre-filtered narrow set of users, and for not taking into account other factors that might account for JavaScript not executing.

Tidbits

JSConf EU 2010 Videos
Video: Extreme JavaScript Performance (Thomas Fuchs)
Announcing MooTools More 1.3
jQuery the Right Way

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

News roundup: Mozilla Rainbow, Wink toolkit, JSMentors

Mozilla Rainbow

Mozilla Rainbow is a Firefox plugin that enables a JavaScript API for recording audio and video in the browser. It’s part of Mozilla’s plethora of new offerings, and its appearance is relatively late-breaking news, as it was just announced and released just yesterday!

Mozilla has previously dabbled into in-browser audio recording with Jetpack, but this is their first foray into video recording.

Currently the plugin is only available for Firefox nightlies running on OSX. Future releases will have expanded OS support, as well as other improvements such as support for WebM video and live streaming of video feeds.

It seems clear that this addon anticipates the HTML device tag, which opens up camera and microphone access to the browser. What’s exciting is that developers can start developing for that today (and hope it’s not too troublesome to convert an app written for Rainbow into the future native implementation).

Wink toolkit (Webapp Innovation Kit)

Wink is a new mobile framework that was released relatively recently. It has everything you might expect from a JavaScript library in general, so I’m sure you’re familiar with much of what it does already.

If you visit the Wink website on a desktop browser you’ll see lots of documentation and a fair amount of video demos of Wink running on the iPhone Simulator. The true test of a mobile JavaScript library is of course on a device itself, and if you browse to the same site on your iOS (iPhone/iPod Touch/iPad) or Android device, you can see many live demos that are actually quite impressive. I tested on my iPhone 3GS and the demos worked great.

The interesting thing about Wink is that it comes with a ton of UI controls out of the box: accordion, carousel, date picker, menu, popup, slideshow, etc. One of the coolest things is a drawing surface called “movement tracker”. All these nice features and effects available right out of the box is quite impressive for something that hasn’t been in the wild for too long. Definitely go check it out!

JSMentors

JSMentors is a mailing list created by and comprised of some JavaScript heavyweights (no, not obese JavaScript developers) and recognizable names. It has the very broad goal of being a place where people interested in JavaScript and Browser (DOM) scripting can come together and bounce ideas off each other.

It seems to be a great free resource, but it’s somewhat troubling to see that it hasn’t gotten the attention it deserves. Anything free is worth checking out, and especially so when it has the right people behind it. So go check it out!

Tidbits

Introducing Sencha Animator: The CSS3 Alternative to Flash (not JS, but pretty big news from the creators of Sencha)
Firefox now has its own built-in web console
8 Hours Of The Top 10 JavaScript Talks From 2010 That You Can’t Miss
Functionality Focused Code Organization by Rebecca Murphey (slides)
Real-time heatmap example with Javascript and HTMLCanvas by Patrick Wied
Introducing makejs
JavaScript: indexedDB in Chromium 8.0.552.5 dev!
Modernizr 1.6 released
Node v0.3.0 released

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

News roundup: graphics, graphics, graphics

Hello from Tokyo

I’m currently in Tokyo on vacation now, so it’s very likely there will be no update next week. Just a heads up in case you wondered if I fell off the face of the Earth (I didn’t fall off, I just happen to be on the other side).

In the meantime, this week’s news revolves around graphics libraries and even game engines implemented in JavaScript. This is really an exciting time for this sort of stuff, which was before relegated to desktop applications or Flash-based web apps. The implementation of the canvas element has really given developers a lot of freedom to tinker around with graphics. Give geniuses the right tools and they deliver these sorts of amazing things!

WebP support with JavaScript

You may have heard about WebP, the new lossy image format introduced by Google as a better and slimmer alternative to a JPEG (albeit not without its criticism).

Great, so what happens if you really want to use a WebP picture in a webpage today? No browser currently supports the format natively (although this will probably be changing soon), so what if you really just can’t wait? As it turns out you can give a browser WebP support with a little help from JavaScript and canvas. There’s at least one caveat though: this only works on browsers that natively support the WebM video format, which means Chrome 7.0, Opera 10.62, and Firefox 4.0 beta.

Artisan JS

Artisan JS is an abstraction layer over the Canvas API. This sounds unnecessary at first, and the author David Brooks admits this in his introduction to the library. However, there are definitely some huge advantages, including more succinctness, layers, and a history function.

I haven’t tried it for myself yet, but if the layers functionality works decently, that’s probably reason enough to look into this library. The native canvas API, if you recall, is simply a drawing area in which shapes get added to a surface and left there, without the developer being able to change the properties of that particular shape later. Artisan JS is a step in the right direction in allowing that sort of functionality.

Impact: HTML5 Game Engine

Impact is a yet-to-be-released game engine developed using JavaScript. There’s a video of it in action apparently running at 60 frames per second on an iPhone 3GS. Here’s something different though: it’s not running in the browser, but it is using Safari’s JavaScript engine (JavaScriptCore). In iOS land the built-in JavaScriptCore is considered a private API, so any apps using this engine would be automatically rejected.

That would be a shame to see Impact never get off the ground on iOS. However, the developers are looking at a workaround to bundle their own JavaScript core (it is open source, after all) instead of calling the private API. Good luck! Here’s to hoping that makes it through.

Tidbits

Normal Mapped Lighting for Photos using Canvas
StackBlur: A Fast Gaussian Blur Algorithm In JavaScript
2D bin packing with javascript and canvas
John Resig confirms that the jQuery Mobile alpha is coming Saturday
Paul Irish has compiled a list of HTML5 Cross-browser polyfills (what’s a polyfill?)
NodeJS screencasts

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

News roundup: Jo, shoulda.js, Kraken

Hello world!

My name is David Calhoun, a frontend engineer at Yahoo! and until relatively recently I worked with Matt Henry on Yahoo! Mobile. Matt has been pretty busy lately, so he’s offered to give me the task of maintaining the blog’s News Roundup and the PDF edition’s Community News. I hope I can live up to the role! I have a passion for all topics frontend (HTML, CSS, JS, etc) in general, but I’ll try my best to keep this to JavaScript-only topics. If I ever miss anything particularly important (let’s hope not!), always feel free to leave a reply below.

Jo HTML5 Mobile App Framework

Jo is a new mobile UI framework by Dave Balmer which weighs in just over 8k and aims to provide a consistent experience across webOS, iOS, Android, and Symbian devices. Yes, all WebKit-based browsers on smartphones. But even these phones have their own inconsistencies, and Jo aims to iron out these differences and provide an abstraction layer for things such as gestures and client storage.

This is all well and good, but if you peek into the documentation there’s a few more things Jo offers. One of the most controversial things Jo does is use custom nonstandard HTML tags, taking advantage of the fact that these browsers will still allow the element to be styled. Instead of having a “horde of divs” with classes on them, now there’s a horde of nonstandard tags such as jodialog and jobutton. Interesting but definitely controversial.

shoulda.js

Shoulda.js is a micro JavaScript testing framework built by Phil Crosby and inspired by Shoulda for Ruby. And when I say micro, I mean micro, as the entire code is under 300 lines.

Unit tests are arranged into modular “contexts” and has the familiar setup/teardown and assert functions common to most unit testing frameworks. The tests are run with V8 on the command line and don’t run in an actual browser, so shoulda.js falls somewhere between a JS lint tool and a full unit testing framework that tests in-browser.

Kraken: Mozilla’s new testing benchmark

A few weeks back, Mozilla released Kraken, a new browser benchmark designed to be Mozilla’s analogue to SunSpider and the V8 Benchmark Suite.

“We believe that the benchmarks used in Kraken are better in terms of reflecting realistic workloads for pushing the edge of browser performance forward” says Mozilla developer Rob Sayre. “These are the things that people are saying are too slow to do with open web technologies today.” In other words, Kraken is testing some of the weak points that are holding developers back.

And it looks like progress on that front is definitely being made, as Kraken shows a 2.5x speed increase in Firefox 4 over Firefox 3.6.

I tried running Kraken on my iPhone 3GS but the script timed out, so unfortunately I wasn’t able to get the test to run. I also ran it on the Nexus One and the test seemed to progress, albeit quite slowly. Hopefully the test will be more compatible with mobile devices in the future, especially given Mozilla’s interest and ongoing development with Firefox Mobile.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

News Roundup: Has.js, Promote JS, Unify

Has.js

Has.js is a new library from Dojo’s Pete Higgins and some other notable Javascripters that allows for easy and systematic Javascript feature detection. The idea is that you have a simple, consistent API for testing whether the interpreter running your code has some or other feature (e.g. querySelectorAll, Function.prototype.bind, and lots of other hotness). This is going to be a huge boon to framework authors, since it gives them an easy way to leverage the fast native versions of their functionality they’re building where it’s supported, and fall back to their own hand-rolled implementations where it’s not.

Has’s developers are careful to note that it’s still early days for the project, so don’t go writing any production code with it, and don’t expect the API to stay the same from day to day. Still, this is a great project, and one that library developers and anybody else who wants clean performant code (i.e. all of you) will be able to make great use of in the future.

(h/t Badass Javascript)

Promote JS

You know what sucks? When you hit up your search engine of choice for a little bit of Javascript help (maybe because you can never remember the right way to call Array.splice()) and you end up at some outdated or just plain wrong message board linkrot or <cough>W3Schools</cough>. Promote JS is a new crowdsourced SEO project to fix this problem. The idea is that you (and all of your friends) put a badge like this one…

JavaScript JS Documentation: JS Array splice, JavaScript Array splice, JS Array .splice, JavaScript Array .splice

…on your site. The badge has a link to Mozilla’s excellent Javascript documentation, and that link’s title has some handy keywords to help boost the SEO juice of thorough, accurate, well-maintained documentation. Do your part to help the community, and add a badge to your site. And maybe even more importantly, when you’re blogging about code, don’t forget to link the stuff your talking about back to some good documentation.

Unify

Unify is an interesting new framework that aims to be a one-size fits all solution for building native-like desktop, mobile, and (in the near future) tablet applications. Essentially, it lets you build HTML/CSS/JS applications and deploy them to various platforms by means of 3rd party wrappers for your code. If you want to deploy to a high-end mobile device, you’d use the included version of PhoneGap. Ditto Adobe AIR, if you’re deploying to the desktop. Additionally, Unify makes use of Sass and Qooxdoo for some sugar around the CSS and JS parts of the application.

SproutCore 1.4

After several rounds of release candidates, SproutCore 1.4 has finally been released! The new release feature touch support, as well as an Interface Builder-like GUI application that is itself written in SproutCore. Even better, if you’re already used to working in IB, you can even compile your actual XCode .xibs into SproutCore code using the SCXIB library. There are a ton of other new features in the library, so check out the SproutCore site, grab the Sproutcore gem, or pull the code down from Github

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

News Roundup: Zepto, Zaphod & Narcissus, TLS in Javascript

Zepto

Thomas Fuchs is at it again. His new project, Zepto, is a lightweight framework for developing applications for mobile WebKit. It’s super-minimal (~2k), which is critically important in mobile browsers, given spotty connectivity and unpredictable caching behavior. The syntax cribs pretty heavily from jQuery (which is a little funny given its author’s resumé), so it should be dead simple for most Javascripters to just pick it up and run with it right away. As for functionality, it provides just a basic wrapper around DOM and Ajax methods, as well as some sugar on top of WebKit’s native animations. This is perfect, since most of what Fuchs has built is stuff you were probably going to have to write for yourself anyway, so this has the virtue of freeing you up to get started on actually building your real functionality, but without incurring a massive cost in terms of page weight. This is exactly the kind of thing the mobile Javascript world needs more of. WebKit browsers are some of the best out there, so you shouldn’t need a jQuery-sized library to handle the cross-browser stuff for you. All you need is something that keeps you from having to repeat yourself and lets you leverage the stuff that the browser already has built-in.

Forge

Forge is a project that allows you to use TLS encryption in Javascript to communicate over HTTPS. I’m not even going to pretend to understand all of the cryptographic nuts and bolts of this project, but I wanted to point it out because it’s extremely awesome. Unfortunately it has to use Flash to do cross-domain communication in a reliable, cross-browser way, but there are some tools on the horizon that could obviate this in the future. Giant congratulations to he folks who got this working. It’s a truly great hack.

Zaphod & Narcissus

Narcissus is a new Mozilla Javascript engine that is itself written in Javascript that includes the most cutting edge and experimental features of Javascript. It was created to give Javascript developers a playground in which to explore new and emerging features of the language without having to wait for those features to land in a released browser. Narcissus code can be included in a page by using the script type application/narcissus and executed via a Firefox add-on called Zaphod. This is a huge boon since it allows Javascript developers to play around with bleeding-edge Javascript in a real browser environment.

Auto-generating Javascript Unit Tests

Auto-generating Javascript unit tests – Angus Croll from the excellent Javascript, Javascript blog has written a tool to generate some very basic unit tests from existing Javascript code. I’m not going to go into a ton of detail about how it works since I’m not sure this is something you should even want to do (if you automatically create tests based on code you’ve already written, how do know you’re testing something that works correctly?). But even if it’s not something I could really see myself using, it’s an extremely impressive piece of Javascript metaprogramming, and it is well worth your time to go through the code and see what it’s doing.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

News Roundup: Geddy, Server-Side Console.log, “Or so they say…”

Geddy

Geddy is a new web framework for Node.js that aims to be a more full-featured than Express. Like Express, Geddy has DSL for routing and support for templates and partials. Where Geddy goes further, is in implementing an ORM (inspired by the Datamapper and SQLAlchemy APIs) and a full system of Rails-style code generators. Geddy also supports RESTful architectures with its content negotiation system. Express has this as well, but Geddy adds some sugar.

If you’re familiar at all with the Ruby web development ecosystem, it probably makes the most sense to think of Express more like a souped-up Sinatra, and Geddy as being further along towards Rails.

At the top of my wish list for a framework like Geddy would be the ability to swap out the ORM-layer for another solution (if I wanted to use Mongo, for instance, or if I preferred a more ActiveRecord-like API). It’s early days for Geddy though, so this is something that could be coming in a future version.

Server-Side Console.log

The console is an indispensable tool for debugging Javascript, but mobile browsers have extremely limited console support. To name but one drawback, there’s no way to easily inspect the contents of an object logged to the console. This can be a huge headache when you’re working on a mobile app. Fortunately, Yahoo!’s David Calhoun (my former cube-mate) has created a simple solution: Server-side Console.log. Just include the JS file in the project you’re developing, add the PHP code to your server, and you’re good to go. Write console.log statements in your Javascript as you normally would, and the log messages will be written to a file on your server. The best part is that all of the objects you log will be expanded (only one level, but that’s already way more useful than the mobile browsers’ consoles). This is such a simple idea, but it’s so totally useful. If you’re doing any mobile Javascript development, do yourself a favor and start using this right now.

“Or so they say…”

“Or so they say…” is a great HTML5 Canvas and audio demo by Mr. doob. But while it’s certainly an impressive achievement in its own right, I’d like to call attention the tools that Mr. doob used in building it. You might recall doob as one of the developers behind “The WIlderness Downtown”, the Google/Arcade Fire music video/tech demo (if you haven’t seen it, go watch it right now). Well, in his post about “Or so they say…”, doob links to his three.js library for 3D rendering, and to the sequencer he built, both of which were used in “The Wilderness Downtown”.

Also, if you want a little bit of explanation about how these libraries are actually used in these projects, check out Brad Neuberg’s post over at Ajaxian.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon

News Roundup: Handlebars, Page Speed, and XAuth

Handlebars.js

Handlebars.js is a new project from Yehuda Katz that aims to be a more flexible, performant superset of the Mustache templating language. In his blog post announcing the project, Katz identified a few of the ways in which Handlebars is an improvement over Mustache. One of the biggest changes is that Handlebars templates are compiled instead of interpreted. This is a big win in a couple of ways: in addition to the performance benefits of compiled templates, you also get additional methods that can be called on the parsed/compiled content.

The bulk of the other improvements have to do with the way Handlebars deals with blocks and contexts. For instance, Handlebars takes advantage of the fact that iterations and booleans are just special cases of block helpers, and so handles those (and other) blocks with a general method that is invoked whenever there isn’t a helper method specified. As far as the context stuff goes, Handlebars gives your helpers access to the global context, so the lambdas in those helpers can behave differently in different object contexts. In Mustache, you would have to constantly rebuild your objects to get similar behavior.

All in all, Handlebars looks like a tremendous improvement over Mustache, and a pretty solid piece of engineering. Take a look at the project over on Github, and take it for a spin.

Webpagetest and Page Speed

WebPagetest.org has now added Google’s Page Speed SDK into it’s performance metrics. So now when you analyze a page with WebPagetest, you’ll get back a lot of the same data that you would have if you had run Page Speed yourself locally. As the Page Speed integration continues the WebPagetest reports will look more and more like what you’re used to getting from Page Speed.

Zakas on XAuth

This week, Nicholas Zakas has a nice blog post up about the new XAuth framework for cross-site authentication. Basically, XAuth lets a site see what other XAuth-enabled sites a user is logged into and then show them more relevant content based on that. So for instance, instead of a site brandishing a long string of social network badges, asking you to add it to every single platform that has every existed, if that site used XAuth, it would know that you use Twitter and Facebook and only show you those links.

Zakas’s post, however, digs into how XAuth works under the hood, which is pretty interesting. XAuth uses localstorage to store its authentication tokens (as opposed to, say, cookies). However, access to localstorage data from one domain is strictly limited to that domain. XAuth gets around this by essentially building a server that runs out of an iframe, thus allowing access to those data from around the web. Check out Zakas’s post for all of the details as well as how to generalize the XAuth approach to cross-domain storage.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • description
  • Reddit
  • TwitThis
  • Simpy
  • StumbleUpon



© webdevpublishing 2011