DEV Community: Benjamin Black

The Present of Lodash

Benjamin Black — Thu, 23 Oct 2025 15:04:08 +0000

Given the announcement of "The Future of Lodash", with Lodash joining OpenJS, I thought I'd express my ongoing love for Lodash and share one of the many reasons why it is still useful for me day-to-day.

TL;DR Merge is an unsung hero of the library.

In the absence of something like Immer, if you need to immutably update a deeply-nested object, you can do this:

const properties = { /* ... */ };

setTracks((prev) => ({
    ...prev,
    [trackId]: {
        ...prev[trackId],
        points: {
            ...prev[trackId].points,
            [pointId]: {
                ...prev[trackId].points[pointId],
                properties: {
                    ...prev[trackId].points[pointId].properties,
                    ...properties,
                }
            }
        }
    }
}));

Or you can do this:

setTracks((prev) => 
    merge({}, prev, {[routeId]: {points: {[pointId]: {properties}}}}))
);

Signing Git commits with GPG keys that use modern encryption

Benjamin Black — Sat, 02 Jan 2021 23:39:55 +0000

My posts are usually notes and reference materials for myself, which I publish here with the hope that others might find them useful.

Git can be easily configured so that commits are cryptographically signed. The Github documentation is fairly straightforward, but I find the defaults unpalatable, so I will tweak them a bit.

In particular, I prefer to use the strongest available modern encryption, specifically EdDSA using SHA-512 and the 25519 curve, aka Ed25519.

Also, I like to create a signing-only subkey that is exclusively used for signing.

That requires some extra steps.

Creating a Ed25519 master key

First, we make sure that GPG supports EdDSA public key cryptography:

$ gpg --version
...
Supported algorithms:
Pubkey: RSA, ELG, DSA, ECDH, ECDSA, EDDSA

If our version of GnuPG was built without support for EdDSA, we're out of luck.

Next, generating an Ed25519 master key is still considered an 'expert' option, so we invoke gpg with --expert, and for the first prompt, select option (9) ECC and ECC (Elliptic Curve Cryptography) for the type of key:

$ gpg --full-generate-key --expert
...
Please select what kind of key you want:
...
   (9) ECC and ECC

Choose option (1) Curve 25519 for the next prompt:

Please select which elliptic curve you want:
   (1) Curve 25519

The rest of the prompts to generate the master key are straightforward.

Once it's finished we can confirm the new master key uses Ed25519 with gpg --list-keys.

$ gpg --list-keys --keyid-format short
...
---------------------------
pub   ed25519/4AC7128F 2021-01-02 [SC]
      [redacted]
uid         [ultimate] Benjamin Black <benjamin.black@example.com>
sub   cv25519/885EBFBA 2021-01-02 [E]

Creating a signing-only subkey

Observe that GPG creates the master key for signing (S) and for certificate creation (C) ([SC]), and automatically creates a subkey for encryption ([E]).

So we can use the master key for signing, and that is what both the Github and the official Git documentation suggest, but that is not best practice.

Instead, we should create a signing subkey explicitly for signing Git commits. We'll use the GPG CLI create it.

Begin by editing the master key, again passing --expert:

$ gpg --expert --edit-key 4AC7128F
...
sec  ed25519/B1ED9EFC4AC7128F
     created: 2021-01-02  expires: never       usage: SC  
     trust: ultimate      validity: ultimate
ssb  cv25519/78317B8E885EBFBA
     created: 2021-01-02  expires: never       usage: E   
[ultimate] (1). Benjamin Black <benjamin.black@example.com>

gpg>

Then use the GPG CLI command addkey and select option (10) ECC (sign only) for the first prompt, and option (1) Curve 25519 for the second prompt.

gpg> addkey
Please select what kind of key you want:
...
  (10) ECC (sign only)
...
Your selection? 10
Please select which elliptic curve you want:
   (1) Curve 25519
...
Your selection? 1

Complete the rest of the steps, and then use the save command at the CLI prompt to save and exit.

gpg> save
$

Now if we list keys, we'll see the newly created signing key.

$ gpg --list-keys --keyid-format short
...
sub   ed25519/599D272D 2021-01-02 [S]

Finally, just tell Git to sign everything with this signing key (step 4 in the Github documentation).

$ git config --global user.signingkey 599D272D

And now our Git commits will be signed with a signing-only GPG subkey that uses Ed25519 encryption.

Dynamically masking video using canvas and SVG

Benjamin Black — Tue, 15 Dec 2020 01:19:19 +0000

TL;DR what we're building:

Part 1: Masking a static image on a canvas

Let's start with a canvas, an image to use as a matte background, and an SVG snowflake to use as a mask, plus some simple CSS to keep it clean.

<canvas width="960" height="540"></canvas>

<img src="https://images.unsplash.com/photo-1607714724990-8f5495b75883?q=30" width="1875" height="2502">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 432">
  <path fill="#fff" d="M364 318l35 4-21-29-24-2-4-2 19-5a4 4 0 00-2-9l-27 7-33-19 7-2 24 14a4 4 0 104-7l-16-10 4-1 24 4 28-22-35-6-20 16-3 1 9-17a4 4 0 10-7-4l-14 24-16 4-64-37h33l20 20a4 4 0 106-6l-14-14h4l23 10 32-14-32-14-23 10h-4l14-14a4 4 0 10-6-6l-20 20h-33l64-37 16 4 14 24a4 4 0 107-4l-9-17 3 1 20 16 35-6-28-22-24 4-4-1 16-10a4 4 0 00-4-7l-24 13-7-1 33-19 27 7a4 4 0 102-9l-19-5 4-2 24-2 21-29-35 4-15 20-3 2 5-18a4 4 0 10-8-3l-8 27-32 19 1-7 24-14a4 4 0 00-4-8l-16 10 1-4 15-19-5-35-23 28 4 24-1 4-9-17a4 4 0 10-8 5l14 24-4 15-64 37 16-28 27-7a4 4 0 00-2-9l-19 5 2-3 20-15 4-35-29 21-2 24-2 4-5-19a4 4 0 10-8 3l7 26-17 29v-74l12-12h27a4 4 0 000-8h-19l3-3 23-9 13-33-33 13-9 23-3 3V81a4 4 0 10-8 0v27l-6 6V76l20-20a4 4 0 10-6-6l-14 13v-4l10-22-14-33-14 33 10 22v4l-14-13a4 4 0 10-6 6l20 20v38l-6-6V81a4 4 0 00-8 0v19l-3-3-9-23-33-13 13 33 23 9 3 3h-19a4 4 0 000 8h27l12 12v74l-17-29 7-26a4 4 0 00-8-3l-5 19-2-4-2-24-29-21 4 35 20 15 2 3-19-5a4 4 0 10-2 9l27 7 16 28-64-37-4-15 14-24a4 4 0 00-8-5l-9 17-1-4 4-24-23-28-5 35 15 19 1 4-16-10a4 4 0 10-4 8l24 14 1 7-32-19-8-27a4 4 0 10-8 3l5 18-3-2-15-20-35-4 21 29 24 2 4 2-19 5a4 4 0 002 9l27-7 33 19-7 1-24-13a4 4 0 10-4 7l16 10-4 1-24-4-28 22 35 6 20-16 3-1-9 17a4 4 0 107 4l14-24 16-4 64 37h-33l-20-20a4 4 0 10-6 6l14 14h-4l-23-10-32 14 32 14 23-10h4l-14 14a4 4 0 106 6l20-20h33l-64 37-16-4-14-24a4 4 0 00-7 4l9 17-3-1-20-16-35 6 28 22 24-4 4 1-16 10a4 4 0 004 7l24-14 7 2-33 19-27-7a4 4 0 00-2 9l19 5-4 2-24 2-21 29 35-4 15-20 3-2-5 18a4 4 0 008 3l8-27 32-19-1 7-24 14a4 4 0 004 8l16-10-1 4-15 19 5 35 23-28-4-24 1-4 9 17a4 4 0 008-5l-14-24 4-15 64-37-16 28-27 7a4 4 0 102 9l19-5-2 3-20 15-4 35 29-21 2-24 2-4 5 19a4 4 0 108-3l-7-26 17-29v74l-12 12h-27a4 4 0 100 8h19l-3 3-23 9-13 33 33-13 9-23 3-3v19a4 4 0 008 0v-27l6-6v38l-20 20a4 4 0 006 6l14-13v4l-10 22 14 33 14-33-10-22v-4l14 13a4 4 0 006-6l-20-20v-38l6 6v27a4 4 0 008 0v-19l3 3 9 23 33 13-13-33-23-9-3-3h19a4 4 0 000-8h-27l-12-12v-74l17 29-7 26a4 4 0 008 3l5-19 2 4 2 24 29 21-4-35-20-15-2-3 19 5a4 4 0 102-9l-27-7-16-28 64 37 4 15-14 24a4 4 0 108 5l9-17 1 4-4 24 23 28 5-35-15-19-1-4 16 10a4 4 0 004-8l-24-14-1-7 32 19 8 27a4 4 0 108-3l-5-18 3 2 15 20z"/>
</svg>

* { box-sizing: inherit; }

html, body {
  margin: 0;
}

html {
  box-sizing: border-box;
  padding: 0;
  color: white;
  background-color: black;
}

body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

canvas {
  width: 100%;
  height: auto;
}

img, svg {
  width: 75vmin;
  height: auto;
}

Since we're waiting for the DOM (and until we get top-level await), we'll wrap our JS in an async main function and call it after DOMContentLoaded is fired on the window.

async function main() {

}

self.addEventListener('DOMContentLoaded', () => main().catch(console.error), {once: true});

For now, we'll just dump our code in main.

Let's begin by declaring some refs that we'll need.

const canvas = document.querySelector('canvas');
const canvasContext = canvas.getContext('2d');
const canvasAspectRatio = canvas.width / canvas.height;

const matte = document.querySelector('img');

We can't draw an inline <svg> directly on the canvas, so we'll convert it to an Image, and then wait for both the matte and mask images to load before proceeding.

const mask = document.createElement('img');

mask.src = URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(document.querySelector('svg'))], {type: 'image/svg+xml'}));

await Promise.all([
  new Promise((resolve) => mask.addEventListener('load', resolve, {once: true})),
  matte.complete || new Promise((resolve) => matte.addEventListener('load', resolve, {once: true})),
]);

Once both images are loaded, we can calculate their aspect ratios and declare some variables we'll need to position them on the canvas.

const matteAspectRatio = matte.naturalWidth / matte.naturalHeight, maskAspectRatio = mask.naturalWidth / mask.naturalHeight;

let width, height, top, left;

Next, we'll draw the matte background on the canvas, scaling and positioning it so that it covers the canvas.

[width, height] =
  canvasAspectRatio <= matteAspectRatio
  ? [canvas.height * matteAspectRatio, canvas.height]
  : [canvas.width, canvas.width / matteAspectRatio];

[top, left] = [(canvas.height - height) / 2, (canvas.width - width) / 2];

canvasContext.drawImage(matte, 0, 0, matte.naturalWidth, matte.naturalHeight, left, top, width, height);

Now let's mask the image on the canvas using destination-in compositing. We'll draw the mask to fit inside the canvas, instead of filling it (simply by switching the cases of the ternary expression to calculate width and height).

[width, height] = canvasAspectRatio <= maskAspectRatio
  ? [canvas.width, canvas.width / maskAspectRatio]
  : [canvas.height * maskAspectRatio, canvas.height];

[top, left] = [(canvas.height - height) / 2, (canvas.width - width) / 2];

canvasContext.globalCompositeOperation = 'destination-in';

canvasContext.drawImage(mask, left, top, width, height);

Part 1 Pen

Part 2: Using a video instead of a matte background

Let's replace the matte background image with a video. Instead of adding a <video> element to the DOM, we'll keep the document clean and create the video programmatically.

We'll use requestAnimationFrame to redraw every frame of the video on the canvas.

Let's wipe the main function and start over.

We'll remember the dimensions and position of the video and mask, instead of recalculating them on each frame, so they'll need their own variables instead of reusing width, height, left, and top.

async function main() {
  const canvas = document.querySelector('canvas');
  const canvasContext = canvas.getContext('2d');
  const canvasAspectRatio = canvas.width / canvas.height;

  const video = document.createElement('video');

  video.muted = true;
  video.autoplay = true;
  video.loop = true;
  video.playsinline = true;
  video.src = "https://giant.gfycat.com/CheapBitterCaterpillar.webm";

  await video.play();

  const videoAspectRatio = video.videoWidth / video.videoHeight;

  const [frameWidth, frameHeight] =
    canvasAspectRatio <= videoAspectRatio
    ? [canvas.height * videoAspectRatio, canvas.height]
  : [canvas.width, canvas.width / videoAspectRatio];

  const [frameTop, frameLeft] = [(canvas.height - frameHeight) / 2, (canvas.width - frameWidth) / 2];

  requestAnimationFrame(function frame() {
    canvasContext.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, frameLeft, frameTop, frameWidth, frameHeight);
    requestAnimationFrame(frame);
  });
}

Now the video is being drawn on the canvas on every frame. Let's write the code to load the mask. We'll scale the mask to be centered and contained within the canvas.

Let's also get rid of the mask <svg> from the DOM, and create it dynamically in Javascript, skipping an intensive serialization step.

We also need to update the requestAnimationFrame, since it overwrites the canvas on each frame. We'll switch the drawing order so that the mask is drawn first, using destination-over compositing (to overwrite the previous frame), and then draw the video frame using source-in compositing. (This is to prepare for using multiple masks instead of just one.)

async function main() {
  const canvas = document.querySelector('canvas');
  const canvasContext = canvas.getContext('2d');
  const canvasAspectRatio = canvas.width / canvas.height;

  const video = document.createElement('video');
  video.muted = true;
  video.autoplay = true;
  video.loop = true;
  video.playsinline = true;
  video.src = "https://giant.gfycat.com/CheapBitterCaterpillar.webm";

  const maskImage = document.createElement('img');
  maskImage.src = URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" width="432" height="432"><path fill="#fff" d="M364 318l35 4-21-29-24-2-4-2 19-5a4 4 0 00-2-9l-27 7-33-19 7-2 24 14a4 4 0 104-7l-16-10 4-1 24 4 28-22-35-6-20 16-3 1 9-17a4 4 0 10-7-4l-14 24-16 4-64-37h33l20 20a4 4 0 106-6l-14-14h4l23 10 32-14-32-14-23 10h-4l14-14a4 4 0 10-6-6l-20 20h-33l64-37 16 4 14 24a4 4 0 107-4l-9-17 3 1 20 16 35-6-28-22-24 4-4-1 16-10a4 4 0 00-4-7l-24 13-7-1 33-19 27 7a4 4 0 102-9l-19-5 4-2 24-2 21-29-35 4-15 20-3 2 5-18a4 4 0 10-8-3l-8 27-32 19 1-7 24-14a4 4 0 00-4-8l-16 10 1-4 15-19-5-35-23 28 4 24-1 4-9-17a4 4 0 10-8 5l14 24-4 15-64 37 16-28 27-7a4 4 0 00-2-9l-19 5 2-3 20-15 4-35-29 21-2 24-2 4-5-19a4 4 0 10-8 3l7 26-17 29v-74l12-12h27a4 4 0 000-8h-19l3-3 23-9 13-33-33 13-9 23-3 3V81a4 4 0 10-8 0v27l-6 6V76l20-20a4 4 0 10-6-6l-14 13v-4l10-22-14-33-14 33 10 22v4l-14-13a4 4 0 10-6 6l20 20v38l-6-6V81a4 4 0 00-8 0v19l-3-3-9-23-33-13 13 33 23 9 3 3h-19a4 4 0 000 8h27l12 12v74l-17-29 7-26a4 4 0 00-8-3l-5 19-2-4-2-24-29-21 4 35 20 15 2 3-19-5a4 4 0 10-2 9l27 7 16 28-64-37-4-15 14-24a4 4 0 00-8-5l-9 17-1-4 4-24-23-28-5 35 15 19 1 4-16-10a4 4 0 10-4 8l24 14 1 7-32-19-8-27a4 4 0 10-8 3l5 18-3-2-15-20-35-4 21 29 24 2 4 2-19 5a4 4 0 002 9l27-7 33 19-7 1-24-13a4 4 0 10-4 7l16 10-4 1-24-4-28 22 35 6 20-16 3-1-9 17a4 4 0 107 4l14-24 16-4 64 37h-33l-20-20a4 4 0 10-6 6l14 14h-4l-23-10-32 14 32 14 23-10h4l-14 14a4 4 0 106 6l20-20h33l-64 37-16-4-14-24a4 4 0 00-7 4l9 17-3-1-20-16-35 6 28 22 24-4 4 1-16 10a4 4 0 004 7l24-14 7 2-33 19-27-7a4 4 0 00-2 9l19 5-4 2-24 2-21 29 35-4 15-20 3-2-5 18a4 4 0 008 3l8-27 32-19-1 7-24 14a4 4 0 004 8l16-10-1 4-15 19 5 35 23-28-4-24 1-4 9 17a4 4 0 008-5l-14-24 4-15 64-37-16 28-27 7a4 4 0 102 9l19-5-2 3-20 15-4 35 29-21 2-24 2-4 5 19a4 4 0 108-3l-7-26 17-29v74l-12 12h-27a4 4 0 100 8h19l-3 3-23 9-13 33 33-13 9-23 3-3v19a4 4 0 008 0v-27l6-6v38l-20 20a4 4 0 006 6l14-13v4l-10 22 14 33 14-33-10-22v-4l14 13a4 4 0 006-6l-20-20v-38l6 6v27a4 4 0 008 0v-19l3 3 9 23 33 13-13-33-23-9-3-3h19a4 4 0 000-8h-27l-12-12v-74l17 29-7 26a4 4 0 008 3l5-19 2 4 2 24 29 21-4-35-20-15-2-3 19 5a4 4 0 102-9l-27-7-16-28 64 37 4 15-14 24a4 4 0 108 5l9-17 1 4-4 24 23 28 5-35-15-19-1-4 16 10a4 4 0 004-8l-24-14-1-7 32 19 8 27a4 4 0 108-3l-5-18 3 2 15 20z"/></svg>`], {type: 'image/svg+xml'}));

  await Promise.all([
    video.play(),
    new Promise((resolve) => maskImage.addEventListener('load', resolve, {once: true})),
  ]);

  const videoAspectRatio = video.videoWidth / video.videoHeight;

  const [frameWidth, frameHeight] =
    canvasAspectRatio <= videoAspectRatio
    ? [canvas.height * videoAspectRatio, canvas.height]
  : [canvas.width, canvas.width / videoAspectRatio];

  const [frameTop, frameLeft] = [(canvas.height - frameHeight) / 2, (canvas.width - frameWidth) / 2];

  const maskAspectRatio = maskImage.naturalWidth / maskImage.naturalHeight;

  const [maskWidth, maskHeight] =
        canvasAspectRatio <= maskAspectRatio
  ? [canvas.width, canvas.width / maskAspectRatio]
  : [canvas.height * maskAspectRatio, canvas.height];

  const [maskTop, maskLeft] = [(canvas.height - maskHeight) / 2, (canvas.width - maskWidth) / 2];

  requestAnimationFrame(function frame() {
    canvasContext.globalCompositeOperation = 'destination-over';
    canvasContext.drawImage(maskImage, maskLeft, maskTop, maskWidth, maskHeight);

    canvasContext.globalCompositeOperation = 'source-in';
    canvasContext.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, frameLeft, frameTop, frameWidth, frameHeight);

    requestAnimationFrame(frame);
  });
}

Now we have a video that is being dynamically masked on every frame.

Since the HTML only contains a single <canvas> element, let's tweak the CSS a little bit.

* { box-sizing: inherit; }

html, body {
  margin: 0;
}

html {
  box-sizing: border-box;
  padding: 0;
  color: white;
  background-color: black;
  height: 100%;
}

body {
  padding: 1rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  width: 100%;
  height: auto;
}

Part 2 Pen

Part 3: Define multiple masks and use one at random

Instead of a single big snowflake, let's cache a bunch of different snowflake patterns in an array. We'll create an array of promises that will resolve with a loaded mask image, and which will replace themselves in the array with the resulting Image object, so that we can use Promise.all on the entire array to wait for all images to load.

We'll declare it at the top-level scope, so that the images can begin loading immediately instead of waiting for main() to be executed.

const masks = Array.from([
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" width="432" height="432"><path fill="#fff" d="M364 318l35 4-21-29-24-2-4-2 19-5a4 4 0 00-2-9l-27 7-33-19 7-2 24 14a4 4 0 104-7l-16-10 4-1 24 4 28-22-35-6-20 16-3 1 9-17a4 4 0 10-7-4l-14 24-16 4-64-37h33l20 20a4 4 0 106-6l-14-14h4l23 10 32-14-32-14-23 10h-4l14-14a4 4 0 10-6-6l-20 20h-33l64-37 16 4 14 24a4 4 0 107-4l-9-17 3 1 20 16 35-6-28-22-24 4-4-1 16-10a4 4 0 00-4-7l-24 13-7-1 33-19 27 7a4 4 0 102-9l-19-5 4-2 24-2 21-29-35 4-15 20-3 2 5-18a4 4 0 10-8-3l-8 27-32 19 1-7 24-14a4 4 0 00-4-8l-16 10 1-4 15-19-5-35-23 28 4 24-1 4-9-17a4 4 0 10-8 5l14 24-4 15-64 37 16-28 27-7a4 4 0 00-2-9l-19 5 2-3 20-15 4-35-29 21-2 24-2 4-5-19a4 4 0 10-8 3l7 26-17 29v-74l12-12h27a4 4 0 000-8h-19l3-3 23-9 13-33-33 13-9 23-3 3V81a4 4 0 10-8 0v27l-6 6V76l20-20a4 4 0 10-6-6l-14 13v-4l10-22-14-33-14 33 10 22v4l-14-13a4 4 0 10-6 6l20 20v38l-6-6V81a4 4 0 00-8 0v19l-3-3-9-23-33-13 13 33 23 9 3 3h-19a4 4 0 000 8h27l12 12v74l-17-29 7-26a4 4 0 00-8-3l-5 19-2-4-2-24-29-21 4 35 20 15 2 3-19-5a4 4 0 10-2 9l27 7 16 28-64-37-4-15 14-24a4 4 0 00-8-5l-9 17-1-4 4-24-23-28-5 35 15 19 1 4-16-10a4 4 0 10-4 8l24 14 1 7-32-19-8-27a4 4 0 10-8 3l5 18-3-2-15-20-35-4 21 29 24 2 4 2-19 5a4 4 0 002 9l27-7 33 19-7 1-24-13a4 4 0 10-4 7l16 10-4 1-24-4-28 22 35 6 20-16 3-1-9 17a4 4 0 107 4l14-24 16-4 64 37h-33l-20-20a4 4 0 10-6 6l14 14h-4l-23-10-32 14 32 14 23-10h4l-14 14a4 4 0 106 6l20-20h33l-64 37-16-4-14-24a4 4 0 00-7 4l9 17-3-1-20-16-35 6 28 22 24-4 4 1-16 10a4 4 0 004 7l24-14 7 2-33 19-27-7a4 4 0 00-2 9l19 5-4 2-24 2-21 29 35-4 15-20 3-2-5 18a4 4 0 008 3l8-27 32-19-1 7-24 14a4 4 0 004 8l16-10-1 4-15 19 5 35 23-28-4-24 1-4 9 17a4 4 0 008-5l-14-24 4-15 64-37-16 28-27 7a4 4 0 102 9l19-5-2 3-20 15-4 35 29-21 2-24 2-4 5 19a4 4 0 108-3l-7-26 17-29v74l-12 12h-27a4 4 0 100 8h19l-3 3-23 9-13 33 33-13 9-23 3-3v19a4 4 0 008 0v-27l6-6v38l-20 20a4 4 0 006 6l14-13v4l-10 22 14 33 14-33-10-22v-4l14 13a4 4 0 006-6l-20-20v-38l6 6v27a4 4 0 008 0v-19l3 3 9 23 33 13-13-33-23-9-3-3h19a4 4 0 000-8h-27l-12-12v-74l17 29-7 26a4 4 0 008 3l5-19 2 4 2 24 29 21-4-35-20-15-2-3 19 5a4 4 0 102-9l-27-7-16-28 64 37 4 15-14 24a4 4 0 108 5l9-17 1 4-4 24 23 28 5-35-15-19-1-4 16 10a4 4 0 004-8l-24-14-1-7 32 19 8 27a4 4 0 108-3l-5-18 3 2 15 20z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 296"><path d="M250 185a7 7 0 00-12 1l-2 4-13-8 19-12a7 7 0 10-8-13l-25 16-19-25 19-26 25 17a7 7 0 0010-2c3-3 2-8-2-10l-19-14 13-8 2 5a7 7 0 0012 1l26-29a7 7 0 00-8-12l-37 8a7 7 0 00-5 11l2 4-13 7-1-23a8 8 0 00-15 1l2 29-32 4-13-29 27-14c3-2 5-6 3-10s-7-5-11-3l-20 11V51h5a7 7 0 006-10L155 5c-1-3-4-5-7-5-4 0-7 2-8 5l-12 36a7 7 0 007 10h5v15l-22-10c-3-2-8-1-10 3-1 4 0 8 4 10l26 13-12 29-31-4 1-29a7 7 0 10-15-1l-1 23-12-7 2-4a8 8 0 00-5-11l-37-8a7 7 0 00-8 13l26 28a7 7 0 0012-1l2-4 13 7-20 14a8 8 0 009 12l24-16 18 25-18 25-25-16a8 8 0 00-8 13l20 12-13 8-2-4a7 7 0 00-12-1l-25 28a8 8 0 007 12l37-7a8 8 0 005-11l-2-5 13-7 1 24a7 7 0 1015-1l-2-29 31-4 12 29-26 13c-4 1-5 6-3 10 1 3 6 5 9 3l22-10v15h-5a7 7 0 00-7 10l12 36c1 3 4 5 8 5 3 0 6-2 7-5l12-36a8 8 0 00-7-10h-5v-15l20 11 4 1c3 0 5-2 7-4 2-4 0-9-3-11l-27-13 13-29 31 4-2 29a8 8 0 0015 1l2-24 13 8-2 4a7 7 0 005 11l37 8a7 7 0 008-4c2-3 2-6-1-9l-25-28z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297 297"><path d="M290 142h-12l9-10a7 7 0 10-11-10l-19 20h-14l9-10a7 7 0 10-11-10l-19 20h-13l17-19 2-5c0-4-3-7-7-7h-23l8-8h27a7 7 0 100-15h-12l10-10h27a7 7 0 100-15h-12l8-9a8 8 0 00-11-10l-8 8V39c0-4-4-8-8-8s-7 4-7 8v28l-10 10V64a8 8 0 00-15 0l1 27-9 9V78c0-3 0-5-2-6-3-3-8-4-11-1l-19 17V74l20-18c3-3 3-8 0-11-2-3-7-3-10 0l-10 9V40l20-19c3-3 3-8 0-11s-7-3-10 0l-10 9V8a7 7 0 10-15 0v10l-8-8c-3-3-7-3-10 0s-3 8-1 10l19 19v14l-8-8c-3-3-7-3-10 0s-3 8-1 10l19 19v13l-17-16a7 7 0 00-12 6l-1 22-8-8V65a7 7 0 10-15 0v11L77 66V40a7 7 0 10-15 0v11l-8-8c-3-3-7-3-10 0s-3 8 0 11l8 8H39c-4 0-7 4-7 8s3 7 7 7h28l10 10H64a7 7 0 100 15l27-1 10 10H78l-7 2c-3 3-3 8 0 11l1 1 16 17H74l-18-20a7 7 0 10-11 10l9 9H40l-19-19a7 7 0 10-11 10l9 9H8a7 7 0 100 15h10l-8 9a7 7 0 1010 10l19-18h14l-8 8a7 7 0 1010 10l19-18h13l-16 16a7 7 0 005 13l24 1-9 9-27-1a8 8 0 000 15l12 1-10 10-27-1c-4 0-7 4-8 8 0 4 4 7 8 7h13l-8 8a8 8 0 005 13l5-2 7-7v12a7 7 0 1015 0v-27l10-10v12a7 7 0 1015 0v-27l10-10v23a8 8 0 008 8c2 1 4-1 6-2l15-16v12l-18 19c-3 3-3 8 0 11l5 2 5-2 8-9v14l-18 19c-3 3-3 8 0 11l5 2 5-2 8-9v12a7 7 0 1015 0v-12l10 9a8 8 0 0010 0c3-3 3-8 0-11l-20-19v-14l10 9a8 8 0 0010 0c3-3 3-8 0-11l-20-19v-13l17 17 7 2c4 0 7-3 7-7v-25l10 10-1 27a7 7 0 1015 1l1-13 10 9-1 28c0 4 3 7 7 7l1 1c4 0 7-4 7-8v-13l8 8a7 7 0 0011 0c3-3 3-7 0-10l-7-7h11a7 7 0 100-15h-26l-10-10h11a7 7 0 100-15h-26l-9-10 23-1 5-2c3-3 3-7 0-10l-16-16h12l19 18a7 7 0 0011 0c3-3 3-7 0-10l-9-8h14l19 18a7 7 0 0011 0c3-3 3-7 0-10l-9-8h12a7 7 0 100-15zm-175-17l17 17h-24l-14-16 21-1zm0 47H94l14-16h23l-16 16zm25 17l-14 14-1-20 15-15v21zm0-60l-15-15V94l15 14v21zm15-21l17-15v22l-17 17v-24zm16 96l-16-15v-24l16 17v22zm12-32l-15-15h21l14 14-20 1zm6-30h-22l16-17h21l-15 17z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 298"><path d="M291 142h-12v-11a7 7 0 10-15 0v11h-9v-17a7 7 0 10-15 0v17h-69l-2-3 50-49 12 12a7 7 0 0011 0c3-3 3-8 0-11l-12-12 6-6 8 7a7 7 0 0010 0c3-3 3-7 0-10l-7-8 7-8a8 8 0 00-10-10l-8 7-8-7a8 8 0 00-10 10l7 8-6 6-12-12a8 8 0 00-11 11l12 12-50 50-2-1V58h18a7 7 0 100-15h-18v-9h12a7 7 0 100-15h-12V8a7 7 0 10-15 0v11h-10a7 7 0 100 15h10v9h-16a7 7 0 100 15h16v70l-1 1-50-50 12-12a7 7 0 10-11-11L79 68l-6-6 7-8a8 8 0 00-10-10l-8 7-8-7a8 8 0 00-10 10l7 8-7 8a8 8 0 1010 10l8-7 6 6-12 12a7 7 0 1011 11l12-12 50 50-1 1H57v-16a7 7 0 10-15 0v17h-9v-11a7 7 0 10-15 0v11H8a7 7 0 100 15h10v11a7 7 0 1015 0v-11h9v17a7 7 0 1015 0v-17h71l1 2-50 49-12-12a8 8 0 00-11 11l12 12-6 6-8-7a7 7 0 10-10 10l7 8-7 8a8 8 0 1010 10l8-7 8 7a7 7 0 0010 0c3-3 3-7 0-10l-7-8 6-6 12 12a7 7 0 0011 0c3-3 3-8 0-11l-12-12 49-50 2 2v70h-16a7 7 0 100 15h16v9h-10a7 7 0 100 15h10v11a7 7 0 1015 0v-11h12a7 7 0 100-15h-12v-9h18a7 7 0 100-15h-18v-70l3-1 49 49-12 12a8 8 0 0011 11l12-12 6 6-7 8a8 8 0 0010 10l8-7 8 7a7 7 0 0010 0c3-3 3-7 0-10l-7-8 7-8a8 8 0 00-10-10l-8 7-6-6 12-12a8 8 0 00-11-11l-12 12-49-49 1-3h69v17a7 7 0 1015 0v-17h9v11a7 7 0 1015 0v-11h12a7 7 0 100-14z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297 297"><path d="M290 133c-4-5-10-7-16-7a22 22 0 00-21 15h-20l8-8a8 8 0 00-10-11l-19 19h-22l-8-16 17-16h27a7 7 0 100-15h-12l14-14a22 22 0 0025-5 23 23 0 00-16-38 22 22 0 00-22 22c0 4 0 7 2 10l-14 14V72a7 7 0 10-15 0v26l-16 16-16-6V86l19-20c3-3 3-7 0-10s-8-3-11 0l-8 8V44c9-3 15-12 15-21 0-13-10-23-23-23-12 0-22 10-22 23 0 9 7 18 15 21v20l-9-8c-3-3-8-3-11 0-2 3-3 7 0 10l20 20v21l-18 6-14-15V71a7 7 0 10-15 0v12L80 69a22 22 0 00-21-32 22 22 0 00-22 22 22 22 0 0022 23l10-2 14 14H72a7 7 0 100 15h26l15 14-8 18H85l-19-19a8 8 0 00-11 10l9 9H44a23 23 0 100 15h20l-8 8a7 7 0 1010 11l19-19h21l6 18-14 14H71a7 7 0 100 15h12l-14 14-10-2a22 22 0 00-22 22 22 22 0 0022 23 22 22 0 0021-32l14-14v11a7 7 0 1015 0v-26l14-15 18 7v21l-20 19c-2 3-2 8 1 11l5 2 5-2 9-9v20c-8 3-15 12-15 21a23 23 0 0045 0c0-9-6-18-15-21v-20l8 8a8 8 0 0011 0c3-3 2-8-1-11l-18-18v-22l16-7 16 15v28a7 7 0 1015 0v-13l14 15c-2 3-2 6-2 9a22 22 0 0022 23 22 22 0 0023-23 22 22 0 00-23-22l-9 2-14-14h11a7 7 0 100-15h-26l-16-16 7-16h22l19 19a7 7 0 0011 0c3-3 3-7 0-10l-9-9h20a23 23 0 1037-23zm-122 36l-21 9-20-9-8-21 8-20 20-8 20 9 10 19-9 21z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 298"><path d="M290 141h-25l11-12a7 7 0 10-11-10l-21 22h-37l16-18a8 8 0 00-4-12h-22l24-24h31a7 7 0 100-15h-16l18-18c3-3 3-8 0-11s-8-3-11 0l-18 18V46a7 7 0 10-15 0v30l-25 25V78l-2-5c-3-3-8-3-11 0l-16 15V53l22-21c3-3 3-8 0-11s-8-3-11 0l-11 11V8a7 7 0 10-15 0v24l-10-11c-3-3-8-3-11 0s-3 8 0 11l21 21v36l-16-16a7 7 0 00-12 4l-1 2v21L87 75V46a7 7 0 10-15 0v14L55 43c-3-3-7-3-10 0s-3 8 0 11l17 18H47a7 7 0 100 15h30l25 24-23 1c-4 0-7 4-7 7l-1 1h1c0 2 0 4 2 5l16 16H55l-22-22a8 8 0 00-10 10l11 11H9a7 7 0 100 15h25l-11 11a8 8 0 1010 11l22-21h35l-15 16a8 8 0 005 13v-1 1l22-1-25 26H47a7 7 0 100 15h15l-17 17a8 8 0 005 13l5-2 17-18v16a7 7 0 1015 0v-31l26-25 1 24c0 4 3 8 7 8l4-2 16-16v36l-21 21c-3 3-3 7 0 10l6 3c2 0 3-1 5-3l10-10v25a7 7 0 1015 0v-26l12 11a8 8 0 0010 0c3-3 3-7 0-10l-22-22v-36a5625 5625 0 0023 19c4 0 7-4 7-8v-24l24 25v31a7 7 0 1015 0v-16l18 18a8 8 0 0011 0c3-3 3-8 0-11l-17-17h15a7 7 0 100-15h-30l-26-26 23-1a7 7 0 004-14l-14-13h35l21 21a7 7 0 0011 0c3-3 3-8 0-11l-11-10h25a7 7 0 100-15zm-89-16l-14 16h-20l15-16h19zm-31-29l1 20-15 14v-21l14-13zm-43 0l14 13v20l-14-14V96zm-30 30h20l14 15h-20l-14-15zm0 43l13-13h21l-14 13H97zm31 33l-1-21 14-15v22l-13 14zm43-1l-15-13v-22l15 14v21zm30-32h-20l-13-14h20l13 14z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297 297"><path d="M295 140a17 17 0 00-30 2h-16l-39-20 14-8 9 7a7 7 0 0010-1c3-3 2-8-1-11l-4-3 11-6 6 2a8 8 0 008-4l9-13a8 8 0 00-7-11h-15c-4 1-6 3-7 6l-2 7-11 6v-4a7 7 0 10-15 2l1 10-14 8 3-43 9-15a16 16 0 009-3 17 17 0 10-22-5l-9 16-35 23V67l10-4c4-2 6-6 4-10-1-4-6-6-10-4l-4 2V38l4-5c3-2 3-6 2-9l-7-13a7 7 0 00-14 0l-7 13c-1 3-1 7 1 9l6 6v11l-5-1c-3-2-8 0-9 4-2 4 0 8 4 10l10 4v16l-37-24-9-15a17 17 0 00-15-26 17 17 0 102 34l10 15 2 42-13-8 2-11a7 7 0 10-15-2l-1 5-11-6-2-7c0-3-3-5-6-5l-16-1a8 8 0 00-7 11l9 14a8 8 0 008 3l7-2 10 6-3 3a7 7 0 109 11l8-6 14 8-40 20H32a17 17 0 00-15-10 17 17 0 00-16 21 17 17 0 0016 12c6 0 11-3 14-8h20l37 18-13 8-9-7a7 7 0 10-10 12l5 3-11 6-7-1c-3-1-6 0-8 3l-9 13a8 8 0 007 11h16c3 0 6-3 6-6l2-7 11-6v4a8 8 0 1015-2l-1-10 13-8-2 43-9 16a17 17 0 1014 7l8-16 36-24v16l-11 5c-4 1-6 5-4 9 1 3 4 5 7 5l2-1 6-2v13l-5 5c-3 2-3 6-2 9l7 14c2 2 4 4 7 4s6-2 7-4l7-14c2-3 1-7-1-9l-5-5v-12l3 1c4 2 9 0 10-4 2-3 0-8-4-9l-9-4v-16l35 24 12 17c-2 2-3 5-3 9 0 9 8 17 17 17a17 17 0 10-2-34l-11-17-3-43 14 8-1 11a7 7 0 1014 2l1-5 11 6 2 7c1 3 3 5 7 6h16a7 7 0 006-11l-8-13c-2-3-6-4-9-4l-7 2-10-6 3-2a7 7 0 10-9-12l-8 6-14-8 37-18h19c3 5 8 8 14 8a17 17 0 0015-25zM189 79l-2 39-30 17v-35l32-21zm-81 0l34 22v35l-31-18-3-39zm-40 70l36-18 30 18-30 17-36-17zm40 69l3-39 31-18v35l-34 22zm81 1l-32-22v-35l30 17 2 40zm5-53l-30-17 30-18 36 18-36 17z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 296"><path d="M270 201a15 15 0 00-14 0l-12-6 24-11a7 7 0 00-7-14l-32 16-11-7 23-11a7 7 0 10-7-13l-32 15-24-13v-18l23-14 32 17a7 7 0 0010-4c2-3 1-8-3-10l-23-12 11-6 32 16a7 7 0 0010-3c2-4 1-8-3-10l-23-12 11-7a15 15 0 10-7-13l-11 7 2-26a7 7 0 10-15-1l-3 36-11 6 2-26a7 7 0 10-15-1l-3 36-23 14-15-10V90l29-19a7 7 0 10-8-13l-21 14V59l29-19a7 7 0 10-8-13l-21 14V28c4-3 7-7 7-13a15 15 0 00-30 0c0 6 3 10 8 13v13l-22-15a8 8 0 00-9 13l31 20v13l-22-15a8 8 0 00-9 13l31 20v26l-17 9-22-13-2-35a7 7 0 10-15 1l1 25-11-6-2-36c0-4-4-7-8-7-4 1-7 4-7 8l1 26-11-7a15 15 0 10-8 13l12 7-24 11a7 7 0 107 14l32-16 11 6-23 12a7 7 0 106 13l33-16 23 13v19l-23 13-32-16a7 7 0 10-6 13l22 12-11 7-31-17a7 7 0 10-7 14l23 12-12 6a15 15 0 108 13l11-6-2 26a7 7 0 1015 1l3-36 11-7-2 26a7 7 0 1015 1l2-36 23-13 17 9v26l-31 20a8 8 0 009 12l22-14v13l-31 20a7 7 0 109 12l21-14v13c-5 3-7 8-7 14a15 15 0 1022-13v-13l22 14a7 7 0 0010-2c3-3 2-8-2-10l-30-20v-13l22 14a7 7 0 0010-2c3-3 2-8-2-10l-30-20v-27l16-9 23 13 2 36a7 7 0 1015-1l-2-26 12 6 2 36a7 7 0 1015-1l-2-26 12 7a15 15 0 1022-13z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297 297"><path d="M275 213l-21-12 21-14a8 8 0 00-8-12l-28 17-11-6 11-9a8 8 0 00-9-12l-16 13-25-15v-29l25-15 18 11a7 7 0 0010-2c2-4 1-8-2-10l-11-7 10-6 28 17a7 7 0 0010-3c2-3 1-8-2-10l-21-13 20-11a7 7 0 00-7-13l-21 12-1-26c-1-4-4-7-8-7-4 1-7 4-7 8l1 33-11 7-2-14a7 7 0 10-14 1l2 21-25 14-26-16V78l19-9c4-1 6-6 4-9-2-4-6-6-10-4l-13 5V48l29-15c4-2 6-6 4-10s-7-5-10-3l-23 11V8a7 7 0 10-15 0v23l-21-12c-4-2-8-1-10 3-2 3-1 8 3 10l28 16v12l-11-6c-4-2-8-1-10 3s-1 8 3 10l18 10v29l-25 14-24-13 2-21a7 7 0 10-14-1l-2 14-11-7 1-33a7 7 0 10-15-1l-1 26-21-12a7 7 0 10-7 13l20 11-21 13a8 8 0 008 13l28-17 10 6-11 7a7 7 0 108 12l18-11 24 14v31l-24 14-16-13a8 8 0 00-9 12l11 9-11 6-28-17a8 8 0 00-8 12l21 14-21 12a7 7 0 008 13l20-12v24c0 4 4 7 8 7s7-3 7-7v-32l10-7 1 13a8 8 0 0015 0l-1-21 25-15 25 15v29l-18 10c-4 2-5 6-3 10 1 3 4 4 7 4l3-1 11-6v12l-28 16c-4 2-5 7-3 10 1 3 4 4 7 4l3-1 21-12v24a7 7 0 1015 0v-24l23 11c3 2 8 1 10-3s0-8-4-10l-29-15v-13l13 5c4 2 8 0 10-4 2-3 0-8-4-9l-19-9v-27l27-15 25 14-1 21a8 8 0 0015 0l1-13 10 7v32c0 4 3 7 7 7s8-3 8-7v-24l20 12a7 7 0 0010-3c2-4 1-8-2-10z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 298"><path d="M275 213l-17-10 16-7a7 7 0 10-6-14l-27 11-47-27 28-11a8 8 0 000-14l-29-10 48-28 27 11a7 7 0 105-14l-16-6 18-11a7 7 0 00-7-13l-18 10 2-17a7 7 0 10-15-2l-3 29-48 27 5-29c1-3-1-7-3-8-3-2-7-1-9 1l-24 19V48l24-18c3-2 4-7 1-10-2-4-7-4-10-2l-15 11V8a7 7 0 10-15 0v21l-13-10c-3-3-7-2-10 1s-2 8 1 10l22 18v52l-23-19c-2-3-6-3-8-1-3 1-4 4-4 8l5 30-45-27-4-29a7 7 0 10-15 2l3 18-19-11a7 7 0 10-7 13l19 11-16 6a8 8 0 005 14l27-10 45 25-29 11a8 8 0 000 14l29 10-45 27-27-12a7 7 0 10-6 14l16 7-18 11a7 7 0 007 13l19-11-3 16a8 8 0 1015 3l5-29 44-25-5 29c0 3 1 7 4 8 2 2 6 1 8-1l23-19v55l-22 18c-3 2-4 7-1 10s7 4 10 1l13-10v21a7 7 0 1015 0v-21l15 11a8 8 0 0010-2c3-3 2-8-1-10l-24-18v-55l24 19a8 8 0 008 1c3-1 5-4 4-8l-5-30 47 28 5 28a8 8 0 0014-2l-2-17 18 11a7 7 0 0010-3c2-4 1-8-3-10zm-77-65l-21 8-14-8 14-8 21 8zm-25-43l-4 22-14 8v-15l18-15zm-50 0l17 14v16l-13-8-4-22zm-24 43l21-8 13 8-13 8-21-8zm24 43l4-22 13-8v15l-17 15zm50 0l-18-14v-16l14 8 4 22z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 298"><path d="M291 142h-12v-11a7 7 0 10-15 0v11h-9v-17a7 7 0 10-15 0v17h-69l-2-3 50-49 12 12a7 7 0 0011 0c3-3 3-8 0-11l-12-12 6-6 8 7a7 7 0 0010 0c3-3 3-7 0-10l-7-8 7-8a8 8 0 00-10-10l-8 7-8-7a8 8 0 00-10 10l7 8-6 6-12-12a8 8 0 00-11 11l12 12-50 50-2-1V58h18a7 7 0 100-15h-18v-9h12a7 7 0 100-15h-12V8a7 7 0 10-15 0v11h-10a7 7 0 100 15h10v9h-16a7 7 0 100 15h16v70l-1 1-50-50 12-12a7 7 0 10-11-11L79 68l-6-6 7-8a8 8 0 00-10-10l-8 7-8-7a8 8 0 00-10 10l7 8-7 8a8 8 0 1010 10l8-7 6 6-12 12a7 7 0 1011 11l12-12 50 50-1 1H57v-16a7 7 0 10-15 0v17h-9v-11a7 7 0 10-15 0v11H8a7 7 0 100 15h10v11a7 7 0 1015 0v-11h9v17a7 7 0 1015 0v-17h71l1 2-50 49-12-12a8 8 0 00-11 11l12 12-6 6-8-7a7 7 0 10-10 10l7 8-7 8a8 8 0 1010 10l8-7 8 7a7 7 0 0010 0c3-3 3-7 0-10l-7-8 6-6 12 12a7 7 0 0011 0c3-3 3-8 0-11l-12-12 49-50 2 2v70h-16a7 7 0 100 15h16v9h-10a7 7 0 100 15h10v11a7 7 0 1015 0v-11h12a7 7 0 100-15h-12v-9h18a7 7 0 100-15h-18v-70l3-1 49 49-12 12a8 8 0 0011 11l12-12 6 6-7 8a8 8 0 0010 10l8-7 8 7a7 7 0 0010 0c3-3 3-7 0-10l-7-8 7-8a8 8 0 00-10-10l-8 7-6-6 12-12a8 8 0 00-11-11l-12 12-49-49 1-3h69v17a7 7 0 1015 0v-17h9v11a7 7 0 1015 0v-11h12a7 7 0 100-14z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 298"><path d="M291 143h-23l11-11a7 7 0 10-11-10l-19 19-43-15 20-42 1-1h25a7 7 0 100-14h-10l13-14c3-3 3-8 0-11s-8-3-11 0l-16 16V46a7 7 0 10-15 0v28l-40 19-16-44 19-19c3-2 3-7 0-10s-8-3-10 0l-10 9V8a7 7 0 10-15 0v20l-8-8c-3-3-7-3-10 0s-3 8 0 10l18 19-15 44-42-20V47a7 7 0 10-15 0v12L54 44c-3-3-7-3-10 0s-3 8 0 11l15 15H47a7 7 0 100 15h26l20 41-43 15-19-19a8 8 0 00-11 11l10 9H8a7 7 0 100 15h21l-9 9a8 8 0 1011 10l19-18 43 15-19 41H47a7 7 0 100 15h13l-16 15a8 8 0 006 13c2 0 3 0 5-2l14-14v11a7 7 0 1015 0v-26l42-20 15 43-18 18a7 7 0 005 13l5-2 8-8v21a7 7 0 1015 0v-22l10 9a8 8 0 0010 0c3-3 3-8 0-11l-18-18 15-43 41 20v26a7 7 0 1015 0v-12l15 15a8 8 0 0010 0c3-3 3-8 0-11l-15-15h14a7 7 0 100-15h-28l-19-41 43-16h1l18 19a7 7 0 0011 0c2-3 2-8 0-11l-8-7h20a7 7 0 100-15zm-87 61l-40-19-14 42-15-42-19 9-21 10 19-40-42-14 42-15-19-40 40 19 14-43 15 43 40-19-19 40 42 15-42 14 19 40z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297 297"><path d="M295 140a17 17 0 00-30 2h-16l-39-20 14-8 9 7a7 7 0 0010-1c3-3 2-8-1-11l-4-3 11-6 6 2a8 8 0 008-4l9-13a8 8 0 00-7-11h-15c-4 1-6 3-7 6l-2 7-11 6v-4a7 7 0 10-15 2l1 10-14 8 3-43 9-15a16 16 0 009-3 17 17 0 10-22-5l-9 16-35 23V67l10-4c4-2 6-6 4-10-1-4-6-6-10-4l-4 2V38l4-5c3-2 3-6 2-9l-7-13a7 7 0 00-14 0l-7 13c-1 3-1 7 1 9l6 6v11l-5-1c-3-2-8 0-9 4-2 4 0 8 4 10l10 4v16l-37-24-9-15a17 17 0 00-15-26 17 17 0 102 34l10 15 2 42-13-8 2-11a7 7 0 10-15-2l-1 5-11-6-2-7c0-3-3-5-6-5l-16-1a8 8 0 00-7 11l9 14a8 8 0 008 3l7-2 10 6-3 3a7 7 0 109 11l8-6 14 8-40 20H32a17 17 0 00-15-10 17 17 0 00-16 21 17 17 0 0016 12c6 0 11-3 14-8h20l37 18-13 8-9-7a7 7 0 10-10 12l5 3-11 6-7-1c-3-1-6 0-8 3l-9 13a8 8 0 007 11h16c3 0 6-3 6-6l2-7 11-6v4a8 8 0 1015-2l-1-10 13-8-2 43-9 16a17 17 0 1014 7l8-16 36-24v16l-11 5c-4 1-6 5-4 9 1 3 4 5 7 5l2-1 6-2v13l-5 5c-3 2-3 6-2 9l7 14c2 2 4 4 7 4s6-2 7-4l7-14c2-3 1-7-1-9l-5-5v-12l3 1c4 2 9 0 10-4 2-3 0-8-4-9l-9-4v-16l35 24 12 17c-2 2-3 5-3 9 0 9 8 17 17 17a17 17 0 10-2-34l-11-17-3-43 14 8-1 11a7 7 0 1014 2l1-5 11 6 2 7c1 3 3 5 7 6h16a7 7 0 006-11l-8-13c-2-3-6-4-9-4l-7 2-10-6 3-2a7 7 0 10-9-12l-8 6-14-8 37-18h19c3 5 8 8 14 8a17 17 0 0015-25zM189 79l-2 39-30 17v-35l32-21zm-81 0l34 22v35l-31-18-3-39zm-40 70l36-18 30 18-30 17-36-17zm40 69l3-39 31-18v35l-34 22zm81 1l-32-22v-35l30 17 2 40zm5-53l-30-17 30-18 36 18-36 17z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 298"><path d="M268 148l27-27a8 8 0 00-10-11l-30 30h-44l16-16a7 7 0 00-5-13l-25-1 31-31h42a7 7 0 100-14h-38V27a7 7 0 10-15 0v42l-30 30-1-24c0-3-1-5-4-7-3-1-6 0-8 2l-18 16V42l30-29c3-3 3-8 0-11s-8-3-11 0l-27 27-27-27c-2-3-7-3-10 0s-3 8 0 11l30 30v44l-18-17c-2-2-5-3-8-2-2 2-4 4-4 7l-1 24-32-32V25a7 7 0 10-15 0v39H25a7 7 0 100 15h44l31 31-25 1a8 8 0 00-5 12l17 18H43l-30-30a8 8 0 00-11 10l27 27-27 28a8 8 0 1011 10l29-30h44l-16 17a8 8 0 005 13l23 1-32 31H25a7 7 0 100 15h38v38a7 7 0 1015 0v-43l32-32 1 26c0 3 1 5 4 7 3 1 6 0 8-2l17-16v44l-30 30c-3 3-3 8 0 10a8 8 0 0011 0l27-27 27 27a7 7 0 0010 0c3-2 3-7 0-10l-30-30v-45l18 17a8 8 0 009 2c2-2 4-4 4-7l1-24 30 31v42a7 7 0 1015 0v-38h39a7 7 0 100-15h-43l-31-31 25-1a8 8 0 005-12l-17-19h45l30 30a7 7 0 0010 0c3-2 3-7 0-10l-27-27zm-112-41l16-14v21l-14 14-2-1v-20zm-31-14l16 15v19l-2 1-14-14V93zm-10 32l13 13-1 3h-19l-15-16h22zm-2 47H93l14-16h20l1 1-15 15zm27 18l-15 14v-23l13-13 2 2v20zm31 14l-16-15v-19l2-1 15 15-1 20zm11-32l-14-13 2-4h19l15 17h-22zm8-32h-20l-1-1 14-14h21l-14 15z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 296"><path d="M250 185a7 7 0 00-12 1l-2 4-13-8 19-12a7 7 0 10-8-13l-25 16-19-25 19-26 25 17a7 7 0 0010-2c3-3 2-8-2-10l-19-14 13-8 2 5a7 7 0 0012 1l26-29a7 7 0 00-8-12l-37 8a7 7 0 00-5 11l2 4-13 7-1-23a8 8 0 00-15 1l2 29-32 4-13-29 27-14c3-2 5-6 3-10s-7-5-11-3l-20 11V51h5a7 7 0 006-10L155 5c-1-3-4-5-7-5-4 0-7 2-8 5l-12 36a7 7 0 007 10h5v15l-22-10c-3-2-8-1-10 3-1 4 0 8 4 10l26 13-12 29-31-4 1-29a7 7 0 10-15-1l-1 23-12-7 2-4a8 8 0 00-5-11l-37-8a7 7 0 00-8 13l26 28a7 7 0 0012-1l2-4 13 7-20 14a8 8 0 009 12l24-16 18 25-18 25-25-16a8 8 0 00-8 13l20 12-13 8-2-4a7 7 0 00-12-1l-25 28a8 8 0 007 12l37-7a8 8 0 005-11l-2-5 13-7 1 24a7 7 0 1015-1l-2-29 31-4 12 29-26 13c-4 1-5 6-3 10 1 3 6 5 9 3l22-10v15h-5a7 7 0 00-7 10l12 36c1 3 4 5 8 5 3 0 6-2 7-5l12-36a8 8 0 00-7-10h-5v-15l20 11 4 1c3 0 5-2 7-4 2-4 0-9-3-11l-27-13 13-29 31 4-2 29a8 8 0 0015 1l2-24 13 8-2 4a7 7 0 005 11l37 8a7 7 0 008-4c2-3 2-6-1-9l-25-28z"/></svg>`], {type: 'image/svg+xml'})),
], (url, i) => {
  const image = document.createElement('img');
  image.src = url;

  return new Promise((resolve) => image.addEventListener('load', resolve, {once: true})).then(() => masks[i] = image);
});

We'll test that the masks are working by picking one at random and reloading the page several times.

async function main() {
  const canvas = document.querySelector('canvas');
  const canvasContext = canvas.getContext('2d');
  const canvasAspectRatio = canvas.width / canvas.height;

  const video = document.createElement('video');
  video.muted = true;
  video.autoplay = true;
  video.loop = true;
  video.playsinline = true;
  video.src = "https://giant.gfycat.com/CheapBitterCaterpillar.webm";

  await Promise.all([...masks, video.play()]);

  const videoAspectRatio = video.videoWidth / video.videoHeight;

  const [frameWidth, frameHeight] =
        canvasAspectRatio <= videoAspectRatio
  ? [canvas.height * videoAspectRatio, canvas.height]
  : [canvas.width, canvas.width / videoAspectRatio];

  const [frameTop, frameLeft] = [(canvas.height - frameHeight) / 2, (canvas.width - frameWidth) / 2];

  const maskImage = masks[Math.floor(Math.random() * masks.length)];

  const maskAspectRatio = maskImage.naturalWidth / maskImage.naturalHeight;

  const [maskWidth, maskHeight] =
        canvasAspectRatio <= maskAspectRatio
  ? [canvas.width, canvas.width / maskAspectRatio]
  : [canvas.height * maskAspectRatio, canvas.height];

  const [maskTop, maskLeft] = [(canvas.height - maskHeight) / 2, (canvas.width - maskWidth) / 2];

  requestAnimationFrame(function frame() {
    canvasContext.globalCompositeOperation = 'destination-over';
    canvasContext.drawImage(maskImage, maskLeft, maskTop, maskWidth, maskHeight);

    canvasContext.globalCompositeOperation = 'source-in';
    canvasContext.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, frameLeft, frameTop, frameWidth, frameHeight);

    requestAnimationFrame(frame);
  });
}

Part 3 Pen

Part 4: Use multiple random masks on the same image

Next, instead of a single random snowflake, let's generate lots of flakes of varying size and draw them randomly.

First, let's define a class Flake to create a random snowflake. Its constructor will take the <canvas> it is drawn on as its only argument. We'll also define two static class variables, minProportion and maxProportion to determine the min and max size of the snowflake, expressed as a fraction of the minimum dimension (width or height) of the canvas, with some sane defaults.

We'll use a truncated exponential distribution with lambda = 1 to randomize the size of the snowflake, so that small flakes are more likely than big ones. We'll crop the distribution at the 99th percentile and normalize it.

We'll also give the class a draw method to draw the flake on the canvas.

class Flake {
  static minProportion = 0.01;
  static maxProportion = 0.1;

  constructor(canvas) {
    this.context = canvas.getContext('2d');

    this.image = masks[Math.floor(Math.random() * masks.length)];

    // https://www.wolframalpha.com/input/?i=exponential+distribution
    const lambda = 2, pct = 4.60517 / lambda, r = -1 * Math.log(Math.random()) * 1 / lambda, p = Math.min(pct, r) / pct;

    const size = Flake.minProportion + (p * (Flake.maxProportion - Flake.minProportion));

    this.width = Math.max(canvas.width, canvas.height) * size;
    this.height = this.width * this.image.naturalWidth / this.image.naturalHeight;
    this.left = Math.floor(Math.random() * canvas.width) - this.width / 2;
    this.top = Math.floor(Math.random() * canvas.height) - this.height / 2;
  }

  draw() {
    this.context.drawImage(this.image, this.left, this.top, this.width, this.height);
  }
}

Then, instead of a single mask, we'll create an array of Flakes.

  const flakes = Array.from({length: 300}, () => new Flake(canvas));

Next, within the frame function, loop through flakes and call the draw method.

  requestAnimationFrame(function frame() {
    canvasContext.globalCompositeOperation = 'destination-over';
    flakes.forEach((flake) => flake.draw());

    // ...
  });

Part 4 Pen

Part 5: Animating masks

Let's animate the snowflakes.

Since we'll be doing things over time, we'll need a way to measure time. We'll use the performance.now() API to calculate the elapsed time between each frame.

let t0 = performance.now();

requestAnimationFrame(function frame() {
  const t1 = performance.now(), elapsed = t1 - t0;
  t0 = t1;

  // ...
});

For simplicity, let's also define a "period" for the amount of time a snowflake falling vertically takes to travel the full length of the canvas. We'll define it as a static variable on the Flake class.

class Flake {
  static period = 1000; // 1 second period, in ms to match performance.now() units

  // ...
}

In the Flake constructor, let's define a velocity vector using the period and the height of the canvas. For initial development, the vector will have only a vertical y component and no horizontal x. To emulate the perception of depth, smaller snowflakes, since they are perceived to be further away, will have their speed scaled in proportion to their size, with a reasonable minimum.

constructor(canvas) {
  // ...

  const speed = Math.max(0.1, p) * canvas.height / period; // (px / ms)
  this.velocity = [0, speed];
}

Next, let's define a method to update the position of a Flake, passing it the amount of time that has elapsed. Call it tick. When a snowflake moves off of either edge of the canvas, we'll just wrap it around.

tick(t = 16.667) {
  const [x, y] = this.velocity;
  let left = this.left + x * t, top = this.top + y * t;

  if (top >= this.canvas.height) {
    top = -this.height;
  }

  if (left >= this.canvas.width) {
    left = -this.width;
  }

  this.left = left;
  this.top = top;
}

To make everything move, we'll update the frame function to call the tick method on each Flake. Now that the masks are moving, we also need to to clear the canvas on each frame.

requestAnimationFrame(function frame() {
  const t1 = performance.now(), elapsed = t1 - t0;
  t0 = t1;

  canvasContext.clearRect(0, 0, canvas.width, canvas.height);

  canvasContext.globalCompositeOperation = 'source-over';
  canvasContext.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, frameLeft, frameTop, frameWidth, frameHeight);

  canvasContext.globalCompositeOperation = 'destination-in';

  flakes.forEach((flake) => {
    flake.tick(elapsed);
    flake.draw();
  });

  requestAnimationFrame(frame);
});

The rest of the code is just aesthetic tweaks.

Let's move a random percentage of each flake's velocity, from 0% - 33%, into the horizontal component.

constructor(canvas) {
  // ...
  const speed = Math.max(0.1, p) * canvas.height / period;
  const xFrac = 0.15 * Math.random();
  this.velocity = [speed * xFrac, speed * (1 - xFrac)];
}

Finally, let's add some more randomness into the scene. When a snowflake runs off of the canvas, let's randomize it, except that it will always be positioned just above the top of the canvas (because snowflakes appearing in the middle of the canvas would be weird). To do that, we'll move most of the code out of the constructor into a method that can be called independently.

  constructor(canvas) {
    this.canvas = canvas;
    this.context = canvas.getContext('2d');
    this.randomize();
  }

  randomize() {
    this.image = masks[Math.floor(Math.random() * masks.length)];

    // exponential distribution (lambda = 2, percentile = 99%)
    const lambda = 2, pct = 4.60517 / lambda, r = -1 * Math.log(Math.random()) * 1 / lambda, p = Math.min(pct, r) / pct;

    const size = Flake.minProportion + (p * (Flake.maxProportion - Flake.minProportion));

    this.width = Math.min(this.canvas.width, this.canvas.height) * size;
    this.height = this.width * this.image.naturalWidth / this.image.naturalHeight;
    this.left = Math.floor(Math.random() * this.canvas.width) - this.width / 2;
    this.top = -this.height;

    const speed = Math.max(0.1, p) * this.canvas.height / Flake.period;

    const xFrac = 0.333 * Math.random();
    this.velocity = [xFrac * speed, (1 - xFrac) * speed];
  }

  tick(t = 16.667) {
    // ...

    if (top >= this.canvas.height || left >= this.canvas.width) {
      return this.randomize();
    }

    this.left = left;
    this.top = top;      
  }

And the very last thing: let's make the canvas cover the entire viewport.

<canvas></canvas>

/* ... */

body {
  height: 100%;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

async function main() {
  const canvas = document.querySelector('canvas');
  const canvasContext = canvas.getContext('2d');

  let canvasAspectRatio;

  const resize = () => {
    const { width, height } = canvas.getBoundingClientRect();  
    canvas.width = width;
    canvas.height = height;
    canvasAspectRatio = width / height;
  };

  resize();

  self.addEventListener('resize', resize);

  // ...
}

And we're done!

Part 5 Pen

Conclusion

This is just a proof-of-concept. There are many other possibilities with this technique. The masks could themselves be programmatically animated. Other compositing modes and/or filters can be combined and used to remarkable effect. For example, snowflakes closer to the "camera" could have an increasing amount of blur applied to them using a filter.

Use Docker to run the latest versions of Let's Encrypt certbot and the AWS CLI on Debian Stable / Ubuntu LTS

Benjamin Black — Sun, 29 Nov 2020 21:04:20 +0000

My posts are usually notes and reference materials for myself, which I publish here with the hope that others might find them useful.

Like everyone else, I use Let's Encrypt certbot to obtain TLS certs for my domains.

This post is about using certbot, but I also use AWS Route 53 to host my domains, which is nice for automating certificate renewal with the certbot-dns-route53 plugin. So this post is also about using the AWS CLI, to enable use of that plugin. Other plugins are available.

Running the Stable/LTS distributions of Debian/Ubuntu is the only sane approach for a production server. However, the version of certbot in Debian 10 (Buster) is stuck at 0.31, while the latest version (as of 11/2020) is 1.9; likewise, aws-cli is stuck at 1.16 while the latest version is 2.1.

Docker containers to the rescue!

Instructions for installing Docker on Debian.

AWS documentation on using the official AWS CLI Docker image.

Certbot instructions "Running with Docker"

Cliffs Notes

These instructions assume running as root.

0: Make sure Docker is working by following the official instructions (linked above) to add the official apt repository, install the Docker software, and run hello-world.

1: Configure AWS credentials using the AWS CLI Docker image:

docker run --rm -it -v "/root/.aws:/root/.aws" amazon/aws-cli configure

2: Verify AWS credentials are working and have nominal access to Route 53:

docker run --rm -it -v "/root/.aws:/root/.aws" amazon/aws-cli route53 list-hosted-zones

3: Request a Let's Encrypt wildcard certificate using certbot/dns-route53 Docker image, forwarding AWS credentials:

docker run -it --rm --name certbot -v "/usr/bin:/usr/bin" -v "/root/.aws:/root/.aws" -v "/etc/letsencrypt:/etc/letsencrypt" -v "/var/lib/letsencrypt:/var/lib/letsencrypt" certbot/dns-route53 certonly --dns-route53 --domain "example.com" --domain "*.example.com"

4: Create systemd timer to automate certificate renewal, then daemon-reload, enable, and start the timer.

/etc/systemd/system/certbot.service:

(For the docker command, remove --it for non-interactive execution by systemd, and pass /usr/bin to the container to allow execution of systemctl by --deploy-hook)

[Unit]
Description=Let's Encrypt certificate renewal

[Service]
Type=oneshot
ExecStart=docker run --rm --name certbot -v "/usr/bin:/usr/bin" -v "/root/.aws:/root/.aws" -v "/etc/letsencrypt:/etc/letsencrypt" -v "/var/lib/letsencrypt:/var/lib/letsencrypt" certbot/dns-route53 renew --dns-route53 --quiet --agree-tos --deploy-hook "systemctl reload nginx"

/etc/systemd/system/certbot.timer:

[Unit]
Description=Monthly renewal of Let's Encrypt certificates

[Timer]
OnCalendar=monthly
RandomizedDelaySec=12 hours
Persistent=true

[Install]
WantedBy=timers.target

Using ffmpeg to compress, convert, and resize videos

Benjamin Black — Fri, 29 Mar 2019 01:05:45 +0000

My posts are usually notes and reference materials for myself, which I publish here with the hope that others might find them useful.

Given a source video source.mp4:

To compress for web at a reasonable broadband bitrate of about 1.5Mbps video / 128kbps audio:

ffmpeg -i source.mp4 -c:v libx264 -b:v 1.5M -c:a aac -b:a 128k target.mp4

To compress and also convert to WebM:

ffmpeg -i source.mp4 -c:v libvpx-vp9 -b:v 1M -c:a libopus -b:a 128k target.webm

(Note that the 33% lower bitrate -- 1M for VP9 vs 1.5M for H.264 -- is deliberate; VP9 encodes about 20-50% more efficiently than H.264. Opus and AAC are about equally efficient.)

To scale down a high-resolution source video to something more reasonable for Web (qHD for cellular, HD for broadband), the -filter:v argument is used:

ffmpeg -i source.mp4 -c:v libvpx-vp9 -b:v 0.33M -c:a libopus -b:a 96k \
-filter:v scale=960x540 target.webm

Command-line options: -c:v specifies the video codec; -b:v specificies video bitrate; -c:a specifies audio codec; -b:a audio bitrate; -filter:v applies a filter (in this case, scale) to the video stream.

To use the older VP8 codec with WebM, use libvpx instead of libvpx-vp9.

If the source video does not have an audio track, then omit the -c:a and -b:a arguments.

To explicitly specify the container format, use the -f command-line option: -f mp4 or -f webm.

For MP4 containers, the video codec used is H.264 and the audio codec is AAC, which enjoys near-universal browser support.

For Chrome and related browsers. WebM containers use VP8/9 and Opus.

Chrome also supports MP4 (H.264/AAC), so there is no point providing WebM unless the file size and/or quality is improved.

Bitrates can obviously be varied; I use 0.5M video and 96k audio for cellular.

Use OpenSSL to get a remote server's TLS certificate expiration date

Benjamin Black — Tue, 19 Feb 2019 16:05:34 +0000

My posts are usually notes and reference materials for myself, which I publish here with the hope that others might find them useful.

There really should be an s_client option to do this. In lieu of, use s_client to read the cert and pipe it to the x509 command.

echo | openssl s_client -connect example.com:443 -servername example.com 2>/dev/null | openssl x509 -noout -dates

Obtaining an Elliptic Curve certificate from Let's Encrypt

Benjamin Black — Tue, 25 Sep 2018 21:48:18 +0000

My posts are usually notes and reference materials for myself, which I publish here with the hope that others might find them useful.

EDIT 23 May 2022: See this article: "Guidance for Choosing an Elliptic Curve Signature Algorithm in 2022"

Elliptic Curve (EC) certificates, wherein the public key uses elliptic curve cryptography, besides having a cool name, are required for "Modern" compatibility as measured by Mozilla Observatory.

As of this writing, the Let's Encrypt Upcoming Features page indicates that ECDSA (Elliptic Curve Digital Signature Algorithm, as opposed to ECDH, Elliptic Curve Diffie-Hellman) root and intermediate certificates are coming in Q1 2019, but there is not yet an indication when Let's Encrypt will support generating EC certificates for end users. Fortunately, however, Let's Encrypt will sign an EC certificate passed to it in a Certificate Signing Request (CSR).

So, in the meantime, if we want an EC certificate from Let's Encrypt, we need to create our own certificate, and then ask Let's Encrypt to sign it.

Fortunately, the process is not difficult.

In this example, we will generate a private key using ECDSA with the P-384 (secp384r1) curve, which has near-universal browser support back to IE11 (hence, its inclusion in Mozilla's "Modern" compatibility requirements).

Generate the private key

First, we generate the private key with OpenSSL. The OpenSSL command we will use is ecparam (man openssl), which is used for "EC parameter manipulation and generation," and passing configuration parameters to that command (openssl ecparam -help).

openssl ecparam -genkey -name secp384r1 -out privkey.pem

The -genkey option tells OpenSSL to generate an EC key.
The -name param tells OpenSSL which curve to use.
The -out param tells OpenSSL to write the output to a file.

Note that OpenSSL writes its output in PEM format by default.

We can check that OpenSSL did the right thing with the ec command, which processes EC keys:

openssl ec -in privkey.pem -noout -text

-in is the input file
-noout tells OpenSSL not to output the key, which would just pointlessly print privkey.pem to stdout.
-text tells OpenSSL to write out information about the key in plaintext format

If all goes well, and the key was created correctly, OpenSSL will show something like the following:

read EC key
Private-Key: (384 bit)
priv:
    [redacted]
pub:
    [omitted]
ASN1 OID: secp384r1
NIST CURVE: P-384

This confirms that the key was created with the P-384 curve.

Create the OpenSSL configuration for the certificate

Next, we must create an OpenSSL configuration file with parameters specific to the domain for which we wish to obtain a TLS certificate. In this example, we will enter the following configuration into a file openssl.cnf:

[ req ]
prompt = no
encrypt_key = no
default_md = sha512
distinguished_name = dname
req_extensions = reqext

[ dname ]
CN = example.com
emailAddress = admin@example.com

[ reqext ]
subjectAltName = DNS:example.com, DNS:*.example.com

A brief explanation of these configuration options:

In the Required ([ req ]) section:

prompt = no tells OpenSSL to get as much configuration as it can from the configuration file
encrypt_key = no tells OpenSSL not to encrypt the private key with a password. (Encrypted private keys are supported by Nginx, but I don't use them.)
default_md = sha512 tells OpenSSL to sign the CSR with SHA512. (AFAIK, Let's Encrypt only supports RSA with SHA256 for its signatures, but that doesn't mean we can't use stronger encryption on the CSR.)
distinguished_name = dname tells OpenSSL to look for a [ dname ] section for Distinguished Name configuration options.
req_extensions = reqext tells OpenSSL to look for a [ reqext ] section for Requested Extensions configuration options, which is where Subject Alternative Names (SANs) are configured.

In the Distinguished Name ([ dname ]) section:

CN = example.com specifices the Common Name for the certificate.
emailAddress = admin@example.com should be obvious.

In the Requested Extensions ([ reqext ]) section, the subjectAltName provides the list of SANs for the certificate. (Chrome, as of v58, requires the Common Name to be included in the list of SANs).

Let's Encrypt v2 supports wildcard domains, so in this example I have requested a single-level wildcard for hosts off of the apex (*.example.com).

Create a Certificate Signing Request

The final client-side step is to generate the Certificate Signing Request using OpenSSL, which we will then pass to Let's Encrypt to sign, and return to us the signed certificate.

The OpenSSL command needed to generate a CSR is req (man openssl and openssl req -help).

openssl req -new -config openssl.cnf -key privkey.pem -out csr.pem

-new tells OpenSSL that we are creating a CSR (and not examining an existing CSR)
-config openssl.cnf specifies the configuration file we created above
-key privkey.pem specifies the private key we generated above
-out csr.pem tells OpenSSL to write the CSR to an output file (instead of stdout)

We can verify that we generated the CSR correctly:

openssl req -in csr.pem -noout -text -verify

-verify requests OpenSSL verify the signature on the CSR

This should produce expected results in the output:

verify OK
Certificate Request:
    Data:
        Version: 1 (0x0)
        Subject: CN = example.com, emailAddress = admin@example.com
        Subject Public Key Info:
            Public Key Algorithm: id-ecPublicKey
                Public-Key: (384 bit)
                pub:
                    [omitted]
                ASN1 OID: secp384r1
                NIST CURVE: P-384
        Attributes:
        Requested Extensions:
            X509v3 Subject Alternative Name:
                DNS:example.com, DNS:*.example.com
    Signature Algorithm: ecdsa-with-SHA512
         [omitted]

Ask Let's Encrypt to sign our certificate

The last step is to pass the CSR to Let's Encrypt with an ACME client, certbot being the most common client.

The command-line options passed to the certbot client vary depending on our setup, with whom our domain is registered, etc. We will generally need to use the certonly command, and we may be able to use one of the certbot DNS plugins.

E.g., if example.com is registered with AWS Route 53, we can use the corresponding plugin to handle verification, which is extremely convenient, requiring no manual intervention in the process. (Configuring the Route 53 DNS plugin with AWS credentials is beyond the scope of this article.)

It is generally advisable to do a --dry-run first to make sure everything is in order.

certbot certonly --dry-run --dns-route53 --domain "example.com" --domain "*.example.com" --csr csr.pem

N.B., quotes are required around the wildcard to prevent shell glob expansion, and in general they are a good idea.
--csr csr.pem tells certbot that we already have a certificate that we just need Let's Encrypt to sign for us.

The certbot client will check that the list of domains requested on the command line match the domains listed in the certificate, and it will use the Route 53 DNS plugin to verify our ownership of the domain, and let us know if anything is wrong.

If nothing is wrong, it will tell you so:

IMPORTANT NOTES:
 - The dry run was successful.

The real command immediately follows:

certbot certonly --dns-route53 --domain "example.com" --domain "*.example.com" --csr csr.pem

After a (long) delay, the client will produce as output:

The signed certificate: 0000_cert.pem
The root and intermediate certificates: 0000_chain.pem
The certificate + intermediates: 0001_chain.pem

At this point, the CSR csr.pem can be deleted.

If we are curious, we can inspect the certificates returned by the client with OpenSSL using the x509 command:

openssl x509 -in 0001_chain.pem -noout -text

Alas, we will discover, as described above, that Let's Encrypt has signed our certificate with a SHA256 signature. (In addition to being more secure, SHA512 performs better than SHA256 on modern 64-bit CPUs.) But our public key should still use ECDSA.

These files are nondescript, so we should move and organize them in a more informative way.

On Debian Linux, I like to create subdirectories for my domains, keeping the private key in /etc/ssl/private/example.com/privkey.pem, and the certs:

/etc/ssl/certs/example.com/cert.pem
/etc/ssl/certs/example.com/chain.pem
/etc/ssl/certs/example.com/fullchain.pem

BONUS ROUND: Configure the web server

At this point, we have our certificates in hand. We can configure our web server of choice to use them. As a brief example, an Nginx configuration snippet, which includes modified rules generated by Mozilla Observatory for its "Modern" configuration, follows:

ssl_certificate_key /etc/ssl/private/example.com/privkey.pem;
ssl_certificate /etc/ssl/certs/example.com/fullchain.pem;
ssl_trusted_certificate /etc/ssl/certs/example.com/chain.pem;

# Share 50 MB session cache
ssl_session_cache shared:SSL:50m;

# Disable session tickets
ssl_session_tickets off;

# Use only TLSv1.2+
ssl_protocols TLSv1.2 TLSv1.3;

# Safe ciphers
ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-\
RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256';
ssl_prefer_server_ciphers on;

# Safe curves
ssl_ecdh_curve secp521r1:secp384r1:prime256v1;

# OCSP Stapling
ssl_stapling on;
ssl_stapling_verify on;

# CloudFlare for DNS lookup
resolver 1.1.1.1;

add_header Content-Security-Policy "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; frame-ancestors 'none'";
add_header X-Content-Type-Options "nosniff";
add_header X-Frame-Options "sameorigin";
add_header X-XSS-Protection "1; mode=block";
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

If we have done everything correctly, when we inspect the certificate with a web browser like Chrome, it will confirm that it is an EC certificate:

Additionally, Mozilla Observatory will give us an A+ grade!

Postscript

We should also create a cron job / systemd timer to renew our certificate. This is an exercise left to the reader.

Save page weight with web font subsetting

Benjamin Black — Thu, 13 Sep 2018 19:43:35 +0000

My posts are usually notes and reference materials for myself, which I publish here with the hope that others might find them useful.

Web Fonts are a wonderful thing for design, but they can be very heavy to use and slow down the user experience. Fortunately, all modern browsers support font subsetting.

A CDN like Google Web Fonts will do a very good job of automatically subsetting fonts, delivering the optimized font files, but sometimes we want or need to host our own font files.

Fortunately, we can produce our own subset fonts. This technique looks at the text of a web site to build a list of the glyphs ("characters") which are actually used by that site, and constructs a subset font file which excludes all the unused glyphs, resulting in a significantly (sometimes massively) reduced font file size.

We'll make use of the fonttools Python package (and dependencies), and the glyphhanger NPM package.

As an example, let's take a look at minimizing the use of Lato by Cracked, if Cracked were to host the font files themselves.

But first, let's install some necessary Python utilities -- fonttools, zopfli (for WOFF), and brotli (for WOFF2):

$ pip install fonttools zopfli brotli

The 'Regular' (normal) weight of Lato comes in at 117 KB in TTF format, and 32KB in WOFF2 format.

First, we need to accumulate a list of all of the glyphs which our site actually uses.

Use the glyphhanger utility to output a Unicode range for which glyphs from a specific font family are used by a website. This tool is chosen because its output format is the same used as input to the pyftsubset utility, and by the unicode-range CSS property.

$ npx glyphhanger http://cracked.com --family='Lato' > glyphs.txt
...

$ cat glyphs.txt
U+A,U+20,U+26-29,U+2C-39,U+3F,U+41-59,U+61-69,U+6B-70,U+72-7A,U+A9,U+2019

Next, for the subset of glyphs used by the site, we need to extract those glyphs from the original font into a subset font.

Use the pyftsubset utility which comes with the fonttools package to create the subsets in WOFF/WOFF2 format:

$ pyftsubset Lato-Regular.ttf --unicodes-file=glyphs.txt --flavor=woff --with-zopfli

$ pyftsubset Lato-Regular.ttf --unicodes-file=glyphs.txt --flavor=woff2

These commands produce Lato-Regular.subset.woff and Lato-Regular.subset.woff2.

When I ran these commands, the resulting Lato-Regular.subset.woff2 was 11 KB, about one-third of the size of the full-set WOFF2 file (and less than 10% of the size of the TTF).

These subset font files can be used in a @font-face rule as usual, with the addition of a unicode-range property indicating which glyphs are included in the font file. The range is the same as that output to glyphs.txt by the glyphhanger utility.

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: normal;
  src: url('Lato-Regular.subset.woff2') format('woff2'),
    url('Lato-Regular.subset.woff') format('woff');
  unicode-range: U+A,U+20,U+26-29,U+2C-39,U+3F,U+41-59,U+61-69,U+6B-70,U+72-7A,U+A9,U+2019;
}

ToDo: Integrate font subsetting into the build process.

Using a string of SVG text as an image source

Benjamin Black — Thu, 13 Sep 2018 15:03:16 +0000

My posts are usually notes and reference materials for myself, which I publish here with the hope that others might find them useful.

TL;DR:

let svg = `<svg xmlns="http://www.w3.org/2000/svg" ...`;
let blob = new Blob([svg], {type: 'image/svg+xml'});
let url = URL.createObjectURL(blob);
let image = document.createElement('img');
image.src = url;
image.addEventListener('load', () => URL.revokeObjectURL(url), {once: true});

It is sometimes useful to compose an SVG programmatically as a string. Using that string as the src of an image is fairly straightforward (with one "gotcha".)

Step one: you need a string of SVG text.

let svg = `<svg ...`;

Step two: convert the string to a blob.

let blob = new Blob([svg], {type: 'image/svg+xml'});

Step three: create a URL to the blob.

let url = URL.createObjectURL(blob);

Step four: create an image referencing the URL.

let image = document.createElement('img');
image.src = url;

Step five: revoke the URL once the image loads for cleanup.

image.addEventListener('load', () => URL.revokeObjectURL(url), {once: true});

However, the following does not work:

let svg = `
<svg width="50" height="50">
    <circle cx="25" cy="25" r="20"/>
</svg>`;

This results in a broken image:

The xmlns attribute must be included on the <svg> element:

let svg = `
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
   <circle cx="25" cy="25" r="20"/>
</svg>`;

And now it works:

Chrome is not tolerant of a missing xmlns attribute in this case, which is, I guess, consistent: only inline <svg>s, embedded inside HTML markup, are allowed to omit the xmlns attribute. External SVGs, used as the src of an <img>, must include it, apparently even if the SVG is "inline" in the sense that it created by the document itself as a blob, and even if the MIME type is image/svg+xml.

Get a list of all of your GitHub repositories

Benjamin Black — Tue, 11 Sep 2018 20:13:24 +0000

My posts are usually notes and reference materials for myself, which I publish here with the hope that others might find them useful.

Requires the jq command-line JSON processor utility, here called using npx.

Replace <username> with your GitHub username and be prepared to enter your GitHub password on the command line.

If you have more than 100 repositories, you'll need to run this command several times, editing the page=? parameter each time.

curl --silent --user "<username>" "https://api.github.com/user/repos?page=1&per_page=100" | npx jq '.[].ssh_url' | while read repo
do
    repo="${repo%\"}"
    repo="${repo#\"}"
    echo "$repo"
done

This nonsense repo="${repo%\"}" strips the leading and trailing double-quotes " from the line.

If you want the git:// or https:// schemes instead of SSH, then in the jq query, replace ssh_url with git_url or clone_url.

To save the output to a text file, append a redirect to the end, as in:

   ...
   echo "$repo"
done > output.txt

Converting TTF fonts to WOFF2 (and WOFF)

Benjamin Black — Mon, 10 Sep 2018 18:43:44 +0000

My posts are usually notes and reference materials for myself, which I publish here with the hope that others might find them useful.

Fonts obtained from foundries, including Google Web Fonts, often do not include font files in the web font format WOFF2, even when the font face is specifically licensed for use on the web; often the fonts are only provided in TrueType (.ttf) format.

Fortunately, it is not difficult to "convert" (really, just encoding and compressing) font files from TTF format to WOFF2, without relying on sketchy online services.

Google maintains free software (MIT) command-line utilities to compress and decompress WOFF2 files. The repository contains instructions to build and run the utility; but for redundancy's sake...

Build:

git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all

Run:

woff2_compress myfont.ttf

If supporting IE is necessary, ttf2woff is a free software (MIT) legacy library available in NPM and is similarly easy to use:

$ npx ttf2woff myfont.ttf myfont.woff

Scaling sizes (e.g., font size) with the browser width or height

Benjamin Black — Sun, 09 Sep 2018 15:33:53 +0000

My posts are usually notes and reference materials for myself, which I publish here with the hope that others might find them useful.

DEPRECATED: CSS in modern browsers provides a built-in mechanism to do this with the clamp() function.

TL;DR: As a SCSS function:

// y1: smallest size (px)
// x1: smallest browser width (px)
// y2: largest size (px)
// x2: largest browser width (px)
// e.g. 12px @ 375w to 24px @ 1280w = interpolate(12, 375, 24, 1280)
@function interpolate($y1, $x1, $y2, $x2) {
    $m: ($y2 - $y1) / ($x2 - $x1);
    $b: $y1 - $m * $x1; // or $y2 - $m * $x2

    @return calc((#{$m}) * 100vw + (#{$b}) * 1px);
}

h1 {
    font-size: interpolate(12, 375, 24, 1280);
    width: interpolate(120, 300, 800, 1280);
}

If one of the dimensions of an object should scale linearly with the viewport width (or height), e.g. scaling the font size from 12px at 375w to 24px at 1280w, the interpolated size can be calculated using the slope-intercept line equation (y = mx + b) where y is the resulting size (in pixels), x is set to 100vw (or vh) and b is measured in px.

This works because 100vw is exactly 100% of the viewport width, even as the viewport width varies. Thus, when the viewport is 375w, then 100vw equals 375px. Likewise, when the viewport is 1280w, then 100vw equals 1280px.

So, continuing the font-size example, in the slope-intercept equation, when the viewport width is 375w, the browser sees 100vw as 375px, and so the equation is effectively y = m * 375px + b * 1px, and likewise at 1280w, y = m * 1280px + b * 1px, and for every value in between.

Make your life easier by using Wolfram Alpha to compute the equation of the line passing through two points (x1, y1) and (x2, y2), where x1 and x2 are the size of the viewport dimension (width or height) and y1 and y2 are the target sizes at those viewport dimensions.

Continuing the example above, scaling a font from 12px to 24px as the browser width changes from 375w to 1280w, the points are (375, 12) and (1280, 24). So we want the equation of the line passing through (375, 12) and (1280, 24).

For the line through those two points, Wolfram Alpha returns the slope-intercept equation:

y = (12/905)x + (1272/181)

Written as a CSS rule, this is:

font-size: calc((12/905) * 100vw + (1272/181) * 1px);

Checking the result at the two viewport sizes (375 and 1280):

(12/905) * 375 + 1272/181 = 12
(12/905) * 1280 + 1272/181 = 24

Above or below those two browser dimensions, if the size should change abruptly, use a media query.