pagespeeds - async css

 async css 

if you want to speed up your website load your css async with a simple javacript function

<link rel="preload" href="/static/css/main.50edf018.chunk.css" as="style" onload="this.rel='stylesheet'">

<noscript><link rel="stylesheet" href="/static/css/main.50edf018.chunk.css"></noscript>

force www in your url

Add rewrite rule to you web.config to enforce http://www.extending.nl instead of http://extending.nl

 <rewrite>

 <rules>

 <rule name="WWW Rewrite" enabled="true">

      <match url="(.*)" />

        <conditions>

          <add input="{HTTP_HOST}" negate="true" pattern="^www\.(.*)$" />

        </conditions>

        <action type="Redirect" url="http://www.{HTTP_HOST}/{R:0}" appendQueryString="true" redirectType="Permanent" />

 </rule>

support webp in your IIS

 support webp in your IIS

add below fileExtension to your web.config.

<system.webServer>

  <staticContent>

<remove fileExtension=".webp"/>

      <mimeMap fileExtension=".webp" mimeType="image/webp"/>

    <clientCache cacheControlMode="UseExpires"

            httpExpires="Tue, 19 Jan 2038 03:14:07 GMT" />

</staticContent>

</system.webServer>

React -> index.html without caching for updates

in your web.config add Cache-Control header with no-cache to support updates in your website if you publish a new version of your website 

<?xml version="1.0"?>

<configuration>

<location path="index.html">

<system.webServer>

<httpProtocol>

<customHeaders>

<add name="Cache-Control" value="no-cache" />

</customHeaders>

</httpProtocol>

</system.webServer>

</location>

jpg to webp

 commandline tool cwebp 

https://web.dev/codelab-serve-images-webp/

npoi docu

https://archive.codeplex.com/?p=npoi

Cross origin from osX/iOS

vanaf safari op mac / ios kun je geen post naar http meer doen. gebruik altijd ssl
denk vervolgens aan je CORS in je api service.
in asp.net core gebruik je:

string[] corsorigin = Configuration["Cors"].Split(',',StringSplitOptions.RemoveEmptyEntries).ToArray();

app.UseCors(builder =>

builder.WithOrigins(corsorigin).AllowAnyHeader().AllowAnyMethod().AllowCredentials());

gebruik vanaf je webclient een withCredentials: true

const httpOptions = {

headers: new HttpHeaders({

'Content-Type': 'application/json',

}),

withCredentials :true

return this.httpClient.post<type>('url', object , httpOptions);

pfx voor iis maken

installeer openssl 

on mac: brew install openssl

maak van je private key texte een file private.key en ca een ca.crt en van je crt een crt file. 

openssl pkcs12 -export -out ~/downloads/extending.pfx -inkey ~/downloads/extending-private.key -in ~/downloads/extending.crt -certfile ~/downloads/extending-ca.crt

zie ook:
https://www.sslcertificaten.nl/support/OpenSSL/Meest_gebruikte_OpenSSL_opdrachten

Angular: combine multiple http requests

Usage : Rxjs combinelatest

import { Observable, combineLatest } from 'rxjs';

return combineLatest(observable1, observable2).

pipe(

    map(([result1,result2]) =>{

          //do your mapping / filtering

          const mappedResult = result2.map(item=>mapper.map(item));

          return mappedResult;

    });

);

React typescript

npx create-react-app my-app --template typescript

npm install --save typescript @types/node @types/react @types/react-dom @types/jest


https://create-react-app.dev/docs/adding-typescript/


navigatie/routing:
npm install --save react-router-dom

nuget cache clear

dotnet nuget locals http-cache --clear