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.
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.
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.
Bare metal Let’s be quick about this one.
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.
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.
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.
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.
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.
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!
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.
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.
dotnet core SDK Node angular-cli which we’ll install using NPM.
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.
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.
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 .
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.
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:
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.
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.
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?
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.
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> Sooooo, not a whole lot it seems… The text input will do as we ask but the checkbox only listens to the new width and height.
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 .
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.
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.
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.
See the Pen Animated MiniMe by Sander Harrewijnen (@Harrewarre) on CodePen.
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.
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.
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?
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?
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.
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.
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 .
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.
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?
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.
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 :-)
See the Pen Loading indicator by Sander Harrewijnen (@Harrewarre) on CodePen.