jbreckmckye

type Stringable = string | { toString(): string }

export function toCSV <T extends Stringable>(items: T[][]): string {
  return items.map(row => row.join(',')).join('\n')
}

export function markdownTable (items: Stringable[][]): string {
  const asStrings = items.map(
    row => row.map(item => typeof item === 'string' ? item : item.toString())
  )

jbreckmckye

TRNAD53 is a cut scene file from the original Final Fantasy VII. A map, at the North Cave, where Sapphire Weapon sleeps, Sephiroth waits, and Aeris' theme plays. Discovered early on in leaks of cut content, TRNAD53 has garnered all kind of wild theories over the years. In this video I want to dig into the data and uncover the truth

I've been into the FF modding scene for a while, but Final Fantasy VII has always fascinated me. It's a weird game in some ways, halfway between the classic 16 bit era and the modern, cinematic era. It's development process was turbulent: originally FFVII was about a New York detective chasing an elusive man; but somehow this became cyberpunk mercenary Cloud Strife chasing Sephiroth through Midgar and beyond.

TRNAD53 also has had a turbulent history of rumours and fan theories. Was it an early version of where Cloud gives Sephiroth the Black Materia? Was it an early script where Aeris dies at the North Cave? It *was* known Aeris has post death dialog files, files that come before

jbreckmckye

async function addAwait (a, b) {
  const resolved = await a
  return a + b
}

function addOptimised (a, b) {
  if (a instanceof Promise) {
    return a.then(resolved => resolved + b)
  } else {
    return a + b

jbreckmckye

Nano-Frontends

Abstract

Micro-frontends are a strategy for splitting user interfaces up into separately deployable units. This gives teams great latitude to choose their own technologies and think in terms of self-contained programs. However, the "per page frontend" approach has disadvantages: pages cannot be shared by teams; sub-frontends are hard to modal-ise; and the user must download and execute duplicate JavaScript. Nano-frontends are an alternative that give teams similar freedoms but provide opt-in optimisations to improve user experience.

Give me the gist

Write your frontends as libraries that take a) a DOM element to render in and b) a set of common dependencies to call (e.g. React). Then allow a scaffold app to render the entire thing and inject the dependencies. Libraries can be published by writing artefacts to S3 and then monitoring for changes using SNS/SQS.

What does a 'dependency injected' frontend look like?

jbreckmckye

I had some fun with TypeScript union distributions this weekend. This is a (kinda) hack around conditional types that lets you access the individual members of a union in a generic type.

A usecase for this might be when your function accepts items from a union of types, but you want all your function parameters to be consistent in which 'branch' of the union they specify.

Let's say you have a type representing some events (this is a contrived example but simple)

type Events =
 | { kind: 'loading', data: void }

jbreckmckye

// Fun with distributions

// You probably know that TypeScript has union types

type StringsAndNumbers = string | number;

// You also probably know about 'discriminated unions' or 'tagged unions',
// representing different kinds of structs

type Eventing =

jbreckmckye

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE keyboard SYSTEM "file://localhost/System/Library/DTDs/KeyboardLayout.dtd">
<keyboard group="0" id="5001" name="British PC Layout" maxout="2">
	<layouts>
		<layout first="0" last="0" modifiers="48" mapSet="312" />
	</layouts>
	<modifierMap id="48" defaultIndex="0">
		<keyMapSelect mapIndex="0">
			<modifier keys="" />
		</keyMapSelect>

jbreckmckye

GHCIDE & VSCode setup

1. Install Stack

curl -sSL https://get.haskellstack.org/ | sh
stack upgrade

Then ensure ~/.local/bin is on your $PATH.

jbreckmckye

function group (rows, discriminant) {
  const asMap = rows.reduce(
    (acc, item) => {
      const key = item[discriminant]
      return {
        ...acc,
        [key]: acc[key] ? [...acc[key], item] : [item]
      }
    },
    {}

jbreckmckye

function throttleGroup(fn, count, delay) {
	let queue = [];
	let nextDrain = null;
	
	function scheduleDrain() {
		nextDrain = window.setTimeout(drainQueue, delay);
	}
	
	function drainQueue() {
		const groupSize = Math.min(count, queue.length);