Sergio Pereira : Tips-and-Tricks

Have you met arguments.callee?

sergiopereira — Fri, 10 Sep 2010 23:36:00 GMT

Just the other day I had a need to use arguments.callee and I realized that's not something you really see every day in JavaScript. Maybe I could talk about it a bit.

Anonymous functions everywhere

It's not news to anyone reading this blog that one of JavaScript's workhorses are anonymous functions. Callbacks, strategies, deferred execution, event handlers, etc. They just seem to be all over the place — and for a good reason; they can be convenient and reduce the pollution of a bunch functions that are only called from a single spot.

Another nice thing is that, once your eyes are trained to ignore the little bit of noise that they add to the code, the code is really readable and, dare I say it, expressive.

Yet another contrived example

Let's say we are really into reinventing the wheel and with our understanding of anonymous functions we create a revolutionary map function:

function map(array, compute){
  var result = [ ];
  for(var i=0; i < array.length; i++){
    result.push( compute(array[i]) );
  }
  return result;
}

This function, as you can hopefully see, transforms each element of the given array into something else and returns the array of the transformed elements. Two simple uses are shown below.

//apply discount
var prices = [1, 2, 3, 4];
var discount = 0.1; // 10% off today, w00t!
var newPrices = map(prices, function(price){ return (1-discount)*price; } );
//==> [0.9, 1.8, 2.7, 3.6]

//compute areas
var squareSides = [1, 2, 3, 4];
var squareAreas = map(squareSides, function(side){ return side*side; } );
//==> [1, 4, 9, 16]

I warned you the examples would be contrived, didn't I?

Now your product manager comes and asks for a page where the users can enter a list of numbers and get the factorials for each of them. You immediately think your friend the map function will save the day. You start and...

//return the factorials
var userNumbers = [1, 2, 3, 4];
var factorials = map(userNumbers, function(number){ 
  if(number <= 1) { return 1; }
  return number * ????????(number - 1); // ooops! I need to recurse here.
} );

You see, there's this thing with anonymous functions. They don't have a name, d'oh. As I said in the beginning, we typically use them in situations where they are called only once so we can inline them and forego the need fora name. But now we're kind of wishing they had a name.

Anonymity won't hide you from me

Well, if the post tittle didn't already give it away, we can achieve that with arguments.callee. Using arguments.callee inside a function gives us a reference to the function itself. So now we can finish our code.

//return the factorials
var userNumbers = [1, 2, 3, 4];
var factorials = map(userNumbers, function(number){ 
  if(number <= 1) { return 1; }
  return number * arguments.callee(number - 1);
  //or if you were using "this" in the function you'll probably want to:
  // return number * arguments.callee.apply(this, [number - 1]);
} );
//==> [1, 2, 6, 24]

A more real world scenario

I won't leave you without at least a reference to a real use case for this feature. The example I'll show comes from Nicholas Zakas. In a blog post a while ago he showed how we can break up long running tasks with smaller timed/deferred chunks, improving the browser's responsiveness.

Here's the function from his blog post, which process chunks of an array for 50ms, then stops and call itself back to process the remaining items soon after that — giving the browser a chance to breathe and take care of its interaction with the user

//Copyright 2009 Nicholas C. Zakas. All rights reserved.
//MIT Licensed
function timedChunk(items, process, context, callback){
   var todo = items.concat();   //create a clone of the original

  setTimeout(function(){

    var start = +new Date();

    do {
       process.call(context, todo.shift());
    } while (todo.length > 0 && (+new Date() - start < 50));

    if (todo.length > 0){
      setTimeout(arguments.callee, 25);
    } else {
      callback(items);
    }
  }, 25);
}

I hope this shows you a little new trick.

More on blocked files

sergiopereira — Thu, 24 Jun 2010 03:26:00 GMT

I've written about this before. You download a file to use in your web application, like a JavaScript library or an image file but the browser just can't seem to load it. You spend hours looking for a typo or broken link until you find out about that Unblock button and you realize that it's IIS that isn't serving the file. The file had been there; you had the correct URL all along; it's just disallowed.

I actually developed the reflex to right click and unblock each an every file I download now. It's stupid, isn't it? I should have imagined there was a way to disable that Windows feature instead of just learning how to live with the problem.

Well, no more. Here's how you can disable it. Credit goes to this article.

Run gpedit.msc (the group policy editor)
Go to User Configuration/Administrative Templates/Windows Components/Attachment Manager
Find the setting named Do not preserve zone information in file attachments and enable it
Log off then log back on, or update the current policies with: Gpupdate /force in any command prompt.

Note: If you're using Chrome it looks like there's some bug that may or may not be taken care of as you read this. Chrome doesn't seem to honor the policy setting and always mark the downloaded files as unsafe.

Now I just need to add this to the list of tasks anytime I get a new machine or repave one of them.

Rule "Previous releases of Microsoft Visual Studio 2008" failed

sergiopereira — Sun, 07 Mar 2010 10:43:00 GMT

Today I was trying to install SQL 2008 on my box and the setup stopped after checking a bunch of rules. The error message was the title of this post.

A quick search on the internet revealed that somehow the installer didn't believe I had VS 2008 SP1 installed, which I did. The recommendations in the KB article were kind of insulting. There's no way I'd spend hours of my day uninstalling and reinstalling VS and SQL — sorry, no chance. I also could not accept not installing the Management Tools, for example. I also did not have any Express version of VS or SQL installed in this box.

A little snooping around with ProcMon led me to the following registry key:

HKLM\SOFTWARE\Wow6432Node\Microsoft\DevDiv\VS\Servicing\9.0\IDE\1033

In that key I noticed the suspicious values:

"SP"=dword:00000000
"SPIndex"=dword:00000000
"SPName"="RTM"

Without quitting the SQL server installer validaton screen, I changed these values to what you see below, crossed my fingers and rerun the installer validation, which passed!

"SP"=dword:00000001
"SPIndex"=dword:00000001
"SPName"="SP1"

Now, I didn't really guess those values. I looked in a sibling registry key (...Servicing\9.0\PRO\1033) and saw that it contained those new values, then I copied them.

I think I didn't break anything. So far all seems to be working. But, as usual with anything related to manual registry hacking, you have to be really insane to change your settings because you read on a random blog on the 'net. I'm just saying... Don't come crying if your house burns down because of this.

Code coverage reports with NCover and MSBuild

sergiopereira — Tue, 09 Feb 2010 18:11:00 GMT

I've been doing a lot of static analysis on our projects at work lately. As part of that task we added NCover to our automated build process. Our build runs on Team Build (TFS) and is specified in an MSBuild file.

We wanted to take code metrics very seriously and we purchased the complete version of the product to take full advantage of its capabilities.

Getting NCover to run in your build is very simple and the online documentation will be enough to figure it out. The problem comes when you begin needing to create more and more variations of the reports. The online documentation is a little short on this aspect, especially on how to use the MSBuild or NAnt custom tasks. I hear they plan to update the site with better docs for the next version of the product.

NCover Complete comes with 23 different types of reports and a ton of parameters that can be configured to produce far more helpful reports than just sticking to the defaults.

For example, we are working on a new release of our product and we are pushing ourselves to produce more testable code and write more unit tests for all the new code. The problem is that the new code is a just tiny fraction of the existing code and the metrics get averaged down by the older code.

The key is to separate the code coverage profiling (which is done by NCover while it runs all the unit tests with NUnit) from the rendering of the reports. That way we only run the code coverage once; and that can sometimes take a good chunk of time to produce the coverage data. Rendering the reports is much quicker since the NCover reporting engine can feed off the coverage data as many times as we need, very quickly.

Once we have the coverage data we can choose which report types we want to create, the thresholds for sufficient coverage (or to fail the build), which assemblies/types/methods we want to include/exclude from each report and where to save each of them.

Example

To demonstrate what I just described in practice, I decided to take an existing open source project and add NCover reporting to it. The project I selected was AutoMapper mostly because it's not very big and has decent test coverage.

I downloaded the project's source code from the repository and added a file named AutoMapper.msbuild to its root directory. You can download this entire file but I'll go over it piece by piece.

We start by just importing the MSBuild tasks that ship with NCover into our script and declaring a few targets, including one to collect coverage data and one to generate the reports. I added the NCover tasks dll to the project directory tools/NCoverComplete.

<Project DefaultTargets="RebuildReports" 
  xmlns="http://schemas.microsoft.com/developer/msbuild/2003" >
  <UsingTask  TaskName="NCover.MSBuildTasks.NCover" 
        AssemblyFile="$(ProjectDir)tools\NCoverComplete\NCover.MSBuildTasks.dll"/>
  <UsingTask  TaskName="NCover.MSBuildTasks.NCoverReporting" 
        AssemblyFile="$(ProjectDir)tools\NCoverComplete\NCover.MSBuildTasks.dll"/>

  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <BuildDir>$(MSBuildProjectDirectory)\build\$(Configuration)</BuildDir>
    <NUnitBinDirectoryPath>$(MSBuildProjectDirectory)\tools\NUnit</NUnitBinDirectoryPath>
  </PropertyGroup>

  <Target Name="RebuildReports" DependsOnTargets="RunCoverage;ExportReports" >
    <Message Text="We will rebuild the coverage data than refresh the reports." 
          Importance="High" />
  </Target>

  <Target Name="RunCoverage" >
    <!-- snip -->
  </Target>

  <Target Name="ExportReports" >
    <!-- snip -->
  </Target>
</Project>

Now let's look closely at the target that gathers the coverage data. All it does is tell NCover (NCover console, really) to run NUnit over the AutoMapper.UnitTests.dll and save all the output to well-known locations.

<Target Name="RunCoverage" >
  <Message Text="Starting Code Coverage Analysis (NCover) ..." Importance="High" />
  <PropertyGroup>
    <NCoverOutDir>$(MSBuildProjectDirectory)\build\NCoverOut</NCoverOutDir>
    <NUnitResultsFile>build\NCoverOut\automapper-nunit-result.xml</NUnitResultsFile>
    <NUnitOutFile>build\NCoverOut\automapper-nunit-Out.txt</NUnitOutFile>
    <InputFile>$(BuildDir)\UnitTests\AutoMapper.UnitTests.dll</InputFile>
  </PropertyGroup>

  <NCover ToolPath="$(ProgramFiles)\NCover"
    ProjectName="$(Scenario)"
    WorkingDirectory="$(MSBuildProjectDirectory)"   
    TestRunnerExe="$(NUnitBinDirectoryPath)\nunit-console.exe"

    TestRunnerArgs="$(InputFile) /xml=$(NUnitResultsFile) /out=$(NUnitOutFile)"

    AppendTrendTo="$(NCoverOutDir)\automapper-coverage.trend"
    CoverageFile="$(NCoverOutDir)\automapper-coverage.xml"
    LogFile="$(NCoverOutDir)\automapper-coverage.log"
    IncludeTypes="AutoMapper\..*"
    ExcludeTypes="AutoMapper\.UnitTests\..*;AutoMapper\.Tests\..*"
    SymbolSearchLocations="Registry, SymbolServer, BuildPath, ExecutingDir"
  />
</Target>

Of special interest in the NCover task above are the output files named automapper)-coverage.xml and automapper-coverage.trend, which contain the precious coverage data and historical trending respectively. In case you're curious, the trend file is actually a SQLite3 database file that you can report directly from or export to other database formats if you want.

Also note the IncludeTypes and ExcludeTypes parameters, which guarantee that we are not tracking coverage on code that we don't care about.

Now that we have our coverage and trend data collected and saved to files we know, we can run as many reports as we want without needing to execute the whole set of tests again. That's in the next target.

<Target Name="ExportReports" >
  <Message Text="Starting Producing NCover Reports..." Importance="High" />
  <PropertyGroup>
    <Scenario>AutoMapper-Full</Scenario>
    <NCoverOutDir>$(MSBuildProjectDirectory)\build\NCoverOut</NCoverOutDir>
    <RptOutFolder>$(NCoverOutDir)\$(Scenario)Coverage</RptOutFolder>
    <Reports>
      <Report>
        <ReportType>FullCoverageReport</ReportType>
        <OutputPath>$(RptOutFolder)\Full\index.html</OutputPath>
        <Format>Html</Format>
      </Report>
      <Report>
        <ReportType>SymbolModuleNamespaceClass</ReportType>
        <OutputPath>$(RptOutFolder)\ClassCoverage\index.html</OutputPath>
        <Format>Html</Format>
      </Report>
      <Report>
        <ReportType>Trends</ReportType>
        <OutputPath>$(RptOutFolder)\Trends\index.html</OutputPath>
        <Format>Html</Format>
      </Report>
    </Reports>
    <SatisfactoryCoverage>
      <Threshold>
        <CoverageMetric>MethodCoverage</CoverageMetric>
        <Type>View</Type>
        <Value>80.0</Value>
      </Threshold>
      <Threshold>
        <CoverageMetric>SymbolCoverage</CoverageMetric>
        <Value>80.0</Value>
      </Threshold>
      <Threshold>
        <CoverageMetric>BranchCoverage</CoverageMetric>
        <Value>80.0</Value>
      </Threshold>
      <Threshold>
        <CoverageMetric>CyclomaticComplexity</CoverageMetric>
        <Value>8</Value>
      </Threshold>
    </SatisfactoryCoverage>

  </PropertyGroup>

  <NCoverReporting 
    ToolPath="$(ProgramFiles)\NCover"
    CoverageDataPaths="$(NCoverOutDir)\automapper-coverage.xml"
    LoadTrendPath="$(NCoverOutDir)\automapper-coverage.trend"
    ProjectName="$(Scenario) Code"
    OutputReport="$(Reports)"
    SatisfactoryCoverage="$(SatisfactoryCoverage)"
  />
</Target>

What you can see in this target is that we are creating three different reports, represented by the Report elements and that we are changing the satisfactory threshold to 80% code coverage (down from the default of 95%) and the maximum cyclomatic complexity to 8. These two blocks of configuration are passer to the NCoverReporting task via the parameters OutputReport and SatisfactoryCoverage, respectively.

The above reports are shown in the images below.

Focus on specific areas

Let's now say that, in addition to the reports for the entire source code, we also want to keep a closer eye on the classes under the AutoMapper.Mappers namespace. We can get that going with another reporting target, filtering the reported data down to just the code we are interested in:

<Target Name="ExportReportsMappers" >
  <Message Text="Reports just for the Mappers" Importance="High" />
  <PropertyGroup>
    <Scenario>AutoMapper-OnlyMappers</Scenario>
    <NCoverOutDir>$(MSBuildProjectDirectory)\build\NCoverOut</NCoverOutDir>
    <RptOutFolder>$(NCoverOutDir)\$(Scenario)Coverage</RptOutFolder>
    <Reports>
      <Report>
        <ReportType>SymbolModuleNamespaceClass</ReportType>
        <OutputPath>$(RptOutFolder)\ClassCoverage\index.html</OutputPath>
        <Format>Html</Format>
      </Report>
      <!-- add more Report elements as desired -->
    </Reports>
    <CoverageFilters>
      <Filter>
        <Pattern>AutoMapper\.Mappers\..*</Pattern>
        <Type>Class</Type>
        <IsRegex>True</IsRegex>
        <IsInclude>True</IsInclude>
      </Filter>
      <!-- include/exclude more classes, assemblies, namespaces, 
      methods, files as desired -->
    </CoverageFilters>

  </PropertyGroup>

  <NCoverReporting 
    ToolPath="$(ProgramFiles)\NCover"
    CoverageDataPaths="$(NCoverOutDir)\automapper-coverage.xml"
    ClearCoverageFilters="true"
    CoverageFilters="$(CoverageFilters)"
    LoadTrendPath="$(NCoverOutDir)\automapper-coverage.trend"
    ProjectName="$(Scenario) Code"
    OutputReport="$(Reports)"
  />
</Target/>

Now that we have this basic template our plan is to identify problem areas in the code and create reports aimed at them. The URLs of the reports will be included in the CI build reports and notification emails.

It's so easy to add more reports that we will have reports that will live for a single release cycle or even less if we need it.

I hope this was helpful for more people because it did take a good amount of time to get it all sorted out. Even if you're using NAnt instead of MSBuild, the syntax is similar and I'm sure you can port the idea easily.

How to detect the text encoding of a file

sergiopereira — Wed, 27 Jan 2010 01:18:00 GMT

Today I needed a way to identify ANSI (Windows-1252) and UTF-8 files in a directory filled with files of these two types. I was surprised to not find a simple way of doing this via a property of method somewhere under the System.IO namespace.

Not that it's that hard to identify the encoding programmatically, but it's always better when you don't need to write a method yourself. Anyway, here's what I came up with. It detects UTF-8 encoding based on the encoding signature added to the beginning of the file.

The code below is specific to UTF-8 but shouldn't be too hard to extend the example to detect more encodings.

public static bool IsUtf8(string fname){
  using(var f = File.Open(fname, FileMode.Open)){
    var sig = new byte[Encoding.UTF8.GetPreamble().Length];
    f.Read(sig, 0, sig.Length);
    return sig.SequenceEqual(Encoding.UTF8.GetPreamble());
  }
}

Maybe I just looked in the wrong places. Does anyone know a simpler way in the framework to accomplish this?

Oh, no. My TortoiseSVN overlays are missing

sergiopereira — Tue, 05 Jan 2010 09:13:00 GMT

It's a matter of time. Good were the days when almost no application knew how to put overlays on your file icons in Explorer. These days it seems this is the coolest thing ever and virtually all file system type of utilities want to add their own.

Sooner or later you will install some utility and not notice anything different. But after the next reboot, poof, your TortoiseSVN overlays are gone. And, depending on how much time elapsed between the utility installation and that reboot, you may not have the slightest clue of what happened. Reinstalling TSVN won't fix it

TFS Power tools, Dropbox, Mozy, stop breaking my TSVN overlays

I should not blame these applications for a Windows shell limitation. To be fair, TSVN is the greater offender of them all.

It seems that the shell only supports 15 different icon overlays and TSVN creates 9 of those. After 15 the shell starts ignoring the extra ones. The trick is that Windows chooses the first 15 alphabetically from their entries in the system registry.

I love simple fixes

The fix is rather obvious; just make sure the overlays you want to be active are registered alphabetically before the ones you can live without.

Open the registry editor and go to HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\ShellIconOverlayIdentifiers and look at all the child keys in there. It will be obvious that, if you want to preserve the TSVN overlays like me, you need to keep the ones starting with Tortoise* before the other ones.

If you look at the image below you'll see that I changed my entries by prefixing the undesirable ones with z_, following someone else's suggestion.

After that change you just need to kill and restart explorer.exe using Task Manager (or logoff or reboot the machine depending on your tolerance to pain.)

I believe this is a common problem so I hope this tip helps somebody.

IE6 still haunts me

sergiopereira — Wed, 21 Oct 2009 22:16:00 GMT

Oh, the woes of supporting IE6 (or, better put, IE666 — the browser of the beast.)

Halloween is definitely upon us. Today I spent a good chunk of time trying to identify the source of a problem in my application. Right now I'm in the process of jQuery-fying some legacy JavaScript, which includes Ajax calls and error handling logic.

At some point I needed to pop-up a DIV that was supposed to look like a modal message box, reporting some error that happened during the Ajax call. That was not hard at all. I used the SimpleModal plugin and got the message box up in not time at all.

Not so fast, you have IE6 users

As with many web developers out there, I don't have the luxury of ignoring IE6 users because they are upwards of 60% of our user base (corporate users that for some reason can't easily upgrade their browsers.)

I thought it wouldn't be a problem because the SimpleModal plugin handles a number of IE6 issues, including the insertion of an IFrame to overcome the bleedthrough of Select tags. But of course it couldn't be that easy right?

In some of my tests IE6 was simply crashing when I tried to open the "modal" message. After a lot or hair pulling, I saw this suspicious HTML in one of my messages:

<table style="font-size: expression(parentnode.currentstyle.fontsize);" >
    <!-- rest of the table is normal -->
</table>

Sure enough, moving that hack to a proper CSS rule in the external .css file made the error go away. We shouldn't be using dynamic CSS expressions anyway, since they were removed from IE8, so I went ahead and ditched that kind of usage wherever I could find it.

This is just to keep us on our toes regarding IE6 support. Even though the modern JavaScript libraries go to great lengths to support IE6 and make our coding transparent, nothing substitutes good old manual testing to make sure IE6 doesn't play pranks on us in production.

JavaScript and its love for zeroes

sergiopereira — Sat, 19 Sep 2009 13:54:00 GMT

This post is part of a series called JavaScript Demystified.

Answer quick. Do you know what date is being created here?

var year = '2009', month = '09', day = '01';
var date = new Date( 
             parseInt(year),
			 parseInt(month),
			 parseInt(day)
			 );

At first glance, it wouldn't surprising that someone guesseed September 1^st 2009. However, I'd not be writing this post if that was the correct answer, right?

There's an interesting and tricky thing with the JavaScript parseInt function: it can parse strings with a numeric value in the decimal radix, but also in other radices. See the following examples.

//passing the radix explicitly
parseInt('1011', 10); // ==> 1011
parseInt('1011',  2); // ==> 11
parseInt('1011',  8); // ==> 521
parseInt('1011', 16); // ==> 4113

Maybe you thought that if you didn't pass the radix, then it would default to 10 because it's the obvious behavior. Well, no. In JavaScript the default behavior is to try to identify one of the literal formats and interpret that. So here's that in action:

//leaving JavaScript on its own
parseInt('1011'); // ==> 1011 (decimal literal)
parseInt('0x12'); // ==> 18   (hexadecimal literal)
parseInt('0511'); // ==> 329  (octal literal)
parseInt('0182'); // ==> 1    (whaaaa?!?!)

If you are familiar with the literal notation for integer numbers in JavaScript, and after I explained the default behavior of parseInt, then you probaly understood the results shown above. Well, maybe the last one deserves some comments.

When JavaScript is parsing the string, if it finds a digit (number or alpha) that is invalid in the chosen radix, it stops right there and parses only the portion of the string that comes before that digit. So, since we started '0182' with a leading zero, the octal radix is assumed. Then, because 8 is not a valid octal digit, only '01' will be parsed, which becomes 1.

Tip #1: If there's any chance the string value you plan to parse into an integer number has a leading zero (or a less likely 0x,) then be safe and pass the radix parameter to your parseInt call. If you're extra paranoid, then always pass the radix.

Back to our original question

Armed with the clarification made above, we can expand our example like this:

//given:
var year = '2009', month = '09', day = '01';
// then the following statement:
var date = new Date( 
         parseInt(year),
         parseInt(month),
         parseInt(day)
         );	
//...is equivalent to:
var date = new Date( 
         2009,
         0,  // ===> oopsie
         1
         );

Hmmm, a zero in the month parameter. Will we have an error here? No, here comes the second potential surprise of this post.

Tip #2: When creating a new date using new Date(year, month, day), the month parameter, and only the month parameter is zero-based (0 to 11).

So, in case the tips and the picture in this text were not enough to help you guessing the date being created, here goes another completely gratuitous one with the answer.

Taming Firebug with Profiles

sergiopereira — Tue, 01 Sep 2009 10:03:00 GMT

This is a tip for anyone using Firefox and Firebug for web development that is not leveraging the Profiles feature of that browser.

Recent versions of Firebug (after v1.3 I think) removed the ability to enable Firebug panes on a per-domain basis. Now it's kind of all or nothing. And you know that you don't want to have Firebug enabled when using Ajax-intensive applications like GMail, for example.

The end result is that you are stuck in this annoying dance of of enabling/disabling, open/close Firebug when switching tabs.

There are some workarounds for that but I think the best solution for this problem is through Profiles, which is also a very nice approach for web development overall.

Firefox Profiles

Firefox stores all your preferences (add-ons, state, saved passwords, history, etc) inside profile directories. It installs a default profile and that's perfectly enough for the casual browser user. Web developers, add-on developers, and power users in general, on the other hand, can find handy uses for extra profiles.

You can see your profile directories in %APPDATA%\Mozilla\Firefox\Profiles (or, on the Mac, ~/Library/Application Support/Firefox/Profiles).

Development profile

The suggestion I'm giving is to create a separate profile just to be used during web development work. That way you can exclude some of the add-ons (like ad blockers, bookmarking extensions like Delicious, and any other non development-related extensions.) The opposite applies to your default profile — you can now remove all the development stuff from that profile and keep your browser a little lighter. In addition to that I use a different skin/theme in each profile, just to make it screaming obvious which one I'm looking at.

Here's how we create a new profile. First close all your Firefox windows and make sure there's no Firefox process running in the background. Now go to the command line and enter this:

(on Windows)
%ProgramFiles%\Mozilla Firefox\firefox.exe -ProfileManager
(or on the Mac)
/Applications/Firefox.app/Contents/MacOS/firefox -ProfileManager

This will bring up the Profile Manager, where you can easily create a new profile. Create one named Development and start it.

Once started, you'll notice that Firefox will open looking just like it did the first time you installed it. You can now install your favorite extensions for web development (like Firebug, YSlow, Web Developer Toolbar, User Agent Switcher, etc)

To launch Firefox using the the Development profile you can create a shortcut that passes some arguments to Firefox, like firefox.exe -P Development -no-remote. For example, I added that shortcut to my Desktop, Quick Launch, and Launchy. (Firefox will remember which profile you started last using the Profile Manager, and use that one next time you start Firefox without explicitly choosing a profile. You may want to leave the default profile selected in the Profile Manager.)

More uses for Profiles

Besides creating a profile dedicated to web development work, I can very well see myself eventually creating extra ones for different activities, like a Presentation profile and a NoAddons profile, for example.

Circular Refactoring

sergiopereira — Fri, 14 Aug 2009 17:21:00 GMT

One of these days I was chatting with Derik and we were talking about refactoring and when to stop refactoring. We thought it was funny (and embarrassing) how sometimes, after a few consecutive refactorings, we are back at the starting point.

This type of Circular Refactoring is a real productivity enemy. In our genuine desire to improve the code, and wishing to dive into an interesting task, we sometimes lose sight of the code history and the real need for this change. It reminds me a lot of this funny comment (second part).

How do you tell when you're being a victim of this variation of the premature optimization monster? Well, here's a start:

Top 10 signs you've fallen into circular refactoring

9 - Code gets eerily familiar by the minute.
8 - Your git repository doesn't seem to grow.
7 - Work feels too much fun to be real.
6 - Your code metrics trending charts look like Bart Simpson's hair.
5 - You're never breaking any of your unit tests after each change.
4 - You've created macros in the IDE to help with almost all the steps.
3 - You're refactoring your macros.
2 - Clippy is asking if you've heard about the "svn merge" command.
1 - TFS, on the other hand, still can't offer you much help.
0 - Your Find/Replace drop-downs seem to read your mind.

Resharper Test Runner in 64-bit Windows

sergiopereira — Tue, 21 Jul 2009 00:47:00 GMT

In the spirit of helping the next guy, here's some explanation for a problem that was surprising to me.

We have recently upgraded our product to 64-bits and all developer workstations to Windows 2008 x64. The transition was easy and most things worked with minor or no tweak at all. We're still battling a TFS issue but that will be the subject for another day, once we figure it out.

I noticed that a bunch of my unit test cases were failing when I ran them using Resharper's test runner. I traced the problem down to missing registry values that were needed by the tests. The intriguing part was that I could see the registry settings there (see image below) and the tests were working fine using NUnit's GUI runner.

After a little poking around, I saw this in Process Explorer:

Hmmm. Visual Studio and Resharper run as 32-bit processes and NUnit's (and my application itself) as 64-bit ones. Could there be a difference between Registry access for 32-bit vs. 64-bit processes? Yessir. It turns out that my settings were in the right place but Windows was redirecting the 32-bit Registry accesses to the path shown below, which is obviously empty.

I don't know of any elegant work-around for this issue but for now I'm simply duplicating the values in both places for the sake of testing. I'm not happy with this duplication but it's got me back on track until someone bright chimes in with a better alternative.

Git, SSH, PuTTY, GitHub, Unfuddle, the kitchen sink

sergiopereira — Wed, 06 May 2009 09:09:00 GMT

After reading a good number of the guides for getting Git/ GitHub/ Unfuddle working correctly in Windows, I finally got it sorted out. I had to use a bunch of things I had not used before so I realized it's probably a good idea to share my findings, hoping to help someone else (and maybe myself again) in the future.

Local git is easier

Getting Git to run locally in Windows is not hard. It gets a little trickier when you want to work with remote repositories. Especially if, like me, you have little or no experience using SSH in Windows.

In this post I'll install and configure the tools that enable Git to work with remote repositories (e.g. post changes to a server), which I think is probably what a lot of people will want to do, even if you're just toying with Git or evaluating it.

You will need SSH for serious Gitting

The way Git will authenticate and communicate with hosted repositories like GitHub or Unfuddle is through an SSH tunnel. That means we will need an SSH client to connect to the server and Git will use that connection to securely transfer the repository data up and down.

In Linux or on the Mac, SSH is a trivial thing. It's just part of the default installation. For whatever reason, Windows does not come with an SSH client, so we need to find ourselves a 3rd party client.

PuTTY, a family of tools

Luckily for us, there's a free and very popular SSH client for Windows, called PuTTY. PuTTY is actually a family of utilities that play together to configure and establish SSH (and Telnet) connections.

From the PuTTY downloads page get the following programs and put somewhere in your hard disk. I like to put these types of things in a c:\tools\bin directory, which is included in my %PATH%.

Create your SSH key pair

The most common way to authenticate your SSH connection with the server is using an RSA key pair. The pair contains a public key and a private key. Typically these keys will be stored in two files — make sure that the private key file is in a directory location that only your user account has rights. I'm gonna keep both files in %USERPROFILE%\SSH (type echo %USERPROFILE% in a command window to see where yours is.)

To create a key pair we will use puttygen.exe. Just click Generate and then Save public key and Save private key. I chose to leave the password blank and trust that my directory security is enough to protect my keys. Let's assume I saved my keys at %USERPROFILE%\SSH\private.ppk and %USERPROFILE%\SSH\public.ppk, respectively.

We're not done with PuTTY yet

Before starting an SSH connection with PuTTY, we need to run Pageant.exe. Pageant is a background process that will handle the authentication requests. We will add our private key(s) in Pageant and it will keep them available for new connections, without the need to retype the password (if you entered one) every single time.

Run Pageant.exe, double click its icon in the notification area, and add your private key file. If you specified a password, it will now prompt you for that.

Phew! We are done with the SSH crap. Now on to Git. Finally.

Git via msysgit

There are a few ways of installing the git client in Windows, including downloading and compiling the source. But guess if I want to go down that route. Instead, let's just press the easy button and use a pre-packaged installer.

msysgit is what you'll want to install. Donwload the latest release from the site. The file name of the full installer, as of this writing, will be named like Git-[version]-preview[yyyymmdd].exe.

Run the installer accepting most of the defaults, with the exception of these two screens below. We want to Run Git from the Windows Command Prompt and Use PLink (PuTTY.)

After this we should have a working installation of Git. You should be able to use Git from both the Windows command prompt and from the Git Bash shell.

Register your public key with the remote server

Now we need to tell the server that hosts the remote repository that it should expect and accept SSH connections from our machine. The way we do this is similar in GitHub and Unfuddle. We just need to associate our public key with our account on that site.

For example, in my GitHub account settings there's a section called SSH Public Keys, where we can add all public keys that we own. Don't use the public key straight from your PuTTY public key file, it uses a different format. Instead, open Puttygen again and load the private key. The public key, in the right format, will be shown in the big text box at the top of the window. Copy that entire text and paste in a new key in your GitHub settings, as seen below.

Troubleshooting

After all that you should have all it takes to use Git in Windows. Until I got to this point I came across some problems. Here are some of them.

No supported authentication methods available. I got that error while trying to push changes because I either forgot to run Pageant or to add the right key into it. The full error is below.

C:\myproject>git push origin master
FATAL ERROR: Disconnected: No supported authentication methods available
fatal: The remote end hung up unexpectedly

The server's host key is not cached in the registry. Sometimes when connecting to a remote server for the first time, the PuTYY will output this message after your Git command.

The server's host key is not cached in the registry. You
have no guarantee that the server is the computer you
think it is.
The server's rsa2 key fingerprint is:
ssh-rsa 1024 [fingerprint here]
If you trust this host, enter "y" to add the key to
PuTTY's cache and carry on connecting.
If you want to carry on connecting just once, without
adding the key to the cache, enter "n".
If you do not trust this host, press Return to abandon the
connection.
Store key in cache? (y/n)

The problem is that Git will not read your keyboard input so you can't type "y" (or "n"). You have to CTRL+C out of it.

The fix for this, is to connect to your server initially using plink -agent github.com directly and then you'll be able to press "y" to cache the server's key locally (and not be prompted again in Git.) Enter "git" as the username if prompted. Now we can get back to Git without that prompt.

Now, that was nerdy

By now, if you got this far in this post, you're probably thinking this is too much work just to get a simple Git client working. I think the current situation reflects at least two things: the people behind Git are definitely not Windows users (d'oh, what a surprise) and the toolset is still relatively immature (in terms of polish, not under the hood) compared to Subversion and CVS for example. The existing GUI's are still very raw and young but, given the increasing popularity of Git, I'll be surprised if by the end of this year this problem isn't gone.

Blocked .js files keep biting me

sergiopereira — Sat, 04 Apr 2009 03:14:00 GMT

This is a tip for those working with JavaScript (and possibly other types of files) that is freely available for download. For the n^th time in the last few months I spent an unnecessary amount of time trying to find a problem in my code that wasn't really there.

Windows keeps track of the files you save to your hard disk which came from the Internet. Maybe you have seen this problem when you try to open a CHM file that you downloaded and see that it opens to a blank page. The same type of thing happens with JavaScript files that you download. Let's see what happened to me today.

First I downloaded the latest version of QUnit and saved to my application's directory. I did this the usual way, as shown in the image below.

Then I proceeded to use the downloaded testrunner.js file in my HTML page, via a <script src="testrunner.js"></script> tag. When I tried to open my HTML page, I was not expecting to see the particular error shown below.

I started to look for common problems: Did I save the file in the right place? Did I spell its name right? Did I mispell the function name? Did I miss a dependency? No, no, no, and no. All looked good.

That's when I remembered that the file might have been flagged by Windows. I opened its properties dialog and, sure enough, there it was, the infuriating Unblock button.

Ah, that's easy. I just clicked it and refreshed my page. Wah-wah! Problem persists. I tried typing the .js url in the address bar and saw this 401 error message from IIS, not 404.

That told me that there was still something messed up with file access. I checked the file's permissions, comparing to an older .js file in the application. The new one did not grant access to local users, so I added Read access to local users.

Now it works. Depending on how your IIS and/or ASP.NET security is configured, you may not need this last step (e.g. if the process identity already has admin rights, in which case I salute you, brave friend.) The system at hand was a Win2008-x64 installation with the default IIS/ASP.NET settings.

This problem seems to happen to me every other week and I still did not develop the reflex to take care of it right when I download the file. On the other hand, I'm getting better at remembering about it when I see stuff like "function not defined" in an error message.

Resharper an OutOfMemory Exceptions

sergiopereira — Wed, 04 Feb 2009 00:24:00 GMT

My current project has an interesting story of being converted across platforms and programming languages. I hope I can talk about this conversion process some day (it was not manual).

One of the side effects of mass conversions like this is that the final result tends to carry over some weird patterns. These patterns used to make total sense in the previous programming language, but look very unnatural in the new one.

We ended up with some very large classes inside a single namespace that, while work exactly as in the previous language, cause an unusual amount of stress inside Visual Studio, especially with Resharper (version 4.1) installed. Resharper would halt with OutOfMemory exceptions all the time, until I disabled Code Analysis, arguably one of the most important features of that product.

Finally today a coworker pointed me to a fix for that. I'm still getting the exceptions if I turn on solution-wide error analysis, but I think I can live without that.

I haven't had a chance to try the nightly builds of Resharper 4.5. I have been told that those issues may go away.

UPDATE: I installed version 4.5 (build 1169.15) but it didn't help me. The only thing that changed was the layout of the error screen :) But I know my project is a tad extreme and I deserve to be punished for it.

jQuery Character Table

sergiopereira — Tue, 30 Dec 2008 01:31:00 GMT

The other day I was looking for the HTML code for the ⌘ (in case you can't see it, that's the command key symbol), found in mac keyboards. It was not the first time I was looking for the HTML code for one of those funky characters. I remember having a hard time trying to represent some Math symbols, like sums and integral equations from my college Calculus days.

I thought this would be a nice opportunity to create a small jQuery sample that renders a range (or ranges) of HTML characters along with their codes.

I started with a simple HTML page, leaving all the JavaScript in an external file.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>HTML Characters</title>
    <meta http-equiv="Content-Type" 
      content="text/html; charset=utf-8">
    <script type="text/javascript" 
      src="jquery-1.2.6.js"></script>
    <script type="text/javascript" 
      src="char-table.js"></script>
  </head>
  <body>
    From (hex): <input id="range_from" type="text"  /> <br/>
    To (hex): <input id="range_to" type="text"  /> <br/>
    <input type="button" value="Load" id="btnLoad" />
    <input type="button" value="Load Example" id="btnLoadEx" />
    <input type="button" value="Load Keyboard Symbols" 
         onclick="CHARTABLE.loadKeyboardSymbols();" />
    <table id="char_table" border="1" />
  </body>
</html>

Here's the JavaScript in the file char-table.js.

$(function(){
  //here we put everything that will run when the page is ready

  $('#btnLoad').click(function(){
    // notice how we get the value of the input fields using val()
    // notice how to parse hex numbers in JS
    var from = parseInt($('#range_from').val(), 16);
    var to = parseInt($('#range_to').val(), 16);
    CHARTABLE.loadRange(from, to);
  });

  $('#btnLoadEx').click(function(){
  //setting the value of each input field
    $('#range_from').val('2190');
    $('#range_to').val('2195');
  //fire the click event of the Load button
    $('#btnLoad').click();
  });

});

// the CHARTABLE object acts as a namespace
var CHARTABLE = {
   loadRanges: function() {
    this.clearTable();
    for(var i=0; i<arguments.length; i++) {
      this.appendRange(
        parseInt(arguments[i][0], 16), 
        parseInt(arguments[i][1], 16)
        );
    }
  },

  loadRange: function(from, to) {
    this.clearTable();
    this.appendRange(from, to);
  },

  clearTable: function(){
    //the html() function is how we replace the innerHTML with jQuery
    $('#char_table').        
      html('<tr><th>Character</th><th>Code</th></tr>');
  },

  appendRange: function(from, to){
    //we can create stand alone DOM elements with $()
    var tbody = $('<tbody/>');
    for(var i=from; i<=to; i++) {
      //notice how we can convert a number to hex
      $('<tr>').
        append('<td>&#x' + i.toString(16) + ';</td>').
        append('<td>&amp;#x' + i.toString(16) + ';</td>').
        appendTo(tbody);
    }
    //adding the tbody to the table at the end
    //  renders faster than adding each row to
    //  the table as we go
    $('#char_table').append(tbody);
  },

  loadKeyboardSymbols: function(){
    this.loadRanges(
      ['21e7', '21e7'],
      ['21a9', '21a9'],
      ['2303', '2305'],
      ['2318', '2318'],
      ['2324', '2327'],
      ['232b', '232b'],
      ['2190', '2198'],
      ['21de', '21df'],
      ['21e4', '21e9']
    );
  }
};

Now enter the range from 2100 to 2400 and stare at a whole bunch of characters that can become useful in some situations.

Note: The characters don't render equally in IE and Firefox, but a large number of them render just fine in both browsers.