JavaScript Tip: Trim Strings with YUI

Any programmer worth his salt knows that when you perform even the most minimal validation on a set of input textboxes for a form, that you need to wrap some kind of trim function around the string. So many times, I see developers write the following as a validation rule:

function validate(this) {
if(this=="")
alert('Please provide a value for "this"');
}

Clearly, all the user would have to do is provide a value with either a space or line break to make the value valid. The whole point of checking the value to ensure it is not empty is to ensure that the user did not provide only non-characters as well!!! The way to accomplish this type of validation would be simply to use the common programming function known as trim. The basics is that the function will shave off any spaces at the beginning and end of a given string to ensure the string is not padded. In the case of value that has only a space, this would make the string appear as completely empty.

Well for those attempting to accomplish the above in JavaScript will be out of luck unless they write the function themselves. Now, simply searching for "JavaScript trim" provide a plethora of results that will work just fine. However, being a proponent of YUI, I prefer to use the built-in tools and functions it offers if available. Sure enough, simply searching for YUI Trim in Google yielded that the function does indeed exist and, of course, is quite easy to use:

function validate(this) {
if(YAHOO.lang.trim(this)=="")
alert('Please provide a value for "this");
}
</code>

Review: Designing Web Navigation

In today's day and age where the Internet is a part of our everyday life, there has never been a time more appropriate now then to have really good navigation on your or your client's website. As sites grow more advanced and complex, it is vital to the success of your website that users are able to find what they need in a timely fashion without jumping through hoops to get there.

Designing Web Navigation: Optimizing the User Experience helps you lay the ground work to achieve a great user interaction experience. This full-color O'Reilly book clearly explains the full process of designing web navigation in three parts: Foundations of Web Navigation, A Framework for Navigation Design, and Navigation in Special Contexts.

In Foundations, the author writes an adequate analysis of various types of navigation systems, such as the search model, browse model, or the liquid information model to name only a few. He describes why poor navigation design will turn away users and may actually decrease the credibility of your website. Furthermore he touches on topics such as banner blindness where your users may not truly notice intentional site navigation, simply because back in their minds it looks like a vertical advertisement banner.

In Framework, Kalbach evaluates different forms of navigation for different types of sites. He talks about the need to engage your users to help determine what style will work best for your target audience. Moreover, he discusses types of technologies that may be implemented such as back-end technologies and front-end technologies like CSS and JavaScript.

James Kalbach does an excellent job describing every facet of this complex and sometimes daunting process in a very detailed yet easy to comprehend fashion. He backs up all the research he has done with references as well as providing great additional reading and other resources. The full-color diagrams and case studies of existing navigations on real-world websites prove invaluable to the reader. One small complaint I have is that for a book on designing navigation, the page numbers are quite small and difficult to glance at when you are flipping through the book. Aside from this small glitch, as it were, this book is a must have in every web developer or designer's library. Even if you consider yourself to be an expert at web page flow, you cannot go without learning a rule or two, and perhaps some great what not to dos in this book.

YUI Makes Animating the DOM Easy

Despite being an Adobe fanboy, I never cared much for how the Spry framework handles things like animations. Seemed complex at the time for basic operations. At work, they have standardized on using the YUI framework. This has been great for me because I have always wanted to dive deeper into it and learn about its ins and outs. With that, I needed to do some basic fade animations for a User Interface I am working on.

I looked up the docs for the the animation package. After reading for a few minutes, I was blown away at how the YUI developers were able to execute such a powerful, customizable feature in a very simple way. First, you simply create an attributes object that contains the property you want to change (in our case it will be the opacity) and what you want to change it to:

var attributes = {
opacity: {to: 0}
}

Notice that a from attribute is not present. This is only because if from is not provided, YUI will perform the animation based on the current value of the attribute you are modifying.

Once you have your attributes object defined, animating your object is simple:

var myAnimObj = new YAHOO.util.Anim("myDiv", attributes);
myAnimObj.animate();

We instantiated a new Anim object by passing in a string of the id of the element we want to animate (note: a dom element object can also be passed), and the attributes object. Then we simply call the animate() method to play the animation.

Extremely simple and straightforward. On top of this, YUI, having the incredible event engine that it has, allows you to subscribe to events for onStart, onTween (which occurs on every frame), and onComplete providing limitless animation effects and chaining.

Be sure that when you try the examples above, that you have included the following files in your document head:

<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>

<!-- Source file -->
<script src="http://yui.yahooapis.com/2.5.1/build/animation/animation-min.js" type="text/javascript"></script>

Finally, you must also create an element that you actually want to apply the animation with an id of "myDiv" for the above examples to work.

Acid3 Released: Web 2.0 Specifications Emerge

The Web Standards Project announced today the release of the Acid3 test, a consecutive release of a series of tests designed to help browser makers realize the standards of the web to which they are encouraged to uphold for the best and most consistent user experience.

The test consists of varying amounts of CSS, JavaScript, HTML, and tests with PNG images. Browsers are ranked on a point score based on how each one graphically renders the different use cases.

The overall results for each browser are as follows:

  • Firefox 2.0.0.12: 50%
  • Firefox 3.0b3: 61%
  • Opera 9.26: 46%
  • Safari 3.0.4: 39%
  • WebKit Nightly: 87%

Run the Acid3 test for yourself

Acid3: Putting Browser Makers on Notice, Again. [The Web Standards Project] Acid 3 Ships; WebKit praised [Ajaxian]

JavaScript document.createElement() Alternative

I haven't blogged in a while because I have been so busy getting ready for the wedding and things with my new job at Boeing as well. Which is partially the reason why I am blogging about this. I working on a project that I would like to add dynamic type functions into. After learning about creating DOM objects dynamically, I realized that the createElement and setAttribute functions should have been combined to make it easier. 

I am by no means a Javascript guru so if anybody would like to explain the disadvantages to my function then please elaborate in the comments. The function I created is simply called createElement and it shouldn't interfere with the other one as the other is part of the document class. An example of how the function can be used is as follows:

var txtbox = createElement('input','name=myTextBox','type=text','value=Your Text Here');

which would return the following tag element:

<input name="MyTextBox" id="MyTextBox" type="text" value="Your Text Here">

Download the code using the download link below.