Answer My Query

When Chris, Kevin and Ryan approached Alex and I to develop Wufoo Unplugged, a desktop application to view Wufoo form data offline, we ended up choosing .NET because in addition to it offering the features we needed like multi-threading, file system access and pre-built Lucene libraries, it was also the technology that Alex and I were the most familiar with at the time. We weren’t officially part of the Wufoo Team then (Unplugged was basically our hiring interview) and so we weren’t asked to develop in an environment outside our comfort zone. As you can imagine, choosing a Windows-only solution left a number of Mac users feeling a bit left out. And so hoping to help out other developers thinking of creating their own desktop applications that will work on both PCs and Macs for their web services, I thought I’d do some research into the current state of cross-platform Rich Application Architectures and present my findings here.

Adobe AIR

Adobe AIR has made great strides in providing a cross-platform application architecture that sets a new benchmark for web developers dreaming about making things “better.” This environment provides a way for web developers who are comfortable developing in Flash, Flex or HTML to easily port their apps to a desktop environment. Like other frameworks that produce installable code it can install shortcuts on the desktop and interact with the file system. In the hands of someone familiar with creating Flash interfaces, AIR is capable of utilizing beautiful UIs that are not confined to the browser. AIR can also use SQLite as a database, which allows a developer to create a truly disconnected system. Additionally, using a specified coding model and an Adobe server product called LiveCycle, offline data synchronization can be handled automatically, freeing the developer the burden of writing this code alone.

Pros	Cons
Not confined to browser	Security and trust concerns
Can interact with the file system	No support for multi-threading
SQLite database support	LiveCycle requires J2EE Server
Offline data synch through LiveCycle

One of Adobe Air’s strengths, the inclusion of an out-of-the-box synchronization, is ironically one of it’s downfalls. While this technology may save the developer loads of time, the configuration and maintenance of a J2EE-compliant server like jBoss (LiveCycle must run in a J2EE container) may prove to be overkill for a lot of organizations.

Another downside of Adobe AIR is the lack of true multi-threading. Plugins like Google Gears and Silverlight both expose multi-threading out of the box. The AIR framework, on the other hand, runs on a single thread. System threads to perform database operations are spawned separately, but once the data is returned, the processing of this data occurs on the same operating thread as the UI. While patterns exist to minimize the impact on the user, they may lack the sophistication veteran desktop programmers are used to working with in other environments.

One thing to keep in mind about developing an installable application like AIR, is the responsibilities that comes with the power of developing with AIR’s API, which is rather extensive. Just like any other application run from an installer, the user makes one choice at the beginning of the process to explicitly trust the application developer and the application. Because AIR has access to the file system, a developer with the wrong intentions could do great damage with it. While the AIR HTML security is designed to protect developers from writing applications that could be exploited by third parties, the up-front contract between the user and the AIR application still gives the developer a lot of opportunities to do evil. Check out Lucas Adamski’s article to get an understanding of the AIR security model.

Google Gears

Google Gears is a framework that adds powerful desktop functionality to the browser through a toolbar or browser plugin. Google Gears exposes three major components: LocalServer, which allows developers to cache and serve application resources (HTML, JavaScript, images, etc.) locally, Database to store data locally in a fully-searchable relational database powered by SQLite, and possibly the most important offering, the WorkerPool, which makes web applications more responsive by performing resource-intensive operations asynchronously.

Pros	Cons
Few security concerns	Confined to the browser
Plugin rather than install	Sync left up to developer
Enhances current browser
New API advancements

From a security perspective, your users end up making a smaller commitment with Google Gears. Gears runs within the sandbox of the browser, storing data BLOBs and the SQLite DB within a protected area. Unlike an installed application, Gears does not have arbitrary access to the file system.

One promising feature in Google Gears is the BLOB API, which provides a way to reference binary data in web applications. Google’s Chris Prince explains in this video how the BLOB API can allow the developer to manipulate a memory stream that the browser can interact with to create an elegant solution for large file uploads.

Google Gears does find itself lacking in two areas: easy offline synchronization and advanced integration with the desktop. No framework is provided for synchronization like AIR. The architecture documentation explains to the developer how to check online status, but leaves the synchronization code up to the developer. Additionally, Gears is confined to the browser and so an application developer has no way to adjust the user experience outside the confines of the page. While the new Gears API has desktop shortcuts and Growl-like / Growl compatible notifications (depending on your OS), an application designer is very limited in creating the controlled experience you see in most desktop applications.

Microsoft Silverlight

Silverlight is a Rich Application Architecture designed by Microsoft meant to topple Flash as the leader in rich online content. Like Google Gears, it installs as a plugin and runs in all the major browsers. It offers slick vector graphics support, a sandboxed offline data storage component, and most importantly, access to a reduced version of the .NET runtime. Like all Microsoft development tools, the framework is steeped in Microsoft-specific buzzwords, but the concept looks compelling.

Pros	Cons
Vector Graphics	Expensive Dev Tools
Sandboxed Data	Market Penetration Low
.NET framework

Silverlight consumes XAML documents that act as the UI layer instructing the instantiation of objects written in one of many of the languages supported by the .NET framework. This multi-language support is a key selling-point of Silverlight. It allows developers from an enterprise to contribute their pre-written libraries to a Silverlight project, provided they meet certain specs.

One major con to the development of a Silverlight project is the barrier to entry set up by the IDE. Unlike the other dev environment listed here, Microsoft stands alone in charging thousands of dollars for a single developer seat. For example, outfitting your single designer with Expression Blend, the creatives tool for working with XAML, and two of your developers with Visual Studio 2008 costs over $1700.

One other major concern is the install base and market penetration of Silverlight. Microsoft is pushing hard to power big-name events like the Demographic National Convention and the 2008 Olympics, where they reported that of the 50 million visitors nearly 50 percent of them had the Silverlight plugin installed. Compare that with the over 80 percent of browsers running Adobe’s Flash and it is easy to understand why website developers may be reluctant to serve a page that requires users to install another plugin. That said, with Silverlight 2.0 slated for a October 15th release date, you can be sure that Microsoft will be finding bigger venues to show off their shiny new plugin.

Further Reading

While this wasn’t a comprehensive review, I hope it’ll give you a nice jumping-off point for your own research. For more information, definitely check out the following articles:

• Silverlight Pros and Cons
• Adobe Air Pros and Cons
• Synchronization with LiveCycle
• Gears 0.4 Release
• Facebook uses Gears to Power Messaging

In the flickr explorer app made with Asp.net MVC and Athena, I was trying out some form post scenarios. In this post, I will add few things regarding MVC form post and Ajax that is common to FlickrXplorer but can be used in general.

Now, Asp.net MVC has some new Ajax features, one of this is the Ajax form post. With this, you can easily make your web app actions Ajax enabled. The syntax is pretty simple.

<% using (Ajax.Form("AddComment", "Comment", new AjaxOptions { UpdateTargetId = "cmContainer", 
           OnBegin = @"function(sender, args) {
                $get('caWait').style.display = 'block';
           }", 
           OnSuccess = @"function(sender, args) {
             $get('caWait').style.display = 'none';
           }", 
          }))
                            
       { %>

...
...

<% } %>

The piece of snippet is taken from FlickrXplorer : CommentsControl.ascx where I used MVC Ajax to do comment posts. Here you can see that I can pass in the UpdateTargetId , where the output of ContentResult or  if it is ViewResult, it will contain the rendered html for it. Additionally, there is OnBegin and OnSuccess events where I can do things like show or hide the wait panel and any other things I might like to do.

On the client code , probably in your default.master you need to have the following references to make things work.

<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Content/MicrosoftAjax.js") %>" ></script>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Content/MicrosoftMvcAjax.js") %>" ></script>

Now, this is one way of doing things out. This basically injects the Ajax script in onsubmit of the html form where the actual magic happens. Now, this is not the only way, you might need to do custom tasks before the submission takes place, like check if the user has written something before pressing the submit button or selected his country dropdown before pressing checkout in an air-ticket inventory system. For this kind of issue,  here is another cool way that it can be done.

function doAjaxSubmit(form, e, waitPanelId, targetToUpdate, methodName) {
    
    var isValid = true;
    
    if (typeof methodName != 'undefined')
    {
        var validate = Function.createDelegate(this, methodName)    
        isValid = validate(form, null);
    }

    if (isValid) {

        if (e == null) return false;
        
        Sys.Mvc.AsyncForm.handleSubmit(form, new Sys.UI.DomEvent(e),
        {
            insertionMode: Sys.Mvc.InsertionMode.replace,
            updateTargetId: targetToUpdate,
            onBegin: Function.createDelegate(form, function(sender, args) {
                $get(waitPanelId).style.display = 'block';
            }),
            onSuccess:
            Function.createDelegate(form, function(sender, args) {
                $get(waitPanelId).style.display = 'none';
            })
        });

    }
    else {
        return false;
    }
}

So, I have written a tiny JS routine that is a similar script that Ajax.Form injects in onsubmit event of html form but with few changes. As, we can see that I need to pass the form instance (this), event (in this case submit), the target where the update will be pushed in and a delegate method if provided it will process the submit only if it passes the validation written by the implementer.

In the FlickrXplorer : CommentsControl.ascx i have modified previous the html block like

<% 
IDictionary<string, object> formParams = new Dictionary<string, object>();
formParams.Add("onsubmit", @"return doAjaxSubmit(this, event, 'caWait', 'cmContainer', function(sender, args) 
{
    return validateRequiredText('errComment', 'txtComment');
});");

using (Html.Form("Comment", "AddComment", Microsoft.Web.Mvc.FormMethod.Post, formParams))
                    
{ %>

<%= Html.Hidden("photoId", photoId) %>
...
...

<% 
} %>

In this case, I have converted the Ajax.Form to Html.Form, where I have hooked the onsubmit with doAjaxSubmit routine with few parameters. Inside the call back method, I have written the required logic for validating required field. So, if people lefts the comment textarea intentionally blank and tries to do a post he might see.

 

Now, moving on to the next section, I would like to like see my pager do MVC form post but I would like to see a continue of parents parameters. Let's take the use case.

In other words, I need to delegate form action from parent to child. There are plenty of ways to do it. In my way, I have created a HtmlHelper extension method that prepares my child form with query params that come from the parent request.

public static string RenderRequiredFormPostElements(this HtmlHelper htmlHelper, string paramToExclude)
{
    string url = HttpContext.Current.Request.Path;

    StringBuilder builder = new StringBuilder();
    NameValueCollection queries = HttpContext.Current.Request.QueryString;

    foreach (string name in queries.AllKeys)
    {
        if (string.Compare(name, paramToExclude, true) == 0)
        {
            //skip
        }
        else
        {
            builder.Append(htmlHelper.Hidden(name, new {value = queries[name]}));
        }
    }
    return builder.ToString();
}

Here it renders html hidden elements based the current url, also I can pass in a particular query param (in this case "page") which I don't want to be processed. Finally, in the FlickrXplorer : Pager.ascx i have added the following lines

<form name="pagerForm" method="GET" action="<%= HttpContext.Current.Request.Path %>">

<%= Html.Hidden("page") %>         
<% = Html.RenderRequiredFormPostElements("page") %>             

...
...

Here, to include that  pager action is bound to the current url , which is in turn bound to an action in the controller class. Therefore, in this case Request.Path points to an action url /Photo/{action}  with paging value. Also, the possible action methods for which paging  value will be supplied need to handle the case if there is no paging.

That's all for now. All the example are shown here, ties to Asp.net MVC 5. You can find codes running at www.codeplex.com/flickrXplorer , please go to the source tab to grab the nightly build.

Enjoy !!!

In the past on Particletree, we’ve shared some of our favorite resources and guides for helping the color challenged and uninspired get their chromatic deliciousness on. As a designer, getting to choose the colors is often the part of the job I like the best. However, there are times when it’s nice to be able to write some code to help make some of the decisions for you.

One of my favorite implementations of using programming to supplement the color picking process was done by the clever Canadians over at Dabble DB. All you have to do is upload your logo and their application will automatically pick the colors based on the information contained in the image and create a theme for their web app that will match the logo.

It’s an impressive feature that helps the user focus on getting things done rather than worry over the details. While I won’t be going into all of the ideas they used to implement their feature in this article, I do want to take some time to talk about how you can get a legible contrasting foreground color for a piece of text when given a specific background color.

When we were working on the Wufoo Form Gallery, I wanted a way to represent the pre-made color palette themes in a concise format without having to go through the laborious process of making a screenshot for each one. After a lot of trial and error, the following format is what we came up with for the gallery to represent themes:

The problem that we ran into after coming up with a structure that we liked, was that the text inside each color swatch needed to have some sort of logic applied to it so that it would show legibly regardless of whether it was a dark swatch or a light swatch behind it. This is when we turned to color theory to help us out.

According to the W3C, when you’re evaluating your web site for accessibility, you should ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. How does one know if two colors will provide sufficient contrast? Well, the W3C, being the fastidious folks that they are, provide the following definition and formulas to make what seems subjective very quantifiable:

Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

Color brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Color difference is determined by the following formula:
(max (Red 1, Red 2) - min (Red 1, Red 2)) + (max (Green 1, Green 2) - min (Green 1, Green 2)) + (max (Blue 1, Blue 2) - min (Blue 1, Blue 2))

Techniques For Accessibility Evaluation And Repair Tools

And so, if you’ve got two colors and their color brightness difference is greater than 125 and the color difference is greater than 500, you’re in the clear. Unfortunately, the formulas are only a starting point. They can evaluate whether your colors are made to be together, but they can’t actually decide your colors. Thankfully, the Internet is filled with a number of wonderful people that have tackled the problem head on. One of our favorite solutions we looked at was created by Patrick Fitzgerald over at BarelyFitz Designs. His CSS Color Class allows you to refer to colors using abstract names like base and highlight, automatically generate color gradients from a single base color and also adjust the contrast of foreground colors so they can be legibly seen on top of background colors.

While the CSS Colors Class is great and comes highly recommended by us (we’ve been able to do some pretty neat experimental stuff with it that we’ll hopefully use in the future), we thought for our purposes in the gallery, it was a bit too much overhead. Eventually, we ended up creating our own Smarty Modifier plugin based on code we found in the PHP documentation on the hexdec function—boy, do we love that community. Here’s the code we came up with, which can be easily be rewritten if you don’t use Smarty in your development environment.

function smarty_modifier_contrast($hexcolor, $dark = '#000000', $light = '#FFFFFF')
{
    return (hexdec($hexcolor) > 0xffffff/2) ? $dark : $light;
}

It’s very simple and very lightweight, which was exactly what we were looking for in a solution for the problem. The way the code works is that given a hex color like #FFFFFF or #CCCCCC, it will return either the hex for black or white depending on what’s appropriate. You can also pass in variables for $dark and $light in case you want the function to return colors other than black and white. In our Smarty template, we call it in our markup structure like so:

<span class="palette">
    <var class="w" style="background-color:{$bgHtmlColor};
        color:{$bgHtmlColor|contrast}">W</var>
    <var class="l" style="background-color:{$bgLogoColor};
        color:{$bgLogoColor|contrast}">L</var>
    <var class="i" style="background:{$bgInstructColor};
        color:{$ftInstructColor}">I</var>
    <var class="f" style="background:{$bgFormColor};
        color:{$ftFieldTitleColor}">F</var>
    <var class="h" style="background:{$bgHighlightColor};
        color:{$ftFieldTitleColor}">H</var>
</span>

Notice that the code doesn’t take those color difference and color brightness formulas into account. Basically, it crudely (yet kind of elegantly) divides the RGB color spectrum into two halves and if the color you give it is on one side, it returns one value, otherwise, the other. Here’s a very rough visual approximation I mocked up to illustrate the concept:

And so while it’s not perfect, in 99% of cases, the function does what you need it to do without a lot of number crunching or programming overhead. Here’s an image showing off the function in action on a number of the themes we created in the gallery.

We’ve even recently reused the functionality when we made some upgrades to our graphing system in Wufoo. Now, our graphs automatically determine and use the appropriate color for the grid lines based on the background color a user has selected from their themes.

This way, the graphs are easy to read and follow even on a dark theme palette. It’s a small detail that we think makes a lot of difference in an application. If you want perfect contrast, then obviously CSS Colors is the way to go for you, but for us we’ve been really happy with the results.

I interviewed Louis Davidson in 2005 about the 2005 edition of his book. I did another one today about Pro SQL Server 2008 Relational Database Design and Implementation. You can check out the interview at the link below, you will enjoy it


Interview With Louis Davidson Author of Pro SQL Server 2008 Relational Database Design and Implementation

Earlier this week, David Heinemeier Hansson wrote a bit about why he thinks indulging in aesthetically pleasing tools should be a guilt-free experience. It was a response to a post by Matt Maroon on News.YC and if you’re interested, you should also check out Matt’s counter-response. Hoping to add to the discussion with our own flavors, we thought we’d point out some other reasons why you shouldn’t discount the role of aesthetics when deciding on what tools you should get.

Gavan Fitzsimons and Tanya Chartrand, professors of psychology and marketing at Duke University, did some research on the topic by subliminally priming over 300 subjects with either an Apple or IBM logo. They were then given a brick and asked to come up with as many uses for the brick as they could. The results of the study revealed that brands and our environment influence our thoughts quite a bit. Apparently, the subjects exposed to the Apple logo “generated significantly more unusual uses for the brick compared with those who were primed with the IBM logo.” You can watch the researchers talk about the study in the following video:

While Fitzsimons has focused some of his conclusions toward the marketing departments behind these brands, it’s more interesting for us to know that the personality of a company can influence and filter down to users by logo alone. And so the argument can be made that purchasing tools that are aesthetically pleasing and innovatively designed by companies with similar attributes can help inspire our subconscious to also want to create aesthetically pleasing and innovative software.

Here’s some anecdotal data that will help emphasize the point. J.J. Abrams, one of the creators of Lost, gave a talk at TED about why he’s so interested in the power of mysteries. A little after the 8th minute, he presents exactly why he uses Apple’s products when he writes:

I love Apple computers. I’m obsessed. So the Apple computer. The powerbook. It challenges me. It basically says, “What are you going to write worthy of me?” I can feel this. I’m compelled. And often I’m like dude, today I’m out. I got nothing.

J.J. Abrams - Mystery Box

Chris has written about this before in an article about the role of design in businesses, but the Japanese believe that all products should strive to have this inspirational quality in their work. In order to have a quality product or service, it needs to be created in a way that satisfies two different ideas of quality:

The first, atarimae hinshitsu, which is roughly translated as “taken-for-granted quality,” is the idea that things will work as they are intended. The second, miryokuteki hinshitsu, which means “enchanting quality,” is the idea that things should have an aesthetic quality that appeals to a person’s sense of beauty.

And if you’ve ever picked up a katana—a Japanese sword of the finest craftsmanship, then you’ll know exactly how this manifests. The thing to take away from this, of course, is not that Japanese products or Apple computers are the only things to use if you’re going to be innovative. It’s that context and environment matters in ways that people sometimes don’t even realize. Because humans are relationship-making creatures, we are emotionally influenced by the things we encounter over and over again and tools obviously fall into that category. And so, maybe, the choices we make regarding our tools shouldn’t come down to price alone. And maybe, as the developers of tools, we should strive to make products that inspire others with equal passion and energy.