Using Gulp.js to check your code quality

In this blog post I want to show you how you can use Gulp.js to automate some tasks to check the quality of your code. Before we deep dive into the subject and the coding examples I first want togive you a short introduction on what Gulp.js actually is. So if you already know what Gulp.js is about you can move on to the next chapter. Easy to useBy preferring code over configuration, gulp keeps things simple and makes complex tasks manageable.EfficientUsing the power of node streams, gulp gives you fast builds that don’t write intermediary files to disk.Previous statements are quoted from the Gulp.js homepage. Gulp.js is just like Grunt.js a task runner build on Node.js aka io.js. Where you define your tasks in Grunt.js in a configuration based style, you will be defining your tasks in Gulp.js more in a code based style. For both task runner there is a wide variety of plugins available. So what is the real power of Gulp.js? In my opinion that is the utilization of the Node.js streams, which makes Gulp.js a very fast and memory efficient task runner. The difference between Gulp.js and Grunt.js can especially be noticed when working on larger projects, with huge amounts of files. In many cases developers are limiting the usage of both task runners to only their javascript projects. As I showed you last time Grunt.js can also be used to automate some of your .Net/c# tasks I want to show you today you can also use it on php projects. So here is my call for action. Stop limiting yourself and try to apply it on any project you’re working on, no matter the language!

Packer.io machine building and provisioning part 2

In the previous part of this series we had a look on building a bare Debian VM with the bare minimum packages installed to run a web server. In this part we will have a look on how we can improve our packer script with user variables and how to use the file and shell provisioner. User variablesVariables can be easily added to the packer script by adding following JSON. 1234567891011{ "variables": { "username": "root", "password": "r00tme", "memory": "1024", "cpus": "1", "database_name": "{{env `DB_NAME`}}" }, "builders": [{ // Left for brevity} Best practice is to put your variables as the first property in your JSON, before your builders. This way you have all the configurable values to your script quickly accessible. As you can see we define for each variable a default value, which will be used as the value when the user doesn’t provide one. For the “database_name” variable I used a special default. This default will be retrieved from your environment variables. You can set this kind of variable just as you would set any other variable from your command line/shell.

Packer.io machine building and provisioning part 1

Large development teams are often coping with the “It works on my machine” syndrome. One solution to solve these kind of issues is by give each single developer the same VM, which is most preferably the same as your production server. So imagine your company is building a web application. The web application is hosted on a Debian server using Apache, MySQL and PHP. So considering these preconditions I will give you a simple example to get your machines scripted en fully provisioned. In this first part of these series we will zoom in on the packer.io builders. So let me first explain you what packer is by quoting some statements of their webpage. Packer is a tool for creating identical machine images for multiple platforms from a single source configuration.Modern, AutomatedPacker is easy to use and automates the creation of any type of machine image. It embraces modern configuration management by encouraging you to use automated scripts to install and configure the software within your Packer-made images. Packer brings machine images into the modern age, unlocking untapped potential and opening new opportunities. Works Great WithOut of the box Packer comes with support to build images for Amazon EC2, DigitalOcean, VirtualBox, and VMware. Support for more platforms is on the way, and anyone can add new platforms via plugins. In order to create an image for a specific platform packer uses builders. Since I don’t want to zoom in on creating your own builder plugin for your own platform and I don’t want you to have more cost to get up your VM I will use the VirtualBox builder in this example. VirtualBox is free to use, so if you don’t have it already installed on your machine please first install VirtualBox to continue with this example. VirtualBox will run on following OSes: Windows, Linux and Mac, so no matter what OS you’re on, you can continue reading.

Using Mocha Chai Sinon to test Node.js

In this article I’m going to show you how to write tests for your NodeJS application using Mocha, Chai and Sinon. Mocha is a feature-rich JavaScript test framework running on node.js and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. One of the cool things is you can choose your own assertion style when writing Mocha tests. In this article I will use Chai to do my assertions. Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any JavaScript testing framework. Chai supports 3 assertion styles. Should, expect and assert. This makes Mocha and Chai the ultimate combination to make your testing suite completely fit your own project needs and desires. As a mocking framework I choose Sinon since it integrates neatly with Mocha and Chai and dozens of other test frameworks. Standalone test spies, stubs and mocks for JavaScript. No dependencies, works with any unit testing framework. In order to start with writing your tests we first need to install Mocha, Chai and Sinon. Since I use Mocha for multiple projects I choose to install Mocha globally. 12npm install -g mochanpm install --save-dev mocha chai sinon To be sure the consumers of my node package also have mocha installed I also add it to the dev dependencies. Since I installed Mocha globally it won’t be installed in my package folder again. Now we can actually start writing our tests.

Automate your development tasks using Grunt

Grunt is an extremely useful Node.js package to automate lots of development and continuous integration tasks. The Grunt eco-system has lots of packages available on npm. This enables us to quickly setup our development/continuous integration environment. Grunt tasks mostly have two required properties. An files array, which is used to configure on what files the tasks is executed, and an options property which configures some task specific settings. The files array supports the globbing and minimatch pattern to match files based on the provided expression. So what tasks could you use for your projects, or for which project can you use Grunt? How do I configure Grunt tasks? How do I execute them? All these questions I try to answer for you in this article.

npm tips and tricks

In my previous post I showed you how easily you can create a simple webserver using Node.js. In this post I want to show you how to make more advanced usage of node package manager. npm initUsing node package manager you can get an even quicker start of your project by using the npm init command. So let’s get started by opening a command prompt (on windows open the Node.js command prompt). Then create a new folder and navigate into this newly created folder. In the folder execute following command and answer the questions or press enter for the defaults. 1234567891011121314151617181920212223242526272829303132333435363738394041424344Your environment has been set up for using Node.js 0.10.17 (x64) and npm.Press any key to continue . . .C:\Users\Marco> mkdir NodeJsPackageExampleC:\Users\Marco> cd NodeJsPackageExampleC:\Users\Marco\NodeJsPackageExample> npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sane defaults.See `npm help json` for definitive documentation on these fieldsand exactly what they do.Use `npm install --save` afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.name: (NodeJsPackageExample) node-js-package-exampleversion: (0.0.0) 0.0.1description: Total package awesomenessentry point: (index.js)test command:git repository:keywords: package, awesomenessauthor: Marco Franssenlicense: (BSD-2-Clause) MITAbout to write to C:\Users\Marco\NodeJsPackageExample\package.json:{ "name": "node-js-package-example", "version": "0.0.1", "description": "Total package awesomeness", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "package", "awesomeness" ], "author": "Marco Franssen", "license": "MIT"}Is this ok? (yes) yes After answering the questions the result should be something like above. As you can see I have changed the default name. By default node package manager uses the folder name. Play around yourself to get the desired result. You can also change the package.json after it is created. Why do we need this package.json file?

Starting with a Node.js webserver

Before starting to explain how you start your first Node.js project for building a simple web server I will first explain you what Node.js is. To do so I just include a quote of the Node.js themself, because I don’t like to reinvent the wheel. Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. The next thing you should know is about the Node.js Package Manager (NPM). Using NPM you can benefit from the thousands of open source packages so you won’t have to build everything yourself. I suppose you already have installed Node.js. Let’s start with a simple Hello World in Node.js by creating a file called hello-world.js and execute our script to show the result. hello-world.js1console.log('Hello World'); We can execute the script using following command. (On Windows open the Node.js command prompt) Navigate to your folder containing the just created hello-world.js file and execute the script using node. 123456Your environment has been set up for using Node.js 0.10.17 (x64) and npm.Press any key to continue . . .C:\Users\Marco> cd MyHelloWorldCodeFolderC:\Users\Marco\MyHelloWorldCodeFolder> node hello-world.jsHello World

CI with Jenkins, MSBuild, Nuget and Git part 4

In part 1, 2 and 3 I showed you how to create a simple MSBuild script and how to execute it from the command line. We had a look at how to clean your output directories, download the Nuget packages, compile your code, run MSpec tests and creating a code coverage report. In this last part of this series I will show you how to integrate it with Jenkins. First of all we want Jenkins to pull the latest code from Github as soon as somebody has pushed new code to Github. To do this we need to install the Github plugin in Jenkins. We will also install the “MSBuild plugin” in Jenkins to be able to use MSBuild in Jenkins and the “Html publisher plugin” to publish the Coverage and MSpec reports. Also install the “Jenkins Git plugin” to configure the repository in Jenkins.

CI with Jenkins, MSBuild, Nuget and Git part 3

In the previous parts (part 1, part 2) of this series I described how to clean, download Nuget packages and build your solution using MSBuild. In this part I will explain you how to create a MSpec MSBuild target and a Code coverage MSBuild target. MSpec is a testing framework which enables you to write living specifications. Using the MSpec console runner you can easily generate an html report. This report can later on be published using the Jenkins report plugin. By publishing this report we have some documentation on the specifications of the software available and because we did write the specifications using MSpec we also have unit tests in place. So that’s why I call it living documentation. :D For generating the code coverage report we use the xml output of our MSpec tests. These reports will also be published using the Jenkins report plugin. To do so I use OpenCover and ReportGenerator. All three packages are installed in my solution using Nuget. So the paths in my build script are based on the paths of my source/packages folders.

CI with Jenkins, MSBuild, Nuget and Git part 2

In part 1 of this blog series we had a look at a very basic MSBuild script which enables us to compile our projects. For doing this I provided you guys with a simple batch file to make it even more simple to execute the build script. In this episode we will focus on cleaning the folders before building again and getting the Nuget packages using Nuget package restore. The latter I will explain further for you first. Nuget package restore can be enabled in Visual studio. A best practice is to enable this always, because then we won’t have to put all Nuget packages in source control. By enabling it, every team member will download the missing packages automatically when building his project in Visual Studio. However the build server won’t do this by default so we create a custom target in our build script to make this happen.

CI with Jenkins, MSBuild, Nuget and Git part 1

Very lately I have worked on setting up some continuous integration (CI) using MSbuild for my c# project. In this blog series I will explain to you how to set up continuous integration. First of all we will start with creating a MSBuild script which will compile our code. We will also create a small batch file for easy executing the MSbuild script. When that is in place, we will add several targets to the build script to run for example unit tests, integration tests, code coverage, packaging etc. So we will take the agile approach and improve our build process based on validated learning. First of all we need some basic knowledge about MSbuild. I think there are enough pages around on the web which will give you a basic introduction. A good starting point would be the MSDN documentation for MSBuild. Let’s consider we have the following project structure within our Git repository / local file system. src (contains our source code) lib (contains build output, and third party libs not available on nuget) reports (contains code coverage reports, test scenarios and test results) ci.msbuild (your msbuildfile) ci.msbuild.cmd (your batch file to execute the build on your local machine)

Recap my online year 2012

The year 2012 was for me a year that went way to fast. In the year 2012 I learned a lot new stuff, wrote several blog posts and read lots of blog posts and articles. First of all I want you to give a list of all blog posts I wrote this year. You can find the complete list here http://marcofranssen.nl/2012/ and here http://marcofranssen.nl/2012/page/2/. JavaScript http://marcofranssen.nl/writing-modular-javascript-without-polluting-the-global-namespace/ http://marcofranssen.nl/knockout-js-mappings/ Windows 8 http://marcofranssen.nl/install-windows-8-consumer-preview-on-vhd/ http://marcofranssen.nl/install-windows-8-from-rusty-256-mb-usb-stick/ Windows Phone http://marcofranssen.nl/minesweeper-7/ http://marcofranssen.nl/shortify-for-windows-phone-7/ http://marcofranssen.nl/sokoban-7/ http://marcofranssen.nl/windows-phone-theme-colors/ ASP.NET MVC http://marcofranssen.nl/secure-your-web-app-fluently/ .NET C#  http://marcofranssen.nl/delegate-your-equality-comparisons/ Powershell http://marcofranssen.nl/unblock-downloaded-files-with-powershell/ I even wrote a non-technical article http://marcofranssen.nl/pitching-equals-invisible-convincing/ Second I want to share my starred articles from my reading archive. I used pocket to bookmark, read and archive my articles, which enables me now to share all starred articles with you.

Knockout JS mappings

Knockout JS is a JavaScript library for creating MVVM JavaScript libraries. In a previous post I already showed some of the cool features of Knockout. http://marcofranssen.nl/knockout-that-cascading-dropdown/ If you want to spike your knowledge on Knockout a little more first, please visit Knockout’s documentation. In this article I want to zoom in on the Knockout mapping plugin. The Knockout mapping plugin enables you to easy map your JSON object into an observable JavaScript object. So here is a short example of what you’ll be able to do with it. So when you do an ajax request and receive a JSON result you can for example do the following. 12345678910111213141516var viewModel;// result could look like this: "{ "personId": 1, "firstName": "Marco", "lastName": "Franssen", "age": 26, "webpage": "http://marcofranssen.nl", "twitter": "@marcofranssen" }"$.ajax({ url: 'http://somewebpage.net/getPerson' type: 'GET', dataType: 'JSON', success: function (result) { var data = JSON.parse(result); viewModel = ko.mapping.fromJS(data); ko.applyBindings(viewModel, $('#person').get(0)); }, error: function (result) { //handle the error, left for brevity }});

Windows Phone Theme colors

When developing Windows Phone apps I love to use the theme accent colors in my apps. Since there are some new theme colors in Windows Phone 8 I started searching for their color codes. Lucky me I found them on msdn.aspx#BKMK_Implementation “Theme for Windows Phone”). Now you may be thinking how to use the colors in your own Windows Phone apps. The Color object doesn’t contain a color called Emerald. So I created a small class to help me out with this issue. First of all I created a small static helper method to convert the hexa colors to a color object. So we are able to put in the hexa color string and the function returns a color for us. 123456789public static Color FromHexa(string hexaColor){ return Color.FromArgb( Convert.ToByte(hexaColor.Substring(1, 2), 16), Convert.ToByte(hexaColor.Substring(3, 2), 16), Convert.ToByte(hexaColor.Substring(5, 2), 16), Convert.ToByte(hexaColor.Substring(7, 2), 16) );} Then I made some properties that caches the colors for us on their first use. The Color properties looks like this.

Unblock downloaded files with PowerShell

Have you ever got in the situation that you downloaded a zip-file and figured out to late the files are blocked? So you extracted the zip file into a folder with existing items. It will be damn hard t

Install Windows 8 from rusty 256 MB USB stick

This is the fourth time I installed Windows 8. This time I installed it on my personal notebook instead of a VHD, because Windows 8 is finally ready to market. So I started with downloading the enterprise edition from my MSDN subscription. Unfortunately my USB drive died so I had no storage large enough to put the image on and boot from. So I started thinking to install it over the network. Luckily me I still had my rusty 10 year old 256MB USB drive which perfectly fits a Windows PE image. So I also downloaded the Windows 8 ADK to make a Windows PE boot image. First install the Windows 8 ADK. Then open a command prompt and, key in the following commands to create a image. 123mkdir c:\winpe_amd64call copype.cmd amd64 c:\winpe_amd64Makewinpemedia /ufd c:\winpe_amd64 F: The first command makes a directory on your c: drive and can be removed afterwards. The second command creates all the necessary files for a 64 installation. The third command copies the files to your usb drive (in my case F:) and makes it bootable. If you need a 32 bit installation replace amd64 with x86. Then create a share on a pc in your network and extract the contents of the Windows 8 iso to the network share. Make sure you configure the security to allow everyone to access it. Also make sure your firewall responds to ping commands, this comes in handy when trying to connect to the share. I created a share called Win8.

Secure your web app fluently

When building a big web application with ASP.NET MVC 3 I ran into a problem to secure my web application in a maintainable way. There are lots of examples with attributes, but this isn’t maintainable. So I started searching for other solutions, however most of the information is leaning on those un-maintainable attributes I finally found “Fluent Security“. What does Fluent Security offer you? Fluent Security provides a fluent interface for configuring security in ASP.NET MVC. No attributes or nasty xml, just pure love. Go get it on NuGet! What does that mean? Well it simply means you can bootstrap your security just from your Application_Start() and maintain it on a single place. Besides that you can easily unit test your security setup. So you can test if your security configuration matches the security setup you described in your unit tests. This is a huge advantage because you know for sure the controller actions are secured the way you like it without having the need to click through your complete web application. You can only fail when not defining your tests correctly. That’s not all… You can easily extend, modify etc. by adding your own implementations of the interfaces. Let me start to show you some code so you see for yourself how easy it is! My example is based on a default MVC 3 application and I have added a CategoryController like below to have some extra actions for my example.

Sokoban 7

Sokoban 7 is a classic puzzle game, the first version of Sokoban was published in 1982. Now it is also available on Windows Phone. The game includes 50 levels and will gain periodic updates with new l

Delegate your equality comparisons

When using Linq on your Entity Framework objects, you often need to distinct your query results. Therefore you need to implement an IEqualityComparer for the more advance scenario’s. For example if yo

Minesweeper 7

Today will be again a milestone for me. Today my first Windows phone app “Minesweeper 7” got certified. This app is just a port of a minesweeper version I made once with winforms. It is very basic and

Install Windows 8 Consumer preview on vhd

In a previous blog post I explained to you how to install Windows 8 developer preview on vhd, so you can boot from your vhd. Since there have changed a few small things I just add an updated manual be

Pitching equals invisible convincing

During the last year I learned and read a lot about convincing people. In this article I want to share some tricks to apply it yourself. Oh, its my first non technical article. So this will be a mile