Yahoo! User Interface Blog (YUIBlog)

Frontend Engineering Position on the Yahoo! Openness Strategy Team

We noted a few frontend engineering positions available at Yahoo! last week, and we have another one to share with you today. This position is a senior F2E role focusing on Yahoo!’s platforms for developers — our “Openness Strategy,” or YOS.

About YOS

The Yahoo! Openness Strategy Team is building the next generation of open platforms and integrating them into every part of Yahoo!. From platforms that add a social element to every aspect of Yahoo!, to an applications platform and developer-focused offerings, the YOS team is tasked with transforming the way Yahoo! works. In building out all the components of YOS, the team is focused on implementing distributed systems that are highly scalable and performant so they can reliably serve hundreds of millions of Yahoo! users and developers every day.

Job Responsibilities

You will be part of the engineering team that focuses on Yahoo! application platform (YAP), which enables developers to build web applications that are available throughout Yahoo! — the largest audience in the world. You will contribute to the architecture, design and implementation of innovative features and services for this platform. You will work closely with the rest of the engineering team, product managers, QA engineers and external partners who build applications on this platform.

Minimum Qualifications

1. 7+ years of industry experience working directly with the full web technology stack: browsers, web servers and databases
2. Strong command of browser-side client technologies including Ajax, XHTML, DHTML, CSS, JavaScript, DOM JSON, cross-browser compatibility issues, optimization techniques and internationalization issues
3. Experience with application development using Java or PHP
4. Strong command of client/server programming with AJAX
5. Excellent written and verbal communication skills
6. Extensive experience with object-oriented design and development techniques
7. Familiarity with software development life cycle and best practices
8. BS in Computer Science or equivalent. MS in Computer Science preferred

Preferred Qualifications

1. Knowledge of using Javascript toolkits such as YUI or jQuery
2. Experience with JSP compiler implementation
3. Experience with Open Social or Shindig implementation

You can view the job posting and apply at the following URL: http://careers.yahoo.com/jdescription.php?oid=22173. Yahoo! Inc. is an equal opportunity employer. For more information or to search all of our openings please visit http://careers.yahoo.com.

Find conversations: bloglines | technorati

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

In the Wild for May 26, 2009

Here’s a recap of news and notes from the YUI world in the past few weeks. Please use the comments below to let us know what we missed.

• Uizard – a Web Mashup Generator Written in YUI: Writes Ajaxian: “The Korean developer community is not that known to people in the west it seems. Language barriers make it hard to communicate and the web design is very different to what we do here. Being lucky enough to work with developers world-wide in the same company I just got reminded of a tool that was built for the Korea Mashup challenge called Uizard.”  Uizard was developed by Ryu Sung-tae — it’s servers are challenged by the Ajaxian link, but check it out when they come back up. (Original source.)
  
• YUI Implementations at Canadian National Railway: Lionel Desdier (the “Java-powered railroader”) wrote in to tell us about his extensive implementation of YUI on web applications at Canadian National Railway.  Writes Lionel: “The goal of that new web application, called Intermodal Orders, is to manage empty container orders for our internal clerks’ usage as much as for our external customers usage. This application is part of our EBusiness portal.  The application web client is purely JavaScript and extensively based on the YUI library. The client uses JSON to exchange data back and forth with the server that runs a Java back-end.  We are using most of the available components from grid layout, calendar, dom, overlays, treeview, datatable and datasource, etc.  We also extended the library to create our own components branded to the company look and feel.”  The EBusiness portal is behind a login, but the main cn.ca site also uses some YUI.
  
• YUI in Use on National Geographic Adventure Magazine: Talk about “in the wild”…  Among the online magazines using YUI is National Geographic Magazine, a great resource for those who like to get out of their cubicles and explore the most interesting places in the world. You’ll find YUI on the magizine’s article pages.
  
• Satyam on “Changing the Style of an Element in a YUI Widget”: YUI’s most prolific contributor is as at it again with a new tutorial on how to style YUI widgets.  If you’re unfamiliar with the process of digging into a widget’s markup and CSS using Firebug (or other DOM inspector), you’ll find this a must-read tutorial.
  
• New Orleans Repopulation Data Using Google Maps and YUI: @mattpriour wrote in to tell us about the Greater New Orleans Community Data Center’s Repopulation Indicators site, which uses YUI Grids, YUI Loader, and YUI Core in generating a genuinely interesting block-by-block look at New Orleans population levels from 2005 to today. (Original source.)
  
• YUI Compressor for Visual Studio: Writes the author:  “Although you don’t want this for all things in life, you do want to ensure that your JavaScript and CSS files are as small as possible.  As a web programmer, a script minifier is a useful application that should be a part of your toolbelt. This article presents a simple way to hook up a popular minifer inside Visual Studio.” (Original source.)
  
• Uzvy.com, Groups Solution, Using Tons of YUI: @alokbhardwaj wrote in to tell us about Uzvy.com, a groups site containing discussion groups and “shareboards” that aims to provide a novel and compelling take on the groups space.  YUI is used throughout, for modal dialogs, XHR, and much more. (Original source.)
  
• Cagatay Civici Adds YUI Calendar to PrimeFaces: Writes Cagatay: “Every JSF component library provides some sort of a date picker component and PrimeFaces is no exception. In fact, PrimeFaces calendar component is based on the well known YUI calendar widget which is equipped with some unique features. Calendar is purely javascript and does not do unnecessary ajax callbacks so it’s fast and furious.”
  
• Eric Abouaf’s YQL Execute, Based on Dav Glass’s Grids Builder: Eric Abouaf has taken Dav Glass’s Grids Builder and added support for YQL query execution, allowing you to build YQL-based pages easily; check out Eric’s adaptation here. (Original source.)

Find conversations: bloglines | technorati

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

YUI Theater — Todd Kloots: “Developing an Accessible Web 2.0 Widget Framework”

As we continue to work on YUI 3, we’re thinking hard about accessibility. And no one here is thinking harder about that topic than Todd Kloots, who has authored a variety of blog posts on the subject as well as presenting a comprehensive tech talk on the art and sciense of accessible development.

Todd spoke to Yahoo! frontend engineers recently about the lessons learned in developing the accessibility features for YUI 3, and we’re happy to share that session with you here. For direct techniques to use in your own development, refer to Todd’s previous video; this session will take you into the higher level considerations that guide accessibility strategy in a complex system.

Slides from Todd’s talk are available as a zipped Keynote file here.

The embed from Yahoo Video follows; a higher-resolution version, along with a transcript, is available from the YUI Theater site.

download (m4v)

In Case You Missed…

Some other recent videos from the YUI Theater series:

• Satyen Desai: YUI 3: Design Goals and Architecture
• Peter-Paul Koch (PPK): JavaScript Events
• Jenny Donnelly: Hacking with YUI
• Nate Koechley: Professional Frontend Engineering

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

Find conversations: bloglines | technorati

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

Two Frontend Engineering Positions at Yahoo!

When we post job announcements at Yahoo!, we often preface them with the following pitch:

Think about impacting 1 out of every 2 people online–in innovative and imaginative ways that are uniquely Yahoo!. We do just that each and every day, and you could too. After all, it’s big thinkers like you who will create the next generation of Internet experiences for consumers and advertisers across the globe. Now’s the time to show the world what you’ve got. Put your ideas to work for over half a billion people.

This pitch is never more true than with positions in frontend engineering/web development at Yahoo!, where products and platforms have a unique reach and impact. And we’re always looking for engineers whose talent and passion is as unique as the opportunity. Here are a couple of positions we’re looking to fill right now — positions building on Yahoo!’s great tradition in the discipline of frontend engineering, using and improving tools like YUI, and helping to make the internet more delightful and powerful for Yahoo!’s half a billion users.

Javascript Platform Developer

Location: Sunnyvale, CA.

The Presentation Framework Group is building new frameworks, creating libraries and tools that will allow other developers and editors to build web sites quickly and efficiently. You will be working with product managers and developers to understand the requirements and needs. You will be creating specifications, designing, implementing tools and APIs. You will be using YUI libraries for creating the extensible UI.

Minimum Job Qualifications:

• JavaScript expert.
• Proficient in writing standards compliant HTML, CSS, Ajax, DOM
• 3-4 years of cross browser application development experience
• Experience with PHP
• Well versed with XML
• Experience using YUI
• Self starter with the ability to work under pressure and handle multiple simultaneous tasks.
• Strong verbal and written communication skills.

To apply for this position, please click on the following link: http://careers.yahoo.com/jdescription.php?oid=21972.

Yahoo! Inc. is an equal opportunity employer. For more information or to search all of our openings, please visit http://careers.yahoo.com.

Front-End Engineer

Location: Sunnyvale, CA.

Want to work on an application with a user base measured in the millions and not thousands? Are you interested in Maps or Geo Technology? Passionate about Front-End Engineering? If so, then we want to talk with you. We’re looking for a motivated and experienced engineer to join the Yahoo! Maps team. In this role, you would be working on the Maps destination (http://maps.yahoo.com) and helping to support internal maps-related efforts on other Yahoo! properties. The ideal candidate has strong skills in frontend technologies, but is quite comfortable with Shell Scripting
(Perl/Bash) and Apache Configuration. You’re a team player that is focused on great user experiences with a laser sharp eye for detail. Sound like you? Let us hear it!

Minimum Qualifications:

• BS/MS in Computer Science or equivalent
• Strong skills in PHP, Javascript/AJAX, CSS and HTML
• Ability to write clean, concise cross-browser code
• Previous experience as a Front-End Engineer
• Comfortable developing in a UNIX environment
• Solid oral and written communication skills
• Experience working with XML and/or JSON

Desired:

• 2-4 years experience in web application development
• Experience configuring Apache
• Experience with version control software (CVS or SVN)
• Experience with Yahoo! APIs (specifically YUI and Maps AJAX API)
• Knowledge on any of the following is a plus: REST/Web Services, i18n, l10n

To apply for this position, please click on the following link: http://careers.yahoo.com/jdescription.php?oid=21920.

Yahoo! Inc. is an equal opportunity employer. For more information or to search all of our openings, please visit http://careers.yahoo.com.

Find conversations: bloglines | technorati

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

YUI Theater — Satyen Desai: “YUI 3: Design Goals and Architecture”

The team here remains hard at work on YUI’s next-generation codeline, YUI 3, which is available as a documented preview release today and which is already powering some of Yahoo’s next-generation projects. As we get closer to the beta release this summer, we’re spending more time talking about YUI 3’s distinguishing characteristics. Satyen Desai, a Sr. Engineer on the YUI team and one of the key YUI 3 developers, gave a talk last week here at Yahoo about the design goals for YUI 3 and the architectural decisions that were driven by those goals. We’re happy to share video from that event here on YUI Theater.

Slides from Satyen’s talk are available as a zipped PowerPoint file here.

The embed from Yahoo Video follows; a higher-resolution version, along with a transcript, is available from the YUI Theater site.

Satyen Desai: "YUI 3: Design Goals and Architecture" @ Yahoo! Video

download (m4v)

In Case You Missed…

Some other recent videos from the YUI Theater series:

• Peter-Paul Koch (PPK): JavaScript Events
• Jenny Donnelly: Hacking with YUI
• Nate Koechley: Professional Frontend Engineering
• John Resig: The DOM Is a Mess

Subscribing to YUI Theater:

• YUI Theater RSS feed
• YUI Theater on iTunes

Find conversations: bloglines | technorati

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

In the Wild for May 11, 2009

News and notes from the YUI community in the past couple of weeks. Please use the comments to let us know what we missed.

• Satyen Desai Talks YUI3 on WebDevRadio: Satyen (one of the key developers on the YUI3 project) gave a talk today at JSConf, and WebDevRadio interviewed him afterwards.  You can catch the interview here.
  
• Matt Snider’s New YUI-based Card Game Engine: The prolific Matt Snider weighs in with a new project.  Writes Matt: “The goal of this system is to build a set of easy to extend, MVC JavaScript objects that can be used as the backbone of any card-game system. I will be tackling solitaire card games first, and have developed the card management architecture, but haven’t even begun to design the game architecture.  The card architecture consists of three objects: Deck, CardModel, CardView. The ‘Deck’ object will handle a collection of cards and has methods to add or remove cards, and a shuffle method using the Knuth algorithm. Games are played by interacting with the ‘Deck’ object and a developer would extend the object to meet the needs of their game.”  Check out the blog post and demo.
  
• YUI Implemented on Fashion/celebrity Blog Limelife.com: Fashion and celebrity blog Limelife is using a variety of YUI components, including Gopal Venkatesan’s YUI Carousel Control. 
  
• Retrevo.com Electronics Site Using YUI AutoComplete and More: Retrevo is a consumer electronics site designed to help you make good decisions about your electronics purchases.  It also has a fantastic repository of users’ manuals — a handy thing for checking out a product that you’re considering buying, or to learn more about one that you already own.  Retrevo uses a variety of YUI components, including Jenny Donnelly’s AutoComplete widget.
  
• Walgreens.com Using YUI AutoComplete: This is not a new implementation, but it’s a noteworthy one — Walgreens.com, the online face of the popular drugstore chain, uses the YUI utility suite and makes excellent use of the YUI AutoComplete widget on its main page to implement its search-suggest feature.
  
• Narayanan A.R., “Putting a YUI Face on a Java Web Application”: According to the author: “Building on my previous article Yahoo’s Rich Web UIs for Java Developers, which discussed how to use various Yahoo User Interface (YUI) Web components for setup and design, this article walks through using YUI to develop a real world application. During the course of the implementation, you will learn how to: Lay out the components, use standard form elements, and handle events.”
• Andrew Burgess’s Crash Course on YUI Grids CSS: Andrew Burgess writes that there are some good reasons to consider YUI Grids CSS to drive your layouts: “YUI grids uses easy-to-remember ids and classes, and clean markup; once you learn it, you could come back to your code in a month and know which parts are from YUI and what each piece does. [Free file hosting on yui.yahooapis.com] reduces your load twice: no need to host the file on your server, as well as faster page loading if the client has the file cached… Yahoo has baked in sidebar widths that correspond with the Interactive Advertising Bureau’s ad guidelines.  [And] with multiple templates and the ability to nest page regions, Yahoo claims to offer over 1000 layout combination . . . all in less than 5kb.”  Check out his full tutorial for more.
  
• YUI Sighting — Tweetium, Twitter API Playground from @carolskelly: Carol Skelly set up a nice little explorer for the Twitter API using YUI and jQuery — check it out at http://tweetium.com/. (Original source.)
• Tutorial: Norman Kosmal, “Hide and Show Columns of a YUI DataTable Using Checkboxes”: The title says it all — Norman Kosmal blogs this tutorial about tying the show/hide column API in YUI DataTable to a checkbox UI.
• In-depth into Cookies with YUI Cookie Utility Author: Nicholas C. Zakas, author of the YUI Cookie Utility among other virtuous projects, has a detailed article on browser cookies up on his blog.  Writes Nicholas: “HTTP cookies, most often just called ‘cookies,’ have been around for a while but are still not very well understood. The first problem is a lot of misconceptions, ranging from cookies as spyware or viruses to just plain ignorance over how they work. The second problem is a lack of consistent interfaces to work with cookies. Despite all of the issues surrounding them, cookies are such an important part of web development that, should they disappear without a replacement, many of our favorite web applications would be rendered useless.”  Check out his article for more, including one or two notes about YUI Cookie support.
• Tom Clancy, “YUI Rich Text Editor in Django Admin”: Tom Clancy has posted his notes on using Dav Glass’s YUI Rich Text Editor to enhance Django Admin. (Original source.)
• Caridy Patino Mayea on Using YUI’s Bootstrapping Capabilities: Caridy, author of the popular Bubbling Library extensions for YUI, writes in with a new blog post about bootstrapping: “In this article, I will focus on YUI 2.x and specifically, how you can design your application to use the YUI on-demand capabilities in such a way that the transition to YUI 3.x will be straightforward. The main goal is to describe how we can use YUI to organize the code and learn how to deal with on-demand loading processes…”  Check out his full post for more details.
• Konamicode from Matt Snider: Matt Snider, author of an upcoming YUI Storage Utility (and employee no. 1 at Mint.com), offers up Konamicode: “Recently, many sites (such as espn.com and facebook.com) have added Easter eggs to their JavaScript libraries that are triggered by the old Konami video game code: up up down down left right left right b a enter. While this does not necessarily improve the web architecture, it does make it more fun. To promote more easter eggs like that, I decided to write a simple script that makes integrating the Konami code into your site trivial.” You can read about the Facebook Konami easter egg on TechCrunch.
  
• Dav Glass’s Slides from Open Hack Day in London: Dav gave a talk on YUI 3 for Yahoo’s Open Hack Day in London.  He blogged about the event and posted his slides to Slideshare, for those who weren’t able to be there in person.  YDN has a nice blog post up about the event on YDNBlog as well.
• TYPO3 Extensions Support YUI CSS and RTE: According to its website, “TYPO3 is a free Open Source content management system for enterprise purposes on the web and in intranets. It offers full flexibility and extendability while featuring an accomplished set of ready-made interfaces, functions and modules.”  Andreas Lappe wrote in to tell us about two TYPO3 extensions, one for YUI CSS and one for YUI Rich Text Editor.  You can see both plugins (and lots of other YUI components) in use on this site.
• Some Thoughts on HTML 5 from JavaScript Library Authors: YUI’s Matt Sweeney and Eric Miraglia are among those whose comments were gathered for a recent InfoQ article by Dionysios Synodinos on HTML 5 and the evolution of JavaScript libraries.
  

Find conversations: bloglines | technorati

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

Draggable DataTable Rows

Introduction

A recent project of mine required an implementation of DataTable where rows could be moved around with Drag and Drop functionality. After looking through the YUI gallery of examples, I realized that the feature I was trying to implement was a little bit different from the ones I saw. So I decided to implement my own solution. In this article I’ll explain how I combined YUI’s DataTable and Drag and Drop components, some workarounds for the challenges I encountered, and how I was able to improve upon my initial solution by using the new YUI3 codeline (which is currently available in preview mode).

Initial considerations and some possible solutions

The first question that came to my mind was how to make each table row draggable and a drop target at the same time in the most efficient way. I also knew that instantiating a Drag and DDTarget object at the same time on an element wasn’t going to work. After reading through the Drag and Drop API documentation I found out that the property isTarget gets set by default to true for every Drag object we create, making that object a drop target as well. So with that, I defined a custom DDRows class to set up the interesting moment handlers and also add some CSS style for the drag proxy object to visually differentiate it from the regular rows. A proxy drag object is just a container that gets displayed once the dragging starts and it serves as a marker/guide for what is being dragged.

YAHOO.example.DDRows = function(id, sGroup, config) {
    YAHOO.example.DDRows.superclass.constructor.call(this, id, sGroup, config);
    Dom.addClass(this.getDragEl(),"type-proxydrag");
};

YAHOO.extend(YAHOO.example.DDRows, YAHOO.util.DDProxy, {
	// Handlers defined here
});

After defining the DDRows class, I listen for the DataTable’s initEvent to set up each row as a DDRows Drag object:

myDataTable.subscribe("initEvent", function() {
    var i, id,
    allRows = this.getTbodyEl().rows;

    for(i=0; i<allRows.length; i++) {
        id = allRows[i].id;

        // Clean up any existing Drag instances
        if (myDTDrags[id]) {
            myDTDrags[id].unreg();
            delete myDTDrags[id];
        }

        // Create a Drag instance for each row
        myDTDrags[id] = new YAHOO.example.DDRows(id);
    }
});

Then instead of using the DDTarget class, I look for the isTarget property of the Drag object to validate the target element. This way we make sure we only move table rows onto other table rows:

onDragDrop: function(e, id) {
    var destDD = YAHOO.util.DragDropMgr.getDDById(id);
    // Only if dropping on a valid target
    if(destDD && destDD.isTarget && this.srcEl) {
            ...
    }
}

An important consideration is that the DOM is repainted each time we move a row, so not only does the Drag object on the original row need to be cleaned up when it is deleted, a new Drag object needs to be created for the row that is created in the new position. Here is the entire onDragDrop function that cleans up and moves a row:

onDragDrop: function(e, id) {
    var destDD = YAHOO.util.DragDropMgr.getDDById(id);
    // Only if dropping on a valid target
    if(destDD && destDD.isTarget && this.srcEl) {
        var	srcEl = this.srcEl,
            srcIndex = srcEl.sectionRowIndex,
        	destEl = Dom.get(id),
        	destIndex = destEl.sectionRowIndex,
            srcData = myDataTable.getRecord(srcEl).getData();

        this.srcEl = null;

        // Cleanup existing Drag instance
        myDTDrags[srcEl.id].unreg();
        delete myDTDrags[srcEl.id];

        // Move the row to its new position
    	myDataTable.deleteRow(srcIndex);
        myDataTable.addRow(srcData, destIndex);
    	YAHOO.util.DragDropMgr.refreshCache();
    }
    }
}

Here is the full working example using YUI 2.7.0.

Enhancing our example by using YUI 3.0 PR2

On the Yahoo! homepage, we have been using YUI 3 to develop our next-generation experience, and the more I use it, the more I realize how powerful and extensible it is. So I decided to go ahead and check out the Drag and Drop component from the latest YUI 3.0 preview release for this exercise.

It was no surprise when I discovered that with this new version I could take advantage of some of the new properties and methods to make my solution more clean and efficient. For instance, Drag and Drop in YUI 3 provides an efficient way to create the Drag/Target objects we need:

myDTDrags[id] =  new Y.DD.Drag({
    node: "#"+id,
    constrain2node: "#datatable",
    moveOnEnd: false,
    proxy: true,
    target: true
});

We no longer have to define our own subclass or worry about validating the element before swapping rows, as the drophit event will only be triggered when applied to elements we’ve defined as drop targets.

The other great new feature version 3 brings us is custom-event bubbling (which brings the power of DOM-event bubbling to the custom events that drive the library’s API). Thanks to this, we can now to listen for all the Drag and Drop events at the document level using the Drag and Drop Manager, rather than having to attach several events to each individual table row. Our custom-event delegation code looks like this:

Y.DD.DDM.on('drag:start',startDrag);
Y.DD.DDM.on('drag:end',endDrag);
Y.DD.DDM.on('drag:drophit',dragDrop);

Here is the full working example using YUI 3.0 PR2.

Conclusion

I hope you find these examples a useful resource on how to add Drag and Drop functionality to DataTables and on how you easily you can integrate YUI 2.7.0 and YUI 3 components in the same page. It also serves as a quick preview on all the new and exciting features that are coming with the next generation of YUI.

Find conversations: bloglines | technorati

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