When to use React's memo HOC
The memo higher-order component can prevent your component for re-rendering unnecessarily, but you should use caution before using it
Articles
Articles are listed here in reverse-chronological order. You can browse by tags, and/or subscribe to the RSS feed.
All articles
🚧 Calculate the sum of everything up to a given number
A little tool to calculate 5 + 4 + 3 + 2 + 1
English words by consonant-vowel pattern
A tool to look up common words by their consonant-vowel pattern and resources for the rest
Music to code to
A growing list of artists that I like to listen to while programming.
Add a custom emulated device in Chrome
Walking through the steps within the Google Chrome dev tools to better mimic your users' devices.
Upgrading an Eleventy site to 1.0.0
Make sure the you are using Node.js version 12 or later
Make a web component
How to make a custom web component with only a few lines of code
Prevent Chrome from adjusting audio input levels on Mac
A clever extension can prevent Google Meet from muting your bluetooth microphone
My best Slack emojis
A curated list of the best reaction emojis that I have created for Slack
Helpful online tools for diagramming
Features and examples for some of the tools that I use to create illustrations and diagrams
What is a build.gradle file?
An brief explanation of Gradle and build.gradle files for JavaScript developers
Three new games on Toollama
Turtle Guide, Paint Pig, and Spotlight all help children build computer literacy
React Native Glossary
A growing list of terms you need to recognize when working in React Native
What happened to @react-native-community packages?
Why you won't be installing any community packages on your next React Native project
Find an iOS simulator identifier
How to find a simulator ID using the Xcode UI or terminal
Using BEM names in React Native
A quick how-to without committing to whether it's a good idea or not
Reflecting on a new role
Moving into mobile development at Niche and looking back on how I got here
What is Hermes in React Native?
Hermes is a JavaScript engine that is designed to run on mobile devices. It helps power React Native on Android – and now iOS – devices.
What is the song from Boston Dynamic's Spot Launch video?
Using the Google app's music recognition feature, I was able to identify the song as "Banana" by Stony Pony
Add a YouTube-embedder shortcode to your Eleventy site
A quick guide to writing a time-saving shortcode to create the embeddable code from a YouTube url
Get innerHTML of Enzyme wrapper
Writing a little helper function to grab the HTML of all children of a shallow wrapper in Enzyme
Use remark to covert markdown into HTML
The missing "hello world" example to get up and running with remark
Count class methods in JavaScript
Although JS treats them like object, finding the methods of a class programmatically is trickier than I thought.
A modest redesign for 2021
Freshening up SeanMcP.com for the new year
🚧 Latin phrases to know
Handy git commands
A curated collection of git commands that help me do my job better
Read URL search parameters with JavaScript
How to use URLSearchParams to parse any search parameters string like window.location.search
Fix 'downloadable font: rejected by sanitizer' error in Firefox
Make sure that the path to your font is correct before going down the debugging rabbit hole.
Fix Netlify CMS YAML error 'Implicit map keys need to be on a single line'
Make sure that your configuration file is being copied to the destination directory.
COVID-19 journal
Recording my experience contracting COVID-19 in 2020
Copy the last git commit hash on macOS
A one liner to copy the last commit hash to the clipboard on a Mac
Add Heroicons to an Eleventy site
A guide to using the eleventy-plugin-heroicons package in your Eleventy projects
Create a URL shortener with Netlify
Build your very own shortener in six quick steps
Set innerHTML of an element in Svelte
You can use an HTML expression to add valid markup to an element
Building browser extensions
Some resources and guides for making browser add-ons/extensions
Let's stop skinning cats
Proposing an alternative, more constructive idiom to "there's more than one way to skin a cat"
Search all files for two strings
A terminal command to search for all the files in the current directory that contain two independent strings.
🚧 Setup Netlify CMS with Eleventy
Fix "Error: Could not resolve pagination key in template data" in Eleventy
Not a true fix, but a decent workaround when paginating collections in Eleventy
Geddes' Guide to Crafting
When building something new, get your foundation in place before building upon it.
Send data to the window with Eleventy
How to create a shortcode to expose data for client-side scripts
Checkout the previous git branch
Using a git shorthand to checkout the most recent branch
Make all properties required in TypeScript
Using the Required utility type to required all properties of a type
Add text to the beginning of every file
Using a shell script to add a line to every file with a given extension
Sass converts hsla to hex incorrectly
A simple solution to stop Sass from transparent hsla colors to opaque hex colors.
🚧 Change extensions of all files in a directory
Increase the playback speed on any audio or video online
Since audio and video are native HTML elements, you can change the playing speed with a quick console script
Standardize character width with CSS
Two CSS properties that make letters and numbers the same width.
See all package versions in npm cli
How to use npm view to see all the published versions of a package on the registry.
TypeScript without TypeScript
TypeScript provides valuable features but complicate the development process. What are some alternatives that provide the features without the headache?
Emulate iPhone & iPad in Safari
Simulating your web pages on Apple devices is easy with Safari's responsive design mode
🚧 Get started with Preact
Make a POST request with fetch
A sample POST with fetch for those of us who can never remember how.
🚧 Why you shouldn't mutate parameters
Remove an item at a given index in JavaScript
Sidestep slicing and splicing and use Array's filter method for a no-hassle solution.
Tab focus not working in Safari?
For some unknown reason, you need to enable tab highlighting in the browser's settings.
🚧 Don't remove default focus styles, enhance them
The Economics of Software Development, Part III
Demand inelasticity in web development, why its bad, and what we can do about it.
Fix 'EMFILE: too many open files' error in Jest
When trying to run Jest in watch mode, this error may mean that you are missing a dependency.
Updated TypeScript mega-course on Egghead.io
Reviewing and updating my TypeScript mega-course on Egghead.io
The Economics of Software Development, Part II
Why developers should rely on markets to make the best decisions for their product
Access the home directory in Deno
Using Deno's environment to determine your computer's home directory
The Economics of Software Development, Part I
How developers can reduce opportunity costs and avoid the sunk-cost fallacy
🚧 Manage analysis paralysis while programming
Before You Debug
An organized approach to debugging your code
Intro to "The Economics of Software Development"
Introducing a new series on how economics helps explain the decisions we make when developing software
Nodemon for Deno
Denon is a utility for Deno that provides source watching and process restarting just like Nodemon
Adding images to my articles
How the right design and process for sourcing images made all the difference for me
Parse argument aliases in Deno
Using Deno's standard flags module to parse command-line arguments with aliases
Await multiple promises in JavaScript
By calling your asynchronous functions before awaiting, you can save valuable time in your JavaScript programs
TypeScript mega-course on Egghead.io
Creating a playlist to learn TypeScript
Six video update
Lessons learned from publishing six videos on YouTube
Read a json file in Deno
How to use Deno's standard library to read and parse data from a json file.
Read a json file in Node.js
How to use Node.js's file system to read and parse data from a json file.
Publishing my first YouTube video
Why I started a YouTube channel and what I learned in the process
How to get the browser and version in JavaScript
A brief journey into the dangerous world of user agent sniffing
Logging with Eleventy and Nunjucks
Adding a simple filter to save you a lot of grief.
Store readable data
When forced between storing data for humans or computers, choose the former.
Over my head
A list of articles, topics, and resources that are currently over my head
MagnoliaJS 2020 conference notes
Some notes from the talks that I was able to attend
How to open the Dev Tools
A comprehensive guide for opening the dev tools in Chrome and Firefox
Tools for custom Slack emojis
The full toolbelt for making your own custom Slack emojis
🚧 Laws I Love
Great programming reads
A list of articles, books, and resources for software engineers
Free to grow
Why tests (should) free you to grow with confidence
How to check npm scripts in current directory
Writing a script to read the package.json for you
🚧 What to include in every node module
How to remove duplicates from an object array?
Not as easy as we'd like it, but not as hard as it could be
🚧 Write a draft script for your SSG blog
Easily spin up a new article when you don't have a CMS
A new Twitter handle
Kicking off 2020 with (yet another) new handle
What default parameters do (and don't do)
Correcting my mental model
Reviewing 2019 goals
Checking in on the goals I set for myself in 2019
🚧 2019 into 2020
Reflecting on last year while looking forward the next
🚧 The fastest way to look for object properties
"Stop Teaching Code" in JavaScript
A quick review of Jeff Olson's article on teaching code with translated examples
5 Lessons from 10k open-source downloads
A few things I've learned from managing a modestly popular open-source package.
Should I snapshot my UI components?
The temptation is strong, but consider some of the tradeoffs.
Lessons Learned at Abstractions 2019
Some notes and thoughts from Pittsburgh's cross-discipline software conference
Edit a previous commit message
The steps to edit recent or ancient commit messages
Arguments or parameters?
An attempt to remember the difference between the two
🚧 Reasons to use prop-types
How to pronounce my name
A guide to pronounce my often-mispronounced name
Add event listener for class change
How to create a custom event listener for class names using the MutationObserver API
🚧 Why I switched from Gatsby to Eleventy
Storing data in state vs. class variable
Why do we store data in state as opposed to on the class?
Filter out premium Medium articles
Using a console script to alter the content on a webpage
Adding accessibility checks to your React app
Three reasons to learn Python
JS Basics: Generate a random number
Using JavaScript's Math object to generate random numbers
JS Basics: Ternary Operator
Demystifying the inline if statement
Convert class components to functions with React Hooks
A step by step guide to converting old components to modern React
Accessibility Wednesday
Learning and sharing about accessibility for everyone
2018 into 2019
Reflecting on last year while looking forward to next
Why a blog?
An effort to preserve my content on the ever-changing web
How to create a render prop component
Render props are a popular technique in modern React, but they can be tricky. Here is a brief explanation and guide to creating your own.