Author Archive

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.

Please tell us a little about your project.

http://shortreckonings.com is a free YUI-based Web tool that helps tracking and evening out group expenses. Its light user interface is ideal for coworkers, roommates, travel buddies or family members.

Which components of the YUI Library are used on your site?

Short Reckonings uses the following YUI components: Lang, Dom, Connection, Event & CustomEvent, Overlay & Dialog, TabView, DataTable, Calendar, AutoComplete, JSON. The AutoComplete control allows for faster input of expense descriptions for example. Custom events are used intensively to make the different elements of the application communicate together.

What have been your recent successes?

1.5 years after its beta launch — which was covered on the YDN Blog — Short Reckonings has reached a momentum with its adoption by users from many countries. Today, I am pleased to announce that Short Reckonings is no longer in beta. Since its beta launch, a lot of new features and user interface improvements have been made. Among the most significant
ones:

• Support for non-even splits and formulas;
• Rich widgets such as calendar and autocomplete;
• Content can be in any language (utf8);
• Print & export to Excel;
• Sign in with your Facebook account.

Congrats! What about any challenges you’ve faced recently?

A recent challenge has been the integration with Facebook Connect JS API. Because FB Connect is a young library and is not very stable, using YUI Custom Events to build a YUI layer above it has been the key to make it usable in production environment.

What do you see for the road ahead?

With my current stay in Cambodia, I have become very concerned about making software usable in slow connection environments and offline. The next version of Short Reckonings will support offline usage (with Google Gears or HTML5 offline storage). Once back in Canada, I also would like to release an iPhone version. And of course migrating to YUI 3 will be an exciting experience!

Tell us about your product.

timr is a very easy to use time-tracking application which offers a web application as well as native clients for mobile phones. This combination allows our users to easily track their times in the office and on the go.

What problem are you trying to solve for users?

For most people, time tracking is an evil, consuming a lot of time, money and energy. The reason that time tracking often fails is the lack of an appropriate tool.

Most systems are cumbersome, complicated or simply not available when users have the need to track their time. Times are mainly tracked subsequent to the work performed and not parallel to the work, which increases the effort that is needed. This is even more dramatic since times are mostly tracked not directly after work but at the end of the week or, even worse, at the end of the month.

timr allows its users to track their times instantaneously during the work day, easily and ubiquitously. That means the time is always tracked parallel to the work, no matter if you are in the office or on the go. At the end of the day, all your time is already tracked, without having to invest one more minute to track any work before going home.

What makes your product stand out?

Over the past few years we have had a lot of experiences with different time-tracking applications and concepts. Most are too complicated or simply too cumbersome. So we designed a system that we ourselves would enjoy using. We decided that time tracking has to be Easy, Instantaneous and Ubiquitous:

• If a time-tracking application isn’t easy to use, you won’t use it and it will be even harder to convince your employees to use it.
• If time tracking isn’t easy enough it is usually procrastinated, but subsequent time tracking needs even more time then instantaneous time tracking — a dangerous loop.
• For ongoing instantaneous time tracking you need the possibility to track times anytime, anywhere.

What are the things your team is most proud of?

By leveraging YUI in our web applications as well as building out native clients for mobile phones, we made time tracking with timr always easy, in the office and on the go. Although it would have been much easier for us to develop a web application that also works on mobile phone browsers and sell this as a “solution” for mobile time tracking, you would realize very fast that having to start a browser, open the mobile web page and enter your login credentials to instantaneously track your time isn’t easy. We’ve taken no shortcuts in our efforts to give users the power and convenience to track their times anytime, anywhere.

Please describe how you came to choose YUI as a resource.

We looked for a library of reusable components that could provide us the best usability. It was also important for us to be able to customize and tweak the components for our needs. Many rich component libraries provide a lot of features but do not allow developers to hook into them easily to extend them.

With our server architecture consisting of the Spring Framework and the free application container Tomcat, we found in YUI a perfect companion to sit on top as the “JavaScript-Layer”.

Which YUI components in particular do you use in your product?

We use about 70% of the components included in YUI 2.7. The application consists of a minimal set of JSPs through which most user inputs are submitted using dynamic dialogs. These dialogs are based on the YUI Container family of components and use the Connection Manager to send the inputs by AJAX to the server. This improves the flow of the application a lot.

Another important component is the TreeView, which we use to display our highly customizable task structure and through which users can define their exact hierarchy of customers, projects and tasks.

All the reporting is done in the DataTable with server side filtering, sorting and pagination enabled. Custom formatters and special configurations allow us to adapt the grid exactly to our needs.

Besides these components, we make heavy use of Context Menu and Drag & Drop all over the application, to give power users an efficient workflow.

What have been the successes of using YUI in your project?

YUI helped us create a web application that is so easy to use that there are no more excuses for “old-fashioned” time tracking systems. Many of YUI’s components enable our web application to feel much more like a desktop application but without having to install and update it on each client computer. The interesting thing is, that after using timr ourselves we experienced that time tracking actually became fun, and the coolest thing is how many of our users tell us the same: time tracking is fun! YUI has played a significant role in helping us achieve this “fun” side effect.

What have been the challenges of using YUI in your project?

One word: JavaScript. Frankly, the power of JavaScript has been underestimated for a long time and many developers have used JavaScript with old bad patterns. Luckily Douglas Crockford’s book helped us a lot to find the good parts of JavaScript and how to use them. We believe that being able to write good JavaScript code is an essential requirement for today’s web developers and we are sure that we will see a lot more great JavaScript applications in the future.

What are some upcoming features you are tackling with YUI?

One of the upcoming features we are planning is a special reporting page that will make heavy use of YUI Charts. We will give the user a huge set of predefined reports using the DataTable and provide dynamic charts for visualization and allow them to create their own.

Tell us a little about your project.

I had been putting off a website for my uncle’s company for some time, but with the help of YUI, I built his entire site from scratch in just 3 days.

What is your background with YUI? Why did you choose YUI for this project?

I have been using YUI for the past 2 years. In my previous job, I introduced it into every single internal application. I chose YUI for this project due to my familiarity with it, and because it does ALL of the hard work for you. In short, YUI makes me look very good on a daily basis.

Which YUI components in particular are in use?

I used the Carousel, AutoComplete and my absolute favorite, the DataTable.

What have been the challenges of using YUI in this project?

The main challenges were with a couple of Carousel bugs. These were issues I did expect, as it is still in beta. The only really major issue I had was figuring out why 2 carousels on the same page didn’t play nicely together. Then I realized that their items shared the same IDs.

What are the things you’re most proud of in this project?

I am proud of the fact that I was able to provide a rich user experience very quickly. Specifically, the catalog page that uses the AutoComplete widget with the DataTable allows users to easily browse a movie catalogue of over 4000 movies and games.

What are some upcoming features/projects you are tackling with YUI?

Next order of business, finish the Form Validation component I have been working on with Luke Smith for YUI 2. I am excited to see how it’s received by the YUI community. I also plan on introducing YUI to companies I will be working with in the near future.

How did the YUI components perform?

They performed excellent. The DataTable was able to handle 4000 records at a time without an issue. I have found that the performance of the YUI components has steadily improved with every release.

Tell us a little about your project.

“Demeter” is the codename for a recent web 2.0 application we built which provides powerful solutions to web conferencing, ad hoc meeting, and account management. Currently we have two major product suites: “Meeting Center” and “Admin Module”.

Although it’s still in RC phrase with no public access to view it, I have extracted a prototype of the Admin Module that demonstrates the management of portal properties.

Which components of the YUI Library are used in your project?

When we were initially trying to decide which JS framework and UI library to use, there were three things that sold us on YUI: the great documentation, the wide variety of mature widgets, and the BSD license, so I introduced YUI to my company. The following modules are used in our project:

• CSS: Reset, Fonts
• Core: YAHOO, Dom, Event
• Utilities: Connection Manager, DataSource, Element, JSON
• Widgets: Calendar, Container, DataTable
• Tools: Logger, Test

Admin module implementation overview

Our main requirements for the Admin module included:

• datatable with a customized editor popup
• theme/skin customization
• browser compatibility

Here is the simple markup that sets up the UI:

    <div id="datatable-ux">
		<div id="datatable-ux-hd"></div>

		<div id="datatable-ux-bd">
			<div id="node-depths" style="display: none">root  > Testing  > 5_Dev Testing BA  > 80000_1010</div>

			<div id="output"></div>
			<div id="yui-datatable" class="yui-dt">
			  <img src="images/icon-loading.gif" alt="loading" align="absmiddle" style="margin: 30px 0;" /> loading data...
			</div>
		</div>

		<div id="datatable-ux-ft"></div>
    </div>

	<div id="node-apply-wrap" style="display: none;">
		<fieldset>
			<legend>Apply to</legend>

			<input type="radio" name="node-apply" checked="checked" />Current node only<br />
			<input type="radio" name="node-apply" />Current node and child nodes<br />
			<input type="radio" name="node-apply" />Child nodes only
		</fieldset>
	</div>

Here is a code snippet of the simple extension I built for DataTable TextboxCellEditor:

   // simple example to extend the CellEditor Classes
   // short alias
   var lang = YAHOO.lang,
	  util = YAHOO.util,
	  widget = YAHOO.widget,
	  Dom = util.Dom,
	  Event = util.Event;

   // extend TextboxCellEditor
   Gcc.admin.TextboxCellEditor = function(config) {
	   Gcc.admin.TextboxCellEditor.superclass.constructor.call(this, config);
   };
   lang.extend(Gcc.admin.TextboxCellEditor, widget.TextboxCellEditor, {
	   renderForm : function() {
		   Gcc.admin.TextboxCellEditor.superclass.renderForm.call(this);

		   var oHd = document.createElement('DIV');
		   this.getContainerEl().insertBefore(oHd, this.textbox);
		   oHd.id = container.id + '-admin-editor-head';
		   Dom.addClass(oHd, 'admin-editor-hd');

		   var oCurrNode = document.createElement('DIV');
		   this.getContainerEl().insertBefore(oCurrNode, this.textbox);
		   oCurrNode.innerHTML = 'Current node: ' + Dom.get('node-depths').innerHTML;
		   Dom.addClass(oCurrNode, 'admin-editor-pd');

		   var oApply = document.createElement('DIV');
		   this.getContainerEl().appendChild(oApply);
		   oApply.innerHTML = Dom.get('node-apply-wrap').innerHTML;
		   Dom.addClass(oApply, 'admin-editor-fieldset');
	   },

	   move : function() {
		   Gcc.admin.TextboxCellEditor.superclass.move.call(this);
		   Dom.addClass(this.textbox, 'admin-editor-pd');
	   }
   });

Then a cellClickEvent handler detects the underlying type of data value being edited and calls one of the customized cell editors.

With our server architecture consisting of the Apache Struts framework and the application container Weblogic, we found that YUI plays a good companion role as the “Clientside-Controller” and works well with Struts action results as a dynamic datasource.

<%@ page pageEncoding="UTF-8" contentType="application/json; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
{"PropertySet":{
"Property":[
<s:iterator value="displayPropertyResultList" status="index">;
    {
    "Id":"<s:property value="id" />",
    "Name":"<s:property value="name" />",
    "Type":"<s:property value="type" />",
    "Value":"<s:if test="%{value != null}"><s:property value="value" /></s:if>",
    "ApplyFrom":"<s:property value="applyFrom" />",
    "ApplyTo":"<s:property value="applyTo" />",
    "Readable":"<s:property value="readable" />",
    "Writable":"<s:property value="writable" />"
    }
    <s:if test="%{!#index.last}">,</s:if>

</s:iterator>
]}
}

More details and source code are available on GitHub, where I have extracted a prototype of the Admin UI using a local datasource as a simple demonstration.

What have been the challenges of using YUI in this project?

The main challenges have been around the fact that most of our developers are in fact not frontend engineers. They don’t always have quite as much experience dealing with cross-browser issues or JavaScript-specific tricks. Fortunately YUI helps us a lot to make good code structures and to smooth out most browser compatibility issues.

What’s next for Demeter? What are some upcoming features you are tackling with YUI?

One of the upcoming features we are working on is a reporting module that will make heavy use of YUI Charts. And we are also planning to use TreeView widget to refactor our addressbook module.

We are still using YUI 2, but if more and more official widgets based on YUI 3 come out, we will consider totally moving to YUI 3 in the future.