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']);