Articles
I've had some things on my mind
- All posts
- Career
- Javascript
- GraphQL
- HTML
- React
- Project management
- Animation
- 1Password
- Gitpod
- Linux
- Bash
- Cheatsheet
- CSS
- Typescript
- ESLint
- Vue
- XState
- Remix
- Apple
- Lean
- Design
- Docker
- Database
- Jest
- Testing
- Tutorial
- Web
- Prettier
- VS Code
- Language
- Habit
- Tailscale
- Jacob
- Validation
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.
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.
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
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.
iframe.js
This is a helper script to allow an embedded iframe to communicate with its parent page.
The Inverted Switch Pattern in Javascript
The
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
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.
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
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
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
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
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.