Finally my XPS 13 charged by a USB Type-C dock and connected to a 4k display at 60hz

From the moment I red about USB Type-C and the possibility to charge and dock my laptop with one cable I was eager to try this. My Dell XPS 13 has a thunderbolt 3 / USB Type-C dock and it is able to charge itself via this port. Dell offers a thunderbolt 3 dock, but there are many troubles with it and it is very expensive and it is not compatible with other systems.

So I decided to wait, until a company created a universal USB-C dock that would charge my XPS 13 but also would charge a mac book.

It is even rumored that the new mac pro’s will get USB-C charge ports.

Just last week I found out that CallDigit offers a USB-C dock, that would charge my XPS 13 and would connect to my Samsung 28 inch 4k monitor at 60hz via a display port 1.2.

I live in the Netherlands, so I ordered the dock at:

I ordered the dock on a Monday evening an it was delivered to me on Thursday evening the same week.

I connected all my peripherals to the dock:

  • Samsung 28 inch 4k display u28e590
  • external USB 3.0 2TB HDD
  • external slimline DVD writer
  • senheizer headset
  • wired gigabit ethernet
  • Wireless Microsoft ergonomic keyboard and mouse

Then I plugged the dock into the power outlet.

Then followed the magic:

I took the USB-C cable from the the dock en plugged it into my Dell XPS 13. I booted the Dell XPS 13 and……… Yes, the dock powers my laptop and the Samsung monitor worked, but I noticed that the text was a little blurry, nothing extreme, but I noticed it, most of the time, this is caused by the fact that the Samsung monitor is not working at the native resolution (4k) but a lower resolution like quad hd (2560 x 1440) and this was the case.

After I received a new firmware update from calldigit, this problem was resolved and now my display works perfectly at 4k and 60hz!!!!!


Animate the navigation between pages with CSS3 and Angular 1.x

Just created a code pen to demonstrate the navigation between pages in Angular 1.x by using css3.
The animation should mimic scrolling the pages from top to bottom, now I could have just  used TypeScript,
to calculate the correct scroll position, but in this case I wanted to use pure CSS3.
I had some difficulties to create this animation, because my first reaction was, to try and use ng-if or 
ng-show / ng-hide, to hide the pages that are not visible. After hours of trying, I did not succeed, 
so I tried a different approach, by stacking the pages on top of each other and moving “previous pages” 
outside of the list at the top and moving next pages outside of the list at the bottom, without using 
ng-if or ng-hide.
- by using a translateX you could make the pages scroll from left to right instead of from bottom to top.
- by switching the values for translateY, you could make the pages scroll from top to bottom."

How to pass a function to an attribute directive, without using isolated scope or eval in Angular 1.x

I have created a little POC to demonstrate, how you can pass a function that resides on the scope, to be passed to a attribute directive without using isolated scope or eval in Angular 1.x.

The first button will be focused when the page is loaded.

When you tab on the first button, the default tab action is applied, so the second button is focused.

When you tab on the second button the function, that was passed to the “tab directive” is called. It will set a message on the scope. 



namespace poc {
'use strict';
const app = angular.module('poc', []);
class PocDirective implements ng.IDirective {
public link: ($scope: IPocScope, $element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
public restrict = 'E';
public template = `


            <button id="button-1" type="button">Tab on this button</button>



            <button poc-tab="{ fn: onTab }" type="button">Tab on this button</button>


        <div ng-bind="message"></div>

constructor(public $timeout:ng.ITimeoutService) {
const self: PocDirective = this; = self.unboundLink.bind(self);
unboundLink($scope: IPocScope, $element: ng.IAugmentedJQuery, attrs: ng.IAttributes) {
const self: PocDirective = this;
function onTab(){
$scope.message = "Tabbed on button";
self.$timeout(function() {
const button1 = document.getElementById('button-1');
$scope.onTab = onTab;
interface IPocScope extends ng.IScope {
message: string;
onTab: () => void;
app.directive('poc', ['$timeout', ($timeout) => new PocDirective($timeout)]);
function safeApply($scope: ng.IScope): boolean {
var result = false;
var phase = $scope.$root.$$phase;
if (phase !== '$apply' && phase !== '$digest') {
result = true;
return result;
* We want to able to use this directive in association with other directives on the same element.
* So we don't use isolated scope, to prevent the error:
*      "Multiple directives [..., ...] asking for new/isolated scope on: ...".
* But we want to be able to pass a function to this directive from outside, 
* that's why we parse the value of the "poc-tab" attribute.
class TabDirective implements ng.IDirective {
public link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ITabAttributes) => void;
public restrict = 'A';
constructor(public $parse: ng.IParseService) {
const self: TabDirective = this; = self.unboundLink.bind(self);
unboundLink(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ITabAttributes) {
const self: TabDirective = this;
element.bind('keydown keypress', function (event) {
const tabKey = 9;
const tabIsPressed = (event.which === tabKey); 
if (tabIsPressed) {
const optionsAsString: string = attrs.pocTab;
const optionsAsExpression: ng.ICompiledExpression = self.$parse(optionsAsString);
const options: ITabOptions = optionsAsExpression(scope);
interface ITabAttributes extends ng.IAttributes {
pocTab: string;
export interface ITabOptions {
fn: () => void;
ignore?: boolean; // When true, given fn is NOT executed.
app.directive('pocTab', ['$parse', ($parse) => new TabDirective($parse)]);
angular.bootstrap(document, ['poc']);

Fixing: NPM / Node error on Windows: The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.

I was using Visual Studio 2015 update 3 on Windows 10 x64 and was getting the error: “The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.”, when running some gulp tasks.

I fixed the problem by letting Visual Studio 2015 update 3 use the “current”(at the time of writing) node version (v6.5.0), that was  installed in “C:\Program Files\nodejs”.


  • Download the “current” (v6.5.0) Windows x64 version of node (NOT, I repeat, NOT the LTS version) at
  • Install it
  • Open Visual Studio 2015 > Tools > Options… > Project and Solutions > External Web Tools > Add an entry “C:\Program Files\nodejs”
  • Move the entry to the top of the list and restart visual studio:


No the following steps might not be necessary, but in case the error persists:

  • Remove the node_modules folder
  • Open the solution and project (this will trigger an npm install)
  • Open the Package Manger Console
  • npm cache clean
  • npm dedupe
  • npm install

How to fix: ENOENT: no such file or directory, rename … \abbrev (angular cli)

When I was running “npm install -g angular-cli”, I was getting the following error:

npm ERR! npm  v3.10.3                                                 

npm ERR! path C:\Users\Roel\AppData\Roaming\npm\node_modules\.staging\a


npm ERR! code ENOENT                                                  

npm ERR! errno -4058                                                  

npm ERR! syscall rename                                               

npm ERR! enoent ENOENT: no such file or directory, rename ‘C:\Users\Roe

l\AppData\Roaming\npm\node_modules\.staging\abbrev-69492d5e’ -> ‘C:\Use



npm ERR! enoent ENOENT: no such file or directory, rename ‘C:\Users\Roe

l\AppData\Roaming\npm\node_modules\.staging\abbrev-69492d5e’ -> ‘C:\Use



npm ERR! enoent This is most likely not a problem with npm itself     

npm ERR! enoent and is related to npm not being able to find a file.  

npm ERR! enoent

npm ERR! Please include the following file with any support request:  

npm ERR!     C:\dev\angular2\npm-debug.log                            

npm ERR! code 1

My environment consisted of:

  • windows 10 64 bit
  • node v6.4.0
  • npm v3.10.3

This problem was also solved by @davidrensh solution:

npm uninstall -g angular-cli

npm install -g angular-cli

From <>

How to create an IIS application pool and web site on Windows 10 with PowerShell and Visual Studio Code

Tasks to create an IIS application pool and web site on Windows 10 with PowerShell and Visual Studio Code:

  • Install the Visual Studio Code plugin PowerShell 0.6.2
  • Create a file iis.configuration.ps1 in Visual Studio Code:

    # Note: When run with the Visual Studio Code PowerShell debugger, make sure you use the "x64" debugger,
    #       else you will get an error: New-WebAppPool : Cannot retrieve the dynamic parameters for the cmdlet.

    Import-Module WebAdministration

    # Create application pools
    New-WebAppPool -Name "myapp.localhost" -Force

    # Create websites
    New-Website -Name "myapp.localhost" -Port 80 -HostHeader "myapp.localhost" -ApplicationPool "myapp.localhost" -PhysicalPath "c:\projects\myapp\web" -Force

        • Create a launch.json in the same folder as the iis.configuration.ps1:

              "version": "0.2.0",
               "configurations": [
                      "name": "PowerShell",
                      "type": "PowerShell",
                      "request": "launch",
                      "program": "${workspaceRoot}/iis.configuration.ps1",
                      "args": [],
                      "cwd": "${workspaceRoot}/iis.configuration.ps1"
                      "name": "PowerShell x86",
                      "type": "PowerShell x86",
                      "request": "launch",
                      "program": "${workspaceRoot}/iis.configuration.ps1",
                      "args": [],
                      "cwd": "${workspaceRoot}/iis.configuration.ps1"

          Now you can debug / run the iis.configuration.ps1 file, by hitting F5, make sure you selected “PowerShell” and not “PowerShell x86” on the debug tab:


          Caculate trendline datapoints in TypeScript

          If you want to calculate trendline datapoints in TypeScript, you can use the following code:






          module helpers.math {
          'use strict';
           * Based off:
           * @param known_y - Array of numbers representing the y-axis values, [1, 2, ...].
           * @param known_x - Optional array of numbers representing the x-axis values, when not supplied this parameter will be [1,2,..."y-axis values total count"].
          export function trend(known_y: Array<number>, known_x?: Array<number>): Array<number> {
          const ylength = known_y.length;
          // When "x-axis values" are not supplied, generate it as [1,2,..."y-axis values total count"].
          if (!known_x) {
               known_x = [];
          for (let xcounter = 0; xcounter < ylength; xcounter++) {
                  known_x.push(xcounter + 1);
          // The "data" should be in the format [[x[0], y[0]], [x[1], y[1]]], ...].
          const data = [];
          for (let ycounter = 0; ycounter < ylength; ycounter++) {
               data.push([known_x[ycounter], known_y[ycounter]]);
          let n = 0;
          const results = [];
          const sum = [0, 0, 0, 0, 0];
          for (; n < data.length; n++) {
          if (data[n][1] != null) {
                   sum[0] += data[n][0];
                   sum[1] += data[n][1];
                   sum[2] += data[n][0] * data[n][0];
                   sum[3] += data[n][0] * data[n][1];
                   sum[4] += data[n][1] * data[n][1];
          const gradient = (n * sum[3] - sum[0] * sum[1]) / (n * sum[2] - sum[0] * sum[0]);
          const intercept = (sum[1] / n) - (gradient * sum[0]) / n;
          for (let i = 0, len = data.length; i < len; i++) {
          const trendY = data[i][0] * gradient + intercept;
          return results;




          Unit Test


          const trend = helpers.math.trend;
          'use strict';
          describe('zvdz.helpers.calculate.trend', function () {
           it('given an array of points it should return an array of points representing the trendline of the given points.', function () {
              const known_y = [1,2,3,4,5,6];
               expect(trend(known_y)).toEqual([1, 2, 3, 4, 5, 6]);