Itq

SpringOne Platform 2019

Pivotal organized another SpringOne conference this year, and the ITQ Cloud Native team hopped across the large pond into the Texes heat to attend.

Spring for the .net dev

While Spring is a Java thing, SteelToe is there for us .net folks. It’s getting a big shot of TLC with a new website and new and improved docs! Creating microservices using .net got a bit easier than it already was with some new stuff such as actuators and service connectors. Go have a look at the SteelToe website for all the ins and outs. (also, this exists to quickly start a new service)

Environment variables in an Azure Web App for Containers

Here’s a little gotcha I ran into. A .net core app I wrote needs to run inside a container and the target was a Web App for Containers on the Azure platform. No big deal so far.

The app also needs a few settings for it to do its work. We provide these via environment variables for maximum flexibility. After setting up some CI/CD stuff and deploying the app it wouldn’t start because it wasn’t loading the settings.

Let's talk containers

A recent talk by one of my buddies at ITQ sparked something and I thought I’d share that with you. It’s about containers and where they sit in a software developer point of view.

The platform stack

The thing that caused the spark was this image:

Here we have a rough outline of the platform abstractions we currently see in the wild. Let’s start at the bottom.

Cloud Foundry configuration with SteelToe

I’ve been playing around with the SteelToe framework for .net apps on Cloud Foundry a bit and it’s been nice overall (I’ll probably write a few more posts about it at some point 😊). While playing around with it the configuration part of it I wasn’t really liking the way settings can be read from the main configuration.

Let’s start with a really short primer on how the configuration system works. Cloud Foundry apps can be bound to services, doing so adds a reference to the bound service in the environment variables of the app that was bound. You can take a look at what is provided to an applications environment by running

ASP.NET Core logging on Cloud Foundry

All apps I’ve ever worked on have some sort of logging going on for various reasons, mostly to keep track of whats going on or debugging, but it’s all the same. Logs are needed to see what your code is up to.

Cloud Foundry is very explicit about how an app should write its logs. As you can see in the documentation, apps must write to stdout or stderr.

For C# that means we can use the static methods on the Console to write our logs. Couldn’t be easier. But… now our code is littered with these Console.Write... lines all over the place!

Setting up an Azure Storage static website

Not very long ago, Microsoft made the static website feature generally available on the Azure platform. What this means is that you can now publicly host content with Azure (blob) storage.

So in a few easy steps you can create a host for your angular/react/vue/(insert-client-side-web-thing-here)/static app. The docs are great but we’ll have a look at what’s what.

Please remember that there is no server-side processing for this hosting option! If you want to do server-side stuff, use an App Service instead.

Pivotal Cloud Foundry Certified Developer

With all the knowledge built up for my CFCD exam I did earlier I took another Cloud Foundry exam. The Pivotal flavor this time.

Not as involved as the other Cloud Foundry exam I did but still a wide variety of questions. I’m not sure if I screwed up all the Metrics questions, or that there was only 1 that I got incorrect.

Still really happy with the result.

Easy CSS grid

I’ve been working with a lot of forms lately and it required some kind of grid system to make it all lay out nicely. I’ve always been a bit hesitant to immediatly pull in another dependency and decided I was going to solve this one myself. How hard could it be?

By using the CSS flex layout, I ended up with just the right amount of flexibility and extensibility while keeping things very small code wise. Let’s have a look!

Cloud Foundry Certified Developer

Hey look, I got certified in something :-)

After a good few nights of self-paced training and practice over at Pivotal I felt confident enough and took the CFCD exam. As you can see above, I passed!

Multiple listeners for your Service Fabric service

Service Fabric is a great piece of technology on the Azure platform and I’ve been using it quite a lot in recent projects. It takes away a lot of the setup and orchestration when dealing with microservices.

There comes a point where services need to talk to each other and this is easily achieved using the Remoting bits you can get from NuGet. The general way of doing this is creating an Interfaces project next to the service that contains the service interface and classes used in transport. The interface is implemented on the service entrypoint and a listener is exposed to the Fabric runtime so that it can communicate with the rest of the platform. We’re going to take it one step further and put the service implementations in their own class instead of on the service entrypoint (keeps things nice and clean) and also enable dependency injection from that point forward.

Angular (5) and aspnet core (2) quickstart

Here is a get-up-and-go style post to get going with the angular CLI and aspnet core. Before we begin, there is a template you can use to set (most, if not more) of this up, but it’s good to know what is going on behind the curtains.

First things first.

You need some tools installed to get the base project set up.

1. dotnet core SDK
2. Node
3. angular-cli which we’ll install using NPM.

Open a command prompt and run the following command:

Openhack Amsterdam 2017

So this hackathon/training thing popped up on my twitter feed a week before it actually started.

It caught my attention because it mentioned Azure Service Fabric as one of the tech stacks (the other being Kubernetes) that would be the focus of the event. The event is Openhack that took place in Amsterdam from 9 to 11 october 2017.

So Azure Service Fabric caught my attention because it’s a big part of the job I’m currently working on. We run a bunch of services and actors with great satisfaction, but there’s always more to know and learn.

Uploading files - a simple approach

Here’s a nice way of getting images to your server using a little bit of Javascript and HTML. We’ll be using the FileReader API that comes with Javascript and is supported in all major browsers.

For this example we’ll need some HTML from which we can select files and show a preview:

<div>
    <input id="fileInput" type="file" />
    <button id="clearFile">Clear</button>
    <button id="uploadFile">Upload</button>
</div>
<div>
    <label>Preview</label>
    <div>
        <img id="preview" />
    </div>
</div>

We have an input element set to type="file" to select the file(s) we want to upload. Two buttons for submitting and clearing our inputs and an img where we can show a preview. This demo only depends on jQuery, which is only used to make performing a POST to the webserver so much simpler. Feel free to substitute that with whatever you like best.

Dotnet Core CLI user secrets

User secrets are what you use for settings in a .NET Core app that you don’t want committed to your public repos (think API keys, passwords, anything sensitive). You map out your actual settings and they override them with the values from the secrets, which are stored outside of the tracked source folder.

On windows the user secrets folder is located here: %APPDATA%\microsoft\UserSecrets. Let’s have a look at how use them with the new tooling for .NET Core that came out recently.

Dotnet Core tooling quickstart

With the .NET Core tools finally showing signs of stabilizing in version 1.0.1 we can have a little look at how you can get started with a new project using just the tools.

You can download the new stuff here. I’m writing this post using the 1.0.1 version of the tools.

A new very nice thing is that the new tooling comes with some built in templates you can use instead of relying on something like Yeoman to create an empty project for you. The dotnet new command is still the way to create a new project (like it was in the older tools) but you can now specify what kind of project you want as a base.

Date validation in AngularJS

Another angular post! This time we take a look at how to create a directive that ensures the user enters a valid date (and/or time).

Let’s start with some boilerplate stuff first. I’m going to assume that you have something working Angular already, we will only cover the date validation directive in this post. Here is some HTML.

<div ng-app="validDateApp">
    <div ng-form="myForm" ng-controller="testController">
        <input ng-model="myDate" my-valid-date name="myDateInput" type="text" />
    </div>
</div>

And it’s Angular app to go with it:

Simple dialogs with AngularJS and TypeScript

While working an Angular (1) web app I ran into the age-old problem of showing the user notifications when certain conditions are met. Show them a little pop-up, in simple terms.

So what does it take to show a popup? We know the dialog element exists but cannot be used in this case due to browser requirements. The easiest way I could think of is adding a fixed positioned div the the user on top of all other content. Add some CSS in there to make it look nice and we have dialogs.

The dialog element

I was grinding my teeth on a z-index problem today. I needed to cover the entire webpage to show something was happening and nothing else was to interrupt. Some elements (for whatever reasons) were poking through the overlay and nothing seemed to fix my problem with the plain old position: fixed element I was using to cover the page.

So after getting fed up with looking for possible fixes I spent a bit of time looking for alternatives and came across the <dialog> element.

Express route management

Setting up a webserver with Node and Express is easy very easy.

Here is a small example:

var express = require("express");
var app = express();

app.get("/", function (request, response) {
	response.send("Hello world!");
});

app.listen(3000);

Running this and navigating to http://localhost:3000 will give you the following result:

If you only have a few of those endpoints (app.get etc.) things will be fine living in the same index.js file. But what if this starts growing? You add more and more endpoints to your index.js and before you know it you have a 1500 line Javascript mess. Here is a good way of tackling that problem before it rears its head.

RabbitMQ with NodeJS on Cloud Foundry

I’ve been having some more fun with Cloud Foundry deploying Node apps and wanted the apps to communicate in a more disconnected way. A messaging system is a good fit for such a requirement and lucky for me, (Pivotal) Cloud Foundry has RabbitMQ-as-a-Service for me to use.

So what are we working with? The code is Javascript running on Node, RabbitMQ for the messages and Cloud Foundry is hosting it all.

Creating a toggle switch with HTML and CSS

My current project involves an interface that is 100% touch driven (no keyboard and mouse) and I was asked to turn a regular old checkbox into a toggle switch.

Initially I assumed it would be very easy but as with many things browser related, it was not. Let’s take a look at some of the things browsers do to checkboxes using this quick example:

<html>
	<head>
		<title>Test</title>
		<style>
			input {
				border: 1px solid red;
				background-color: green;
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
<body>
	<div>
		<input type="text" />
		<input type="checkbox" />
	</div>
</body>
</html>

My first ASP.NET Core app on Cloud Foundry

Today I tried to deploy a .NET Core web app to a Pivotal Cloud Foundry platform that my ITQ buddy Ruurd set up for us to tinker with. The app itself is a very basic ASP.NET MVC app built with the new ASP.NET Core framework to make it cross-platform. It being cross platform makes it very easy to deploy on something like Cloud Foundry since there is no dependency on Windows or the full .NET Framework anymore.

Multiple DbContext's with migrations on a single database

Here is a small problem I ran into while working on my current project. This project already has an Entity Framework DbContext class with entities and a database. I’m adding a new feature but want to keep the changes as isolated as possible. So I wanted to create a second DbContext that handles the entities specific to my new feature.

Adding the context to the codebase is no hassle, just create the new class and derive it from DbContext. The problem is in the migrations. Entity Framework has a system that can track changes to the model and apply those changes to the actual database. To keep track of these changes, Entity Framework uses a table called __MigrationHistory where it stores all kinds of metadata about the model that it can compare to when you make changes to your entities in code.

Going 4K with the Philips BDM4065UC

Dual screen setups are great for work but you can’t always have two of the same size/model side by side. In my previous setup I had my laptop display as the primary and a secondary smaller screen. This being sub-optimal I figured it might be a good time to ask for a new display at work. New screens are nice, but what to ask for? Research time!

I looked at a bunch of 1440p displays but with 4k becoming a more viable solution I started researching really big screens. During my search I came across this post by Rick Strahl and his 4k Philips display. I had seen this display in my search and it certainly looked good on paper but having someone actually use it for development purposes gave me a really good insight. I was sold. 4K should be the way to go.

Animations and transforms

Every employee at ITQ has their own little mini-me in the form of a little character based on your appearance. Here is mine:

So I have this image sitting in a folder on my Ondrive for whenever I might need it. Queue a boring evening with not much else to do, I figured, lets animate some life into the little guy using CSS. Here is the result.

App.config xdt transforms

Here is a little hack you can do to enable transformations in app.config like you can in your web.config.

A quick intro to transformations, they can make your life a bit easier by storing different configs in different files that, depending on your build configuration, end up in the actual config file. Here is a simple example.

This is the original web.config file:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <appSettings>
	<add key="SomeSetting" value="true" />
	<add key="Title" value="Debug" />
  </appSettings>
</configuration>

And there is also a web.Release.config, that looks like this:

Cloud Foundry Summit 2015 Berlin

On the 2nd and 3rd November in 2015, the Cloud Foundry Foundation held the Cloud Foundry Summit in Berlin. The focus of this conference is on Cloud Foundry itself and the community around it.

ITQ (my employer) is focussing on Cloud Native apps and let a small group including myself attend the conference. After a canceled flight due to fog and a 650km roadtrip with my co-workers Ronald and Ruurd we arrived at the hotel at 2am in morning just in time for the first workshop.

Basic string templating in C#

Every solution I’ve worked on required some form of communication via e-mail or other form of text to the outside world, reporting, notifications or something else. There are a bunch of libraries out there that can make your life easy if you need complex templates. But this is not about complex, this is supporting the basics without including all sorts of unnecessary stuff.

What do we need to make this happen? The first thing is a template. A template is nothing more than a piece of plain text (or HTML if you want) in which we want to replace parts to create a complete message. Lets use something very simple, a single line, one tag.

CurrentColor in CSS

If you’ve ever used something like LESS or SASS you know what a variable is in CSS. There is also a working draft for native CSS variables but there is something in CSS right now that resembles some variable behavior. Not an actual variable, but interesting nonetheless.

Meet currentColor. Like the description says on the w3 wiki, its value is whatever the color is set to. So how does that work? Lets look at some examples.

CSS Transitions basics

End-users interact with your applications via the user interface (UI for short). If everything was designed with the user in mind, the UI will make things very easy for the user. Everything is nice and organized and easy to navigate. Actions are communicated to the user in a friendly way and the user is happy.

The sad thing is, state changes in the UI tend to be very abrupt and cold. Instant flashes, so fast the user might not even notice if it is something small. So what can we do about this? CSS supports something called transitions. Transitions allow us to specify what happens what state changes on an element. For example, a button going from normal, to being hovered on by the user, rows in a grid that the user can select or a signal telling the user something happened.

Easy Windows Service debugging

Long-running processes in a web application running on IIS is a bad idea. The reason for that is that IIS might unload the AppPool that is running your process due to inactivity. Inactivity? Yep, if IIS does not recieve a requests for a while, it will shut the site down to conserve system resources. (This is all configurable ofcourse, but I’ve seen it happen)

To allow for long-running stuff, a Windows Service might be a right fit. Here is what the default startup code for a Windows service looks like:

Generating an RSS feed in C#

A hobby project of mine needed to generate an RSS feed. I was already doing this by just generating and XML file in the webroot and linking to that on the frontpage. But during this coding session, where all the data is pulled straight from the markdown files I wanted to create a controller action to do the generating for me.

First things first, there is an assembly available out of the box in the .NET Framework. All you need is to make reference to System.ServiceModel.Syndication and you are ready to start writing code. The classes we are using are

Getting started with Inversion of Control

Alright, lets dive straight into the deep end! … ok, but not drown in the process of doing so. One step at a time. Lets’s start with an example.

The technical side

Here is some code:

public class Foo
{
    private readonly Bar bar;

    public Foo()
    {
        this.bar = new Bar();
    }
}

To create an instance of Foo we write

Foo theFoo = new Foo();

In this example we have two classes, Foo and Bar. Foo makes use of a Bar to do some work. When a Foo instance is created the creator of the Foo instance has no control over what kind of Bar the Foo instance is going to use. They are stuck together. This code is completely valid but what if we want to let the creator of Foo control the kind of Bar that is used? We have to invert control! Here is the same code with it’s control flow inverted:

Overwriting a function in Javascript

A quick little post about overwriting a function in Javascript.

Take the following piece of code:

function Thing() {
    this.Load = function () {
        // Do stuff some specific way.
    };
};

When we want to creat a new Thing we do:

var newThing = new Thing();

Easy enough. But what if we have a corner case where the Thing needs to load data in another specific way?

SignalR dependency injection

My go-to container for IoC at the moment is SimpleInjector because you know.. it’s simple. I’ve used it in a couple of projects and used in a hobby project recently again.

This hobby project uses SignalR for real-time communication between browser and server and after setting that up I wanted to inject dependencies in to the SignalR hubs. It is pretty easy but there was a minor catch. Let’s look at some code.

The simplest loading indicator

I had a brainwave and dove into codepen for a little bit to doodle around and when I emerged I had this simple little loading indicator. Very simple in terms of markup and CSS (LESS in this case).

Have a look see :-)