With LocalStorage

There are a number of ways to persist users in a React or Single Page Application. A lot of times, devs generally use localStorage to store user data and load the data from there when required. While this approach works, it’s not the most effective way as it leaves users vulnerable to attacks. Using cookies is a little safer although it’s still not the safest option. Personally, I prefer a mixture of using cookies and JWT’s(JSON Web tokens) with expiry to persist user session and to force a user to re-login when their session expires. …

Setting Up

I spent days trying to find the right thing to google on how to setup the blue loading bar that shows at the top of your screen when navigating between routes in NextJS. It’s important to have this loading indicator to signify that a route change is occuring to avoid users assuming that the application has frozen.

This article assumes that you already have NextJS setup. To get started, we need to install the `nprogress` library.

Run

npm install nprogress

In \_app.js

Inside pages/_app.js, add the following piece of code.

import NProgress from "nprogress"
import Head from "next/head"
import Router from "next/router"Router.onRouteChangeStart = url => {
  NProgress.start() …

I recently moved into a new apartment and ran into so many issues getting the new EDMI prepaid meter box from Ikeja electric to work. There were no instructions on any of the items provided and I wondered how non-technical people were able to overcome the technical hurdle required in setting things up. After days of researching and Googling, I finally figured it all out.

The activation guide on the Ikeja electric website were also of no help and their customer service numbers kept telling me I had to wait 152 seconds to speak to a rep every single time I called —and each time, I never got through. …

Disclaimer — This post isn’t sponsored by Kuda bank or any of their affiliates.

I recently made the switch to Kudabank — the bank of the free (I really love that tagline) for my daily transactions and I dare say, they haven’t let me down. Yet.

After frustrating experiences with Diamond/Access bank where sometimes the app isn’t working or my card isn’t paying or transfers fail, I decided to try out the new kid on the block and so far it has been an experience wey dey sweet bodi — not when I’m doing transfers sha only when I get alerts :). …

Background

Out with the old, in with the new

A while back, when I started picking up Redux for the first time, I couldn’t believe how much code I needed to write to get anything to work. Frankly speaking, it scared me. And even though writing all the setup code from memory can make you feel pretty darn smart, after some time, it gets boring and you want to work with something that’s more intuitive and straightforward.

Redux can also be difficult for beginners to pick up and it certainly was difficult for me, well, until I discovered Redux Toolkit. …

In this article, you’ll also learn how to copy text inside multiple input fields in React using useRef.

I needed to create multiple readonly input fields in a React component that a user can then click a button to select copy the text inside that input field. It took me a couple of hours to figure it out.

After reading several stackoverflow articles, here’s exactly how you do it.

1. First, import useRef()

import React, { useRef, useState, useEffect } from "react";

2. Declare your Refs. The default value should be an array.

let usernameRefs = useRef([]);

3. Dynamically create as many refs as you want. Assume we will have 4 input elements on the page — so we use an array with a length of 4. …

Tailwindcss compiles to quite a large file size. In production, we do not need all the classes tailwind offers us and we would love to strip those classes out when our Application is in production.

This guide will show you how to use purgecss to strip out unused tailwind classes in production.

If you have never used tailwindcss, here’s how to set it up with Create-react-app.

Let’s start!

1. Once you’ve followed all the configurations above, install purgecss using

yarn add @fullhuman/postcss-purgecss

2. Update your package.json. This allows the app know when it’s in production or development by adding the line below. …