This article is available in video format:

In this article, we’ll be building a progress bar component in ReactJS and styled-components.

What will we be building today?

The <ProgressBar /> component should do the following:

  1. Indicates the progress visually to the user via the colored bar.
  2. Shows the percentage numerically as a %
  3. Allow developers to configure the width of the bar and the color of the progress.

We’ll be building this component with semantic markup, using the Progress HTML element provided by Browsers.

The Progress HTML element

While we can build this component out using <div> tags, a more semantic tag that can be used here is the…


A slightly different approach

Webpack-dev-server is an excellent utility for quickly building client-side applications. With hot module replacement out of the box, development becomes are breeze. ⚡️

But things are not always 🌈 and 🦄 though…

Those using webpack-dev-server usually fall into two categories:

  1. Developers building client-only applications that don’t interact with APIs exposed by a backend server.
  2. Developers building client-side apps that speak to APIs exposed by an external server. By external, I mean the server exists on another domain/origin.

But there is a third category and it’s here where problems start showing themselves —

What if you want the server serving your…


Do something with your webpage when your user switches tabs

The Page Visibility API provides us a means to know whether the user of our webpage is actively viewing the page or has moved the page to the background, by either switching tabs or minimizing the window.

MDN has a really good explanation for the API,

The Page Visibility API lets you know when a webpage is visible or in focus. With tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user. …


Using react-input-trigger

Most editors and writing apps, including Medium here, provide some means to reference other users on their platform. A common pattern that a lot of applications use (Github, Slack, Facebook, Twitter, Medium, etc) is suggesting users to the writer whenever the writer starts typing with the at symbol — @.

This article is a fairly detailed guide on building a Github-style user mentions in React, using just a textarea, and react-input-trigger.


Web applications today rely heavily on dropdown menus to de-clutter the user interface — by stowing away additional non-critical options inside menus that you can trigger by hovering over or by clicking on an icon.

This article is a quick guide on building dropdown menus like 👆.

We’ll be building a menu with the following interactions :-

  1. If you click on the icon, the menu appears.
  2. Clicking on anything inside the menu does not close the menu.
  3. Clicking anywhere outside the menu will close the menu.

The setup

The first thing we need is the component that houses this menu.

We…


Full Disclosure: Testing is something I have just begun delving into. This is more of a TIL post; something that I feel might be useful to someone looking for answers to what I had run into. 😄

For some context, I was trying to test my express routes using Jest when I ran into an obscure problem (at least, to me 😛) with EADDRINUSE.

To highlight what the issue is, let’s start off with a simple server file:

This server has two routes /ping and /status. The /ping route returns a simple text string “Pong!”, …


Change the way you interact with Objects

Proxies are Middleware for Javascript Objects

… or at least that’s sort of the tl;dr version for it.

Proxies were introduced in ES6 to allow you to provide custom functionality to basic operations that can be performed on an Object. For example, get is a basic Object operation.

const obj = {
val: 10
};
console.log(obj.val);

Here, the console.log() statement performs a get operation on the object obj to get the value of the key val.

Another basic Object operation is set.

const obj = {
val: 10
};
obj.val2 = 20;

Here, a set operation is performed to set…


Handle your users’ online and offline status

For those who have had to build real-time applications on a tight schedule, Firebase has definitely been in your radar. It is easily the best real-time-database-as-a-service (RTDbaaS? 😛) that I’ve used. And now with the introduction of Firestore, Firebase’s new database offering, we have access to all the real-time goodness of the older Firebase Realtime database, as well as a more NoSQL-esque syntax!

However, while building a messaging application using Firestore as the backend, I found handling a user’s online/offline status (also known as a User Presence system) rather challenging.

This guide is a quick run-through of the solution that…


A quick-start guide to Redux’s underused feature!

There is no denying the impact that Redux has had on the React (and even Angular) landscape. Over the years, it has cemented its position as one of the most popular state management libraries.

That being said, an aspect of Redux that is sometimes underused is its support for middleware.

Now, before we jump into what a middleware is and how we can write one for redux, let’s have a quick refresher! 🛀🏻

A quick overview of Redux

Redux has an opinionated set of principles, three in fact, that serve as the foundation for the way state is managed by it.

  • Single Source of Truth


Stop your dev teams from losing knowledge

We’ve all been through this…

You’ve joined a new organisation. You’ve been given your first task. You sift through this alien codebase searching for the section that is relevant to your task … and then you see some code that seems off/hack-y. 🤔

Why was it done this way?

You ask yourself why it was done the way it was. You do a git blame and find the commit that added this code. You see a link to the Pull Request in the commit message and you think you’ve lucked out. …

Abinav Seelan

UI Engineer @Flipkart • https://abinavseelan.com 🙃

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