Yahoo! User Interface Blog

Tutorial: Implementing Instant Search with YUI AutoComplete and the Yahoo Search API

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.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

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

Two Job Openings on the YUI Team

The YUI Team at Yahoo is set to grow — we’ve opened up two new engineering positions to help improve, evolve, and expand YUI. Interested? Email your resume, including portfolio URLs, to yui-jobs /at/ yahoo /dash/ inc /dot/ com. (Principals only; no recruiters, please.)

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.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

inputEx — a YUI-based Forms Utility

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.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Yahoo! Juku: Calling Tomorrow’s Front-End Rock Stars

A few months ago, we posted an article describing an innovative training program here at Yahoo called the “Juku.” The basic premise of the Juku is to help fill the void of professional-grade Front-End Web Development training. Our motives for doing this are at least a little selfish: The program provides us with a stream of talent well-versed in skills that tend to be challenging to source and hire. On the flip-side, we remain committed to using the program as a platform to further the state of Front End Engineering for the entire development community.

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.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Free Chapter from Douglas Crockford’s “JavaScript: The Good Parts”

The #2 book on Amazon’s JavaScript shelf this morning is Douglas Crockford’s forthcoming Javascript: The Good Parts (currently available for preorder and due for release later this month). In this volume, Douglas articulates a philosophy of coding in JavaScript that builds up on and extends the content of his popular video series and articles. The premise, as Douglas puts it: "Most programming languages contain good parts and bad parts. I discovered that I could be a better programmer by using only the good parts and avoiding the bad parts."

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.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Writing a WYSIWYG Wiki Editor with YUI and Grails

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.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!