What is ENV 🤔

env file to store your sensitive credentials like API keys.
Environment variables can also help you to store your API link in one location so that you don’t have to change the link in each file manually.

Do you have to install any plugin to use ENV file 🙄

No, A React frontend connected to a Node backend is a rock-solid combination for any application you want to build. So you can create and use .env file without installing any plugins.

Usually, you create one .env file which triggers for local, integration and production.

What if you want to create different Keys for integration and production

If you have to use different keys for integration and production, in that case you have to customise…

Object Equality in JavaScript

It’s really easy to compare number or strings but did you try comparing two objects 🤔

Even if two object has same key and value pair it will return false.


As you can see above example, both name and fullName are identical. Yet, the object are not equal either with == or ===.

1️⃣ Objects has same instance

regular vs arrow function

Define your functions in many ways.

One way is using function keyword:

You can call both function declaration and expression as Normal/Regular Function

Arrow function is introduced in ES6 and also known as fat arrow function.

As you see both functions work same by above example. Now the question comes why do we need regular or arrow function.

Let’s discuss below 👇

1️. Syntax

We can write normal and arrow…

array flatmap

FlatMap is a single method which can be usable for flat and map methods.

As you know flat(), flattening the 1-level deep and map() to loop into an array.

If we include both, we called flatMap() 😉

So, instead if calling two methods flat() and map(), you can use single method called flatMap().

How flatMap() works?

📝 FlatMap() always…

Using the native requestAnimationFrame method we can make our browser repeat something very quickly forever. It calls itself to paint the next frame.

📝 Note: Your callback routine must itself call requestAnimationFrame() again if you want to animate another frame at the next repaint. requestAnimationFrame() is 1 shot.

requestAnimationFrame takes one argument, only callback.


callback: The function to call when it’s time to update your animation for the next repaint.

Animations with requestAnimationFrame are non-blocking, which means if you make subsequent calls to requestAnimationFrame, the resulting animations will all occur at same time.

The goal is 60 frame…

You will learn the basics of JavaScript by creating the following ten games:

1️. CheckiO

public and private class fields in JavaScript

In JavaScript, there are two types of object fields (properties and methods):

Accessible from anywhere. They comprise the external interface. Until now we were only using public properties and methods.

Accessible only from inside the class. These are for the internal interface.

Class fields are public by default, but private class members can be created by using a hash # prefix.

Class Field Syntax

  • You can define new private members
  • You will get error if you break the access rule
  • It has public and private static fields, which allow you to declare class member that can be accessed without creating instance of the…


Using CSS, links can be styled in many different ways.

We can change the style of CSS link as:

  1. :hover
  2. :active
  3. :visited
  4. :focus
  5. :focus-within
  6. :focus-visible

1. :hover

The :hover CSS pseudo-class triggered when the user hovers over an element with the cursor.

If you are using :link, :visited, :active. Remember to add hover after link and visited according to LVHA-order: :link — :visited — :hover — :active.

2. :active

The :active CSS pseudo-class starts when the user presses down the primary mouse button.

The :active pseudo-class is commonly used on <a> and <button> elements.

3. :visited

A web page consists of different sections and components, and we make them responsive by using CSS media queries. There is nothing wrong with that, but it has limitations.

To use container queries we have to tell the container (the parent of the element we want to apply the query to) that we care about its dimensions, we do this with the new contain property.

CSS Containment 🔥

1. none

Indicates the element renders as normal, with…

Suprabha Supi

Frontend Developer sharing JS, HTML, CSS, GoLang🔥 Find all on blog.suprabha.me💛

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