Brock Whitten sintaxi

BC COVID-19 Vaccine Passport

BC's COVID-19 vaccine passport is encoded as a JSON web token following the SMART Health Card open spec.

I made a little write up about how to decode the data.

Vax codes

You can inspect the http://snomed.info/sct coding key to see which type of vaccines were recorded:

Running Unifi Controller in systemd-nspawn with cloud-init

This uses Ubuntu's server cloud image as a stateless container to run the UBNT Unifi Controller software. Configuration data is stored in a directory outside the container. Cloud-init is used to automatically set up the container image, so a new version can be dropped in with minimal effort. This should work with pretty much any modern Linux distro with systemd.

Setup

Systemd-nspawn prefers to store its machines on btrfs, so if your /var/lib/machines is not currently btrfs, you should create one and mount it there. Otherwise it will automatically create an image file at /var/lib/machines.raw and mount it.

Create a device

The issue:

..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)

touch-action CSS property can be used to disable this behaviour.

touch-action: manipulation The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

Service Worker - offline support for the web

Progressive apps - high-res icon, splash screen, no URL bar, etc.

Progressive Web Apps: Escaping Tabs Without Losing Our Soul

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	import { useSyncExternalStore } from "react";
	// For more on the useSyncExternalStore hook, see https://react.dev/reference/react/useSyncExternalStore

	// The code is almost identical to the source code of zustand, without types and some features stripped out.
	// Check the links to see the references in the source code.
	// The links are referencing the v5 of the library. If you plan on reading the source code yourself v5 is the best way to start.
	// The current v4 version contains lot of deprecated code and extra stuff that makes it hard to reason about if you're new to this.

	// https://github.com/pmndrs/zustand/blob/fe47d3e6c6671dbfb9856fda52cb5a3a855d97a6/src/vanilla.ts#L57-L94
	function createStore(createState) {

	#!/usr/bin/env bash
	#
	# https://gist.github.com/joehillen/30f08738c1c3c0ca3e4c754ad33ad2ff
	#
	# This script inlines 'source' files.
	#
	# For long scripts, it is nice to be able to break them into multiple files
	# to make them easier to work with but still release as a single script.
	#
	# Inspired by https://stackoverflow.com/a/37533160/334632 with the following enhancements:

	open BsReactNative;

	[@bs.deriving abstract]
	type style = {
	[@bs.optional]
	color: string,
	[@bs.optional]
	fontSize: float,
	[@bs.optional]
	margin: float,

	var supportsES6 = function() {
	try {
	new Function("(a = 0) => a");
	return true;
	}
	catch (err) {
	return false;
	}
	}();

	$white: #ffffff;
	$black: #000000;
	$red50: #ffebee;
	$red100: #ffcdd2;
	$red200: #ef9a9a;
	$red300: #e57373;
	$red400: #ef5350;
	$red500: #f44336;
	$red600: #e53935;
	$red700: #d32f2f;