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] =>
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.
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 from…
Former golf instructor turned software engineer. 4 years ago I left my job teaching golf in Beijing to pursue my passion for writing code.