Image for post
Image for post
How to build a mailing list with Ruby on Rails and Mailchimp

Ever needed to collect simple form data from users on a landing page and have a nice UI to show that list on? MailChimp is for you! And here’s how to setup a MailChimp mailing list with Ruby on Rails!

What you’ll need

Initial Setup — Ruby on Rails

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

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.


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() …

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

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

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.

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!

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…


Adebola Adeniran

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

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