JavaScript, WinJs

Quick note on WinJS templates and controls

Today I was working streaming (https://livecoding.tv/sorskoot) building my new JavaScript Audio Workstation. I wanted to use a template in a custom WinJS control but found it wasn’t in the samples.  Also, the MSDN documentation contained an error which made it even harder to get it to work.

Visual Studio

Create project from existing code | Cordova, PhoneGap, Ionic, Visual Studio

When I start a new Cordova or Ionic project I normally start from the command line. I initialize the project and add some platforms and packages I need to use in my project. I sometimes start coding from VSCode, but there will be a point where I’d like to switch to Visual Studio, the full version. Until recently I started by creating a new project and move the existing code and config files into that. That was until I came across this awesome feature in Visual Studio: “Create New Project From Existing Code Files”. I don’t know when it was added, but I somehow missed it.

Cordova, Windows 10

Preventing Pinch-Zoom in Cordova on Windows 10 Mobile | Cordova

One of the most obvious ways to spot a Cordova app is a pinch-zoom inside the app. On Android and iOS you can use meta-tags and CSS to disable the pinch-zoom and over scroll. But for some reason I couldn’t get it disabled on Windows 10 mobile.

Angular, Cordova, JavaScript, Visual Studio

Debugging AngularJS in Visual Studio 2015

While working on the Cordova Drum Machine I’m currently streaming live at LiveCoding.tv/sorskoot, I ran into a few issues with Visual Studio debugger. Normally I debug my ‘normal’ AngularJS web applications inside Chrome using an extension on the debug tools that shows the context of the selected HTML element. In Visual Studio I do not have these tools available. Here’s how to get information on the Angular context of a selected element. Scope The first thing that’s really useful to gain insight to is the Angular scope. The scope has to be read from a specific DOM element. To select…

JavaScript

Poor Mans jQuery

A lot of people use jQuery in their HTML/JavaScript applications. There’s nothing wrong with that. But I’ve seen a lot of people use jQuery only to make it easy to find elements and they are not using any of the other jQuery functions. It’s pretty clear that writing a single ‘ $ ‘ instead of the way longer usages of various function on the ‘document‘ object, like getElementById. One of the functions on the ‘document’ object is the querySelectorAll function. This function brings a similar experience to vanilla JavaScript by taking selectors as a parameter.  So if we take a…

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):/); });

Unity

How to build a Unity game for Windows 10–part 3

In the previous part of this series we create the gameplay. In this part we’re going to add a scoring mechanism and add some UI that shows that. I also want to change the start of the game a little by randomizing the tiles, because the solution is way to simple: Just click all the tiles once and you’re done. Maybe in a future part we’ll make an editor to create patterns of colors. Let’s start with the randomization. Randomizing Tiles Both changes are made in the code, in the LevelController to be exact. I added a line to the…

Unity

How to build a Unity game for Windows 10–Part 2

In part 1 of this series I showed you how to set up Unity, creating a prefab for the tiles and added the first script for generating a grid of tiles. In this second part I’d like to make the grid interactive and enable the change of colors for the rows and columns in the grid. Tile behavior Lets start by adding a new C# script to the scripts folder. I named this script TileComponent and opened it in Visual Studio. In the script we’re going to add some properties to the tile. First we need an array that will…

Unity

How to build a Unity game for Windows 10

There are various ways to develop apps and games for the Windows Platform. One of them is by using a great tool called Unity. Unity is a development environment and platform to build 3D and 2D games and interactive experiences. There’s a vast community of people creating, sharing and selling assets. The most awesome thing about Unity is that is has a free version you can use for your personal projects. It only shows a splash screen stating that the game is built with the personal version of Unity. There are beautiful examples of games built with Unity (you definitely…

HTML5, Presentation, UWP app

Speaking about JavaScript UWP apps.

Last 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…