The List

The List allowed me to dip my toe into the waters of HTML5 local storage. It turned out to be really straightforward to implement. If you visit The List on the same computer, your list will be preserved thanks to this feature of the latest HTML spec. The List also uses a cookie fallback in the event local storage is not supported on your browser.

Desktop

On the desktop, list items are displayed on the right with notes for the selected item on the left.

My first priority was to make The List look much nicer than a bunch of standard text input controls. I explored the possibility of having list items rendered as static text and swapping in an input field on click, but the solutions for this are messy. Instead, I ended up making the list of a series of styled input fields. Even when you're not editing, the list is displayed as fields, but they are styled as regular text.

The challenge when using non-standard input controls is to be sure the user has sufficient feedback to know when they are editing. The List handles this by making the input field lighter to signal it has been focused by the user.

The user never has to save The List. It intelligently saves content on its own. Content is saved every few seconds during input. It is also saved when a field loses focus.

My overall goal for this project was to make the user experience great. I wanted the user to intuitively understand how to use the list and to avoid the rigid usage patterns so many web-based applications force their users into. Overall, I believe the app was successful in this regard.

Phone

The List doesn't have a ton of features, but all of them are preserved on mobile. It's frustrating to have to lose features on your phone especially when this is not caused by any technical limitation.

colorSlide jQuery Plugin

I wrote a simple jQuery plugin to create the color slider effect when focusing on a list item.

(function( $ ){
    $.fn.colorSlide = function() {
        var trigger = $(this);
        var elWidth = trigger.outerWidth();
        var elHeight = trigger.outerHeight();
        var elPosition = trigger.offset();
        var elColor = trigger.css('border-left-color');

        var colorSlider = $('
'); trigger.css('z-index', 51); colorSlider.css({ 'background': elColor, 'width': 0, 'position': 'absolute', 'z-index': 50 }).offset(elPosition).appendTo(trigger); trigger.on('mouseenter mouseleave', function(e) { if (e.type === 'mouseenter') { colorSlider.css({ 'width': elWidth, 'height': elHeight }); } else if (e.type === 'mouseleave') { colorSlider.css('width', 0); colorSlider.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ colorSlider.remove(); }); } }); }; })( jQuery );