There is an intresting atutoorial about YUI basics posted on the O’Reilly’s InsideRIA blog by Eric Miragilla. He writes the following:

«YUI consists of several CSS components and nearly three dozen JavaScript components, all of which are designed to empower the rapid creation of web applications that run in all the major web browsers. Yahoo! uses a Graded Browser Support approach in which we "white-list" a subset of browsers that we'll fully support — we call these the "A-Grade browsers," and, taken together, they represent more than 90% of traffic on Yahoo!'s network worldwide. YUI is tested and supported in all A-Grade browsers (including current versions of Safari, Opera, Firefox and Internet Explorer).

The best way to think about YUI and what it does for you is to consider the difference between the user interface language of the browser as compared with the desktop. In the browser, the "default" language is relatively limited. You have form elements (buttons, select menus, text inputs) and hyperlinks. On the desktop, you expect much more: Tabs, sliders, cascading menus, dialogs, tooltips, data grids, rich text editing, drag and drop, animation, autocompletion, and so on. Here's one way to visualize this difference, with the browser's native UI elements on the left and the richer set of desktop-style UI elements on the right:»

Source: O’Reilly’s InsideRIA blog

2 tablespoon site publish the second part of article about Rollovers images in YUI. Here's the small excerpt from the beginning of this article:

«In my previous article we traded in old school JavaScript habits for unobtrusive methods and the Yahoo! User Interface Library (YUI). The YUI's Event and DOM extensions greatly simplify basic DOM scripting tasks. Let's build on this foundation and improve the rollover script's performance and scalability.

Thanks to Nick and Dirk for their comments on event listeners impact on script performance. Nick points out the fact that JavaScript performance will degrade as more buttons are added to the example rollover menu. The use of a DOM scripting technique called event delegation can greatly reduce performance hits sustained through the assignment of event listeners.»

Source: 2 tablespoon.

David Cilley publishing a series of articles about YUI Slider Control. In this article David tells how to provide real-time previewing of image changes. He writes:

«One of the most common dialogs in an image editor application is the slider with preview.  When you move these applications over to the Web, you end up losing some of the user experience because of the asynchronous nature of these apps.

There are several ways to use a JavaScript slider to change an image, and I will be covering at least 3 of them over the next few posts.»

Source: YUI blog.

Mitch write an post an artickle in his blog in which he tells about global objects in YUI library. Here's a small excerpt from this article:

«I was pretty new to javascript when I started using the YUI. For a long time, YAHOO was just that file I had to make sure to include. It was a few months after using the YUI (and was more comfortable with js in general) that I happened to peek at the YAHOO.lang API. It doesn’t get much attention, but it’s got a few useful functions you may not realize are along for the ride (since about version 2.3) - functionality you may be duplicating.»

You can find the full version of thiis article on the Plank Design website.

Caridy Patino writes about creating component communication pipelines with YUI. He writes:

«Creating complex web applications demands organization and modularization. Modularization introduces a new problem — the comunication pipes between components. This is a serious challenge for developers, as more components and widgets mean more pipelines and more dependencies. In this article, we’ll look at a technique to mitigate these issues: Creating an abstraction layer to moderate the comunication between the components and widgets in a web application. This technique is based on YUI and makes use of my Bubbling Library, which is a BSD-licensed superset of functionality that builds on top of the YUI foundation.

Most current YUI components use "Custom Events" as their main communication pipes. This is good. Using custom events you can, for example, know when a YUI Panel is opened or closed, and the components in your application can subscribe a listener to this custom event to know when the Panel’s status changes.

YAHOO.example.myPanel.showEvent.subscribe(function(){

// your stuff here…

});»

Source: YUI blog

Dav Glas, gave an intrestin talk about Rich Text Editing. The following topics are covered in this talk:

• Implementing the light Simple Editor;

• Adding the rich elements that are important to you, all the way up to the full Editor implementation with its rich buttons and menus;

• Hacking the editor and the toolbar.

You can view this talk on the official YUI site. Also you can get the presentation materials from Dav's website.

You can download free chapter from new Dan Wellman's book about YUI - « Learning the Yahoo! User Interface Library». Eriv Miragilla writes the following about this book in YUI blog:

«As we mentioned in a recent "In the Wild" post, the first book dedicated solely to YUI has hit the shelves: Dan Wellman’s Learning the Yahoo! User Interface Library from Packt Publishing.

Dan takes on a broad subset of topics in this volume. Dan and the team at Packt were kind enough to let us share a sample chapter with you here to give you a sense of Dan’s approach to YUI — an approach that emphasizes clear explanations, practical examples, and lots of sample code. In this sample, Dan explores Thomas Sha’s YUI Connection Manager (our wrapper for XHR/Ajax) and shows you how to build both a News Reader application and Login application.»

Sources: YUI blog.

YUI 2.5.1 was released. Here's the list of the main changes of this release:

• Improved AIR support

• JSON parsing in FireFox

• DataTable refinements

• YUI Configurator

• New aggregate file — yuiloader-dom-event.js

• Bug fixes

You can find the full info about this release on official YUI site.

YUI 2.5.0 released today with lots of changes, improvmenst and bugfixes, Here'sthe short list of features that was added or improved:

• DataTable Control

• Layout Manager

• Resize Utility

• ImageCropper Control

• ProfilerViewer Control

• Slider Control with Dual Thumb Support

My project has big amount of classes interacts on client side. Each class placed into separate .js file. It’s very useful for maintenance. Good practice for speed page load is reducing amount of client requests to server. So than less images and other files included on the page than faster it loads. In case of images - CSS sprites can help to reduce count of requests. For js and css files - concatenation and compression. We will talk about it

Very useful open source tool js-builder

In my project I use prototype.js library. When builder compresses prototype.js he breaks with exception. So I downloaded sources of it and rebuilds. So now builder only does concatenation without compression. You can download dll from my build and place it into directory with JSBuilder.exe

Builder also has console application. It’s exactly what we need for build.

Now we need to do file compression with output of js-builder.

For this purpose I used YUI Compressor. Excellent library with high level of minification.

Now we bring all together and make assembly process. To do this I created batch file. (I’m one of the windows users) . It looks like this (build.bat) set path1=D:\Projects \build\ %path1%JSBuilder\JSBuildConsole.exe /path=%path1%MyHeritageBuild.jsb java -jar %path1%yuicompressor-2.3.1\build\yuicompressor-2.3.1.jar %path1%build\output_file_from_js_builder.js -o %path1%target-min.js java -jar %path1%yuicompressor-2.3.1\build\yuicompressor-2.3.1.jar %path1%build\style-all.css -o %path1%style-all-min.css

In my case js-builder outputs 2 files - css amd js, then compressor minifies them. Hope this helps you to create yours building process. Russian version

There is a new video on Yahoo! User Interface blog in which Julien Lecomte gave a talk about creation of high-performance DHTML applications.

This video covers the following topics:

• Developing for high performance

• High performance page load

• High performance JavaScript

  Bookmark/Search this post with:

  • Delicious
  • Digg
  • Technorati

There is a new tutorial about Using WAI-ARIA Roles and States with the YUI Menu Control posted in YUI blog. This article contains all basic concepts explanation and step-by-step tutorial. Here is brief list of things that you can learn from this tutorial:

• What are WAI-ARIA Roles and States?

• How it works

• The value of a DHTML Library

  Bookmark/Search this post with:

  • Delicious
  • Digg
  • Technorati

There is a new article about creating customs modules with YUI using the YUI module control. You will find a step-by-step tutorial illustrated with lots of examples. Here is a brief table of contents of this tutorial:

• Structured markup.

• Including YUI Dependencies

• Building the control step-by-step

YUI 2.4.1 was released today. This is the first maintentance release after after the 2.4.1 was released few weeks ago. Eric Miragilla writes in YUI Developers blog:

YUI team has posted a colectcion of news link for past serveral weeks about following stoties:

• Responding to the Charts Control

• Zimbra on YUI Compressor

• Web Interface for the Iris Syntax Highlighter

• Bookmarklet for Loading YUI

  Bookmark/Search this post with:

  • Delicious
  • Digg
  • Technorati