Roel van Lisdonk on April 29th, 2015

I had some input type=”text” html elements inside a kendo sortable. These textboxes couldn’t get focus, I was unable to type in the textbox, due to the fact it was inside a “draggable” element.

(first I thought it was the css property “user-select”, but that was not the case).

 

The fix is documented on the kendo api site:

http://docs.telerik.com/kendo-ui/web/sortable/overview#sortable-widget-with-focus-able-input-elements

 

image

Tags: ,

Roel van Lisdonk on April 10th, 2015

I used the following code to send a free SMS from C#, by using the messagebird REST service.

 

using System;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Threading.Tasks;

namespace DocumentenService.Client
{
public class Program
{
public static void Main(string[] args)
{
    SendSms().Wait();

    // Wait for the user to close this application.
    Console.WriteLine("Press enter to close this application.");
    string result = Console.ReadLine();
}

/// <summary>
/// Send a sms
/// </summary>
/// <returns></returns>
public static async Task SendSms()
{
    using (var client = new HttpClient())
    {
        client.BaseAddress = new Uri("https://rest.messagebird.com/");
        client.DefaultRequestHeaders.Accept.Clear();
        client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
        client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("AccessKey", "live_...");
        var message = new SmsMessage
        {
            body = "SMS send from C#, greetings Roel.",
            originator = 31611111111, // Sender
            recipients = new long[] { 31622222222 } // Receivers
        };

        HttpResponseMessage response = await client.PostAsJsonAsync("messages", message);
        if (response.IsSuccessStatusCode)
        {
            Console.WriteLine("succes!");
        }
    }
}
}

public class SmsMessage
{
/// <summary>
/// Example: This is a test message.
/// </summary>
public string body { get; set; }
/// <summary>
/// Example: 31611111111
/// </summary>
public long originator { get; set; }
/// <summary>
/// Example: new long[] { 31622222222 } 
/// </summary>
public long[] recipients { get; set; }
}
}

Tags:

The following link exactly describes, how I create my Angular v1.3 directives:

http://kwilson.me.uk/blog/writing-cleaner-angularjs-with-typescript-and-controlleras/

Tags: ,

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: