Craig Shoemaker

7 Dos and Don'ts in Getting Started in User Centered Design

craigshoemaker — Tue, 23 Jun 2009 22:47:00 GMT

This week’s Pixel8 episode continues the series of user experience fundamentals with Dr. Tobias Komischke Director of User Experience at Infragistics. Tobias shares seven user-centered design concepts and the associated “dos” and “don’ts” with each point.

1: Orientation

Try to answer the three fundamental questions for every screen:
- Where am I?
- Where have I come from?
- What's next?
Employ UI patterns (often implemented by controls) to answer these questions
- Bread crumb and outlook bars do an excellent job of orienting a user

Don’t

Provide a blank context for a screen

2: Visual Attention

Group items that go together
Make important elements stick out using size and color
Use relative white space as a way to draw attention

Don’t

Give all visual elements the same “weight” in size and color
Use motion or animation unless you have a good reason to do so

3: Visual Structure and Flow

Think about how people consume visual information (often top to bottom and left to right)
Provide visual clues to guide users what to look at first, next and so on
Place controls that finalize actions at the end of the flow
Pay attention to consistent alignment
Try to adhere to established conventions

Don’t

Add components to a screen simply because there is space to fill
Place submit buttons at the top of a form - we’re looking at you, SharePoint :)
Require users add in un-necessary data

4: Scrolling & Paging

Employ paging when data is 3x or more larger than the available view area
Give ways for users to jump to specific pages when dealing with a lot of data

Don’t

Scroll horizontally unless you absolutely must
Scroll endlessly

5: Text

Vary font sizes to bring attention to important text
Choose font sizes that people can read

Don’t

Select text colors that are hard to read
Use text when it obstructs the meaning or a function of an operation – consider using an icon

6: Icons

Use icons to save screen real estate
Provide a legend to explain meaning of icons
Define tool tips to give context and meaning to icons

Don’t

Use icons to represent complicated concepts
Use icons inconsistently throughout the application

7: Graphs

Bar charts when possible
- Research indicates bar charts are easiest to interpret as the X axis doesn’t convey meaning relative to the value
Label chart scales
Use appropriate scale values

Don’t

Rely solely on ability of the user to interpret volumes
- For example, 3D pie charts may prove difficult to understand as volumes are difficult for users to rate

Reference Books

In the interview Tobias mentions a number of books that you may find useful when building data visualization screens:

jQuery Secrets with Dave Ward

craigshoemaker — Mon, 22 Jun 2009 13:53:00 GMT

Dave Ward specializes in writing about ASP.NET, jQuery and ASP.NET AJAX. He is a contributing author to ASP.NET Ajax in Action, Second Edition from Manning, Nerd Dinner’s JavaScript secret weapon, listed on the Programming homepage of Alltop and newly inducted ASP Insider.

Full Speed:	download
Fast Version:	download

Note: Be sure to check out the Fast Feed if your are looking for the same content in 3/4ths the time!

What is jQuery?

The jQuery movement is seemingly everywhere, but if you still remain curious what jQuery is, Rick Strahl has an excellent introduction to library here: An Introduction to jQuery.

The jQuery Wikipedia page tells us that jQuery contains the following features:

DOM element selections using the cross-browser open source selector engine Sizzle, a spin-off out of jQuery project

DOM traversal and modification (including support for CSS 1-3 and basic XPath)

Events

CSS manipulation

Effects and animations

Ajax

Extensibility

Utilities - such as browser version and the each function.

JavaScript Plugins

Dave’s jQuery Tips for Web Developers

Learn the selectors -they are crucial!
- :even and :odd – zebra striping is the classic example
- :not – Powerful when using classes as flags.
- :text – Often overlooked. Easier/cleaner than ‘input[type=text]’.
- attribute$=ID – One way to overcome the ClientID issue. (Be careful about performance)
Leverage CSS classes instead of element IDs
- Avoids the ClientID issue
- Good for selecting groups, like GridView rows.
Look for plugins before reinventing the wheel
- jQueryUI covers the basics
- plugins.jQuery.com for more
Conversely, be sure you need a plugin
- Classic example is using an accordion when slideToggle is all you really needed.
- Similarly, a lot of people don’t realize they can use $.each()
Don’t be afraid to use fake CSS classes as “flags”
- Blackjack game example: .card.flipped and .card:not(.flipped)
Write Unobtrusive JavaScript
- ASP.NET conditioned us to think OnClientClient and Attributes.Add is proper, but wiring up unobtrusive event handlers is much cleaner and more maintainable
  - $(‘#element’).click() is the same as $addHandler($get(‘element’), ‘click’) in ASP.NET AJAX
- Anonymous functions are the norm in most jQuery code examples. Nothing to be scared of. More syntactical sugar than anything
Use Firebug
- The inspect and console help you learn faster
- IE8’s developer toolbar works pretty well too
Take advantage Bookmarklets
- jQueryify – inject jQuery into any page, for testing through Firebug
- SelectorGadget – Very helpful for learning selectors interactively
Minify and Combine your scripts
- When using many plugins, you’ll end up with the same “bloat” that is often associated with ASP.NET AJAX (due to the Toolkit, not the base library)
- Read Automatically minify and combine JavaScript in Visual Studio
Boost Serving Time
- Use the Google hosted version of jQuery for public facing sites
Take advantage of JavaScript IntelliSense
- Get the jQuery vsdoc file
- Read Jeff King’s great FAQ detailing how common issues when configuring JavaScript IntelliSense
- If all else fails, just /// <reference path=”~/path/to/jquery-1.3.2.vsdoc” /> in a JS include

Other Resources Mentioned in the Show

New Features in ASP.NET 4 AJAX
Why ASP.NET AJAX UpdatePanels are dangerous
Controlling HTML in ASP.NET WebForms
jQuery 1.3.2 Cheat Sheet
dotnetIQ: Learn .NET on your iPhone
Polymorphic Podcast FastFeed
JsMag is offering a discount (listen to the show for the coupon code!)

NetAdvantage ASP.NET in ASP.NET MVC

craigshoemaker — Thu, 11 Jun 2009 17:01:00 GMT

When I reported for Infragistics booth duty at TechEd 2009 the first person to walk up to me smiled and said, “So... what do you guys have for MVC?” Now I am pleased to announce I can do more than smile back.

The following is a set guidance for working with the Infragistics NetAdvantage ASP.NET toolset in ASP.NET MVC. This guidance comes with articles (this being the first of many), how-to videos, a support forum, a downloadable sample application and a live version of the sample in the Infragistics Labs.

To be clear this is not a set of new controls created for MVC. The example you see here, in the videos and the sample application were built using the NetAdvantage ASP.NET 2009 Vol. 1 release of the toolset. What we are making available includes samples, guidance and a new control that helps decouple our server controls from WebForms dependencies.

As long as you focus on areas of the controls that do not initiate post backs or rely on ViewState, you soon find many behaviors and functions that work perfectly in an ASP.NET MVC application.

As what is presented here is the meeting of two widely different architectures, we encourage and look forward to you feedback and suggestions. Please feel free to tell us how our existing controls may work better in MVC as well as ideas for new controls to more naturally fit the MVC approach.

Respecting the Culture While Keeping it Real

Simply put - server controls were never supposed to work in the MVC framework. In fact, some might consider it a bit of an unholy union to have declarative WebForms markup in a view page. While you can’t help but respect the spirit of these perspectives, sometimes there are exceptions.

We recognize that there are many thousands of existing Infragistics customers who may want to use ASP.NET MVC. These developers want to get the most out of their investment by using the toolset wherever possible, regardless of the type of application they are building. Therefore Infragistics is extending the reach of our traditional toolset while looking toward the future of building some new controls that do not rely on ViewState or post backs.

Brace yourself - the examples that follow include ASPX markup in the view. The markup is necessary to host WebForms controls in MVC, but the purpose is limited. The purpose of this code serves to merely instantiate the UI objects on the page. What you do not see are big blocks of logic in the UI – separation of concerns is preserved.

In the end what the markup is fulfilling an equivalent role of HtmlHelper extension methods.

Hello World

To get you acquainted with what’s involved, consider a page that has an instance of the WebDataGrid that renders a list of contacts to the user.

View Model

This class simply models the data that the view page needs to render correctly. A list of Person types is expected in the People property.

public class WdgBasicView
{
    public IList People { get; set; }
}

Controller

The controller creates a new instance of the view model and fills the object with the appropriate data objects.

public class WdgController : Controller
{
    public ActionResult Index()
    {
        var vm = new WdgBasicView();
        vm.People = FakeRepository.Create().Add(10).GetAll();
        return View(vm);
    }
}

View

The markup for the WebDataGrid is just like what you are accustomed to find in a WebForms page. Having this markup on the page gives you the flexibility to easily change the appearance and behavior of the control.

Notice the declaration of the IGMvcScriptManager control. This control is responsible for interrogating any Infragistics controls on the page for the script references the ASP.NET AJAX ScriptManager would normally generate. The script references are then generated and emitted to the page. This control must be placed after any Infragistics controls in the markup so the controls are available in the DOM by the time the references are rendered.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcTest.Models.WdgBasicView>" %>
<%@ Register Assembly="Infragistics.Web.Mvc" Namespace="Infragistics.Web.Mvc" TagPrefix="cc1" %>
<%@ Register Assembly="Infragistics35.Web.v9.1, Version=9.1.20091.1015, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI.GridControls" TagPrefix="ig" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <%
        wdg.DataSource = this.Model.People;
        wdg.DataBind();
    %>

    <ig:WebDataGrid ID="wdg" 
        runat="server" Width="50%" 
        EnableViewState="false">
    </ig:WebDataGrid>
    
    <cc1:IGMvcScriptManager ID="sm" runat="server" />
    
</asp:Content>

Adding Behavior

While the grid produced above is interesting, the real benefit comes when you begin to add some of the behaviors of the grid. Adjust the markup slightly by adding the following behaviors, and now your users may interact with individual grid cells on the client and adjust the column width.

<ig:WebDataGrid ID="wdg"
    runat="server" Width="50%"
    EnableViewState="false">
    <Behaviors>
        <ig:ColumnResizing />
        <ig:Activation />
    </Behaviors>
</ig:WebDataGrid>

Watch the Video

This above sample is implemented in this video.

The Next Step: Issue Tracker Sample Application

To go beyond the simplicity of the Hello World sample above, we’ve created a sample issue tracker application that brings together a number of the Infragistics controls with ASP.NET MVC.

You may get acquainted with the sample in the following ways:

The first page you encounter is the Issue List page. The WebDataGrid is responsible for rendering the table, and the WebChart control creates the pie graph visualizing the Issue Severity data.

To add issues to the list, the New Issue page features the WebDropDown, WebHTMLEditor and WebSlider controls.

The drop down has a list of the Issue Types available to the user. These types are presented in the drop down with a custom item template.

The Issue Types are maintained on a page that include the WebDataGrid with the RowEditTemplate enabled.

By double-clicking on the left-most column of the grid you have access to the grid’s data for editing.

By clicking on the Add button, the same template is made available to add items to the list.

For a more in-depth code review of the sample application watch the video on the Infragistics Community Site: Issue Tracker Sample: Using the WebClient Controls in ASP.NET MVC.

Support and Testing

There is no official support through the Infragistics Developer Support for the toolset in MVC at this time. We do, however, have a new support forum available for your questions surrounding NetAdvantage for ASP.NET in ASP.NET MVC.

Let Us Know

Please let us know what you think! Leave comments here, email me at cshoemaker [at] infragistics.com, or find any other to get in contact with us. We want to know about your experiences with this approach as well as your suggestions for new controls that more naturally fit the MVC model.

Resources

Surprising Ajax Adoption Stats

craigshoemaker — Mon, 25 May 2009 14:52:00 GMT

My friend Simone Chiaretta is hosting a short poll looking to find out what type of Ajax adoption exists and what client frameworks and tools you use.

He has an interesting post on some of the preliminary results. According to his sample 8% of people are still hand-crafting Ajax calls! (Now there's one that took me by surprise)

Make your voice heard and take his super-short survey here:

http://www.zoomerang.com/Survey/survey-intro.zgi?p=WEB22973CYKW2H

AutoMapper with Jimmy Bogard

craigshoemaker — Wed, 20 May 2009 17:49:00 GMT

Jimmy Bogard, lead developer for the AutoMapper project, joins us today to discuss the inner workings and applications of the object-to-object mapper AutoMapper.

AutoMapper is an object-to-object mapper that helps you prepare objects to cross application boundaries.You can get examples and documentation on Jimmy’s post that introduces AutoMapper.

Resources

Here are some further resources to help you get started with AutoMapper:

DimeCast: Introduction to AutoMapper
Official project home: www.codeplex.com/AutoMapper
AutoMapper and IoC

Tribute

If you wish to stick around after the end of the show I’ve included a special tribute to my friend Monica Rodriguez. Monica is the wife of Sol Rodriguez who’s band Greenleaf Avenue provides bumper music for the show. Her battle with cancer recently ended and I wanted to do something special to honor her. If you would like to read her story and send some encouragement to Sol, please check out www.solandmonica.com.

History of User Experience

craigshoemaker — Tue, 19 May 2009 23:03:00 GMT

The dawn of user experience is a contestable topic. Some UX thought leaders place the discipline’s origin surrounding the emergence of user centered design in the 1980’s, while others see the the beginning coming even earlier. This week’s guest is Dr. Tobias Komischke Director of User Experience at Infragistics. Dr. Komischke details why he sees UX originating in the context of World War II where interacting with technical systems became a matter of life and death.

The Origins of User Experience

The Human Factors field began to emerge around World War II as researchers began to realize that humans interacting with technical systems was no trivial endeavor. Operators using technical systems, even when their lives depended upon accurate and reliable results, eventually hit obvious human limitations.

These findings lead to research asking:

What do human limitations mean for systems design?
How can systems be designed to help aid these limitations?

In the beginning the underlying principals of UX began as simple observations and as time passed the topic shifted from human factors to user-centered design.

Formal study of originated from many fronts. European and Scandinavian labor unions issued studies surrounding occupational health and ergonomic research. Corporations found interest in the field as efficiency and productivity gains became apparent when users required less training and shorter learning curves for technical systems. Initially research focused on related hardware, but eventually studies migrated the software focusing on making systems more individual, learnable, controllable and featuring increasingly pleasant user interfaces.

As computers proliferated the workplace in the 1980’s and 90’s user-centered design took on an even greater importance. Books by Don Norman (The Design of Everyday Things) and Jakob Nielsen (Designing Web Usability) found a wide audience and helped further explain the principles of user-centered design and and expose the tenants of usability.

Even with the popularity of usability taking hold, user experience as we know it today had yet to be established. Usability focuses on the UI being effective, efficient and satisfactory to the user. As more organizations adopted user-centered design teams began paying attention to details beyond usability. User experience began to include broader topics that include talk of user’s emotions, the appeal of a UI and visual design. User experience became an inclusive and broad set of disciplines that included the contributions from engineers, psychologists, designers and more.

In the end, the following disciplines represent the major set of professionals that make up the field of User Experience:

Engineers
Psychologists
User Research
Visual and Graphic Designers
Testers

UX for Organizations Big and Small

Often a discussion of user experience and the litany of disciplines that contribute to the field leave the impression that true UX are only for very large organizations. While those with bountiful resources can deploy all the different roles, smaller organizations may still carry out a user centered design process. What’s important is understanding the process is rather than hiring every role.

One of they keys that smaller teams should keep in mind is to not to start coding right away, but try to understand what they want to build before construction begins. Look at the market for existing applications/solutions and find out where the the user needs lie.

The T-Shaped Professional

Small teams find that even though they may not be able to hire all people to fulfill all aspect of a UX team, hiring the so called T-shaped professional helps even out competencies.

Minimum Team Composition

Often people ask about a starting place or the minimum roles required to have a bare-bones UX team. Tobias’ suggestion is to have at least:

1 analytical person
1 conceptual person
1 visual designer

Today’s design and technology trends require projects to have something cutting edge looking great very early in the process. These three roles put you in a very good position to start with the right concepts in mind. From there your team can learn new disciplines or hire team members to fill in the gaps.

Exploring ASP.NET MVC 1.0

craigshoemaker — Wed, 29 Apr 2009 15:20:00 GMT

Note: Be sure to check out the Fast Feed if your are looking for the same content in 3/4th the time!

Our Guests

Join Jeffrey Palermo and Eric Hexter as they discuss the release version of ASP.NET MVC and some practical examples real-world development.

Action Filters

Action filters are extensibility points into the lifecycle of a controller request. There are many great resources that show how to use action filters:

... and the following is a list of the interfaces you can leverage to tap into the requests:

Action Selectors

Another way to gain control over a request is to pipe into action selectors. This gives you control to decide if an which HTTP verbs an action accepts. For more information on configuring action selectors, check out the following posts:

Pain Points? We Don't Have no Stinkin' Pain Points!

When I asked Jeffery and Eric what the remaining pain points of ASP.NET MVC were, I got a surprising response – none. Since the framework is interface-based
top-to-bottom features are pluggable at every level. If the framework doesn't provide something needed - you may extend any portion of framework when necessary.

After being pushed, Eric did mention that he would like to see areas in MVC. Areas will allow you to group controllers and they are likely to appear in MVC v2. For now Eric has extended Steve Sanderson’s implementation of areas (link is a Google cache link since the site seems to be having issues lately).

ASP.NET MVC in Action

Jeffrey Palermo, Ben Scheirman and Jimmy Bogard bring you the upcoming ASP.NET MVC in Action from Manning:

Headspring Development Stack

The guys at Headspring Systems have a full stack of open source software that they use to help start and support applications:

SolutionFactory: Visual Studio add-in that exports a solution into a multi-project template
Watin: .NET automated web application testing
AutoMapper: Object-to-object mapping strategy
Gallio: Test automation platform
MbUnit: Unit test framework
qUnit: jQuery unit test framework

Also on the Show

Why isn’t Learning ASP.NET MVC Pragmatic Advice?

Rob Conery and Joe Brinkman recently engaged in a lively conversation on the merits (and reasons) for learning the ASP.NET MVC framework. If you are not careful the exchange may sound a bit like a shouting match, but these guys seem to be pretty comfortable with one another. but in the end if you pull anything out of it, I think it’s best summed by by Rob:

You Should Learn MVC – not that you have to use it (although I wish you would – it’s tons of fun!)

The often hailed wisdom from page ‘Pragmatic Programmer’ states:

Learn at least one new language every year. Different languages solve the same problems in different ways. By learning several different approaches, you can help broaden your thinking and avoid getting stuck in a rut. Additionally, learning many languages is far easier now, thanks to the wealth of freely available software on the Internet.

While MVC is not a new language per se, but every ASP.NET developer should spend time with the framework – if not to use, then at least it to sharpen your development arsenal.

The Value of Web Forms and Design Constraints

craigshoemaker — Mon, 13 Apr 2009 21:49:00 GMT

Senior Principal of Product Ideation and Design at Yahoo! Inc. and founder of LukeW Interface Designs Luke Wroblewski joins us to discuss how adding elements of constraint helps shape the design process. Luke also spends some time discussing the often-understated value of the HTML web form.

What goes into a redesign of a Yahoo! property?

Define the strategic goals of the company
Make a list of core behavior, expected needs and features users can be delighted by
Add to list features user come to expect and must not be removed
Prioritize performance, accessibility, instrumentation and monetization requirements

Creative Process is Given Life By Constraints

Web pages may be crafted to do just about anything – the trick is to build build appropriate constraints. The design team may use targeted use cases or place necessary performance constraints. Boxing the problem begins to help form the design process.

Art of removing Elements

When you are trying to get a message across you begin by adding elements. Often the design process turns a corner and you are adding information or design elements for the sake of the design. A better approach may be adding only the items necessary at a minimum to get the point across. If you can balance this practice with the business needs of the organization, you’ve found a winning design.

How to Manage Diverse Interests

The Yahoo! homepage has many stakeholders who want representation. The question developers and designer must grapple with is what is the right representation? During the early days at eBay many groups wanted to feature their deliverables at the point of sale. The design team ranked and prioritized features against the goals of the organization. This helped build consensus on what should and should not be in the final design.

The Value of Web Form Design

Luke tells us that every single defining characteristic of things you can do online is run through a web form. Whether you are looking to comment on an article, buy a product, sign up for a service, do some data entry, upload video or just about anything else on the web – you do it through a web form. In the end the form is a barrier to what people really want to do – interact somehow with the website. Therefore elegance in building an designing web forms is a necessity.

Check out Luke's book: Web Form Design: Filling in the Blanks

Gradual Engagement

Luke’s concept of gradual engagement encourages you not to hide your entire website behind a signup page. Rather us a conversational or natural flow of engaging with the user to gather profile information.

Update Controls: Leaving INotifyPropertyChanged?

craigshoemaker — Fri, 10 Apr 2009 22:25:00 GMT

Michael L. Perry is a software developer, architect, host of the Adventures in Software podcast and creator of Update Controls.

Update Controls is a framework available for WPF, WinForms and a few other formats that relieves developers from the heavy lifting of synchronizing UI controls.

In Michael’s words:

Update Controls is better than data binding, because it does not require that you implement INotifyPropertyChanged. It connects controls directly to CLR properties. And it works through layers of business logic.

Check out the videos and examples here.

Use jQuery to Decorate Links

craigshoemaker — Fri, 10 Apr 2009 20:55:00 GMT

I’ve recently been in the habit of decorating links to Twitter profiles with the Twitter icon. This technique makes it easy for readers to scan a page and know exactly where the link points without having to spend time hovering over or clicking on the link.

After creating the code for this a few times manually, I decided it was time to come up with something a bit more elegant. My enduring love for jQuery proved useful once again. The following code is just a few lines of jQuery code to add the Twitter icon to each Twitter link on the page.

<style type="text/css">
 .twitter-link
 {
     background-image:url(images/icons/fav-twitter.png);
     background-repeat:no-repeat;
     padding-left:20px;
 }
</style>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
     $(document).ready(function() {
         $("a").each(function() {
             if ($(this).attr("href").toLowerCase().indexOf("http://twitter.com") != -1) {
                 $(this).addClass("twitter-link");
             }
         })
     });
</script>

...

<p><a href="http://twitter.com/craigshoemaker">craigshoemaker</a></p>

Check out this working example

Obviously the uses for this approach don’t stop at Twitter. I first started using this technique for creating links to PDFs (which gives the user a heads up they may want to go walk the dog while they wait for their PDF reader to load).

What other uses do you see here?

Update 4/16/2009:

Fredrik Vig suggested in the comments the following much more elegant approach:

$("a[href^='http://twitter.com']").addClass("twitter-link");

Read the ^ like: target all links that start with http://twitter.com.

Secrets of Real World ASP.NET Dynamic Data Websites eBook Now Available

craigshoemaker — Wed, 25 Mar 2009 13:38:00 GMT

I am pleased to announce that Secrets of Real World ASP.NET Dynamic Data Websites is now available as a Wrox Blox ebook. The material for this book is largely pulled from the recent talks I’ve given at various user groups and developer conferences on the same topic.

In this book you learn the basics of Dynamic Data and quickly move into how to leverage the features in some practical scenarios. If you’ve ever looked at Dynamic Data and wondered:

How do I move the data context to a lower application level and out of the web layer?
How do I execute custom business layer logic against the Dynamic Data controls?
How do I build reusable and programmatically customizable field templates?
How do I secure Dynamic Data scaffolding using ASP.NET membership services?

... then this book is for you!

The price tag is reasonable – well under $10 – no too bad for a technology book!

If you are interested in the full talk, feel free to contact me ( @craigshoemaker or my contact page) and maybe we can work out a remote lunch-n-learn type presentation. Better yet, if you are local to Southern California perhaps we can work out something in person.

Enjoy!

Search Multiple Labels in Gmail

craigshoemaker — Wed, 18 Mar 2009 16:56:00 GMT

Yesterday I posted a podcast Digital Productivity Strategies for Developers where I talk about using Gmail for implementing the concepts found in the book Getting Things Done. I talk about not being able to search inside multiple labels and thus needing two accounts for managing “things to do”.

Just as I suspected I had missed something and Alberto and Dean Pendley were kind enough to point out that it’s easy to search multiple labels in Gmail...

Find Messages with Multiple Labels

Consider messages marked with the labels “personal” and “calls”. Finding your personal call list is as easy as typing the following Gmail’s search box:

l:personal l:calls

Should you want to find something specific within this list you simply add additional search terms at the end of the query. For instance if you want to find all the calls you need to make about bills labeled as personal you use:

l:personal l:call bills

Find Messages in Multiple Labels

If you are looking for messages in both labels, all you have to do is add the OR keyword. So looking for all your items labeled as personal and calls would be:

l:personal OR l:calls

It’s that simple!

Consolidation?

I still haven’t decided yet if I will consolidate my personal and work accounts based off this information. My concern is that this may be a lot of typing queries to make sure I am only looking at what I want. I will try it out with new personal projects and next actions for a while though.

Digital Productivity Strategies for Developers

craigshoemaker — Tue, 17 Mar 2009 17:15:00 GMT

Our Guest: Jean-Paul Boodhoo

Our special guest this week is Jean Paul Boodhoo who is a developer, trainer, and author specializing in .NET and Agile development. When I first heard about JP’s summer where he worked while traveling around the world after giving away the contents of his home – I knew I had to have him share how he did it.

Truly Going Paperless

While very few of us will have an opportunity to have such a grand adventure as JP and his family did his techniques are something we can all benefit from. In this show JP shares how he uses the following services to be 100% mobile keep a paperless office:

Earth Class Mail: global PO box with options to send parcels to wherever you are in the world
Neat Co: scanning, storing and working with receipts
eFax: for faxing documents via email
Skype: Unlimited
LiveMeeting: with active speaker switching for video conferences
UltraVNC: for remote pair programming

Getting Things Done

I got a copy of Getting Things Done for Christmas and quickly became energized by David Allen’s concepts. I discuss in the show how I use custom Gmail accounts and a defined workflow to implement the tenants of GTD. Gmail’s labeling, search, archive and starring features make a great way to keep track of projects and next actions.

Further I use the service, 3mindme to implement a digital ticker file (see the book for an explanation!). Finally, to keep the accounts accessible I use SlickRun to map each mail account to a different browser so I can keep each account authenticated… works like a champ!

If all of this is foreign to you I suggest you get a copy of the book for yourself and find out why the GTD concept is so practical.

Update: Some listeners pointed out how easy it is to search multiple labels in Gmail. I posted about it here: Search Multiple Labels in Gmail.

Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

craigshoemaker — Thu, 26 Feb 2009 14:36:40 GMT

Over the years I have spent a fair amount of time thinking about design patterns surrounding the presentation layer. Just as your values as a grown-up are often determined by experiences you have as a child – I think my interest in these patterns stem from frustrations I had as a newbie developer.

When I first started, I made my way onto a team developing software for a financial company. The obvious pre-requisites emerged: quality and accuracy were paramount to the success of the project, and the features and scope of the project were always expanding. The problem was soon I realized that the way this application was built would compromise our ability to deliver to the necessary standards.

The problems included:

Web pages with over 2,000 lines of code in Page_Load event method
A complete disregard for any attempt to automate testing
Un-extensible architecture

... and host of other issues pushed me to learn how to avoid these problems in the future.

A drive to push as much code of the the user interface layer seem to be a step in the right direction. While by no means a silver bullet, breaking apart the application would help bring some order to the chaos and provide a foundation for automated testing and application extensibility. The usual suspects for this kind of separation are Model-View-Controller (MVC) and it’s derivative patterns.

Presentation Models for XAML Applications

With the emergence of WPF, the change in architecture brought about a need to shift the approach of separation of concerns in the presentation layer. The approach of Model-View-Controller and it’s offspring were an obvious choice, but the existing models were required no small amount of shoe-horning to make a comfortable match for XAML applications.

Looking to apply a pattern with a more natural fit John Gossman helped popularize Model-View-ViewModel (MVVM) for use in WPF. (He and his team even went as far as to use the pattern while developing Expression Blend¹.) As WPF matured and Silverlight began to emerge, this time MVVM seemed like the go-to pattern, but resources with concrete instruction are few and far between.

Looking for Guidance

As with all the Model View * patterns, there usually follows a learning curve to anyone new to the approach. Therefore I set out to find a way to provide an "apples to apples" comparison of how to implement MVVM in both Silverlight and WPF.

I decided to create some long-form screencasts that will help teach the concepts of MVVM. I contacted Microsoft Program Manager Tim Heuer to tackle the Silverlight project and WPF Super Ninja Josh Smith to lead the way for a WPF implementation.

The charge was simple: create a quiz application that harnesses the power of MVVM. The result is the following two screencasts (each an hour in length) that dive into the details of using MVVM.

If you are new to Silverlight, WPF and MVVM, I suggest you begin by watching the Silverlight video first. Tim does a great job of explaining the pattern from the ground up and showing how all the dots are connected. Once you are a little more comfortable with the basics, Josh’s video attempts to take a more real-world looking domain model and prepare it for his WPF application with a clean ViewModel interface. Both are worth the time as each presenter did an excellent job of demonstrating their approach.

I hope you find them useful!

Resources

For further reading on Model-View-ViewModel:

WPF Apps With The Model-View-ViewModel Design Pattern by Josh Smith
Introduction to Model/View/ViewModel pattern for building WPF apps by John Gossman

Foot Notes

John describes this experience using MVVM while developing Expression Blend during a Pixel8 interview: John Gossman Architects WPF

2009 Southern California Code Camp Session Materials

craigshoemaker — Wed, 28 Jan 2009 17:25:33 GMT

I realize this is a little late, but I thought I would put up links for the session materials to whomever attended my 10 Secrets of Real World Dynamic Data Websites at the Southern California Rock n’ Roll Code Camp this year.

You can get the power point deck, database and code right here.

For those who expressed interest… the little “shortcut” utility I was using is SlickRun… I can not say enough good things about SlickRun!

Thanks again for those of you who came out – I hope to see you all again. I will keep you posted as I just submitted my first draft of an ebook for Wrox based off the types of material you saw in the talk.