Friday, December 14, 2012

Bad UX Experience: MD MVA (2 for 1 deal!)

I know this comes as a shock to nobody, but MD's don't-call-it-the-DMV "Motor Vehicle Association" isn't the easiest to get around.

However, this one was a little puzzling.

Bad UX Example

While attempting to fill out a change of address form on the web site, the new address is given only one line (no "street 2") address. And to make matters worse, the address is limited to only 30 characters.

So, if you have a long street name and/or live in an apartment, this field will be a joy for you to fill out.

Even better: Since I had to get creative with the symbols in the name, I shortened the "BLVD" in my new street address to "BVD" (only way I could still fit the apartment in). It then tried to get me to accept the USPS standardized version, which either cut the apartment number's 3rd digit off, or cut out the "BLVD" portion entirely.

Eventually, I had to force it to use the original, so now it will read "BVD", and I'm sure it's only a matter of time before I'll have to get that corrected.

Additional Bad UX Example

While writing this blog post, I attempted to link to the change of address form, so I right-clicked on the link titled "change of address form" and chose to copy the URL. When I pasted it just now, I got:

javascript:__doPostBack('ctl00$btnChangeOfAddress','')

Really? We're still doing postbacks on buttons this way? I guess the best way to avoid link rot is to make sure your link is never a link in the first place.

What can we as Developers Learn From This?

There are already great posts on falsehoods programmers believe about names, time, networks, geography, build systems -- It seems like one on addresses is long overdue. In the spirit of those posts, I'll begin one below based on my experience.

In the context of addresses, all of the following are wrong:

  • The street address will be less than 30 characters
  • The location will have a house number
  • The city will be less than 30 characters
  • The USPS address standardization will always be correct

Monday, December 10, 2012

How to: Quickly update an MVC4 project with Bootstrap LESS and FontAwesome [Field Notes]

Problem

I'd like to update my MVC4 project to use the following:
  • Bootstrap LESS source (Twitter.Bootstrap.Less nuget package)
  • FontAwesome instead of Bootstrap's icon set

However, this can be a pain for the following reasons:
  • Dotless and Bootstrap's LESS used to not play nicely together
  • The "@import" directives sometimes gave dotless an error and had to be worked around.
  • Font-Awesome's MIME types are not all recognized by the internal webapps

Solution

Thanks to the Excellent Twitter.Bootstrap.Less.MVC4 package by Christopher Deutsch, this process is a lot easier.

Install Bootstrap LESS and Dotless
  • Create a net ASP.NET MVC4 Web Project.
  • Open the package manager console.
  • Ensure that your MVC4 Project is set as the current project in the package manager
  • Install Chris's package by using the following command: "install-package Twitter.Bootstrap.Less.MVC4"
  • The project will automatically install dotless and Twitter.Bootstrap.Less.

Reconciling BundleConfig and Bootstrap.BundleConfig

  • If you have an existing BundleConfig.cs that you've made changes to, merge those changes into Bootstrap.BundleConfig. 
  • If you haven't customized it, you can just delete BundleConfig.cs as all the defaults are in Bootstrap.BundleConfig.cs.

Install FontAwesome
  • From the package manager, run "install-package FontAwesome"
  • In the Bootstrap.BundleConfig.cs file, add the font-awesome.css file to the StyleBundle so that the line reads as follows:
            var css = new StyleBundle("~/Content/css").Include("~/Content/site.less", "~/Content/font-awesome.css");
  • Open your twitter.bootstrap file and comment out the line importing sprites.less. FontAwesome and Bootstrap's sprites naturally conflict as FontAwesome is designed to replace them.

Update IIS Settings to allow FontAwesome's Static Content
  • Add the following to web.config in the <system.WebServer> section:

   <staticContent>
       <remove fileExtension=".svg" />
       <remove fileExtension=".eot" />
       <remove fileExtension=".woff" />
       <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
       <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
       <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
    </staticContent>

Ensure That Content is Processed on the Server
  • In Visual Studio, Select all files in the /less, /font, and /content directory and in the properties for the file, ensure that the Build Action is "Content" and the Copy to Output option is "Copy Always". This ensures that FontAwesome, Bootstrap, etc will show up in custom builds and when you package for IIS, etc.

References

How To: Stop "Access Denied" errors in MVC Intranet Applications VS 2012/IIS Express [Field Notes]

Problem
  • Using Visual 2012 and IIS Express
  • Building an MVC4 Intranet project
  • Authentication Doesn't appear to work; I always get an "Access Denied" screen on every page.

Cause

This happens because IIS Express isn't configured by default for Windows Authentication.


Solution
  • Run your project.
  • While it is running / showing you the error, find the IIS Express Icon in your system tray
  • Right-click the icon and select "Show all Web Applications".
  • Click on your web application.
  • Look at the "Config" property to find where your applicationhost.config file is stored.
  • Stop your web site and open that applicationhost.config file for editing.
  • Find the section where WindowsAuthentication enabled is set to "false" and change it to "true". Save the file.

References