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.
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.
border: 10px solid #ccc;
People ignore design that ignores people.
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.
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…
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… 🏃 🏃🏃🏃🏃
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 😛