YUI 3 Gallery Competition

In case you missed the announcement, YUI 3 is hosting a gallery widget competition. You still have a few days to get your submission ready. Check out the details.

YUI 3 Alloy

Nate Cavanaugh and Eduardo Lundgren, of Liferay, have spent the last six months building a YUI3-based widget library. Not only did these guys write great widgets, but this library also helps fills in the gaps while we wait for YUI 3 to port all their YUI 2 widgets.

http://www.yuiblog.com/blog/2010/03/15/previewing-alloyui/

The Web Standards Cold War

The Flash and Standards: The Cold War of the Web is a good article by Dan Mall, proposing that developers get behind the standardization and improvement of one or more web-technology, instead of spending their time bashing the technologies they don't like. Worth a quick read.

IE 8 Document Mode Demystified

IE developers have finally written an article explaining how the browser chooses the document mode. If you use document mode in IE, this is a must read.

How IE 8 Determines Document Mode

JQuery Workshop Videos

John Resig has a series of talks on jQuery ranging from an introduction to the framework, to things you might not know, and ways to improve your application. If you use jQuery, then these are for you.

Spring 2010 jQuery Talks

MattSnider-Related News

I have been working diligently on integrating the RadialMenu with the YUI 3 overlay framework. I am pretty far along, and hope to have something to share by the end of this week. I will be submitting it to the YUI competition as well, so it will be available on the gallery.

Starting next month, I will begin working on the YUI Storage system again. There has been lots of feedback to incorporate and we need to port it to YUI 3. Look forward to an announcement in the next few months.

Getting started

You will need to include the module in your code:

YUI({
	filter: 'raw',
	combine: true,
	timeout: 10000,
	modules: {
		'gallery-number': {
			fullpath: 'http://github.com/mattsnider/yui3-gallery/blob/master/src/gallery-number/js/number.js',
			requires: [],
			optional: [],
			supersedes: []
		}
	}
}).use('gallery-number', function(Y) {
	/* ... */
});

How to do it...

Convert radians to degrees and vice-versa:

var degreeValue = Y.Number.degrees(radianValue);
var radianValue = Y.Number.radians(degreeValue);

Evaluate if a number is between or not two other numbers:

var bool = Y.Number.isBetween(number, lowerBound, upperBound);
var bool = Y.Number.isNotBetween(number, lowerBound, upperBound);

Evaluate if a number is even or odd:

var bool = Y.Number.isEven(number);
var bool = Y.Number.isOdd(number);

Evaluate is a number is prime:

var bool = Y.Number.isPrime(number);

Find the precision of a number (number of decimal places):

var precision = Y.Number.getPrecision(number);

Generate a random integer:

var number = Y.Number.random(number);

Round to the nearest digit:

var number = Y.Number.roundToDigit(number, 100);

Format a number into a US number string:

var string = Y.Number.format(number, "0,000.00");

How it works...

The radians/degrees conversion functions uses the math equation, where "degree = radian * 180 / PI" to convert the values.

The isBetween/isNotBetween evaluation functions use the less than and greater than operators to evaluate where the first argument lies.

The isEven/isOdd evaluation functions use the modulus operator to see if the result equals ZERO or not.

The isPrime uses a series of rules to determine if the number is prime or not. First, it checks if the number is 2 or 5, as these are special primes. Then it checks if the number is not event. If the number is less than 200 it evaluates if the number is any of the primes less than 200 (these values are hardcoded). If the number is greater than 200, it checks if it is divisible by any of the prime less than 200.

The getPrecision function converts the number to an a string and splits around the decimal point. The length of the second parameter in the resulting array is the precision.

The random function uses a well-known equation to convert the decimal produced by Math.random into an integer value between ZERO and the number provided as the first argument.

The roundToDigit attempts to convert the provided value to the nearest digit, as determined by the second argument. This means if you have the number 799 and desire hundreds place rounding (pass in 100 as the second parameter) and the number will be rounded to 800, but if you round to the thousands place, the number will be rounded to 1000. This function works by converting the number to a string, moving the decimal place to desired precision, executing Math.round() and then converting the number back to the correct precision.

The format function uses a regular expression to find the textual number inside of the format string. It then applies logic to convert the number into the desired format; generally this means do you want commas and/or decimal places shown. And finally it inserts the formatted number back into the string. Therefore, you can pass in a complete sentence or a string of symbols, and this method surgically replace the number format string with the formatted number.

There's more...

The isBetween/isNotBetween evaluation functions can accept an optional boolean value as there fourth parameter. When true, they will perform inclusive comparisons, evaluating with the greater/less than or equal to operators, instead of greater/less than operators.

The random function accepts an optional second argument, which is the starting point of the random range. This way you can find random numbers between two numbers, instead of just between ZERO and the desired number.

Previously, this component wrapped some of the native Math functions, but this only added bloat, making the component larger than it needed to be, so I removed them.

See also

• The Number Component page on YUILibrary.com

More to come

The functions included here are all derived from the math functions that I have needed for work on Mint.com, a financial site. However, there are probably other functions that are commonly used by developers, which I would like to include in this API. If you have a math function that you commonly use, please include it in the comments section.

Additionally, I think the format function should work more like a print function in C-style languages, so I will be improving this function eventually.

Now to move onto other recent news.

Best Practices Article by Smashing Magazine

Hopefully, you know most of this already, but it is a good read.

http://www.smashingmagazine.com/2010/02/22/the-seven-deadly-sins-of-javascript-implementation/

Storage-Lite in YUI3

Ryan Grove has written a Storage Lite package for YUI 3. It isn't a port of YUI 2 Storage Utility, but instead focuses only on the various native methods that existed pre HTML 5. It is a great package and some of these techniques will probably work their way into YUI Storage Utility. Read more about it at http://feeds.yuiblog.com/~r/YahooUserInterfaceBlog/~3/19tp3D3ag7Y/

Need a Job? Work for YUI

The YUI team is hiring. Find out more at http://feeds.yuiblog.com/~r/YahooUserInterfaceBlog/~3/myJCx4R3CMw/.

JQuery 1.4.2 Release

The jQuery team has outdone themselves this time, claiming that they have made jQuery almost twice as fast as before. And it is noticeably faster. Additionally, they have added two functions .delegate() and .undelegate() to compliment the .live() and .die() functions. Read more about it at http://blog.jquery.com/2010/02/19/jquery-142-released/.

Handle Accent Characters in Your AutoComplete

Want to support more characters in your autocomplete system, check out this post, http://www.alistapart.com/articles/accent-folding-for-auto-complete/, which discusses how.

A JavaScript Solution to the Password Problem

The password problem, is that many people feel that input elements of type password are inaccessible (for a variety of reasons). This article, http://www.alistapart.com/articles/the-problem-with-passwords/, describes a couple of JavaScript based solutions to the problem, including one that mimics the iPhone behavior of showing the last character.

The Problem...

The selector utility is using the following code:

if (YAHOO.env.ua.ie && YAHOO.env.ua.ie < 8) { // rewrite class for IE < 8

However, according to the IE blog, this won't work:

http://blogs.msdn.com/ie/archive/2009/02/16/just-the-facts-recap-of-compatibility-view.aspx

When using the server-driven X-UA-Compatible META tag, due to technical reasons, the user-agent string is not changed. This means that the if statement will evaluate to false, thinking that the browser is IE 8, even though the server has indicated the use of another version of IE. However, IE 8 has introduced a new property document.documentMode, which can be used to handle this situation. The document.documentMode will be the version of IE specified via the X-UA-Compatible META tag.

The Solution...

Change the code in selector.js to:

if(YAHOO.env.ua.ie && ((!document.documentMode && YAHOO.env.ua.ie<8) || document.documentMode < 8)){// rewrite class for IE < 8

If the document.documentMode does not exist, default to the user-agent string, otherwise, use the document.documentMode to evaluate the version of IE.

There's More...

Perhaps future versions of YUI will take the document.documentMode into consideration when evaluating the user-agent, but for now we must apply this patch to fix the selector component in IE 8.

A big thanks goes out to Kaven Yan who first fixed this issue.

See Also

• The open ticket on this issue, http://yuilibrary.com/projects/yui2/ticket/2528006

Touch Events (JavaScript for Touchscreen Devices)

PPK has done a lot of research on touch events, and posted a compatibility table and his thoughts:

The Touch Action

Persistent Touch Event Objects

New MooTools Released

A new version (1.2.4.4) of the MooTools JavaScript framework has been released.

MooTools 1.2.4.4

Additionally, developers describe how to use MooTools as a General Purpose Application Framework.

IE 6 Comic Strip

And this was just awesome.

The Life and Times (and Death?) of Internet Explorer 6

Setup

Instead of adding keyboard support as a plugin, I decided to incorporate it directly into the menu, as widgets should be navigable via the keyboard, as well as the mouse. Thus, there is no additional setup required.

How It's Done...

When the Radial Menu is opened, a keydown and keyup listener is attached to the document. The callback for the keydown event is:

_handleKeyDown: function(e) {
	var panels = this.get('panels'),
		lastPanel = this._lastPanel,
		i = lastPanel ? lastPanel.getRadialIndex() : 0,
		n = panels.length,
		isValid = false,
		hoverClass = this.get('hoverClass'),
		m, l=n%2;
	
	switch (e.keyCode) {
		case 38: // up
			if (0 != i) {
				isValid = true;
				if (n / 2 > i) {
					i -= 1;
				}
				else {
					i += 1;
				}
			}
		break;

		case 39: // right
			m = n / 4;

			if (m != i && ! (l && _isBetween(i, m-1, m+1))) {
				isValid = true;
				if (m >= i + 1 || n - m <= i) {
					i += 1;
				}
				else if (m <= i - 1) {
					i -= 1;
				}
			}
		break;

		case 40: // down
			m = n / 2;
				
			if (m != i && ! (l && _isBetween(i, m-1, m+1))) {
				isValid = true;
				if (m >= i + 1) {
					i += 1;
				}
				else if (m <= i - 1) {
					i -= 1;
				}
			}
		break;

		case 37: // left
			m = n / 4;

			if (n - m != i && ! (l && _isBetween(i, n-m-1, n-m+1))) {
				isValid = true;
				if (m < i && n - m >= i + 1) {
					i += 1;
				}
				else if (n - m <= i - 1 || i <= m) {
					i -= 1;
				}
			}
		break;

		case 13: // enter
			if (lastPanel) {
				e.target = lastPanel._node;
				this._handleClick(e);
			}
		break;

		case 27: // escape
			this.hide();
		break;
	}

	if (isValid) {
		if (this._timerKeyDown) {this._timerKeyDown.cancel();}

		if (0 > i){
			i = n - 1;
		}
		else if (n - 1 < i) {
			i = 0;
		}

		n = this.get('keyHoldTimeout');
		if (0 < n) {
			this._timerKeyDown = Y.later(n, this, this._handleKeyDown, e);
		}
		
		if (lastPanel) {lastPanel._node.removeClass(hoverClass);}
		lastPanel = panels[i];
		this._lastPanel = lastPanel;
		lastPanel._node.addClass(hoverClass);
		this._isKeyPressed = true;
	}
},

The keyup event listener simply stops the event timer started at the end of the keydown function:

_handleKeyUp: function(e) {
	if (this._timerKeyDown) {this._timerKeyDown.cancel();}
	this._isKeyPressed = false;
},

How It Works...

When an arrow key is detected, the position of the currently selected panel is fetched (or ZERO is used), and a calculation is made to determine whether the menu has additional panels in the desired direction available for selection. If there are additional panels, then the position is changed by one.

If there is a value for the new property keyHoldTimeout, then a timer is set to call the _handleKeyDown function again. This facilitates instances where end-users hold down an arrow key. The rest of the function handles caching the current panel and applying the hover class.

The enter key calls the click handler, and the escape key calls the hide function>

There's More...

All events and pointers are attached when the menu is opened, and removed when the menu is closed, to remove impact on the page performance.

You may notice minor issues with the arrow navigation when using a small number of panels. You can use the arrow keys to reach all positions, but sometimes a position isn't reachable by all arrows that you think it should be (ie., you expect down and right arrows will get you to a position, but only the down arrow does). It did not seem to be a blocking issue, but if you have a solution, feel free to post it in the comments.

See also

The article, Radial Menu, where this widget was first introduced.

The test page, Radial Menu Test, where you can play with the animations yourself.

-matt

In the meantime, here is a video of Douglas Crockford's Talk: And Then There Was JavaScript

Setup...

First add the animation plugin to your YUI 3 modules list:

YUI({
	/* ... */
	modules: {
		/* ... */
		
		'gallery-radial-menu-anim': {
			fullpath: 'http://yui-ext-mvc.googlecode.com/svn/trunk/assets/js/yahoo-3-ext/RadialMenuAnim.js',
			requires: ['plugin', 'anim', 'gallery-radial-menu'],
			optional: [],
			supersedes: []
		},
	}
});

How It's Done...

Plugin default animation:

radioMenuInstance.plugin(Y.RadialMenuAnim, {});

Plugin a configured animation:

radioMenuInstance.plugin(Y.RadialMenuAnim, {
	animType: 'rotate', 
	easingOut: Y.Easing.easeOut, 
	easingIn: Y.Easing.easeIn
});

Change plugin variables on the fly:

radioMenuInstance.radialMenuAnim.set('animType', 'radiate');

How It Works...

The YUI 3 widget plugin system, augments the radialMenuInstance by listening for the execution of the hide, show, and syncUI functions. When this happens, RadialMenuAnim prevents the default behavior of those functions, and implements its own version.

To animate, the hijacked hide and show functions either move along a straight line (radiate animation) or they follow a 90 degree rotating path while moving along the radius (rotate animation), from the center to the panel's position on the circle (or the reverse). The YUI curve animation is use for the rotation animation, see the Curve Animation Example for more information.

There are 5 properties that can be defined on the RadialMenuAnim plugin:

Name:	Description:
animType:	A string value that is the type of animation to use, either radiate or rotate; defaults to radiate
duration:	An integer value that is the duration for the animation; defaults to 1 second
easingIn:	A Y.Easing function for the hide animation; defaults to Y.Easing.elasticIn
easingOut:	A Y.Easing function for the show animation; defaults to Y.Easing.elasticOut
rotation:	An integer value that is the number of degrees to rotate by when using the rotate animType; defaults to 90

There's More...

Because some browsers suck (ahem... IE), and I needed the capability for my testing page, there are two functions that can be used to turn the animation plugin on and off:

// turn plugin on
radioMenuInstance.enable();

// turn plugin off
radioMenuInstance.disable();

The plugin is enabled by default.

See also

The article, Radial Menu, where this widget was first introduced.

The test page, Radial Menu Test, where you can play with the animations yourself.

Dojo 1.4.1 Release Candidate 1

If you use the Dojo framework, then you'll be excited about there new release candidate. I have not seen the spec document yet, but the developers mention FireFox 3.6 support.

http://o.dojotoolkit.org/2010/01/21/1-4-1-release-candidate-1-ready

Google Reader For Any Website

Google reader now has the ability to follow changes on any website, not just RSS feeds.

http://googlereader.blogspot.com/2010/01/follow-changes-to-any-website.html

JavaScript Unpacker

JSBeautifer attempts to revert JavaScript compression and obfuscation, so that you can read code snippets from the web.

http://jsbeautifier.org/

HTML 5 Audio Player Demo

To teach himself a little about HTML 5, Scott Andrew LePera wrote a proof of concept audio player.

http://jszen.blogspot.com/2010/01/html-5-audio-player-demo.html

HTC Performance

This article highlights the performance cons of using an HTC file to fix IE 6. I recommend progressive enhancement over attempting to make IE behave like other browsers, but if you insist on it, then you should read this:

http://www.codingforums.com/archive/index.php/t-63384.html

SVG

I have been seeing a lot of SVG work lately. Here are a few highlights:

http://www.sitepoint.com/blogs/2010/01/25/what-everybody-ought-to-know-about-using-svg-right-now/

http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-i/

http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii/

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

How It's Done...

We will be modifying the ant build script from YUI-EXT-MVC at http://yui-ext-mvc.googlecode.com/svn/trunk/build.xml.

First you need two files:

• Get the latest version of Rhino at http://www.mozilla.org/rhino/
• Get the latest version of JSLint for Rhino at http://www.jslint.com/rhino/

Extract the JAR from the Rhino download (it was named js-14.jar for me, so I renamed it to the more useful rhino-1.7R2.jar) and the JSLint JavaScript file. Move them both to a folder accessible by your build.

Setup build properties pointing to the two files you downloaded:

<property name="rhino.jar" value="${basedir}/bin/rhino-1.7R2.jar"/>
<property name="jslint.js" value="${basedir}/bin/jslint.js"/>

Execute JSLint on the consolidated JavaScript files:

<echo message="JSLinting consolidatedFile.js"/>
<apply executable="java" parallel="false">
	<filelist dir="${builddir}/js">
		<file name="consolidatedFile.js"/>
	</filelist>
	<arg line="-jar"/>
	<arg path="${rhino.jar}"/>
	<arg path="${jslint.js}"/>
</apply>

Now when the script consolidates your JavaScript files, it also executes JSLint. JSLint will output the errors and warnings it finds, but will only stop the build if it finds a critical error.

Configuring JSLint:

The off the shelf version of JSLint is very strict and may not suit your needs. For work on Mint.com I had to register a bunch of globals and change the default configuration. To change your default configuration, look in the jslint.js file for the line:

if(!JSLINT(input,{...}

The properties defined inside the object can be activated by setting them to true. A full list of properties is available at http://www.jslint.com/lint.html#options. You will most likely want to set the property browser and widget to true, which will allow browser and YUI globals.

If you have additional globals, then you need to find the browser={...} object in jslint.js. Add any global variables to this object where the variable name is the key and set its value to false. For example, if you use JQuery you might want to add the following two globals:

browser={/* already defined properties */
jquery: false,
'$': false
}

How It Works...

JSLint uses a variety of techniques to scan JavaScript files against a collection of validations. The validations are customizable and can be turned on or off by modifying jslint.js. Since jslint.js is a JavaScript file, Rhino is needed to run JavaScript from the command line. You can execute this Rhino command directly on the command line, but today's article show how to use Ant to automate the build process.

There's More...

JSLint can take a while to execute, especially on large, consolidated files. Advanced users of Ant may want to define a property to make JSLint an optional part of their build:

<if>
	<isset property="enable.jslint"/>
	<then>
		<echo message="validating consolidatedFile"/>
		<apply executable="java" parallel="false">
			<filelist dir="${builddir}/js">
				<file name="consolidatedFile"/>
			</filelist>
			<arg line="-jar"/>
			<arg path="${rhino.jar}"/>
			<arg path="${jslint.js}"/>
		</apply>
	</then>
</if>

By default this code block will not execute. You will need to call Ant in the following way to execute JSLint:

ant -Denable.jslint=true package

More to Come...

I am fairly happy with the current build.xml, but there is a lot of repeated patterns (consolidate, jslint, compress). At Mint.com we have changed our consolidation script to use macros, making our build.xml simpler. However, macros are finicky and more complicated than calling simple ant commands. I anticipate that in the next couple months I will improve the build script to use macros and write an article explaining how.

See Also...

• The article, Using Ant to Consolidate CSS and JavaScript, to better understand build.xml
• The website, http://ant.apache.org/, for more about Apache Ant
• And the website, http://www.jslint.com/lint.html, for more about JSLint

Note From Matt...

I know some of you are anticipating improvements to the Radial Menu that I introduced last week. I am working on it, but I do not have anything production ready yet. I hope to deliver a more complete version sometime next week. Who knows, if I feel it is good enough, I might submit it to the YUI gallery. ^_^