Ken Snyder - JavaScript

Compiled JavaScript Templating

nospam@example.com (Ken Snyder) — Wed, 25 Jun 2008 08:20:05 -0600

I've got my old version of CompiledTemplate online in a Pastie. It's got the source and a simple example. I need to finish my new version and do some benchmarking.

It actually isn't often useful since it is usually better to generate content on the server side.

Easing Equations

nospam@example.com (Ken Snyder) — Thu, 12 Jun 2008 21:41:01 -0600

Robert Penner created a suite of mathematically genius actionscript functions to simulate real-life movements in Flash. The results are compelling.

A few years back, I ported Robert Penner's equations to JavaScript for use with Scriptaculous transitions. Here is a little playground I set up to test them out. They are available for download there as well. Here is Rober Penner's original demo and Easing Equations page.

We see swinging, bouncing, and elastic movements in real life, and even a lot on Flash and even TV due to the work of Rober Penner.

Thomas Fuchs uses my custom bouncePast transition on his site!

Goodies

nospam@example.com (Ken Snyder) — Mon, 09 Jun 2008 22:41:27 -0600

I ran into two great concepts today. First, there is a way to prevent circular references that choke IE's garbage collector. (View Article) I'll need to check into the concept more to see where I can use it. Hopefully it can be used in an event listener system. Thanks Kip!

Second, a great tool for testing gzip. I'd love to show it to folks at work to let them know how much bandwidth we can save if we use gzip.

MouseEnter and MouseLeave

nospam@example.com (Ken Snyder) — Wed, 04 Jun 2008 20:15:07 -0600

Mouseover and mouseout events are not intuitive. I've made a mockup and demo of a very short snippet that addresses the problem.

The problem is that mouseout events are fired when moving into a child element and mouseover events are fired when moving from a child element. This behavior is confusing.

On a mouseover, the relatedTarget property references the node from which the pointer came. On a mouseout, the relatedTarget property references the node to which the pointer went. On any event, the scope is the node to which the event is attached. When the relatedTarget is a not child of the currentTarget, a mouseover event is equivalent to a mouseenter event and a mouseout event is equivalent to a mouseleave event.

Example Usage:

$('nav').observe('mouseover', myMouseEnterCallback.bindAsMouseEnter(scope, arg1, arg2));

DOM Mutation Events

nospam@example.com (Ken Snyder) — Sat, 31 May 2008 18:47:51 -0600

I'm experimenting with adding DOM Mutation Events to Prototype. It is probably too much of an edge case for Prototype Core (and maybe just academic in general) so it's in plugin form.

The two main events are DOMSubtreeModified (dom:subtreemodified) and DOMAttrModified (dom:attrmodified). The DOMSubtreeModified event is meant to fire anytime attribute or content is modified or a node is inserted or removed. It is a generic event that is fired along side all the other Mutation Events. The DOMAttrModified event fires any time an attribute is added, removed, or modified. In Prototype that happens in Element#writeAttribute, Element#update, Element#addClassName, and Element#removeClassName.

The other two events I've addressed are DOMNodeInserted and DOMNodeRemoved. Those are pretty self explanatory.

I've pasted my first draft online. (view)

I've also come up with some related methods. Element.onLoad polls the DOM until an element with the given id is found or until the entire DOM is loaded. Element.onCreate hooks into the Element constructor and fires registered callbacks anytime an element is created. Element.onExists registers a callback with Element.onLoad and Element.onCreate to fire when an element with the given id is loaded or created.

That first draft is also online. (view)

Off the top of my head, here is one possible use: A script wants to be aware of attempts by other scripts and plugins to replace content at or below a certain node.

$('message').observe('dom:subtreemodified', function(event) {
event.element().addClassName('warning');
});