n some browsers (most notably, Firefox), although innerHTML is generally much faster than DOM methods, it spends a disproportionate amount of time clearing out existing elements vs. creating new ones. Knowing this, we can combine the speed of destroying elements by removing their parent using the standard DOM methods with creating new elements using innerHTML.

When innerHTML isn’t Fast Enough…

innerHTML is more than a simple string. When you inject markup via innerHTML, you’re in fact causing the browser to render (or destroy) a potentially huge amount of elements. This article really hammers home the power of a document’s node structure: instead of deleting thousands of children one by one, delete the parent and can them all in one single action. Very cool method of "improving" innerHTML and scoring a potental performance coup and something to look for to improve code performance.

technorati tags:javacript, innerhtml

Conditional Compilation of JScript/ JavaScript in IEIn IE, there is a little known feature called conditional compilation. Supported since IE4, this feature starting getting some attention when it began showing up in some Ajax related JavaScripts. An absolute form of object detection, conditional compilation lets you dictate to IE whether to compile certain parts of your JScript or JavaScript code depending on predefined and user defined conditions. Think of it as conditional comments for your script that can also be molded to work gracefully with non IE browsers as well.

Conditional Compilation of JScript/ JavaScript in IE

Essentially, you’re doing a browser sniff without the if-else branching. Other browsers see a comment, IE sees code that it should compile and run. No more document.all tests necessary (or however you’re handling that sort of thing). Really powerful.

technorati tags:ie, conditionalcompilation, javascript

CSS+Javascript power. Fancy menu. Really nice Flash look-and-feel in JavaScript, which means “I have something that looks cool that will degrade gracefully.” Very bouncy and round. I was right when I thought it used the famous Sliding Doors technique for its stretchiness, which means I follow A List Apart too closely. (via Molecular colleague Paul Irish.

technorati tags:mootools, menu, stolenlink

For all you obsessive designers that feel the need to style every possible form input (thus making the web browser look and feel exactly like the Mac’s Aqua interface).

File inputs (
) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

Styling File Inputs with CSS and the DOM // ShaunInman.com

I’m all for making things pretty. However, users have been trained for a long, long time to expect things like file inputs to look and feel a certain way. Are our designs worth retraining users or bending users’ expectations for how these things should behave?

(via Ajaxian).(Also, the top Flash thing on that site with the trick makes me sea-sick, in a “wow, that’s cool” way. :-)).

technorati tags:design, forminput, css, javascript

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.

Protoscript - Home

Wow, this is awesome. I like how it sits on top of both jQuery (for the quick and dirty syntax) and YUI (for the heavy lifting).

technorati tags:prototscript, javascript, prototyping

The YUI Compressor is a new JavaScript minifier. Its level of compaction is higher than the Dojo compressor, and it is as safe as JSMin. Tests on the YUI library have shown savings of about 18% compared to JSMin and 10% compared to the Dojo compressor (these respectively become 10% and 5% after HTTP compression)

Julien Lecomte’s Blog » Introducing the YUI Compressor

Saw this yesterday and should have blogged it then. If you’re not minifying or compressing your JavaScript before serving it to your users, you should be.

technorati tags:javascript, yui, compressor, minify

A really nice look at what it took to get YUI’s Rich Text Editor up and running. Good detail on the ins-and-outs of building an application like this that needs to support all major browsers.

technorati tags:yui, richtexteditor, cross-browser

I dug up this blog post while trying to tweak Aptana’s performance on my (old) laptop. Check out the first comment to the post; following those recommendations really sped up and improved Aptana’s performance. Definitely worth trying, especially if you’ve got an older machine.

technorati tags:aptana, eclipse

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