Hi, I'm Jeremy Richardson

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.Continue reading “Resolution range, not breakpoints”

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 “happyContinue reading “Force ipv4 in Bitbucket pipeline”

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 representsContinue reading “How to win the z-index wars”

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 asContinue reading “I messed up, git me back to what is on origin!”

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. WhatContinue reading “The DPI Myth: Forget DPI and Embrace the Pixel”

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 confusingContinue reading “Exports fields and Webpack 4: It just doesn’t work”

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 ThunderboltContinue reading “miniDV transfer project – adapter party!”

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 seeContinue reading “Optimizing Hot Module Replacement (HMR) in React with Vite: The Importance of One Component Export Per File”

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 VHSContinue reading “MKVToolNix GUI for the win!”

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 hardContinue reading “diff’ing two folders”

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 toContinue reading “LosslessCut – my new favorite video tool”

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 aContinue reading “ffprobe – vob file stream information”

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 recorderContinue reading “Ripping home movies to Plex”

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 noContinue reading “PostCSS and autoprefixer not show source file for warnings”

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 itContinue reading “How to automatically enqueue JavaScript and CSS from webpack”

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 issueContinue reading “NextJS next/dynamic import still somehow using require?”

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 IContinue reading “SWR and testing with Storybook interactions”

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 wasContinue reading “Externalize library bundle dependencies”

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. ItContinue reading “Vite/Rollup preserveModules for libraries”

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 itContinue reading “localhost isn’t always what you expect”

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 someContinue reading “Triggering a Vercel build via cron”

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?Continue reading “Why is my /dist directory missing from my package?”

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 getContinue reading “Outputting multiple CSS files with Vite”

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 makeContinue reading “Parsing a raw WordPress post with blocks”

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 screenshotContinue reading “Change where screenshots are saved on macOS”

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 developContinue reading “Merging back to develop after running semantic-release”

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 requestContinue reading “Using Postman to Access the WordPress.com REST API”

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 contentContinue reading “Setup OAuth with WordPress.com to use as headless CMS”

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 ifContinue reading “How to detect if a site loads React”

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 libraryContinue reading “The saga of learning the exports property in package.json”

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, AIContinue reading “Refactoring is a way of life”

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 onContinue reading “You need to be using conventional commits”

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 toContinue reading “How to take advantage of Envrionment Variables”

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 toContinue reading “Don’t use localStorage for application state”

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 heldContinue reading “What problem does useState in React solve?”

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 srcContinue reading “Access source code of a Node module”

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.tsContinue reading “Where to put Cypress TypeScript definitions?”

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 , butContinue reading “Searching for a full stack developer job online”

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 theContinue reading “npm – install, update, or upgrade?”

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 backupContinue reading “AWS CLI commands from FileMaker server Script and Verify Schedules”

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 existContinue reading “True and false for CloudFormation parameters”

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. NamespaceContinue reading “Namespace for multi-stack 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 toContinue reading “Scripting CloudFormation deployments”

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 becauseContinue reading “My 5 Essential Visual Studio Code Extensions”

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 OurContinue reading “How I listen to music at work”

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 fileContinue reading “Decrypt Private Key File”

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 includeContinue reading “AWS API Gateway decodes url query string”

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.

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 simpleContinue reading “Moving from Postman to Insomnia”

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 wasContinue reading “How to sync Apple Music library with Plex”

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 hangingContinue reading “Power strips for under standing desk”

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.

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.

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.

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.

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.

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.

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 propertyContinue reading “Multiple Audio Tracks in Chrome Video Player”

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 itContinue reading “Gatsby Powered by WordPress.com”

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.comContinue reading “Amazon Smile – Never Forget to Use Again”

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, butContinue reading “Why We Still Need Paper”

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, AppleContinue reading “One Setting that Fixed Apple Airplay with my Airport Extreme”

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 theContinue reading “How to clear Netflix watched list for shows and movies”

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.”Continue reading “Logos Bible App: Separate Note Document for Every Book”