Image for post
Image for post
Using react-cookie in Nextjs

With LocalStorage

There are a number of ways to persist users in a React or Single Page Application. …


Image for post
Image for post
loading bar on github route change

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 …

Image for post
Image for post

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. …


Image for post
Image for post
Kudabank

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 :). …


Image for post
Image for post
preloading, prefetching by Adebola Adeniran

Background

Image for post
Image for post
The preload effect

I recently noticed that when I search for certain articles on google and click the search result, the page shows up instantly. I was curious as to how it worked and started to do some digging.

The GIF above shows the preloading effect instantly loading whichwifi — a review app i launched recently. If you click this link, it should open up the whichwifi page without “loading” it.

The tech

The technique used in showing pages immediately a user clicks on the link is not entirely new. It’s a technique called prefetching/preloading. I’ll explain the difference in a bit. Stick with me.

The gist is, when a link(s) shows up on a web page, the browser immediately starts to fetch resources for the linked pages within that domain so that when a user clicks the link, they’re shown the page instantly. …


How to use Redux Toolkit with TypeScript

Image for post
Image for post
Photo by Tracy Adams on Unsplash

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. …


Image for post
Image for post
How to copy text from multiple input fields using useRef()

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. …


Image for post
Image for post

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. …


Image for post
Image for post

If you’re only here for the code, scroll all the way to the end to see the github gist.

About Netlify Forms

Netlify Provides a way for us to add forms to our sites out of the box. As long as your site is deployed with Netlify, you can easily add stateful forms to your static site.

The free tier comes with 100 FREE submissions per month and allows users upload files up to 10mb per month.

In your new Gatsby project, create a new React component, let’s call ours Form.js .

Create your own Netlify Form

Import React and the useState hook.

import React, { useState } from…

Test coverage

To check your test coverage, use simplecov .
Add it to your gemfile then run bundle install

gem 'simplecov', require: false, group: :test

At the very top of your spec/spec_helper.rb file, add

require 'simplecov'
SimpleCov.start

Run bundle exec rspec as usual to see test coverage.

Setup

At the top of each test file, add

require ‘rails_helper`

Test models

Describe a model test. For example, a user model

RSpec.describe User, type: :model do
describe '# when created user is valid' do
end
end

Create a model instance example

let(:user) { User.create(name: 'test_user', email: 'test@test.com', password: 'password', password_confirmation: 'password') }

Create an it block for each test. …

About

Adebola Adeniran

Full-stack Engineer. Rails/Node.js/React. I love plantain chips! Reach me at Adebola.dev.

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