Learning the Yahoo! User Interface Library - Book Review

10th June 2008 in AJAX, Books, CSS, HTML & XHTML, JavaScript, Publications, Yahoo by Simon | No comments

by Dan Wellman

Synopsis

Learning the Yahoo! User Interface Library book coverThe Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML, and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD License and are free for all uses.

This book covers all released components whether utility, control, core file, or CSS tool. Methods of the YAHOO Global Object are used and discussed throughout the book. The basics of each control are presented, along with a detailed example showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces.

Besides giving you a deep understand of the YUI library, this book aims to expand your knowledge of object-oriented JavaScript programming, as well as strengthen your understanding of the DOM and CSS.

The core aim is to teach you how to create a number of powerful JavaScript controls that can be used straight away in your own applications.

Download

Download the latest YUI version, including full API documentation and more than 250 functional examples from Sourceforge.

The library’s developers blog frequently at the YUI Blog and the YUI Library community exchanges ideas at YDN-JavaScript on Yahoo! Groups.

Book Review

The Yahoo! User Interface Library sits comfortably amongst its peers, which, along with many others, include Prototype, jQuery and Mootools. Arguably it can be said that the YUI library is the king among the JavaScript and CSS-libraries. With a vast number of well documented examples and near 100% compatibility amongst modern browsers, it would be difficult to find a comparable library.

It is one thing to be a well documented library, but it is another to know how to use the libraries to construct a user interface. This is the niche Dan Wellman fills with his book. Although not necessarily for the beginner, since you need a knowledge of CSS, JavaScript and a little AJAX, Wellman does a good job of explaining the concepts, especially AJAX, from scratch.

Wellman provides an A-to-Z of the library and assumes, rightly, that the reader has little or no knowledge of the library. To that effect, he does a long introduction of the YUI, following an overall review of its components, listing them in the first chapter. He then picks up a selection of some of the most established utilities, for example navigation, animation and AJAX utilities and in the following chapters he covers one or two examples for each of them.

Importantly, the book teaches the reader how to not only use the DOM manipulation and event handling aspects of the library, but also the CSS tools of the library.

Wellman does a good job of introducing the technical aspects at the beginning of each chapter, but not dwelling too long before moving on to real usage and methods.

What I would have liked to have seen is more interaction between different components written about in the book. Clearly building a fully-featured application that incorporates most or all of the key components would be unweildy, but individual and isolated examples doesn’t equate real-world scenarios either. For example, it is quite conceivable that autocomplete and drag-and-drop components would be utilised on the same page; it would have been good if Wellman had explained the pains or pitfalls that may be encountered with such combinations. The negativity aside, the examples are of a good quality.

The book does contain a number of errors, but since this is the first edition you can probably forgive the editors from missing them.

A major gripe I have with this book, indeed all technical books is the lack of colour throughout. It is far easier to read and understand the example code when code colouring is employed, allowing for easier understanding of the key elements in the code. Surely modern publishing techniques can mitigate against the extra cost of colour. Indeed, I would pay more for a well-written coloured technical book.

A great summary chapter on graceful degredation versus progressive enhancement would also have been welcomed, since many developers may not consider the usability and accessibility issues of using JavaScript.

This book is certainly a good read for anyone who has basic knowledge of JavaScript, HTML and CSS and who wants to learn how to apply the YUI library in their projects, making them more interactive for the user.

Rich Accessible Typography - FIR and sIFR

14th August 2007 in CSS, Flash, HTML & XHTML, Typography by Simon | No comments

Many people who have worked on websites know that standard HTML and CSS allows the webpage author to assign any font of their choosing to a text element on a page. However, they also know that there is no guarantee that the element will show the desired font, as the browsing user may not have the same font, or set of fonts, installed on their local system. More often than not, only a set of “common” fonts are installed, for example Arial on the PC and Helvetica on the Mac. This has been a significant issue which has been addressed by two methods: the Fahrner Image Replacement (FIR) method and the Scalable Inman Flash Replacement (sIFR) method.

Fahrner Image Replacement (FIR):

Fahrner Image Replacement (FIR), named after Todd Fahrner, one of the original creators, is a Web design technique that uses Cascading Style Sheets (CSS) to replace text on a Web page with an image containing that text. It is intended to keep the page accessible to users of screen readers, text-only web browsers, or other browsers where support for images or style sheets is either disabled or nonexistent, while allowing the image to differ between styles.

How it works:

FIR replaces short passages of text by surrounding the text in two sets of HTML tags. At runtime, CSS is used to hide the HTML element and replace it with a background image containing the exact words as an image.

FIR has come under fierce criticism from the opponents, such as Quirksmode, as it bloats the use of CSS, and Joe Clark for its failure in screen readers. FIR has largely been superceded by the Scalable Inman Flash Replacement method.

More in-depth detail can be found at the following links:

http://www.stopdesign.com/articles/replace_text/
http://www.alistapart.com/articles/fir
http://www.digital-web.com/articles/in_defense_of_fahrner_image_replacement/
http://www.sitepoint.com/article/header-images-css-xhtml
http://www.mezzoblue.com/tests/revised-image-replacement/

Scalable Inman Flash Replacement (sIFR):

Scalable Inman Flash Replacement (sIFR), originally conceived by Shaun Inman, is an open source JavaScript and Shockwave Flash based technology that enables the replacement of text elements on HTML web pages with Flash equivalents.

How it works:

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash. Here is the entire process:

  1. A normal (X)HTML page is loaded into the browser.
  2. A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
  3. If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
  4. Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
  5. Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed.

More in-depth detail can be found at the following links:

http://www.mikeindustries.com/sifr/
http://wiki.novemberborn.net/sifr/
http://www.adobe.com/devnet/dreamweaver/articles/sifr_demo.html
http://www.mezzoblue.com/archives/2004/10/26/sifr/

PNG Support in IE6

12th April 2007 in Browsers, CSS, Code, Design, HTML & XHTML by Simon | 1 comment

Internet Explorer 6 is notoriously rubbish at supporting PNG transparency resulting in images that appear with a grey background; not very useful. All is not lost. Angus Turnbull has created a work around for this issue. You can get all the information needed at this link http://www.twinhelix.com/css/iepngfix/, including support forums. This is possibly the easiest way to get full PNG transparency and importantly the technique works for CSS backgrounds, albeit when no used with the no-repeat attribute.

The secret behind this implementation is a filter introduced in IE55 that is called AlphaImageLoader. This filter takes an image with alpha channels and displays it. It has also a property for deciding how to scale the image.

To download this permanently: iepngfix.zip (15kb).

How to Implement

  1. Put the iepngfix.htc file into your CSS directory
  2. Put the blank.gif file into your CSS directory (otherwise you will need to edit the HTC file)
  3. Edit your CSS to include the following line behavior:url(iepngfix.htc); for the <img> tag

Known Issues

This uses CSS “behaviors”, a custom Microsoft extension to CSS. As such, it will not affect any other browsers like Mozilla and Opera which already implement good PNG support. It will also not help IE4.0 and IE5.0, which don’t include the necessary IE filter, and does nothing with IE5/Mac (which natively supports translucent PNG foreground images, however).

You should not apply other visual filters to the iamge with the PNG behavior because these other filters do not respect the alpha channels and the result will most likely not be satisfactory.

Alternatives

An alternative source that I recently discovered is found at the following link http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html