The video above shows a simple showcase application that Neil Roberts of SitePen created and wrote about.

He testing out the new APIs such as the touch API where he worked with drag and drop:

And resizing and rotation with the Gestures API:

Some readers might have noticed that a gesture is just a prettier way of looking at touch events. It?s completely true, and if you don?t handle things properly, you can end up with some odd behavior. Remember to keep track of what?s currently happening in a page, as you?ll probably want to let one of these two operations ?win? when they come in conflict.

I spent some time running the applications, and thinking about how different they are to Web versions. For example, when I launch Twitterific vs. a web based Twitter it actually was faster for the Web page to load Safari up with everything. Twitterific also had a strange feature for loading images. As I moved up and down the list the images looked like they were being pushed out of cache which made for a weird experience.

What if the iPhone offered the ability to aggressively cache "applications". When you open the application it opens its own instance of Safari instead of just linking over to Safari. What if it had access to local storage APIs in WebKit?

The native applications do have benefits. They have access to the camera, addressbook, ... well wait, those could be JavaScript APIs too.

There is the tool chain. You can have fine grained performance knowledge of your application with the Objective-C tools, but with SquirrelFish Apple is getting better and better there too. Other nice tooling could work well when constraining the Web interfaces to the iPhone form factor.

What about games? You couldn't do super monkey ball, or could you if you had a really solid Flash, or feature complete canvas.

The native apps are great, but I am still betting on the Web as a great platform for mobile applications too.

You pulse away with something like:

As we all know, null not only does not have any properties, but their existence also can not be tested. So null.property retuns error instead of undefined.

You can end up with something like this:

PLAIN TEXT

JAVASCRIPT:

1.  
2. if (
3. (node) &&
4. (node.nextSibling) &&
5. (node.nextSibling.className == ...)
6. ... ) {
7.    ...
8.  

There is a neat trick that can simplify the boolean expression. We might supply an empty object {} or zero (0) as an alternative:

PLAIN TEXT

JAVASCRIPT:

1.  
2. if ( next = (node || 0).nextSibling) ) {
3.  

The new release features really simple keyboard and form scripting and couple of new UI widgets, a new event system and a stack of other improvements:

Ojay.Forms. By far the biggest new package, Ojay.Forms sorts out a real pain point for me in terms of app development. It does two things: it provides unobtrusive replacements for the YAHOO.widget.Button family of classes, and it provides a DSL for handling form validation and Ajax submission.

Ojay.Keyboard. The new keyboard package is an abstraction over YAHOO.util.KeyListener that lets you say what mean without worrying about character codes, for example:

Ojay.Keyboard.listen(document, 'ALT SHIFT S', function() {
    // handle key press
});

It lets you group sets of keyboard commands together so you can make context-sensitive keyboard controls, and gives you easy access to enable/disable key events and their default browser responses. Not much more to say except that you should check out the documentation.

We have two new UI packages, Ojay.Overlay and Ojay.Paginator. Overlay gives you a bunch of classes for positioning content on top of the document, producing lightbox effects and the like, and Paginator implements the content slider effect that?s got a lot of attention recently, including the ability to lazy-load pages of content via Ajax, and easy integration with Ojay.History. Both packages come with a collection of events to allow your code to react to changes to the components, just like you would for DOM elements.

Speaking of events, this release introduces Ojay.Observable, a JS.Class module that allows any class to support the on() method used for listening to events. This module underlies the custom events published by all the Ojay components. More information and examples are in the documentation.

Manual code specialization

A technique is presented (in terms of examples) which can give performance boosts in certain situations. The technique relies on higher-order functions, and sharing variables in closures.

Namespacing again

Namespacing has been generally accepted (in one form or another) as a good thing. In this posting, a pair of functions: 'namespace' and 'using' are presented. The former ensures the existence of a namespace, similar to what is offered in common JavaScript libraries. However, it accepts more general forms of namespace declarations:

The latter function 'using' complements the namespace function. It brings a namespace into scope.

Parasitic inheritance & instanceof

The object function advocated by Crockford in his work on parasitic inheritance makes a new object which has the input object as it's prototype. However 'instanceof' doesn't work with this function. A technique for combining these two is presented.

Autocomplete was one of the first Ajax patterns to come about. We often talk about how it looks, but the how it works part is what really matters. How smart is the algorithm to work out what you are completing against? How long do you go before you kick in to see a result? Does it narrow enough?

László Kozma wrote up his thoughts on Reverse Autocomplete which talks about helping the user as they change their mind during autocomplete, and being away of what they are doing, instead of just using field.value as an absolute. He acknowledges that he isn't the first to think about this, but there are some good ideas.

First, he shares a couple of use cases of the problem, such as:

I enter "German football team" in Google Suggest, then I change my mind and go back to change the query to "Italian football team". Autocomplete doesn't help me with this. Even when I entered "Italia| football team", (the | sign shows the cursor location), autocomplete doesn't do anything, as it doesn't look to the right from the cursor. For the record, "Italian football team" is a frequent query, if I type it normally from the beginning, as soon as I get to "f", Google Suggest knows what I want. Google Suggest seems to look at the text as a whole, trying to autocomplete to the right, ignoring the cursor.

In the browser I typed "mail.yahoo.com". Then I want to go to "mail.google.com" next. Even though "mail.google.com" appears in the history, when I correct the middle part, such as to "mail.g|.com" or even "mail.googl|.com", the autocomplete is clueless. Again, the same behaviour as before.

I typed "jenny@fictivecompany.com" in the e-mail To: field. Now I go back to change it to "jennifer@fictivecompany.com". Even though this address is in the address book, "jen|@fictivecompany.com" does not activate the autocomplete. This problem is similar to the previous one, but in this case space and the comma can both be considered a separator, as the boundary for autocompletions.

And his solution:

The solution is to simply take whatever method there was to search for the text before the cursor, and use it to match the text after the cursor as well. If a prefix tree is used, it is convenient to store the text to the right in reversed form for easier search. Most of the time the text after the cursor will be empty, so there won't be much overhead. When the cursor moves back, simply match the text both before and after the cursor, and only do autocomplete if something matches with both sides.

This example implementation in javascript is based on AutoSuggest v1.0.
I modified the code to perform the reverse search as well. Both the original and the modified version are under LGPL. For the cursor location code I modified this script. As this is just a user interface proof-of-concept, I don't recommend using the javascript code as such, as it is not more than a quick hack.

Text left and right of the cursor is shown for more clarity. Note that I didn't use any of the complex data structures mentioned, all we have is a simple array, as can be seen from the source.

As a case study in putting your faith in the wrong idols, you can?t do better than posts like this which ?blame the W3C? (via Molly). Blaming the W3C for not pushing the web forward is both humorously off-target and distressingly common. I?ve written about this before, but fundamentally you can?t blame the W3C for failing to act because it?s not the W3C?s job to act. An MBA should be able to tease this out a bit more effectively ? any decision only requires that you have answers for five questions: why? what? how? when? who?

Answering these for pushing the web forward is straightforward, even on a simplistic level:

• Why?: it?s too hard to build reasonably sophisticated interactions with current web technology
• What?: new tags, JS and DOM APIs, CSS syntax, and renderer support for all of the above. Eventually, a spec or five reflecting these new technologies.
• How?: we could try asking the W3C to do it, but they don?t have any power. When they?ve been left to their own devices, the W3C has failed. Miserably. Over and over and over again. Instead, browser makers should introduce new stuff and then agree to agree on it (via the W3C or similar organizations).
• When?: introducing new features in any given browser seems doable in short-order. In the case of Open Source browsers, the answer is ?as soon as someone decides to invest in them?. Competition has even spurred Microsoft to some level of action. The likely time-scale for new features over all, though, appears to be on the order of 5+ years. That?s clearly not soon enough.
  TODO: investigate ways to speed this up.
• Who?: browser makers and others in a position to affect the code that goes into the renderers we use.

Figuring out ?how? leads you directly to ?who? in this case. The action we all want is the sole purview and responsibility of the browser vendors and they alone have the power to push the web forward. The ?web standards community? has made it clear that they?ll need the imprimatur of some authoritative body where agreement can be forced, but that hasn?t kept the browser vendors from taking the initiative there, either. The big, open questions then center around how the ?web standards community? can make enough room for renderer vendors to try out new stuff, since that?s how we get new things. Demanding agreement on what to do before trying it out demonstrably doesn?t work, so it?s then imperative that there be a mechanism for the web to iterate prior to standardization. In fact, I?ll argue that this is now the biggest reason that Paul Ellis isn?t getting the improvements he wants out of the web: there?s no mechanism in place by which any browser vendor can take significant risks without incurring the wrath of a swarm of WaSPs, or worse. Attempts to even begin to lay the groundwork for such a mechanism have been shot down forcefully by may folks who, like Paul, view ?fixing the web? as the W3C?s job.

Standards bodies are animated only by the needs of industry to reduce costs by forcing vendors to agree on things. Like Open Source, they can act as a back-stop to the monopoly-creating power of network effects by ensuring that the price of software commodities eventually does reach zero. In this context, then, the W3C?s only effective function is to drive consensus when visions for how to go forward diverge or lead down proprietary ratholes. Asking the W3C for more is the fast path to continued disappointment.

The W3C is just a sail and all sails need the wind to function. You can?t blame the sail for the wind not blowing.

Passpack notified me about their new library to support Host-Proof Hosting (HPH) development (touched on earlier). The library allows anyone to set up HPH on their own infrastructure. It's mostly a browser-side library powered by JQuery, focused on transferring encrypted data, and there's also some sample server-side PHP code.

I think the most important part of HPH is that it provides users with real-world data privacy, it's not just a theory, it works now. I'd love to see the pattern get some traction with SaaS providers, but it's not the most obvious system to implement. To this avail, we've just released an MIT/LGPL library for creating Host-Proof Hosting applications: http://code.google.com/p/passpack/

Host-Proof Hosting is the pattern whereby the server knows nothing about the user's data, because the browser ensures it's kept encrypted each time it goes over the wire. It's been practiced in the real world for a couple of years now, but has received some extra attention lately. Clipperz, a Passpack competitor, recently mentioned interest from Richard Stallman in its advocacy for "zero knowledge web applications".

In their response to Clipperz, Passpack expressed a more pragmatic view:

The Zero Knowledge Web Application as-is, is a theory. This is not to say that there couldn?t be a future where it might become a credible solution for privacy, but until that happens, it is inappropriate to ask people to trust a theory with just too many inconsistencies.

Updated after clarification from Passpack - the library is for any server infrastructure, not an API to communicate specifically with Passpack's servers. They say such an API is on the radar.

If you have some functionality that fits into the performance world, instead of creating a new plugin, you can embrace and extend Firebug as other great tools such as YSlow have done.

To learn more, read up on:

• Part I. Hello World!
• Part II. Toolbar
• Part III. Options
• Part IV. Localization
• Part V. Domplate
• Part VI. Yahoo! Search

About a year ago or so I put out the Uniform Event Model (UEM) script which
was an implementation of the W3C DOM 2 Event Interface for IE. As it turned
out that release was very premature - the script was simply incomplete and
definitely not ready for production use.

The design ideas however were good enough. Since then Allan Jacobs has
joined the JSLab team and together we have written a new version of UEM
which is much more stable and modular.

This first release includes support for:

• DOM 2 Event Interface in IE
• DOM 2 UIEvent Interface in IE
• DOM 2 MouseEvent Interface in IE
• DOM 2 Legacy keyboard handling in IE (fancy way of saying "handle it like
  Firefox")

The code is unobtrusive - no special syntax or semantics are needed. A lot
of documentation is available

There still exists issues with some types of events but at large the code is
stable and is performing well enough to be released to the public. Hopefully
we can get some feedback on how to improve it and catch some early errors.

The size of the script is about 32Kb (when minified) it its basic form but
additional modules are available for inclusion. The download page can be
found at http://www.jslab.dk/jdc.download.php

We are currently working on finishing the DOM 3 KeyboardEvent and DOM 3
textInput interfaces (for IE, Firefox, Opera and Safari) besides various DOM
corrections for other browsers than IE.

It was inspired by webwait but lets you compare the load times of sites and records every performance test for later analysis like browser used, country of origin, top competitors etc.

For example, comparing reddit to Digg:

It is useful to compare versions of your own site, too.

You can come down with 8 bit shoot-em-up fever by clicking the screenshot.

Matt also shows you what the score is and give some more game info on his blog.

From search to easy navigation and cross-referencing, the Dojo Toolkit source code documentation can now be viewed everywhere you go. When future versions of the Dojo Toolkit are released, you will have the power to view multiple versions of the API within the Dojo Toolbox. We're also working on allowing you to view documentation for your own source code in a future release!

In addition, the Dojo Toolbox allows you to do custom builds of the Dojo framework as well as get a comprehensive list of learning resources all within the same application. This is a "must-have" for Dojo developers.

• Documentation: new screencasts of the various steps
• GWT 1.5 support: "Ext GWT is a 100% native GWT application written in Java. Ext GWT does not wrap any 3rd party JavaScript and does not use any external JavaScript files. Ext GWT fully leverages the GWT API including the widget lifecylce, events, listeners, messaging, and RPC."
• "Performance was a high priority item for the Ext GWT 1.0 release. Many changes were made since the first beta releases. Initial rendering times are quicker and the new layout code reacts quicker to window resizing. Improvements can easily be seen in the Explorer demo."
• Advanced Form Layouts
• Improved Data Loading, Store, Binder, and Field API

Looks like a very solid release indeed. Congrats to the team.

What if that code was part of an HTML standard? Would that make you feel better about Comet-style applications? Well, Michael Carter has pointed us to the HTML 5 discussions that give us WebSocket:

The HTML5 specification now offers WebSocket, a full-duplex communications channel that operates over a single socket. I have been listening closely, and in some cases contributing, to the process of ensuring that WebSocket will:

• Seamlessly traverse firewalls and routers
• Allow duly authorized cross-domain communication
• Integrate well with cookie-based authentication
• Integrate with existing HTTP load balancers
• Be compatible with binary data

He goes on to discuss how WebSocket is not the same as a TCP socket itself, and what that means as we develop real-time applications.

José Jeria pointed us to a great looking XUL application that allows you to sketch GUI's and then export them to PNG:

With the power of the underlying Mozilla Gecko engine, Pencil turns your excellent Firefox 3 browser into a sketching tool with just a 400-kilobyte installation package.

Pencil will always be free and can run on virtually all platforms that Firefox 3 supports.

Always good to see people using the power of XUL that still has features that I hope to see HTML get.

The problem is simple

First, you have an array. It looks like this:

The array

var arr = ['a', 'b', 'c', 'c', 'd','e', 'e',
'e', 'e', 'e', 'f', 'e', 'f', 'e',
'f', 'a', 'a', 'a', 'f', 'f', 'f'];

Be sure to use the array above in your example. You can iterate through an array easily with a batch function like forEach.

using forEach

arr.forEach(funciton(item, index, ar) {
  // do stuff here
});

In the end, we’d like to have an output that looks like the following:

The final output

a b c c d e e <span>e e e</span> f e f e f a a <span>a</span> f f <span>f</span>

You can use basic string concatenation while looping through the items to build your final output. Be sure to test and compare your output results with the actual results. And last but not least, the rule.

So the rule is this

In English: Group together all duplicate items that occur anytime beyond twice by wrapping them with a tag, naturally “bookending” them.
Simple, right? No, really. Tease your brain for a few minutes, you can fix that bug after lunch.

He talks about how languages are branded, e.g. ?Java? is enterprise. One of his main points is that brands are ?const identifiers?, i.e. it takes an entire generation to change brand perception, so it?s often more effective to simply re-brand. e.g. GTE had a poor brand, so they tried a self-deprecating ad campaign, which backfired, and subsequently re-branded to Verizon.

He then mentions Javascript has a branding problem, because it represents ?browser? and ?toy language? and ?damnit, I gotta learn Javascript? and it?s the language no-one wants to use. He also notes the name itself isn?t great either, nor the rhino imagery. (I?m not sure why Steve assumed many programmers would associate Javascript with rhinos; the Rhino product and O?Reilly cover weren?t really promiment enough to do that; rhino ain?t camel!).

But, wait a minute, didn't we already have a rebranding?

Javascript has already been rebranded. In fact, I?d go so far as to say ?Ajax? was one of the most successful rebrandings in software history.

Although technically Ajax != JavaScript, and the rebranding is really DHTML, he is right. Ajax rebranded the Web, and we have all benefited from it.

I also think that this is just the beginning, and we haven't seen the best of the Ajax revolution yet.

You could argue the same for the browser platform. Why push JavaScript 2 further than cleaning it up, and instead allow other languages to augment it.

This is where technology such as IronMonkey come in, as well as the work that Scott Peterson is doing, written up here:

Scott Petersen from Adobe gave a talk at Mozilla on a toolchain he?s been creating?soon to be open-sourced?that allows C code to be targeted to the Tamarin virtual machine. Aside from being a really interesting piece of technology, I thought its implications for the web were pretty impressive.

If I followed his presentation right, Petersen?s toolchain works something like this:

1. A special version of the GNU C Compiler?possibly llvm-gcc?compiles C code into instructions for the Low Level Virtual Machine.
2. The LLVM instructions are converted into opcodes for a custom Virtual Machine that runs in ActionScript, a variant of ECMAScript and sibling of JavaScript.
3. The ActionScript is automatically compiled into Tamarin bytecode by Adobe Flash, which may be further compiled into native machine language by Tamarin?s Just-in-Time (JIT) compiler.

The toolchain includes lots of other details, such as a custom POSIX system call API and a C multimedia library that provides access to Flash. And there?s some things that Petersen had to add to Tamarin, such as a native byte array that maps directly to RAM, thereby allowing the VM?s ?emulation? of memory to have only a minor overhead over the real thing.

The end result is the ability to run a wide variety of existing C code in Flash at acceptable speeds. Petersen demonstrated a version of Quake running in a Flash app, as well as a C-based Nintendo emulator running Zelda; both were eminently playable, and included sound effects and music.

First up, I am building an application that uses some canvas and ran into an issue handling events which sent me down a merry path that took me through: initMouseEvent, error fun (Component returned failure code: 0×80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent?..] ), tabindex=0 (thanks Alex), and finally Event.stop(e).

It reminded me of how much I have forgotten, and how debugging can be too hard for Ajax applications. The good news, was that the solution was simple, and the event system does have some very nice properties.

Secondly, some folks tried to make a story out of Passpack adding an AIR application, but we quickly saw how they ended up with both an AIR app, and Gears support in their browser based application. I talk about how this is a valid choice:

I also expect to see more joint applications. Gears functionality is working into HTML5 the standard, which will end up in WebKit (as Apple is great in that regard), and AIR uses?. WebKit as its renderer!

I really hope that AIR will be able to bridge to those APIs, and you get the best of all worlds. I would love to use the Workerpool API from within an AIR application that is doing a lot of JavaScript work for example.

The Passpack team also announced a new open source Host-Proof Hosting Library that has a lot of nice encryption routines packaged up allowing you to:

Needless to say

I’ve caved in on trying to maintain this website and using Social Web Services to keep my 7,000+ subscribers seems like a good idea.

On another note

Google has been keeping me busy these last few months on Gmail where we’ve been diving into some exciting stuff. I recently moved to San Francisco so I now have ample time to add content to my Reader stream while shuttling to work in Mountain View. Wifi on a bus is super rad! And on that note, my stop is coming up which concludes this post. Cheers

This is not one of those posts.

Getahead used to be the only place I blogged, but I've infected a few other feeds. I generally don't spend ages linking from one blog to another - I figure you can subscribe to the others if you want that content, however you can't do that if you don't know they exist.

I'm not closing this blog down, however I expect to blog less here. The good news, however, is that I hope that means that the subject-to-noise ratio will go up and not down. Stay tuned.

Both of these blogs are multi-author, 'professional' blogs. By professional, I mean peer-reviewed posts and no cat pictures - you can get those elsewhere.

CometDaily is written by the people that have spent the most time working on Comet. I've been busy this week so:...

On-board vs. Off-board Comet is about 2 architectural styles around how to deploy comet. DWR typifies one style. It's taken (in part) from the Comet BOF that Alex and I did at JavaOne.

Comet and Cross-Site Scripting is about how comet could supercharge a web worm so it becomes more virulent than a Warhol Worm. Samy took MySpace down with a web worm in 23 hours. I think it might be possible to reduce this time to about 6 seconds.

I work for SitePen along with a long list of similar techies. Our blog generally one post per day, about Ajax, Dojo, DWR and Comet.

Servlet Spec, Comet and Java is about how to work around Java's servlet spec to avoid needlessly chewing up threads. It looks at the options provided by Jetty, Grizzy, Tomcat and the new Servlet Spec.

And clearly, like everyone else, I tweet from time to time. In between tweeting, like everyone else, I mostly complain about how I can't tweet because Twitter is so unreliable.

Still no cat pictures, but I don't get peer reviews on my tweets.

Maybe Sun sees Java as 'done'. OK, but the Java language has one of the largest developer communities in the world, and they'd like some direction. Where do Sun recommend they go for their server-side development needs in 5 years time?

Maybe Sun think we should change to JRuby, Scala or Groovy. Maybe there are updates to Java that I don't know about. If none of the above are the case, the community will eventually disappear into mish-mash of languages that doesn't have the strength of numbers.

3:19pm Update: tweaked last paragraph to make the point clearer.

Scoping anonymous funcitons

var o = 'hello world';

(function() {
  alert(this);
}).call(o);

It seems ridiculous (in a good way), but it works!

So what’s this mean?

It’s actually a big deal. Think about how many times you’ve lost your desired scope due to being inside the scope of another function. Confused? How many times have you done the following:

Pitfalls anonymous functions

// timeout functions
function Constructor() {
  this.foo = 'bar';
  var that = this;
  this.timerId = window.setTimeout(function() {
    alert(that.foo);
  }, 10000);
}

// local functions
Constructor.prototype.getFoo = function() {
  var that = this;
  var getInternalFoo = function() {
    return DED.isString(that.foo) ? that.foo : 'new foo';
  }();
};

Ok, still not a huge deal, but we can clean up the code a bit, and I would sway from using this on non-anonymous functions where scope should be explicitly defined by the author. Here’s how we can rewrite the code above without using the silly old this = that convention.

Rewritten with proper scope

// local functions
Constructor.prototype.getFoo = function() {
  var getInternalFoo = function() {
    return (DED.isString(this.foo) ? this.foo : 'new foo';
  }.call(this);
};

Ok, what about function callbacks that need scope inducing

(Hehe. Scope inducing, that sounds funny… (anyway)) As you noticed above in the first example with the setTimeout, the first argument takes in a function callback which is different than simply immediately invoking a function. Funny enough, the work around for this is to…. (yeah you guessed it), add another closure! Note the two following snippets of code. The first immediately executes and alerts “hello world”, the second waits for five seconds, and does likewise:

Scoping it up

var o = 'hello world';

// first snippet
(function() {
  alert(this);
}).call(o);

// second snippet
window.setTimeout(function() {
  (function() {
    alert(this);
  }).call(o);
}, 5000);

Pretty fun, huh? Yeah, I thought so too. Cheers.

Fixing it

Actually, there is no real fix (unless Apple builds it into the OS), but I’ve come up with a hack (work around) for my browser. First thing to do is to create a text file and call it “maximize.html” (you can call it what ever you want, it’s only temporary). Then populate it with the following contents.

Maximize code

<html>
  <head>
    <title>maximize</title>
  </head>
  <body>
    <a href="javascript:moveTo(0,0);resizeTo(3000,3000);">
      Maximize
    </a>
  </body>
</html>

It should look like this:

Next you want to open up this page in Firefox:

You should see a simple page with a link. What you want to do now is bookmark it. You can do this by control + clicking the link to bring up your context menu. Then choose “Bookmark This Link…”

Add a keyword shortcut

Obviously, this has been discussed before. If you’re using Firefox, you can add a keyword shortcut to make it even easier to use this functionality. Since afterall, this is usually the kind of setting you just want to trigger on the fly without having to use your mouse. To do this, simply track down your bookmark, load up the context menu by control + clicking the bookmark, then choose “Properties”

Then type in a short letter into the keyword input box… like “m” (the actual keyword is up to you).

That’s it

Try it out. It’s not optimal, but it does what I need when browsing the web in full maximum real estate.

Of all the languages to support, I guess Java must be one of the hardest because of the heavyweight runtime and the difficulty in separating code. But it also makes sense because supporting Java might give you quick access to Ruby/JavaScript/etc.

I have no knowledge of if Google are going to support Java in App Engine, however there are some tea-leaves that can be stretched and rearranged to form a vague picture.

Some time ago Google hired Greg Czajkowski the lead of Project Barcelona from Sun. Project Barcelona was where Isolates (JSR-121) came from and the Resource Consumption API (JSR 284), both of which would help you do this sort of thing. And both of which are now in Final Draft stage.

I have no idea if this does mean that Google are working on App Engine for Java, but if they do I'm going to claim bragging rights for having blogged about this 18 months ago.

As a reminder, CSS Naked Day is a world-wide event that lasts for one international day (48 hours) where webmasters around the globe strip CSS from their websites to promote Web Standards with layered semantic markup, and a clear separation between content, and presentation to enhance accessbility.

Cheers!

Short version: Commercial support and development assistance is now available for DWR.

Long version: SitePen has been offering support packages for a while, but you've had to ask. But it's now an advertised service, if you want help with Dojo, DWR or Cometd, packages start from $995. The DWR mailing lists are not going away and is still going to be a good solution for many problems, but if you need a bit more care and attention, we can now do that too.

The team of people that I'm working with at SitePen are awesome. Aside from the obvious DWR, Dojo and Cometd projects, SitePen people have also created TurboGears, Persevere and JSPON, are working specs for Bayeux, JSON schema and Servlet 3.0, and author json.com and cometdaily.com.

If you need to know more check-out the summary over on the SitePen site.

In terms of user visible HTML rendering features, I think IE 8 beta 1 is possibly the biggest release of IE in nearly 11 years since April 1997 when IE 4.0 alpha 1 was released. The history shows mostly bug fixes, and chrome changes since then. Maybe transparent PNG or Bidi text are bigger than Activities? It looks like that's going to be the feature that most people talk about, so I'm going to talk about some of the other stuff. There are 3 big things I'm interested in, and a few smaller features:

6 Connection Limit

I've been testing the new 6 connection limit. It works perfectly in my testing, Without any cookie or window.name hacks, DWR can do reverse ajax using comet to more than 2 browser windows:

DOM Storage

IE is way behind everyone else in implementing HTML5 features. So this is catching up to everyone else. It will be interesting to hear from the Dojo guys on this.

// sessionStorage also available
var store = window.globalStorage["http://www.example.com"];
store.setItem("key", "value");
var value = storage.getItem("key"); // == "value"
store.removeItem("key");

JavaScript Debugger

Firebug has been a stick that's been used to beat up IE for a while, and they've got an answer now. Unlike the other features, there isn't a screenshot in the release notes...

Firebug is still much better, in my opinion so far. But this is certainly a huge step forward compared to fighting with Script [Editor|Debugger] or Visual WebDev.

Acid 3

IE 8 does very badly on Acid 3 (17/100). However given that it's so new it's probably not fair to ding it too much. However it does need to improve big time:

• WebKit Nightly: 87%
• Opera 9.5b: 64%
• Firefox 3.0b3: 61%
• IE 8b1: 17%

For comparison, the released versions:

• Firefox 2.0.0.12: 50%
• Opera 9.26: 46%
• Safari 3.0.4: 39%
• IE 7: 11%

Given that they are innovating, I'm prepared to give them time to get the number up.

URL Bar Goodness

I didn't see this in the release notes anywhere. On Firefox I've got an add-on called LocationBar 2 that does some nice widgetry with the URL Bar:

Well it looks like IE8 has something similar built in too:

Cross-Domain XHR

The standards are still evolving on this one, but somewhat annoyingly IE8 seems to be going in a different direction from everyone else:

var xdr = new XDomainRequest(); 
xdr.open("POST", "http://www.example.com/xdr.txt");
xdr.send("Data for post body");

What is missing?

Lots. Still. No SVG/Canvas. No updates to the JScript implementation at a language level (it looks like there have been some performance increases though).

Let's not forget that Microsoft have more resources to get this right than almost anyone. If Opera can manage to create a first class browser, so should Microsoft.

And Finally ...

I loved the irony of the download recommendation. If you're downloading IE8, you might also like to download - IE6!:

• What are some of the major features planned for [DWR] version 3.0?
• When is 3.0 slated for release? Is it still sometime in June?
• What does the incremental release schedule look like before the final 3.0 release?
• What are the top small features or fixes in 3.0 that a developer will be thankful for?
• For someone who might have looked at DWR 2.0 and decided the time wasn't right, what might 3.0 provide to help "make the deal"?
• What happened to 2.1, why the jump to 3.0?
• What sort of impact will Tibco's role play in the future of DWR?
• What are the next major milestones for DWR after 3.0?

InfoQ is built using DWR, so it would be great if they could take advantage of features like automatic offline when 3.0 comes out.

Taking of things Q. Next week, I'm talking on DWR and Comet at QCon.

Jaxer is a way to run JavaScript on the server. But it's not just JavaScript as an alternative to Java/Ruby/PHP/etc. Jaxer is Mozilla, on the server, with it's face ripped off and replaced by a snorkel to serialize the DOM to a web browser. John has a great introduction, or there's the podcast that Ajaxian did.

The vision with DWR was always to say: We've got Javascript in the browser, and Java on the server - lets connect them in the best possible way. This leads to the migration of view logic from the server to the client. But it's not safe to move it all; Validation is part of view logic, but that needs to be done on the server. With Jaxer you can specify scripts to be runat="server" or runat="both" to allow validation or other logic to be run in both places.

Some of the changes that we've made to DWR will only help you if you are using DWR inside Jaxer, but others could be generally useful.

There are 2 basic changes. DWR on the Internet needs to make sure that the Internet only touches the code that you want it to touch. DWR in Jaxer doesn't have this problem because it's not accessible from the Internet, so we can do away with almost all configuration. Secondly latency inside a server-room is tiny compared with the net, which makes synchronous XHR viable.

So as it stands at the moment in development, you can use DWR inside Jaxer like this (clearly this is subject to change):

<script type='text/javascript' runat="server">
Jaxer.dwr.pathToDwrServlet = "http://localhost:8080/demoServer/dwr";
Jaxer.dwr.require("util", "new/org.example.Demo");

function loadServer() {
  var data = Demo.getData();
  dwr.util.setValue('fillFromServer', data);
}
</script>

There are a number of benefits that come out of this even if you're not using Jaxer:

• In dwr.xml you needed to specify javascript='ScriptName'. If (as is common) ScriptName == Class.getShortName then you can just drop the attribute, it will default properly.
• Cross domain remoting is now automatically detected, and scriptTag remoting is used if needed.
• There is a new init-param 'useAbsolutePaths' which might help people with trouble remapping DWR's location.
• All URLs are now reconfigurable.
• If you are using DWR in synchronous mode (which I don't recommend on the Internet) then you can use returned data in the normal way without needing a callback.

Despite the name, it's not really another Web MVC framework, but more along the lines of AppFuse or Grails, as a way to kick-start a project and provide some sensible defaults without needing to learn everything from scratch.

The source and release notes say it needs 1.6, so Mac heads will need to get the Apple Java6 preview.

Jose's aims:

In my mind what I really needed was a platform that:

• Is based on Java
  Although supporting Groovy / JRuby is a plus
• Helps me to kick start a project
  But simplifying the process by giving me the best (and this can be tricky) set of frameworks for each task
• Integrates both server and client sides
  And it's lightweight, robust and extensible. Read enterprise quality.
• Supports all the common tasks a web app has to handle
  I include here: User Management, CRUD operations, i18n support (both framework & data), AJAX and astounding visuals

Jose has done some brilliant work on DWR. He created a large chunk of our binary file support, and is currently the Spring integration maintainer, so it might be worth a download to see if it can help you.

Hair

My hair appears to have reached a max-length. It’s grown longer than I’ve ever really had it. But now in the shower I’m starting to notice that hairs from my head seem to be clogging up the drain. I have a feeling I’m going to be losing my hair quicker than I think.

Driving

I can’t stand slow drivers. I understand folks driving moving vans or big rigs or it’s somehow obvious that you’ve got a motor problem where I can see smoke coming out of our hood. But besides those people, everyone should be driving fast. The speed limit should really be 85 MPH on all highways that are currently 65 MPH. And what’s with three lane roads that have 35 MPH speed limits. Have you ever driven that slow? Really, try it. It’s hard.

Canadian Beer

In all honesty, wasn’t as great as I thought it was going to be. After trying a dozen Hefeweizen beers in Vancouver, my conclusion is that America still makes better Hef’s (yes, even better than Belgium). People generally say American beer is crap, but it’s not true. It’s just that the only “American beer” people can think of is Budweiser, Miller, or Coors. Go out and try a Widmer Brother, a Blue Moon, a Sierra Nevada, or a Gordon Bierch. You know what I’m talking about.

The Portland Airport has free wifi

I think all airports should have free wifi. Just like the city of Mountain View.

Playing songs on repeat

I am creature of the “repeat song” feature that media players include. When I hear a song I like, I play it to death; over and over and over again. I amaze myself though that even when I’ve played a song 50 times over, I still won’t know the words. It doesn’t mean I’m not listening, it just means I’m listening to their voices, not their words. I consider a song successful if I feel the way the artist had intended, even if I didn’t understand the words.

Canon vs Nikon

This age old debate still seems to populate forums and mailing lists. I personally shoot with Nikon, and I have my own reasons why that I’m not going to into. But really, if you’re one of those people that still complains about this, you’re not taking enough pictures. The only thing that Canon and Nikon users can both agree on, is that they’re both better than Sony and Pentax.

Twitter

I’ve been using Twitter for almost a year now and it’s hard to say why I keep using it. There’s a funny paradox that runs across my mind every time I send a message to Twitter. You see, I do it as a personal benefit to myself. Like keeping a little journal of snippets of what I’m doing as I live. I figure that one day it will actually be interesting to go back and read. On the other hand, I keep my Twitters public and I have “friends” on Twitter. With that in mind I always think to myself “people are going to read this, so I should be clever.” Often times, that keeps me from twittering anything at all. Every twitter I make, I think it’s going to be the last; until I send another.

Facebook

Seriously. Still?

Camping

I have always said, and will always say “Camping without a camp fire is pointless.” If you didn’t have a camp fire, then you didn’t go camping. Period.

Bike to work day

About ten months ago it was Bike to work Day. Kind of like an Earth Day. You know, keep the car at home and pollute the earth a little less than you normally do. I took on this feat, however, I didn’t bike back home (I got a ride back). To this day, my bike has been sitting next to my desk. Perhaps the next Bike to work Day that rolls around, I’ll return home with my bike.

Sushi

About a week ago I tried Sushi for the first time, probably ever, and it wasn’t bad.

I'll break it down: req.readyState = 4, and batch.async = false.

Last time I checked 4 = 4. So blatantly (4 != 4) is false. And false && false is blatantly uber false, as true as Alice Cooper covering Barbie Girl.

So seeing firebug step through if (false) and onto the return statement made about as much sense as trying to raise Schrodinger's cat in a séance.

I think it's another quirk in Firebug. This time it's simply something funky going on with "step over".

The moral is: Firebug sometimes lies to you about where the current line is.

This is all part of me adapting DWR so that it can be used as a connector between Jaxer and some Java server. More on that in a bit.

Nevertheless, the point being is that I’ve been getting a bit more serious into photography which makes it slightly more complicated to maintain a JavaScript blog. I DO in fact maintain this blog on a daily basis. My delicious feed is updated quite regularly, my prototype submissions seem to come in when people feel like submitting them, and of course my site pulls in my own flickr photos tagged dustindiazcom, effectively showing off my personal favs. However for those of you following my blog because of its original purpose, I apologize, the posts have really come to a minimum. If you haven’t done so already, take a gander at my archives or listen to some old podcasts, or perhaps if you’re motivated sit down and feast your eyes on a classic screencast.

Back to the point

So yeah, I’ve been walking around the planet capturing life with a little black machine in the palm of my hands known as a camera. If you’ve been enjoying what you’ve been seeing on Flickr, please do leave a comment. I’m sure most of you have added me as a friend by now.

I’ve been reading

Like I said before, I’ve been reading pretty much everything on Rockwell as well a few books that have caught my attention like Taking your photography to the next level by George Barr and Designing a photograph by Bill Smith. Both books that go beyond the mechanics of a camera and talk about framing and composition more so than messing around with apertures, white balances, ISO’s, and megapixels. I leave the mechanics to Ken Rockwell since he’s one of the few nerds that actually goes into high ISO comparisons (which by the way, is pretty cool too) but also believes that your camera doesn’t matter (also true (but of course, my opinion as well)).

Depth of Field

Somehow I became a depth of field junky and everything I captured had to do with the fine details. Take for example, this photo:

You can see my favorite beer (Hefeweizen) just coming into focus, which demonstrates a shallow depth of field. As a novice I thought the only way to achieve this was to buy a new lens that stops down with a low number (which is what I did). As it turns out, there’s three ways you can affect depth of field as learned through this interactive depth of field tutorial. After knowing such knowledge I then grabbed one of my older lenses and started taking photographs that revealed close-up details like this maple leaf just by getting up close and zooming in close:

I was instantly hooked to this art-form known as “bokeh” disregarding good color or composition. I figured if it had good bokeh then it was instantly a good photograph.

Good color

Bokeh alone is not good enough, and getting good color is often difficult. To this day I still haven’t mastered the art of white balancing. I know only a little of the science behind it, but it’s hard to tell what’s going on inside my Nikon when I set it to auto mode vs. cloudy mode (which happens to make my photos look warmer (even when it’s not cloudy)). I’m also a sucker for saturated photos, but sadly enough, over-saturating your photos can make them look very amateurish. I know, I have a lot of bad over-saturated photos that I thought were cool.

Good Composition

This is where “your camera doesn’t matter” really comes into play. Composition is really either about capturing the moment or simply lining up angles. Simply centering is the natural instinct of every point-n-shooter. But I’ve found that throwing subjects to the side adds a nice dramatic effect to the composition. Take for instance this fire hydrant I shot near my usual parking spot at Google.

Centering the image would have boring, but throwing it slightly off-centered makes it feel dramatic. Who knows why, but don’t you feel it? It’s as if there was a disturbance in the force and you can see it visually.

Making the perfect photograph

To this day I don’t know what makes the perfect photograph. It is of course an art form just like paintings or music. Art is in the eye of the beholder. But try locking yourself in a small room and take five hundred pictures. Surely you’re going to come out with a picture that is better than one of the other ones.

Photography is like JavaScript

As if you didn’t know it was coming to this. But let me be the first to put it into words. Photography is like JavaScript, and JavaScript is like photography. They are both expressive and beautiful. They can be done bad or good. They are both load and go. Pick up a camera and start shooting or simply grab a code editor, write code, and load it into a browser. Both are fun to compose. Both can view things from several angles. Both can detailed and complicated. Both can be simple. They are both object-oriented.

Conclusion

There is no conclusion. I will keep taking photos, capturing life as I see it. This was more or less an excuse to blog about something since I haven’t done so in over a month. I hope you’ve found it entertaining in the meantime.

Sincerely,
Your Blogmaster

The basics

When it comes down right to it, the bottom line is this. You need three ingredients. Event attachment; the ability create and append elements, and the ability to remove them. For example:

attach event / add / remove

* element.addEventListener(el, type, fn);
* parent.appendChild(element);
* parent.removeChild(element);

Yeah. That’s it. But this wouldn’t be much of a post if there wasn’t a demonstration of how to wrap this up in a easy to use interface. For this basic task, consider using two singleton’s as a skeleton to act as your API which will appropriately wrap your Dom object, and an Event object.

Dom and Event

var Dom = {
  get: function(el) { },
  add: function(el, dest) { },
  remove: function(el)
};

Event = {
  add: function(el, type, fn) { }
};

Your implementation code can live in a closure wrapper when we add this behavior to the window’s ‘load’ event.

implementation

Event.add(window, 'load', function() {
  // enclosed implementation here
});

Filling in the gaps

We can now essentially drop in our interface to do our heavy lifting.

Interface

var Dom = {
  get: function(el) {
    if (typeof el === 'string') {
      return document.getElementById(el);
    } else {
      return el;
    }
  },
  add: function(el, dest) {
    var el = this.get(el);
    var dest = this.get(dest);
    dest.appendChild(el);
  },
  remove: function(el) {
    var el = this.get(el);
    el.parentNode.removeChild(el);
  }
  };
  var Event = {
  add: function() {
    if (window.addEventListener) {
      return function(el, type, fn) {
        Dom.get(el).addEventListener(type, fn, false);
      };
    } else if (window.attachEvent) {
      return function(el, type, fn) {
        var f = function() {
          fn.call(Dom.get(el), window.event);
        };
        Dom.get(el).attachEvent('on' + type, f);
      };
    }
  }()
 };

Then simply use it to our convenience.

implementation

Event.add(window, 'load', function() {
  var i = 0;
  Event.add('add-element', 'click', function() {
    var el = document.createElement('p');
    el.innerHTML = 'Remove This Element (' + ++i + ')';
    Dom.add(el, 'content');
    Event.add(el, 'click', function(e) {
      Dom.remove(this);
    });
  });
});

You now have something that’s easy as Pie! View the demonstration. Cheers and happy new year!