less | Ash Grennan

Micro Multi Tenanted Value Resolver Library 📚

Sun, 07 Jun 2020 00:00:00 +0000

I’ve been recently dealing with enabling multi tenancy in a full stack application, the back end being ASP.NET Core. When looking into various multi tenant libraries I found them to have one or more characteristics:

The apis were quite complex, and required lots of documentation parsing
Difficult to plug in different value resolutions
Require lots of boilerplate code and implementation of services

Many of these libraries are designed to use configuration files or resolution databases in order to load credentials. I don’t like this, why?

The reason is simple, most credentials don’t belong in files such as appsettings.json. Instead, these should be stored in a Key Vault which has a host of benefits such as, permission management hardware level encryption and so on. Services such as Azure Key Vault have these benefits.

So, more to the point I’ve written a very, very small library which implements a Middleware pattern to essentially push specific credentials based upon a tenant resolution pattern into the current HttpContext. The NuGet package can be found here

The nice thing about Azure Key Vault is all secrets (depending upon access rights) can be loaded into IConfiguration on application build.

More information and the source can be found on GitHub:

https://github.com/BobNudd/MicroMultiTenant

🔃 Angular Network Aware Preload Strategy

Sun, 22 Dec 2019 00:00:00 +0000

Lazy Loading Routes

As your app becomes larger, with different modules to group feature components, a common approach is to lazy load each module in your main routing configuration. Angular recommends this from the start, since it’s a simple yet scalable pattern to load your projects dependencies once the route is activated. You have likely seen or implemented this pattern in the app-routing.module.ts like below:

import { NgModule } from '@angular/core';
import { RouterModule, Routes }
const routes: Routes = [
{
path: 'index',
loadChildren: 'src/app/modules/home/home.module#HomeModule'
},
{
path: 'shop',
loadChildren: 'src/app/modules/shop/shop.module#ShopModule'
}
];

import { NgModule } from '@angular/core';
import { RouterModule, Routes }
const routes: Routes = [
{
path: 'index',
loadChildren: () => import('src/app/modules/home/home.module').then(m => m.HomeModule) }
},
{
path: 'users',
loadChildren: () => import('src/app/modules/user/user.module').then(m => m.UserModule) }
}
];

Note: the second example is new as of Angular 8, and is a widely supported method of importing modules.

The above examples allow the module to be loaded in when they’re requested via accessing the route tied to the module.

Eager Loading

The standard method of preloading any specified modules as above is to use the PreloadAllModules strategy. This quite simple loads all modules that have been specified in our routes array. The advantage of this method is a better user experience since there isn’t any time lag between an end user clicking a route e.g. /users and the module having to be downloaded.

imports: [
... // omitted for brevity
RouterModule.forRoot(routes,
{ preloadingStrategy: PreloadAllModules })
]

Image Mutation Pipeline - Reshaping and Overlay Images

Mon, 04 Nov 2019 00:00:00 +0000

Overview

In this post, we’ll go over image manipulation via creating a pipeline, the goal of this post will be to create avatar, consisting of a user/character, then surrounding this picture with a frame as an overlay.

Requirements

Rather than using System.Drawing we’ll instead using ImageSharp which is the most popular image processing library written using .NET Core, it’s very fast and highly optimized, despite being in beta I have used in production for a year without problems.

Using this library, we’ll create our own pipeline of image operations to perform using IImageProcessingContext, and take advantage of some of heavy lifting ImageSharp provides.

For assets, we’ll be using two images, a base picture and an overlay to surround:

Base picture (me.png)

Overlay (frame.png)

Project Setup

Create a .NET Core Console App
Add the following Package Reference to your .csproj file <PackageReference Include="SixLabors.ImageSharp.Drawing" Version="1.0.0-beta0007" /> If you install through nuget, ensure that .Drawing is included, else you won’t be able to access the SixLabors.Shapes namespace
Add the assets to your project, make sure you select Copy if newer in the Properties panel > Copy to Output Directory

Code

The first part of this process is to alter the shape of our user image to something the resembles a diamond.

Below is the code for this, with heavy use of comments elaborating on the process since this is much easier than blog annotations:

 static void Main(string[] args)
{
// directory to output results
System.IO.Directory.CreateDirectory("output");
// wrap operations in using statements to ensure that Dispose is called
using (var img = Image.Load("me.png"))
{
// clone the original image, since we need this for future runs of the application
using (Image destRound = img.Clone(x => x.AvatarShaping(new Size(225, 225), 150)))
{
destRound.Save("output/result.png");
}
}
}
/// <summary>
/// Here's we're implementing the IImageProcessingContext interface and extending it via an extension method,
/// This implements a full image mutating pipeline operating on IImageProcessingContext
/// </summary>
/// <param name="processingContext">the processingContext</param>
/// <param name="size">Size of the image</param>
/// <param name="cornerRadius">corner radius desired, higher will result in a smaller fill</param>
/// <returns></returns>
private static IImageProcessingContext AvatarShaping(this IImageProcessingContext processingContext, Size size, float cornerRadius)
{
return processingContext.Resize(new ResizeOptions
{
Size = size,
Mode = ResizeMode.Crop
}).ApplyRoundedCorners(cornerRadius); // the next part of our pipeline
}
// This method can be seen as an inline implementation of an `IImageProcessor`:
// (The combination of `IImageOperations.Apply()` + this could be replaced with an `IImageProcessor`)
private static IImageProcessingContext ApplyRoundedCorners(this IImageProcessingContext ctx, float cornerRadius)
{
Size size = ctx.GetCurrentSize();
IPathCollection corners = BuildCorners(size.Width, size.Height, cornerRadius);
var graphicOptions = new GraphicsOptions(true)
{
// AlphaCompositionMode = PixelAlphaCompositionMode.DestOut // enforces that any part of this shape that has color is punched out of the background
};
// mutating in here as we already have a cloned original
// use any color (not Transparent), so the corners will be clipped
return ctx.Fill(graphicOptions, Rgba32.LimeGreen, corners);
}
private static IPathCollection BuildCorners(int imageWidth, int imageHeight, float cornerRadius)
{
// first create a square
var rect = new RectangularPolygon(-0.5f, -0.5f, cornerRadius, cornerRadius);
// then cut out of the square a circle so we are left with a corner
// Changing the offsets will change how much of the shape is cut out
IPath cornerTopLeft = rect.Clip(new EllipsePolygon(cornerRadius - 0.5f, cornerRadius - 0.5f, cornerRadius));
// corner is now a corner shape positions top left
//lets make 3 more positioned correctly, we can do that by translating the original around the center of the image
float rightPos = imageWidth - cornerTopLeft.Bounds.Width + 1;
float bottomPos = imageHeight - cornerTopLeft.Bounds.Height + 1;
// move it across the width of the image - the width of the shape
// cut the remaining 3 corners
IPath cornerTopRight = cornerTopLeft.RotateDegree(90).Translate(rightPos, 0);
IPath cornerBottomLeft = cornerTopLeft.RotateDegree(-90).Translate(0, bottomPos);
IPath cornerBottomRight = cornerTopLeft.RotateDegree(180).Translate(rightPos, bottomPos);
return new PathCollection(cornerTopLeft, cornerBottomLeft, cornerTopRight, cornerBottomRight);
}

The above code results in the following image:

We can achieve our approximate diamond shape via increasing the cornerRadius float value, however this will result in less of the canvas showing, below is 200:

Side note, if you wanted a circle, all that would be required is to set the cornerRadius to 50% of the image size.

Currently we’re filling in the areas we’ve clipped with a solid green. Great for testing, but not for our desired result. You will want to comment out the following line which will automatically remove our colour fill.

AlphaCompositionMode = PixelAlphaCompositionMode.DestOut

Next, we’ll add our overlay, this is simpler than the previous code. We’ll embed another using statement since we still want the original outputs, this makes viewing each stage of the process and making changes much easier whilst we build the pipeline.

Add the following within the destRound using, after destRound.Save("output/fb.png");

using (var overlay = Image.Load("frame.png"))
{
using (Image overlayClone = destRound.Clone(x => x.GenerateOverlay(overlay)))
{
overlayClone.Save("output/complete.png", new PngEncoder()
{
ColorType = PngColorType.RgbWithAlpha // needed to instruct the encoder transparency is required
});
}
}

GenerateOverlay is part our pipeline for this project, add the following:

private static IImageProcessingContext GenerateOverlay(this IImageProcessingContext processingContext, Image me)
{
return processingContext.DrawImage(me, new Point(0, 0), new GraphicsOptions());
}

The above method will draw the image together with the previous image, once that has completed this will be saved to the disk.

The Final Result

It should be noted that the code above is simply a proof in concept, for instance the Clone methods add overhead and shouldn’t appear in production code.

Angular Lazy Loading Modules with Ivy – Uncaught (in promise) error cannot find module

Mon, 28 Oct 2019 00:00:00 +0000

This is a quick post on an error I encountered whilst opting into the Ivy compiler (which should be here Nov 2019).

Once you get through the initial errors, you may see the below in your console log:

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot find module 'src/app/modules/module/your-module.module'
Error: Cannot find module 'src/app/modules/module/your-module.module'
at $_lazy_route_resource lazy namespace object:5
at ZoneDelegate.invoke (zone-evergreen.js:365)
at Object.onInvoke (core.js:39707)
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Zone.run (zone-evergreen.js:124)
at zone-evergreen.js:851
at ZoneDelegate.invokeTask (zone-evergreen.js:400)
at Object.onInvokeTask (core.js:39688)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Zone.runTask (zone-evergreen.js:168)
at resolvePromise (zone-evergreen.js:793)
at resolvePromise (zone-evergreen.js:752)
at zone-evergreen.js:854
at ZoneDelegate.invokeTask (zone-evergreen.js:400)
at Object.onInvokeTask (core.js:39688)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:570)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:485)
at invokeTask (zone-evergreen.js:1596)

You’re getting this error due to Angular 8 introduced a new recommended module loading method, previously the default method of lazy loading modules was to specify a string path to a module:

{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}

This was something built into the Angular toolchain, and performed some wizardry to parse and load the module from the loadChildren attribute.

Since Angular 8, the method of importing modules has changed to the industry recognised / standard, dynamic import. So your import should now be changed to:

loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)

Depending upon your IDE choice, you’ll likely also get Intellisense too:

Broadcast data strategy with .NET Core, SignalR & Angular

Mon, 06 May 2019 00:00:00 +0000

In today’s post, we’re going to discuss an increasingly common requirement of tasks running within a web application. Depending upon your specialism you can think of these as service works, or simply background tasks. For this demo we’re going to focus on our web application continuously running a task which emits I/O data for the duration of the app’s life time. This data can then be consumed by another service, since our task needs to continuously run, it’s suited for more of a observable pattern on the client side, so we can subscribe and handle new data accordingly. In this scenario, we’re going to use SignalR to trigger invocation to any clients connected.

First, you’ll need to do a small amount of configuration, I won’t elaborate on this since it’s fairly straight forward

Startup.cs

Add the following to your ConfigureServices(IServiceCollection services)

services.AddSignalR(); Note: In Core 3, you won’t need this call, as the Core Team are tidying up some of the service extensions

Next, you’ll want to add an endpoint for your hub in your Configure(IApplicationBuilder app, IHostingEnvironment env)

app.UseSignalR(routes =>
{
routes.MapHub<ChangeDataHub>("/changes");
});

With the addition of the ChangeDataHub you’ll need to create a class with inherits from the base class Hub, we’ll leave this blank.

public class ChangeDataHub: Hub
{
}

Good so far? Next we’ll need a Listener service which will manage the HubManager allowing us to send invocation messages to anything which has subscribed to our service.

But, before this we’ll need to think about how we’re going to use our listener service. With .NET Core 1 & 2, Microsoft provided a IWebHost however, with the addition of 2.1. a new interface IHost was introduced. IHost is similar to IWebHost allowing hosted services, DI etc, however it’s more lightweight by the fact it’s designed for background tasks that aren’t used over HTTP. Since we’ll be transmitting our data via web sockets, this is ideal and the right fit for our project.

Registering a host is easy in .NET Core, within our Startup.cs, we’ll want to create a singleton instance of our host, we’ll be implementing the IHostedService which is a great interface provide just two method of type Task to implement, below is the interface:

namespace Microsoft.Extensions.Hosting
{
//
// Summary:
// Defines methods for objects that are managed by the host.
public interface IHostedService
{
//
// Summary:
// Triggered when the application host is ready to start the service.
Task StartAsync(CancellationToken cancellationToken);
//
// Summary:
// Triggered when the application host is performing a graceful shutdown.
Task StopAsync(CancellationToken cancellationToken);
}
}

Plugging in our implementation of the IHostedService as described above:

public void ConfigureServices(IServiceCollection services)
{
services.AddSingleton<Microsoft.Extensions.Hosting.IHostedService, ChangeDataListenerService>();
}

Now it’s time to implement our interface, like most tasks we don’t want to simply run this once, but on an incremental basis. To achieve this we’ll use the static method Task.Delay which will take our delay value.

private readonly HubLifetimeManager<ChangeDataHub> _hubManager;
private readonly ILogger<DefaultLogger> _logger;
private readonly TimeSpan _delay = TimeSpan.FromSeconds(1);
public ChartListenerService(
HubLifetimeManager<ChangeDataHub> hubManager,
ILogger<DefaultLogger> logger)
{
_hubManager = hubManager;
_logger = logger;
}
public async Task StartAsync(CancellationToken cts)
{
_logger.LogInformation("Listener is starting..");
while (!cts.IsCancellationRequested)
{
_logger.LogInformation("Fetching updates..");
var data = DataManager.Get();
await _hubManager.SendAllAsync("TransferData", new object[] { data });
await Task.Delay(_delay, cts);
}
_logger.LogInformation("Listener has completed..");
}

That’s our basic implementation completed. It should be noted that if you’re using a repository which for instance uses a DbContext this won’t work, since we’ll be creating a DbContext instance that can become a singleton, which can lead to a whole host of problems.

The solution to this problem is injecting a IServiceScopeFactory instance and use when we need a scoped instance of a service.

private readonly HubLifetimeManager<ChangeDataHub> _hubManager;
private readonly ILogger<DefaultLogger> _logger;
private readonly TimeSpan _delay = TimeSpan.FromSeconds(1);
private readonly IServiceScopeFactory _scopeFactory;
public ChartListenerService(
HubLifetimeManager<ChangeDataHub> hubManager,
ILogger<DefaultLogger> logger,
IServiceScopeFactory scopeFactory)
{
_hubManager = hubManager;
_logger = logger;
_scopeFactory = scopeFactory;
}
public async Task StartAsync(CancellationToken cts)
{
_logger.LogInformation("Listener is starting..");
while (!cts.IsCancellationRequested)
{
// Scoped service generation, resolve and dependencies in here
using (var scope = _scopeFactory.CreateScope())
{
_logger.LogInformation("Fetching updates..");
var dataManager = scope.ServiceProvider.GetRequiredService<DataManager>();
await _hubManager.SendAllAsync("TransferData", new object[] { dataManager.Get() });
}
await Task.Delay(_delay, cts);
}
_logger.LogInformation("Listener has completed..");
}

This also means we don’t have to constructor DI all our service dependencies, a good thing in a larger, real world example.

In the next post, I’ll go over how to connect and consume this information on the client side.

EF Core – Seed Data Strategy

Sun, 06 Jan 2019 00:00:00 +0000

In this post, we’re going to explore the relatively new entity data seeding method which was introduced with EF Core 2.1.

It’s fantastic.

Unlike it’s predecessor EF6, seed data can be associated with migrations and it’s relative entity type as part of your migration strategy. What this means is adding or editing any seed data for any entity will compute the correct insert(s) or updates to push those data changes into your DB, this is incredibly powerful and leverages the benefits of tracking that migrations provide.

Lets see some code

First, you’ll need to override the OnModelCreating method in your DbContext, chances are you’re already doing this in an existing project.

 protected override void OnModelCreating(ModelBuilder builder)
{
base.OnModelCreating(builder)
}

Next, we’ll call the HasData method and pass in a populated instance of an entity.

 protected override void OnModelCreating(ModelBuilder builder)
{
base.OnModelCreating(builder);
modelBuilder.Entity().HasData(new Person { PersonId = 1, Name = "Ash" });
}

Good so far? Before running our add-migration command, I want to touch on a few key points:

Primary keys for all entities must be specified, this is how the seed data change detection works via comparing if the particular record exist, or if any fields have changed
Any entities with foreign keys must be explicitly stated
Previously seeded data that has a primary key change will be removed (this makes sense, since the record can no longer be referred to)
You may want custom initialization logic depending on your scenario such as temporary data for testing

Now, running add-migration firstseed will produce a migration for entering our new records (since their primary keys don’t exist in the table).

migrationBuilder.InsertData(
table: "Persons",
columns: new[] { "PersonId", "Name" },
values: new object[] { 1, "Ash" });

Any changes to this data will result in a new migration with correct behaviour (insert/update/delete) making seed data much easier to progress as your applications develops, rather than a monolithic script of inserts.

Further Points

Structuring Seed Data

Adding seed data with the OnModelCreating can become difficult to manage, especially with dozens of entities, personally I would opt to create extension methods to keep this method clean.

 protected override void OnModelCreating(ModelBuilder builder)
{
base.OnModelCreating(builder);
builder.AddContractHoursData();
builder.AddLocationData();
builder.AddJobTitleData();
}

Additionally, creating a single contained class for each data entity was my approach, adhering to the Single Responsibility Principle and violating DRY.

 public static void AddRewardCategoryData(this ModelBuilder model)
{
model.Entity().HasData(new List()
{
new RewardCategory()
{
RewardCategoryId = 1,
Name = "Vouchers",
Enabled = true
},
new RewardCategory()
{
RewardCategoryId = 2,
Name = "Charity",
Enabled = true
}
});
}

Creating Identity Users

One question I’ve seen people ask is seeding users from Identity (since UserManager takes care of things like Password Hash).

We can use Identities PasswordHasher.

However there’s a problem with this approach, this will programmatically generate a different hash per run, and therefore bloat every migration with updates. Additionally you’d rather avoid hard coding dozens or hundreds of type User models.

My strategy for this approach was the following:

Use a library such as Faker to generate a list of user details
Iterate through the list, assign a hard-coded GUID from a list you’ve created
Use the PasswordHasher to generate the hashed password
Pass the completed list to the HasData method
Copy the data within the AspNetUser table in your database as JSON (I used SQL Operations Studio for this)
Use some Find and replace with regular expressions to fix formatting errors and form into a list of Users
You should a list of populated entities, all with hard coded data without tedious data entry

Fixing MSBuild CS103, CS012 Compiler Errors

Fri, 01 Jun 2018 00:00:00 +0000

Recently I needed to use MSBuild to compile a solution for a build server.

The MSBuild was location at:

C:\Program Files (x86)\MSBuild\14.0\Bin

The following errors were occurring despite this working in the past:

error CS1525: Invalid expression term ‘decimal’ Syntax error, ‘,’ expected error CS1003: Syntax error, ‘,’ expected [Web.csproj]

This was due to C#6/C#7 features which aren’t supported by this MSBuild version.

The Fix

Using this MSBuild resolved the issue:

C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\MSBuild\15.0\Bin

HTML5 – Unknown JavaScript Web APIs

Sat, 05 Aug 2017 00:00:00 +0000

There’s a lot of cool things that HTML5 can do, using local storage for data saving/retrieval or acquiring a users geolocation for your custom Google map. Well it turns out there’s many many more JavaScript APIs than I haven’t seen people mention, below are a few of these.

Before we go on, I should mention I’ll be focusing on APIs which benefit mobile/tablet devices, since these are really cool useful in modern web applications.

Online State

This exposes network connection information to web, quite simply we can now determine if a user has a Internet connection within our web application. This is highly useful in cases where the apps streams data in, we can let the user know that there’s a connection issue rather than simply returning nothing creating a much better user experience.

This API is being updated, things like grabbing a connection speed and adjusting app according would be useful, for example image degradation.

window.addEventListener('offline', networkStatus);
window.addEventListener('online', networkStatus);
function networkStatus(e) {
console.log(e);
}

Support

Browser support for this is excellent for recent browser versio8ns, with some of the smaller device specific browsers such as Samung Internet supporting it.

Device Orientation

From this we have an easy way to determine the orientation of a device. This would be especially useful when dealing with media heavy web apps and ensuring your content can use the new orientation real estate efficiently. Also combined with CSS we can rotate images in a 3D space.

window.addEventListener('deviceorientation', (e) => {
console.log('alpha:', e.alpha);
console.log('beta:', e.beta);
console.log('gamma:', e.gamma);
});

Support

Browser support for this isn’t great, partial support with knows issues, fine for fun features and non essential but I wouldn’t rely on it.

Capture Ambient Light

This is really, really cool. The metric returned from this is lux which is used to measure light. You can read about the sensor API more here. A use case for this would be switching to a darker or lighter theme depending on available light, enabling the user to choose would certainly be a nice feature and provide a better user experience.

window.addEventListener('devicelight', (e) => {
console.log(`${e.value} lux`);
})

Support

Browser support for this is bad, it has been available in Chrome since version 62, however is an experimental feature and has to be enabled.

Battery Level

We can now detect battery levels, therefore also having the added benefit of determining if a device is plugged into a power source. The code for this a little different in that you’re using a promise. Since the W3C example has many code samples, I’ll use one of these.

navigator.getBattery().then(function(battery) {
console.log(battery.level);
battery.addEventListener('levelchange', function() {
console.log(this.level);
});
});

Support

Browser support for this is pretty poor unless you’re specifically targeting Chrome. Also as FireFox have removed the feature, therefore it doesn’t look promising for the future.

Writing in BEM using LESS

Sat, 05 Aug 2017 00:00:00 +0000

Overview

This is something I found myself thinking about when using the Block Element Module (BEM) methodology when coding using the preprocessor LESS.

I like this for the follow reasons:

Less repeating code
Ability to change the block name and auto cascade to the element descendants
Less lines and easier to read

The Code

 block {
&__element {
&--modifier-alpha {
color: blue;
}
&--modifier--beta {
color: green;
}
}
}

So the compiled elements would look like this:

 block__element--modifier-alpha {
color: blue;
}
block__element--modifier-beta {
color: green;
}