I've had some things on my mind

71 posts

A tech interview that doesn't suck

No other profession has so many candidates who are good at interviews and bad at the job they are interviewing for

Add a simple query resolver

There are two things you need to know about in order to write queries

Add footnotes to your content

Use HTML anchor tags to add accessible semantic footnotes to your article or webpage

Add a Key to a React Fragment

Here's how to a Key to a React Fragment

Write good scrum tickets

If your ticket is actually ready to pick up, it'll be completed in half the time. And if the definition of done is clear, development will double in speed again. This is what's needed to get twice the work done in half the time. This is the reason Scrum exists.

An animated guide to Array Filter

An animated guide to Array Map

An animated guide to Array Reduce

Animate a Stripe Checkout with Framer and React

An animated stripe checkout using XState and React. This uses the Stripe API and the Stripe Elements tools to create an actual payment.

Automatically update your secrets and environment variables from a 1Password vault

Bash Cheatsheet

Here is a bunch of different things you can do with bash

My 50 Favourite Gitpod Workspace Names, Ranked

Prior to the 14 of January, 2022, before Gitpod included useful information like the repository name in the workspace ID, we got animals and we got colors.

Break text responsively

Use <br> tags and media queries to break text into smaller paragraphs on smaller screens

Bug – "parserOptions.project" has been set for @typescript-eslint/parser.

Add the file to the "include" array in your tsconfig.json

Build a sliding sidebar with pure CSS

Build a sliding sidebar with vanilla javascript

Build Vue Components with ESBuild

Simple projects may be able to compile modules using the command line, but if you're trying do anything complicated enough to need plugins, you need to use the ESBuild node modules instead.

Center anything with CSS

A guide explaining different patterns for centering elements in CSS

Write a contact form in XState

A series of statecharts representing a contact form

Cloudflare in Remix

Controlling fan speed on Mac OS

Defeat thermal throttling and speed up your Mac by running the fans sooner

Create a custom local eslint rule

Running custom ESLint rules locally is really easy, so there's lots of room to explore automating rules and guidelines that are important to your project but maybe not anyone else.

Use CSS print styles with or without Tailwind

CSS provides a media query that allows us to apply certain styles to the screen and certain styles only while printing.

Analyze the data supply chain to detect overfetching

Overfetching is one of the major wastes that disrupts the data supply chain

Design a login flow UI

Guide to designing a login flow for an app

Initializing a destructured argument

This is a common question that came up

The Developer's Guide to Hoisting

I often think that if we knew why interviewers continue to ask about hoisting, we'd know a lot more about how to conduct better interviews

Creating databases with Docker Compose

Dynamically generate test cases with Jest

As long as you know which cases you want to test up-front (for example, you're not trying to generate them after a network request) you can use Jest to batch out multiple cases at once.

Enter the Tech World

If you're new to the professional tech industry, this is where I'd recommend you start

Export Passwords from 1Password to iCloud Keychain

If you're migrating from 1Password to iCloud Keychain, you'll need to export your passwords from 1Password to a plaintext file. This will allow iCloud Keychain to easily import your passwords.

Filter an array in Typescript

I had a typed array and wanted to remove elements with an empty value, but Array.Filter returns a regular array of regular objects, and the type information about the string unions was lost

Format text with XState (Part 1)

The number of states in a system can grow rapidly as features are added. XState allows us to model these easily with parallel state management.

Format text with XState (Part 2)

Many-to-many transitions between sibling states can often be 'lifted up' into one-to-one transitions from parent to child

Format text with XState (Part 3)

Modelling a set of radio buttons with an null state

Getting started with testing

Testing your code is essential but get started can be a tough hurdle to overcome

Import ENV file from 1Password shared note into Gitpod environment

In April 2021, 1Password acquired SecretHub, which means there is now a way to securely store and download text files from a 1Password vault. This is perfect for .env files, as vaults can be shared between team members and now also to cloudy development environments.

Intro - HTML for Absolute Beginners

A guide to HTML for the absolute beignner

Optional closing elements

A list of elements with optional closing tags in HTML

Void elements

A list of void elements in HTML


This is a helper script to allow an embedded iframe to communicate with its parent page.

The Inverted Switch Pattern in Javascript


Developer's guide to javascript functions

An overview of functions and callbacks

Developer's guide to javascript promises

An overview of promises, async functions, and await

JSDoc Cheatsheet

Samples of JSDoc typing different kinds of functions

Laying out pages with HTML

An explanation of HTML/CSS positioning concepts followed by a series of example layouts with code

Logging out with remix-auth

The easiest way to log a user out is to destroy their session on the server

Loop through anything with javascript

There are four ways to write for-loops and here's how to choose

Feature Request: Can you let us set the mortgage balance?

A post mortem of a load bearing feature request and where the counter-intuitive solution became the correct one

Partial matches in Typescript

I had a type that acted as a schema, but one implementation only needed a subset of its fields, so I had to find a solution.

Using Prettier and ESLint in harmony

Configuring Prettier for Opt-In Usage

Developer's guide to React useCallback

A guide explaining the use-cases and differences between a few of React's Hooks

Developer's guide to React useEffect

A guide explaining the use-cases and differences between a few of React's Hooks

Developer's guide to React useMemo

A guide explaining the use-cases and differences between a few of React's Hooks

Serving files as routes with Remix

Submitting a form

When a user submits a form, the browser will send a request to the current route.

Reverse a Record in Typescript

I had an API adapter that went one direction, and I wanted to make it go the other direction without losing type information

Sort an array into groups with reduce

Spanish Vocabulary

A glossary of words I learn as I teach myself Spanish

Watch Youtube Streams and Chat with React

In this tutorial I'm going to show you how to bootstrap a React project from scratch using NPM and Webpack, integrate Google Login, grab data from the Youtube API, and deploy your code to Netlify

Test a textbox with testing library

Examples of test cases around text boxes with Jest and Testing Library


These are a few of my favourite tweets

Use Twitter tweet intents

Tweet intents are links that immediately prompt the user to do something.

Things I use

A list of things I use day to day

Using ActionData to get form post body in Remix

The response of the action method is available through the useActionData hook

Using Layouts with Remix

This pattern lets you share the layout across many routes, for example both a /posts and /users route with the same sidebar

Validating phone numbers

File Utils - Favourite VS Code Extensions

File Utils makes it much easier to move, rename, create, or duplicate files

Paste Image - Favourite VS Code Extensions

Paste Image makes adding images to code documents a breeze

Import Vue SFC files with Typescript

If you're adding Typescript to a Vue project, you need to do a bit of extra work to make Single File Components load properly into the type system.