Building A ReactJS Timer Component with Hooks (useState)
Here’s an easy way to build a timer using ReactJS. For this simple app, we will use useEffect and useState hooks to initialize and store our app state. What this timer does? It’s a simple timer which goes from 0 to ∞. You click the Start button to initiate your counter and it goes on […]
Avoid Fail Fast in Promise.all in JavaScript
The default behavior of Promise.all in JavaScript is to break the full promise execution chain when one of the promises fails. As you know, Promise.all takes in an array of promises and then returns a promise when all of the promises resolve successfully. OR it returns throws an error whenever one of the promises reject. […]
How to Resolve JavaScript Promises Sequentially (one by one)
Let’s say you have a set of asynchronous tasks to do. task1() task2() task3() All three tasks do some operation and then return a promise. What these tasks actually do is not really important just now. We can, for now, just assume that they return a Promise at least. We know that if we execute […]
Using a Single onChange Handler for Multiple Inputs in React.js
You will often run into situations where you will need to create lots of useState hooks for managing input states. This particularly happens in the cases where you have a lot of inputs or a multi-step form in ReactJS. It will look something like this. import React, { useState } from “react”; interface AppProps {} const App […]
How to Dockerize the Create React App
Docker is pretty cool. Bundling all your app environment in a single file is just awesome. It saves you a lot of headaches when dealing with dependencies/setup and other environment issues when creating a stable build system for your production app. In this tutorial, we will dockerize a React app built with the famous create-react-app package using […]
Add Cloudflare Worker to a Subdomain on your Website
In this article, we will discuss a simple way for you to map a Cloudflare worker on a subdomain on your website. Let’s say you have a website (example.com) from where you want to call an external API on https://some-api.com/path/to/resource?apikey=xyz. Ordinarily, you will have to call this API on your backend by setting up a dedicated […]
How to Convert Realtime Database Events to Promises in Firebase
The Realtime Database API in Firebase is based on callbacks. This could be fine for you if you are maintaining a codebase which is a few years old. But, if you prefer a Promise, or better yet async await approach, you will be down for a little disappointment. A typical function that you write for retrieving data from […]
Retrying Failed HTTP Requests in Node.js
Relying on 3rd party services to handle some part of your business logic is a common practice. You might use SendGrid to send emails, Google Cloud Bucket Storage API to store some binary blob or Twilio for sending SMS to your users. Although, the three I mentioned above are quite reliable, you might find yourself […]
How to Rotate an Image Infinitely Using Only CSS
Rotating an element in HTML using CSS is pretty simple, really. Add the following CSS to the element that you want to rotate. animation: spin 2s infinite; Now, in the same CSS file, create a @keyframe @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } Combining all this into one block, […]
Create User Profile in Firestore After Authentication in Firebase
When a user signs up for your app, Firebase creates their profile in Firebase Authentication. This is great because most of the hard stuff like OAuth and validation is being handled automatically for you. This, however, has its limitations. Auth doesn’t let you store any custom properties to the user and this is very limited […]