I’ve been building an animation-heavy demo here at work using YUI. Initially, I was using the old “give the animation a duration and let the computer figure things out. But, that doesn’t yield a smooth animation: in fact, it can make things kind of choppy, especially if lots of animations are running at the same time.

That’s when I did a little bit of digging into the YUI Animation object, and it’s timing options. I’d noticed the useSeconds flag kicking around, but I’ve never really used it. I gave it a shot, and it’s great.

var b =  new YAHOO.util.Anim(ch,{
    height:    { to: 175 },
    opacity:   { to: 1.0 },
    top:       { to: 10 },
    width:     { to: 175 }
},
.700,
YAHOO.util.Easing.easeOut);
b.setAttribute('useSeconds',false);
b.animate();

We’ve created b, an Animation, and told YUI that we’re not using seconds, we’ll be using frames instead. The .700 in the duration parameter refers to the number of frames that we’d like to use; the decimal is multiplied by 1000. In this case, that gives us .700 x 1000 or 700 frames. We can fudge this value as much as we’d like, getting the exact number of frames we need to make everything super-smooth (761 or 445); you just can’t get this level of detail using time-based animations.

I’ve now got super-smooth animations, right down to the very frame.

technorati tags:yui, dhtml, animation

We’re pleased to announce today the release of YUI version 2.3.0. This release features six new additions to the library as well as a new skinning architecture and a new visual treatment for most of our UI controls. All of this, plus 250 enhancements and bug fixes, is available for download immediately.

YUI 2.3.0: Six New Components and a Prettier Face » Yahoo! User Interface Blog

YUI introduced a new rich text editor component / widget with this release. Rich text editors are notorious pains to work with, especially when you’re trying to support multiple browsers. Since, YUI has guaranteed “A-grade” browser support (IE 6 and 7, FF, Safari, etc.), this may be the rich text editor widget to use.

technorati tags:yui, javascript, richtexteditor, widget

Timeplot: Canvas-based Specialized Charting Tool

Link is to the Ajaxian post where I found it, but this is a really sweet looking app. Real link is here. Take that, Flash!

technorati tags:charting, canvas, timeplot

Let’s say you want to remove a node from a Document. Like, for example, a pesky div from its container after an update. Of course, to remove that node from the Document, you’ll have to use the removeChild( ) method of its parentNode. How do you quickly and easily get that reference and wipe out the node?

Here’s a one-liner that works:

document.getElementById('myId').parentNode.removeChild(document.getElementById('myId'));

technorati tags:javascript, node, document, removechild

Getters and Setters allow you to build useful shortcuts for accessing and mutating data within an object. Generally, this can be seen as an alternative to having two functions with an object that are used to get and set a value…

John Resig - JavaScript Getters and Setters

Well, this is something I did not know.

technorati tags:javascript, getter, setter

Awesome Box is a very simple and unobtrusive Javascript that loads images in the same window, overlaid over the page’s content.

AwesomeBox : Paul Armstrong Designs

Awesome Box is a lightbox based on YUI and looks spetacular.

technorati tags:javascript, lightbox, awesomebox, photos

Did a little benchmarking, and found this out: JavaScript Events onkeypress and onkeydown fire at the same rate. They fire 16 times per second, or about once every 267 milliseconds.

Why this benchmarking? If you’re using either onkeypress or onkeydown to trigger some action in your JavaScript code, you could wind up triggering that action 16 times in a second. What if it’s a request that triggers some DB processing or an expensive UI action (like creating a closure with a potential memory leak)? That’s something you should avoid. Solutions?

• Use onkeyup to trigger your event. It fires once only, when the key is released.
• Create a flag which your onkey… function checks before executing. The first call sets the flag; before it returns, it unsets the flag. In the meantime, you won’t run (and re-run) expensive operations over and over.

Either way, watch out for the “spamminess” of these Events, and how often they fire.

technorati tags:javascript, events, onkeypress, onkeydown, onkeyup

The Firebug Command Line API lets us get even more out of Firebug. Study it!

technorati tags:firebug, debugging

Adobe’s running a bus tour to introduct/promote its new AIR framework to developers like you and me. A bus tour? With an API? Very Web 2.0.

technorati tags:adobe, air

This one took me way too long to figure out. (And yes, it’s a stupid mistake that led to way too much debugging). Firefox allows this as a valid object:

{  foo: 'bar', baz: 75, }

Note the extra comma that shouldn’t be there as there’s no successive name/value pair. IE throws a fit at this, and declares the object invalid. (I tried to see if this is valid or invalid code in a JavaScript spec, but my quick research didn’t yield any results. It seems wrong from a coding-standards point of view.)

Note also that if this type of code appears anywhere in an object you’ve created, like as a property or method IE will declare the entire Object invalid.

technorati tags:object, literal