I thought I had CORS all figured out. Of course, like all things programming, the more you think you know the sooner something is going to blow your world wide open. As a guy who codes for the web a lot, these errors are get under my skin. They’re annoying when you know you put a line of code in your server to allow all origins. They’re even more so annoying when the browser (or framework you’re using) tells you that you CAN’T use a wildcard and just allow ALL origins.

Let me leave this link right here:

If you’re having CORS trouble on your server, it would behoove you to click that link there and finally be done with it. If you’re using ASP.NET chances are you’re using a Windows server and you’ll be able to use either the ASP.NET or IIS6/7 solutions.

My current favorite method for handling CORS with ASP.NET applications ( especially if you’re using SIGNALR and UseCors(CorsOptions.AllowAll) isn’t what you need, as browsers still puke with this in place )

             <add name="Access-Control-Allow-Origin" value="http://localhost:58547" />
             <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE, TOKEN" />
             <add name="Access-Control-Allow-Credentials" value="true"/>

This goes in your web.config with <configuration> as its parent element. You can use a wild card in place of the


You CANNOT add another origin to the Access-Control-Allow-Origin. Why? No idea. But if you try, you’ll get an error like this

The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://localhost:58547,;, but only one is allowed. Origin ‘; is therefore not allowed access.



PhoneGap & iOS — Build Submission Pains

If you’re using PhoneGap and submitting builds to the iOS App Store there’s a pretty good chance you’ve gotten an email back from them saying something along the lines of…

Your binary is not optimized for iPhone 5 – – New iPhone apps and app updates submitted must support the 4-inch display on iPhone 5 and must include a launch image referenced in the Info.plist under UILaunchImages with a UILaunchImageSize value set to {320, 568}. Launch images must be PNG files and located at the top-level of your bundle, or provided within each .lproj folder if you localize your launch images. Learn more about iPhone 5 support and app launch images by reviewing the ‘iOS Human Interface Guidelines’ at <; and the ‘iOS App Programming Guide’ at <;.


Missing Info.plist key – This app attempts to access privacy-sensitive data without a usage description. The app’s Info.plist must contain an NSPhotoLibraryUsageDescription key with a string value explaining to the user how the app uses this data.

From a PhoneGap point of view, both of these messages left me with a “The Fuck?” look on my face, many, many times. However, they’re actually very easy to deal with IF you know what needs to be updated in the config.xml of your PhoneGap application.

Error 1

The first TLDR message occurs because a splash screen is missing. When you first launch a PhoneGap app, it’ll use the default PhoneGap Splash Screen. However, when you add your own, if you don’t add them all correctly you’ll get something like this error. Here are the things in my config that help me rid of this error:

<gap:plugin name="cordova-plugin-splashscreen" source="npm" />
<preference name="SplashScreenDelay" value="2000" />
<preference name="SplashMaintainAspectRatio" value="false" />
<splash src="res/splash/splash@2x.png" />
<splash src="res/splash/ios/320x480.png" gap:platform="ios" width="320" height="480" />
<splash src="res/splash/ios/640x960.png" gap:platform="ios" width="640" height="960" />
<splash src="res/splash/ios/640x1136.png" gap:platform="ios" width="640" height="1136" />
<splash src="res/splash/ios/768x1024.png" gap:platform="ios" width="768" height="1024" />
<splash src="res/splash/ios/1024x768.png" gap:platform="ios" width="1024" height="768" />
<splash src="res/splash/ios/1536x2008.png" gap:platform="ios" width="1536" height="2008" />
<splash src="res/splash/ios/1536x2048.png" gap:platform="ios" width="1536" height="2048" />
<splash src="res/splash/ios/2048x1496.png" gap:platform="ios" width="2048" height="1496" />
<splash src="res/splash/ios/2048x1536.png" gap:platform="ios" width="2048" height="1536" />

Make sure that each and every file is a separate file with the dimensions specified. The first image listed as splash@2x.png is a 640×960 file and IN THEORY replaces any sizes you may have missed by leaving off the dimension attributes… this has not been the case in my testing so include them all.

Error 2

So this is something that I’ve only recently seen pop up when using PhoneGap builds and its due to an iOS requirement that when you need access to something on the phone then you have to supply a string describing why. This makes sense if you’re in XCODE and have the info.plist file on hand… but it wasn’t so obvious looking at it with PhoneGap. Another addition to the config file will clear this error up:

<gap:config-file platform="ios" parent="NSPhotoLibraryUsageDescription">
 <string>This app requires access to the PhotoLibrary to allow the user to select an image to use as their profile picture. </string>

using a <gap:config-file> element with the platform listed as either iOS or Android will allow you add items to either the iOS’s info.plist or Android’s manifest.xml respectively. the plist file is really just an XML property file like a .csproj is to Visual Studio. So since the property we want to add a string to  in the plist is named “NSPhotoLibraryUsageDescription”, the parent property on the gap:config-file element contains this string. Inside <gap:config-file> is the actual <string> for describing what your app uses that permission for.

Error 3

Wait – There wasn’t a third error, was there?!?! No, this one isn’t exactly an error but it is a WTF moment. If your icon shows up correctly when installed, but iTunes Connect doesn’t display the correct icon for the builds, this is another config.xml fix ( I wouldn’t dare submit the build for review while the icon was wrong on the builds as I would guess it would show up somewhere else incorrect ). Make sure to have the following in your config:

 <platform name="ios">
   <icon src="res/icon/icon.png" />
   <icon height="57" src="res/icon/ios/icon.57.iOS.png" width="57" />
   <icon height="72" src="res/icon/ios/icon.72.iOS.png" width="72" />
   <icon height="114" src="res/icon/ios/icon.114.iOS.png" width="114" />
   <icon height="120" src="res/icon/ios/icon.120.iOS.png" width="120" />
   <icon height="144" src="res/icon/ios/icon.144.iOS.png" width="144" />

Now here, where the SplashScreen didn’t seem to get overridden… the icon without dimensions has been the only thing to show correct on the builds while the icons with dimensions show correct on the phone itself.

Being less stupid.

This is going to be basically just a ramble — TLDR version at the bottom.

I’ve been learning IdentityServer3 for the better part of 2, maybe 3 weeks now. I’m a self-taught developer with nearing 3 years of development. When I jumped on, I knew how web servers worked to a degree thanks to taking HTML classes and my Net Sec degree but I never understood how underlying frameworks like ASP.NET MVC and OWIN worked. I pressed a pretty button and BOOM a WEB API / MVC Application was born and I could start coding away. For the most part, how it worked was magic to me but I knew which code did what after the project was spun up and was good to go. While attempting to setup my server w/ IDS3 to accept its own tokens for the API it is also hosting… I’ve begun to start understanding what goes on underneath those templates when you hit the button for a new project…

I was tasked to spin up a new API in a language I’m unfamiliar with, where there are no pretty templates to get things up and running… you just have to understand how the underlying framework works. I failed. I had no idea HOW MVC created an API or, as I’m realizing now, what OWIN even was. Each of these frameworks can be used separately or in conjunction to spin up a flavor of Web API whether you’re using MVC’s global.asax which is tied to a code-behind file for configuration or using OWIN to specify a start-up file which does about the same thing, with a different flow.

I never really took the time to actually learn how the hell these things worked, and I see now I’ve suffered because of it. Here’s an example of what I’ve been talking about:

In an ASP.NET project, there’s a file called global.asax…

The Global.asax file, also known as the ASP.NET application file, is an optional
file that contains code for responding to application-level events raised by 
ASP.NET or by HttpModules. The Global.asax file resides in the root directory of 
an ASP.NET-based application.

When you’re spinning up a WEB API with ASP.NET, this file routes to a code-behind which begins all the configuration for the server. So the markup for it would look like

<%@ Application Codebehind="Global.asax.cs" Inherits=" WolfSoftware.IdentityServer.WebApiApplication" Language="C#" %>

The codebehind for it would then by default have some configuration done

public class WebApiApplication : HttpApplication
    protected void Application_Start()

Up until now, this was all really magic code for me. I didn’t understand how this really configured the server, just that it did.

So now, throwing OWIN into play…

Open Web Interface for .NET (OWIN) defines an abstraction between .NET web 
servers and web applications. OWIN decouples the web application from the server,
which makes OWIN ideal for self-hosting a web application in your own process, 
outside of IIS.

So OWIN can do exactly what ASP.NET just did, but without having the global.asax and depending on markup. With OWIN, you declare a class as the startup class and begin configuration from there.

[assembly: OwinStartup(typeof(LobbyGuard.IdentityServer.Startup))]

namespace LobbyGuard.IdentityServer
   public partial class Startup
      public void Configuration(IAppBuilder app)
      private void ConfigureWebApi(IAppBuilder app)
         HttpConfiguration config = new HttpConfiguration();
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }

This has a bit less configuration than what was shown with the ASP.NET but the idea is there. Now that I know (I feel like I did, it just didn’t click when I needed it to…) how it all works… I completely understand now how to spin up the Web API in the new language I was tasked with because I know how more about the framework itself.


I didn’t know how to spin up a ASP.NET or OWIN Web Api in a new language because I’ve been used to C# templates doing the configuration for me; Now I understand the differences between the two, how they both work, and how I could use said new language.

I don’t know what was mystifying me before about any of this, did I just not look? did I not read? Time to be a little less… stupid.

Getting started with package management using NPM’s package.json file in VSCODE

The files used in this blog can be found here:


I’ve really been getting into VSCode recently when doing my own projects and even at work. One thing I’ve noticed is that packages seem to be handled a little differently between using something like a feature-packed IDE like Visual Studio 2015 compared to Visual Studio Code or another editor like Sublime or Brackets. In Visual Studio 2015 you generally have proj files like a .csproj and/or a .sln which would handle packages using a list of entries in a package.config file which is used by NuGet. The entries would probably look a little something like

<?xml version="1.0" encoding="utf-8"?>
 <package id="angularjs" version="1.5.8" targetFramework="net452" />
 <package id="bootstrap" version="3.3.7" targetFramework="net452" />
 <package id="jQuery" version="1.9.1" targetFramework="net452" />

This package.config file would install angularjs, bootstrap, and jquery to a nice and tidy Scripts folder and you wouldn’t really have to worry about them again unless you wanted to update the packages. Other Developers coming onto the project would most likely already have those files in source or would be able to run a NuGet restore to get those files into their environment. Package.json works kind of in the same way except it uses packages from NPM, stores those packages in a node_modules directory, and generally come with insanely long file paths that drive Windows and myself mad (the package will have dependencies, which will have dependencies, which will have dependencies… etc, outcome = long ass file paths).

Getting Started

Alright… so lets start off with an empty website and lets add some basic files to start off


All of these files are empty except the .gitignore which has one entry… node_modules/
This is because node_modules shouldn’t be placed into source and only on the machines that will be developing the app or the server running the app (so part of the build/deployment process would be to run ‘npm install’ so that all the dependencies are available on deployment)

Ok. So what the hell do we do now? We’ve got an empty package.json file… what goes in it? Well, with a little help from VSCode’s intellisense… it’s pretty easy to know what can go in this file along with some help from NPM’s documentation located here

As its a JSON file, you might be able to infer that you’d start off with some squiggly brackets and that properties will be listed in normal JSON format using “property”: “value”… so what happens when we attempt to add a new property?


Well hi there intellisense, long time no see, are those the properties I can use in the file? Why yes, yes they are. I can see two properties already that’ll be helpful, 1) author and 2) dependencies. So if we begin to enter author, we’ll see what this property is suppose to contain in terms of it’s value.


OK Cool, so the author property is supposed to include information about me. Now, in your own project you don’t really need to add this property as its really more helpful for when you actually put a lib on NPM so people can know who created the package as that’s what you’re essentially doing by using package.json, you’re entire project is now technically a ‘package’. Filling out the author though intellisense will allow you to tab-complete a new object for its value so once that’s done you can then start to add properties of the object belonging to ‘author’


As you can see, the object that belongs to ‘author’ contains email,name, and url properties. Lets fill those out really quick. After adding those properties to the object ‘author’ will be happy it has been given the correct data. But you may notice there is a green squiggly under the very first bracket… why is this?


Looks like the package.json file is looking for two properties right off the bat that we don’t have, lets go ahead and add those. After seeing how the author property was added, you should be able to have intellisense help you add these two properties. You should end up with something that looks like this:


Ok. So that’s nice, we’ve got this information in our package.json but… WHAT ABOUT THE DEPENDENCIES?!?!? That’s what you’re here for in the first place, right?

Adding Dependencies to your package.json file

So if you read Getting Started section you’ve been exposed to the intellisense provided by VS Code in the package.json file and you might be able to conclude that intellisense will also help us with adding dependencies… you’d be correct. Remember seeing dependencies in the intellisense from before? Lets try adding that property now.


By clicking on the blue ? icon next to ‘dependencies’ when intellisense pops up, you’ll see the full version of the description for this property. Ok, so this property contains the dependencies of our package AKA our project. Let’s tab complete it and see what we get.


Alrighttttt, so this is where intellisense abandons us, and for good reason… there’s a shit ton of packages out there and trying to fit them all in that intellisense window would be kind of asinine and probably be a humongous load to handle. So, in order to begin adding the dependencies we want, we have to go checkout for the packages we need. So say we want Angular…


That first package looks right to me, lets add it to the dependencies. Add “angular”: “” under dependencies and that will tell package.json to install any version of angular available, which means it will choose highest version it can find and install it.


What if we want a specific version, or, near a specific version if that version cannot be found? Well, intellisense can actually help us out here but it requires the first number and decimal to pick up. We can see the current version on npmjs, the screenshot above shows that angular is currently on 1.5.8 so lets start to define the version as 1.5.8… but wait… what is that intellisense?


VSCode can pick up on the rest of version… but sometimes there are different options that’ll show up here. Sometimes you’ll get the prefixes on the version to appear to which show how can infer which version to use based on a specific version. Here’s the documentation from to show you your available options for versions:


So we now know that we can do a lot of different things when specifying the version such as expecting an exact version, multiple ways to choose a version close to the one we specify using > and < variants as well as using git repositories to get packages instead of NPM’s repository. Lets try finishing the angular dependency by using an exact version then adding another dependency to jQuery but use a variant of the version selector.


Intellisense on jQuery is giving me the option to use the approximate version, so lets give that a shot. Ok. Cool. How do we actually install these dependencies now?

Installing your dependencies

If you’ve followed through this far, you might realize I’ve made a mistake. The version needs to be in a specific format for node, something like v1.0.0 instead of 1.0 so lets go ahead and change that now.


After you’ve filled out your package.json with the dependencies (and fixed the version number!) all you have to do is run ‘npm install’ through the command prompt or a terminal. I prefer using VScode’s built in terminal which can be opened by pressing CTRL + ` (backtick) at the same time.


If you look in the TERMINAL window in bottom-middle of the screen you can see ‘npm install’ was ran, a few errors about missing details in the package.json file which aren’t required and the packages were installed. Looking at the Explorer pane on the right you can see that there is now a node_modules directory with angular and jquery installed.


Congratulations – You’ve officially created your first package.json file and installed dependencies onto your machine!

TypeScript definition files

As you may know, TypeScript is a superset of JavaScript. However, that doesn’t mean when you use a framework such as Knockout or Angular that TypeScript will be able to interpret what you’re trying to do. Typescript allows you to  use the keyword ‘declare’ on a variable to indicate that it’s supposed to be from an external resource. This will prevent errors but we don’t get any intellisense. This is a pretty error prone way to work, hmm?


Here’s an example of using Declare to define ko. Now… notice something wrong in that code?


What the hell is an oberserverable?! This was an a mistake I honestly didn’t mean to make when I was going to show off what ‘declare’ does. But there it is. I created an error in the first 3 lines of code because I always screw up typing ‘observable’

In order to solve this, TypeScript allows you to make use of Type Definition files. These files allow TypeScript to utilize the frameworks you want to use instead of flying around without that oh-so handy intellisense. Where does one get a Type Definition file? Well…

There are TONS and TONS of definition files for TypeScript in the link above, including knockout. Download the file or copy/paste the code into a new one, whatever works. I’d recommend putting it somewhere close to your .ts, but hey, go crazy if you want. Now, if you’re using an editor like Visual Studio you can just drag and drop the file into your .ts and it’ll create a reference to that file, if not, you can just manually enter the reference.




****This reference is supposed to be commented out! Its not actually used in the JavaScript that gets transpiled! It ONLY helps TypeScript****

Now that there’s a reference to the Knockout Definition file, if I remove my declaration of the variable ‘ko’, I’ll see an error where I misspelled observable.


If I delete my crappy spelling and try again…


Oh… Well hey there intellisense… long time no see buddy.

The definition file even takes the intellisense a step further than what you normally get in regular JavaScript. Say I have a observable and placed “” as the default value. In TypeScript, this will be recognized and intellisense will show you that a string is supposed to go in. JavaScript does not do this because JavaScript doesn’t care. JavaScript is a Honey Badger.






If you try to put a string for the name value, everything is A-OK; If you try to pass in a number it gives you a red squiggly telling you that the value isn’t the correct type.


Getting Started with TypeScript in Visual Studio Code


TypeScript lets you write JavaScript the way you really want to.
TypeScript is a typed superset of JavaScript that compiles to plain 
JavaScript. Any browser. Any host. Any OS. Open Source


TypeScript brings classes, types, constructors, interfaces, and a whole bunch of other shenanigans to JavaScript. Learn more @ because they know all the stuff and things.


  1. Visual Studio Code
    (Any IDE will work but I’ll be setting this up with VS Code)
  2. TypeScript installed (npm install -g typescript)
    This installs the compiler that converts the .ts to .js
    (go to for npm to work in cmd)

Getting Started

Visual Studio Code allows you to work on a single file or in a directory. Navigate to a folder on your drive and select it to be the folder you work in.Some steps if you need help:

  1. Click ‘File’
  2. Click ‘Open Folder…’
  3. Navigate to folder
  4. Click ‘Select Folder’

The folder will now open in Visual Studio. Click it in the explorer so the the little drop down arrow triggers and then select new file.


A prompt appears to name the file, give a name with a .ts extension (like typeScript.ts).

When the file has been created, it will open in the right pane as an empty file. If you’re used to using a language like C#, this will be a breeze for you. We can start filling this file up by creating a new class. Place the following, or something similar, into the file:


A class is defined by prefixing it’s name with the keyword ‘class’ and then two curly braces for all the code to go in. We can then put a function inside that’ll do some work for us, you may notice some familiar keywords like ‘public’, ‘static’, and ‘void’. These all do exactly what you think they do if you’re familiar with them. The public keyword sets the accessibility level on the function, the static keyword means it doesn’t have to be newed up, and the void represents the nothingness that the function returns… deep. Inside the function is a normal console.log() with a string.


Compile/Transpile… gimme the .js

Now that we’ve got some TypeScript down… how is it actually used? Visual Studio Code comes with a built-in Task Runner that will need to be configured to compile the TypeScript file down to a JavaScript file that’ll actually be used in your view.  Press F1 to open Visual Studio Code’s command prompt and put in Configure Task Runner as the command, press Enter when done. This will have created a .vscode folder in your working directory with a tasks.json file in it.


Scroll down until you see something familiar to what’s above. the “args” value should be the location of your .ts file in your working directory. When you compile the .ts file it creates a .js file, so I have my .ts in a scripts folder inside my working directory.(TYPESCRIPTLEARNING is my working directory, .vscode and scripts are two folders inside my TYPESCRIPTLEARNING folder). After your change the args to your .ts file’s location save the file. You should now be able to compile the file by pressing CTRL + SHIFT + B which is the shortcut for Run Build Task. A little spinny thingy appears at the bottom left of Visual Studio Code to let you know the task runner is working in the background. When it stops you’ll have .js inside the same directory as your .ts file.


So as you can now see, the TypeScript has compiled/transpiled down to JavaScript and now that we’ve got the JavaScript we can attach it to a view. By the way – doing things in TypeScript and reviewing what it compiles down to is actually a pretty neat way to learn some new tricks in JavaScript. Create an index.html in the root of your working directory and add a script reference to the JavaScript file that was generated.


Save the file and open it in a browser, then open the browser’s developer tools to see the log!


So now that we know how to create a TypeScript file, fill it with a class, get some output, and how to generate the JavaScript for it. Just a heads up, if this was a full fledge version of Visual Studio the JavaScript would be auto-generated and we wouldn’t have to compile this every time.


Properties, Constructors, Variables

Look over this next block of code, would you kindly.


I’m going to guess you can tell what this code does just by looking at it. Lets run through it though just in case.

main() on (lines 2-6) now creates an instance of the Greeter class on Line 4 passing in a string “HULK”. The string passed in is used by the constructor on line 12 to set the value passed in equal to the name property on the Greeter class. You may notice the syntax used to create the variables in the constructor and property, you define the name of the variable and you can declare its type by adding ‘: typeName’ where typeName can be ‘number’, ‘string’, or ‘any’. The property is also referred to throughout the class using the this keyword, this.myProperty,  which may be a little new to you if you’re coming from C# where property names don’t require the keyword to use.

Continuing on, line 5 invokes the greet function of the Greeter class and also passes in a string. Line 16 defines what the greet function does, it takes a variable of type string, has a return type of void just like main(), and then logs a message that uses the name property and the string passed into the function.

If you build this using the task runner, the same way as before using CTRL + SHIFT + B and open up the view, you’ll see the new message appear in the log.


So we’ve now got at least and understand of how the basic building blocks work in TypeScript, nothing fancy as of yet. We know how to set up Visual Studio Code to be able to read and compile/transpile ( I’m really still not sure which term I’m supposed to use, I feel like transpile is a better word for it than compile ) and how to use the generated JavaScript file in a view. I’m probably going to be doing some follow up posts with TypeScript and eventually with Angular 2 so if this interests you, stick around for more posts 😀


Creating an HTML5/AngularJS hybrid mobile app using the Ionic CLI

The Ionic Framework is an open source front-end SDK which helps developers create beautiful hybrid HTML5 mobile applications alongside with AngularJS. Creating an app while using the Ionic Framework allows for the GUI of mobile applications to be built uniform manner with relative ease. With the CLI commands provided after downloading Ionic Framework it only takes seconds to begin work!

Installing the Ionic Framework

Ionic is installed with npm, which means that Node.js will need to be downloaded and installed first. This is easily done by visiting and clicking the INSTALL button right smack dab on the front page.


Once node is installed, you have access to using the npm (node package manager) which will allow you to install thousands of different packages like Ionic. Open up a command prompt (or Power Shell) and issue the following command

npm install -g Ionic

This will install Ionic globally on your system and allow the Ionic commands to be used from the command line


Creating an Ionic application

Now that Ionic has been installed globally, creating the base application will take only seconds using the command line. The Ionic CLI provides a couple templates to create an application, the possible templates are Blank, Tabs, and Sidemenu. Let’s take a look at what these will look like, from the command line, enter the following:

Ionic start myTabsApp tabs


This command will create an app called myTabsApp with the tabs template in place in whichever directory you are currently in.


We can now launch the application as-is by using the Ionic Framework command Ionic serve, this will create a locally hosted version of the application for you much like starting an application in Visual Studio would do.


The tabs application will look like this once ‘served’


As the template name indicated, there are 3 tabs at the bottom of the page which allows you to switch between different pages using provided tabs. If we used Ionic Start to create an app using the sidemenu template, this is what it would look like:


and finally, here’s the blank template which provides the most basic form of the app with of course all the required resource to build out what the other templates provide from the get-go


next, let’s take a look at the different directories that were generated and try to make some sense out of it. Here’s what the structure of an Ionic application looks like:


There’s a couple directories here that control different parts of the application. the www directory is where the actual application is housed and contains all the html, js, css, and image files that your application will use. The resources folder contains items like icons and splace screens for the different platforms you’ll be deploying to like Android and iOS. The plugins directory includes the different ionic and cordova plugins that will help your application feel more native such as the com.ionic.keyboard plugin. The platforms folder contains the code required to build your application for the different mobile platforms and also helps to emulate the app using Cordova’s or Ionic’s emulate CLI commands.

By default, the platforms folder will be empty, in order to add the platforms you want to build for issue the following command

Ionic platform add <platform>

where platform could wp8 (windows phone 8), android, ios, or blackberry. Once a platform has been added, you’ll have the ability to emulate your application for that given platform using the following command

Ionic emulate <platform>

As a heads up though, some extra setup may be required in order to get the emulators to work correctly.

var about = JsonConvert.DeserializeObject <Collection<DevStuff>> (;