Updated YUI3 for YUI2

Thu, 02 Sep 2010 09:47:58 -0700

For those of you who are using my YUI 3 for YUI 2 emulation code, I want to share with you the latest, and perhaps final version. This version is very similar to what we are now using on Mint.com, where I have been successfully swapping back and forth between the mock YUI 3 and the real YUI 3.

http://yui-ext-mvc.googlecode.com/svn/trunk/assets/js/yahoo-ext/yui3foryui2.js

Notes

Y.Base.create has been added
use YUI.add instead of YUI().add
Y.NodeList is now supported
Y.Event.attach and Y.Event.detach emulated
window resize event supported
the Y.mix function is fully emulated

There is definitely more, but the above is a good list of the major improvements.

Web Development News August 2010 B

Tue, 31 Aug 2010 10:10:59 -0700

Here are some interesting articles from the first half of August:

JavaScript

Douglas Crockford continues his series on the state of JavaScript, talking about the role of event loops and server-side JavaScript. This is a must watch for web developers:

Libraries

Reid Burke has built a new command line, cross-browser testing framework for YUI, called Yeti. Yeti uses NodeJs to execute YUI tests against your code locally, before you commit your code to a shared repository. Find out more at:

http://www.yuiblog.com/blog/2010/08/25/introducing-yeti-the-yui-easy-testing-interface/

YUI announces a security patch to YUI 3.1. There was a security hole in there "io.swf" file that has been address. If you are using XDR then please read:

http://www.yuiblog.com/blog/2010/08/19/yui-3-1-2/

Personal

I will be leaving Mint at the end of this week to join another startup. My time at Mint has been amazing, and we have built web UIs that most people thought impossible. I enjoyed working with the Mint team, but am looking forward to my next big startup. I'll let you all know where I am going next soon.

However, I can let you know my technology choices: Django as my MVC, Apache as my webserver, and Git for version control. We are experimenting with other technologies as well so that we can implement a continuous build process.

I'll keep everyone posted as to how things are going. We are looking for a strong back-end engineer to help with MySQL, Python, scaling, and more if you or someone you know might be interested.

Adding Find() to NodeList in YUI3

Tue, 24 Aug 2010 10:06:15 -0700

In YUI 3, when searching an array for a value, you have to include the collection module, as the Y.Array.find() function is not built into Y.Array. This is a little annoying, because 9 out of 10 times, I include the collection module, it is just for the Y.Array.find() function. Additionally, because the function isn't built into the core library, it is not used or added to the core features, like NodeList. Yet, I believe having a find() function on NodeList is very useful and this article provides a simply way to augment NodeList.

How to do it…

Y.NodeList.prototype.find = function(fn) {
	var elNode;
	
	if (this.size()) {
		 elNode = Y.Array.find(this._nodes, function(elem) {
			return fn(new Y.Node(elem));
		});
	}
		
	return elNode ? new Y.Node(elNode) : elNode;
};

How it works…

First, this augmentation is dependent on the node and collection modules; so make sure you include them or set this up as a module that requires those two. A NodeList instances has a protected property, _node, that is an array of all the native DOM elements in the NodeList, which can be passed into the Y.Array.find function. This then calls an anonymous function on each element in the _node array, which re-wraps the node with Y.Node, before passing it into the provided evaluation function. If the evaluation function returns true, then the Y.Array.find function stops and the HTML element is return. Otherwise, it will be undefined. The found node then needs to be wrapped by Y.Node again before returning and now you have a find() function for all your NodeList instances.

There's more

If you can use a selector to find the node you are looking for than the filter() function of NodeList is a better choice. Additinionally, NodeList has a some() that could be forced to behave like a find operation by passing in the output array as the context. However, I believe that adding another simple function is a better approach.

Web Development News August 2010 A

Wed, 18 Aug 2010 10:43:09 -0700

Not a whole lot of news this week, which is great because I had surgery on my left hand and typing one handed is a pain. Besides the articles included here, there was a lot of talk on whether to HTML validate your code or not. I'd say the general consensus was no, because of lack of ARIA support and the inability to add meta attributes. All browsers support meta-attributes, even if they aren't in the DTD and it is a better way to send data than hijacking existing attributes.

Here are some interesting articles from the first half of August:

Browsers

The latest version of IE9 is performing almost as well as the Chrome nightly, and nearly passes the Acid 2 tests. I think they Microsoft might finally be building a decent browser. Additionally, it supports opacity without the alpha filter:

http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx

PPK takes a serious stab at grading mobile browers. Take a look at his results:

http://www.quirksmode.org/blog/archives/2010/08/first_serious_s.html

JavaScript Libraries

jQuery officially announces its plan to support mobile browsers:

http://blog.jquery.com/2010/08/13/the-jquery-project-is-proud-to-announce-the-jquery-mobile-project/

Caridy Patino wrote a nice YUI 3 gallery project to handle binding event handlers before the YUI 3 library has completely loaded. This is useful, so that user actions before the page is loaded are not lost:

http://www.yuiblog.com/blog/2010/06/23/event-binder/

Clientside Moment Profiling

Thu, 12 Aug 2010 15:59:07 -0700

When developing complex JavaScript applications, it is useful to profile the loading of your pages, so you can better understand the bottlenecks of performance. To the end user, the most important moment is when the browser indicates that the page is finished loading. As developers, it is our job to understand why loading takes so long and how to improve it. Today's article will introduce a simple widget called MomentTracker, which allows you to easily compile a collection of important client-side moments and then output them.

How to do it…

Include the following snippet as the first element in your head element:

var __momentTracker = {
	aMoments: [],

	addCookieHandler: function() {
		YAHOO.util.Event.on(window, 'unload', function() {
			var oneMinuteLater = new Date();
			oneMinuteLater.setTime((new Date()).getTime() + 60000);
			YAHOO.util.Cookie.set('__momentTracker', new Date(), {expires: oneMinuteLater});
		});
	},

	rollup: function() {
		var lastPageTime = YAHOO.util.Cookie.get('__momentTracker'),
			aMoments = __momentTracker.aMoments,
			rs = [],
			i, t1, t2;

		if (lastPageTime) {
			__momentTracker.lastPage = new Date(lastPageTime);
			aMoments.unshift('lastPage');
		}

		for (i=aMoments.length-1; 0


Then anytime you want to track an important moment, call the trackMoment function with the name you would like to call that moment:





To measure the time between pages, we need to setup a cookie (call this anytime after YAHOO.util.Cookie and YAHOO.util.Event are included):


__momentTracker.addCookieHandler();


And lastly, to output the results call:

Event.on(window, 'load', function() {
	__momentTracker.trackMoment('afterJavaScript');
	Y.log(__momentTracker.rollup().join("\n"));
});


How it works…

The trackMoment function simply stores a date object, at the moment it is executed. The addCookieHandler function adds an unload event to record when the user leaves the page. The rollup function iterates on all the moments, calculates the difference between them in milliseconds, and then returns the results.


The implementation in this article, uses the YUI Logger module to print the results. However, you could modify the rollup function to suit your needs, and use the results in a more meaningful way. At Mint.com we pass the tracked moments times to the server, where they are aggregated into our performance monitoring system.


I've put together a quick demo page to show it working.

Web Development News July 2010 B

Wed, 04 Aug 2010 09:43:21 -0700

Here is a roundup of some of the interesting news released during the later half of July.

JavaScript

Nokia has put together a best practices performance guide. This is especially useful for mobile developers, but the optimizations will improve performance in all browsers. It is very thorough:

http://wiki.forum.nokia.com/index.php/JavaScript_Performance_Best_Practices

Google has released its JavaScript coding guidelines. Most of it is a collection of well-known best practices, but I found the JavaScript Types and JSDoc section to be particularly useful:

http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

Nicholas Zakas explores the various ways to detect if properties exist on objects and reveals the best ways to evaluate property existence:

http://www.nczonline.net/blog/2010/07/27/determining-if-an-object-property-exists/

HTML 5 & CSS 3

David Flanagan has written Canto, a improved HTML Canvas API. While it doesn't add a lot of new functionality, it does make working with Canvas elements a lot simpler:

http://www.davidflanagan.com/2010/07/cantojs-an-impr.html

Mobile

Samsung's relatively new phone, the Wave, comes with a new WebKit based browser, Dolfin. PPK took some time to evaluate it:

http://www.quirksmode.org/blog/archives/2010/07/new_kid_on_the.html

Libraries

Dojo has released version 1.5 with tons of improvements, including better mobile support:

https://www.dojotoolkit.org/reference-guide/releasenotes/1.5.html

YUI has released a preview candidate for version 3.2.0. It includes a lot of nice improvements, but most notably is the mobile support:

http://www.yuiblog.com/blog/2010/07/26/3-2-0pr1/

Using Data URIs

Thu, 29 Jul 2010 10:28:29 -0700

After reading Nicolas Zakas article, Data URIs make CSS sprites obsolete, I was inspired to see how easy it would be to put into practice. His CSSEmbed JAR uses Base64 encoding for data URIs and MHTML to be backwards compatible with IE 6 and 7. So the logical step was to create a build script that runs CSSEmbed against all my CSS files.

Getting ready

You will need to install a copy of ant and ant-contrib to use these build scripts. To include ant-contrib into your ant build script, use:

Additionally, you will need the CSSEmbed JAR.

How to do it…

First setup some properties to be used by the ant target:

Next create your ant target:

How it works…

The trickiest part when using CSSEmbed is the root and mhtmlroot properties. These URLs are not the location of the files on your computer, but on the web, and varies depending on how you reference the images in your CSS. If the images are relative to your CSS, then the values should be set to the URL of your CSS directory. If the images are relative to the root of your domain, then these values should be your URL of your root domain. CSSEmbed will make JAVA net calls when generating the URIs.

The ant-contrib project was necessary, because basic ant does not have a way to iterate on a fileset. I tried to simulate this using macros, but couldn't get it working correctly, so I settled on using ant-contrib.

In the build target, the for iterates on the fileset of CSS files in your CSS directory, storing the value as the param @{file}. As written, it will only search that immediate directory, and not subdirectories. To search subdirectories as well, change *.css to **/*.css.

The propertyregex task finds the filename of the file, by removing the absolute path from @{file}. The CSSEmbed JAR is executed twice: once to create the non-IE CSS and a second time to create the IE 6 & 7 CSS. Your code will need to branch serving a different file depending on the browser. You can do this client-side using conditional comments:

However, this is less efficient than branching server-side, because the IE version contains all the same CSS as the non-IE version (only the URIs vary).

What's next?

I ran out of time while writing this article, but I would have liked to write a build step that strips out all CSS rules from the IE version, except those that contain data URIs. This would reduce the overhead of client-side branching, using conditional comments. However, the most efficient way of branching would still be server-side, as the data URIs would be duplicated in any client-side branching system.

Web Development News July 2010 A

Thu, 22 Jul 2010 10:55:11 -0700

Here is a roundup of some of the interesting news released at the beginning of July.

HTML 5 & CSS 3

Using HTML 5's local storage system Dustin Diaz provides a widget to handle client-side caching:

http://www.dustindiaz.com/javascript-cache-provider/

Nicholas Zakas discusses using data URLs in your CSS, making spriting obsolete. Data URLs add the images to the CSS payload, so the browser doesn't have to make additional requests for images. It's supported by modern browsers and is better than spriting:

http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/

Other

Have you ever forgot to include the value of a src attribute on your page, causing the browser to fetch the index page of the current directory, or worse repost the previous request? You'll be happy to know that browsers are working on preventing this. Nicholas Zakas discusses the status of the way major browsers are handling empty src attributes:

http://www.nczonline.net/blog/2010/07/13/empty-string-urls-browser-update/

Another article by Dustin Diaz describing how to do client-side fuzzy-matching with autocomplete widgets. This is a much needed improvement to most autocompletes and I strongly recommend checking this out:

http://www.dustindiaz.com/autocomplete-fuzzy-matching/

Another great article from Nicholas Zakas discussing ways to improve JavaScript minification. Much of this I've discussed previously, but this is a quick read and a good refresher:

http://www.alistapart.com/articles/javascript-minification-part-II/

Steve Levithan wrote a cool JavaScript regular expression syntax highlighter, using JavaScript. This could be useful for debugging your code, and maybe moreso, if you are including Regular expressions in your blog:

http://stevenlevithan.com/regex/syntaxhighlighter/

Event Based Cross Site Scripting Attack

Wed, 14 Jul 2010 11:21:52 -0700

I recently ran into a devious XSS attack, based on the onerror event. It can be done by exploiting other events as well, but the onerror event works particularly well, because the JavaScript is executed right as the node is rendered or appended to the page. Here is the attack:

Then when the user content is appended or rendered in the page, the JavaScript executes. Replacing the alert statement with a malicious script, such as reading or changing cookies, is how the attack works. When the img element is rendered it throws the onerror event in browsers that support it, because the markup is incomplete. The especially tricky thing about this attack is most of HTML removal regular expressions used to sanitize parameters won't catch this attack, because there is no closing tag.

To ensure you are not susceptible to this attack, always ensure you are escaping HTML entities before writing to the database, and then do not unescaping them before appending text to the document.

For more information about all cross site scripting attacks, see http://ha.ckers.org/xss.html.

Simple JavaScript Function To Include CSS

Thu, 08 Jul 2010 11:00:11 -0700

This article explains how to write a simple JavaScript function to include CSS files and notify when the loading of the file is complete. The issue is that most browsers do not fire a load event when the link element finishes processing the included CSS rules. And while many libraries have mechanisms for notifying when the CSS is included, I believe this technique is lighter and more elegant. A special thanks goes out to the UX team at Facebook.com who first described this technique to me.

How to do it…

The JavaScript function you will need is:

function includeCSS(conf) {
	if (! (conf && conf.href && conf.name && conf.fx)) {
		throw new Error("Missing configuration for includeCSS functions.");
	}
	
	var pfx = conf.prefix || 'js_',
		id = pfx + conf.id,
		elEvalNode = document.createElement('div'),
		elLinkNode = document.createElement('link'),
		iIntervalId;

	if (includeCSS.oIncludedField[id] && ! conf.force) {return false;}
	includeCSS.oIncludedField[id] = true;

	// setup eval node
	elEvalNode.id = id;
	elEvalNode.visiblity = 'hidden';
	elEvalNode.className = conf.className;
	includeCSS.elBody.appendChild(elEvalNode);

	// setup link node
	elLinkNode.charset = conf.charset || "utf-8";
	elLinkNode.href = conf.href;
	elLinkNode.rel = "stylesheet";
	elLinkNode.type = "text/css";
	includeCSS.elHead.appendChild(elLinkNode);

	// start polling
	iIntervalId = setInterval(function() {
		if (0 < elEvalNode.offsetHeight) {
			clearInterval(iIntervalId);
			elEvalNode.parentNode.removeChild(elEvalNode);
			conf.fx.call(conf.ctx || this, conf.id, conf.data);
		}
	}, 250);

	return true;
}

// some global variables used by the function
includeCSS.elBody = document.getElementsByTagName("body")[0];
includeCSS.elHead = document.getElementsByTagName("head")[0];
includeCSS.oIncludedField = {};

An example CSS files would be something like the following:

body {
	background-color: #333;
	color: #F00;
}

p {
	font-size: 120%;
}

a {
	color: #900;
}

h1 {
	font-variant: small-caps;
}

.actions {
	background-color: #999;
	border: 1px solid #666;
}

.copy {
	color: #C33;
}

/* this style notifies the JavaScript that file is loaded
and should be the last rule in the CSS file */

#js_myCSSFileName {
	height: 10px;
}

Then to actually use the include function call:

function handleCallback(sId, oData) {
	alert("The CSS file (" + sId + ") has finished loading.");
}
if (! includeCSS({href:'pathToFile/myCSSFileName.css', id:'myId', fx:handleCallback})) {
	alert('CSS file (' + sFileName + ') is already included.');
}

How it works…

The JavaScript function requires a single configuration object as its only argument. This object must have the href, id, and fx properties defined, and may optionally define prefix, className, charset, ctx, and data. The href property is the location of the CSS file to include, the id property is the name for the rule you will be using to determine that the CSS has finished loading, and the fx property is the success callback function. The prefix property is defaulted to js_ and is the prefix to apply to the id property for the notifying CSS rule. The className property allows developers to specify a className that should be applied to the div element in case they need to remove global styles (like borders). The charset property defaults to UTF-8 and is the character set used by the CSS file. The ctx property is the execution context of the callback function and the data property is an object to pass as the second argument to the callback function; both default to undefined.

When the includeCSS function is called it first checks to see if the CSS file has already been included using this function, returning false when it has and true when it has not been. If it has not been included, an empty div element is appended to the body element, and a link element is appended to the head element. The link element will cause the browser to begin downloading and evaluating the rules of the CSS file. The div element will have the id attribute of js_idProperty and a height of ZERO, because it lacks content. The last rule in the included CSS file needs to target the div element using #js_idProperty and adjust its height to something greater than ZERO. The last step of the includeCSS function is to start an interval callback to evaluate when the div element has a height greater than ZERO. When this happens the callback function is executed.

Putting it all together, the developer calls the includeCSS function, which fetches the CSS file and appends a div element to the page. The last rule of the CSS file should update the height of the appended div element, notifying the JavaScript that the CSS has finished loading. When this happens a callback function is executed and the developer is notified that their styles have completed loading and rendering. You can play with this function using the following test page:

Test Page

There's more…

Since a configuration object is used as the only argument to the includeCSS function, it is easy to augment. Probably the most needed augmentations are a timeout and a failure callback function. The former would fire if the interval hasn't finished after a specified amount of time and the latter would fire if the CSS file was not found.

One downside to this technique is it only works on CSS files under your control, since you have to be able to add a rule to the end of the CSS document. Although, it is not the most efficient solution, you can work around this issue by using a server-side proxy that fetches remote CSS and appends a rule to the end of the file.