Patrick Meenan has setup an IE7 instance in Virginia that we can poke to do an AOL Page Test.

You give it a URL and some options such as the number of runs, whether to see the first and repeat views, and off it runs.

When finished you get to see the results which give you high level data on load times, waterfall graphs, an optimization check list, and a screenshot of what the browser saw.

If the waterfall is hard to read, send it to Steve Souders. He reads them like Neo reads the Matrix :)

What is interesting about the rewrite is the new approach that Ken took; the Ajax Head Pattern as he described it:

HomeMarks was built using the Ruby on Rails framework with a heavy emphasis on object oriented JavaScript to make AJAX requests to a RESTful back-end. Unlike most Rails applications it does not use any inline JavaScript helpers nor does it rely on RJS (Remote JavaScript) for dynamic page updates. Instead it is nearly 100% unobtrusive JavaScript which uses simple HEAD or JSON responses to communicate to the objects on the page. This has yielded very slim controller code which is decoupled from the views and easily testable in isolation at a functional level.

You end up with a lot of code that deals with HEAD:

We have all been talking about querySelectAll for awhile, but John Resig gives us a wrap-up that covers the state of play.

He talks about the browsers, and the libraries that wrap them and clean up shop via code like:

Less code. More speed.

A simple example shows you where to start. When given HTML like:

The following JavaScript will add data as items to the list:

Check out the demos for more detailed examples.

One of the tasks I had given the class is to create a thumbnail show with image information from a link pointing to Flickr using the JSON API. The following is a solution using and showing the options of ViewsHandler:

A flickr show created with ViewsHandler

ViewsHandler is not another JavaScript templating solution but works on the assumption that in most cases you'll have to create a lot of HTML initially but you'll only have to change the content of some elements dynamically as new information gets loaded or users interact with the app. So instead of creating a lot of HTML over and over again all I wanted to provide is a way to create all the needed HTML upfront and then have easy access to the parts of the HTML that need updating.

The first thing you'll need to do to define your application is to create an object with the different views and pointers to the methods that populate the views:

ViewsHandler then creates DIV elements for each of these views and hides them for you. In your methods you create all the HTML the different views need to have and apply it with an add() method. You then define the parts of the HTML that should change later on as fields using the define() method and you can use the set() method to change the content of these fields and the view() method to change between views.

The benefit is that for setting the data you don't need to access the DOM any longer or use innerHTML or nodeValue. ViewsHandler created a pointer to the element all of this is cached. The set() method also allows you to either add a new node as the value or a string. In the latter case it'll create a text node for you.

One convenience method is linkto() which creates links pointing to the different views for you. None of this is rocket science, but it helped the class to create large applications with complex views without losing track of what they are doing. Maybe it can help you, too.

Eric took a look at the most popular CSS frameworks (960, Blueprint, Content With Style, That Standards Guy, YAML, YUI, Elements, Tripoli, WYMStyle) and talks about choosing one...

Let’s get one question out of the way, the question "which one is right for you?" Answer… none of the above. It’s like templates. There’s nothing wrong with templates but you don’t put together your client’s site based on a template, right? They can be a good starting point for ideas but you do your own designs. If you’re going to use a framework, it should be yours; one that you’ve created. You can look at existing frameworks for ideas and hack at it. But the professionals in this room are not well served by picking up a framework and using it as-is.

Eric put together a grid of features and which frameworks support those features. Every framework does reset, colours, and fonts. The fact that every framework has a reset is evidence of the frustration we all feel with the inconsistencies between browsers. The rules for colour tend to be much more minimal. Font styling, on the other hand, is more fully-featured generally. Whereas the colour might just be set for the body element, font sizes and faces are specified throughout. Usually that font face is Helvetica. Most frameworks steer away from trying to style form elements. Almost all of them do layout, usually combinations of columns. Four of the nine frameworks included print styles. Three of the nine included hacks.

After using a framework on Google Code, I can definitely say that they add a lot, and can take some of the pain of out CSS.

Tom Kirkpatrick has written about a new API in Jaxer, Jaxer.Process, that allows you to call out to the host operating system. His example has a call out to get the uptime on the machine:

You can see the application running live.

Building applications has been made easier by a syntax highlighting code editor, improved widget drag and drop, undo, simplified data binding, more flexible css styling, and numerous usability tweaks.

Working with databases and web services has become a lot simpler. Forms are generated automatically, and applications can be setup to save data with just a few clicks. A new REST service importer expands WaveMaker's already stellar support for web services. Developers can also create Java based services to connect a rich client to virtually any backend process.

The community version of WaveMaker Studio 4.0 is open source under the GPLv3 license and a fully supported enterprise version with role based access control is also available. Please go to www.wavemaker.com for more information.

Christopher Keene is obviously proud of this release if you look at his blog post talking through the 9 steps to an Ajax app.

He talks about the goals for WaveMaker 4:

• Lowest learning curve - WaveMaker 4 is the easiest way to start building Ajax applications.
• Highest productivity - our WYSIWYG Ajax studio delivers best in class productivity for basic business applications.
• Sheer beauty - our Dojo-based Ajax client produces jaw-dropping user interfaces.
• Easiest mashup tool - nobody delivers a better mashup tool for web services Java classes and databases than WaveMaker.

And went on to talk about why he thinks the learning curve is low.

He is experimenting, and writing up a series of "how to write an Ajax library" as he does just that. He has already started with:

• Decisions
• The basic JavaScript OO concerns

Check out the project release on Google Code as well as the project homepage and let him know what you would like to see.

UPDATE Thomas just posted about getting sued by Gaiaware due to a non-compete. I am not a lawyer, and have no idea about the law there, what was signed, etc..... but this seems totally out of bounds and they should leave him alone.

You can view a demo at work or download the code.

Of course, Jacob realises that this doesn't make sense for many use cases:

Of course, one big disadvantage of doing this on the client in JavaScript is that the you need to download the entire MP3 file before the tags are available, so it might be better to stick to server-side solutions in many cases if all you need is the tag info.

Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest Wordpress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2.

Jeeremie walks you through the steps of dropping this code into your site and provides the final source code as well to make the whole process painless. The end result is a very nice and intuitive slide down login panel which provides a nice balance of functionality and preserving screen real-estate.

In summary, it seems that the two groups agreed to focus cooperative effort of ECMAScript 3.1, a modest improvement of the current JavaScript that includes some new features like the ability to mark properties as non-enumerable and freezing objects (which can be used to implement classes).

After that is complete, the two groups have agreed to work on a new version of JavaScript dubbed “Harmony”, which will be a more modest evolution of the current JavaScript, minus some of the more ambitious features like namespaces and packages. Other features, like classes, will likely be implemented in terms of new features in ES3.1 like freeze().

Which brings me to the title of my post. Now that it seems as though ES3.1 will be embraced by all the browser vendors moving forward (and will likely be the implemented iteration of JS for at least a little while), I wondered what sorts of features might still make it into ES3.1 before the spec was closed.

Specifically, I’ve long been interested in trying to get method_missing into JavaScript, and in fact, it is already available in Firefox/Spidermonkey as __noSuchMethod__. In fact, Johnson makes use of noSuchMethod in its Ruby proxy.

Want to get it in ASAP? Make your voice heard to the technical committee.

Sanjiv Jivan, original creator of GWT-Ext, posted on SmartGWT, a new wrapper on top of SmartClient.

Charles Kendrick of Isomorphic, creator of SmartClient, announced the new project as well as the approach they have taken:

we’ve taken an approach of generating GWT code from SmartClient’s documentation, combined with hand-coding portions that can’t feasibly be generated. By tweaking our documentation set to contain additional metadata (some of it GWT-specific), we’ve been able to generate code you might not otherwise expect, including things like enumerated constants and convenience constructors.

What this means is that the first release of SmartGWT will provide the complete SmartClient API, fully documented.

You can now write code such as:

Sanjiv Jivan joined the project under the terms that Isomorphic sign a document that said:

The founders of Isomorphic Software are committed to keeping a complete, up-to-date version of SmartClient available under an LGPL license.

We continue to invest heavily in building new features, skins, tutorials, and tools for SmartClient LGPL.

We think it's normal and expected that some people receive great benefit from LGPL software and do not pay. The spirit of open source, in a nutshell, is that releasing free software creates so much wealth that the portion that flows back to you is more than enough.

Sincerely,
Charles Kendrick
Alex Shvedoff

ECMAScript 3

Aka: JavaScript, ES3, ECMAScript 262-3, and JScript.

The current JavaScript that every browser implements (more or less). This is the current ratified standard and represents the 3rd edition of the ECMAScript spec. It is very old. Nothing else in this list is (yet) a ratified standard of any sort.

ECMAScript 4

Aka: ES4, “JavaScript 2?.

A new language which was to be mostly backwards compatible but add optional (gradual) typing and class-based inheritance. Based loosely on Adobe’s ActionScript 3. This is the language effort which died as a result of Harmony.

ECMAScript 3.1

Aka: ES3.1. A set of small additions to ES3.

Planning for this edition was started at Microsoft and Yahoo’s behest late last year, causing the split in the working group which has been healed by the Harmony announcement.

ActionScript 3

Aka: AS3

Adobe’s current JavaScript-like language, only with many features lifted from languages like Java which also enforce types and class-based semantics. This was the starting point for much of the work which became known as ES4.

Tamarin

A JIT-ing byte-code virtual machine (VM) which is at the core of the Flash Player and was donated by Adobe to the Mozilla Foundation. This is the VM that runs ActionScript 3 code today but will likely run “real” JavaScript for Mozilla in the future. It is not a full implementation of ES3 or ES4, but instead implements its own byte-code and needs to be wedded to a “front end” (like the ActionScript 3
compiler from Adobe) in order to be usable by programmers.

Tamarin-tracing

A VM which implements the same byte-code language as Tamarin (known as “ABC”) but which is designed for use in mobile devices and other scenarios where code size and VM footprint are important. It implements trace-tree JIT-ing as a way to speed up hot-spots. Also donated to Mozilla by Adobe.

TC39

The name of the ECMA technical committee which is chartered to evolve the JavaScript language.

Harmony

A new code-name for a language which is to come after ES3.1. It will feature many of the things ES4 was trying to accomplish, but may attempt them from different directions and will
focus much more on incremental, step-wise evolution of the language.

JavaScript 2

A now-defunct name. This name was originally given to Waldemar Horwat’s first proposal at a large-scale evolution of the JavaScript language in 1999. That effort did not succeed (although Microsoft implemented some of it in JScript.NET) and subsequent work via the current TC39 charter to build ES4 has sometimes been given the name “JavaScript 2?, but it never really stuck. Not a name that describes any ratified standard or current proposal.

ECMAScript

The formalized name of the JavaScript language. Since Sun Microsystems owns the name JavaScript and has no idea what to do with the trademark (but has been benevolent thus far), the ECMA committee which standardized the language was forced to adopt a different name.