The art of simplicity

Google Analytics is a great tool to figure out what’s going inside your web application. It gives you real-time monitoring on the pages they visit, the time they spend on your site and much, much more… Recently we switched from a standard ASP.NET MVC application to a Single Page Application. The problem is that Google Analytics has no idea when you switch pages, so you loose a lot of interesting reporting. To fix this you can use the fact that most SPA’s use hashes for their URL routing (e.g. http://www.mysinglepageapplication.com/#welcomepage ). Everything the hash changes, the hashchange event is raised.

For a single page application(SPA) I’m working on, we connect to an ESRI ARCGIS server to load some GIS map visualizations. However when we tried to load some map data from inside our application, nothing happened . When we took a look at the console window, we found the following log message: [blocked] The page at ‘someurl’ ran insecure content from ‘someurl’ This is a security feature of Chrome. Our SPA application is using SSL, the problem is that the ESRI ARCGIS services that we call are hosted on HTTP. Chrome will silently block the calls to this insecure content. While we are waiting until our GIS team reconfigures ARCGIS to support HTTPS, we have a workaround(this is a security risk, so don’t try this at home ): You can start Chrome with an extra command line parameter "-allow-running-insecure-content" , which skips the insecure content check.

With all these great ORM tools and no-SQL solutions, you would almost forget that there is still a database running somewhere behind the scenes. Databases remain an important part of most applications, so we still have to be aware about what’s going on inside the database engine. On MS SQL Tips , I found a great tutorial that focuses on a few different areas where these common mistakes are made and what can be done to fix them. These areas include: Query writing Indexing Schema design Following topics are covered: Query writing: How Join Order Can Affect the Query Plan Remove Function Calls From the SELECT List Avoid Using <> in WHERE Clause Avoid Using Functions in WHERE Clause Avoid Using Wildcard Characters to Start Search Criteria Use a Derived Table in Place of IN Predicate With Aggregate Functions Indexing: Make Sure All JOIN Columns are Indexed Use WHERE, JOIN, ORDER BY...

For a SPA application I’m building I need to accept requests to .html files although I didn’t use static html files but razor views instead. To get this working inside ASP.NET MVC is a little bit harder than you would expect. So here are the required steps: Add a handler mapping  in your web.config that will point *.html requests to the TransferRequestHandler. Therefore add the following section to the<system.webServer> node: Add a custom route. Open up App_Start/RouteConfig.cs and it to the RegisterRoutes call:

Out-of-the-box when a Knockout observable changes, any computed observable is notified immediately. In case you want to delay change notifications for a specified period of time, you can use the rateLimit extender . The rateLimit extender can be applied to any type of observable, including observable arrays and computed observables .

Knockout has the concept of computed observables . Knockout is smart enough to detect which observables to monitor based on the code inside the computed observable. For example, in the code below we use the name observable inside the computed. Knockout will detect this and call our computed function every time the name observable changes: You can take advantage of this fact. If you specify some code inside a computed that uses all your observable properties, for example ko.toJSON, you can create a computed that will be called on every change. This is useful if you want to do some dirty/change tracking on your viewmodel:

By default when you use the Durandal MVC template , your views should be created as plain html files. But what if you want to use ASP.NET MVC Razor files(.cshtml) instead? This is perfectly possible but requires some configuration work from you: First, let’s switch the Durandal view extension from .html(the default) to .cshtml. Open up the main.js file and set the viewExtension property on the viewEngine object: The next step is to create a generic controller that will serve .cshtml files: And of course, don’t forget to add a route that matches this controller: As a last step copy the web.config file from Views/web.config to /App/views/web.config (so Razor views work in this location):

On a recent project, I’m integration SVN with Team Foundation Server GIT. This is not such an easy process and we hit some bumps down the road. One tool I can recommend is SVN2Git , this is a great improvement over the standard git –svn   command you get out-of-the-box. But even then you’ll probably get some errors, a problem that we encountered when executing SVN2Git was the following: fatal: Cannot setup tracking information; starting point 'remotes/svn/dlb’ is not a branch We were able to fix it by opening up the migration.rb file (SVN2Git is a ruby gem) under C:\Ruby\lib\ruby\gems\2.0.0\gems\svn2git-2.2.2\lib\svn2git (or a similar path) and removing the --track option from the following statement: run_command("git branch --track \"#{branch}\" \"remotes/svn/#{branch}\"")

After upgrading to TFS 2013, the first thing you need to do is running the ‘Configure Features’ wizard . This will enable some of the new features in TFS 2013 for your existing Team Projects.   Before the configuration takes places, TFS will verify if is able to automatically update your Team Project. For one customer, we were out of luck and the verification failed with the following error message: [Error] TF400618: The reporting type of field 'Microsoft.VSTS.Common.StateChangeDate' in work item type 'Feature' conflicts with the reporting type of the existing field We took a look at the ‘Resolve Errors’ MSDN page and found that we could fix the issue by changing the Field definition of the stated item by using witadmin changefield .

If you are interested in Continuous Delivery and want to share this concept with the rest of your organization, download and print the following visualizations created by Nhan Ngo , a QA engineer at Spotify :

TFS 2013 introduces GIT as an alternative to the ‘traditional’ Team Foundation Server Version Control. By default when you create a new Team Project and choose GIT as the source control system, a Git repository is created for you. But did you know that you are not limited to this one repository? It’s perfectly possible to add multiple Git repo’s to one Team Project. Even the work item integration works as expected! Click on the arrow next to your Repository name and you can choose another repository inside this Team Project: If you want to add an extra repository, click on Manage repositories… This brings you to the Administration site where you can add a new repository by clicking on the New repository… button.

Microsoft released some extra tools for Visual Studio to integrate Application Insights telemetry in your applications in an easy way.  Get Started To get started with a new project, simply create a Web or Windows Store project. In the New Project dialog, make sure that Add Application Insights to Project is checked. To get started with an existing project, right-click on a Web or Windows Store project in Solution Explorer and choose Add Application Insights Telemetry to Project . That's it! Then run your Web application locally (or deploy your application), and after 10-15 minutes, telemetry data will automatically start appearing in the Application Insights Portal in the Usage tab.

After upgrading to ASP.NET Web API 2, we decided to switch to the attribute based routing approach. Most things worked nicely, but we had one little problem. In our POST methods, we returned the URL of the new created object: The problem was that Url.Link expects a route name, but how do we specify the correct route name? Therefore an extra “Name” property is available on the Route attribute: [Route("api/user/{id}", Name = " PostUser ")] response.Headers.Location = new Uri(Url.Link(" PostUser ", new { id = user.Id }));

Last week, we finally found some time to upgrade our company TFS environment to Team Foundation 2013. The upgrade didn’t go as smooth as we wanted. The installation immediately failed with the following error message: TF400167 : Installation failed for the package(netfxfullredist_43) with the following status 0x800713EC, restart state 00x0 If you see this error, don’t panic. It’s an easy one to fix. When you install Team Foundation Server 2013, .NET 4.5.1 will be installed first as a prerequisite. The thing is that the .NET 4.5.1 installation requires 2.8GB(!) of free space to install. We only had 2GB of free disk space available, so this explained the error message. Cleaning up some old files on the TFS server, solved the issue and the installation could continue…

When you are using TypeScript in Visual Studio 2013, a source map is created when your TypeScript is build. This allows you to debug your TypeScript files in the browser. It will map the generated JavaScript to the corresponding lines inside your TypeScript file.  However, this is the theory. When I added some TypeScript files to my MVC application, I couldn’t get it working. When I opened the source files inside the Chrome Developer Tools, the files were empty. When I took a look at the Netwerk tab, I found the following error: It seems that when you host your project in IIS, the .ts extension is blocked by default. So this explained the 404 error. The solution was to add the .ts file extension inside the web.config:

I created this small sample that shows how to write a Durandal ViewModel using TypeScript: