Loaders are quite common web components that we see on the web. It presents a really decent UX and make the client aware of something being loaded. In this blog we will see how to create some of the very basic loading animations in pure CSS.

- Ring Loader

Most of the animations are based on two properties: borders and keyframes.


Create a square box, with a different border-color on any one of the sides.

.loader-1 {
height: 100px;
width: 100px;
border: 10px solid #ccc;
border-right-color: #673AB7;


Photo by Jean van der Meulen from Pexels

People ignore design that ignores people.

Today we are going to discuss the best React Component Libraries that can be used in 2019. React is no doubt one of the best front-end javascript libraries. The simplicity of its use and component-based architecture adds beauty to it.
And because of that, a lot of React components libraries have come into the picture that can provide an ultimate UI/UX with no effort at all. Let’s dive into it.


React components for faster and easier web development. Build your own design system, or start with Material Design.

Material-UI is a set rich React…

Code Splitting in React: Load your bundles blazingly fast

Photo by Lukas from Pexels

1. Basics of React and it’s ecosystem like react-router and webpack.
2. ESNext syntax

What happens when we run npm run build in a react app?
It initiates a process called bundling which is done by webpack or browserify like tool.
Bundling is the process of following imported files and merging them into a single file: a “bundle”. This bundle can then be included on a webpage to load an entire app at once.

Problem 1: Now when the codebase expands, the bundle size goes on increasing and in some cases it may go beyond 10MBs. The problem with…

Courtesy: https://www.pexels.com/@wdnet

Before we begin this, please assume the following:
We will discuss about Authorization and not Authentication (Authorization is not Authentication).
- Our React App is storing Logged-In user’s Role in localStorage(you can put it anywhere in the browser).

Let’s build the basement first… 🏃 🏃🏃🏃🏃

  1. HOC (Higher-Order Component):
    The word sounds so cool 🆒 but it is little bit confusing as it’s not exactly a component but a function. ️

Credits: pexels.com

I got headache and all kinds of pain while following Google’s documentation about Firebase.
We had a requirement of deploying our static website pages anywhere but get it served over HTTPS. And like every smart developer 😝 I started searching for easiest way. We came across Firebase which automatically serves the websites over HTTPS. The joy was heavenly but… It didn’t last long. We followed their doc and we were stuck in the midway.
One thing I missed saying: we had multiple web-apps in the same codebase which added to our grief.

But I am a smart developer 😛

Akhil Gautam

I am a fullStack developer building things at BigBinary using Ruby on Rails and React.js .

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