Roel van Lisdonk on March 25th, 2015

After an Windows 10 update, my Hyper-V virtual machines, did not have a working internet connection.

To fix this problem I had to:

- Shutdown all virtual machines

- Remove all network adapters of all virtual machines

- Remove all virtual switches in Hyper-V

- Reboot host

- Create new virtual switch

- Add network adapters that use the new virtual switch to all virtual machines

- Reboot the host

- Start virtual machines

 

After these steps my virtual machines were running with working internet connections.

Tags:

Roel van Lisdonk on March 24th, 2015

Lets assume you want to create a "error notification" component and this component contains 2 sub components, a "close button" and a "read more" button in an application called "spike", something like:

 

image 

 

How do I setup my CSS to style the component and it’s subcomponents.

Well I like to name components and subcomponents by what they are and try to keep the names descriptive, but short:

 

<!doctype html>
<html>
<head>
    <title>Research</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Research page">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Icons -->
    <link rel="shortcut icon" href="/Images/icon256x256.png">
    <link rel="icon" href="/Images/icon_96x96.png">
        
    <!-- App styles -->
    <style>
        
        /* Class must be set on the root element of the "error notification" component. */
        .spike-error-notification {
            
        }

        /* Styling for the "close button". */
        .spike-error-notification
        .spike-close-button {
            
        }

        /* Styling for the "read-more button". */
        .spike-error-notification
        .spike-read-more-button {
            
        }

    </style>
</head>
<body>
    <div class="spike-error-notification">
        <button class="spike-close-button" type="button"><span>×</span></button>
        <strong>An unhandled exception occurred.</strong>
        <button class="spike-read-more-button" type="button">Read more...</button>
    </div>
</body>
</html>

Tags:

Roel van Lisdonk on March 20th, 2015

If you want to execute some code, when an image is fully loaded, you can use an custom directive in AngularJS, something like:

(function () {
    /// <summary>
    /// Bind to onload event, e.g. onload image.
    /// </summary>
    "use strict";

    function directive() {
        
        function link($scope, $element, attrs) {

            $element.bind('load', function () {

                $scope.options.load($element[0]);
                
            });

        }

        return {
            restrict: "A",
            scope: {
                options: "=htoOnload"
            },
            link: link
        };
    }

    angular
        .module("hto")
        .directive("htoOnload", [directive]);

}());

Usage:

<img id="locationImage" ng-src="{{ app.locationImageUrl }}" hto-onload="{ load: app.onLocationImageLoad }" />

The $scope contains an object “app” containing a function “onLocationImageLoad”.

The image is dynamically loaded by AngularJS, when the app.locationImageUrl changes.

Tags:

Roel van Lisdonk on March 19th, 2015

If you want to automatically refresh your web page, when a file on disk changes you can use gulp and the gulp plugin: gulp-livereload.

 

Notes

  • Microsoft Visual Studio 2015 has node included out of the box, for Microsoft Visual Studio 2013, you will have to manually install node.
  • Microsoft Visual Studio 2015 has the task runner explorer included out of the box, for Microsoft Visual Studio 2013, you will have to manually install this as a Visual Studio extension.

 

Command prompt

  • Open cmd (with administrator rights)
  • Change directory to folder containing the web project, e.g. cd "C:\..\..\MySolution\MyProjectWeb"

Install gulp globally

  • npm install gulp –g

Install gulp to project

  • npm install gulp –save-dev

Install gulp plugins

  • npm install gulp-jshint –save-dev
  • npm install gulp-notify –save-dev
  • npm install gulp-plumber –save-dev
  • npm install gulp-watch –save-dev
  • npm install gulp-livereload –save-dev

Add gulpfile.js to project

  • Add a gulpfile.js to the root of the visual studio project
  • Add code to the gulpfile:

gulpfile.js contents

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');

// Gulp plumber error handler
var onError = function (err) {
    console.log(err);
};

gulp.task('reload', function () {
    // Change the filepath, when you want to live reload a different page in your project.
    livereload.reload("./index.html");
});

// This task should be run, when you want to reload the webpage, when files change on disk.
// This task will only watch JavaScript file changes in the folder "/Client" and it's subfolders.
gulp.task('watch', function () {
    livereload.listen();
    gulp.watch('./Client/**/*.js', ['reload']);
});

// Hint all of our custom developed Javascript to make sure things are clean.
// This task will only hint JavaScript files in the folder "/Client" and it's subfolders.
gulp.task('jshint', function () {
    return gulp.src([
        './Client/**/*.js'
    ])
    .pipe(plumber({
        errorHandler: onError
    }))
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// When the user enters "gulp" on the command line, the default task will automatically be called.
// This default task below, will run all other task automatically.
// So when the user enters "gulp" on the command line all task are run.
gulp.task('default', ['jshint']);

 

Run the gulp task “watch” with the Task Runner Explorer

This task will watch, the file system for any JavaScript file changes and call the “reload” gulp task, when this occurs.

The “reload” gulp task will tell the browser to refresh itself.

 

image

 

 

Install LiveReload chrome extension

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

 

Start debugging your website from Visual Studio in Chrome and enable the LiveReload chrome extension

image

 

 

Make as change

Make a change to a JavaScript file and see the changes live reflected in your browser.

Tags:

Roel van Lisdonk on March 18th, 2015

 

If you want to dynamically load a template for a directive in AngularJS, just follow the steps found at: https://medium.com/angularjs-meetup-south-london/angular-directives-using-a-dynamic-template-c3fb16d03c6d

 

Something like:

 

HTML

image

 

JavaScript

image

Tags:

Roel van Lisdonk on March 18th, 2015

If the IAppBuilder interface does not contain a “UseWebApi” function, this might be caused by a missing NuGetPackage “Microsoft.AspNet.WebApi.Owin”.

image

 

After installing this NuGetPackage the function was available.

image

 

 

See: http://www.jeffwids.com/post/where-does-iappbuilderusewebapi-come-from

Tags:

Roel van Lisdonk on February 27th, 2015

Windows with a couple of development tools takes up about 126GB of my 128GB SSD, to free-up some space I followed the guide at: http://www.hanselman.com/blog/GuideToFreeingUpDiskSpaceUnderWindows81.aspx

 

Then I moved the "C:\ProgramData\Package Cache" used by Visual Studio to D:\.

 

I did this by following the instructions at: http://superuser.com/questions/455853/can-i-delete-the-the-folder-c-programdata-package-cache

 

1. Move folder from C:\ProgramData to D:\ProgramData

This must be a move of the complete “Package Cache” folder, so after move you will have a folder C:\ProgramData, that does NOT contain the folder “Package Cache”.

2. Create a filesystem junction: mklink /J "C:\ProgramData\Package Cache" "D:\ProgramData\Package Cache"

This will create a filesystem junction, that will point all software that wants to access  "C:\ProgramData\Package Cache" to "D:\ProgramData\Packa Cache".

 

That alone saved me about 6GB.

Tags:

On my home network I wanted to set up a Remote Desktop connection to a Windows 10 machine from a Windows 8.1 machine, by using the credentials of a Microsoft account. Both machines were using the same Microsoft account to login.

 

Turns out I had 2 problems, first on the Windows 10 machine I had not turned on sharing.

When I went to Control Panel\Homegroup, on the right of the screen a text appeared to enabled sharing, when I clicked OK, I could connect with Remote Desktop to the machine, but then I had to enter credentials.

 

Assuming my email address, used to login with my a Microsoft Account is: john@tools.com then you should enter the username as: MicrosoftAccount\john@tools.com

 

Yes you really have to put the text “MicrosoftAccount” in front of the email address.

 

 

image

Tags:

By default C# and JavaScript pass object references by value not by reference, but what does that mean?

Well if you assign an object to a variable, this variable is just a pointer to that object in memory.

(Examples in C#)

var person = new Person
            {
                Id = 2,
                Name = "John"
            };

The variable person is just a pointer to the object in memory, the memory contains the object { Id = 2, Name = “John”}

When passed to a function, a copy of this pointer is supplied to the function, not the object itself.

So when you update properties of the object in the function, the variable outside the function will get updated.

 

But when you set the object to NULL in the function, the variable outside the function will NOT be set to NULL.

 

In C# you can override this by adding the “ref” keyword before the parameter, in that case the pointer of the variable will be passed and thus setting the object to null in the function will set the variable outside the function to NULL.

 

Some unit test to explain this:

namespace Test
{
using Microsoft.VisualStudio.TestTools.UnitTesting;
using System;      

[TestClass]
public class Research
{

[TestMethod]
public void Update_object_properties_should_update_variable()
{

    var person = new Person
    {
        Id = 2,
        Name = "John"
    };

    UpdateObjectProperties(person);

    Assert.IsTrue(person.Name == "Mike");
}

public void UpdateObjectProperties(Person person)
{
    person.Name = "Mike";
}

[TestMethod]
public void Update_object_pointer_should_not_update_variable()
{

    var person = new Person
    {
        Id = 2,
        Name = "John"
    };

    UpdateObjectPointer(person);

    Assert.IsTrue(person.Name == "John");
}

public void UpdateObjectPointer(Person person)
{
    person = null;
}
}

public class Person
{
    public int Id { get; set; }
    public string Name { get; set; }
}
}

 

image

 

More info can be found at:

http://stackoverflow.com/questions/9717057/c-sharp-passing-arguments-by-default-is-byref-instead-of-byval

http://jonskeet.uk/csharp/parameters.html

http://jonskeet.uk/csharp/references.html

Tags: ,

Roel van Lisdonk on January 26th, 2015

When updating Google Chrome 39 64 bit on Windows 8.1 I was getting the error:

Update failed (error: 7) An error occurred while checking for updates: Google Chrome or Google Chrome Frame cannot be updated due to inconsistent Google Update Group Policy settings. Use the Group Policy Editor to set the update policy override for the Google Chrome Binaries application and try again; see http://goo.gl/uJ9gV for details.

 

To solve this problem:

  • Close all Google Chrome instances
  • Start > Run > regedit
  • Find and open HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Update\

If you have the following values listed under the above key then all attempts to update Google Chrome and/or Google Chrome Frame will fail:

  • Update{8A69D345-D564-463C-AFF1-A69D9E530F96}
  • Update{8BA986DA-5100-405E-AA35-86F34A02ACBF}

In my case it was only: Update{8A69D345-D564-463C-AFF1-A69D9E530F96}

After removing this registry key and restarting Google Chrome I was able to update to Chrome 40

Tags: