untitledLast week I was invited by iSense to give a presentation about JavaScript Frameworks in Universal Windows Platform Apps. I decided my personal goal was to show people that JavaScript is a perfectly legit language of writing your apps for Windows 10, specially when you have a web development background.

I started with an introduction about the way the JavaScript UWP apps work in Windows 10 and talked a bit about the great support of ES6 in Microsoft Edge. I then demonstrated how easy it is to convert a web application to a hosted UWP app, including what you could do in case there’s no internet connection when the app is started. I continued by introducing WinJS and showed how to use oauth in a UWP app in a secure way. I created a simple app that shows your subscriptions from YouTube.

After the break I went over the basics of KnockOutJS, in combination with WinJS, and showed the app from the first demo, but rebuild using Knockout. I added a filter to shorted the list of subscriptions.

The last part of the evening was about AngularJS, again in combination with WinJS. I showed the same app again, this time build with Angular. I added another feature, navigation.

I had a great evening and would like to thank iSense for giving the opportunity. Below are the slides if you are interested. The code for the demos will be available on my GitHub soon.

OAuth in a UWP JavaScript 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 – https://console.developers.google.com/
How to obtain credentials – https://developers.google.com/youtube/registering_an_application
More on the oauth flow – https://developers.google.com/youtube/v3/guides/auth/installed-apps

Twitter: @Sorskoot
Weblog: http://winjs.ninja
Channel: http://youtube.com/c/winjsninja

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 style controls can be found here.

As an example of how you can do this, this is the CSS to change the sliders from the default blue as shown above to a new design.

input[type=range]::-ms-fill-lower {
    background: hsl(320, 100%, 25.1%);

input[type=range]::-ms-fill-upper {
    background: transparent;

input[type=range]::-ms-ticks-before {
    display: block;
    color: hsl(320, 100%, 55.1%);

input[type=range]::-ms-thumb {
    background: hsl(320, 100%, 25.1%);
    padding: 3px;
    border: 1px solid hsl(320, 100%, 55.1%);
    border-radius: 4px;
    box-shadow: 0 0 10px black;

This will make you sliders look like this:

By default, the Visual Studio Android emulator sets its keyboard entry to the hardware keyboard attached to you PC. But it might be very useful when developing apps to work with the software keyboard on Android. In the Windows Phone emulator, you can use a page-up and page-down to enable and disable the keyboard. In the Android emulator you’ll have to change a setting in the OS itself.

To change the setting, got to the Android Settings and to Language & Input. Than select “Change Keyboard”.

Hit the switch to change the input method.

You’re good to go:



When developing applications in Visual Studio I work with the keyboard most of the time. Throughout the years I learned a lot of short cuts to a lot of features. I’m sure most of you know and use these, too. But there are some features or actions that do not work well with the keyboard. For example closing all open tabs or opening the TFS source control explorer. For actions like this I had to use the mouse, just because it was faster than the keyboard. Until I learned about this feature a while ago.

A couple of versions of Visual Studio ago there was a search box inside the toolbar. This search box can double as a command line. If you are using one of the latest versions of VS the search box is still there, but you’ll have to add it to your toolbar yourself. You can do this by clicking on the little triangle at the end of the ‘standard’ toolbar. Then click ‘Add or Remove Buttons’ and select ‘Find’.

Now the search box is back on the toolbar.

Normally when you type in this box and hit enter you’ll search for the text you’ve typed. But… When you hit ‘Ctrl+/’ on your keyboard the search box gets focus and a ‘ > ‘ is placed in there. Now you can enter commands to Visual Studio. For example, ‘>Window.CloseAllDocuments’ to close all open documents. When typing in this box you’ll notice you can a dropdownlist with completions for the command you’re typing. Because all of these commands a bit long to type you can add aliases for them. So in case of ‘Window.CloseAllDocuments’, I’d rather type ‘wca’. To accomplish this hit ‘Ctrl+/’ and type ‘alias wca window.CloseAllDocuments’. From now on you can type ‘wca’ to close all open documents.

Another command I use regularly is ‘tfs’ to access the TFS source control explorer. You can create this alias with ‘alias tfs Team.TfsSourceControl’.

One more thing I want to mention is that you can add ‘External Tools’ to the command aliases as well. One that I use is ‘cmd’ to open a command prompt at the root of my current selected project. I did this by first creating the ‘external tool’. You can open the window below by going to the tools menu and selecting external tools.

The values I entered are:

  • Title: cmd
  • Command: %windir%\system32\cmd.exe
  • Arguments: “C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\vcvarsall.bat”
  • Initial directory: $(ProjectDir)

There are commands for 24 external tools that can be called in the search box. Mine happened to be the 6th. So I created an alias by typing ‘alias cmd Tools.ExternalCommand6´. From this moment on I can hit ‘Ctrl+/’ and type ‘cmd’ to open a command prompt at the root of my current project. Which I find very useful when working with NPM and Bower.

Let me know in the comments below what commands you are using in this command line.




Today I’m adding an AngularJS service to the Windows Store project in Visual Studio. This service is making a call to an external webservice which returns some JSON data. This controller uses a promise to handle the call to the service and when it’s fulfilled the data is shown on the screen.

You can find the code: https://github.com/sorskoot/AngularWinjsDemo


WinJS provides you with a way to create namespaces and work with classes in your code. It provides functionality to create derivatives of your classes and combine them using mixins.

Class and Namespace

There are many frameworks that give JavaScript the feeling of working with OO. So does WinJS. WinJS uses the WinJS.Class.define function to define a class. The function takes 3 parameters. The first parameter is a constructor that is called when the object is instantiated. You can provide parameters to the constructor that can be used when instantiating the object. For example, in the code below a ‘name’ can be provided to the constructor of the ‘Human’ class. If your class doesn’t need a constructor, you can provide an empty function or use ‘null’ (which tells WinJS to create an empty function).

Often your class needs to do a little bit more than just being constructed. After providing the WinJS.Class.define function a constructor, you can give it an object containing functions or fields for the class to work with. These will be available when the class is instantiated. In the example below I added a function called ‘sayHello’ which uses the ‘name’ variable created in the constructor and displays it in a message.

Optionally you can add a third parameter to the constructor which will define static fields and functions. These can be called before the class is instantiated.

In a larger application you probably wrap you code in functions to create scope. In these cases you want your classes to be separated into different files, but possibly available to others too. That’s when Namespaces become handy. You might know namespaces from other languages like C#. They are easy to define with WinJS. Just make a call to the WinJS.Namespace.define function giving it the name of your namespace and an object with the classes. If the namespace already exists, the new members are added to it. In the example I added the ‘Human’ class to the ‘Species’ namespace. I also wrapped the code defining the class and the namespace in a function to create a scope around it. You can try for yourself and see what happens if you try to instantiate the ‘Human’ class without the namespace.


One of the powerful features of Object Oriented programming is Inheritance, with which you can reuse classes by deriving functionality from one to the next. WinJS provides functionality to achieve this in JavaScript. To create a derivative of a class you can use the WinJS.Class.derive function. The function is very similar to the define function described earlier. It takes one extra parameter, the class you want to derive from. It also takes a function as a constructor, an object with instance fields and an optional object with static fields and functions. I extended the previous example a bit and added the new derived class, ‘SuperHuman’. I gave the constructor of this class a second parameter and a new function. Then I added it to the ‘Species’ namespace. At the end you can see the instantiation of the object and calling of the two functions. In the Result window you can see the result of these functions.


Other than languages like C#, WinJS can add multiple inheritance to your applications. This means you can have your class inherit from more than one class and reuse code in more different ways. Creating a mixin is not complicated. In the example below I added an object ‘Job’ with a field and a function. By calling the WinJS.Class.mix function with both the original class, ‘Human’ and the new ‘Job’ object, you can have WinJS mix the two together. And thus use the ‘job’ field and the ‘work’ function from ‘Human’ class. Which is inherited by the ‘SuperHuman’ class, giving that access to these too. There are many ways in which this can be useful when using this in your projects.

WinJS provides a couple of handy mixins for you to use in your project. The WinJS.Utilities.eventMixin and the WinJS.Utilities.DOMEventMixin add event functionality your class. I’ve demonstrated the WinJS.Utilities.eventMixin mixin in the example below. One of the things this mixin adds to your class is the addEventListener function and the dispatchEvent function. To make an event work you also have to mix in the WinJS.Utilities.createEventProperties mixin. In the example below I used this to create the ‘laugh’ event. At the end of the example I added the eventlistener and called the ‘tickle’ function on ‘Superman’ to have it fire the event.


Please use the jsfiddles to experiment with the different functions and use them to create classes of your own. I hope the use of the fiddles helps explaining these functions of WinJS a bit. Please let me know if they do, or if I never should use these again in case they don’t :)

Subscribe to the RSS feed or follow me on Twitter. I also added links to my FlipBoard magazines to the left sidebar of my blog.