Skip to main content

Posts

2022

Porting a Create React App application to Vite Pt. 2: Unit Testing
·2376 words·12 mins
Project Architecture New Tech configuration testing NodeJS
For unit tests we will still be using the excellent Testing Library, but we will swap Vitest in place of Jest. Vitest promises Jest compatibility without having to duplicate a bunch of configuration to get Jest to function correctly with a Vite project.
Porting a Create React App application to Vite Pt. 1: Base Project
·1868 words·9 mins
Project Architecture New Tech configuration NodeJS
As of this writing, Vite promises a faster and more performant developer experience over the tried-and-true Create React App template. This is my experience porting one of my vanilla projects to Vite.
Redux Powered Notification Pipeline Pt. 2: Toasts
·1875 words·9 mins
Development User Experience TypeScript Redux UX
Alerts tend to be for sticky messages that I want to ensure the user must actively engage and dismiss. Toasts, on the other hand, are used for quick, something-happened style messages - the information is there for the user to pay attention to, or not, as the message will disappear on its own in a few seconds.
Redux Powered Notification Pipeline Pt. 1: Alerts
·2764 words·13 mins
Development User Experience TypeScript Redux UX
Timely and relevant feedback from application events is critical to maintaining user engagement. Two standard ways of delivering immediate event feedback are through the use of alerts and toast messages. To avoid a lot of boilerplate markup popping up all over the project I wanted to make it as simple as just dispatching an action such as “dispatch(errorAlert('your call cannot be completed as dialed');” and have the alert appear on the screen.
Switching to Fetch API
·932 words·5 mins
Development TypeScript Optimization API Native API Fetch Axios
I have finally made the decision to let go of one of my favorite NPM packages, Axios, in favor of modern browsers' Fetch API. I want to be clear up front - I find nothing wrong with Axios, it is an extremely high quality package and a natural progression having used Angular’s http service that it was originally based upon.
TypeScript: Organization with `@` Directories
·1319 words·7 mins
Project Architecture TypeScript Opinion
A set of specialty folders I utilize in TypeScript projects to better organize language specific concepts.
PSA: Cleaning Up package.json
·642 words·4 mins
Development Project Architecture configuration NodeJS
I have a minor peeve, maybe it’s just me, but I really dislike random chunks of configuration cluttering up my package.json file. Project generators offered by the likes of Nest and Create React App still leverage the classic pattern of embedding third party configuration values in the package.
Hi
·194 words·1 min
Irrelevant Drivel greetings
Just wanted to say “Hi” and “Thank you” for stopping by. If you are curious I am planning this site as more of place for me to keep notes on new things I learn or figure out in a more searchable format than a bunch of random projects on one of my dev boxes.