Ben was cursing at a bug in some canvas code that he was playing with, where the rendering was off. One piece of his UI was blurred instead of crisp.

The debugging exersize was fun, and he shares it with you on his personal blog.

The moral of the story is: watch out for that zoom feature in today's browsers!

Along the way, I got to learn that canvas supports fractional coordinates:

My first thought was that it would be due to fractional coordinates. I have years of experience with drawing APIs that force integer coordinates, so I’m used to relying whacking off the fractional part of a coordinate and making up the difference when necessary in a second pass. Canvas, on the other hand, supports fractional coordinates, which I’m told is the fancy thing to do these days. (How the fraction is converted to an actual pixel is depenendent on whatever drawing system is doing the heavy lifting somewhere down the stack.) When your coordinates are fractional, you can get this kind of fuzziness.

Because the interface I’m working with involves a few layers of rendering code, ensuring that integers ruled the roost took some time. But after quite a bit of poking around, I found no evidence of fractional coordinates. It was around this time I saw Vlad (Mozilla’s graphics guru) walking around the office and asked for some help.

We started looking for evidence of transforms that would introduce fractional coordinates–but ultimately came up empty handed. As we went through this process, he pointed out that the <canvas> context instances are reused, so it’s a really good idea to save() and restore() when obtaining a canvas to avoid polluting the context:

PLAIN TEXT

JAVASCRIPT:

1.  
2. var ctx = canvas.getContext("2d");
3. ctx.save();
4. // painting here
5. ctx.restore();
6.  

I had assumed each call produced a fresh, stateless context, so this was welcome news indeed.

But, user error was the true case:

And that’s when we noticed that I had zoomed in a click using Firefox 3’s fancy full page zoom feature. And that was causing the image the be scaled up, and the blurriness.

As soon as I heard about the new iWork.com site launched yesterday, I knew I wanted to know more about how it was made. iWork.com is a web-based way to share and collaborate over your iWork documents. I searched around the blogosphere seeing if anyone knew any technical details, but didn't find anything, so I had to crack open Firebug and see what was under the covers. I really wanted to know whether the apps were built with Flash or Ajax or something else.

I downloaded a trial version of iWork 2009 and published a Keynote presentation. The new Sharing function unfortunately requires you to configure and use the Apple Mail program, which I did before I could test out to see how the iWork.com shared documents work.

Looking at the JavaScript files, I see SproutCore and Prototype being pulled in, so everything is built with Ajax and web technologies. It's also using WebDAV to pull in the metadata about the document, which is interesting (though it's piping the WebDAV over some kind of proxy):

http://publish.iwork.com/iw/p159985190/.iWork/Share/Untitled.pages/Metadata/?webdav-method=PROPFIND

That URL returns an XML WebDAV document with the document metadata properties:

Notice how some of the metadata payload is JSON as well.

The web-based iWork apps are themselves built above SproutCore, using that framework to organize and do things. For example, there appears to be something named CoreHeckler that has to do with the commenting system, all built using SproutCore.

Using the Firebug Inspector, I see that the slides are a combination of an image file, the Canvas tag, and transparent DIVs that overlay; if there are hyperlinks on the page they are overlaid on a separate DIV that lies over the canvas. Comments also float on top of the Canvas using another DIV. The Canvas appears to be used for comments somehow, but I'm not sure how. I see CoreHeckler.Graphics being bound to the Canvas element; I'm not super familiar with SproutCore however.

Looking through the CSS I see they are using a few -webkit- specific CSS style rules, mostly around rounded border corners and shadows. They are also using the Webkit CSS Gradients and Clipping.

I wanted to see how things were handled in Internet Explorer. When I look at a published iWork.com document in Internet Explorer a very interesting dialog box first appears:

It was indeed slow; it took about 17 seconds to load the document in IE. Clicking on individual slides took about 4 to 5 seconds to show.

I used the Internet Explorer Developer Toolbar to get into the DOM and see how things run on IE. The first thing I see is that the Canvas tag is in the DOM:

However, notice a glitch that it has the <CANVAS> and </CANVAS> tags as separate elements, which can sometimes happen when IE is dealing with unknown tags. They are also definently using VML (Vector Markup Language) on IE, since I see them pulling in the VML behavior for IE on the main page. I wonder why they didn't just use the Google-ExCanvas library that emulates Canvas for Internet Explorer (Disclosure: I work for a team at Google that promotes open web technologies like this).

One other thing I noticed is that if you are on the iPhone you get redirected to an iPhone version of the app. This just replaces the URL /document/ section with /iphone/. When you navigate to this you get a PDF version of the page -- that must be the iPhone version, a PDF file!

I wanted to see how the Pages application does things as well, so I published a document there. The published text is selectable in the browser! The document itself appears to be an image file. To do selection, whenever I run over some text it appears that a Canvas element is created and a 'highlighted' type graphic is drawn over the correct characters. Internet Explorer also supports similar highlighting, though on there it appears to be using VML to do the highlighting.

All in all this is a very interesting web-based application built with Ajax and JavaScript!

I'm terribly behind on my blogging but I wanted to re-post this nice little from Planet Python for those who aren't on it already. The for emacs allows you to do most word based operations over the separate words that make up a camel case word. I've been needing something like this for some time. As an emacs junkie, I've gotten quite accustomed to being able to move point pretty much directly where I want it in just a few key strokes. Camel case words, however, can get quite long so correcting a typo or changing a plural in one of the constituent words can leave me reaching for my mouse of hammering away at C-f or C-b. Simply unacceptable! :)

to /usr/local/share/emacs/site-lisp and then added the following to my .emacs:

(require 'camelCase) (add-hook 'find-file-hook 'camelCase-mode)

Following-up from our previous posting, we've got some more Ajax Experience videos. This post's theme is JavaScript and JSON:

Advanced Animation & Physics in JavaScript with Paul Bakaus

Forget about Web standards and go way beyond the usual capabilities of Web scripting languages. Learn how to create stunning effects using canvas/svg/vml, how to control animated graphics in JavaScript, and how to merge all kinds of standards and technologies to create a whole new world of possibilities. Using Paul's latest project as an example, he shows you how to adapt the things he talks about into new projects, featuring his new JavaScript game engine. Paul demonstrates how to control animated graphics in the browser, how to scale and rotate elements smoothly, and how to combine canvas, svg and filters with CSS to adapt new standards in browsers that don't support them. See how to move physics from the real world to the Web browser. In this session you learn how to: Create a walking animated character; Replicate new standards using existing technologies; Combine new standards to create a new experience.

Adv JavaScript: Closures, Prototypes, Demystified with Stoyan Stefanov

The times when JavaScript was just a toy language for making image rollovers and other, more irritating effects, are fortunately long gone. Today developers build much more sophisticated and complex applications be they for the Web (GMail), the desktop (Firefox extensions) or the server. JavaScript's prototypal nature makes its object-oriented features really different than "classical" languages like Java and C++, and we have to make sure we use the right tool the right way. In this talk you'll learn about JavaScript's most commonly misunderstood features and how you could put them to a good use.

Practical Functional JavaScript with Oliver Steele

This session covers how to use functional programming with JavaScript in real-life applications to implement client-side asynchronous processing, scheduling, and concurrency. These are complex areas that are difficult to think about or implement using straight object-oriented techniques, and become simpler with a handful of idioms that this talk demonstrates. Ajax developers (JavaScript or ActionScript) who are building applications that feature both ambient and reactive functionality, and that perform sophisticated tasks such as precompute display state or prefetch data, will benefit from this session. This session provides: A firmer understanding of closures and when to use them; Insight into implementing time-based and threadlike client-side behavior in the browser.

Applied JSON: HTTP REST, Ajax Databases & Beyond with Kris Zip

JSON has proven to be a very easy to use, yet immensely powerful data interchange protocol. However, by itself JSON lacks a number of important expressibility capabilities and efficient client/server data interaction must usually be customized. This session looks at how we can use various open specifications built on JSON to standardize and automate this interaction. We examine REST JSON, JSPON, and JSONPath. We also explore the capabilities of Ajax-accessible REST databases. The dynamic nature of non-relational databases can provide significant benefits for rapidly developing applications and providing JavaScript object persistence. Client-side code can directly participate in database interaction, simplifying the typical Web application stack. CouchDB, Persevere, and ActiveResource utilize a JSON REST interface. In this session, we learn how to interact with these simple interfaces and how to use JSONPath as a query language for JSON data stores. We see how these dynamic databases utilize JavaScript on the server for a consistent client/server JavaScript environment. We look at how Ajax databases affect security and provide an infrastructure for more secure Web applications. Finally, we cover JSON Referencing conventions as a mechanism for further expressing duplicate, circular, and cross-site referencing. Via a live demonstration, see how to use the Persevere open source tools to utilize these extensions to provide RESTful storage and server-side JavaScript. In this session you learn how to: Query JSON data with JSONPath; Use Persevere to provide a powerful persistence object store for JavaScript; Understand how JSON and the JSPON browser interacts with the Persevere object server; Employ JSON extensions and tools to enable open communication formats that can be used for rich and robust serialized object interaction between clients and servers with full object graph descriptiveness.

JSON SOA-based Client/Server App Dev with Kris Zip

JSON has proven to be a very easy to use, yet immensely powerful data interchange protocol. However, by itself JSON lacks a number of important expressibility capabilities and efficient client/server data interaction must usually be customized. This session looks at how we can use various open specifications built on JSON to standardize and
automate this interaction.
We examine REST JSON, JSPON, and JSONPath. We also explore the capabilities of Ajax-accessible REST databases. The dynamic nature of non-relational databases can
provide significant benefits for rapidly developing applications and providing JavaScript object persistence. Client-side code can directly participate in database interaction, simplifying the typical Web application stack. CouchDB, Persevere, and ActiveResource utilize a JSON REST interface. In this session, we learn how to interact with these simple interfaces and how to use JSONPath as a query language for JSON data stores.
We see how these dynamic databases utilize JavaScript on the server for a consistent client/server JavaScript environment. We look at how Ajax databases affect security and provide an infrastructure for more secure Web applications. Finally, we cover JSON Referencing conventions as a mechanism for further expressing duplicate, circular, and cross-site referencing. Via a live demonstration, see how to use the Persevere open source tools to utilize these extensions to provide RESTful storage and server-side JavaScript.
In this session you learn how to:
Query JSON data with JSONPath;
Use Persevere to provide a powerful persistence object store for JavaScript;
Understand how JSON and the JSPON browser interacts with the Persevere object server;
Employ JSON extensions and tools to enable open communication formats that can be used for rich and robust serialized object interaction between clients and servers with full object graph descriptiveness.

Daniel Steigerwald told us about his labor of love: QEvent, a "powerful tiny extensible standalone event library". He provides this laundry-list of features:

* lightweight footprint
* no namespace pollution - everything is wrapped in obj.$QEvent
* normalizes the DOM event model
* work also with Javascript objects
* fixes common IE bugs including: all common used event properties, IE 2px bug http://ajaxian.com/archives/javascript-tip-cross-browser-cursor-positioning, fix many IE leaks, event handlers are FIFO executed
* prevents repeated registration of same type and listener
* 'this' in listeners references to object or element itself
* fixes window 'beforeunload' issue (doesn't work in Opera)
* fixes window 'unload' (must be removed by itself)
* fixes focus and blur events
* DOM events are more extendable: event keys, event objects ( event.myCustomFn() ), custom events
* firing events works for elements
* toggled and flashed events (removed after first fire)
* tested on (IE6-7, Firefox2/3, Safari, Opera, Chrome)

Isn't event sugar a solved problem? Daniel replies:

* Occasionally, I need a lightweight library that will work with other frameworks. Frameworks such as jQuery which don't extend the native prototype and therefor have no compatibility issues are not modular enough to meet my needs.
* No event implementation is perfect. So I took my own approach to the issue and created my dream package.
* This implementation could serve as a model for others.

The syntax is straight-forward:

Over in SproutCore land, they have been talking about Peter Bergstrom and his amazing work with Canvas and SVG:

Peter Bergstrom has been doing some amazing work with SVG and canvas tags in his SproutCore-based these project called PaperCube.  PaperCube visualizes citations their relationships between authors.  Watching the videos of his project, you’d swear he was using Flash or Silverlight, but its not.  He’s using only native web technologies powered by SproutCore and JavaScript.  It’s a great example of what’s possible using the browser’s capabilities today.

Checkout PaperCube’s Node Graph (SVG),  Per Year View (SVG), and Paper Tree (pure HTML).

Starting to get