Yahoo! User Interface Blog

Members of the Squarespace team: (From left to right) Paolo DeDios, Erica Reitman, Dane Atkinson, Jonathan Snook, Anthony Casalena, Tyler Thompson, Davin Chew, Rolando Berrios.

Can you provide a background of projects where you’ve used YUI? What problems are you trying to solve for users?

Squarespace has two different audiences that have to be served in different ways. We have Squarespace customers who use the tools that we provide and we have the people who visit the sites that our customers create. YUI is used to drive a lot of the functionality that we provide to our customers and do that in a way that works reliably cross-browser. If we don’t provide a reliable in-browser experience, we’ll hear about it with support requests.

We also have YUI available for our customers to use on the sites that they build (although it’s never been a requirement). Our customers get to rely on a stable and reliable library for any of their own site-building needs.

You chose YUI’s JavaScript library to help drive the UI. What led you to make that choice?

At the time the decision was made, YUI was the best choice. YUI is a well-designed library that considered the requirements of multiple scenarios, not limiting itself to one or two use cases. It was also one of the few libraries that had an integrated and supported set of widgets.

Also, the fact that YUI is actively maintained and tested so extensively with the Yahoo! homepage is a massive win. No other library we looked at was receiving that sort of extensive testing and coverage. When we have run into speed issues, it’s turned out to be cross-browser issues unrelated to our use of YUI.

What YUI components are in use on which projects?

Of course the standard DOM and Event stuff along with Drag and Drop, Animation, and Connection Manager. On the widget side of things, we take advantage of Calendar, ColorPicker, and Slider.

Design and interface quality are huge differentiators for startups. What are the features you have prioritized in your interfaces and what have you build on top of YUI?

For Squarespace, design and interface quality is a big part of our success. We really work to create a polished in-browser experience so that customers can design and manage their sites all from one place. We’re trying to replace desktop tools. The browser and YUI have allowed us to do that.

We pull in dynamic overlays allowing our customers to move content around, edit content on the spot, or add new content without requiring a page refresh. Squarespace also allows them to edit the look and feel of their sites dynamically. Change colours, images, or other CSS properties from the interface or have direct access to specify whatever CSS you want. It’s really quite flexible, and we’re very proud of how well it has been received.

What are the next interface challenges you are tackling for upcoming releases?

We have some great features that we’re working on right now that will increase the flexibility that our customers will have to modify their content and design right from the browser but the challenge with doing more stuff within the browser is ensuring that you’re creating a snappy and responsive interface. We definitely don’t want them to be sitting there while we load up large assets. We want them to be able to jump in and play with their sites as quickly and easily as possible.

We plan to stick with YUI and will be watching the progress of YUI 3 very closely to see how it’ll fit into our future plans.

Special invite to Lunch’s private beta for YUIBlog readers:

• Go to http://www.lunch.com.
• On the right-hand side of the screen in the Get an Invite! box is a "Have an invite code?" message. Click on the click here link.
• Enter the Invite Code YUIBlog and a valid email address. Click Submit.
• Lunch.com will immediately send you a confirmation email.
• Open that email and click on the confirmation link.
• Sign into Lunch.com.

Design and interface quality are huge differentiators for startups. What are the strengths you wanted to build around in the Lunch.com interface?

At Lunch, our strengths are the community’s ability to contribute both facts and opinions about almost everything and our Similarity Network which, based on site interactions, connects each person to others who share similar interests, opinions, and ideas. To clearly deliver and communicate to the user it is important for the interface to be clean and easy to understand.

You chose YUI’s JavaScript library to help drive the UI. What led you to make that choice?

We selected YUI for a number of reasons.

First and foremost, we felt that Yahoo’s commitment to this technology gave a significant advantage in the areas of test coverage, maintenance, and longevity. Standard open source frameworks have the potential hazard of falling into the “flavor of the day” category, where there is an initial surge of enthusiasm that can quickly be abandoned for the "next big thing." We wanted a framework that was going to have a lasting presence.

Secondly, we were impressed by YUI’s architecture. The quality and modularity of the interface is impressive. Clearly, there is a concern for keeping the interface clean, whereas other frameworks have a tendency to become bloated over time. Yahoo’s architectural shepherding of the interface gives it a better chance of staying slim, usable, and maintainable over the long haul.

Thirdly, we found the documentation and supporting resources to be very helpful. The number of examples and easily navigated Web site facilitate a short learning curve and rapid development. We also appreciated the wealth of JavaScript information available from the YUI Theater.

Finally, we found the YUI blog to be a robust source of tutorial information and the YUI discussion forum to be a vibrant community of helpful implementers willing to share their knowledge and address issues. We didn’t want to feel like we were "on our own" when problems arose.

All of these reasons led us to choose YUI and we have not been disappointed.

What YUI components are in use on the site?

Yahoo, Dom, Event, Connection Manager, Get, JSON, Animation, Container, AutoComplete, ImageCropper, TabView, and OverlayManager.

What’s next for the interface of Lunch.com in coming releases?

Currently we are in private beta but we will be opening it up in the next few weeks. Our goals for the interface, are to continue to optimize the experience for both existing community members and for people just looking to gain knowledge or insight into specific areas of interest. As we move from the closed beta to an open beta it is important that new visitors can understand the value of Lunch and easily jump in and start getting personalized information based on their interests. Creating those easy on-ramps and access points that can engage and drive adoption will be the key priorities moving forward.

What is Confirmit? Tell us a little bit about the company.

Confirmit has been around since 1996, and we are now over 250 employees globally, with offices in Guildford, London, Oslo, New York, San Francisco, Moscow and Yaroslavl.

Confirmit targets Global 5000 companies and Market Research agencies worldwide with a wide range of software products for feedback / data collection, panel management, data processing, analysis, and reporting. Customers include British Airways, Countrywide Financial, Dow Chemical, Experian, GlaxoSmithKline, Halifax Bank of Scotland, Hewlett Packard, Intrawest, Ipsos, Nielsen, The NPD Group, Safeco Insurance, StatoilHydro, Symantec and Virgin Media.

The goal of Confirmit as a company is to revolutionize the survey, panel and reporting process through automation and integration. The goal of the R&D department is to support this by creating a high quality product that is capable of tackling current and future challenges in the market.

From a frontend engineering perspective, what are the core challenges you face in your work on Confirmit?

The core challenges we face from a front-end engineering perspective would have to be the fact that most of our developers are in fact not front-end engineers. YUI helps us a lot in this area, and does so in a manner that in most instances are transparent to the developers. The less they need to know about how for instance attaching events differs from browser to browser, the better. We can’t all be browser geeks in the R&D department, but we should not have to be in order to be productive.

Now that browsers are evolving so quickly (as opposed to the first half of the decade), having a code-base that is ready for the current and future browsers is definitely the biggest challenge in creating a rich web interface.

Why did you choose YUI as part of your JavaScript foundation?

I felt [YUI] would be an excellent choice as our JavaScript framework of choice, considering Yahoo’s own requirements when it comes to performance, stability, browser support, etc. For the first week of March we averaged about two million page-hits daily on our surveying servers, and about two hundred thousand page-hits daily on the survey authoring servers. Our primary strengths are security, scalability and performance, so we needed a JavaScript framework that supports these product qualities. I also felt that the YUI project would not be a short-lived one, and that I could count on it being updated and maintained for a long time considering the solid reputation of the company responsible for it.

How are you using YUI in your site today?

We are using YUI in almost every area of the product. The core library is deeply integrated into the survey authoring and reporting platforms (Yahoo, Dom, Event, JSON, Selector), and we are also using the Connection Manager a lot for XHR/Ajax.

Confirmit Express (the entry-level product for survey authoring) is also using the Animation Utility heavily.

We are also using quite a few components in the survey front-end (Slider, Calendar, Get, Cookie, YUI Loader, DragDrop, Resize) in order to create a more interesting experience for the respondent.

Elsewhere in the product we are using YUI AutoComplete and Rich Text Editor.

We are combining the components in use with our own core libraries during build time in order to reduce the number of requests to the server, meaning we have one combined JavaScript file for survey authoring, one for reporting, one for surveys, and one for Confirmit Express. We have of course considered using the Yahoo or Google combo handler for this, but the lack of an SLA and SSL support has prevented this so far. [Note: Google's CDN does provide SSL. -Ed.]

In using YUI for these projects, what aspects of the library have been particularly pleasing to work with and powerful in solving problems?

My personal favorite components would have to be Event and Connection. Dustin Diaz has a great article on how and why you should use the Event Utility; it should be very educational for anyone who hasn’t had the time to get to know the Event Utility in detail.

When it comes to the Connection Manager, I love the fact that it does exactly what you need, and nothing more. Make a request, specify the http method, specify the form to send if needed, and provide a handler for the response. It’s not doing anything too fancy, but it’s all very nice and clean, resulting in very readable and maintainable code.

What’s the most innovative thing you’ve done with YUI in the current release of Confirmit?

In the Inline Surveys project we use YUI Loader to set up the JavaScript environment and the Get Utility for the cross-domain requests. If the page hosting the Inline Survey is on our own domain we switch from the Get Utility to Connection Manager for XHR, and the similarities in the interfaces of these two components makes this extremely easy to accomplish.

What would you like to see YUI developers improve on in upcoming releases of YUI?

It would be great to have some chaining functionality in YUI. We are using DEDChain internally as a chaining wrapper for YUI, and it does the job. But I would really like to see what the YUI team could come up with if they put their brilliant minds to it (since this will be included in YUI 3 I guess I will get my wish).

Some more skins would also be great. The SAM skin is excellent, but it would be good to have more than one to choose from, especially a darker blue one and perhaps a white on black skin.

I am also really looking forward to seeing the lazy load syntax in YUI 3, it seems like a very nice way of working with the different YUI components that you don’t want to have preloaded in the initial page delivered to the browser.

Tell us a little bit about DocLanding — what are the central problems you solve for your users?

DocLanding is an on-demand document management solution that delivers enterprise class document management functionality for a fraction of the costs of most enterprise solutions. The software can be delivered through our Software as a Service (SaaS) offering or as an in-house system. Our clients are primarily in the financial services and healthcare arenas.

Common issues we solve for our customers include providing a web-based centralized repository for distributed workforces, on-demand web-based scanning for low paper volume offices, and desktop batch-based scanning in high paper volume offices. Other issues we address include secure document sharing and collaboration, document editing/annotations, version control, document commenting, and document watermarking. Our unique approach to separately controlled but linked document repositories allows users to access disparate repositories with one common login.

What were the particular user interface challenges presented by your product’s design?

We learned from some of our earlier work that you simply cannot underestimate the importance of user-friendly design. Creating a website is fairly easy, but creating a true web application that has to meet the needs of businesspeople is real work. Our product attempts to take document management from strictly the domain of the large enterprise and make it available to any small business. Electronic document management at its core is not a simple task. The goal is to organize and control access to massive numbers of files in addition to making them fully searchable. Because of this, the user interface is actually where the majority of our development time has traditionally been spent.

We’ve found that you will save time and money on support issues when you make your site straightforward and easy to use. Part of that is relaxing the specifications needed to run the site. We got ours pared down to just about any modern browser with JavaScript and Flash. The core site design we came up with presented its own challenges with its very specific use of the screen real estate. We found our users were better able to make full use of the application when we ourselves paid attention to colors, iconography and proximity of the controls to their function. We think we’re on the right track because our feedback page has returned more requests for additional features than for help requests.

You chose YUI to help power your site. What led you to that decision?

The simple answer is consistency and speed. We needed a framework that would enable us to meet the design specifications of our product. More specifically, we had ambitious design goals like maintaining a one screen view and minimizing or eliminating full page postbacks. In addition, we wanted our required elements to look and function identically in as many different browsers as we could manage. There are enough consistency issues between browsers and their rendering methodologies to contend with already, so any framework we chose needed to minimize the amount of browser-specific coding we’d have to do. After experimenting with a variety of different toolkits, YUI came out quite clearly on top. There was a bit of a learning curve to all the products, but YUI’s had the best payoff.

The base framework does not require a plug-in, it plays well with .NET, and the scripts are light, tight and solid. Once we got the hang of the framework, we found it enlightening to compare our older traditional interface pages to the YUI versions. In every case, adjusting our UI methodology returned huge gains in performance and consistency with lighter downloads to our clients.

What YUI components are you using most heavily in your app?

We’re actually using quite a lot of the components. The most beneficial ones have been those that allow us to do as much with and on one screen as possible, so the TreeView, Menu, SimpleDialog and Layout Manager have been extremely useful. In truth we’re using nearly all the controls, but we especially appreciate the Uploader Control’s ability to handle multiple file selection. We’ve been looking for a solution to that problem for some time and YUI’s has been the most elegant we’ve encountered so far. We make good use of the JSON Utility and Connection Manager to greatly minimize the size and number of requests to the server we make, which keeps our footprint down and more importantly keeps our users working, not waiting.

What’s next for DocLanding? What are the challenges you’re working to address in your upcoming releases?

We’re constantly working to improve the feature set of our product. Our users have asked for features to better integrate the editing of their documents with the main application so we’ll make time for that. We’re also working on better accommodating large file uploads. Otherwise, we have several ideas on the table and we’re weighing which ones would be most beneficial for our users. A version of the site optimized for mobile phones and netbooks is in the design stages already, as well as tools to import structured folders from the desktop directly into DocLanding. Experimentally, we’re toying with the idea of only storing the metadata at the website and pulling content directly from networked client machines running our software. Ultimately, the needs of our users will dictate in what direction we move next.

What got you interested in building a web interface to iTunes? Or is that a dumb question?

(No, not a dumb question :)) I’ve got a sizable song collection in my iTunes. An app for providing myself with web access seemed like a nice thing to have, and it would give me the opportunity to play with web and desktop technologies in the same application.

You chose YUI for many of the UI elements in your app. What specific YUI components are you using, and for what purposes?

YUI’s consistency and reusage of components accross the whole ecosystem lets you easily pick up on any new component you might need as the project advances. So I’ve been trying to stick with YUI-only, and I had to look elsewhere just for the flash song player, for obvious reasons.

pulpTunes produces a single web page, whose layout is declared through the Grids CSS lib. No need of nasty CSS hacks, and you can guarantee your page will look the same in all major browsers. This is one of my favorite YUI libraries, because of the huge time savings and peace of mind it provides.

The songs list is a DataTable accompained by a Paginator, fed through an XHR connection. Customizing the table and pagination looks was really easy by just overriding some CSS rules from the Sam skin, which is very well commented. The custom formatter for the Rating column is a 3-liner javascript code. The table (and the playlist section to the left) make use of the menu component to show a context menu to perform operations on a song or playlist.

I’m using a Slider component to adjust the player’s buffer. With it you point at which point in download progress you want the song to start playing.

There are few popup messages and dialogs in the app, that are rendered using the Container component.

Most of the YUI components I used (there are 12) are fetched from yui.yahooapis.com in a single request through the very convenient YUI Loader. And of course, I’m using the YUI compressor to compress to 15k the one javascript file that holds all the app’s logic.

You’re using Dav Glass’s Effects Package in addition to YUI. What functionality are you drawing from Dav’s collection specifically?

Coming from a Prototype+Scriptaculous world, I was very relieved to find that somebody had already ported to YUI all the great effects from Scriptaculous. And [because Dav is a member of the] YUI team, I could rest assured about its quality. I’m using the BlindDown and BlindUp effects to show and hide the songs cover art.

One of the main elements of your app is the DataTable that you use to display the songlists. What was your experience like building an XHR-fed DataTable with JSON data? What lessons did you learn that are worth sharing with other developers?

The XHR feeding part was pretty straightforward. Although I remembered trying to return some HTML in the JSON response which didn’t work, but that looked like a browser bug.

Pagination and sorting was easy as well, but I had to provide a custom generateRequest function because, if I recall correctly, YUI assumes the records should be sorted since the first request to the server, and in my case I wanted to wait till the user actually clicked on a column header to start returning sorted records.

I also had some trouble at first when trying to retrieve specific records in the table, but then I realized the existance of a whole bunch of helper methods just for that, like getTrEl() and getRecord() that are not mentioned in the general docs. So my obvious advice is that your read the entire API for any component you’ll be doing heavy work on.

pulpTunes is a SourceForge project. Are you looking to build a community of developers to work on the project with you?

Yes, that’s the idea. I’m also using SourceForge to track bugs and feature requests, so any kind of feedback from users is also welcomed. Graphical designers are invited as well, if they want to provide additional skins for the app.

What’s next for pulpTunes?

It’s been just a few days since the first stable release is out, and the response has been tremendous. I think I have already a pretty good idea of the major features for the next version: user authentication, search, shuffle and repeat buttons, and ability to rate songs.