# Wednesday, January 21, 2015

Likely somewhere this year ASP.NET 5, or vNext as it’s been called in the past, will launch. From all we hear each time it’s going to be a major shift again, likely as big as the shift from classic ASP to ASP.NET back in 2002. To get to know what’s going to change the people from the ASP.NET team made a series of screencasts available for us. You can watch them at your convenience at Microsoft Virtual Academy.

Go sit in your comfy chair and take some time to watch it at http://www.microsoftvirtualacademy.com/training-courses/what-s-new-with-asp-net-5.

Grz, Kris.

Wednesday, January 21, 2015 5:12:00 PM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Wednesday, January 14, 2015

I’ve been fiddling around lately with Gulp and Bower. 2 tools that go hand in hand to make compelling web applications and… also integrate nicely in the new Visual Studio.

Gulp is a javascript based task runner and Bower is “package manager for the web”. Why bother you might ask yourself? Well, that’s a good question. In the recent years we’ve been enjoying bunding and minification which can be found in the ASP.NET System.Web.Optimization namespace. That’s going to be gone in ASP.NET 5 (or vNext as we’ve known it up until recently).

Just follow along on how to get started with the new wave.

Create a new project

Start Visual Studio 2015. Create a new project. Opt for ASP.NET Web Application.

01

Give it a meaningful name and press OK and opt in the following screen for ASP.NET 5 Starter Web

02

Again press the OK button and let the project be generated. After that you can open the nodes of wwwroot and Dependencies.

What’s under wwwroot

03

Quick overview of the new template

What’s new in ASP.NET 5.0 is the wwwroot folder. This is going to be the place to put static files like CSS, images, html, javascript files.

Something else which is new is that you don’t have a web.config file anymore. There are also some newcomers in the form of .json files:

  • bower.js: contains the Bower packages
  • config.json: the main configuration file
  • package.json: lists the npm packages
  • project.json: the main project file.

Using npm to install Gulp

Gulp itself is not yet in the template. To get this into it take the following steps:

  1. open package.json
  2. add a new entry under devDependencies: “gulp”: “^3.8.10”. Save the file.
  3. under the NPM node in your Solution Explorer pane you’ll notice that that a new subnode has appeared suffixed with (not installed):
    04
  4. Right click the NPM node and select Restore Packages from the context menu that appears.
  5. Now the package is installed:

    05
  6. Your package.json file will now look like the following:
{
    "version": "0.0.0",
    "name": "GulpTestingInVS2015",
    "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-bower-task": "^0.4.0",
        "gulp": "^3.8.10"
    }
}

In the same fashion add entries for gulp-less and gulp-minify-css. As you can guess from the names these are respectively to transform a .less file to css and to minify a css file.

Gulp it up

Now that we have our ingredients ready we’re going to start to follow the recepy. In the solution, in the root folder of your project add a new file called gulpfile.js. Right click on it. In the context menu you select Task Runner Explorer. A new pane will open and a reference to gulp will appear in it. If you want to get rid of the default Grunt tasks you can simply delete the gruntfile.js file. I noticed that it’s a good habit to frequently refresh the overview in the Task Runner Explorer with the dedicated Refresh button.

Create a subfolder Assets under the root of the application. In there place 2 .less files: Colors.less and Styles.less.

Colors.less:

@color:#b6ff00;
@backcolor:#808080;

Styles.less:

@import "Colors.less";

body {
    background-color: @backcolor;
}

a {
    color: @color;

    &:hover {
        color: @color + @backcolor;
    }
}

06 

 

 gulpfile.js:

"use strict";

var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');

gulp.task('LessAndMinifyCSS', function () {
    gulp.src('Assets/Styles.less')
        .pipe(less())
        .pipe(gulp.dest('wwwroot/css'));
});

What goes on in this gulp file is that first declarations are made for the packages we’re going to make use of in our function. Then a Gulp task is created with the name LessAndMinifyCSS. We’ll also see, after a refresh, that function name appear in the Task Runner Explorer.

In the Gulp task we first set the source of our less files. Then via pipiing we execute the less package functionality over what was just loaded. Then the transformed result will be written down with destination wwwroot/css.

In the Task Runner Explorer hit the refresh button. Drill down to the node LessAndMinifyCSS. Right click on it and select Run.

In the output window of the Task Runner Explorer we can see that our less transformation was successful:

07

When we take a look in the Solution Explorer pane we’ll also notice that a new file was generated:

08

If it doesn’t show up directly then click the Refresh button, circled in red.

The content of the Styles.css file is as expected:

body {
  background-color: #808080;
}
a {
  color: #b6ff00;
}
a:hover {
  color: #ffff80;
}

So with not too much effort we were able to transform our less file to a css file. Now lets take it one step further. We’ll easily as well add CSS minification to our process. Change the gulpfile.js file as follows:

"use strict";

var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');

gulp.task('LessAndMinifyCSS', function () {
    gulp.src('Assets/Styles.less')
        .pipe(less())
        .pipe(minifyCSS({keepBreaks:false}))
        .pipe(gulp.dest('wwwroot/css'));
});

The output of the Styles.css file after running the Gulp task again has now become:

body{background-color:grey}a{color:#b6ff00}a:hover{color:#ffff80}

Now in the Task Runner Explorer right click the LessAndMinifyCSS task. Click the Bindings menu item and then select Before Build.

09 

Now each time you build your project the Gulp task will be run resulting in your Styles.css file to be updated. Of course there are a lot more Gulp packages that you can use but that’s a story for another blog post.

Grz, Kris.

Wednesday, January 14, 2015 9:41:56 AM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Wednesday, October 29, 2014

If yes then take a look at aka.ms/devbesmart.

Grz, Kris.

Wednesday, October 29, 2014 7:38:00 PM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Monday, October 27, 2014

If you like Charles Petzold’s (who doesn’t) books then you’re in for a treat: Get this free eBook by him both as pdf and as Kindle download.

Grz, Kris.

Monday, October 27, 2014 4:14:00 PM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Friday, August 01, 2014

When you look outside of the window and you notice the weather’s not making you feel to go and sit outside to enjoy it you might as well read a good book. Microsoft released an ebook that’ll go well with the cloudy weather but will at least make you fee more happy than the actual weather does.

To grab a copy go over to Cloud apps with Microsoft Azure: Best practices for DevOps, data storage, high availability, and more, by Scott Guthrie, Mark Simms, Tom Dykstra, Rick Anderson, and Mike Wasson..

You can opt to go for these choices:

3617.9780735695658f_58F7BB03

Grz, Kris.

Friday, August 01, 2014 11:27:02 AM (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Wednesday, July 23, 2014

I just came across a good looking overview of the ASP.NET MVC 5 application lifecycle. I thought I’d share it so here you go.

Grz, Kris.

Wednesday, July 23, 2014 2:46:37 PM (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 

Thanks to a colleague I got to know about this free eBook: http://read.humanjavascript.com/ch00-foreword.html.

It’s not the typical dry to read tech book and doesn’t get you started with javascript. On the contrary it reads in a nice way and talks about what the author was confronted with and how he dealt with it. Something extra to read while sitting outside in the evening sun (when there is any in Belgium).

Grz, Kris.

Wednesday, July 23, 2014 8:14:38 AM (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Tuesday, July 01, 2014

At work I mostly make use of the combination of TFS and Visual Studio. I also fiddle around with Git from time to time. As with the latest Visual Studio there’ also Git integration.

What I did was fork zencoding on github.

When opening our project on Github we need the url to clone. You can find that in the right lower corner:

image

For me that’s https://github.com/KvdM/zencoding.git.

Ok, so now let’s open our IDE of choice: Visual Studio2013. Follow these steps:

  1. Click in the Team Explorer pane on the button Connect to Team Projects.
  2. In the Local Git Repositories part click on the Clone link.
  3. Remember that url we just copied? Well in the textbox that just appeared we paste it.
  4. Click on the Clone button

image

And then we get, after a quick download of the good stuff, the following to see:

image

Double click on the zencoding name and then the following appears:

image

It felt a bit weird to see two .sln files but it turned out to be I had to double click the second one to get the code.

Code! Finally code! Ok let’s try to make a new test method. I put one in the Lorem.cs file:

image

Now open up the Team Explorer pane again and click on Changes:

image

Fill in some comment and click the Commit button:

image

That’s the good message we see now:

image

Either we sync from here but it’s more general to go to Team Explorer again and click on the Unsynced commits:

image

Press the Sync button:

image

Fill in the credentials:

image

And… I have to fill it in again?? Doing that results in the following:

image

An error occurred. Detailed message: An error was raised by libgit2. Category = Net (Error).
Response status code does not indicate success: 401 (Authorization Required).

What? Checking credentials again, typo perhaps, …?

Well it turned out to be that I had two factor authentication turned on. A good thing. However I didn’t see an input field where I could enter the numbers for that extra authentication step (which improves security so be sure to turn it on if you haven’t already).

I asked around and got a good tip from Phil Haack. When you have two factor authentication on you should be able to login via an authentication token. You can generate this on the site of Github. Open Settings > Applications (https://github.com/settings/applications) and generate a token.

Copy paste that particular token in a safe place as you’re going to be needing it soon.

Going back to Team Explorer in Visual Studio we click the Sync button again. The credentials screen shows again and instead of filling in a username we paste in the token we just generated. Leave the password input field blank. Click the OK button and yes, finally we succeeded in synching to Github:

image

And in Github we can see the changes that came through:

image

image

Another tip I got was that you might also need to fill in x-oauth-basic for the password part. Also read out some more documentation here: https://help.github.com/articles/git-automation-with-oauth-tokens.

Be sure to check out Git in Visual Studio. It’s awesome and I’m sure we’ll see more effort in better tooling in the future as well. Of course TFS will stay in there as well as it’s also a great system.

Grz, Kris.

Tuesday, July 01, 2014 11:57:29 PM (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, June 12, 2014

On June 25th and 26th there’s going to be another dotnetconf. It’s a virtual conference so you can watch it online and get a good overview of what’s hot right now and in the future.

The following sessions will be provided to you:

Day 1 - June 25th, 2014

9:00 AM (PDT) - 4:00 PM (GMT) - State of .NET (Keynote)
9:15 AM (PDT) - 4:15 PM (GMT) - .NET Runtime
10:15 AM (PDT) - 5:15 PM (GMT) - C# 6.0 & Roslyn
11:15 AM (PDT) - 6:15 PM (GMT) - Universal Windows Apps
12:00 PM (PDT) - 7:00 PM (GMT) - Developing native iOS, Android, and Windows apps with Xamarin
1:00 PM (PDT) - 8:00 PM (GMT) - Fun Session
2:00 PM (PDT) - 9:00 PM (GMT) - Kinect
3:00 PM (PDT) - 10:00 PM (GMT) - XAML
3:30 PM (PDT) - 10:30 PM (GMT) - .NET Native
4:00 PM (PDT) - 11:00 PM (GMT) - WPF
5:00 PM (PDT) - 12:00 AM (GMT) - .NET Micro Framework and IoT

Day 2 - June 26th, 2014


9:00 AM (PDT) - 4:00 PM (GMT) - State of ASP.NET (Keynote)
9:30 AM (PDT) - 4:30 PM (GMT) - Web Forms
10:00 AM (PDT) - 5:00 PM (GMT) - MVC 6
10:30 AM (PDT) - 5:30 PM (GMT) - Web API
11:00 AM (PDT) - 6:00 PM (GMT) - Entity Framework
12:00 PM (PDT) - 7:00 PM (GMT) - Azure Websites
1:00 PM (PDT) - 8:00 PM (GMT) - Deployment
2:00 PM (PDT) - 9:00 PM (GMT) - ASP.NET Identity & Security
3:00 PM (PDT) - 10:00 PM (GMT) - Dependency Injection and Testability in .NET
4:00 PM (PDT) - 11:00 PM (GMT) - SignalR
4:30 PM (PDT) - 11:30 PM (GMT) - ASP.NET vNext 101

 

Grz, Kris.

Thursday, June 12, 2014 8:27:48 AM (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Friday, May 30, 2014

Sometimes you simply want to test out something without opening a new text editor, put basic things together just to make it work. Or you don’t want to create another new project3456 in Visual Studio. Well I got some good news if you also find yourself in that position. You can go to these websites to find yourself quickly checking something out, pass on that code to others and easily show it in a forum.

.NET

javascript and CSS

bootstrap

SQL

Of course there are many others out there but these are already a great place to start fiddling around Smile.

Grz, Kris.

Friday, May 30, 2014 7:19:44 AM (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  |