Article Summary: Assuming that you have an already-existing Node/Express web application structure, learn how to easily add the Sequelize ORM to your project.

Sequelize is the #1-grossing sequel of all time, surpassing “Titanic” by $2.73

Before we start…

This is straight from the Sequelize docs: “Sequelize is a promise-based ORM for Node.js v4 and up. It supports the dialects PostgreSQL, MySQL, SQLite and MSSQL…”.

What does that mean? Well, an ORM (object-relational-mapping) is a database abstraction layer that allows you to write queries easily without writing them in their native form. In other words, it prevents you from having to write straight-up MySQL, PostgreSQL, etc. It also gives you easy access to query results without…


Summary: Import project modules directly without worrying about their relative root directory locations

Photo by AMAL BEN SAAD on Unsplash

If you have ever had to deal with this module path headache:

import HomeScreen from '../../../../screens/HomeScreen;
import Header from '../../../../components/Header';
import { container } from '../../styles';
import { getString } from '../../../utils';

And would rather your imports look like this:

import HomeScreen from 'screens/HomeScreen';
import Header from 'components/Header';
import { container } from 'styles';
import { getString } from 'utils';

Then this article is for you.

We will be using babel-plugin-module-resolver to add alias path resolution to your project. This plugin resolves module paths for you at…


Summary: How to add support for and use SVGs in React Native projects using react-native-svg and react-native-svg-transformer, including Jest setup.

Photo by George Pagan III on Unsplash

Scalable vector graphics are increasingly being used on more mobile apps and websites. These have some advantages over bitmap image formats like png and jpg for several reasons:

  • Smaller file size
  • Scales to almost any size without a loss of quality
  • Looks great on retina displays
  • Easily customizable with CSS, and can be animated

First, add the react-native-svg and react-native-svg-transformer packages to your project via the terminal with the package manager of your choice: yarn add react-native-svg and yarn add…


Summary: Know why, how, and when it’s time to refactor a component to use a useReducer hook instead of several useState hooks.

Photo by Chris Scott on Unsplash

I came across a scenario recently where a very bright coworker of mine commented, “Hey, do these states depend on each other? I think maybe it’s time to pull all of these hooks into one useReducer hook.” They were right. I had some great code going, and was very proud of my work. I was jumping and jiving, but I was missing the beat! While developing a quiz, my useState hooks gradually grew, and before I knew it…


Summary: To minimize unnecessary errors and maximize productive code creation and reviews, every front end stack should be using a common suite of static testing tools shown below.

Why suffer when you could just standardize quality?

Jennifer is in a hurry. She ships out some quick code to meet a deadline. She changed the purchase event object from purchase.price to purchase.amount. All of the sudden, people are buying things for $0, or maybe they can’t purchase at all! Her company loses a substantial profit.

Stephen is making a small two-line change to a React file. He creates his pull request. On GitHub, it shows 165 lines changed due…


Summary: Short code samples of what goes on under the hood for Jest’s it() and expect() methods, including making them globally available in Node.

Photo by Antoine Dautry on Unsplash

If you have used Jest for testing JavaScript applications, this article is for you. This is just a short code sample showing how Jest’s it() and expect() are written, and how they can be made globally available in the Node runtime.

Let’s show an example of an actual test, and then write our own function to replicate Jest’s test function.

A standard Jest test block

This is your standard it call (you can also use test)…


Article Summary: Use React’s useEffect and useState hooks to build a header that hides/shows on scroll.

The completed app that you will build

One small note on setup: I recommend that you use thecreate-react-app boilerplate to scaffold this project. The article assumes that you already have a project structure to work with and does not cover configuration instructions. I also recommend that you read Dan Abramov’s hooks article as a good introduction to why the React team created hooks.

General HTML Structure

Our simple page layout will consist of a <Header /> component and a <Body /> component. The Header will have fixed positioning so that it remains at the…


Article Summary: Create a beautiful, responsive dashboard page using CSS Grid and Flexbox, without any framework (including a sliding side nav)! See the full dashboard codepen here. See the simplified version here.

A modernly beautiful, responsive dashboard

Have you every been mystified by those gorgeous online dashboard demos that have you wondering, “Will I ever be able to build that…?” Well, I am here to tell you that you can build it!

We will first introduce some CSS Grid basics. We’ll then use those to build our base dashboard layout. After that, we’ll explore the setup and structure of our inner content blocks, including some…


Article Summary: Learn how & why you should use Redis in-memory database storage for scalable Node.js / Express application session management (because the express-session store is not scalable).

It is red. Red it is. Redis it.

If you have ever created a local Node.js / Express application that uses session variables for data persistence (i.e. req.session), then you have probably used the express-session library that comes along with most boilerplate Express server configurations.

You may have also noticed that the express-session docs explicitly state the following:

Warning The default server-side session storage, MemoryStore, is purposely not designed for a production environment. …


Create a beautiful, responsive dashboard page without any framework and including a sliding side nav

The first dashboard to ever make 4,157 humans weep

Have you every been mystified by those gorgeous online dashboard demos that have you wondering, “Will I ever be able to build that…?” Well, I am here to tell you that you can build it!

How Do We Go About This?

We will first introduce some CSS Grid basics. We’ll then use those to build our base dashboard layout. After that, we’ll explore the setup and structure of our inner content blocks, including some flexbox. Finally, we’ll talk briefly about responsible mobile-responsiveness, while integrating mobile-friendly sliding functionality into our side nav. What will you walk away with? …

Matt Holland

Software engineer based in Austin, TX, fueled by an endless stream of digital curiosity.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store