Articles

I've had some things on my mind

52 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.

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.

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

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

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

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

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

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

iframe.js

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

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

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

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

Tweets

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

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