Skip to Main Content

All Posts

All the stuff I've written on this site

Losing Reactivity in Vue

One of the easiest and most common mistakes to make in Vue code.

Only React has controlled inputs

Follow me down a rabbit hole to understand how React works slightly differently to every other framework.

createTypedContext (React)

Easily make a typed context provider and helper hook in React

Eslint errors for bad imports

Raise Eslint errors when importing from bad modules.

Simpler Pact consumer tests with MSW

Simplify your Pact consumer tests with MSW and this helper

Use Touch ID for sudo commands

Use your finger instead of your password for sudo!

Slack emoji engineering: partyify anyone!

Learn how to make a party emoji out of anything or anyone for your Slack workspace or Discord server.

Overlay an image on your page

CSS-only method to overlay an image on an html page.

Vue 3 composable that simplifies using a value that's a MaybeRefOrGetter

Mocking classes from mocked modules in Vitest tests

How to mock and expect on class methods from mocked modules.

Drizzle ORM Type Helpers

A couple type helpers to get a table's document type (when you SELECT) and the table's insert type (when you INSERT).

Pinpoint Bugs with Git Bisect

Find the exact commit that caused a bug using a less known git command.

A more inclusive complement to TypeScript's Exclude helper type - only include the parts of a union type that are assignable to another type

useFullscreen (React)

Get access to the current fullscreen element, and controls to enter, exit, and toggle fullscreen.

safeViewTransition

A tiny wrapper around document.startViewTransition that respects users' prefers-reduced-motion preferences

createManualPromise

Create a promise that you manually resolve or reject at any time!

Write your own Promise.all()

Work your way up to the super useful Promise.all() function from scratch!

useTemporaryState (React)

State that resets after a timeout.

createPreviousMemo (SolidJS)

Get the previous value of a SolidJS signal

Event Delegation

A better way to handle multiple elements with the same event handlers

FormData - My 2nd Favourite Web API

The FormData API lets you easily access the values of inputs inside a form.

Miscellaneous snippets for doing things in Cypress

PartiallyOptional

A TypeScript generic type to make part of another type optional

Over-Engineering a Website (September 2022)

How I discovered the secrets of the TMNT stack, built this website and procrastinated uni course work for 2 years.

A useful function to print out the value of something with an optional message

Tailwind CSS Hocus Plugin

A plugin for lazy people like me who use the same styles for hover and focus states

Stop Vercel GitHub Comments

Stop Vercel's bot from commenting on PRs and commits (and the associated emails)

useIsMouseInactive (SolidJS)

Know when the mouse hasn't moved for a period of time

useSyncedLocalStorage (React)

Save state to localStorage and sync it between hook instances, tabs and windows!

useCssVar (React)

Control a css variable from the comfort of React.

useCopy (React)

Copy to clipboard with a 'copied' timeout

useCopy (SolidJS)

Copy to clipboard with a 'copied' timeout

Download a file with or without JavaScript

Miscellaneous snippets for working if you have to do tests with Enzyme

PartiallyRequired

A TypeScript generic type to make part of another type required

A tiny helper function to conditionally join classnames.

useBoolean (React)

Toggle and set a boolean piece of state with a slightly better interface than straight useState

Next.js <Redirect />

A <Redirect /> component like the one for react-router.

useMounted (React)

Know when the current component is mounted.

Run a function at most once every N seconds, at the end of the N seconds.

Run a function at most once every N seconds, at the start of the N seconds.

useLocalStorage (React)

Save state to localStorage with an interface almost identical to useState

Show "Hello, World!" to your screen.

43 posts total