Looking through some of the submissions on the site, I was struck by how… well… random most of them are. Without meaning to be rude, they just look like someone went through the list, randomly assigning colors. Many many programmers believe coding and graphic design are polar opposites – that if you’re a coder, you must necessarily suffer from “programmer art”, and hence that it’s pointless to ever try to learn better design skills. I completely disagree with this diagnosis.

I’m going to use only one design rule for this color scheme – consistency: keep similar things similar, and make different things different.

Basics

I’ve already decided to create a “dark” theme, so the background will be black. I also want to highlight important or dangerous elements of the source, and downplay incidental aspects. This idea will modify each of the colors chosen, and help suggest colors where there is no clear choice. Each choice will be reflected as far as is possible across many file types – for example, a C# comment should probably be the same color as an XML one, a JavaScript one, etc.

I’m also going to make use of color shades. I know Visual Studio has to cater for people using low-color displays, remote desktop, and those with reduced vision, but its use of primary colors leaves it looking a little dated. Color shades can be used to bring the look a little more up-to-date, and to group related elements, while still being able to distinguish between them.

Comments – Green

Comments have always been green in Visual Studio, and I’m going to keep them that way – a vibrant green, made bold, to catch the eye. (If comments aren’t important, then why are you writing them?) Comment hyperlinks and the text in #region blocks also match.

Literals – Blue

String literals are red in the standard Visual Studio color scheme, but I wanted to reserve that color for errors and the like. In my mind strings are blue (don’t ask me why) so I’ve chosen a light blue for strings.

With consistency in mind, what else should match this?

• String literals are blue, so why not other literals, such as integers? The common color will highlight “magic values” in code.
• We’ll need to colorize XML and HTML, so we can make attribute values blue too.
• JavaScript and SQL obviously have literals.
• I’ve also chosen to see CSS values as literals – they go blue too. (You could easily argue the toss about that though).

Keywords – Gray

Since the background is black, ‘unadorned’ text will be white – a nice easy choice. How about keywords?

I want to make them a different color – so I can tell when I’ve typed ‘retrun’ for the billionth time – but I don’t consider them to be “core” code. I think of them as scaffolding around my identifiers. (Perhaps I’m a LISPer at heart). I’ve chosen to keep them a neutral color, but a dimmer shade, so they fade out – hence gray.

Types – Yellow/Orange

Colorizing types is handy as it again allows me to see when I’ve mis-typed something. I want them to stand out (so a dim color is out), and I don’t want them confused with anything else – so reds, greens, and blues are gone. Yellows and light oranges seem a good choice – close enough to the normal white text, but sufficiently different to catch the eye. I’ve chosen a light orange for types, and highlighted interface types as yellow. (I figure that looking at how interfaces are defined and used is often a good way to understand the structure of a body of code – hence the slightly more eye-catching color).

(Oddly enough, this doesn’t seem to work for types in C++ – they always seem to come out white. Not sure why.)

Errors, Warnings, and Oddities – Red

This was an easy color to choose – red (for me) means stop and think. There are a few code constructs that I wanted to highlight as either dangerous or needing attention:

• Compiler errors and warnings;
• Preprocessor directives;
• Breakpoints.

Editor Overlays – Purple/Dark Blue

Visual Studio now highlights parts of the source depending on where youyr cursor is – it highlights matching braces, and will also display all usages of the symbol at the caret. These display can change rapidly, so shouldn’t be too distracting. I’ve chosen a dark purple, which is subtly visible, but which blends in with the black background.

We need a related color for the selection too, so I’ve chosen dark blue.

Omissions

There’s still quite a few entries in the colors list I haven’t filled out – the main areas being:

• VB.NET;
• XSLT
• IntelliTrace
• Test Coverage

If you fancy addressing these omissions and sending me back an updated settings file, I’ll be happy to credit you.

Conclusion & Download

So there you go. Obviously color schemes are very personal (and contentious). I think I’ve done a pretty good job; you might well think otherwise. Even if you don’t like this particular scheme, I hope you’ll agree that setting a few design principles in place before assigning colors can help you choose (and use) the colors effectively.

Sadly there’s no way to upload my settings to StudioStyles, and I’m too lazy to re-do all the work by hand. Until they allow that option, I’ll host the settings from here:

Download hackification.vssettings

Save this file somewhere, then use Tools -> Import and Export Settings… to merge them in.

Let’s suppose we want to represent an arithmetic operation on two numbers – such as plus, minus, multiply, etc. We could represent that operation as an enum (although to be clear – I don’t think you should):

enum ArithmeticOperation
{
  Add,
  Subtract,
  Multiply,
  Divide
}

We could then define a function to apply this operation to two numbers (highlighting will be explained later):

int ApplyOperation(ArithmeticOperation op, int x, int y)
{
  switch(op)
  {
    case ArithmeticOperation.Add: return x + y;
    case ArithmeticOperation.Subtract: return x - y;
    case ArithmeticOperation.Multiply: return x * y;
    case ArithmeticOperation.Divide: return x / y;
    default: throw new InvalidOperationException();
  }
}

That’s… sort of fine – but what happens when we want to extend it?

Adding Operators: No Compile-Time Checking

Let’s consider what happens if we want to add another operator – say exponentiation. If we add the enum value but forget to implement the switch case value, everything compiles fine. It’s only once we come to run the code, and actually hit that code path, that we discover the mistake, giving a run-time exception.

Adding Methods: Bad Code Organisation

Next, imagine what happens if we need to add more methods that switch on this enum. We might need a method returning the operator symbol, and another returning the operator precedence.

string GetOperatorSymbol(ArithmeticOperation op)
{
  switch(op)
  {
    case ArithmeticOperation.Add: return "+";
    case ArithmeticOperation.Subtract: return "-";
    case ArithmeticOperation.Multiply: return "*";
    case ArithmeticOperation.Divide: return "/";
    default: throw new InvalidOperationException();
  }
}

int GetOperatorPrecedence(ArithmeticOperation op)
{
  switch(op)
  {
    case ArithmeticOperation.Add: return 10;
    case ArithmeticOperation.Subtract: return 10;
    case ArithmeticOperation.Multiply: return 20;
    case ArithmeticOperation.Divide: return 20;
    default: throw new InvalidOperationException();
  }
}

I’ve highighted the relevant code for the “add” operator. Notice how it’s spread all over the place. Switch statements might group by operation, but they split by concept – and that’s the exact opposite of what’s usually intended with OO coding.

A Better Way

I’d suggest a better way of approaching this problem is to use an abstract class.

abstract class ArithmeticOperation
{
  abstract int ApplyOperation(int x, int y);
  abstract string GetSymbol();
  abstract int GetPrecendence();
}

class AddArithmeticOperation : ArithmeticOperation
{
  override int ApplyOperation(int x, int y)
  {
    return x + y;
  }

  override string GetSymbol()
  {
    return "+";
  }

  override int GetPrecedence()
  {
    return 10;
  }
}

// ...and so forth for the other operators.

That way, all the code for each operator sits in the same place, and adding any new methods for an operator requires all operators to be implemented before the code will even compile.

When to Use Enums

So if enums should be avoided, why do most languages include them? Personally I’d be happy without them,  but I can think of one possible reason you might want to use an enum. If you’re defining a public interface designed for consumption by other coders, you could argue that simplifying the interface at the expense of the code inside is a valid trade-off.

(I’m going to use C# in my examples here: some of these points might not apply to all languages. By default, an assertion will not fire in a C# release build, and furthermore, the code inside will not even be executed).

Update 2009-06-11: I probably haven’t been clear enough, but luckily various commenters have picked up on this: I’m not advocating removing assertions and replacing them with nothing! In general, I think assertions should be replaced with a stronger check that also runs (or can run) in a release build.

1. Pointless Guard Checking

Unfortunately in my coding travels I see quite a bit of code like this:

void Foo(Bar bar)
{
  Debug.Assert(bar != null);

  bar.DoSomething();
}

What’s the point? If bar is null, then using it will throw an exception anyway. Why add unnecessary lines of code that make reading harder?

2. Bad Argument Checking

But, you’re thinking, what if the usage is separated from the assignment?

class Foo
{
  public Foo(Bar bar)
  {
    Debug.Assert(bar != null);

    _bar = bar;
  }

  public void Method()
  {
    _bar.DoSomething();
  }

  private Bar _bar;
}

True, you want to catch the error as it happens, not later on in the method. But shouldn’t you be throwing an ArgumentNullException instead?

3. Difficult Detective Work

So now you’re telling me that you’re not writing component code, and the only client of this class will be the application it’s embedded in. Why not save some effort and skimp on the checking code, and make it debug-only?

Fine idea… until you get a crash report from one of your users, and the stacktrace points to a NullReferenceException in Method(). Now you have to figure out where the null value got passed to the constructor… a potentially much more difficult task.

4. Differences Between Debug and Release

If you’re like me, you generally run the applications in debug. Your customers however, run in release. Why make the differences between these two versions any bigger? Even if you don’t intend your debug statements to change program state, it’s all too easy to accidentally do so:

• Running lazy-initializers or singleton constructors;
• Loading data from the database via an ORM;
• Moving data in or out of a cache;
• Running static constructors.

5. Too-Shy Sanity-Checking

Sometimes, despite the above warning, you really do have sanity-checking code that you’d like to run in a development or test environment to catch regressions, but which is too slow to give to general users. (I read somewhere that Excel has two computation engines: a simple, slow, reference one, and a fast, parallel, release one. Testers can run the two in parallel, and any differences are automatically flagged as errors).

So you might be tempted to do something like:

Debug.Assert( SlowlyAndCarefullyVerifyInternalState() );

The problem I have with this is that the debug/release division is way too blunt.

• Suppose a tester wants to test a release build, but also perform the sanity-checking?
• Suppose a customer finds a bug in a complex calculation, and you want them to run the checks?
• Suppose a developer wants to debug performance issues in the non-checked code?

I would suggest you move the conditionals for code like this to a (possibly hidden) configuration setting. Someone wants to run in slow-and-safe mode? No problem, just tell them the registry setting (or whatever). By all means, change the splash screen or title bar or whatever so it says “test mode”.

The advantages of this method are:

• Anyone can turn it on and off;
• Sanity-checking can be controlled at a much finer granularity than all-on / all-off.

6. Is It Recoverable, Or Not?

The final argument against debug assertions concerns just exactly what an assertion means.

To my mind, an assertion is different to a simple flow-control test (“did the user enter a valid number?”), which is something the program can (should) handle. By definition, an assertion is checking for a disallowed state. An assertion doesn’t check for incorrect data; it checks for an incorrect program. Continuing after an assertion leads to undefined behaviour.

So how can you continue? More to the point, why should a user even be allowed to continue? If the state really is unrecoverable, then fail. Fail fast, log the error, and bail (possibly trying to allow the user to save work, or whatever). Having a release-build application continue after what would have been an assertion is just plain wrong.

“I think there’s a world market for about 5 computers.”

- Thomas J. Watson, Chairman of the Board, IBM, circa 1948

“It would appear that we have reached the limits of what it is possible to achieve with computer technology, although one should be careful with such statements, as they tend to sound pretty silly in 5 years.”

- John Von Neumann, circa 1949

“But what is it good for?”

- Engineer at the Advanced Computing Systems Division of IBM, commenting on the microchip, 1968

“There is no reason for any individual to have a computer in his home.”

- Ken Olson, President, Digital Equipment Corporation, 1977

Wise words indeed.

You need to learn when you know you don’t know enough, sure. It’s easy to pick up a book when you’re feeling clueless. The more dangerous time is when you think you do know enough. Coding (and computer science) is like the Red Queen’s Race: you need to run as fast as you can just to stay still.

• When was the last time you bought or borrowed a technical book?
• When was the last time you bought or borrowed a technical book, and then actually read it?
• When was the last time you bought or borrowed a technical book, and read it, where it was of no immediate use to your job?

Leave your comfort zone. Admit your ignorance. Learn something new. Learn something useless. Because next year, you might be kicking yourself for calling it useless. Don’t tell me that what you know now is all you’ll ever need to know. Don’t get quoted in next year’s list.

If you liked the quotes above, you might also be interested in “A Double Handful of Programming Quotes“.

One common example (that we make use of heavily in EasyAs123Web.com) is using a handler to serve and generate images on-the-fly. Our user images are stored in the database, and are immutable – they never change. Hence we’d like the client browser to cache the image returned.

Example Handler

Let’s start with the shell of a generic handler, MyHandler.ashx.cs:

public class MyHandler : IHttpHandler
{
  public void ProcessRequest( HttpContext context )
  {
    ...
  }

  public bool IsReusable
  {
    get
    {
      return true;
    }
  }
}

Further code will go where I’ve marked with ellipses.

Reponse Headers

For some reason, ASP.NET automatically adds headers that stop the browser from caching the content, and you can’t just override them. Instead, you’ll need to clear them all out first:

context.Response.ClearHeaders();

Next we want to mark the content as fully cacheable, and expiring at some date in the future:

context.Response.Cache.SetValidUntilExpires( true );
context.Response.Cache.SetCacheability( HttpCacheability.Public );
context.Response.Cache.SetExpires( DateTime.Now.AddMonths( 1 ) );
context.Response.Cache.SetLastModified( DateTime.Now.AddMonths( -1 ) );

(I’ve marked the content as expiring in a month, but you could easily add a year or ten years or whatever).

If you are able to calculate some form of hash for your content (which you should be able to do pretty easily), you can add an ETag:

Guid hash = ...;

context.Response.Cache.SetETag( "\"" + hash.ToString().Replace( "-", "" ) + "\"" );

Finally, there’s one more trick which is incredibly useful for allowing browsers to avoid re-downloading the content.

Browsers may include the “If-Modified-Since” request header. If you ignore this header, no problems occur: you just send the content as usual. However, you can use it to inform the browser that your content hasn’t changed since the last time it was requested.

If your content really hasn’t changed, instead of sending a “200 OK” response with all the content, you can send back a “304 Not Modified” without any content whatsoever:

var textIfModifiedSince = context.Request.Headers["If-Modified-Since"];

if( !string.IsNullOrEmpty( textIfModifiedSince ) )
{
  context.Response.Status = "304 Not Modified";
  context.Response.End();

  return;
}

So instead of sending back a potentially large piece of content, you can send back just the tiny response headers.

You can do a similar trick with “If-None-Match” – I’ll leave that as an exercise.

Debugging

Making these changes is all very well, but can you be sure that your changes are actually having the desired effects?

There are two great tools you can use to actually view the requests sent by the browser, and the response sent from your web-app:

• For debugging with Firefox: Live HTTP Headers.
• For Internet Explorer: Fiddler 2.

If you care about the speed and bandwidth usage of your ASP.NET application, I’d say that these two are pretty much indispensable. You’ll want to test with both: different browsers make subtly different requests, and interpret the responses differently.

You might also want to use YSlow for Firebug: this has some nice graphical displays of page assets.

Example – Content Not In Cache

Request and response, some lines omitted for clarity.

GET /!!/_Serving/StaticFile/Style/Pro/Images/HomeCreate.jpg HTTP/1.1
Host: www.easyas123web.com

HTTP/1.x 200 OK
Cache-Control: public
Content-Type: image/jpeg
Expires: Mon, 01 Jun 2009 08:58:36 GMT
Last-Modified: Wed, 01 Apr 2009 08:58:36 GMT
Etag: "45403f772717d1c63c0b8774e4a124b7"
Content-Length: 20696
... 20K of content here ...

Example – Content In Cache

Request and response, some lines omitted for clarity.

GET /!!/_Serving/StaticFile/Style/Pro/Images/HomeCreate.jpg HTTP/1.1
Host: www.easyas123web.com
If-Modified-Since: Wed, 01 Apr 2009 08:58:36 GMT

HTTP/1.x 304 Not Modified
Cache-Control: public
Expires: Mon, 01 Jun 2009 09:03:51 GMT
Last-Modified: Wed, 01 Apr 2009 09:03:51 GMT
Etag: "45403f772717d1c63c0b8774e4a124b7"

Courier New has been around since 1955 – and that it’s been around so long is a testament to its readability. However since then, display technology has radically changed – I’d be amazed if you weren’t reading this article on some form of TFT panel, and if using Windows, with ClearType enabled.

Enter Consolas.  For the release of Office 2007, Microsoft commissioned a set of modern fonts, designed to be highly readable on screens that use ClearType: Calibri, Candara, Cambria, Consolas, Constantia and Corbel. Of that set, Consolas makes an excellent monospaced code font.

Here’s Courier New:

And here’s Consolas:

To my eyes, that’s a big improvement. You’ll notice as well that Consolas is slightly narrower, enabling you to fit a bit more text on the screen.

So where can you get it?

If you have Visual Studio, you can download it directly from Microsoft:

http://www.microsoft.com/downloads/details.aspx?familyid=22e69ae4-7e40-4807-8a86-b3d36fab68d3&displaylang=en

Or if not, it comes as part of the free Powerpoint viewer:

http://www.microsoft.com/downloads/details.aspx?familyid=048DC840-14E1-467D-8DCA-19D2A8FD7485&displaylang=en

Let’s start with an example graphic, Arrow.xaml:

<UserControl x:Class="WebImagesGenerator.Graphics.Arrow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Height="64" Width="64">
  <Canvas Width="64" Height="64">
    <Polygon Points="32,4 60,32 42,32 42,60 22,60 22,32 4,32"
      Fill="Red" Stroke="Black"
      StrokeThickness="3" StrokeLineJoin="Round" />
  </Canvas>
</UserControl>

That’s just a standard XAML file, nothing fancy there.

Rendering WPF content to an image is really easy; you use the RenderTargetBitmap class. I wanted to be able to produce a strip of images, all the same except rotated, that can be used as CSS sprites. For my actual web application, I have a quick console application that generates the images as a batch. If I ever change the XAML files, I can quickly re-generate all the auto-generated images in my project just be running my console application.

Let’s get started on the console application:

[STAThread]
static void Main( string[] args )
{
  var arrow = new Graphics.Arrow();

  SaveStrip( arrow, GenerateSeries( 0, 360, 10 )
           , "..\\..\\Testing\\arrows.png" );
}

WPF must be run in a [STAThread] context. I create an instance of my graphic, then call my SaveStrip routine. GenerateSeries simply returns an array of integers:

static int[] GenerateSeries( int start, int end, int step )
{
  var series = new List<int>();

  for( var v = start; v < end; v += step )
  {
    series.Add( v );
  }

  return series.ToArray();
}

The real magic happens in SaveStrip:

static void SaveStrip( FrameworkElement fe, int[] angles, string filename )
{
  var outer = new Canvas();

  outer.Width = fe.Width * angles.Length;
  outer.Height = fe.Height;

  outer.Children.Add( fe );

  outer.Arrange( new Rect( 0, 0, outer.Width, outer.Height ) );

  var bmp = new RenderTargetBitmap
    ( (int) fe.Width * angles.Length
    , (int) fe.Height, 96, 96, PixelFormats.Pbgra32 );

  for( var i = 0; i < angles.Length; ++i )
  {
    var transforms = new TransformGroup();

    transforms.Children.Add
      ( new RotateTransform( angles[i], fe.Width / 2, fe.Height / 2 ) );

    fe.RenderTransform = transforms;
    fe.SetValue( Canvas.LeftProperty, i * fe.Width );

    // The following line is VITAL!
    outer.Arrange( new Rect( 0, 0, outer.Width, outer.Height ) );

    bmp.Render( fe );
  }

  var encoder = new PngBitmapEncoder();

  encoder.Frames.Add( BitmapFrame.Create( bmp ) );

  using( var stream = File.Create( filename ) )
  {
    encoder.Save( stream );
  }
}

When I first tried this technique, all my output bitmaps were completely blank. After debugging for a while, I realised that all my graphics were of zero size. You MUST call Arrange() on your elements before calling Render(), otherwise they won’t have been laid out properly.

When run, this console app produces the following (reduced in size to fit):

Fantastic! To get a better idea of how such images might appear in a web-page, I’ve created a little HTML+jQuery demo to see a very quick example of the images in use:

View Demo

Stage One: No Access Control, Massive Pollution

My first JavaScript files looked a lot like this:

function myPrivateMethod()
{
  ...
}

function myPublicMethod()
{
  ...
  myPrivateMethod();
  ...
}

My functions were just dumped straight into the global context, “polluting” it, and there was no kind of access control – all methods could be called from anywhere.

Stage Two: Coding-Convention Access Control, Minimal Pollution

My next strategy for defining function was to create a single object in the global scope, then add functions as properties of that object. I still hadn’t figured out access control, other than by using a naming convention:

if (typeof MyNamespace == 'undefined') {
  MyNamespace = {};
}

MyNamespace._privateMethod = function() {
  ...
}

MyNamespace.publicMethod = function() {
  ...
  MyNamespace._privateMethod();
  ...
}

While this is better than before, it’s still not true access control.

Stage Three: Access Control, Plus Namespaces

The latest way I’ve discovered for arranging code gives namespaces and true access control.

var MyNamespace = window.MyNamespace || {};

MyNamespace.MyModule = function() {

  var privateMethod = function() {
    ...
  };

  return {

    publicMethod : function() {
      ...
      privateMethod();
      ...
    }

  };
}();

I’d seen examples like the above back when I first started coding JavaScript, but I don’t like cargo-cult-copy-paste code: if I don’t understand code, I don’t use it. It’s taken me this long to understand every line in the above. Now that I do, I can start to refactor my existing code where necessary to use this pattern.

The interesting points in the above code example are:

• The first line is a much more compact way of determining whether the single global variables is defined already (for example from another code file), and if it’s not, creating it.
• The ‘module’ property is assigned from the immediate invocation of an anonymous function. This anonymous function returns an object whose properties are the functions we want to make public.
• The private functions are created as inner functions of the outer anonymous function. The public functions retains access to these private functions via the magic of closures.

It continually amazes me how the JavaScript langauge manages to allow a developer so many features (in this article I’ve covered public/private and namespaces), without needing to include them as first-class keywords in the langauge.

One problem I’ve had with this subject is the rather mathematical explanations given. Wikipedia says that “…a closure is a function that is evaluated in an environment containing one or more bound variables. When called, the function can access these variables“. Unfortunately that doesn’t exactly ‘speak’ to me, so I thought I’d present a code-based example.

The Problem

Let’s say we have a web-page, containing a table, where the rows are identified by an identifier. (This is pretty common – displaying one row on the webpage for each row in a database table). On each row are delete links, and when clicked, they open an AJAX dialog in the webpage, confirming the deletion. When the user clicks ‘OK’ in the dialog, the row with that ID is deleted.

Pretty standard stuff hopefully. I’m going to omit loads of details to make this shorter – the dialog isn’t even vaguely modal, and there’s no cancel button, and the deleting won’t work.

ASP.NET AJAX

So let’s start with an ASP.NET AJAX solution. Here’s my ASPX page (minus the boilerplate stuff like the UpdatePanel):

<asp:Repeater runat="server" ID="_repeater">
  <HeaderTemplate>
    <table>
      <tbody>
  </HeaderTemplate>
  <ItemTemplate>
        <tr>
          <td><asp:Label runat="server"
                Text='<% #Container.DataItem %>' /></td>
          <td><asp:LinkButton runat="server" Text="Delete"
                OnClick="_deleteLink_Click"
                CommandArgument='<% #Container.DataItem %>' /></td>
        </tr>
  </ItemTemplate>
  <FooterTemplate>
      </tbody>
    </table>
  </FooterTemplate>
</asp:Repeater>

<div runat="server" id="_dialog" visible="false">
  <asp:Button runat="server" Text="OK" OnClick="_okButton_Click" />
</div>

And here’s some of the code-behind:

protected void Page_Load( object sender, EventArgs e )
{
  _repeater.DataSource = new[] { 1, 2, 3, 4, 5 };
  _repeater.DataBind();
}

protected void _deleteLink_Click( object sender, EventArgs e )
{
  var linkButton = (LinkButton) sender;
  var id = int.Parse( linkButton.CommandArgument );

  _dialog.Visible = true;

  // Store 'id' somehow.
}

protected void _okButton_Click( object sender, EventArgs e )
{
  _dialog.Visible = false;

  // Retrieve 'id' somehow and delete the row.
}

The problem occurs between the event handler for the delete link, and the event handler for the OK button. Getting the ID from the row is easy, but we need to get the value to the handler for the OK button.

There are solutions of course – we could store it in a hidden field of the dialog, or in the view state – but there’s a big disconnect there. The scope of the OK button click handler is completely different to the scope of the delete link handler.

jQuery AJAX

I’m now starting to feel that ASP.NET AJAX is great for quick intranet applications, but for “real-world” internet applications, it’s better to do more of the work client-side, ‘by hand’.

The ASPX I’d use is very similar to the previous example – instead of ASP.NET click handlers, I’d add classes and ids to attach metadata to the table:

<asp:Repeater runat="server" ID="_repeater">
  <HeaderTemplate>
    <table>
      <tbody>
  </HeaderTemplate>
  <ItemTemplate>
        <tr>
          <td><asp:Label runat="server"
                Text='<% #Container.DataItem %>'
                CssClass="data-id" /></td>
          <td><a class="action-delete" href="#">Delete</a></td>
        </tr>
  </ItemTemplate>
  <FooterTemplate>
      </tbody>
    </table>
  </FooterTemplate>
</asp:Repeater>

<div id="delete-dialog" style="display: none;">
  <input type="button" value="OK" id="delete-dialog-ok" />
</div>

(Of course you could generate the appropriate HTML with any HTML templating system).

Before I get to the interesting jQuery bit, I also need to define a handler – Delete.ashx – which will process the jQuery AJAX call:

public class Delete : IHttpHandler
{
  public void ProcessRequest( HttpContext context )
  {
    var id = int.Parse( context.Request["id"] );

    // Delete the row here.

    context.Response.ContentType = "application/json";
    context.Response.Write( "{}" );
  }
}

That is admittedly more work than hooking an ASP.NET event handler. (You’d probably want to check the request was a POST somewhere in there too).

Now for the interesting jQuery bit:

$(function() {

    //
    // When the user clicks a delete link...
    //

    $('.action-delete').click(function() {

        //
        // Find the ID in the row,
        //
        var rowId = $(this).closest('tr').find('.data-id').text();

        //
        // Show the delete dialog,
        //
        $('#delete-dialog').show();

        //
        // And attach a click handler to the OK button,
        // and when that is clicked...
        //
        $('#delete-dialog-ok').click(function() {

            //
            // Initiate an AJAX POST, and when it succeeds...
            //
            $.post('Delete.ashx', { id: rowId }, function() {
                //
                // Unbind the OK button click, and hide the dialog.
                //
                $('#delete-dialog-ok').unbind('click');
                $('#delete-dialog').hide();
            }, 'json');
        });
    });

});

That’s real magic. The ‘rowId’ local was created on the first ‘delete link’ click, but it remains available to the handler for the second OK button click.

The interesting thing here is that I haven’t had to pass or manually store the ID anywhere. When the user clicks on an ‘action-delete’ link, I find the ID value, show the dialog, and then just attach a ‘click’ handler to the dialog OK button. Because the ‘click’ handler is inline, it has access to the variables in its parent’s scope.

The other advantage to doing this this way, which has nothing to do with closures, is that the manual jQuery AJAX version doesn’t talk to the server with every click, only on the final one. ASP.NET AJAX will chat to the server as the user clicks the delete links, giving a slightly slower feel.

The basic difference is this:

• Deadlines come from external sources, for example, “Feature X needs to be ready for the summer trade show”.
• Estimates come from internal sources, for example, “Feature X will take me N weeks to complete”.

Generally, the sales/marketing department will create deadlines, and the development team should create estimates. Note that word ‘should’ there – I’ll talk about what happens if that’s not the case in a moment.

Generally, problems only occur if the deadline is shorter than the estimate. Let’s face it, if the deadline is six months away, and you estimate the task will take three months, then so long as your estimate is roughly accurate, then there’s not going to be too much stress. (Of course, you really ought to use the remaining spare months constructively).

If the deadline is shorter than the estimate however, then that’s when the problems start. Here’s a few hints to help ease this situation:

1. Hint for managers: Let the person doing the work create the estimate

In many programming environments, the same person creates both deadlines and estimates: the programmer is given a task with the words “you have N weeks to complete this”. This is bad for two reasons: one, the task is unlikely to be completed in the allocated time, thus missing the deadline, and two, the programmer is likely to feel stress and loss of motivation. Basically, you’re fooling yourself, and telling the developer you don’t think they’re capable of estimating.

If you’re the sort of manager who does this, it’s important to understand that even if you don’t let the programmer give a formal estimate, they will have an informal one in their head anyway, so they’ll know from the outset whether they feel able to hit the deadline. Impossible goals are demotivating and lead to reduced performance.

2. Hint for managers: Don’t override an estimate with a deadline

If you ask for an estimate (and you should), and it isn’t what you want, don’t just overrule it by saying something like “well it has to be done sooner”. This is another sure route to demotivation. If you don’t like the answer, the only real options are:

• Ask the developer for a more accurate estimate (but this is only an option if you have reason to believe the estimate is inaccurate – see points 3 and 5 below);
• Ask (or force) the developers to work overtime;
• Trim features;
• Or of course, miss the deadline.

If these options all seem a little confrontational, that’s because they are: you can either admit that, and work towards a compromise in a professional manner, or you can pretend otherwise, and end up in an abusive, passive-aggressive, or just plain nasty stance.

3. Hint for developers: Respect for your estimates only flows from accurate estimates

If you’re a programmer in the situation above, the best way to convince management that you should be making the estimates (and that they’re worth anything) is to provide accurate estimates. If you always significantly over- or under- estimate the time required, there’s no incentive for the manager to stop providing their own (inaccurate) estimates.

4. Hint for developers: Accurate estimates come from tiny tasks

Use divide-and-conquer to estimate times. The finer-grained the tasks are, the more accurate the estimates are. Split the entire task into sub-tasks of no bigger than a day. This forces you to really think about what’s involved in coding each task. The shorter the task, the more accurate your estimate will be. If each of your sub-tasks are a week (or longer) in length, you’ll likely be way out.

5. Hint for developers: Review your estimates after the event

Don’t just “fire and forget” your estimates. At the completion of the task, review what areas you were and weren’t accurate with. Make a note of your ongoing accuracy: when your boss challenges your latest estimate you’ll have cold hard evidence that your estimates are accurate.

6. Hint for marketing: Explain the reason for the deadline

So often, a deadline comes down from on high with no reason, with no added explanation other than a threat should the deadline be missed. Developers wonder what all the fuss is about, and management can’t understand why the programmers aren’t working extra hard. Result: no-one is happy.

Hopefully, there’s a good reason for the deadline – so tell everyone. If you’re worried you’ll lose a big sale if the new version isn’t ready soon, then explain that. If the only thing stopping a major customer using your product is one or two last features, then explain the situation: X thousand dollars profit if the features are coded in a timely manner, or no extra profit if your competitor gets there first.