Recently I’ve been making a big effort to get away from my lazy tendencies when it comes to writing commit messages.
For the past 2 years, I have been working solo on a large frontend application. My commit messages have gotten pretty bad in that time. It was easy for me to dismiss the importance of them in the project because nobody is reviewing the work.
Some of my recent gems include:
These messages are awful, they don’t convey any useful information about what I worked on. After noticing enough of…
An important part of building component libraries with React is making sure they are lightweight and optimized.
For example, I use Lodash a lot in my applications. I only use a handful of the functions Lodash has to offer. When I bundle my application for a production release, I don’t want the full 1.14 Mb library being pulled in.
Tree shaking, or “dead code removal”, is a technique that allows you to remove any unused code from a library.
In order to make tree shaking work, a few things need to be in place.
Redirecting users after login is a common feature in web applications. Normally it shows up when a user's session has expired and they need to login in again before seeing the page they originally requested.
This experience is expected by users but needs to be specifically implemented by the developer.
In this article, I’ll be going over how I recently implemented this feature.
Test cases can be difficult to write when dealing with forms. I have found this especially difficult with my preferred UI library: Material UI. I love the components, design, and its seamless use with React, but when it comes to testing it can be difficult.
Below I’m going to show an example of an account delete request form I recently built and how I wrote my test cases.
The form itself was simple. A text field, checkbox, and submit button.
When the form loads the text field is empty and the…
I’ve been using anti-corruption layers in my React + Redux apps for a while now. It’s a helpful design pattern when the asynchronous data you’re receiving is difficult to work with or needs some sanitation before you let it into your application state.
An Anti-Corruption-Layer is a layer between different subsystems that don’t share the same semantics.
For me, these layers are functions that enhance or transform data just before it enters my global state, or just after it leaves.
I’ll be demonstrating some simple examples of how I have used anti-corruption-layers to make global state management a bit easier…
Before I became a web developer, I was a golf instructor.
My golf career spanned 5 years, took me up and down the east coast of the US and to Beijing China. It was fun for a while, but golf is best left a hobby for me.
After golf instruction, I wanted to become a web developer. Coding was always interesting to me so I gave it a shot. I’ve been a full stack developer for the past 4 years and the more code I write, the more I enjoy it.
After 5 years in the golf industry and 4…
Input fields that wait for a user to finish typing before performing an action are common feature in web applications. They can be tricky to get working so I wanted to show how I incorporated a wait timer into my input fields.
In my case, I needed a field that waits for users to finish typing in a few places. I already had an input component made with some custom styling, so I decided to extend the wait logic as a customizable feature.
For my example, Im using React, Typescript and Material UI.
Below is the complete example, I’ll step…
I wanted to share a design pattern I use to manage what certain users can or cannot see inside the React applications I build.
You might find this useful if your application needs to manage what users can see based on some setting in their account.
The example I’m going to show has several different components working together:
To start, let’s say you have a simple component with some text that you want to show or hide based on a users…
In my previous post, I showed a simple react hook that makes a specific api call. This time, I want to show how to turn that specific hook into a better, more reusable version.
Im going to use a very powerful feature of typescript called generics.
To start off, let’s see our first iteration of the api hook again.
This hook works okay, but if we wanted to make a similar api call to another endpoint, we would have to create another hook that would repeat most of what we have.
A more generic version of this hook could…
I recently started building my own hooks in react and I wanted to share one that found particularly useful.
Making api calls is something I do frequently, so one of the first hooks I set out to make was a simple hook that makes an api call, returns data, or an error message if something goes wrong.
Here is the full hook file, I’ll spend the rest of the article going through it pice by piece.
The first line of the hook is one of the most important
export default (): [(id: string) => void, User, string] =>
Former golf instructor turned software engineer. 4 years ago I left my job teaching golf in Beijing to pursue my passion for writing code.