This article will discuss an animation plugin for the Radial Menu widget. It was written as a plugin, both to better understand the plugin infrastructure of YUI 3, and because not all developers will want animation in all cases. There are two animations, one that radiates and the another that rotates out (and in) from (and to) the center.

There has been a lot of interesting news from the second half of January. Here are some of the stories that resonated with me:

In the article, Using Ant to Consolidate CSS and JavaScript, we discussed how to use Ant for consolidating and compressing JavaScript and CSS. Today we will take that a step further by adding JSLint JavaScript validation to the process. JSLint is a code quality tool that checks your code for common JavaScript errors, best practices, and optimizations.

Keep in mind that using JSLint will hurt your feelings, so only read on if you are either brave or foolhardy.

Today's article is inspired by the Radial Menu found in many of Bioware's RPGs, such as Dragon Age. At the press of a button, the menu appears on the screen (usually pausing the game), and allows players to choose common commands. The same type of menu is possible on the web, and may even be more useful than the traditional navigation. We will use JavaScript, CSS, and YUI3 to build flexible Radial Menu widget that appears in the center of the page and responds to end-user clicks.

Flash in JavaScript

Tobias Schneider has written an open source Flash runtime written in JavaScript and SVG. Check out these Demo. The full source is available on GitHub.

Inheritance Patterns

Many sites across the web use in-page, JavaScript driven, popups in their UI instead of opening windows or loading a new page. When these popups are open/closed, they are frequently animated using a fade in/out (opacity) or slide in/out (position) animation. The approach we took at Mint.com was to animate the opacity to fade the popups in and out.

This article will discuss a simple optimization to save you a few characters and a little performance when evaluating equality. In JavaScript, there are two types of equality: structural equality (==) where the content of two references are the same, and physical equality (===) where two object point to the same reference or are structurally equal and have the same object type. For the most part I use physical equality when comparing values, to ensure any variable is exactly what it is expected to be. For example, consider this function:

Happy Holidays. I hope all of you are able to take some time off to visit friends and family.

This will be my last post of 2009, as I will be on vacation for the rest of December. Today, I wanted to share some news and then comment on the current and future development of this blog.

In YUI 2 augmenting a library class is as simple as appending functions to the static object or modifying the prototype of a non-static object. Augmenting objects in YUI 3 is almost as easy, differing only in the augmentation having to be applied inside of a YUI().add() function. Although, augmenting objects is not difficult, it feels complicated until you become used to the YUI 3 way of coding. This article will cover how to augment the objects in the YUI 3 library.

Since the early days, browsers have prevented cross-site scripting by ensuring that JavaScript cannot access files loaded from another domain, such as the source of an iframe. Unfortunately, the same logic was applied to subdomains, so JavaScript code on subdomain1.mattsnider.com cannot access subdomain2.mattsnider.com. This causes problems if you organize your site by subdomains that need to communicate with each other via JavaScript or AJAX. Fortunately, browser makers added the document.domain property to allow you to change the domain used for page origin checks to a parent domain, instead of the subdomain.