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:

1. React for the UI component library
2. Typescript for type safety
3. Redux for global state management
4. Bitmask for users permissions

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] =>

the…

Recently I’ve been working on upgrading the security of my web applications. One of the easiest security features to add is a robust Content-Security-Policy.

According to MDN:

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. Configuring Content Security Policy involves adding the Content-Security-Policy HTTP header to a web page and giving it values to control what resources the user agent is allowed to load for that page. For example, a page that uploads and displays images could allow images…