The Problem

So our problem is we are building a library of JavaScript files that we use all over the place. I’ve been pushing, on the project where I’m the sole developer, to wrote 99% of the JavaScript as jQuery plugins. This works great because we can compile that 99% into a single file, or to reverse the perspective, we can split that huge file into smaller, more manageable and logical files.

For example, we have a file called jquery.mycompany.core.js which does a variety of mundane tasks. The file is huge, but unlike C# code, it’s huge for a reason. We want the browser to make as few requests as possible so there is less handshaking, less overhead, and faster page loads.

Previously we had several files and we manually combine them to one and then run it through some online compressing tool once we get close to production. This technically worked, but changes found a way of making their way into the huge file and the segmented files become out of date and obsolete.

The Hack

So here was my plan, take a list of file, concatenate them, and then compress them. Simple enough right? Well, it actually isn’t that bad

  <ItemGroup>
    <JavaScriptFiles  Include="scripts\jQueryPlugins\Custom\core\**\*.js" />
  </ItemGroup>

  <Target Name="Default" DependsOnTargets="BuildAndCompressOrdersJavaScript">

  </Target>

  <Target Name="BuildAndCompressJavaScript">
    <ReadLinesFromFile File="%(JavaScriptFiles.Identity)" >
      <Output
          TaskParameter="Lines"
          ItemName="lines"/>
    </ReadLinesFromFile>

    <WriteLinesToFile File="scripts\jquery.mycompany.core.uncompressed.js"
                      Lines="@(Lines)"
                      Overwrite="true" />

  </Target>

Not so bad right? Lastly, just add a bit of Google Closure. I just shell out and run it from the command line here.

<Exec Command='java -jar ..\compiler.jar --js scpts\jq.myco.core.un.js > scpts\jq.myco.core.js' />

I shortened some paths and filenames there so it would fit better in the blog’s column, but you get the idea.

I threw this into a post build event even though I could have added it to the csproj directly. The post build event was easier and it avoids those nasty warnings when you open the csproj.

The only issue I see with it right now is it is not as portable as I would like it to be. You pretty much company and past the build steps if you need to use it again. This is my major gripe about MSBuild. It’s difficult to create functions you repeat in the build.

This is a total cheapskate way to accomplish this task. I should be creating a nice parameterized MSBuild task, or even better, dump MSBuild for Rake. MSBuild and I acknowledge we are never going to be friends and have come to a professional arrangement. MSBuild does nothing to accommodate me and I do as little as possible with it.

I have to admit, I haven’t used Visual Studio 2010 much, and only recently have I made an effort to switch to it as my daily editor. One thing I’ve noticed is the font rendering in Visual Studio 2010 is a bit bolder than in 2008.

Here we have Visual Studio 2008 on the left and Visual Studio 2010 RC on the right. Both using similar font settings (Monaco 10pt)

It’s easy to see how the fonts in 2010 (on the right) look bolder and a bit blurry. From what I’ve read, WPF has had problem with Clear Type font rendering. This is the first WPF application I use with any appreciation. 

Windows 7 has a tool to help you tune your Clear Type settings. Just type “clear type” into the start search bar, and you should find the tool. It only takes a few moments, and the outcome was pretty surprising. I’ve very happy with the results after the calibration.

Working on the bleeding edge is painful. Very painful at times. Throwing away our Team City builds because TFS 2010 didn’t support it really hurt. It was a big woops that I regret.

Moving to Visual Studio 2010 Beta was painful too. Visual Studio worked fine, but no ReSharper made it painful. Even in the early days, ReSharper was not stable in 2010, but after a few months, things look good now. ReSharper and VS 2010 are playing nice together.

There is one last pain point. No Xunit.net test runner. Xunitcontrib provides a ReSharper 5.0 build, but I was never able to get it to work…until now. Previously I was getting the same problem seen by others.

The plugin xunit could not be loaded from "C:\program files(x86)\jetBrains\resharper\v5.0\bin\plugins\xunit.dll" or one of its dependencies.  Operation is not supported.  (Exception from HRRESULT: 0×801311515)

I tried the best I could to right-click | Properties | Unblock all the files in the plug-in, but the “Unblock” never worked. I would get the same error. Going back into the properties dialog, the unblock would appear again. It looked like the unblock wasn’t sticking.

After a quick Google search, I found an alternative way to unblock files. Copy the files to a FAT 32 and back. The block is stripped. Sweet! My USB key is FAT 32, and after a quick copy and back. No more errors! ReSharper sees and runs my Xunit.net tests.

Just a quick overview of how I installed the plug-in:

1. Close Visual Studio.
2. Copy the contents of the ExternalAnnotations to:
   C:\Program Files (x86)\JetBrains\ReSharper\v5.0\Bin\ExternalAnnotations
3. Create a folder:
   C:\Program Files (x86)\JetBrains\ReSharper\v5.0\Bin\plugins\xunitcontrib.runner.resharper.5.0
4. Copy everything else to the USB key.
5. Copy it to the folder I just created in step #3.
6. Open Visual Studio and run all my tests.

This is a quick, dirty work around to renaming the properties of the LINQ to SQL classes. Say you have a simple DBML class you want to rename.

Simple enough right? Just click in there and edit the WidgetName to Name right? Wrong! You have code like this.

public Widget CreateNewWidget(string name, string description)
{
    return new Widget {
        WidgetDescription = description,
        WidgetName = name
    };
}

You’re going to abandon all those calls to WidgetName and do a search and replace refactor. That sucks. So rename it to WidgetName2 for now and let all the references break.

That breaks our code.

Fine for now. Create a partial class for the Widget.cs and add our WidgetName back in

public partial class Widget
{
    public string WidgetName { get; set; }
}

Use ReSharper to rename that property to name.

Then delete the partial class, or property and rename the property in the DBML to Name.

Done.

We’ve recently upgraded to the shiny new Visual Studio 2010 Beta 2. With the go live license we hope we can transition to the RTM once it drops. It has some nice features everyone already knows about.

First step to the future, the conversion. The conversion went pretty smooth. It doesn’t like the MVC 1.0 project, but that’s OK since it was just a shell placeholder. We plan on converting that to the MVC 2.0 before we get any real work in there.

After fixing a few minor things the conversion wizard missed, we fire up the app in Cassini….and it looks awful.

OK, well maybe it doesn’t look awful, but it doesn’t look how our talented designers want it to look. It is mostly there. That bottom block should appear to the right of the login. Fire up the same VS 2010 project in IIS and it looks fine.

Weird huh? Looking at the HTML there are a few differences between the two, but none that we would really expect to cause the two to render differently. Some URL’s were changed to absolute URL’s and include the hostname and port of each site. There are some view state differences, but nothing else.  Hmm…Why don’t we just stop using Cassini and debug through IIS.

There were just a few steps needed to set that up. First, tell Visual Studio to use a different server besides the development server.

Here we’ve already setup a host header IIS site and added dev.mysite.localhost do the hosts file. We have a hybrid of ASP.Net and classic ASP, so we already used ISS for a lot of testing.

Second step, run Visual Studio as administrator. You can default the shortcut to always run as administrator by editing the advanced properties of the shortcut.

That’s it. It looks like Visual Studio automatically attaches to the IIS process. The best part; It is a worlds faster than Cassini. I don’t know why you would debug through Cassini, unless you had to because you were missing either administrator privileges or missing IIS with your Home version of Windows.

I hate regions in Visual Studio. I don’t like the fact you can hide code from my incremental search and scanning eyes. If it is unimportant to me at the moment, give me a mechanism to jump over it.

#region "collapse me"
    // you’ll never see me if I’m collapsed.
#endregion

I don’t like that I can’t CTRL+I through them nor CTRL+F will skip them unless you tell them otherwise.

While Visual Studio gives your the ability to skip to the method directly via a dropdown.

The dropdown is nice and all, but the members are in alphabetical order, not the order they are in file. Alphabetical may make sense in some cases, but I usually have related members near each other in the source. When I go look for them in the dropdown, why aren’t they the same.

Xcode does things a bit differently. They line up everything with the order of the members in the file. Also, they let you give clues to the IDE to format the dropdown into sections. Brilliant.

Notice the following lines of source and their related markup of the dropdown.

#pragma mark -
#pragma mark Picker DataSource Methods

Pretty awesome huh? The best part is as you move the code around, the markup and members move in the dropdown. A+

I’ve been a long time supporter to dark IDE settings. After recently spending some more time in TextMate, and seeing some presentations given in Visual Studio with a setting that more closely matches my favorite TM theme, and seeing HippoEDIT ships with the same theme, I’ve decided to tweak my current dark theme to be a little close to TM.

Here is what it currently looks like for C# code.

Here is some XML.

Some CSS:

And some HTML.

Something interesting here is that I’ve given different styles to inline HTML elements (e.g. label) vs block HTML elements (e.g. div, p). You can do this by going to Tools | Options | Text Editor | HTML | Format | Tag Specific Options…

The biggest bummer here is for ASP.Net controls you can only style the leading control prefix.

I’m not a closet fan of JetBrain’s products. ReSharper is a dream and I can’t imagine hate coding anything without it. Recently, I’ve been using the RubyMine Beta as JavaScript editor. I’ve really liked it, and it far exceeds Visual Studio with only the fact it doesn’t keep shifting my JavaScript around while it auto indents, un-indents, then re-indents. It does many more things better than Visual Studio, but this was the madding factor that made me search for something new.

The more I use it for JavaScript, the more I find myself editing other file types in RM as well. Most recently, I was working in one of our Stylesheets and found it’s UI for editing colors far exceeded the VS equivalent. Let’s take the following example. Let’s say I want to edit the following CSS class.

.note-type-Glitch-Active{
    background-color:#D3262E;
    color:White;
}

VS will let me right click inside the class, and click “Build Style”. I get a nice dialog window to edit the style.

Nice huh? There are lots of switch to flip and buttons to click. My complaint is you took me from something succinct, and cluttered it with a bunch of options I don’t care about. Do I really need to click a checkbox to make it blink? I clicked on “background-color”, chances are I want to edit that.

OK, I’m being picky, but I really do want to change the background color. So, I click Background, and then swatch color, and then the custom dialog, because how often do you pick from their swatch pallet?

I finally end up here.

What glorious color picker dialog? I swear this thing hasn’t changed since Windows 3.1. It is really pitiful. I’ve complained about this color picker before, but I don’t mind doing it again. I can’t make slider adjustments to the RGB values individually. I can’t adjust saturation via a slider, and go ahead and try to make use of that customer colors palette. It is near impossible. Yuck!.

You can make your change, OK all the way out and you’ve got your new color.

Now let’s look at RubyMine.

Hey! Is that a swatch right there in the editor? That’s pretty nice. Single click it and we get a nice picker.

It still starts out with a swatch palette, but the preview is pretty nice. Also, the recent color palette is much easier to use.. Click over to HSB.

Hue, saturation and luminance adjustments via a slider! Nice! Naturally the RGB gives you exactly what you would expect: RGB adjustments for each component via sliders.

I click once and I’m out of the dialog with the new color.

In my opinion, this is a much more usable color picker. I’m sure I’ll be back with more things RubyMine does better than Visual Studio.

Don’t get me wrong. I love Visual Studio, but there are something other tools do better.

Like many websites, we implemented a feature that will let our users self recover lost or forgottton passwords.  Asp.Net provides this right out of the box with the PasswordRecovery control.  It took us 90% of the way to where we want to be. It verifies the account exists, generates a random password and mails it to user.  The last step we wanted was to force the user to change their password after they’ve requested a new on from the PasswordRecovery control. Turns out, it wasn’t that bad.

We created a new profile property for our user to track if we were requiring a password change on the next login.

 <profile>
   <properties>
     <add name="RequirePasswordChange" type="System.Boolean" allowAnonymous="false"/>
   </properties>
 </profile>

We already had our ForgotPassword.aspx page with our PasswordRecovery control on it. We just needed to write up one more event.

<asp:PasswordRecovery ID="PasswordRecovery1" runat="server"
     OnSendingMail="SendingMail" >
 </asp:PasswordRecovery>

In the new event we’ll set that flag so we know the next time they successfully log in, we’ll make them change their password. I didn’t really see any other event that was more appropriate than SendingMail, but since we only send the e-mail when we pass all the challenges we’ve setup, it works well enough.

Also, since we’re not logged in, we have to ask for the profile by name, and then make the change.

protected void SendingMail(object sender, MailMessageEventArgs e)
{
    var p = Profile.GetProfile(PasswordRecovery1.UserName);
    p.RequirePasswordChange = true;
    p.Save();
}

The login page has some code added after we login.

<asp:Login ID="Login1" runat="server" OnLoggedIn="LoggedIn">
</asp:Login>

If we require the password change, then redirect to the new page.

protected void LoggedIn(object sender, EventArgs e)
{
    if (Profile.GetProfile(Login1.UserName).RequirePasswordChange)
        Response.Redirect("ChangePassword.aspx");
}

Lastly, ChangePassword.aspx resets the flag on successful login.

<asp:ChangePassword ID="ChangePassword1" runat="server"
    OnChangedPassword="ChangedPassword">
</asp:ChangePassword>

protected void ChangedPassword(object sender, EventArgs e)
{
    Profile.RequirePasswordChange = false;
    Profile.Save();
}

That’s it.

With the Git extensions you get some nice Visual Studio integration. You get a nice menu and toolbar to work some of your Git magic right from the IDE.