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.

.NET Reflector: Your personal X-Ray machine

Have you ever run across a situation where you were trying to debug some code, but you hit a wall when you ran into an object that you don’t own? Happens to me more often than I like. And, before I learned about .NET Reflector, I was stuck using debug.print statements on either side of the object call to figure out what was going on inside.

.NET Reflector changes all that. Need to see the code for an object you don’t own? Crack open any .NET assembly with reflector.exe and disassemble the code. Here the disassembly of a method from a WCF service I wrote recently:

image

You can even use this tool to disassemble objects in the .NET Framework!

Plus, .NET Reflector includes a Visual Studio add-in that lets you debug into this disassembled code! So, no more debug.print. Just follow the flow of execution right on into that code you don’t own. Who knows, you may even find someone else’s bug in the process of solving your own!

ReSharper: Don't use Visual Studio without it!

According to IntelliBrains, ReSharper is:

the most intelligent add-in for Visual Studio 2005, 2008 and 2010 that provides a rich set of features to boost individual and team productivity in the world of .NET development.

Ooo! Marketing speak! Allow me to translate:

ReSharper is a Visual Studio add-in that adds over 70 features to the development environment. I linked directly to the feature list on the ReSharper web site, because there are just way too many for me to cover here, and they do a good job of showing you the salient points of each feature. But, I would like to point out a few of my favorite features: (I borrowed the images from the ReSharper web site to save me the time.)

Code Analysis

As I type, ReSharper is analyzing my code, looking for several things:

  • Errors (“that code won’t compile”),
  • Warnings (“that code may cause a null reference exception at runtime”),
  • Suggestions (“the type of that parameter can safely be changed to its parent class”), and
  • Hints (“your code might be easier to read if you invert that if statement”).

ReSharper Hint

This, to me, is the single most valuable feature of ReSharper. I would not code nearly as fast without it.

Navigation & Search

ReSharper offers several “Go To” tools that will significantly speed up your navigation of your code:

  • Go To Type (CTRL+N) takes you to any type in your solution, even by typing just the upper case letters (a feature JetBrains calls “CamelHumps”):

ReSharper Go To Type

  • Go To File (CTRL+SHIFT+N) takes you to any file in your solution – a huge help on huge projects.
  • Go To Symbol (CTRL+SHIFT+ALT+N) takes you to any method or variable in your project.

Refactorings

Here’s a picture of a small subset of the refactoring support in ReSharper:

image

One particularly interesting one in that list is “Use Base Type where Possible…” which is a very good habit. Using abstract classes and interfaces allows you to break coupling in your code. I could write several blog posts about just this one refactoring. Admittedly, though, my use of the refactorings tends toward smaller scale things like “Extract Method” and “Inline Method”.

 

Code Generation

Advocates of the agile practice called Test Driven Development (like myself) have long derided Visual Studio for offering to write unit tests for code that already exists, but not offering the opposite feature – generating method stubs from tests that were written before the code existed. ReSharper fills that gap quite nicely:

ReSharper method generation

If you do TDD in Visual Studio, this feature alone will pay for ReSharper. (And, if you’re not doing TDD, why not?)

Coding Assistance

Here’s a feature I didn’t even know existed until I started writing this article. It’s called “Complete Statement” and it automatically completes the current statement.

When you reach the end of a statement, like this:

ReSharper Complete Statement 1

Simply press CTRL+SHIFT+Enter and ReSharper completes the statement, and places the insertion point exactly where you’d want it, like this:

ReSharper Complete Statement 2

I think I’ll be trying that one out later today.

Code Cleanup

Ever open a file and discover that whoever created it had their tabs set to 2 spaces, making the text too dense and the indentations too shallow for you to quickly grasp the structure of the document? ReSharper can help you there, too. Simply press CTRL+ALT+F to format the file using your preferred format settings.

Code Templates

ReSharper completely replaces the rather limited Visual Studio “Code Snippets” feature with their own Live Templates feature. Here’s an example of their “foreach” template at work:

ReSharper foreach Template

Notice that ReSharper knew which object you were likely to want to iterate over. Very smart. Very useful. To access the feature, press TAB after typing in the name of a live template, in this case “foreach”.

Unit Testing

ReSharper automatically detects NUnit and MSTest-based unit tests in your projects and allows you to run them directly within the Visual Studio user interface. The runner is not perfect – JetBrains doesn’t always quickly add support for new features as they are added to the unit test frameworks. For example, ReSharper 4.5 does not support the NUnit [TestCase] attribute for creating data driven tests. But, I rarely use the [TestCase] attribute when doing TDD tests, which is primarily how I use the unit test runner.

In Conclusion…

If I still haven’t convinced you to take a look at ReSharper, I recommend taking a look at their website before writing it off completely. There are so many useful features that I didn’t cover here, you’re bound to find half a dozen favorites of your own. Heck, even if you’re already using ReSharper, spending some time on their website will likely show you something you don’t know about the product.

On Source Control and Flow

While working on a new WCF front-end for some legacy software today, I wanted to go look at how another team setup the WIX file for their service. So, I fired up a second copy of Visual Studio and began fighting with AccuBridge. Here’s the sequence of events:

  • Launch Visual Studio
  • Open solution from Start Page
  • Wait...
  • Wait some more...
  • Wait a little while longer...
  • Accept changes that AccuBridge found in the repository
  • Wait...
  • Realize I opened the wrong solution
  • Try to open correct solution
  • No response, just a throbbing AccuRev icon in my status bar

image

  • Wait some more...
  • Try to close Visual Studio

image

  • Wait a little while longer...
  • Finally, AccuBridge finishes futzing around and allows me to open the correct solution
  • Wait...
  • Wait some more...
  • Wait a little while longer...
  • Accept changes that AccuBridge found in the repository
  • Open the WXS file and find the line of code I need

Without AccuBridge, this process would have taken 2 minutes, tops – even with accidentally opening the wrong solution. With AccuBridge, this process took a rather frustrating 10 minutes. I almost forgot what it was I was looking for.

Some might argue that I should have just popped over to Windows Explorer and viewed the file in Notepad. Others might argue that I should turn off AccuRev integration in Visual Studio. But, neither of those solutions is optimal: one loses syntax highlighting, the other loses source control integration.

It seems to me that the proper solution would be for my source control provider to wait for an explicit command before running off to check the repository for updates. It also seems to me that a plug-in should allow the parent application to close, regardless of what it is trying to do when the end user asks to close the application.

Why these things don’t work this way, I do not know. One thing I do know – it would do wonders for my flow.

Track Active Item in Solution Explorer

Here's another one of those tips that I'm blogging just so that I won't forget it.

Under Tools/Options, in Projects and Solutions, Visual Studio 2005 and 2008 both provide an option entitled "Track Active Item in Solution Explorer". This option causes Visual Studio to select the active item (current open file) in Solution Explorer.

I find this an extremely useful option. It helps me maintain context when I'm jumping from one open file to another while working on a complex problem. It puzzles me as to why the Visual Studio team decided that this option should be off by default. Oh, well. Now we both know how to use it.

Resetting Keyboard Shortcuts in Visual Studio

Visual Studio just went schizophrenic on me: F5 started running File/Open/File, rather than Debug/Start Debugging; F9 refused to toggle breakpoints; and, none of the other default keyboard shortcuts appeared to be working normally. It took me a while to find the resolution to the problem. So, I'm blogging it for posterity.

In a Visual Studio Command Prompt, enter the following commands:

devenv /resetuserdata

This command clears out your recent projects list, dumps your RSS feed, and more. It will execute for several seconds (perhaps even a minute), then return control to the command prompt. (Interestingly, the /resetuserdata switch does not appear to be documented – either in the command line help, or on MSDN. I found it on a blog.)

devenv /resetsettings

This command starts Visual Studio. Go ahead and close Visual Studio.

devenv

This command starts Visual Studio again, and allows you to choose your development environment defaults.

These commands did the trick for me in Visual Studio 2008. I believe they would also work with Visual Studio 2005, but I have not confirmed this.