OpenLayers 3: Add the Bing Maps Traffic layer to your map

April 7, 2016, Software Development

The following code shows how to add the Bing Maps Traffic layer to your OpenLayers 3 map. First, we have to implement the computeQuadKey function which takes the tile coordinates and calculates a quadkey identifier which is required for the Bing API request: var computeQuadKey = function(x, y, z) { var quadKeyDigits = []; for (var i = z; i > 0; i--) { var digit = 0; var mask = 1 << (i - 1); if ((x & mask) != 0) digit++; if ((y & mask) != 0) digit = digit + 2; quadKeyDigits.push(digit); } return quadKeyDigits.join(''); }; With […] Read more...

Tags: , , , ,

JavaScript decorator to add pre- and post-logic to a Promise

March 6, 2016, Software Development

In this blog post, I’ll describe the simple concepts of JavaScript Promise decorators. They are a simple way to add logic which is run before and after the exection of a Promise (a.k.a. aspect-oriented programming). As soon as you see my two samples, you’ll get the idea… The first sample shows a Promise decorator function which shows and hides a loading screen (I use TypeScript typings to show the types of function arguments): function showLoadingScreen<T>(action: () => Promise<T>) { ShowLoadingScreen(); return action().finally(function () { HideLoadingScreen(); }); } The decorator can be used in the following way: function longRunningAction() { return […] Read more...

Tags: , , ,

Asynchronously loaded Unit Tests with Jasmine and RequireJS

March 1, 2016, Software Development

The following check list shows how to write JavaScript Jasmine Unit Tests where the tests are asynchronously loaded from AMD modules with RequireJS. Download the Jasmine source files and extract the lib directory into an empty folder. Download RequireJS and copy the require.js file into the lib directory. In the lib/jasmine/boot.js file, remove the env.execute(); call from the window.onload callback. Create a SpecRunner.html file in the directory root with the HTML content shown below. As you can see, the embedded script loads the defined Unit Test modules and manually calls the previously removed execute() method: <!DOCTYPE html> <html> <head> <meta […] Read more...

Tags: , , , , ,

Angular 2: Convert input values to the correct type with a TypeScript property decorator

February 24, 2016, (updated on March 1, 2016), 8 comments, Software Development

I recently played with Angular 2 and found an uncomfortable problem: Declaring an input property with a TypeScript type does not guarantee that the input value will always be of this type. This is because the Angular framework may update an input with a wrongly typed value and thus is able to “circumvent” the TypeScript type system. As a result, you may end up with strange and unexpected runtime errors. Let’s have a look at this simple Angular component: @Component({ selector: "my-component" }) export class MyComponent { @Input() enabled = true; showValue() { alert(typeof this.enabled); } } As shown in […] Read more...

Tags: , , , ,

Migrate a TFS repository to a VSTS Git repository

February 17, 2016, (updated on February 25, 2016), Software Development

To migrate a TFS repository to a Visual Studio Team Services Git repository, just perform the following steps: Install the Git command line tools so that the tools are registered in the Windows command prompt Install the Windows package manager Chocolatey Install the command line tool git-tfs with Chocolatey: choco install gittfs Create a local directory for the new Git repository and set the command line’s currect directory to this directory Clone the TFS repository into the local directory: git tfs clone https://[TFSSERVER] $/[REPOSITORYPATH] . --ignore-branches --debug Optionally add .gitignore and .gitattributes files to your Git repository Add the VSO […] Read more...

Tags: , , , , ,

JavaScript Promises: Tips, tricks and best practices

January 15, 2016, (updated on April 11, 2017), Software Development

JavaScript Promises are a very powerful tool to avoid the callback nesting hell. The following article describes some tips and tricks when working with Promises. For developers with C# async/await knowledge, I will also show the async/await representations. With TypeScript, you can use this async/await syntax today. Most modern browsers only support JavaScript ES5 which does not provide a native Promise implementation. This is why you need one of the 3rd party Promises frameworks. When choosing a framework, you should check that it follows the Promises/A+ specification or a polyfill. The samples in this article are implemented using the Q […] Read more...

Tags: , , ,

Inside Async/Await: Synchronize an async method or code block

November 5, 2015, (updated on November 10, 2015), Software Development

Have you ever tried to await a task inside a lock() block? It is not possible, because you can only synchronize synchronous code with the lock keyword. However, in today’s .NET development, async/await is used everywhere and the need to synchronize asynchronous code blocks is coming up quite often. This is why I wrote a simple class which can be used to synchronize asynchronous code blocks. As an example for this article, we have a simple synchronous method which is synchronized using a lock() block: private object _lock = new object(); public void Run(int i) { lock (_lock) { Console.WriteLine("Before: […] Read more...

Tags: , , , , ,

Avoid wrongly scoped injections with a custom Ninject kernel

October 22, 2015, (updated on February 19, 2016), Software Development

I’m currently working on a large project where different teams implement assemblies which are consumed by other teams. We use Ninject for dependency injection: Each assembly has a Ninject module class which registers the available interface-to-implemenation bindings. At the moment, the consumers of these assemblies just know what module classes to load and what interfaces to inject into own objects like ASP.NET controllers or own service objects, but nothing about the scope of the injected objects. Recently we had some nasty runtime errors, because a consumer of one of these assemblies injected a per-request scoped object into a singleton-scoped object. […] Read more...

Tags: , , , ,

Getting started with Entity Framework Code First Migrations

October 12, 2015, (updated on October 17, 2015), Software Development

The following post describes the steps to setup and use Entity Framework Code First Migrations. For more information read this Microsoft page. The sample application shown in this article can be found on GitHub. Initial setup Listed below are the steps to setup a new project with an Entity Framework context, an entity class and an initial migration: Create a new data access project (C# library project) in your solution Open the Package Manager Console in the Visual Studio menu Tools > NuGet Package Manager > Package Manager Console. In the console window, select the previously created data access project […] Read more...

Tags: , , , , , ,

How to implement an enum with string values in TypeScript

I currently work an a single-page application (SPA), where we use TypeScript to access web services. In some places, the sent and received data structures use enums to describe the range of allowed values. I tried to use the enums from TypeScript to access the web services in a strongly typed way: export interface PersonDto { language: Language; } export enum Language { English, German, French, Itialian } When serializing a PersonDto instance to JSON, the language field is converted to a number and not a string as required by the web service API: var person = <PersonDto> { language: […] Read more...