HTML5 and CSS3 in Visual Studio 2010

As a web developer looking to stay current, I’ve been trying to do all of my personal projects in HTML5 and CSS3 for some time now. In fact, browser support is generally outstanding. Unfortunately, the lack of tooling support has made it a bit more difficult. But, now that’s all changed.

Assuming you’re running Visual Studio 2010 SP1, you can download and install the Web Standards Update for Microsoft Visual Studio 2010 SP1, which will add IntelliSense support for the latest updates to HTML, CSS, and JavaScript.

In case you’re looking for more information: here’s a link to the announcement, and a link to Scott Hanselman’s demo of the release.

The Transformation Priority Premise

I just read the most brilliant new idea that I’ve seen since I learned TDD and Refactoring ten years ago. Naturally, it comes from the brain of Uncle Bob Martin. It’s called “The Transformation Priority Premise.” I’ll describe it briefly here. But, if you want to really understand it, you should go read Uncle Bob’s blog yourself:

Ok… So, what is the Transformation Priority Premise?

If you are familiar with Test Driven Development, you know the phrase “red, green, refactor.” That phrase encapsulates the process of writing tests before you write the code:

  • Red = Write a failing test and watch it fail.
  • Green = Write just enough code to make the test pass.
  • Refactor = Remove any duplication in the code without changing it’s behavior (all tests should still pass).

And, if you’re familiar with Martin Fowler’s book “Refactoring,” you know that a refactoring is a simple change to the structure of the code that is guaranteed not to change the behavior of the code. These are things like:

  • Introduce Variable – Replaces a constant with a variable.
  • Extract Method – Extracts one of more lines of code from one method into another (new) method.
  • Rename – Renames a variable, method or class.

These changes are so easy to implement that we can actually build tools that do them for us. Visual Studio comes with a handful of built-in refactorings. ReSharper adds significantly to that list.

What Uncle Bob is proposing is that there are similarly simple “Transformations” that change the behavior of a code base. Furthermore, he states that there is an order or priority in which we should apply these transformations – from simple to complex. He proposes the following (admittedly incomplete and probably mis-ordered) list:

  • [] –> nil
  • nil –> constant
  • constant –> constant+
  • constant –> scalar
  • statement –> statements
  • unconditional –> if
  • scalar –> array
  • array –> container
  • statements –> recursion
  • if –> while
  • expression –> function
  • variable –> assignment

Don’t worry if that doesn’t make any sense. I really just blogged it so I’ll have a quick reference. But, what’s cool about them is that they can actually help us pick which tests we should write in what order. For example, if we decide to write a test that requires us to add an if statement to our code, that test requires the “unconditional –> if” transformation. Knowing that, we can try to think of other tests that rely solely on transformations higher up the list.

The ultimate reward is that by writing our tests using transformation priority order, we should not ever get to a point where one test causes us to rewrite an entire method. Furthermore, because these transformations are all relatively simple in and of themselves, smart tools vendors may be able to build support for them directly into tools like ReSharper.

I’ve probably just confused the heck out of you with all this. Suffice to say that Uncle Bob’s posts are excellent. They include source code that he uses to show you how not using the priority order causes pain, and how using the priority order resolves that pain.

What are you waiting for? Go read those posts!

(Oh, and for those of you unfamiliar with Uncle Bob’s work, he references something called a Kata several times. The term comes from martial arts. It refers to a movement that is practiced over and over and over until it becomes second nature. Think “wax on, wax off”. Uncle Bob is a big fan of solving the same problems over and over and over to gain new insights into the potential solutions. And, he’s published several Katas ranging from calculating a bowling score to identifying prime factors of an integer. They’re worth your time, too.)

ReSharper Tip #123: Creating new classes and moving them to their own file

As I was writing all the source code for my last post, I relied heavily on ReSharper: first to generate classes for me, then to move them to a new file named the same thing as the class. This is a particularly handy technique if you practice Test Driven Development. Here’s how:

When I write a test, I write the whole thing, even though some of the classes may not exist, like this:

image

By placing my cursor on the class name (the red text) and pressing ALT+Enter, I receive the following ReSharper menu:

image

This generates the class in the same file as the test fixture. This is convenient at first. But, it’ll be impossible to find later, so I use ReSharper to move the class to a new file, again by placing the cursor on the class name and pressing ALT+Enter:

image

Which results in this:

image

Me like!

Reason #467 to use ReSharper: Live Templates

I just learned to use ReSharper’s code snippet feature, called Live Templates. I was looking for a code snippet to generate an NUnit test method. Oddly, despite ReSharper’s support for running NUnit tests, they didn’t see fit to include an NUnit test snippet. (Instead they included templates for the xUnit framework [Fact] and [Theory] methods, so I guess we know what framework they’re using.) So, I just created my own. Here’s how:

Step 1: Open ReSharper’s Live Templates dialog from the ReSharper menu in Visual Studio.

image

Step 2: Navigate to the folder where you’d like to add a Live Template and click the New Template button: (For me, this was the C# folder under the User Templates folder.)

image

(ALT+PrtScn didn’t capture the mouse pointer, but you get the idea.)

Step 3: Give your Live Template a shortcut and description, then enter the same kind of snippet code that you’d put in a traditional Visual Studio code snippet.
image

Step 4: Save your new Live Template and turn it on by selecting the checkbox next to it in the Templates Explorer dialog.

image

(Again, ALT+PrtScn didn’t capture the mouse pointer, but you get the idea.)

So, now, assuming I’m using ReSharper’s IntelliSense (to check go to ReSharper / Options / IntelliSense / General), I can create a test simply by typing “te” and selecting my Live Template from IntelliSense.

image

Sure, you could do all of this in Visual Studio, without ReSharper. In fact, Visual Studio 2010 includes a code snippet to generate tests in their syntax (where [Test] becomes [TestMethod]). But, you would have had to hand edit the snippet XML. Plus, ReSharper also includes Surround Templates (i.e. “surround the selected code in an if/for/try statement, please”) and File Templates (to create that new Test Fixture classes with all the correct NUnit using clause and [TestFixture] statement, for example).

To paraphrase Red Green: If your peers don’t find you handsome, they should at least find you handy.

WCF Service Configuration Editor

So, I’ve been working on a small WCF service for a while now. Everything was going well. I had a suite of tests that ran just fine when I ran the service locally. I built an installer using WIX. And, blamo! When I installed the service on a DEV server, I started seeing all kinds of strange errors. Apparently, the service web.config and the client app.config that worked locally aren’t sufficient once you leave the safety of localhost.

And, as it turns out, those config files are horrendously complex. Fortunately, there is a tool to make editing those files a little easier: The WCF Service Configuration Editor. This tool, which is available on the Tools menu in Visual Studio 2008, gives you a GUI for editing the <system.serviceModel> node of a web.config. Here’s what it looks like:

WCF Service Configuration Editor

Granted, it’s not the most intuitive thing to use. And, I’ve only used it this one time. But, it sure took the hand out of hand-editing the web.config for the WCF middleware service.