---
title: Managing Client Expectations with Code
teaser: Introducing the mile marker plugin.
tags: web,rails
author: Chad Pytel
published_on: 2007-08-02
---

![''](http://images.thoughtbot.com/ui/2007-8-1-50197712.JPG)

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 <abbr title="Cascading Style Sheets">CSS</abbr>.

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:

```erb
<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.

![''](http://images.thoughtbot.com/assets/mile_marker_example.png)

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:

```erb
<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:

<kbd>svn export http://svn.thoughtbot.com/plugins/mile_marker/trunk</kbd>

Check out the [project page](https://github.com/thoughtbot/mile_marker) and the
[documentation](https://github.com/thoughtbot/mile_marker/blob/master/README.rdoc)
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.