Angular, Cordova, Windows 10

Fix unsafe:ms-appx-web issues in Angular and Cordova on Windows 10

During a recent stream over at LiveCoding.TV I ran into some issues with displaying an image in a Cordova app I’m building. This image was stored inside my appx package, but the Content Security Policy blocked it anyways. It turned out I needed to whitelist the ms-appx and ms-appx-web protocols. I modified the initialization of the Angular module to whitelist these protocols for images and hrefs as you can see in the example below: angular.module(‘app’, [‘ngRoute’], function ($compileProvider) { $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|chrome-extension|ms-appx-web|ms-appx):|data:image\//); $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|chrome-extension|ms-appx-web|ms-appx):/); });


OAuth in a JavaScript UWP app

A quick walkthrough on how to get authenticated with YouTube using oauth, in a JavaScript Universal Windows Platform (UWP) app. It uses a few classes from the Windows Runtime. The demo code can be found on my github account at: Guide from YouTube for setting up oauth: Documentation of the YouTube API: Getting your own client ID and client secret: Google developer console – How to obtain credentials – More on the oauth flow – Twitter: @Sorskoot Weblog: Channel:

CSS, Design, HTML5, UWP app

Styling default JavaScript UWP app controls

When working on my drum machine app I started changing the look and feel a little. I started my changing the black and gray to some more bright colors. Pretty quickly I ran into some issues with changing the look and feel of the default controls. The blue color is specified as a named color ‘Highlight’, which seems to be controlled by Windows. After searching for quite a while I came across some MSDN documentation that describe a couple of vendor specific CSS pseudo-classes to alter various elements of the controls. The whole list of pseudo-classes you can use to…