Articles

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.