Hi, I'm Jeremy Richardson

I'm a full stack developer building software solutions to make your life better

Jeremy Richardson

About

My current mission with Mint Mobile is to lead a team as we build a modern a UI component library to support the ecommerce division using React. Learn more...

My past had led me through a number of creative fields including film and television production, audio production as both a musician and engineer, as well as live theatrical sound and lighting.

Each of those ventures always led me back to the web where the innovation in technology attracted me time and time again. I love building tools that people love to use, especially in the creative and entertainment realms.

 

Tech

React
Javascript
HTML5
CSS3
Jest
NodeJS
AWS
OpenAPI/Swagger
Git
 

Posts

Why are my fonts so fat?

Ran into this issue where fonts were appearing bolder than I knew they should be. In fact I wasn’t even loading that bold of a font, so why was it so bold?

Headless WordPress – moved from WordPress.com

It was a great exercise using a WordPress.com free site to provide content to my personal site that is built using NextJS. It worked well for what I wanted to prototype and cost $0 for WordPress hosting. However, I ran into some limitations that I’m now ready to try and tackle. This required me to […]

Resolution range, not breakpoints

Was working on a system for our breakpoints and was just not happy with how things had been. It never seemed to make sense but I couldn’t articulate why. Then I stumbled upon this blog post by David Gilbertson – https://medium.com/free-code-camp/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862 The main concept he hits home with is the idea of screen resolution ranges. […]

Force ipv4 in Bitbucket pipeline

This goes over my head but going to attempt to provide a little background. I ran into this issue because I’m trying to wait for a web server to spin up in the pipeline so I can run some Cypress tests. Looks a little like this: IP confusion Apparently the issue comes from a “happy […]

How to win the z-index wars

This is going to be a disappointing answer – don’t fight them in the first place. I recently saw what I thought was the funniest and most poignant example of the z-index wars. I don’t even know if that works since the maximum z-index value is 2147483647. I had to look up what 9e999 represents […]

I messed up, git me back to what is on origin!

I can’t tell you how much I used this command and yet every time I have to look it up. Maybe if I write a quick blog about it I’ll remember. Or at least I can bookmark it for when I need it. This updates your local HEAD branch to be the same revision as […]

The DPI Myth: Forget DPI and Embrace the Pixel

The transition from print to screen from a designers perspective hasn’t been the smoothest. In the early days of the web, graphic designers who had spent their careers designing brochures and billboards were tasked to create experiences for this new screen medium. Naturally their muscle memory would apply print design principles to the screen. What […]

Exports fields and Webpack 4: It just doesn’t work

tl;dr Webpack 4 does not support the exports field of imported packages. Take it as a sign you need to upgrade to webpack 5. Module not found: Error: Can’t resolve This was the error I was getting when trying to import our new component library to an older Webpack 4 project. It was a confusing […]

miniDV transfer project – adapter party!

I’ve been posting about my saga of transferring all my old home movies from DVD, VHS, and miniDV to Plex. Here is my currently setup for miniDV capture on Mac. Canon miniDV camcorder -> Firewire to Thunderbolt 2 adapter -> Thunderbolt 2 to Thunderbolt 3 adapter -> Mac mini I initially tried plugging the Thunderbolt […]

Optimizing Hot Module Replacement (HMR) in React with Vite: The Importance of One Component Export Per File

When it comes to optimizing the React development experience, tools like Vite provide a fast and efficient development server. However, there’s a subtle detail that developers often miss when using React with Vite – the importance of consistent component exports. The HMR Challenge Hot Module Replacement (HMR) is a feature that allows developers to see […]

MKVToolNix GUI for the win!

If you look at some of my recent blogs you’ll find the history of my fight with ripped home movie DVDs that didn’t work out as easily as I’d hoped. I think I finally found the best answer so far. Track order weird For some reason, DVDs recorded with my Samsung DVD recorder from VHS […]

diff’ing two folders

I’ve been in Webpack refactoring land for a while now. It’s a pretty ancient config in tech years so it needs to be a slow methodical process to get it up to date. One of the first order of business is to re-organize. The current config has a lot of duplication and is super hard […]

LosslessCut – my new favorite video tool

For years I’ve been looking for a “simple” tool that would be capable of chopping up video files without re-encoding them. I think I finally found that with LosslessCut, an open source video editing tool you can find on Github and the App Store. Home movies I’ve been digitizing in DVDs that I used to […]

ffprobe – vob file stream information

In my recent archiving project, moving home movies from DVDs and miniDV tapes, I’ve run into a number of issues. One of those issues is that I’ve been having trouble ripping DVDs recorded on my Samsung DVD recorder. I’ve already documented part of my journey in this blog. Analyze the data I’ve been having a […]

Ripping home movies to Plex

We had a tonne (yes that’s metric) of old VHS tapes that I wanted to be able to play. I can’t actually remember when I started, but I think it was over 10 years ago. I purchased a DVD recorder, the Samsung DVD-R160. I wanted the ease of just pushing record on the DVD recorder […]

PostCSS and autoprefixer not show source file for warnings

Ran into this issue yesterday. Working with a webpack config I updated from node-sass to sass (dart sass) and started getting new warnings from autoprefixer. Not wanting to clutter up the build screen I thought I’d just fix some of those errors. But to my dismay all I got was a line number and no […]

How to automatically enqueue JavaScript and CSS from webpack

This odyssey started when I needed to get React working with an existing WordPress site. The site had a webpack build but when I tried to add a mini-React app it just wouldn’t work. I did a little sleuthing and found that React just never ended up being enqueued with WordPress so of course it […]

NextJS next/dynamic import still somehow using require?

Ran into an odd issue when trying to dynamically import our custom component library using the NextJS dynamic function. Here is a simplified version of what I was trying to do. Pretty much right out of the NextJS docs. Running npm run dev and everything seems to work fine. Module not found? huh?! The issue […]

SWR and testing with Storybook interactions

We recently picked up SWR in to help with our data fetching needs. So far it’s been a great library and served our needs. However, when it came to automated testing we were constantly getting failed tests in different contexts. Everything seemed to pass when I ran the Storybook locally in browser but when I […]

Externalize library bundle dependencies

This is a follow-up to my post Vite/Rollup preserveModules for libraries. In my previous post I talked about how to rename the node_modules folder to external to avoid the special properties of a node_modules folder. Since that post I’ve found another way that actually makes a lot more sense. Bundle or as dependency Previously I was […]

Vite/Rollup preserveModules for libraries

One of the keys when building a JavaScript library is ensuring that it can accommodate tree shaking. In my cursory knowledge of tree shaking, it seems it can occur in 2 major ways The first option, where entire modules are trimmed seems to be an easier process for webpack and other bundlers to accomplish. It […]

localhost isn’t always what you expect

I spent the better part of a day working on this issue as it was a deep one. For some reason our test web server started using npx http-server out stopped being accessible in our pipeline. Everything worked locally, so it was one of those that could only be figured out by making changes and sending it […]

Triggering a Vercel build via cron

Using WordPress.com as a headless CMS, I looked into the possibility of triggering a Vercel build every time I publish or update a post. This is possible, and I think I’ll still write a blog about it, but I’d rather have blogs published on a schedule. I’m thinking to have them available Monday morning. This requires some […]

Why is my /dist directory missing from my package?

It was rather puzzling that the only directory that really matters, the /dist folder, wasn’t included in the final npm package. I know about the files property in the package.json but I really wanted everything included in the package. Omitting the files property is supposed to include all files, but that just wasn’t happening. .gitignore? […]

Outputting multiple CSS files with Vite

I’m building a component library for our team and am on a wild ride of understanding the module systems of JavaScript. The latest part of that journey involves attempting to output multiple css files with the bundler Vite. Vite only outputs a single CSS file No matter what I did, it couldn’t seem to get […]

Parsing a raw WordPress post with blocks

Gutenberg blocks are great. I love the authoring experience using WordPress with blocks. The trick was figuring out how to use that authoring experience in a headless context with a Next.js site. We somehow need to get the blocks and translate them into a React context. Raw WordPress post The first step is to make […]

Change where screenshots are saved on macOS

I’m not a fan of having a cluttered desktop. Ideally I don’t have anything on my desktop. For temporary storage I use my downloads folder. That way I know I can blow it away at any moment and there is nothing in there that is permanent. Screenshots fall in that category. How to change screenshot […]

Merging back to develop after running semantic-release

Here is the issue: Normally this isn’t a big issue other than you develop branch won’t have the latest changelog info or the correct version in your package.json. For us, we’re building our Storybook documentation from the develop branch. We’re pulling the changelog into Storybook so it’s visible there, but it’s pulling from the develop […]

Using Postman to Access the WordPress.com REST API

Postman is a great tool for working with REST APIs. It allows us to test out endpoints without having to setup a bunch of infrastructure. In order to unlock access to all the WordPress.com endpoints and data we will need to generate an access token to send with our requests. Set up a GET request […]

Setup OAuth with WordPress.com to use as headless CMS

This is the first in a series of posts that will cover my recent conversion from using markdown files for my blog posts to using WordPress.com as a headless CMS. The reasoning for using WordPress.com is to get the benefit of the Gutenberg editor without needing to host my own WordPress site just for content […]

How to detect if a site loads React

I recently needed a way to figure out if React was being loaded on various different pages of a site. The first script I found didn’t work, which basically looked to see if React was attached to the window object. However, I did find this script that does work. What it can’t determine is if […]

The saga of learning the exports property in package.json

This is here to document the steps I went through to come to the conclusion that ESM exports syntax in package.json is not ready for use. Use case Our use case is for an internal component library that we want to supply to other projects. Ideally we want to export this as a TypeScript library […]

Refactoring is a way of life

I have to admit that this article is primarily a result of ChatGPT. I should probably do another blog post on the usefulness—or evil depending how you look at it—of chatGPT. The final result is still edited and massaged by me, but I had a good base to start from. No matter your stance, AI […]

You need to be using conventional commits

Why? Before we get into what is conventional commits, I thought it made more sense to talk about why you need it. Determining what changes have happened to your project is not a trivial task. What version should this release be? What features are included? What does it matter?! Instead of spending valuable brain cycles on […]

How to take advantage of Envrionment Variables

Our projects have at least 3 different environments: When developing a project it is often common to hard code values just to get things working. The context shift of setting up environment variables is enough to put it off until a later moment. Then we need to push it up to QA for someone to […]

Don’t use localStorage for application state

I’ve seen it a couple times that when a junior developer is trying to figure out how to persist state from different interfaces, they default to localStorage. LocalStorage has its place, but it is not the right option for dealing with application state. When to Use LocalStorage is used to store data that needs to […]

What problem does useState in React solve?

This was a recent question on r/webdev subreddit. I thought it would help to give some context through history. Jumping directly into React can be disorienting, especially when you don’t understand the basic reason for its existence. Let’s see how we got here. Back in old school JavaScript only days, if you had a variable that held […]

Access source code of a Node module

This may seem obvious to some, but as a senior developer with almost 20 years experience, I just figured this out. I thought I would document it for others who might be searching for how to do it since my searches didn’t pull up anything. Probably because it’s just too obvious. Problem – access src […]

Where to put Cypress TypeScript definitions?

Ran into this issue where the addition of mount to cy wasn’t working properly. I couldn’t for the life of me figure out why! I followed the TypeScript page in the Cypress docs. It first recommends putting the definition in the appropriate file in the /cypress/support folder. Since I was doing component testing I added it to the component.ts […]

Searching for a full stack developer job online

I’ve recently begun to look for new work. I haven’t had to do this specific type of job search in a long time since my last number of positions were through professional relationships. I pursued all of these career connections I had first, as that’s usually the best way to land a position , but […]

npm – install, update, or upgrade?

I’ve been a user of npm for a long time and even still when it comes time to look at my dependencies, I’m always confused as the the official method to update dependencies. npm install library-name Install This is the easiest and most obvious. When you run npm install it will install the latest release version of the […]

AWS CLI commands from FileMaker server Script and Verify Schedules

We ran into an issue where the batch file that we use to run an S3 backup script on a schedule with FileMaker server, was erroring out with no indication of why. Setup FileMaker server has the ability to run scripts on a schedule. We want to run various scripts on schedules that will backup […]

True and false for CloudFormation parameters

CloudFormation doesn’t offer an official boolean type when dealing with parameters, but I’ve found that the coercion of values works pretty well. Using this method helps to avoid a lot of unnecessary if statements in our templates. True / False parameters Although there are no true boolean parameters types, there are boolean properties that exist […]

Namespace for multi-stack CloudFormation Deployments

Naming on the best of days in any programming language can be one of the hardest things to do and increase technical debt by leaps and bounds. CloudFormation and AWS take naming to a new level with so many different layers of naming and potential naming collisions. This is our approach to this issue. Namespace […]

Scripting CloudFormation deployments

We try to use CloudFormation whenever we are building AWS infrastructure because of two main factors: Using the AWS console to deploy can get tedious when you’re working through issues with the deployment. I’d love to say I can write perfect CloudFormation templates every time but that’s just not true. And the only way to […]

My 5 Essential Visual Studio Code Extensions

I live in VS Code for most of my working hours of the day. VS Code’s extension ecosystem is one of its biggest selling points. Here I’ve documented some of the extensions I can’t live without and ultimately make me a better programmer. Cobalt2 Theme Official I follow pretty much everything Wes Bos does because […]

How I listen to music at work

Working from home has opened up my listening possibilities as I don’t have to worry about paying attention to close by co-workers or clients and don’t have to wear Air-pods all day which can become quite uncomfortable. I have found myself using the following methods and stations to shake up my routine. Amazon Music Our […]

Decrypt Private Key File

We recently ran into a situation where we needed to paste the private key file for a certificate into AWS Certificate Manager and realized that it would not accept an encrypted key file. To determine if a private key file is encrypted you can just look at the first line of the private key file […]

AWS API Gateway decodes url query string

We ran into on odd problem that was hard to track down due to it’s odd nature. For some reason when using a VPC Link with Use Proxy Integration enabled, API Gateway will decode the url string before sending it on to the integration server. That means when our node server received the request it would include […]

Samba file shares on Raspberry Pi

Most of the time I use SSH to interface with my Raspberry pis, including CyberDuck for moving files. However, there are certain operations that require an old fashion file share.

Moving from Postman to Insomnia

Postman has been great and served many purposes over the last couple years of development. However, I heard about Insomnia just as I was going into another phase of needing to test HTTP requests again. I thought I would try it out. Interface The interface is a lot cleaner than Postman. I found it simple […]

How to sync Apple Music library with Plex

I still like to use Apple Music for ripping my CDs (yes I still prefer CDs as a master medium…) and for listening to my music on Apple devices. However, I would like to use Plex more so I’m not stuck in the Apple walled garden forever. I decided the simple answer for now was […]

Power strips for under standing desk

Recently purchased a pair of 6 outlet power strips to mount under my desk to improve the cable management situation. It was instigated by getting a great Black Friday deal on an APC UPS battery backup. Mounting I mounted them using some 3M command strips that were actually part of another kit I had hanging […]

How to fix electric burners that always stay on

Our front left and back left burner on our GE stove top would only heat at the highest temperature. Didn’t matter if we set it to low, the burner would stay on constantly. Here’s what I did to fix it.

Editing Global State in react-admin

I recently came across a question on StackOverflow of someone who was asking how to change the global state of a resource. I answered the question as it was asked, but then gave an explanation of why that is a bad idea.

Merging MKV video files

I’ve been working on backing up all my DVDs to Plex. I finally found a system that was the right level of precision to satisfy the video nerd in me without going overboard. Merging some files is essential with titles that have lots of short clips.

François Zaninotto at API Platform Conference 2021

I just watch a video by Marmelab founder and CEO François Zaninotto at the API Platform Conference 2021. In it he detailed out some of the great benefits and features inherent in react-admin. I often like watching conference talks like this as they don’t tend to be beginner level topics but cover real world problems that I am dealing with.

Abstracting a FileMaker database

Been working on a project that requires the transformation of data from a FileMaker database into an api. Here are some of the methods we’re using to do this without rewriting everything from the ground up.

New Mac setup after hard drive upgrade

Recently purchased a new Mac and wanted to document the setup process so next time I have a map and don’t have to think up the entire process again.

Multiple Audio Tracks in Chrome Video Player

In order to access multiple audio tracks embedded into an MP4 you must first enable the audioTracks capability (see caniuse for how). When you change audioTracks with Javascript in Chrome, the audio continues but the video pauses for a number of seconds before resuming rendering it out of sync. The workaround is to use the currentTime property […]

Gatsby Powered by WordPress.com

As I’m in the midst of retooling my personal website it may seem that I have devolved into a NoCode blog assembler. This is not the case but instead just the interim step to moving to an exciting new platform. Gatsby can use WordPress as the content manager while using modern technologies for presenting it […]

Amazon Smile – Never Forget to Use Again

I really loved the idea of all my Amazon purchases raising money for a charity I select by donating 0.5% of every dollar I spend. Their Amazon Smile program was perfect for someone like me who orders almost everything on Amazon. For anyone who uses Amazon and hasn’t enrolled in this program, just visit smile.amazon.com […]

Why We Still Need Paper

I’m not sure if it’s just me, but as I’ve attempted to close down the year financially, it seems as if every technology solution I’ve needed has failed. It has prompted me to write this blog on how it is still essential to have your own copies of essential documents. Digital copies are good, but […]

One Setting that Fixed Apple Airplay with my Airport Extreme

AirPlay is one of my favorite features about owning Apple products. To be able to simply send music from my Macbook or iPhone to my stereo has been the Holy Grail of music playback since I ripped my first CD to MP3s. But at some point through a software update of my Airport Extreme, Apple […]

How to clear Netflix watched list for shows and movies

If you’re anything like me, you have TV shows and movies that you watch over and over. I always found it annoying that once you were through a series and wanted to re-watch that it appeared as though every episode was already watched. Well now you can change that. Clear Viewing Activity By clearing the […]

Logos Bible App: Separate Note Document for Every Book

One Notes File for All Highlights?! The highlighting feature of the Logos app on the iPad and mobile devices is a great way to remember passages that you would like to return to for greater study. But I was always frustrated with the fact it would dump them into a single notes file called “Solid Colors.” […]