Friday, June 30, 2017

Comparing local files using VsDiffMerge

If you ever did a merge operation in Visual Studio and you had merge conflicts to resolve, know that you were using VsDiffMerge.exe behind the scenes. But did you know that you can use this tool as well to compare local files that are not under source control?

Let’s demonstrate…

The VsDiffMerge.exe tool can be found inside your Visual Studio directory (for VS 2017: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE)

To compare 2 files, you have to pass the filepath as an argument to the tool:

vsdiffmerge.exe" "File1" "File2"

An example:

vsdiffmerge.exe" "UnitTest1.cs" "UnitTest2.cs" starts up the Visual Studio IDE with “UnitTest1.cs” and “UnitTest2.cs” opened:
image

Thursday, June 29, 2017

Learning to use Flexbox

Flexbox is a ‘new’ way to layout your html page in CSS. No longer you need to use things like floats and positioning for creating CSS layouts. Instead you get a more flexible approach that scales from smartphone to smarttv. Browsers start to pick up this technique, so it’s time that you start learning it.

From MDN:

When elements are laid out as flexible boxes, they are laid out along two axes:

  • The main axis is the axis running in the direction the flex items are being laid out in (e.g. as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.
  • The cross axis is the axis running perpendicular to the direction the flex items are being laid out in. The start and end of this axis are called the cross start and cross end.
  • The parent element that has display: flex set on it (the <section> in our example) is called the flex container.
  • The items being laid out as flexible boxes inside the flex container are called flex items (the <article> elements in our example).

flex_terms.png

A great example that helps you understand the different settings of a Flexbox layout is the Build With React has a great flexbox editor.

clip_image001

Another one that I personaly liked(childhood memories) is a game called Flexbox Froggy. It teaches the concepts in an enjoyable and accessible manner.

clip_image003

Remark: Know that you can combine Flexbox with other layouting techniques that you used before.

Wednesday, June 28, 2017

ASP.NET Core IIS error: HTTP error 502.5–Process failure

After enabling .NET Core on my web server I was finally ready to run my ASP.NET Core app. Or at least that was what I thought… When I opened my browser IIS welcomed me with the following error message:

clip_image002

After enabling stdout logging inside the web.config of my ASP.NET Core app I saw following error:

The specified framework 'Microsoft.NETCore.App', version '1.1.2' was not found.

  - Check application dependencies and target a framework version installed at:

      C:\Program Files\dotnet\shared\Microsoft.NETCore.App

  - The following versions are installed:

      1.0.4

      1.1.1

  - Alternatively, install the framework version '1.1.2'.

That is great and meaningful error message. I downloaded the latest runtime version 1.1.2, installed it, and was good to go!

Tuesday, June 27, 2017

Enable .NET Core on IIS

Just a quick reminder for myself. Lost some time last week searching how to be able to run .NET Core apps in IIS on my webserver.

The trick is that you need to install the .NET Core Windows Server Hosting bundle.

  • Install the .NET Core Windows Server Hosting bundle on the hosting system. The bundle will install the .NET Core Runtime, .NET Core Library, and the ASP.NET Core Module. The module creates the reverse-proxy between IIS and the Kestrel server. Note: If the system doesn't have an Internet connection, obtain and install the Microsoft Visual C++ 2015 Redistributable before installing the .NET Core Windows Server Hosting bundle.
  • Restart the system or execute net stop was /y followed by net start w3svc from a command prompt to pick up a change to the system PATH.
  • Create a new Application Pool. Set the .NET Framework version to ‘No Managed Code’.

image

More information: https://docs.microsoft.com/en-us/aspnet/core/publishing/iis

Monday, June 26, 2017

Error when using WebDeploy with ASP.NET Core

Last week I got into trouble when trying to use msdeploy for an ASP.NET Core app. Where I got no problems for the ‘old’ ASP.NET applications, every time I tried to deploy an ASP.NET Core app I got the following error message:

ERROR_USER_UNAUTHORIZED

I logged in on the target server and find a little bit more information in the Event Viewer:

IISWMSVC_AUTHORIZATION_SERVER_NOT_ALLOWED

Only Windows Administrators are allowed to connect using a server connection. Other users should use the 'Connect To Site or Application' task to be able to connect.

clip_image002

I was 100% sure that everything was configured correctly on the server. I used exactly the same steps as for my other applications, the only difference was that this was an ASP.NET Core app.

After some testing, I found an approach that worked for me:

Here are the things I had to change inside my Web Deploy pubxml file:

Friday, June 23, 2017

Visual Studio 2017 - Build Failure. Error: 'path' cannot be an empty string ("") or start with the null character.

After upgrading to Visual Studio 2017 version 15.2, building some of my projects started to fail with the following error message:

Build Failure. Error: 'path' cannot be an empty string ("") or start with the null character.

The problem only appeared for projects where I enabled the lightweight solution loading feature.

Lightweight solution loading:

Many common tasks, such as navigating through your codebase, editing code, and building your projects will not require any projects to be loaded at all. Therefore Microsoft created the lightweight Solution load feature. The effect is that Visual Studio will not fully load projects until you start working with them increasing performance especially for large projects.

As the problem only happened for these projects, I decided to disable Lightweight solution load again. This indeed solved the problem for me(note: I had to close and reopen the solution before I saw an effect).

image

Hopefully a bug fix will be released with the next update…

Thursday, June 22, 2017

Conway’s Law–The original paper

In the context of software architecture, people sometimes talk about Conway’s Law:

Any organization that designs a system (defined broadly) will produce a design whose structure is a copy of the organization's communication structure.

Although we apply it on software architecture, this definition is originally created in a more broader sense. If you are interested in reading the original paper, go check it out here; http://www.melconway.com/Home/Committees_Paper.html

image

The original paper in PDF format can be found here; http://www.melconway.com/Home/pdf/committees.pdf

Wednesday, June 21, 2017

NPM 5 - Hopes for the future

I’m not a big fan of NPM, it’s not persé the fault of the tool itself but you don’t get happy when you end up with 1000’s of packages and any package change has a ripple effect through your code base. It even gets better when package creators don’t follow the semantic versioning rules and breaking changes appear without a warning. Everything I have to open up a new codebased and NPM starts its magic behind the scenes, it is not without fear that I first start compiling my code.

Sidenote: You can say similar things about any other packaging tool I guess, e.g. NuGet

But hey, enough complaining, time for some good news. Last month, the NPM released version 5 and they promised a lot of improvements.

The announcement:

Starting today, typing `npm install npm@latest -g` will update you to npm version 5.0.1.
npm@5 is all new and packed with performance, reliability, and usability improvements we know you’ll love. These include a new approach to lockfiles, more robust caching, and incredible speed — for many common tasks, npm@5 is up to 5x faster than previous versions.
The update is available now and we recommend it for everyone.
You can learn more about npm@5
here.

Did the update and it is certainly faster! Made my day…

Tuesday, June 20, 2017

Angular 4–Visual Studio 2017 - error TS2420: Class 'MdButton' incorrectly implements interface 'CanDisable'. Property 'disabled' is missing in type 'MdButton'.

After upgrading to Angular 4, my Visual Studio turned red from all the TypeScript errors.

Some samples:

/node_modules/@angular/material/typings/button/button.d.ts(40,22): error TS2420: Class 'MdButton' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type 'MdButton'.

/node_modules/@angular/material/typings/button/button.d.ts(40,39): error TS2507: Type '(new (...args: any[]) => CanDisable) & typeof MdButtonBase' is not a constructor function type.
The strange thing was, that when I used the Angular CLI and ng build(or serve) no errors appeared and everything seemed to work. 
I first tried to remove my node_modules folder and do a clean install –> didn’t help Sad smile
Then I removed my globally installed node_modules and reinstalled them as well –> didn’t help Sad smile
Then I upgraded my TypeScript version and the related Visual Studio tooling –> didn’t help Sad smile
In the end I found a solution that worked for me here, I had to update to Visual Studio 2017 Update 15.2. I don’t understand why upgrading an Angular version will get Visual Studio into trouble. I hope this experience will improve as I will become hesitant to upgrade Angular in the future.
Remark: Afterwards I noticed that a colleague already sent me an email telling me to update my Visual Studio before upgrading. Better read my mails next time… Confused smile

Monday, June 19, 2017

Getting up to speed with QuickApp, an ASPNET Core / Angular4 startup project template

I’m always disappointed to see the amount of work to get your application setup done(you know the typical ‘Sprint 0’ work). Creating your frontend and backend projects, setting up your authentication and authorization, configure the webpack magic and so on… Before you know it you are 2 weeks in your project and you didn’t deliver a single bit of business functionality.

So every tool, framework or library that can help you get up to speed is a welcome addition to our toolbox. Recently I discovered QuickApp, an ASP.NET Core/AngularX Project Template.

QuickApp Demo

From the documentation:

This application consists of:

  • Template pages using Angular4 and TypeScript
  • RESTful API Backend using ASP.NET Core MVC Web API
  • Database using Entity Framework Core
  • Authentication based on OpenID Connect
  • API Documentation using Swagger
  • Webpack2 for managing client-side libraries
  • Theming using Bootstrap

You get the benefits of:

  • A complete backend and frontend project structure to build on, with login, user and permission-based role management already integrated
  • Data Access Layer built with the Repository and Unit of Work Pattern
  • Code First Database
  • A RESTful API Design
  • Angular Directives Quidance
  • Angular Pipes Quidance
  • Angular Animations Quidance
  • Angular Services
  • Dialog and Notification Services
  • Configuration Page and Configuration Service
  • Integrated Internationaliztion
  • Theming with SASS
  • Ready-to-use email API
  • Handling Access and Refresh Tokens with WebStorage (Bearer authentication) - No Cookies
  • Jquery Integration (Ability to use standard Jquery libraries)
  • CRUD APIs

Friday, June 16, 2017

What is the JavaScript variant of .Any() in LINQ(C#)?

Today during our ‘Bug Fix Friday’ we were discussing how to rewrite a rather complex loop construction using a more functional style syntax. As we were all C# developers, the equivalent of what we wanted to achieve in JavaScript was what C# offers through the .Any() LINQ operation.

So the discussion was if their was a similar approach possible in JavaScript?

And the answer is… of course! The Array.prototype.some() method did exactly what we needed.

From MDN:

some() executes the callback function once for each element present in the array until it finds one where callback returns a truthy value (a value that becomes true when converted to a Boolean). If such an element is found, some() immediately returns true. Otherwise, some() returns false. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

An example:

Thursday, June 15, 2017

.NET 4.6.2 OutputCache max-age is incorrect

After upgrading to .NET 4.6.2 we started noticing problems with our ASP.NET MVC applications. We intesively use caching to limit the load on our web servers. This is easy to implement thanks to the OutputCache attribute in MVC.

The problem we noticed after upgrading was that the max-age in the response headers was no longer correct after hitting the cache. An example:

  • We had the following OutputCache attribute on top of our MVC controller:
    [OutputCache(Duration = 86400 )]
  • When executing the first request, we see the following response heade
    Cache-Control: public, max-age=86400
  • On all subsequent requests, we see the following
    Cache-Control: public, max-age=63623538558

More information: https://github.com/Microsoft/dotnet/issues/330

Remark: This problem is fixed in .NET 4.7 and a specific quality update.

Wednesday, June 14, 2017

Windows 10–Remove the Windows.old folder after upgrading

After upgrading my Windows 10 installation to the Anniversary Update, I noticed that I had two windows folders; windows & windows.old. Both were eating up a lot of disk space, but I had no clue if I could safely delete the windows.old folder.

The windows.old folder contains all information about your previous windows version. Idea is that if you want to roll back to the old version, it’s possible through the recovery option. Windows will automatically clean up the old folder after some time but if you can’t wait here is a (safe) alternative:

  • Open Windows Explorer.
  • Right click on the drive that contains your Windows installation. Choose Properties.
  • Click the Disk Cleanup button on the General tab.
  • After the Disk Cleanup tool is done calculating, click on the Cleanup System Files button.
  • Select the Previous Windows Installation(s) option to delete the Windows.old folder

delete-previous-windows-version

Remark: I noticed that if you don’t run the Disk Cleanup tool as an administrator, the Previous Windows Installation(s) option is not available.

Friday, June 2, 2017

From developer to architect–A logical evolution…or not?

Most of the people I have the pleasure to work with are developers, all great, intelligent people with passion for technology and IT. When I talk with them about their career and how they think they should evolve, a lot of them aspire to become an architect. Now the job title architect can mean a lot of different things, but that is not the topic I want to rant about today Smile

*** START RANT ***

I’m a little bit puzzled why a lot of developers think that becoming an architect is the logical way forward. Why you ask me? Let me explain…

Developers are creative people, great thinkers and problem solvers. They like to tackle complex problems, that’s what they live for. Once they are no more problems to solve, they start to get bored and start looking at new frameworks and tools just to have new problems to tackle. Developers LOVE complexity.

“Developers are attracted to complexity like moths to a flame”

As an architect it is quite the opposite. You are not aiming for sprints but want to do marathons. Every decision you take has an impact that can haunt you forever(until the next rewrite arrives Winking smile). Therefore as an architect you should be risk averse, better safe than sorry. Architects HATE complexity. It makes every solution unmaintainable in the long run. Simpler IS better…

As an architect you strive for a clean architecture with only an essential level of complexity and try to avoid accidental complexity at all cost. Developers are proud on the clever solutions they create(and they should be!) but as an architect simplicity will always win over cleverness in the long run.

This made me wonder if becoming an architect is such a logical stepping stone in the career of a developer. It’s a complete mindswitch which is not easy to take(ask me…).

*** END RANT ***

Food for thought… (Now I have to go, I have to create a Functional Reactive DDD CQRS Microservice DevOps architecture to get some data out of the database and show it on a website Punk)

Thursday, June 1, 2017

Angular - Host your Angular CLI app in a virtual directory in IIS

I’m a big fan of the Angular CLI, it makes working with Angular a lot easier and guarantees a level of consistenty between all team members. But I noticed that some people get into trouble the moment they try to host their application in IIS.

Most of the time you don’t host your Angular app directly under the Default Website, instead you add a virtual application and host your files in it.

image

image

Problem is that if you just do an ‘ng build’ and copy the dist folder to your target directory, it will probably not work. When you browse to the URI, you only get a ‘loading…’ message and nothing seems to happen.

image

Inside the console, you see that the Angular application tries to load all your bundles from ‘http://localhost’ instead of ‘http://localhost/sampleapp’:

image

To fix this you have to specify some extra parameters when building your Angular app for distribution:

ng build --deploy-url "/sampleapp" --base-href="/sampleapp"

That should do the trick…