Monday, April 21, 2014

Lean UX Manifesto, pdf version

Lean UX is a collection of practices for approaching the design of products and interfaces that draws from lean manufacturing, agile development, and the lean startup movement in its focus on core business-focused principles.

This article explains the core points of the movement and distills it down to 6 points in manifesto format.  I reads like the agile manifesto, talking about preferences, and I think these documents serve nicely as guides rather than checklist.

I wanted something I could post up on my wall next to Nielsen's 10 Usability Heuristics , so I took the manifesto text and turned it into something that I can pin up to my wall.  Hopefully it is useful to someone else.

Lean UX Manifesto, PDF

While I was at it, I did the same thing to the Agile Manifesto.

Agile Manifesto, PDF

EDIT: 4/26/2016

I couldn't find the PDF version of Nielsen's Usability Heuristics, so I re-created that as a PDF as well.

Nielsen's 10 Usability Heuristics, PDF

Wednesday, April 9, 2014

Exposing global libraries as module constants in angularjs

I want to use the awesome underscore library with angular.  Although you can just drop the library in your html file and reference the _ variable as a global, I wanted to pass it into my app's module with angular's dependency injection.  The main advantages here are:

1. Explicit definition of dependencies

Having the objects/services/controller/etc that something depends on defined makes it easier to re-use components elsewhere.  This helps avoid the annoying '_' is not defined type of errors, but also helps prevent some more subtle bugs if you are depending on a undefined global in a part of your code that doesn't get run very often.

2. Testability

If we inject underscore, we could mock it out or wrap it during a test.  This would allow us to do cool things like see how many times a certain underscore function was called.

How do you do this?  At first I read this article that discussed wrapping it in a factory.  This certainly works, but since angular has the nice interface for defining inject-able constants, I used that instead.  So all the code you need is:

var app = angular.module('MyApp');
app.constant('_', window._ );

Yep.  That's it.  And the first line is just to give you context.

To use this in a controller, do something like this:

app.service('MyService', ['_', function(_){
  // Your code goes here

Pretty simple.

Saturday, April 5, 2014

Fixing missing VCBuild.exe

From the yeoman generator for angular, when installing

MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe". To fix this, 1) ins
tall the .NET Framework 2.0 SDK, 2) install Microsoft Visual Studio 2005 or 3) add the location of
the component to the system path if it is installed elsewhere.

These instructions may be useful when encountering less helpful messages about a missing "VCBuild.exe" file in other programs.

You can download the .NET framework v2.0 SDK here.
You can download the Visual C++ 2005 ISO from the link in this blog post.

Then you can use this utility from Microsoft to mount the iso image and run the installer.  To mount the ISO, follow the instructions in the README extracted from the utility.  Make sure to run the Virtual CD ROM Control Panel executable as administrator.

I had problems with permissions with that utility, so I took the easy way out and just burned the Visual Studio ISO to a disk.  VirtualCloneDrive probably would have worked but I didn't feel like messing with it.  After all, this is just a step toward configuring a development environment...

I received a few errors about compatibility issues when installing for both Visual Studio 2005 and MSSQL Server Express.  I ignored those and continued with the installation.  The files of interest were placed in C:\Program Files (x86)\Microsoft Visual Studio 8\VC.  I also noticed vcvarsall.bat (a file that gets referenced many times when trying to compile components on Windows) was just one directory up at C:\Program Files (x86)\Microsoft Visual Studio 8\VC.  I added both to my PATH.

After those steps, everything worked fine.


I ran into this same problem on another machine, and found this solution for installing the 2008 Express Edition of Visual Studio.  Follow the link and run the installer.  This worked as well as installing the 2005 edition but was much faster.

Note that this second solution just installs a 32 bit compiler.  Also it may be necessary to install a different version of the compiler depending on the version of python you are running.

Wednesday, April 2, 2014

Backbone View Event Types

Today I read through Derick Bailey's excellent post on memory management in Backbone view code.  I was a bit confused by all the different ways to register and un-register events and what they were all for.  Specifically I was confused by his close() method, used to clean up view events.

Why was unbind() needed in addition to remove()?   Why was stopListening() not needed?

So I put together a simple guide for myself.

After putting this together the code makes more sense.

You do need to call unbind() in addition to remove() because remove() handles DOM events and unbind() handles Backbone events.

You don't need to call stopListening() because unbind() catches everything stopListening() would catch.  You don't need undelegateEvents() because jquery's remove() removes all of the events on that DOM element for you.

Hope that helps.