Monday, March 31, 2014

Using Google Analytics in your Single Page Application

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.

Friday, March 28, 2014

The page at ‘someurl’ ran insecure content from ‘someurl’

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 Verwarde emoticon. 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 Glimlach):

You can start Chrome with an extra command line parameter "-allow-running-insecure-content", which skips the insecure content check.

Thursday, March 27, 2014

SQL Server Performance Guidelines

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, SELECT Column Order When Creating Indexes
    • Make Sure All Tables Have a Clustered Index Defined
  • Schema design:
    • Use DELETE CASCADE Option to Handle Child Key Removal in Foreign Key Relationships
    • Denormalize For Performance

Go check it out: http://www.mssqltips.com/sqlservertutorial/3200/sql-server-query-performance-guidelines/

Wednesday, March 26, 2014

ASP.NET MVC: Route a .html request to an MVC route

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:

Tuesday, March 25, 2014

Knockout: rateLimit

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.

Monday, March 24, 2014

Knockout: dirty tracking

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:

Friday, March 21, 2014

Durandal.js: Enable Razor views

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):

image

    Thursday, March 20, 2014

    SVN2Git: fatal: Cannot setup tracking information; starting point 'remotes/svn/dlb’ is not a branch

    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}\"")

    Wednesday, March 19, 2014

    TF400618: The reporting type of field 'Microsoft.VSTS.Common.StateChangeDate' in work item type 'Feature' conflicts with the reporting type of the existing field

    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.

    Verify features can be configured 

    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.

    Tuesday, March 18, 2014

    Continuous Delivery Posters

    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:

    01_CD_the_idea_low-res

    02_CD_test_strategy_low-res

    03_CD_automated_acceptance_test_low-res

    04_CD_managing_data_low-res

    Monday, March 17, 2014

    Team Foundation Server 2013: Using multiple GIT repositories in one Team Project

    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.

    image

    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:

    image

    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.

    image

    image

    Friday, March 7, 2014

    Application Insights Tools for Visual Studio

    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.

    Thursday, March 6, 2014

    ASP.NET Web API 2: Attribute routing and Url.Link()

    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 }));

    Wednesday, March 5, 2014

    Team Foundation Server 2013: Installation error

    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…

    Tuesday, March 4, 2014

    TypeScript: Enable sourcemap support for an IIS hosted ASP.NET MVC site

    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. 

    image

    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. image

    image

    When I took a look at the Netwerk tab, I found the following error:

    image

    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:

    Monday, March 3, 2014

    Durandal: Write your viewmodels using TypeScript

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