Yahoo! User Interface Blog

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!

Unobtrusive Rollovers Using YUI

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".

Find conversations: bloglines | technorati

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

DjangoSnippets: YUI Loader as Django Middleware

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.

Find conversations: bloglines | technorati

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

David Cilley’s Tutorial Series on Ajax Image Sliders

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.

Find conversations: bloglines | technorati

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