Web Info & Tutorials

Bill Scott of Yahoo! showed us an early version of Protoscript at The Ajax Experience. He got some good feedback, and has just announced the first version. He will be speaking on this and more at the upcoming Ajax Experience show, so come to chat with him about it.

What is Protoscript?

Protoscript is a simplified scripting language for creating Ajax style prototypes for the Web. With Protoscript it's easy to bring interface elements to life. Simply connect them to behaviors and events to create complex interactions.

It is a way to take an existing web page or a prototype of a web page and "sprinkle" rich behaviors to play with concepts. Ideally you should be able to express an interaction in a declarative manner without having to write JavaScript directly (but not kept from it if you need to). And even more ideally you should be able to build up the "legos" of interaction in simple GUI tool embedded in the browser so that you are not encumbered with even a simple syntax to type in.

Note, this has nothing to do with Prototype the library, or prototype the OO system that JavaScript uses. Gotta love overloading of terms!

The heart of this all is a JSON based DSL for declaring behaviour.

Let's take a look at some examples:

a) Define behaviour on an id="avatar" image to make it fade and close out.

b) Load in some content when the area is clicked

c) Use a Popup when clicking on an image, and fade in another image in that popup

Bill has done a great job in thoroughly documenting the tool, and providing simple demos to get across how it works.

Since the DSL is so simple, it is ripe for plugging in any JavaScript framework (currently YUI is used, with jQuery for CSS selection), and for tools, such as the bookmarklet that lets you "boot up" Protoscript in any page.

And of course, here is a little walkthrough (see if you can see the error in the docs!)

One of the hardest concepts to grasp in CSS is how to float elements. In order to create a good layout you need to understand this concept in order to know how your elements will be handled within the flow of your page.

The team at Max Design have created an excellent tutorial, aptly called the Floatutorial, which provides a step-by-step explanation of how floating works.

Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.

We covered the Ajax upgrade to Google Book Search, and it just got a nice new feature.

You can now share clippings from public domain books.

All you have to do is click on the new clipping icon, and select the area you wish to clip:

At this point you can choose whether you just want text from the snippet, or an image. Then you have simple embed code that will suck in your choice.

Very simple and clean.

The Prototype framework continues to be a popular solution for client-side development and with the renewed development efforts by the Prototype team, looks stronger than ever.

In this example-oriented tutorial, Juriy Zaytsev, who authored the very popular Context Menu plugin for Prototype, discusses how to use Element.addMethods method of Prototype to extend DOM elements with custom methods and allow chaining:

As an example, here’s a little helper, that I use quite often to display notifications (usually when form verification fails). We will update element with content, make it appear, wait couple of seconds and fade it out.

Note: The following example uses prototype version 1.6.0_rc0 and requires Scriptaculous’ effects module:

Element.addMethods({
flash: function(element, content) {
element = $(element);
new Effect.Appear(element, {
beforeStart: function() {
element.update(content);
},
afterFinish: function() {
Effect.Appear(element, {to: 0, delay: 3,
afterFinish: function(){
element.hide().setOpacity(1);
}})
}
})
return element;
}
})

Now we can simply do:

$('errorBox').flash('login field should not be empty');

The full tutorial can be found here.

Alex is on a roll (just call him butter!) and has written about the state of browser WYSIWYG editing:

The state of in-browser WYSIWYG is somewhere between pitiful and mind-numbingly painful. Opera and Safari have pulled themselves up by the bootstraps and soon all the major browsers will be at the same level of awful, more or less. This area of DHTML doesn’t get much love from browser vendors in part because only the heartiest souls ever venture into these deep, shark-infested waters so there aren’t many people clamoring for fixes to the underlying capabilities. Everyone sane just picks up the Dojo Editor, TinyMCE, or one of the other good editing packages that are available.

Since watching Abe Fettig talk about his experience building a cross browser editor in Dojo, I have stayed away with a ten foot poll. Everyone is broken.

Alex has a set of APIs he would like to see:

Since it’s not really reasonable to expect that browsers will remove contentEditable, here are my proposed APi additions to it which would allow any sane editing UI to ditch the entire command structure which can slowly fade into the background over time.

• editableElement.openUndoTransaction(callbackHandler): starts an undo transaction, implicitly closing any previously opened transactions. All subsequent DOM manipulation to elements which are children of this element will be considered part of the transaction and normal browser-delimited undo transaction creation is suspended until the transaction is closed. The optional callback handler is fired when the user cycles back this far in the undo stack from some future state.
• editableElement.closeUndoTransaction(): ends a manual undo transaction. Implicitly called by openUndoTransaction. Closing the transaction has the effect of pushing the current DOM state (or whatever differential representation the browser may use internally) onto the browser’s undo stack for this editable element. When an undo transaction is closed, browsers may resume automated generation of undo states on the stack intermingled with the manually added states.
• Support for non-standard DOM positioning properties of range objects as outlined in MSDN

These APIs added to elements with contentEditable set will allow us to use regular-old DOM methods of manipulating user selections and adding complex content from user input without fighting for control of the undo stack or inventing our own (which has so many problems that I don’t want to begin to address them). Additionally, this method of manipulation will allow toolkit authors to deliver editors which operate on the semantics of the markup more easily.

Robbert Broersma of Xopus already commented that "developing a WYSIWYG editor in-browser will eventually not involve contenteditable anymore". Somehow I don't see the browser vendors stepping up? :/

Mika Tuupola took rousing from the YUI ImageLoader and created a lazy alluviation plugin for jQuery.

You crapper wager the disagreement in state by scrutiny the lazy page to the “normal” agressive ikon downloader page.

To ingest the library, after playscript src’ing it you crapper simply:

Or you crapper draw it via options much as environment a agent image, and an event.

Remy Sharp has ported his Microformats Bookmarklet to IE. The bookmarklet scans the page for microformats and allows the user to download individual items.

For some good microformat reading:

1. Part I - Traditional HTML Semantics
2. Part II - Standardizing Vocabularies
3. Part III - Directions in HTML Semantics