Blog

Color SVG in html/css

May 3, 2022 
.buttonImagePlanning {
    background-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-image: url(filename.svg);
    background-color: #333333; // use wanted color
}
                    <div class="buttonImagePlanning"></div>

Cached Promise

March 28, 2022 
export class CachedPromise<T> {
    private dataPromise: PromiseLike<T>;
    private expires: Date;
    constructor(private _dataFn: () => PromiseLike<T>, private minutes: number) { }
    async load(reload: boolean = false) {
        if (!this.dataPromise || this.expires >= new Date() || reload) {
            return this.reload();
        }
        return await this.dataPromise;
    }
    async reload() {
        this.dataPromise = this._dataFn();
        const result = await this.dataPromise;
        this.expires = new Date(new Date().getTime() + (this.minutes * 60000));
        return result;
    }
}
// usage:
const measurementsPromise = new CachedPromise<any>(() => restApiHelper.getData("api/measurements"), 10);
measurementsPromise.load();
measurementsPromise.load(); // cached
measurementsPromise.load(true); // not cached
measurementsPromise.reload(); // not cached

Linq2Db Join

October 20, 2021

Sample of a linq2Db Join

var repositoryRembours = GetRepository<DmRembours>(unitOfWork).AsQueryable();

var result = await repository.AsQueryable()
    .Join(repositoryRembours, x => x.Ordernumber, x => x.Ordernumber, (a, b) => new { a, b })
    .ToArrayAsync();


var result2 = await repository.AsQueryable()
    .Join(repositoryRembours, SqlJoinType.Left, (shipment, rembours) => shipment.Ordernumber == rembours.Ordernumber, (shipment, rembours) => new { shipment, rembours })
    .ToArrayAsync();


Dotnet core upgrade 2.2 to 3.0 WebAPI

May 3, 2021

Project upgrade
Right click Project > Application: set target framework to: .NET Core 3.0

Update .csproj
Edit .csproj > Remove ‘Microsoft.AspNetCore.App’

<ItemGroup>
<PackageReference Include="CsvHelper" Version="12.1.2" />
<!-- <PackageReference Include="Microsoft.AspNetCore.App"/> -->
<PackageReference Include="System.Runtime.CompilerServices.Unsafe" Version="4.5.2" />
</ItemGroup>

Add usings
Add using to enable IsDevelopment()

using Microsoft.Extensions.Hosting;

Replace Configure method with:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
  if (env.IsDevelopment()) app.UseDeveloperExceptionPage();
  app.UseRouting();
  app.UseCors("CorsPolicy");
  app.UseAuthentication();
  app.UseAuthorization();
  app.UseEndpoints(e => e.MapControllers());
}

Replace ConfigureServices method with:

using Microsoft.AspNetCore.Mvc.NewtonsoftJson;
public void ConfigureServices(IServiceCollection services) {
  JwtTokenAuthentication.Register(services, Configuration);
  services.AddCors(options => {
    options.AddPolicy("CorsPolicy", builder => builder
      .AllowAnyOrigin()
      .AllowAnyMethod()
      .AllowAnyHeader()
      .Build());
  });
  services.AddControllers().AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver());
}

Add usings and download packages to get JWT typing again

using System.IdentityModel.Tokens.Jwt;
using Microsoft.AspNetCore.Authentication.JwtBearer;

Replace
Request.GetUri()

with:
using Microsoft.AspNetCore.Http.Extensions; 
Request.GetDisplayUrl()

Css grid and Flexbox

December 15, 2020
Example

Flexbox properties:

justify-content: center;  -> Horizontaal

align-items: center; -> vertical (Moet wel een hoogte hebben)

Index.html

<html>

<head>
    <title>Css grid and flexbox example</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <header>
        <div class="flex-box">
            <div class="flex-box-item">Flexbox item 1</div>
            <div class="flex-box-item">Flexbox item 2</div>
            <div class="flex-box-item">Flexbox item 3</div>
        </div>
    </header>
    <aside>
        <p>aside -> Positioned by grid </p>
    </aside>
    <main>
        <p>main -> Positioned by grid</p>
    </main>
    <footer>
        <div class="flex-box">
            <div class="flex-box-item">Flexbox item 1</div>
            <div class="flex-box-item">Flexbox item 2</div>
        </div>
    </footer>
</body>

</html>

Main.css

* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    margin: 0;
    display: grid;
    grid-template-columns: 250px auto;
    grid-template-rows: 60px auto 60px;
    grid-template-areas: "hd hd"
        "sidebar main"
        "footer footer";
    height: 100vh;
}

header {
    background: #521751;
    grid-area: hd;
}

aside {
    background: #fa923f;
    grid-area: sidebar;
}

main {
    grid-area: main;
}

footer {
    background: black;
    grid-area: footer;
}

.flex-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.flex-box-item {
    margin: 0 10px;
    color: white;
}

C# String Helper

October 13, 2020 
public static class StringHelper
{
    public static string LimitTo(this string str, int limitTo)
    {
        return str?.Length > limitTo ? str.Substring(0, limitTo) : str;
    }
}

React Footer wrapper component

June 11, 2020 
<FooterPageWrapper>
  <div>BODYCONTENT</div>
  <div>FOOTERCONTENT</div>
</FooterPageWrapper>
import React, { ReactNode } from "react";
import PerfectScrollbar from "react-perfect-scrollbar";
import "react-perfect-scrollbar/dist/css/styles.css";
import { BaseComponent } from "../BaseComponent/BaseComponent";
import "./FooterPageWrapper.css";

interface FooterPageWrapperProps {
    children: [ReactNode, ReactNode];
}

export class FooterPageWrapper extends BaseComponent<FooterPageWrapperProps> {
    render() {
        return (<div className="footer-page-wrapper">
            <PerfectScrollbar>
                {this.props.children[0]}
            </PerfectScrollbar>
            {this.props.children[1]}
        </div>
        );
    }
}
.footer-page-wrapper {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
}