Articles

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

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

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

Here's how to a Key to a React Fragment

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 stripe checkout using XState and React. This uses the Stripe API and the Stripe Elements tools to create an actual payment.

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

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

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.

A guide explaining different patterns for centering elements in CSS

A series of statecharts representing a contact form

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

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.

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

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

Guide to designing a login flow for an app

This is a common question that came up

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

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.

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

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.

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

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.

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

Modelling a set of radio buttons with an null state

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

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.

A guide to HTML for the absolute beignner

A list of elements with optional closing tags in HTML

A list of void elements in HTML

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

An overview of functions and callbacks

An overview of promises, async functions, and await

Samples of JSDoc typing different kinds of functions

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

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

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

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.

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

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

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

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

A glossary of words I learn as I teach myself Spanish

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

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

These are a few of my favourite tweets

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

A list of things I use day to day

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

Paste Image makes adding images to code documents a breeze

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.