Web Info & Tutorials

Craig Riecke, Rawld Gill, and Alex Russell, along with the Pragmatic Programmers themselves have been kind enough to give the Ajaxian community some exclusive extracts from the Mastering Dojo beta book.

What do we have on the docket?

First, we have details on the Dojo DOM Apis. Specifically, the author takes us through a challenge involving interview questions and manipulating the DOM for them. We end up seeing code that uses dojo.query, and class addition such as:

It then delves into the intricacies of dojo.query and beyond.

Secondly, we have Ajax the Dojo way which takes us on a trip down dojo.data and dojox.Grid lane... two differentiating features that Dojo comes with. The chapter builds a wishlist system using these features.

There is a lot lot more in the book, which the table of contents covers for you. There are 400 pages of material here that cover the huge variety that exists within the Dojo community.

Thanks to the authors and the editor for sharing this with us.

"We're thrilled with our new location in The Grange, a fast growing community with a diverse population"

Media Advisory/Interview Opportunity - BMO Bank of Montreal Celebrates New Branch Opening with $100,000 Donation to Grant MacEwan College > EDMONTON, May 9 /CNW/ - In celebration of the grand opening of the new ... via Canada NewsWire

Flickr, Viddler, Qik, Pownce and Revision3 are the first services to support oEmbed, an easy way to allow embeding media from a certain URL in a third party site.

From the oEmbed site:

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

This means that if you for example find a nice photo on flickr, you can take the URL and easily turn it into embed-able data:

Original URL: http://flickr.com/photos/codepo8/2475016321/

oEmbed URL: http://flickr.com/services/oembed?url=http://flickr.com/photos/codepo8/2475016321/

Result:

You can define the output format and the maximum width and height with URL parameters:

oEmbed URL:

http://flickr.com/services/oembed?url=http://flickr.com/photos/codepo8/2475016321/&format=json&maxwidth=200

Result:

Supported formats for responses so far are photo, video, link and rich.

John Resig has completed 7 months of work to produce a port of Processing, the "programming language and integrated development environment (IDE) built for the electronic arts and visual design communities", which aims to teach the basics of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks. One of the stated aims of Processing is to act as a tool to get non-programmers started with programming, through the instant gratification of visual feedback."

Processing.js uses Canvas and obviously JavaScript to get the job down in the browser.

John talks about the two pieces of the puzzle:

The Processing Language

The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript. This involves a lot of gnarly regular expressions chewing up the code, spitting it out in a format that the browser understands.

The language includes a number of interesting aspects, many of which are covered in the basic demos. Here's a brief selection of language features that are handled:

• Types and type casting - Type information is generally discarded, but becomes important in variable declaration and in casting (which is generally handled well).
• Classes - The full class system is supported (can be instantiated, etc. just fine).
• Method overloading and multiple constructors - Within classes you can have multiple method (or constructor) definitions - with the appropriate methods being called, based upon their signature length.
• Inheritance - Even classical-style inheritance is supported.

Note: There's one feature of Processing that's pretty much impossible to support: variable name overloading. In Processing you can have variables and functions that have the same name (e.g. float size = 0; float size(){}). In order to support this there would have to be considerable overhead - and it's generally not a good practice to begin with.

The Processing API

The second portion of the project is the full 2d Processing API. This includes all sorts of different methods:

• Shapes drawing
• Canvas manipulation
• Pixel utilities
• Image drawing
• Math functions
• Keyboard and mouse access
• Objects (point, arrays, random number generators)
• Color manipulation
• Font selection and text drawing
• Buffers

Congratulations to John, and I look forward to seeing some fantastic visualizations in the browser thanks to this work.