How to Build an Indeterminate Checkbox in React

Fun fact: Did you know that HTML checkboxes have three built-in states, not just two? In addition to the checked state, there is also an indeterminate state.

Roll your Own Redux With useContext & useReducer

“Most projects aren’t complex enough to require Redux.” I hear this refrain from the React community often. I’m not here to debate how valid it is. What I do know is that there are situations where you do want to share state between multiple components, and you may not want to bring Redux into your […]

Add Hooks to Class Components With Higher-Order Components

If you are using class components, but want to use hooks, you can’t do so directly. One strategy for adding them is to use adapter components. Another strategy is to use higher-order components to pass along data from hooks as props. Example: Creating a MessageStore Here’s our sample custom hook: We want to build a […]

Redux Now Has Hooks. A Before and After Comparison

Today the react-redux team released version 7.1.0, which adds hooks to react-redux! Here’s a quick comparison of how it could change how you write components. First, A Brief Overview of The New Toys useSelector: Pass in a function that takes the state as an argument and returns a value. Used to get a single value […]

How to Use useEffect (and other hooks) in Class Components

Learn how to use useEffect and other hooks inside of class based components.

Test Clicks On Connected Components In Under 10 Lines of Code

Here’s a fairly benign component, that can give developers pause when its time to write unit tests for your components:  There is only thing worth testing here: That when we click the button, the function we passed in as a prop gets called. That prop function could be a complex chain of actions & API […]

Write Redux Reducer Tests Fast

Redux may come with a lot of boilerplate, patterns, and libraries, but at its core it’s simple.  A current state and an action go in, new state comes out. Just because the code is simple doesn’t mean it shouldn’t be tested. If you are using Redux in your application, that means your store is a […]

How to Test Async Redux Thunks

In a previous post, you learned how to make HTTP requests inside your redux application. We use redux-thunk, a library that enables you to dispatch functions in addition to flux-style actions. With it, you can dispatch functions to handle more complex cases such as asynchronous operations. But then how do you test them? Testing can be more […]

How to Perform HTTP Requests with React & Redux

Async is one of the toughest problems in front-end development. It’s one of the reasons Redux and React were created. React all started when Facebook had what seemed like a trivial problem: Sometimes, the “unread messages” count in the header and the footer of the page would be different. This Skinner box is so important […]

Which version of JavaScript is “Vanilla JavaScript”?

There are so many different versions of JavaScript floating around, and browser support is always changing. How do you know which features you can use without transpiling or some kind of build step? Correct Answer: ES6 (a.k.a. ECMAS 2015) is supported in all major browsers. In April of 2017, all major browsers added support for […]

Pure Array Modifications: Plain JavaScript vs. Modern JavaScript

When working with Redux or other state managers, you want to keep your code pure. That means no side effects. Instead of updating an array instead you want to return a new copy of the array with the changes applied. This is tricky with JavaScript arrays since it isn’t clear which native functions change the […]

How to Update Content Based on URL params; No Libraries Required

If you’re a frequent user of Netflix or Amazon, then you’re familiar with how they use what they know about you to tailor their platform to your tastes. Personalization is an effective marketing technique. It makes you a more engaged customer, and more likely to get out your wallet. But you don’t have a team of […]

How to Make an AJAX Request Without Using Frameworks or Libraries

There are a lot of JavaScript frameworks out there these days. It makes it harder to choose a front-end development workflow when starting a new project and write code that’s portable between different projects. Also, using a complex framework to solve a simple problem adds unneeded complexity and risk to a project, which makes getting that […]

Building Chrome Extensions: A 15-minute Overview [Video]

How to Remove the Hash From Angular Routes in Rails

When building client-side applications, your URLs are prepended with a hash. Removing this can make your routes more user-friendly and more easily crawled by search engines. Here is how you can remove the hash from your routes in an Angular app built on Ruby on Rails, and use the standard URL structure.

Building Reliable Web Applications

These are notes and links from a presentation I gave to the Developers of Athens on testing client-side applications.

Testing AngularJS With Karma + Jasmine

In a previous article about Yeoman, AngularJS, and Foundation, I talked about setting up a complete front-end scaffold with Yeoman, AngularJS, and Foundation. Now I want to look at how to test the AngularJS part of your application.

Yeoman + AngularJS + Foundation: A Modern Front End Setup

With the combination of modern browsers and mobile devices having support for HTML5, CSS3, and new JavaScript APIs, front end development has become a lot more complicated, but also exciting. There has been an explosion of tools as of late, and it can be daunting to know where to get started. Here are the tools […]

AngularJS: an Overview

AngularJS is a JavaScript framework made by Google for building complex client-side applications. Angular’s killer feature is ‘directives’ that allow you to extend HTML by creating tags and attributes. Angular projects have a somewhat different structure than other JavaScript MVC frameworks, but it can be highly modular and easy to maintain once you understand the […]