The Chromium folk have posted about JavaScript conformance as they release a test runner for Sputnik, that allows you to easily run the complete test suite from within your browser:

Sputnik touches all aspects of the JavaScript language defined in the 3rd edition of the ECMA-262 spec. In many ways it can be seen as a continuation of and a complement to existing browser conformance testing tools, such as the Acid3 test. While we are always focused on improving speed, Sputnik is not about testing how fast your browser executes JavaScript, but rather whether it does so correctly.

Since we released the Sputnik tests as an open source project, the most requested feature has been the ability to run the tests in a browser, and we are excited to launch that functionality today. The new test runner lets you run the tests from a single URL and quickly see the results in your browser. This makes it easier both for users to see how well their browser conforms to the JavaScript spec, as well as for browser makers to find bugs and incompatibilities.

You can also use Sputnik to compare browser conformance.

The dart board shows relative conformance based on the number of tests that hit or miss. Of course, in the real world, all tests are not equal. This has been an issue with Acid tests. The race to 100 is socially interesting, but if you miss a few core tests that could be worse than meeting 10 corner cases in SVG :)

He starts with the simple pattern that Crock-y documented back in the day..... and then goes on to discuss augmentation (loose and strict) and then deeper into some cool patterns:

Cloning and Inheritance

PLAIN TEXT

JAVASCRIPT:

1.  
2. var MODULE_TWO = (function (old) {
3.     var my = {},
4.         key;
5.      
6.     for (key in old) {
7.         if (old.hasOwnProperty(key)) {
8.             my[key] = old[key];
9.         }
10.     }
11.      
12.     var super_moduleMethod = old.moduleMethod;
13.     my.moduleMethod = function () {
14.         // override method on the clone, access to super through super_moduleMethod
15.     };
16.      
17.     return my;
18. }(MODULE));
19.  

This pattern is perhaps the least flexible option. It does allow some neat compositions, but that comes at the expense of flexibility. As I've written it, properties which are objects or functions will not be duplicated, they will exist as one object with two references. Changing one will change the other. This could be fixed for objects with a recursive cloning process, but probably cannot be fixed for functions, except perhaps with eval. Nevertheless, I've included it for completeness.

Cross-File Private State

One severe limitation of splitting a module across multiple files is that each file maintains its own private state, and does not get access to the private state of the other files. This can be fixed. Here is an example of a loosely augmented module that will maintain private state across all augmentations:

PLAIN TEXT

JAVASCRIPT:

1.  
2. var MODULE = (function (my) {
3.     var _private = my._private = my._private || {},
4.         _seal = my._seal = my._seal || function () {
5.             delete my._private;
6.             delete my._seal;
7.             delete my._unseal;
8.         },
9.         _unseal = my._unseal = my._unseal || function () {
10.             my._private = _private;
11.             my._seal = _seal;
12.             my._unseal = _unseal;
13.         };
14.      
15.     // permanent access to _private, _seal, and _unseal
16.      
17.     return my;
18. }(MODULE || {}));
19.  

Any file can set properties on their local variable _private, and it will be immediately available to the others. Once this module has loaded completely, the application should call MODULE._seal(), which will prevent external access to the internal _private. If this module were to be augmented again, further in the application's lifetime, one of the internal methods, in any file, can call _unseal() before loading the new file, and call _seal() again after it has been executed.

This pattern occurred to me today while I was at work, I have not seen this elsewhere. I think this is a very useful pattern, and would have been worth writing about all on its own.

Sub-modules

Our final advanced pattern is actually the simplest. There are many good cases for creating sub-modules. It is just like creating regular modules:

PLAIN TEXT

JAVASCRIPT:

1.  
2. MODULE.sub = (function ()) {
3.     var my = {};
4.     // ...
5.      
6.     return my;
7. }());
8.  

While this may have been obvious, I thought it worth including. Sub-modules have all the advanced capabilities of normal modules, including augmentation and private state.

Nice work Ben!

As a lot of the students liked the idea of APIs like GeoPlanet and Placemaker but had a hard time getting their head around them I thought it a good idea to build a small JavaScript library that does the job for them.

I give you the YQL Geo library (and its source on GitHub). Using this library you can do the following:

• Detecting the visitor's location with the W3C geo API and with IP as a fallback
• Find geo location from text
• Find location from lat/lon pair
• Find locations in a certain web document (by URL)
• Get the location for a certain IP number

And all of that in pure JavaScript. For example:

Will get you:

Other uses:

This gets the name and the country of a lat/lon pair:

This finds the visitor's location (on W3C geo API enabled browsers it asks them to share it - otherwise it detects the IP and locates this one on the planet)

Read all about it on my blog and enjoy!

modulr is a CommonJS module implementation in Ruby for client-side JavaScript

Ruby? what does that have anything to do with it? Ah, its from one of those Prototype guys isn't it.... Yup, Tobie is at it again, this time with modulr:

modulr accepts a singular file as input (the program) on which is does static analysis to recursively resolve its dependencies.

The program, its dependencies and a small, namespaced JavaScript library are concatenated into a single js file.

The bundled JavaScript library provides each module with the necessary require function and exports and module free variables.

This can also help sharing that CommonJS code. I recently did just that and had some:

David Anderson: "TraceMonkey has rocket boosters, so it runs really fast when the boosters are on, but the boosters can’t always be turned on."

Opera's new JIT compiler Carakan is doing well as we just posted. What is Mozilla doing with TraceMonkey? A lot.

Mozilla JägerMonkey adds method based JIT (of V8 and Nitro fame) to keep the boosters on.

We learn more from David Mandelin and David Anderson.

What is EnhanceJS?

EnhanceJS is a new JavaScript framework (a single 2.5kb JavaScript file once minified/gzipped) that that automates a series of browser tests to ensure that advanced CSS and JavaScript features will render properly before they’re loaded to the page, enabling you to build advanced, modern websites without introducing accessibility problems for people on browsers that aren't capable of supporting all advanced features. It's designed to be easily integrated into a standard progressive enhancement workflow: just construct the page using standard, functional HTML, and reference any advanced CSS and JavaScript files using EnhanceJS to ensure they're only delivered to browsers capable of understanding them.

So, you have simple markup, if you pass the test you will get "enhanced" with new CSS and JavaScript behaviour additions to take things to the next level. You can even do conditional CSS for IE:

There are detailed docs:

• EnhanceJS Usage Basics (integration basics covered in this article)
• Configurable Options (all options available in EnhanceJS)
• Integration tips (how to prevent a flash of unstyled content, and more)
• Additional tests (capabilities tests not included in the default suite)

Go to the bottom of their blog post and click on the low-bandwidth version to see it in action.

Piotr Zalewa has created a really great playground, jsFiddle, for testing sample code and playing with the Web. With an area for the holy trinity of the Web (HTML, CSS, JS) and an output region, you can get right to hacking.

It goes beyond this though. You can also add resources, an Ajax echo backend, and auto load from a slew of JavaScript frameworks.

You can also check out the examples and see great stuff such as Processing in action.

And the finishing touch, share and embed.

Piotr wrote all of this using CodeMirror and MooTools. Nice! Having worked on Bespin, and developed a playground like this (looking forward to show a new mobile one soon!) I appreciate the work!

jQuery 1.4.2 has been released today and it comes with some performance bumps (aggressive ones according to Taskspeed). Benchmarks are challenging, and John even calls that out:

For example, we saw significant overall performance speed-ups in Taskspeed simply by optimizing the $("body") selector because it’s called hundreds of times within the tests. Additionally we saw large gains by optimizing .bind() and .unbind() by a fraction of a millisecond – an inconsequential amount – especially considering that any cases where you would bind hundreds of events you would likely want to use .live() or .delegate() instead.

There are some new APIs a bunch of them around ergonomics:

In this release we’ve added two new methods: .delegate() and .undelegate(). These methods serve as complements to the existing .live() and .die() methods in jQuery. They simplify the process of watching for specific events from a certain root within the document.

For example:

PLAIN TEXT

JAVASCRIPT:

1.  
2. $("table").delegate("td", "hover", function(){
3.         $(this).toggleClass("hover");
4. });
5.  

This is equivalent to the following code written using .live():

PLAIN TEXT

JAVASCRIPT:

1.  
2. $("table").each(function(){
3.         $("td", this).live("hover", function(){
4.                 $(this).toggleClass("hover");
5.         });
6. });
7.  

Additionally, .live() is roughly equivalent to the following .delegate() code.

PLAIN TEXT

JAVASCRIPT:

1.  
2. $(document).delegate("td", "hover", function(){
3.         $(this).toggleClass("hover");
4. });
5.  

The jQuery team continues to really put the pedal to the metal.

The goal of this implementation is to optimally set justified text in the new HTML5 canvas element, and ultimately provide a library for various line breaking algorithms in JavaScript.

You can see the subtleties at work:

Check out the linebreak code which does more than solely justification. It can also perform all sorts of alignment with an appropriate selection of boxes, glue and penalties. It is also possible to give it varying line widths to flow text around illustrations, asides or quotes. Alternatively, varying line widths can be used to create interesting text shapes.

Jacek Galanciak has created a nice visual transition library, Quicksand, that filters and shows a set of data in an interesting way.

The jQuery plugin has you quickly calling quicksand like this:

and you have the data to transition between:

You can customize the effect (set the easing, setup data, and the like). Seethe docs and demos for more.

This enables you to do very cool things such as unit test JavaScript in the same area as your Ruby tests:

and you can even use JavaScript libraries.... as script tags are autofetched:

This library builds on the shoulders of giants, one of which is Mr. Johnson, John Barnette who I had the pleasure of working with many moons ago. He is the person I think of when I remember that the best engineers that I have worked with haven't been computer scientists, but musicians and biologists. He is also a great fun guy.

Anyway, sorry for the aside.

If you are a Rails chap, you may also be interested in the Rails plugin holygrail.

Fun side effects such as:

Got a fun one? Add it to the site!

We covered GLGE, a WebGL based engine recently, and now we have a new one; Copperlicht. The engine features:

• 3D World editor: CopperLicht comes with a full 3D world editor named CopperCube.
• Many supported 3D file formats: .3ds, .obj, .x, .lwo, .b3d, .csm, .dae, .dmf, .oct, .irrmesh, .ms3d, .my3D, .mesh, .lmts, .bsp, .md2, .stl. and more, see below.
• Incredibly fast: CopperLicht is highly optimized and able to render and animate even huge 3d scenes.
• Simple to use: easily understandable SceneGraph API with lots of tutorials and examples in the documentation
• Binary compilation: Unlike other WebGL 3D Engines, CopperLicht compiles your 3D meshes into a small, binary file which downloads quickly, reducing bandwith usage for your users. Simply import your 3D files into the CopperCube editor and publish it as CopperLicht scene.

Check out some of the demos in a WebGL capable browser: Quake 3, Toy Car.

Various backends support different feature sets:

You can use a core API like this...

... and a jQuery Queue Widget.

I was recently reminded about Dmitry Baranovsky’s Javascript test, when N. Zakas answered and explained it in a blog post. First time I saw those questions explained was by Richard Cornford in comp.lang.javascript, although not as thoroughly as by Nicholas.

I decided to come up with my own little quiz. I wanted to keep question not very obscure, practical, yet challenging. They would also cover wider range of topics.

There are fourteen questions in all, starting here:

    (function(){
      return typeof arguments;
    })();

“object”

“array”

“arguments”

“undefined”

Louis Gorenfeld some very detailed explanations on how to fake 3D including some of the formulas used in the days of 8 bit.

He is also working on some demo code which you can help him with by providing some JS/Canvas demos:

Øyvind Kinsey is, and he just created jsContract an alpha library to give you some pre and post condition abilities.

Here is an example:

A lot of contract code for little functionality.... good old contracts ;)

It is interesting to read how Øyvind instruments the code. Run a test through the translator tool and you get:

See addmap.js in action below - all the content in the green box is generated from the paragraph of text above it. You can try it out for yourself by clicking the screenshot.

Using addmap.js is easy - sign up for a Google Maps Key and provide it as a configuration parameter. Then call the analyse function with the ID of the element to analyse as the parameter:

The script uses YQL and Yahoo PlaceMaker under the hood, for more info and updates on this, check the blog.

Extending JavaScript natives gives you the power to customize the language to fit your needs. You can add convenience methods like "hello world".capitalize() or implement missing functionality like [1,2,3].indexOf(2) in JScript. The problem is that frameworks / libraries / third-party scripts may overwrite native methods or each other's custom methods resulting in unpredictable outcomes. Fusebox, a limited version of the sandboxing component found in FuseJS, avoids these issues by creating sandboxed natives which can be extended without affecting the document natives.

For example:

PLAIN TEXT

JAVASCRIPT:

1.  
2.   var fb = Fusebox();
3.   fb.Array.prototype.hai = function() {
4.     return "Oh hai, we have " + this.length + " items.";
5.   };
6.  
7.   fb.Array(1,2,3).hai(); // "Oh hai, we have 3 items."
8.   typeof window.Array.prototype.hai; // undefined
9.  

John has a series of short screencasts to introduce the topic of sandboxed natives, how to use them, and the techniques used to make it all happen:

1. Sandboxed Natives 101: Screencast One
2. How to create a sandbox: Screencast Two
3. How to create a Fusebox: Screencast Three
4. The Final Countdown: Screencast Four

Great to learn from. It is a shame that you have to remember to use a very different way to access the types of course and that you have to do all of this magic.... but with JavaScript, it is what it is!

Jaml lets you write HTML like this:

You can also use templates like this:

Check it all out on his Github repo.