I originally created hackification.com as an addon domain and WordPress installation to an existing cpanel account, which was hosting a different site. The original domain was coming up for renewal, and I decided to let it expire, since it wasn’t really doing anything much.

Unfortunately I’ve since found out that cpanel really doesn’t like having its primary domain changed – Fantastico basically stopped working correctly and would leave me with files with permissions set to ’0000′ – unmodifiable by me.

In the end I decided just to start again: I asked my hosting company to completely trash and recreate my hosting. I’ve now restored from backups, which is a bit of a hassle:

1. Recreate the WordPress installation as closely as possible;
2. Import a previously exported WordPress XML file (which restores all the posts and comments);
3. Restore my “uploads” directory (which contains all the images referenced in my posts);
4. Restore various downloads directories (which contain various assets and demos);
5. Restore the custom theme I designed (the blue/orange one you can hopefully see);
6. Finally, try to remember my various WordPress and WordPress plug-in settings (particularly Akismet, since as soon as the blog went live the spam started appearing).

If I had to provide advice, it would be:

• Backup everything, in various ways (eg WordPress export, plus entire directory dumps, plus even screenshots of settings);
• If you’re planning to use a single cpanel to host multiple domains, make sure the primary domain is one you want to keep forever – it could even be a cheap-as-possible domain that no-one but you ever sees.

I was also very lucky with my hosting company, webhosting.uk.com: I’m not paying very much (£60 per year), but they were very quick getting me back up and running, and provide good service in the evenings (which is the only time I get to work on my blog), so thanks guys.

As coincidence would have it, I noticed a SitePoint article regarding WordPress backups: Keep Your Blog Safe: Back Up Your WordPress Installation. Hopefully that might be of use to anyone else with a cpanel blog to manage.

Smart, and Gets Things Done

Joel Spolsky’s 2006 article “The Guerrilla Guide to Interviewing” is a real classic that’s since been made into a book. He argues that there are two things to look for when interviewing, and that a candidate needs to have both attributes – having just one is as bad as having neither.

“Everybody gives lip service to the idea that people are the most important part of a software project, but nobody is quite sure what you can do about it. The very first thing you have to do right if you want to have good programmers is to hire the right programmers, and that means you have to be able to figure out who the right programmers are, and this is usually done in the interview process.”

Read Joel’s Article: The Guerrilla Guide to Interviewing (version 3.0)

Done, and Gets Things Smart

Steve Yegge’s 2008 response article reminds us that recognising smarts (in ourselves and others) isn’t even necessarily possible. He suggests that the best approach to hiring is finding “seed” employees (although obviously being able to identify them is a Catch-22 situation). To find them you either need to be lucky, or perhaps home in on them via word of mouth.

“How do you hire someone who’s smarter than you? How do you tell if someone’s smarter than you? This is a problem I’ve thought about, over nearly twenty years of interviewing, and it appears that the answer is: you can’t. You just have to get lucky.”

Read Steve’s Article: Done, and Gets Things Smart

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 sure most web developers know about image rollovers (using separate images for normal and “hover” states of anchors). Hopefully also the use of “CSS Sprites” is becoming better known – combining the normal and rollover images into a single physical image file to speed up load times and reduce flicker. I won’t cover those techniques here.

However, if you want the anchor or button to size to its contents, it’s more difficult to make use of these techniques. Here’s one way.

(The final result – view demo).

Start With Markup

Before diving into fancy techniques, get the markup down as you would like it, if you didn’t have to style anything.

<a href="..." class="rollover">Button Text</a>

Ideally we want the markup to be clean and not compromised by styling requirements.

Handle Degradation Gracefully

My technique is going to make use of JavaScript, so let’s handle the case where the user has it disabled for some reason. Here’s some very basic CSS to give the button a simple style:

a.rollover
{
  background-color: #00f;
  border: solid 1px #000;
  color: #fff;
  font-weight: bold;
  padding: 4px;
  text-decoration: none;
}

a.rollover:hover
{
  background-color: #008;
}

Add Styling Naively

Next, I’m going to add some rollover styling – but in a way that isn’t complete. Firstly I created a simple rollover image, but made it very wide – it needs to be at least as wide as the widest button is ever going to be:

I’m going to define my rollover styling against a class selector of “extra” – you’ll see where that comes from in a moment.

a.rollover.extra
{
  background: url(buttons.png) repeat-x left 0;
  border: none;
  height: 27px;
  padding: 23px 40px 10px 40px;
  position: relative;
}

a.rollover.extra:hover
{
  background-position: left -57px;
}

Note that we’ve had to undo some of the styles applied previously, such as border.

We’re kind of getting there, but our buttons won’t look correct on the right-hand-side.

Use JavaScript To Add Styling Markup

To fix the right-hand end-caps, we need to modify our markup. However, I really don’t want to have to do that on my pages – afterall, I might change my mind about the site styling.

Here I recommend using JavaScript to tweak at runtime the markup to what we need. I’m going to use jQuery for this:

$(function() {
  $('.rollover')
    .addClass('extra')
    .append('<div class="cap"></div>');
});

Basically, when the pad is ready, I find all elements with class “rollover”, add another class (“extra”), and append into the rollover button an empty span element which has a class of “cap”.

That class “extra” triggers the image rollovers. The “cap” span can be styled as follows:

a.rollover.extra .cap
{
  background: url(buttons.png) no-repeat right 0;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}

a.rollover.extra:hover .cap
{
  background-position: right -57px;
}

And voila!

If you’d like to see this technique in action, please view the demo.

Unfortunately, it seems that installing Internet Explorer 8 (IE8) sometimes has some adverse affects on other applications. Here’s how to fix this.

The problems we’ve experienced following installation of IE8 have been:

• Windows Explorer opens folders in new windows, even if you have “Open each window in the same folder” checked;
• “Open in new tab” doesn’t work in IE8;
• Can’t connect to databases using SQL Management Studio Express 2008 (”Unable to cast COM object of type ‘System.__ComObject’ to interface type ‘Microsoft.VisualStudio.OLE.Interop.IServiceProvider’. Exception from HRESULT: 0×80004002 (E_NOINTERFACE)”).

The solution is pretty simple:

1. Go to Start -> All Programs -> Accessories, right-click “Command Prompt”, and choose “Run as Administrator”.
2. OK the user access warning dialogs.
3. Enter “regsvr32 actxprxy.dll”.
4. Reboot.

Simples! No more tearing my hair out.

(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.

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

The problems we’ve experienced following installation of IE8 have been:

• Windows Explorer opens folders in new windows, even if you have “Open each window in the same folder” checked;
• “Open in new tab” doesn’t work in IE8;
• Can’t connect to databases using SQL Management Studio Express 2008 (“Unable to cast COM object of type ‘System.__ComObject’ to interface type ‘Microsoft.VisualStudio.OLE.Interop.IServiceProvider’. Exception from HRESULT: 0×80004002 (E_NOINTERFACE)”).

The solution is pretty simple:

1. Go to Start -> All Programs -> Accessories, right-click “Command Prompt”, and choose “Run as Administrator”.
2. OK the user access warning dialogs.
3. Enter “regsvr32 actxprxy.dll”.
4. Reboot.

Sorted! No more tearing my hair out.