Debug JavaScript in MVC

Nov 25, 2011

Most JavaScript libraries come with a minified version that is quick to load, and a debug version that lets you debug issues. In ASP.net MVC you really want to be using the debug JavaScript while developing, and the minified Javascript when your site goes into production. I thought up this handy tip that gives a good return, for little investment.

Step 1: Change your layout pages to reference your JavaScript files via a UrlHelperExtensions class.

Step 2: In the UrlHelperExtensions class write some code like this:

public static string Scripts(this UrlHelper helper, string fileName)
{
    return helper.Content("~/Content/Scripts/" + fileName);
}
public static string knockout(this UrlHelper helper)
{
    if (System.Diagnostics.Debugger.IsAttached)
        return Scripts(helper, "knockout-1.2.1.debug.js");
    return Scripts(helper, "knockout-1.2.1.js");
}
public static string CDNjquery(this UrlHelper helper)
{
    if (System.Diagnostics.Debugger.IsAttached)
       return "//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js";
    else
        return "//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js";
}

The jQuery example here is using a CDN in the hopes that the visitor already has it in their browser cache.

Now your JavaScript will load quickly and you can still debug during development.

beveragelog.com – social drinking

Nov 22, 2011

Just in time for the silly season I give you beveragelog.com a mobile web application that allows you to track what and where you drink. I started working on it about a year ago in my spare time, today it has enough functionality to be released.

The idea came to me when I worked for a large software company that had huge end of year parties. Last year, on the day of the end of year party when I was experimenting with Ruby, I thought it would be neat to use the set of templates that let you generate a basic application (called scaffolding) to write a web application to log the beverages that I would drink at the office Christmas party. It was pretty quick to get up and running.

I hosted my application at heroku so I could use it that night. At the party I found it difficult to use on my phone, so I ported the interface to jQTouch. This made it mobile friendly and much easier to use.

A few months later I was showing some people the application and they wanted to be able to use it. So I decided to make it multi-user and integrate with services like Twitter and Facebook. I started this project using Ruby on Rails just after a new release, which made it frustrating trying to find stable packages. So I decided to rewrite what I had in node.js.  As a bonus node.js made the serialising of ajax responses nice and easy.

A little while later I purchased the domain name and started hosting the application on my own VPS. At the time there were very few node.js hosts. It was an interesting learning exercise to host it myself. I made my own deploy script using ssh, git and upstart.

I wanted the UI to be responsive and not hit the server on every action, but the client side code quickly became out of control. I found that knockout.js was a handy way to organise my code into models that bind to parts of the html document. These bound elements get automatically updated as changes are made. As the logic is encapsulated in a model,  I could potentially test complicated logic without the browsers DOM being required or being susceptible to changes to the structure of the document.

After battling with some bugs in the jQTouch framework I switched to jQuery Mobile, it was easy to switch over and it works on a wider range of devices. As the project spanned the better part of a year it was interesting to see the landscape of dependencies that I was building on change beneath me.

Later I added the ability to use the browsers geolocation capabilities with Geo.js so that locations of drinks could be stored and mapped.

This project has been a great opportunity to learn about how to use stuff like google analytics, landing pages, logos and even outsourcing. One interesting anecdote I have relates to the logo, there is a cool site called fiverr.com where people post work they will do for $5, I used the site to find a kid in the states who I hired to design my logo for a fiver.

Overall beveragelog.com has been a great learning experience, there is still a lot of scope for more enhancements and features but for now I am relieved to finally get it released. I have found starting something is hard and takes enthusiasm, but finishing something is harder and takes stamina.

I have already used some of the skill I gained in other work and hope that they continue to serve me well.

Skipping MVC web.config files with msdeploy

Nov 15, 2011

This post describes how to deploy a ASP.net MVC web application with msdeploy, while skipping the overwriting of the root web.config file. Sounds easy, what could possiblie go wrong? Well, msdeploy can be a real pain to try and figure out, but at least it’s the sort of thing you write once and keep in the back pocket.

This example deploys from an existing ‘last build’ staging area to a ‘beta’ staging area but doesn’t copy across the configuration or error files.

"c:\Program Files\IIS\Microsoft Web Deploy V2\msdeploy.exe" -verb:sync -source:iisApp="LastBuild" -dest:iisApp="Beta" -skip:objectName=dirPath,absolutePath="elmah" -skip:objectName=filePath,absolutePath="^((?!Views).)*web\.config$" -skip:objectName=filePath,absolutePath="settings-override.xml"
pause

The tricky bit that this command is handling is that MVC doesn’t just have the one web.config file. Each view folder also contains a web.config file used by the view engine, so simply ignoring files name web.config will deploy a broken web application. The example above works because msdeploy allows regular expressions, this regular expression skips over the web.config in the root directory but still copies over the others that are in ‘Views’  folders.

You can see how the regular expression works at this handy site.