Skip to content

Instantly share code, notes, and snippets.


Jimmy Breck-McKye jbreckmckye

View GitHub Profile
jbreckmckye / formatters.ts
Created November 23, 2022 12:34
TypeScript functions for printing a matrix of data as either CSV or a markdown table
View formatters.ts
type Stringable = string | { toString(): string }
export function toCSV <T extends Stringable>(items: T[][]): string {
return => row.join(',')).join('\n')
export function markdownTable (items: Stringable[][]): string {
const asStrings =
row => => typeof item === 'string' ? item : item.toString())
jbreckmckye / trnad53
Last active March 20, 2023 22:16
trnad53 script
View trnad53
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 / penalty.js
Created June 21, 2022 14:18
Penalty of unnecessary async / await
View penalty.js
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 /
Last active November 18, 2020 23:35



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 /
Last active October 12, 2020 12:00
TypeScript hack: getting access to the members of a union

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.ts
Created October 11, 2020 19:01
Fun with distributions
View fun.ts
// 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 / British PC Layout.keylayout
Created June 3, 2020 15:19
MacOS British PC keyboard mapping (put this in Library/Keyboard Layouts/)
View British PC Layout.keylayout
<?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">
<layout first="0" last="0" modifiers="48" mapSet="312" />
<modifierMap id="48" defaultIndex="0">
<keyMapSelect mapIndex="0">
<modifier keys="" />
jbreckmckye /
Created February 24, 2020 19:15
GHCIDE & VSCode setup

GHCIDE & VSCode setup

1. Install Stack

curl -sSL | sh
stack upgrade

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

jbreckmckye / group.js
Last active October 10, 2019 15:48
Group objects by a string field
View group.js
function group (rows, discriminant) {
const asMap = rows.reduce(
(acc, item) => {
const key = item[discriminant]
return {
[key]: acc[key] ? [...acc[key], item] : [item]
jbreckmckye / groupedThrottle.js
Created April 24, 2019 16:57
Grouped throttle function
View groupedThrottle.js
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);