Managing Client Expectations with Code

Gentlemen! Part of design driven development is that actual coding doesn’t begin until the user interface has made its way through the design phase and is now XHTML and CSS.

From there, you likely begin to build out the application in iterative milestones. One issue you quickly run across with this is that it can be difficult for all members of the project team, including clients, to separate out what on the page they are looking at is implemented, and when something that isn’t yet implemented will be.

Well, in an attempt to solve this problem we’ve recently started to visually flag blocks of page elements that are not yet implemented. This way, its clear not only when something isn’t done, but when it’ll be done. After using this for a little while, and seeing success, we’ve abstracted out the functionality into a plugin, called MileMarker.

MileMarker

MileMarker adds a helper for marking page elements with the milestone they are slated to be developed, and makes them unable to be interacted with.

Usage

Once the plugin has been installed, in your views you can now do:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<fieldset <%= mile 6 %>>
  <h3>
    Payment details
  </h3>
  <fieldset class="radio">
    <h3>
      Credit card
    </h3>
    <label class="radio" for="cardType3B">
      <input id="cardType3B" name="card3" type="radio" />
      Mastercard
    </label>
    <label class="radio" for="cardType3C">
      <input id="cardType3C" name="card3" type="radio" />
      Visa
    </label>
  </fieldset>
  <label for="cardNum3">
    Card number
    <input id="cardNum3" name="cardNum3" type="text" value="Card number" />
  </label>
  <label for="expiry3">
    Expiration date
    <input id="expiry3" name="expiry3" type="text" value="City" />
  </label>
  <input class="submit" type="submit" value="Submit my details" />
</fieldset>

When viewed in development mode (or any other environment you specify), the person div would be overlaid with a translucent gray box with the words “Milestone 6” in it, as shown below.

If you happen to not call your milestones, “milestones”, or for any other reason want the label to be something differently, just supply a string instead:

1
2
3
4
5

<fieldset <%= mile "Next Week" %>>
  <h3>
    Payment details
  </h3>
  ...

And that will result in the marker being labeled with “Next Week” instead.

Installation

To install, in your RAILS_ROOT run:

svn export http://svn.thoughtbot.com/plugins/mile_marker/trunk

Check out the project page and the documentation for more information and examples.

MileMarker is an abstraction of something we’re actively putting into practice here, and we’re looking forward to your thoughts on it.