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.

How to position an element at the end of a flexbox row

Flexbox rows may not work quite the way you think. If you want to have a row of elements, and you want to align one element at the end of the row, many CSS rules won’t work. Floats do not apply to elements using flex, so you can’t use a float:right like you would inside […]

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 […]

No More X-Frame-Options Errors: How to Use Multiple URLs in A Rails Shopify App

If you are trying to build a Shopify app in Ruby on Rails, you may run into an issue when you try to include a link to another path in the application. Open up your dev tools and you’ll see a message like this: Refused to display ‘https://96cbc4ff.ngrok.io/sync’ in a frame because it set ‘X-Frame-Options’ […]

A Workaround for CSV Upload Limits

Sometimes, applications have a limit on how many records you can import at once. Sometimes massive imports flag for a manual check, adding a roadblock to your work. Want to split one CSV into many quickly and avoid those pesky upload limits? Here’s a short bash script I use to split .csv files into multiple files while maintaining the header […]

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]

A Real World Metaprogramming Case Study

Metaprogramming is one of the unique features of Ruby. Metaprogramming is an interesting concept, and a tool can save a lot of time. It can also be confusing for developers and difficult to maintain if not used properly. Here is an example of how I used Metaprogramming to solve a real-world problem and save a […]

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.

How to Test Controller Concerns in Rails 4

Concerns are a new feature that was added in Rails 4. They allow to clean up the code in your models and controllers. They also allow you to share functionality between models or controllers. However, they can be a bit tricky to test in isolation. In this article, I want to show how you can […]

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 […]

My Eureka Moment With Regular Expressions

Regular expressions are a tough cookie for most programmers to figure out. They are terrifying to look at with their daunting syntax. There is also nothing quite like regular expressions anywhere in programming. Programmers may learn to hack together basic regex expressions, or how to cut and paste some they find online for their needs, […]