WinJs

Detecting Phone, Desktop or Web with WinJS

I’m my previous post I showed how you can add a website to a universal project and share some JavaScript between all three. This is nice, but I will run into a situation where you’ll have some code that is not supposed to run on one of the platforms. In the C# world you can use compiler directives in situations like this. In JavaScript this is not possible (Although you could create constructions that mimic directives using Grunt for example). WinJS has some functionality build in that can help finding out what platform you are using. There are two properties…

TypeScript, Windows Store apps

Windows Store app with TypeScript and Knockout

In this tutorial we’re going to make a very simple Windows Store app that uses TypeScript. The app is going to use Knockout to handle user input to search patterns on http://colourlovers.com. I assume you have read my previous tutorial on how to set up TypeScript compilation in a Windows Store app. We’ll start with an empty project after adding TypeScript compilation. Packages First we’ll start by adding our dependencies through NuGet. We have a dependency on KnockoutJS, because this is what we need for our bindings. To make the request to colourlovers we are going to use jQuery. First…

TypeScript, Windows Store apps

Enabling TypeScript Compilation in Windows Store apps

TypeScript compiles to JavaScript, thus it can be used in Windows Store apps. Other than with Web applications, where you can configure the way typescript compiles on the project’s property page, with Windows Store apps you’ll have to edit the project file by hand. Which is not that hard. Edit the project file To do this, unload your Windows Store JavaScript application project by right clicking and selecting unload. Right click the project again and select edit. What we need to do is tell MSBuild what it has to do when it encounters a TypeScript file. The whole XML file…

Windows Store apps

Using Grunt to compile .less in Windows Store apps

I was playing with Grunt. Grunt is a JavaScript task runner. It automates a lot of repetitive tasks like minification, unittesting, linting and more. I’ve used it to compile templates and compile .less files to .css. In this tutorial I’ll show you how to do the latter. Before we dive into Grunt you need Node.js. Just go to http://nodejs.org and install it. NodeJS can serve websites, but can also run tools. Like Grunt. Node.js uses a package manager (a bit like NuGet), npm. You’ll be using npm a lot when using Node.js. Getting started First let’s create a new project…

Windows 8.1

About Orbizoid

Intro A few weeks ago my first Windows Store app was certified and it’s available for download now. The game is a rebuild of the game I build for the Js13k contest a while back. Because I wasn’t limited to 13k anymore I added sounds, music and images. I also added a tutorial, settings, the ability to share your hi-score using Share Charm and added your latest scores to the live tile. Let’s have a look how it works. Because the original game was build using HTML and JavaScript I chose to use the same for the Store app. I…

Blend for Visual Studio, Windows 8.1, XAML

Behaviors SDK

When the release candidate of Visual Studio 2013 came available, so did the Behaviors SDK. The Behaviors SDK is somewhat similar to the Expression Blend SDK you might have used before when using Behaviors and Actions. Along with the SDK come a couple of actions and behaviors you can use in your Windows Store applications right away. What are they? Both behaviors and actions are small pieces of code that can be reused throughout your projects. In the case of the new Behaviors SDK the only thing you need to do is implement an interface. A behavior adds some behavior…

Blend for Visual Studio, Windows 8.1

Settings Flyout from Blend

Adding a settings flyout to your application has become much simpler with the release of the Windows 8.1 preview and the preview of Blend for Visual Studio 2013. The settings flyout is now supported out of the box and can be added to your project by using an item template. Adding a Settings Flyout A settings flyout can be added to your project just by adding a new item. You can do this by right-clicking on a project in the project panel and select Add New Item. From the list on the New Item dialog select the Settings Flyout. You…

Design, Windows Phone 8, Windows Store apps

storyboarding apps in PowerPoint

I recently gave a workshop about developing and designing Windows Store and Windows Phone applications. A small part of that was about storyboarding applications in Microsoft PowerPoint. The Storyboard extension is available for users of Visual Studio Ultimate, Premium and Test Professional. To view PowerPoint presentations containing these storyboards you don’t need any of those, you can even view the presentations in the PowerPoint Web App.   Storyboard Shapes If you have Visual Studio installed you’ll probably have the Storyboarding add-in as well. You can find it on the ribbon inside PowerPoint, or you can start PowerPoint Storyboard directly from…

CSS, Design, HTML5, Windows 8, Windows Store apps, WinJs, WinRT

72 design templates for Windows Store apps

I recently tweeted about some upcoming new design templates. At that time these templates were not released yet. Today I stumbled on them again. And it turns out that they are available for free on codeplex. You can see them all here. It’s not recommended to uses these templates as is. They’re provided as Visual Studio solutions in C# and JS and you should change the design to match your brand, of course. UPDATE May 9th 2013: Added 10 more templates to the list. UPDATE January 1st 2014: Added 12 more templates to the list. Here’s the entire list again.…