O’Reilly’s InsideRIA blog has a feature up that steps through the creation from scratch of a sample YUI implementation. The sample application implements an Instant Search feature using YUI AutoComplete backed by the Yahoo! Web Search API. This is the same treatment we use on the YUI web site to power the search box at the top right corner of the header. It searches developer.yahoo.com and yuiblog.com for relevant content and populates the AutoComplete suggestion container with likely destinations based on what’s been typed in the search field. The tutorial shows you how to apply this treatment to your own site while searching the domain or domains of interest to your users.

The InsideRIA piece is cast as an introduction to YUI for those who have not explored the library, so check out the first few sections in particular if you’re looking for a compact YUI overview. If you’re an experienced YUI implementer interested in the the Instant Search functionality, skip to the “Building Your First Application” section about a third of the way in.

Tags: yui, instant-search, autocomplete, yahoo search, api

Here’s what we’re looking for in these positions:

• A passion for the web and for building great web-based products;
• A profound understanding of the frontend discipline (JavaScript, CSS, semantic markup, XHR, etc.);
• The ability to design, build, evangelize and support fantastic APIs for web developers;
• The empathy to care deeply about how developers make use of your work and to be driven to help the YUI community thrive.

Full job descriptions for the positions are here and here.

We’ve had the privilege to be with this team from its early months when it was organized to help Yahoo develop and curate a world-class library of JavaScript and CSS code. Some of Yahoo’s most talented engineers — people like Matt Sweeney and Nate Koechley — have also been with the group since those early months. In the three years since its inception, more great engineers have joined us. YUI’s founder and first architect, Thomas Sha, continues to direct the project. We get to work every day with people like Douglas Crockford, the creator of JSON, and Rasmus Lerdorf, the creator of PHP. It’s no place for hobbyist coders, but if you take seriously the idea of the web as a place to create great software it’s a singularly energizing community in which to work.

If that sounds like you, we’d love to hear from you.

Parisian coder Eric Abouaf (aka “Neyric”) released version 0.1.0 of his YUI-based forms library, inputEx.

As of this release, inputEx supports only client-side-generated views — form fields are configured in a JSON format and created for you on the fly. Eric identifies the following unique features in inputEx:

• complex data structures (list/objects/tree/list of urls/objects of objects etc…)
• composition between the fields (for “meta”-fields such as InPlaceEdit, List, Tree, Pair, …)
• javascript object mapping for greater interactivity
• a common “updated” event to handle different browsers and different field interactions

Eric has API docs, a Getting Started tutorial, examples, and more on the website. He’s looking for contributors, if you’re interested in extending the library; check out the website for full details on the project.

The training curriculum includes semantic HTML, CSS, JavaScript, DOM, YUI, PHP, accessibility, performance, and more. Juku trainees are full-time Yahoo employees, and upon completion of training they move on to roles within the Yahoo network as Front End Engineers. Last fall, we piloted the program with a group of 13 students and the results have been overwhelmingly positive.

We’re excited to announce that we currently have a few openings to join our next 10-week training session beginning in mid-June in Sunnyvale, California. If you’re a budding Front-End genius with a strong background in programming fundamentals and a passion to learn, we’d like to hear from you. But, the good news is you don’t have to work for Yahoo to benefit from Juku training: The lecture portions of the training will be videotaped for distribution via the Yahoo! Developer Network later this summer.

To apply for a spot in the next Juku training session, check the job posting. Applications must be received by May 15th.

Douglas and his editors at O’Reilly were kind enought to let us offer a sneak preview of JavaScript: The Good Parts here:

• Chapter 5: Inheritance — 1.2MB PDF

Here’s how Douglas opens the discussion of inheritance in JavaScript:

Inheritance is an important topic in most programming languages.

In the classical languages (such as Java), inheritance (or extends) provides two useful
services. First, it is a form of code reuse. If a new class is mostly similar to an existing
class, you only have to specify the differences. Patterns of code reuse are extremely
important because they have the potential to significantly reduce the cost of software
development. The other benefit of classical inheritance is that it includes the
specification of a system of types. This mostly frees the programmer from having to
write explicit casting operations, which is a very good thing because when casting,
the safety benefits of a type system are lost.

JavaScript, being a loosely typed language, never casts. The lineage of an object is
irrelevant. What matters about an object is what it can do, not what it is descended
from.

JavaScript provides a much richer set of code reuse patterns. It can ape the classical
pattern, but it also supports other patterns that are more expressive. The set of possible
inheritance patterns in JavaScript is vast. In this chapter, we’ll look at a few of the
most straightforward patterns. Much more complicated constructions are possible,
but it is usually best to keep it simple.

Click here to keep reading (1.2MB; PDF).

Thanks to Laurel Ackerman and Simon St. Laurent at O’Reilly for the permission to share the sample chapter.

One of the challenges faced in creating and deploying Rich Text Editors is the number of markup formats you may need to support on the output side — ranging from HTML to Wiki-style text to purely idiosyncratic markup styles. Dav worked hard on the YUI Rich Text Editor to make output transformations as straightforward as possible. (If you’re doing YUI RTE work and haven’t seen Dav’s video intro to the component, you can check it out here.)

Glen Smith from Canberra shared some antipodean YUI goodness today with a quick tutorial on using the YUI RTE for editing Wiki text. He’s been using the Grails YUI Plugin, mixing in a little textile-j, and he’s got something working well enough for version 1:

Turns out the recipe for making all this work is pretty straighforward:

• When switching from Wiki markup to HTML, do an Ajax call to a backend Grails controller that uses textile-j to convert from textile markup to html. Feed the result of the AJAX call to the YUI Rich Editor and you’re in business.
• To support switching from RichText to Textile, again do an Ajax call back to the Grails controller to the do the conversion. This time you’re on your own in regexp land, but you can trim the amount of work you’ve got to do by what you expose in the Rich editor. Return the results and inject into the Wiki textarea.
• To get the underlying html from the editor just use myEditor.getEditorHTML(). Awesome!

For more, check out Glen’s blog post and accompanying QuickTime movie.

Chad at 2tbsp.com wrote up a nice tutorial last week outlining some practical fundamentals with respect to writing "unobtrusive JavaScript." His example implements a standard rollover, beginning with bad-old-days obtrusive scripting, migrating to unobtrusive scripting, and concluding with an unobtrusive script that leverages YUI’s Event Utility for event attachment and the Dom Collection’s getElementsByClassName, addClass and removeClass for class management.

Click through for his functioning example.

Of course, Chad just means this as an example of some of the practical points involved in unobtrusive scripting. Others have looked at the problem more encyclopedically — for a more ambitious (and not YUI-related) analysis of the paradigm, check out Christian Heilmann’s "The seven rules of Unobtrusive JavaScript".

Over on DjangoSnippets.org, akaihola has posted a YUILoader class (based on Adam Moore’s client-side YUI Loader) that makes it a snap to pull YUI components into your Django projects.

This server-side middleware implements some of the functionality in the Yahoo User Interface Loader component. YUI JavaScript and CSS modules requirements can be declared anywhere in the base, inherited or included templates, and the resulting, optimized <script> and <link rel="stylesheet"> tags are inserted at the specified position of the resulting page.

Requirements may be specified in multiple locations. This is useful when zero or more components are included in the HTML head section, and inherited and/or included templates require possibly overlapping sets of YUI components in the body across inherited and included templates. All tags are collected in the head section, and duplicate tags are automatically eliminated.

The middleware understands component dependencies and ensures that resources are loaded in the right order. It knows about built-in rollup files that ship with YUI. By automatically using rolled-up files, the number of HTTP requests is reduced.

Back in August on DjangoSnippets, pigletto posted a nice YUI snippet for use with the YUI AutoComplete Control.

David Cilley this week published the second in his series of articles on using the YUI Slider Control to provide real-time previewing of image changes.

• Part 1: The OnDemand method.
• Part 2: The Interval method.

In this second installment, David takes on the challenge of making the preview feel instantaneous without computing or delivering every possible image represented by the slider’s continuum:

On the previous slider example, I used a YUI slider that had a range from -100 to 100. This is a total of 201 different combinations for one image dialog, and that’s about 10-20 times more requests than a web server should have to handle in a reasonable amount of time. We want to make this look as if the slider is actually changing the image while we scroll it, but we don’t want to request 201 images up front, and we don’t want to load them all on demand either.

A part 3 in the series, David notes, will continue to refine the control. [Update: David has posted Part 3.]

For more Slider Control examples, check out the YUI Slider example roster; and don’t miss Todd Kloots’s Slider/Button example, which would be another way of presenting the control David is describing in his article series.

Mitch at PlankDesign.com has posted a nice review of one of the least-discussed aspects of YUI Core — the YAHOO Global Object’s YAHOO.lang member. He covers a number of the language conveniences provided therein, including type checking, trim, substitute, later and merge.

Luke Smith from the YUI team recently added some great examples of other features in the YAHOO object, so check those out, too, if you’re interested in learning more about this essential building block of YUI.

Thanks for the insights, Mitch!