DEV Community: Vipin Chandra

Reactjs Tutorial : Infinite scrolling with Intersection Observer.

Vipin Chandra — Wed, 04 Dec 2024 17:55:45 +0000

What is infinite scrolling and need for it ?

Scrolling is a user action of moving a portion of content on webpage horizontally or vertically (in most of the cases).

Like as you will do while reading this article.

By Infinite it means you have new content automatically loads up as you scroll down the webpage.

Well alright , but why anyone should implement it ?

Discoverability

Lets imagine its a black Friday sale on your fav e-commerce store.

You found couple of products on the explore page but as you scroll to the bottom of webpage instead of more products you found a button which takes you to the next list of products.

You will be able to get to see the new products (but only in case if you notice that action button).

Infinite Scrolling just helps users find more content they might have missed otherwise.

Implementation

To implement infinite scrolling , we need to keep a check on if the user has reached the bottom of the page or the container.

But to detect the position of scroll is very expensive and its position values being unreliable due to different browser and devices.

So one way is to watch the last content (element) of the page and its intersection point with the viewport or a container.

How do we find the intersection point ?

Intersection Observer

Its a Web API which allows to observe the element at the end of the content or list.

When this element ("sentinel") becomes visible (intersects with the viewport , it triggers a callback function.

Through this function we can fetch more data and load it in the webpage.

This whole observation happens Asynchronously , which minimize the impact on main thread.

To implement Intersection Observer in Reactjs we will take an example of Social feed , where we will do infinite scrolling on post listing.

Take a look at this component and you can follow the breakdown of each bits and pieces just below this.

import { useEffect, useRef, useState } from "react";

interface IIntersectionObserverProps {}

const allItems = [
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
];

const IntersectionObserverImplement: React.FunctionComponent<
  IIntersectionObserverProps
> = (props) => {
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // Initialize as an empty array
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [listItems, setListItems] = useState(allItems);

  useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe the last card only
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

  return (
    <div className="container" ref={containerRef}>
      {listItems.map((eachItem, index) => (
        <div
          className="card"
          ref={(el) => (cardRefs.current[index] = el)} // Assign refs correctly
          key={index}
        >
          <h5>Post {index}</h5>
          <img width={"200"} height={"150"} src={eachItem} />
        </div>
      ))}
    </div>
  );
};

export default IntersectionObserverImplement;

The goal is to detect when the last post in the feed list (called the sentinel) intersects with the viewport. Once this happens, more post is loaded and displayed.

a. Initializing State and Refs

const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // For storing references to each card
const containerRef = useRef<HTMLDivElement | null>(null); // Reference to the scrollable container
const [listItems, setListItems] = useState(allItems); // State to hold the list of items

cardRefs An array to keep track of the DOM elements representing cards in the list.

containerRef Refers to the scrollable container.

listItems Holds the array of currently visible items on the page.

b. Rendering the List and Assigning Refs

return (
  <div className="container" ref={containerRef}>
    {listItems.map((eachItem, index) => (
      <div
        className="card"
        ref={(el) => (cardRefs.current[index] = el)} // Assign a ref to each card
        key={index}
      >
        <h5>Post {index}</h5>
        <img width={"200"} height={"150"} src={eachItem} />
      </div>
    ))}
  </div>
);

containerRef Marks the container where scrolling will happen.

cardRefs Assigns each card in the list a reference. This ensures we can tell the observer which element to monitor (e.g., the last card).

Maps over listItems to render each item in the list.
Each div is styled as a card and has a unique key for React.

c. Observing the last post (item).

 useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe each card
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

options Object

const options = {
  root: containerRef.current, // Observe within the container
  rootMargin: "0px",         // No margin around the root container
  threshold: 0.5,           // Trigger when 50% of the element is visible
};

root This specifies the scrolling container.

containerRef.current refers to the div wrapping all the cards.
If root is null, it observes the viewport by default.

rootMargin: Defines extra margin around the root.

"0px" means no extra space. You could use values like "100px" to trigger the observer earlier (e.g., when the element is close to appearing).

threshold: Determines how much of the target element must be visible for the observer to trigger.

0.5 means the callback will trigger when 50% of the last card is visible.

Creating the Observer


const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      setListItems((prevItems) => [...prevItems, "https://picsum.photos/200"]);
      observer.unobserve(entry.target);
    }
  });
}, options);

IntersectionObserver Accepts a callback function and the options object defined earlier.

The callback runs whenever an observed element meets the conditions specified in options.

The entries parameter is an array of observed elements. Each entry contains information about whether the element is intersecting (visible).

If entry.isIntersecting is true, it means the last card is now visible:

Add a new item to the list using setListItems.
Unobserve the current element (entry.target) to prevent redundant triggers.

Observing the Last Card

const lastCard = cardRefs.current[listItems.length - 1];
if (lastCard) {
  observer.observe(lastCard);
}

cardRefs.current: Tracks references to all cards.

listItems.length - 1: Identifies the last item in the list.

If a lastCard exists, start observing it using observer.observe(lastCard).

The observer will monitor this card and trigger the callback when it becomes visible.

Cleaning Up


return () => observer.disconnect();

observer.disconnect() removes all observers created by this useEffect.

This ensures that when the component unmounts or re-renders, the old observers are cleaned up.

What Happens at Each Stage?

1. User Scrolls

As the user scrolls , the last card comes into the view

2. Intersection Observer Triggers

When 50% of the last card is visible, the observer’s callback
runs.

3. Add Items

The callback adds new items to the list (setListItems).

4. Repeat

The observer disconnects from the old last card and attaches to
the new last card.

So this is how we can implement infinite scrolling using Intersection Observer.

Hope this was helpful :)

Thank you.

Next.js Tutorial : Adding Navbar with active Styling in a Server Component Layout

Vipin Chandra — Tue, 19 Nov 2024 11:41:05 +0000

The recent and major update in Next.js is the App router.

App router provides and facilitate a way to structure your pages in a reusable manner , such example are like not-found.tsx , loading.tsx and layout.tsx.

Every web app have some common pieces that are need to available in all the page of the application or parts of it.

Such one example is Navigation bar.

With Nextjs , we can leverage the use of layout.tsx to add Navigation bar in all the pages.

In nextjs , all the pages are by default server-components

And if we are looking to use layout.tsx , we need to make sure that its a server component as well because layout.tsx will wrap all the other sub route pages ex: /about , /user , /settings.

The navbar that we want to include in a layout will be a client-component and the reason behind is that it will involve client interaction (clicking) and also we need to have active state.

So this is how the component hierarchy will be structured.

So lets get into the action , before we create the navbar component.

lets take a look on the layout.tsx , for styles we are using tailwindcss.

import type { Metadata } from "next";
import "./globals.css";
import Head from "next/head";
import { Poppins } from "next/font/google";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  display: "swap",
  variable: "--font-poppins",
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
      <html lang="en" className={`${poppins.variable}`}>
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body className="font-poppins antialiased p-4 container md:mx-auto md:p-10 bg-spotify-black">
          {children}
        </body>
      </html>
  );
}

This will be the root layout of all the pages.

Now we will create the navbar.tsx


"use client";

import Link from "next/link";
import React from "react";
import { usePathname } from "next/navigation";
import { Url } from "next/dist/shared/lib/router/router";

interface INavbarProps {}

const navItems = [
  {
    id: "home",
    label: "Home",
    href: "/home",
  },
  {
    id: "about",
    label: "About",
    href: "/about",
  },
  {
    id: "settings",
    label: "Settings",
    href: "/settings",
  },
];

const Navbar: React.FunctionComponent<INavbarProps> = (props) => {
  const pathname = usePathname();
  const isActive = (path: Url) => pathname === path;

  return (
    <nav className="pb-4 md:pb-8 flex justify-between items-center">
      <Link
        href="/"
        className="text-lg md:text-3xl font-bold text-spotify-green"
      >
        webapp
      </Link>
     <ul className="flex justify-end items-center gap-4">
        {navItems.map((eachItem) => (
          <li key={eachItem.id}>
            <Link
              href={eachItem.href}
              className={`${
                isActive(eachItem.href) ? "text-spotify-green" : ""
              }`}
            >
              {eachItem.label}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Navbar;

Output

Let's breakdown the navbar.tsx and understand its bits and pieces.

1. Make this a client component using "use client";

2. Setting Up Navigation Items

Define your navigation items in an array. Each item includes an id, label, and href.

const navItems = [
  {
    id: "home",
    label: "Home",
    href: "/home",
  },
  {
    id: "about",
    label: "About",
    href: "/about",
  },
  {
    id: "settings",
    label: "Settings",
    href: "/settings",
  },
];

3. Using usePathname to Get the Current Path

Next.js provides the usePathname hook from next/navigation to retrieve the current path. You can use this to determine if a link is active.


import { usePathname } from "next/navigation";
import { Url } from "next/dist/shared/lib/router/router";

const isActive = (path: Url) => pathname === path;

4. Iterate through all the navItems in the component


<ul className="flex justify-end items-center gap-4">
        {navItems.map((eachItem) => (
          <li key={eachItem.id}>
            <Link
              href={eachItem.href}
              className={`${
                isActive(eachItem.href) ? "text-spotify-green" : ""
              }`}
            >
              {eachItem.label}
            </Link>
          </li>
        ))}
</ul>

5. Styling Active Links

In the code above, the isActive function checks if the current path matches the link’s href. When active, a specific class (text-spotify-green) is added to style the link.


className={`${
  isActive(eachItem.href) ? "text-spotify-green" : ""
}`}

Lets add the `navbar.tsx` component to our `layout.tsx`

import type { Metadata } from "next";
import "./globals.css";
import Head from "next/head";
import { Poppins } from "next/font/google";
import Navbar from "@src/components/Navbar";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  display: "swap",
  variable: "--font-poppins",
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
      <html lang="en" className={`${poppins.variable}`}>
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body className="font-poppins antialiased p-4 container md:mx-auto md:p-10 bg-spotify-black">
          <Navbar/>
          {children}
        </body>
      </html>
  );
}

So this is how we can implement navbar in server layout component in nextjs .

Hope this was helpful , thanks!!

Ways to accessible animation

Vipin Chandra — Tue, 15 Aug 2023 04:21:06 +0000

Why should we even consider the animation to be accessible ?

Sites these days are too funky or I would say much animated-heavy.

With easy-to-use libraries like GreenSock and FRAMER-MOTION, animating components on web applications has never been that easy.

An animated web app creates an altogether user-engaging experience.

BUT BUT, in this world, the end user of your web app can be anyone :

physically sound and have no disability issues.
With disability and disorders.

One of the disorders that do not fit well with animated components is VESTIBULAR DISORDERS

So what exactly it is? Let me explain to you in laymen's terms

“In simple terms, vestibular disorders are problems that affect your balance and sense of spatial orientation. Users who experience dizziness, vertigo, or balance issues”

Some web apps use animations, scrolling effects, or transitions that can trigger dizziness or discomfort in users with vestibular disorders.

”One large epidemiological study estimates that as many as 35% adults aged 40 years or older in the United States—approximately 69 million Americans—have experienced some form of vestibular dysfunction.”

How we can make the experience better ?

Irrespective of whatever the type of user it is, we should make our web app accessible even if it's animated.

Following could be the ways that can help the same, so the user with a disability or disorder won't be left out in the animated circus.

By using media queries

`@prefer-reduced-motion`

This media query detects the preference of the user from the browser or OS if the user wants any motion on the interface to be removed, reduce or replace with animation-based motion.

no-preference Indicates that a user has made no preference known on the device. This keyword value evaluates as false.

reduce Indicates that a user has enabled the setting on their device for reduced motion. This keyword value evaluates as true.

Have a look at this CSS snippet, we will only be adding animation if the prefer-reduced-motion evaluates to be true.

.animation {
  animation: pulse 1s linear infinite both;
  background-color: purple;
}

/* Tone down the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion) {
  .animation {
    animation: dissolve 4s linear infinite both;
    background-color: green;
    text-decoration: overline;
  }
}

If the user has a preference of no-preference then for that scenario it will evaluate prefers-reduced-motion to be true.

And if any user with disorder prefer to have no motion on Ui interface , then the preference should be selected as reduced-motion which will evaluates to be false and the above animation wont work. Hence this will provide a better Ui experience to these specific type of users.

You can play with the following code by toggling the preferences

https://developer.mozilla.org/en-US/play

You can have access to these preferences from browser or Operating system .

In the following article i will tell you how you can have access to these preferences in chrome browser and Mac OS. (This information is just for the developing purpose , incase you are building an animation but you want to check how it work with preferences )

On chrome you can press cmd + shift+ p , there will be search bar that will appear where you can search prefers-reduced-motion.

You can toggle the values from this dropdown.

On Mac Os simply open the settings choose accessibility —> Display —> Reduce motion (toggle)

By toggling the CSS property `animation-play-state`.

We should have a controller in the web app which will basically pause and run the animation.

This will provide a way for the user to actually pause the animation if he or she is facing any problem with the animation.

animation-play-state property sets whether an animation is running or paused.

It has two significant values

paused
running

We can toggle between pause and running state from a Button or with some interactive element.
Here is the following code snippet link for the same.

https://codepen.io/michellebarker/pen/JjyNXQZ

Lets build for all .

Animated site bring a great Ui experience , but it is necessary and critical that we should consider to build for the user who can be affected by these motion designs.

We should provide them the control to choose if they want to have animated Ui experience or not. By providing them toggle controls or by detecting their preferences.

Remember that building an inclusive web app requires consideration for various disabilities and disorders beyond vestibular issues. Accessibility standards and guidelines, such as Web Content Accessibility Guidelines (WCAG), should be followed to ensure a truly accessible experience for all users.

Solve 5 problems Based on Hoisting

Vipin Chandra — Sun, 18 Sep 2022 13:08:43 +0000

Before We encounter problems and solve them let's recap what Javascript hoisting really is.

Hosting in javascript is a behavior where the variable and function declaration is moved to the top of the scope.

The scope can be local, or global.

x = 20 ;
console.log(x);  // 20  
var x ;

X will be hoisted to the top of the scope ( Global ) thus consoling the x will result in 20.

How does hoisting behave with let, const?

Let and const get HOISTED but for time being we cannot access them until they are initialized

This generally refers to a term called Temporal Dead Zone

console.log(b);

let b = 100;

// Cannot access 'b' before initialization"

Recap done let's encounter these 5 problems!

Q1: Predict the output.

(function random(){
    x++;
    console.log(x);
    var x = 21;
  })();

Output : NaN

// if we try to do hoisting here in the function scope

(function random(){
var x; // hoisted to the Top
x++; // here x is undefined
console.log(x) // NaN
x = 21; 
})();

Q2: Guess the output?

doSomething();
function doSomething(){
  x = 33;
  console.log(x);
  var x;
}

Output: 33

As var x gets hoisted and initialized with 33.

Q 3: Output of this Problem?

var b = 1;
console.log(c);
var c = 2;
a = 1;
console.log(a);

Output : undefined, 1

As c was undefined due to hoisting and a new variable created a = 1 so it result into 1

Q4: Predict the output.

makeStringReverse();
var reverse = "*/" ;
function makeStringReverse(){
console.log(reverse);
reverse = "/*" ;
}
console.log(reverse);

Output

undefined

“ */ “

Explanation

// actual execution flow 
var reverse; // reverse is undefined atm
function makeStringReverse(){ 
console.log(reverse); // undefined
reverse = "/*" ; // initialized
}
makeStringReverse(); // called before reverse been initialized with "*/"
reverse = "*/" ;
console.log(reverse); // will console "*/" because it reverse was reassigned again.

Q5:

function callName() {   
var name = "John";
} 
callName();
console.log(name);

Output

Reference Error: name not defined

Explanation :

The simple reason for reference error is the scope in which the variable was hoisted.

It hoisted in the callName function scope but not in the global scope hence the error occurred.

That was it folks!
Hope this might helped you clearify hoisting in javasxript :)

Bbye!!

Internationalization in React with (React-intl )

Vipin Chandra — Sun, 07 Aug 2022 09:46:55 +0000

What is internationalization?

internationalization is hard to pronounce so we sometimes pronounce it this way ( i18n ).

internationalization is basically the development of an application in order to easily enable localization for users belonging to different regions with different cultures.

With the rise in globalization, we cannot say that the user will only be coming from a specific region.

Now the user base almost comes from every country in the world.
Instagram, Twitter, Facebook, google. whatever you name it.

These all big giants have facilitated the culture of i18n in their application.

Let's take an example to understand its importance.

Because of some urgency due to work you need to visit Russia

And for that, you need to apply for a work visa on the Russian website.

Being Spanish you won't be able to understand Russian, so the Russian official website internationalizes the website just for users like you.

All the content can be localized to the Spanish language and it will be easy for you to understand how to process your visa file request.

Russian to Spanish ( “Submit ” ) button

Now, what is localization ?

Also known by (L10N).

Localization is an adaption of application content according to the region, where the app is being used.

The translation is not the complete solution

Because sometimes we need a stable parser to format the number, and currency for a particular region.

The line direction is also needed to be decided.

So there are many factors why translation is not always a better solution

To enable Internationalization in React with react-intl by formatjs

With React-intl we can easily add Internationalization (i18n) to our React app

install react -intl to your react app

npm install react-intl

This is the whole code of our small application , we will break down concepts one by one.

Our Internalized (i18n) APP

import { useState } from "react";
import { IntlProvider, FormattedMessage, FormattedNumber } from "react-intl";

const messagesInFrench = {
  myMessage: "Aujourd'hui, c'est le {ts, date, ::yyyyMMdd}",
};

const messageInHindi = {
  myMessage: "आज की तारीख {ts, date, ::yyyyMMdd}",
};

const messageInEnglish = {
  myMessage: "Today is {ts ,date , ::yyyyMMdd}",
};

function App() {
  const [currentLocale, setLocale] = useState("en");
  const getMessageForLocale = (localeType) => {
    switch (localeType) {
      case "en":
        return messageInEnglish;
      case "fr":
        return messagesInFrench;
      case "hi":
        return messageInHindi;
    }
  };

  return (
    <IntlProvider
      messages={getMessageForLocale(currentLocale)}
      locale={currentLocale}
      defaultLocale="en"
    >
      <p>
        <FormattedMessage id="myMessage" values={{ ts: Date.now() }} />
        <br />
      </p>
      <button onClick={() => setLocale("fr")}>French</button> <br/>
      <button onClick={() => setLocale("hi")}>Hindi</button>
    </IntlProvider>
  );
}

export default App;

Our application is localized in three different locale French , Hindi , English.

Breakdown of App.js

import { IntlProvider, FormattedMessage } from "react-intl";

IntlProvider

This actually provides the context of (i18n) data (like messages for the different regions) to children's components.

This configures the current locale and translation message at the root of our application so that it can be accessed anywhere in our app.

What is a locale?

locale is a combination of language + region

en-US for English as spoken in the United States
en-GB for English as spoken in the United Kingdom
es-AR for Spanish as spoken in Argentina

Here are the translation messages are:

const messagesInFrench = {
  myMessage: "Aujourd'hui, c'est le {ts, date, ::yyyyMMdd}",
};

const messageInHindi = {
  myMessage: "आज की तारीख {ts, date, ::yyyyMMdd}",
};

const messageInEnglish = {
  myMessage: "Today is {ts ,date , ::yyyyMMdd}",
};

 <IntlProvider
      messages={getMessageForLocale(currentLocale)}
      locale={currentLocale}
      defaultLocale="en"
    >

message : getMessageForLocale( ) gets the message for current locale

locale: currentLocale has the value of the current locale of our app

defaultLocale: ‘en’ English

When we click these buttons the current locale change respectively

 <button onClick={() => setLocale("fr")}>French</button> <br/>
  <button onClick={() => setLocale("hi")}>Hindi</button>

If ‘french’ button is clicked the current locale will be set to “fr”
if ‘hindi’ button is clicked the current locale will be set to “hi”

And hence also the messages will also be changed in accord to the region.

 const [currentLocale, setLocale] = useState("en");
  const getMessageForLocale = (localeType) => {
    switch (localeType) {
      case "en":
        return messageInEnglish;
      case "fr":
        return messagesInFrench;
      case "hi":
        return messageInHindi;
    }
  };

FormatMessage

This component formats the message with the id value of the string based on the locale.

Here in our example

const messageInHindi = {
  myMessage: "आज की तारीख {ts, date, ::yyyyMMdd}",
};

const messageInEnglish = {
  myMessage: "Today is {ts ,date , ::yyyyMMdd}",
};

// id is MyMessage 
// we use format message this way

 <FormattedMessage id="myMessage" values={{ ts: Date.now() }} />

FormatMessge will render that particular id message

It also enables embedding the data values according to the format of the current locale.

For ‘en’ locale

Today is {ts ,date , ::yyyyMMdd}  // english format

// ts value will be of Date.now()

// which will render

// Today is 08/07/2022

// 08/07/2022  mm/dd/yy the english format

For ‘hi’ locale

आज की तारीख {ts, date, ::yyyyMMdd} // hindi format

// ts value will be of Date.now()

// which will render

// आज की तारीख 07/08/2022

//   07/08/2022 dd/mm/yy the hindi localized format

You can observe how the date format change according to region.

That's what is basically called localization (L10N).

Formatting the content of our based on location and region of our user.

There are also some other components for formatting different types of data like Numbers, Relative time .

You can refer to the API docs.

https://formatjs.io/docs/react-intl/api/#formattime

So this was just the basic example of how we can enable our react-app to operate in a different regions.

I hope this might helped you!

Thank you for the read 🌻.

Until then Good Bye 👋

5 Best practices for a React Project.

Vipin Chandra — Sat, 30 Jul 2022 11:45:00 +0000

With the time there are lot of changes in a ways of how we build the frontend for web application.

The codebase from single .js file now has to split into components or modules.

As the application scales its hard to manage the distributed codebase and also make the development process tough.

One of the biggest challenge i used to face in the initial stage of building React project was to

‘ How to have better architecture ? which can easily fit for scaling “

In this Article i’ll go through some of the important keys to be aware of while you build your next application with React.

1. Its not just about having a separate folder for Components!

You might have seen in lot of youtube videos of react project how the tutor mention the practice of keeping the component in different folder called Components.

Thats one of the amazing practice !!!

But what about your utilities , modular styles , assets , static data , tests ?

How to deal with that ?

Its very important to distribute your frontend application into the general requirements .

What could be the general Requirement other than components ?

Hooks

A cart component might be using a custom hook to store the item in the localestorage and may be this hook could be used by Navigation component to show how many cartItems you have in your localeStorage.
So having a seperate folder for custom hooks sounds like a general requirement for the react application.

Utils

one or more component in you folder might need a common functionality called as utilities function

For eg Validation functions to validate different kind of input fields in your application.

We can just have it at one place and can use it everywhere in application

Styles

Generally we follow the suite of reusability of styles in frontend application ,

having repeated classes is a bad sign of styling the projects.

We all try perform and follow this ritual.

Following is just an example of scalable architecture.

2. Build Reusable components !

When we use a UI component at multiple places in our application that component basically called as reusable components.

Some examples are Cards , Badges , Form Controllers , Navigation , Breadcrumbs , buttons , etc.

I personally focus on two params while building a Reusable component.

Design

The Dimensions of the component margin , padding , color , width , height can be it adjustable to the need of the development .

Scalability

If you are building a project that you believe that going to scale at large size its better to build a component fit for scaling the application .

Otherwise you have to keep creating component instead of focusing on scaling.

Example of Reusable button component.

3. Aliasing paths in project.

‘Alias’ Basically means an alternative name , here in this case it will be alternative path.

import Navbar from "../components/Navbar";

import Navbar from "@components/Navbar";  //aliased .

With rate of scaling —- nesting of folder also increases so its better to have an alternative paths

(aliased paths).

../../../utils      // worst

@utils/validations  // best

It helps the developer to know the origin of module easily.

To set up aliased path in your React project follow this amazing tutorial.

tutorial

4. Don’t ignore the warning of keys

As we render the list of items from an array without key attribute we get this silly warning or IMPORTANT Warning ☠️

cartItems.map(item => <span>{item}</span>)

Warning : Each Child in an array or iterator should have a unique "key" prop.

The key attribute to each item help the react at rendering phase while performing action like creation , updation and deletion to that item.

So It’s very important that each item in a list should have a unique key.

cartItems.map(item => <span key={item.toString()}>{item}</span>)

To understand this concept in more depth please check out this blog

tutorial.

5. To track the project progress using version control system (git).

Using version control system while building project helps you to keep a track of changes in your code. It release the headache of developer to manage the code.

like git which start tracking you project as soon as you type git init in terminal*.*

The reason this tool is so important in scaling the project is that it will help you go back to the stable version of your project if something fails in the current version of your project.

In Vscode , at the left side menu a number with blue background shows the no of changes you made . ( basically called a source control ) That thing work only when you have setup version control in your system

So that was it guys i hope these points might help you in your project.

Till then Good bye ! 👋

Js Interview : Bind , Call , Apply ?

Vipin Chandra — Tue, 08 Jun 2021 09:47:49 +0000

What is call and apply ? and why we need them ?

I know this is the first question which comes to our mind🤯

Lets understand this with an example

let personOne = {
  firstName: "Vipin",
  lastName: "Chandra"
  sayHi: function () {
    console.log(" Hey myself " + this.firstName + " " + 
    this.lastName);
  }
};
let personTwo = {
  firstName: "Kunal",
  lastName: "verma",
  sayHi: function () {
    console.log(" Hey myself " + this.firstName + " " + 
    this.lastName);
  }
};

personOne.sayHi() // Hey myself Vipin Chandra
personTwo.sayHi() // Hey myself Kunal verma

We have sayHi() method in two person object separately ,Now imagine how many times we have to write the same function again and again for every new person object.

Waste of time right ?

call( ) is a built-in method to a function which helps us to call a function with given context (this).

what will happen if we take sayHi( ) out of person object ?
It will not work obviously.

let personOne = {
  firstName: "Vipin",
  lastName: "Chandra"

};
let sayHi = function() {
    console.log(" Hey myself " + this.firstName + " " + 
    this.lastName);
  }
sayHi();
// error // this is undefined or refer to window object here.

By using call( ) we can add a context(this) to the function sayHi( )

Syntax of call( )

method.call(refrence*,arg,arg)

sayHi.call(personOne);
//Hey myself Vipin Chandra 
// you can call it multiple time by just changing the refrence
sayHi.call(personTwo)
//Hey myself Kunal verma

And this worked.

apply( ) is just the same as call( ) the only little difference between them is the way the argument get passed.

Syntax of apply( )

method.apply(refrence*,[arg1,arg2])


let sayHi = function(state , city) {
    console.log(" Hey myself " + this.firstName + " " 
    this.lastName +" from "+state + " , " + city);
  }
sayHi.call(personOne,"uttarakhand","almora")
//Hey myself Vipin Chandra from uttarakhand , almora 
sayHi.apply(personOne,["uttarakhand","almora"])
// The array get destructured state = uttarakhand ,city = almora
//Hey myself Vipin Chandra from uttarakhand , almora

Bind( ) work the same as call and apply but it does not call the function immediately instead it returns a function with fixed context(this) and fixed arguments if provided

let introOne = sayHi.bind(personOne,"uttarakhand","almora");
// call it later on
introOne( ) 
//Hey myself Vipin Chandra from uttarakhand , almora 
// it will get executed in context of personOne object

Function cannot be Rebound

let introOne = sayHi.bind(personOne,"uttarakhand","almora").bind(personTwo,"punjab","jalandhar");
introOne( );
// //Hey myself Vipin Chandra from uttarakhand , almora

Thanks for your Read.
You can also check out my other blogs on javascript.

Different Cases of "===" and "=="

Vipin Chandra — Tue, 01 Jun 2021 08:38:37 +0000

In JavaScript we have two type of equality comparison operators.

Non-strict and Strict

The difference between them is a very common question in
javascript interview. This blog will help you to review all the cases and understand the distinction.

Non-strict (==) compare the values after converting the operands value to numbers

"1" == 1 // true

In the above example "1" on the left side will be converted to
number 1 .Hence, The Result will be true .

Different Cases :

" " == false // true
In programming terms false is 0 and true is 1.
" " and false will be converted to 0 which result into True.
0 == false // true
false will be converted to 0
2 <= "4" // true
null == undefined // true
This case is pretty different from other case . If we convert
"undefined" to number the result will be NaN whereas in null
case it will be converted to 0.

So how this NaN == 0 can be result into true ?
"Null" and "undefined" are empty values and its javascript
core behaviour which result this into true.
NaN == NaN
NaN is not equal to anything, including NaN

Strict(===) compare the value without convertions, which is quite useful to overcome cases like 0 == false

" 1 " === 1 // false

In the Above example the strict operator (==) does not convert
the operand type to number. Thus , the output is false.

Different Cases :

Two strings are strictly equal when they have the same
sequence of characters, same length, and same characters in
corresponding positions.

"abc" === "abc" // true
"abc" === "abcc" // false
"abc" === "acb" // false
Two Boolean operands are strictly equal if both are true or

both are false.
true === true //true
true === 1 //false
Two objects are strictly equal if they refer to the same
Object.
{} === {} //false
Null and Undefined types are not equal with ===, but equal
with ==.
null == undefined // true
null === undefined // false

Thanks for your read 🙌

How Events Behave? Event Bubbling Explained

Vipin Chandra — Sun, 18 Apr 2021 17:40:04 +0000

Everything is created from some event even our Universe and the little Browser Popup.

What is an event ?
It is an occurrence of different activities, right?

Events in Browser

There are different type of action that are performed on dom are called events

Some events as follows

click
keyup/keydown
Mouseover/out

The function which executes when a certain event occur is called Event Handler

and this is how we write event handlers in a different ways.

1. <button id="btn" onClick="alert('clicked')">Click</button>

2.  <button id="btn">Click</button>
    <script>
      btn.onclick = function () {
        console.log("clicked");
      };
    </script>

I hope it was a good review of the basics.

But do you know how dom reacts when events happen on an element?

 <section onClick="alert('i am section')">
      <div onClick="alert('i am div')">
        <p onClick="alert('i am p')">click me</p>
      </div>
    </section>

Now if the user click on the p element all three alert box will pop up.
Bit strange right?

This is called a Bubbling effect.

Whenever an event happens it runs an event handler on that element, then on the parent element and then all the way to root elements.

Detailed Points of what will happen if the user click on the p element

A p element event handler will run which is onclick and then the Browser will generate an alert box displaying i am p.
If the parent element contains the same event handler then the parent element handler will also execute.
In this case div contains the same event handler onclick so that handler will be called too.
This process continues to the root element.
Thus, the section element event handler also generate an alert box.
This Bubble effect will end on the document object.

This bubbling effect works like a bubble that is created when a stone or a raindrop fall on lakes.

Every event show bubble effect except some few instances

To check if the event show bubble effect

event.bubbles will return a boolean value

Stop a Bubbling effect

There are two functions which can stop a bubble effect

event.stopPropagation()- stop the handler of current element
and restrict the bubble effect.

    <section onClick="alert('section')">
        <div onClick="alert('div')">
          <p onClick="event.stopPropagation()">click me</p>
        </div>
      </section>
   <!-- no alert box will generate -->

event.stopImmediatePropagation() - If the current element has
more handler on same event.

  <section onClick="alert('section')">
        <div onClick="alert('div')">
          <p onClick="event.stopImmediatePropagation()" 
          onClick="alert('second hanlder')">click me</p>
        </div>
      </section>
   <!-- no alert box will generate -->

Although Developers avoid the restriction on the bubble effect because it can lead to some large pitfalls.

Think and comment down some examples of pitfalls.

Thank you for your read!!
If you find this helpful share this with your fellow Devs.

Es6 🆕 Js Array Methods You may not know about

Vipin Chandra — Sun, 29 Nov 2020 11:02:46 +0000

According to ECMAScript2015(Es6), new functionalities were added to JavaScript.

Most of the new methods were added for arrays.
In this article, we will explore some of them.

`.from( )`

This function returns a copy of the array without copying the reference of the given array.

Generally, In Array whenever we make a copy of the array the
reference remains the same for the new copied array .

Because of this behaviour any changes to duplicate array also
reflect on the original one.

Example :

  let no = [2,3,4,5,6]
  let copyno = no // copy of no
  console.log(copyno) // [2,3,4,5,6]
  // adding '10' at 0 index of copyno 
  copyno[0] = 10 // this will also be reflected on no array.
  console.log(no) //[10,3,4,5,6]

But .from() alter this kind of behaviour.

let copyarr = Array.from(originalArray)

Example :

   let count = [2, 4, 5, 6, 7, 8, 9, 13];
   let count2 = Array.from(count);
   count2[8] = 14;
   console.log(count); 
   /* [2, 4, 5, 6, 7, 8, 9, 13] remain unchanged*/
   console.log(count2); 
   /* [2, 4, 5, 6, 7, 8, 9, 13, 14] */

We can also pass a callback function to .from()

let even = Array.from(count, (x) => x % 2 == 0);
console.log(even);
/* [true, true, false, true, false, true, false, false] */

`.enteries( )`

This function returns an iterable object which contains key:value
pairs.

let allEntry = arr.enteries()

 let numbers = new Array(2, 3, 4, 5, 6);
 let aEnteries = numbers.entries();
 console.log(aEnteries.next().value);
 console.log(aEnteries.next().value);
 /* [0,2] [1,3] [key,value]*/

`.keys() & .values()`

This both function works the same as .entries().
But .keys() return only keys (indexes) and .values return values(element).

let count = [2, 4, 5, 6, 7, 8, 9, 13];

let allKeys = count.keys(); //return object contains keys only
console.log(allKeys.next().value);//0 
console.log(allKeys.next().value);//1
console.log(allKeys.next().value);//2

let allValues = count.values();
console.log(allValues.next().value)//2
console.log(allValues.next().value)//4
console.log(allValues.next().value)//5

`.fill( )`

Fill function fills the array with static value at all of the
position by default.


let games = ["football", "basket ball", "swimming", "cricket"];
games.fill("football");
console.log(games);
/* ["football", "football", "football", "football"] */

To start the filling from a given position we can pass another parameter specifying the starting index.

let games = ["football", "basket ball", "swimming", "cricket"];
games.fill("football",2);
/* ["football", "basket ball", "football", "football"] */
//  0         , 1            , 2          , 3

we can also pass the position where we want to end the fillings.
The end index is inclusive in filling process.

let games = ["football", "basket ball", "swimming", "cricket"];
games.fill("football",1,2);
/* ["football", "football", "football", "cricket"] */
//  0         , 1 (start) , 2 (ending) , 3

`includes( )`

This function returns True if the given element is found in the
array and False if not.

arr.includes(element)

 let count = [2, 4, 5, 6, 7, 8, 9, 13];
 console.log(count.includes(7)) // true
 console.log(count.includes(14))  //false

`.find( ) & .findIndex( )`

.find( ) function receives a callback function.

This callback function will loop through all the values and the
first value which satisfies the condition will be returned.

.findIndexOf( ) function also work like .find( ) but this
function returns the index of the value.

Example :

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 24];
function multipleOf12(element, index, array) {
  return element % 12 == 0;
}
console.log(numbers.find(multipleOf12));
/* find return the element which first satisfies the condition  thats why we get 12 as output instead of 24*/

console.log(numbers.findIndex(multipleOf12));
/* find return the  index of the element which is 11 in our case */

Thankyou for your read❤️
" Keep Learning "

useState && useEffect ⚛

Vipin Chandra — Tue, 24 Nov 2020 05:56:44 +0000

In Feb 2019 React hooks were introduced to react community
(React 16.8).
This new react feature solves one of the biggest problems faced by every react developers.

You can skip the problem section but it'll be good to know about what motivated React developers to bring hooks to the React.

Problems

Render props - Before Hooks, functional components were stateless due to which state needs to be passed to the functional component through props and if the application is too large then the drilling of props was one of the obstacle developers need to go through.
High order component - HOC wraps the component to give extra power like state but it also creates wrap hell as the application scale and application become too abstracted.

Let's explore Hooks now 💥

Hooks

Hooks is just a group of functions which Provide extra features to the Functional component by hooking to the core feature of react.

like State useState() , Lifecycle useEffect()

useState

useState() is a hook function which enable developers to use State in functional component.

import

import {useState} from 'react'

usage of useState

const [stars , setStars] = useState(3)

stars hold the initial value 3 is just like the state with the initial value.
setStars is the function which will set the stars like the this.setState.
useState receive initial value.

We can set multiple states variable by using useState again and again.

const [stars , setStars] = useState(3)
const [movie , setMovie] = useState("The martian")
const [userInfo , setUserInfo] =useState({
 userName:"john",
 email: "john@example.com"
})

Example of useState

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [stars, setStars] = useState(3);
  return (
    <div className="App">
      <h1>Welcome to netflix </h1>
      <h2>The Martian</h2>
      <button onClick={() => setStars(stars + 1)}>Change Rating</button>
      <h1>{stars}⭐</h1>
    </div>
  );
}

Output

Demo

setStars set the value of the star by incrementing one to the previous value. So every time you click the button the stars
increment.
Thus useState lets you to change and set state for functional component.

Every time we set a new state value the component rerender.

useEffect

useEffect() is a hook function which enable developers to use group of lifecycle method like
componentDidMount ( ) , componentDidUpdate( ) , componentWillUnmount() in functional component.

import

import {useState , useEffect } from 'react'

useEffect runs after every render and most of the side effects (Like Network Request , subscription) are performed under this function.

useEffect(()=>{
// network requests
}  
 ,[ ])

useEffect( ) has two parameters , function and Array variable.

function contains the code which you want to execute after
every render.
Array contains a state variable names for which you want to run the useEffect.

Since the useEffect() functions are run on every subsequent re-render/update, we can tell React to skip a run, for performance purposes, by adding a second parameter which is an array that contains a list of state variables to watch for. React will only re-run the side effect if one of the items in this array changes.

Lot of English lets understand `useEffect` through code.

In this example, we will make a simple bookmark app.
This app will get a post from the API and the user can bookmark it.
Thats it! small app :).

Demo

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [post, setPost] = useState("");
  const [status, setStatus] = useState("Requesting....");
  const [display, setDisplay] = useState("none");

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => {
        setPost(json.title);
        setStatus("Recieved");
        setDisplay(" ");
      })
      .catch((err) => {
        setStatus("Error");
      });
  });
  return (
    <div className="App">
      <p>{status}</p>
      <p>{post}</p>
      <button style={{ display: `${display}` }}>BookMark</button>
    </div>
  );
}

Thats lot of code right ?

Lets understand this in pieces.

State part

we have 3 state variable in this small app

const [post, setPost] = useState("");
const [status, setStatus] = useState("Requesting....");
const [display, setDisplay] = useState("none");

Post will be used to store the post received from api
status is basically used to keep track of the request status (Requesting or Received).
display will be used to toggle the display of bookmark button.

Jsx part

<div className="App">
      <p>{status}</p>
      <p>{post}</p>
      <button style={{ display: `${display}` }}>BookMark</button>
</div>

status of request and post will be displayed on the page along with button.

useEffect part


useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((json) => {
        setPost(json.title);
        setStatus("Recieved");
        setDisplay(" ");
      })
      .catch((err) => {
        setStatus("Error");
      });
  });

As we know, use effect is basically used to perform side Effect (API request). So it's obvious that we will make our API request in the useEffect function.

fetch will get the post for us from API
As soon as we retrieve our post, setStatus will set the status to setStatus(received) and the display of our button will be toggled through setDisplay(" ").
In any case, if we have any error in between the process the catch() will be executed further setting the status to Error;

Now our little useEffect application is complete.

I hope this article somehow helped you to understand the basic concepts of hooks 😄.
There's a lot more about hooks, so please go through the official react hooks docs too.

"this" in javascript

Vipin Chandra — Sun, 11 Oct 2020 10:29:47 +0000

For many Developers "this" keyword has been a nightmare as the usage of "this" sometimes leads to unknown bug.

In this article we will explore what "this" keyword is.

First, let's review what javascript objects are for the sake of better understanding.

Object

*** Object is a collection of key: value pairs and more complex entities (methods, nested objects).

syntax

const person = {
   firstName:"John", // firstname = KEY , John = value
   lastName:"Doe"
}

Objects with complex entities

const person = {
   firstName:"John", // firstname = KEY , John = value
   lastName:"Doe",
   autoIntro:function(){
             console.log("Hello nice to meet you!!")}
}

In the above code

firstName also known as property of an object.
autoIntro is a method of an object.

To access property and method

person.firstName // John
person.autoIntro() // Hello nice to meet you!!

Let's take a case here !!

What if we make our intro more dynamic
like this Hello myself John Doe, nice to meet you!!.

we can achieve this with "this".

const person = {
firstName:"John", // firstname = KEY , John = value
lastName:"Doe",
autoIntro:function(){
console.log(`Hello ${this.firstName} ${this.lastName},nice to meet you!!`)
}
}

person.autoIntro() will generate our desired output.

Explanation

this always refers to the object "Before dot".

person.autoIntro()
Here this refers to the person object before dot .

so when we use this in method body it actually referring to the person object.

this.firstName == person.lastName

`this` value always evaluated at run-time depending upon the context.

let userOne = { name: "John" };
let userTwo = { name: "Max" };

function sayHi() {
  alert( this.name );
}

// use the same function in two objects
userOne.f = sayHi;
userTwo.f = sayHi;

// these calls have different this
// "this" inside the function is the object "before the dot"
userOne.f(); // John  (this == userOne)
userTwo.f(); // Max  (this == userTwo)

`this` in arrow function

In arrow function, this keyword has no value .
"this" keyword always refer to the outer scope.

For example :

let user = {
 name:"john",
sayhi:function(){
  let sayName = ()=>{
  console.log(this.name) // this == user
}
sayName();
}
}
user.sayhi(); // john

In the above code, "this" keyword refers to the outer scope function sayhi.

lets change sayhi to arrow function and remove inner function.

let user = {
  name: "john",
  sayhi:()=> {  
      console.log(this.name); // this == undefined
  }
};
user.sayhi(); // error Cannot read property 'name' of undefined

so here "this" is undefined because as we know in arrow function this has no value.

Moreover, there's lot more about "this".

This keyword

"Happy coding"❤️

DEV Community: Vipin Chandra

Reactjs Tutorial : Infinite scrolling with Intersection Observer.

What is infinite scrolling and need for it ?

Implementation

Intersection Observer

a. Initializing State and Refs

b. Rendering the List and Assigning Refs

c. Observing the last post (item).

Next.js Tutorial : Adding Navbar with active Styling in a Server Component Layout

1. Make this a client component using "use client";

2. Setting Up Navigation Items

3. Using usePathname to Get the Current Path

4. Iterate through all the navItems in the component

5. Styling Active Links

Lets add the navbar.tsx component to our layout.tsx

Ways to accessible animation

Why should we even consider the animation to be accessible ?

How we can make the experience better ?

By using media queries

@prefer-reduced-motion

By toggling the CSS property animation-play-state.

Lets build for all .

Solve 5 problems Based on Hoisting

How does hoisting behave with let, const?

Internationalization in React with (React-intl )

What is internationalization?

Now, what is localization ?

The translation is not the complete solution

To enable Internationalization in React with react-intl by formatjs

IntlProvider

FormatMessage

5 Best practices for a React Project.

1. Its not just about having a separate folder for Components!

2. Build Reusable components !

3. Aliasing paths in project.

4. Don’t ignore the warning of keys

5. To track the project progress using version control system (git).

Js Interview : Bind , Call , Apply ?

Different Cases of "===" and "=="

How Events Behave? Event Bubbling Explained

Events in Browser

Stop a Bubbling effect

Es6 🆕 Js Array Methods You may not know about

.from( )

.enteries( )

.keys() & .values()

.fill( )

includes( )

.find( ) & .findIndex( )

useState && useEffect ⚛

Problems

Hooks

useState

Example of useState

useEffect

Lot of English lets understand useEffect through code.

State part

Jsx part

useEffect part

"this" in javascript

In this article we will explore what "this" keyword is.

Object

syntax

Explanation

this value always evaluated at run-time depending upon the context.

this in arrow function

Lets add the `navbar.tsx` component to our `layout.tsx`

`@prefer-reduced-motion`

By toggling the CSS property `animation-play-state`.

`.from( )`

`.enteries( )`

`.keys() & .values()`

`.fill( )`

`includes( )`

`.find( ) & .findIndex( )`

Lot of English lets understand `useEffect` through code.

`this` value always evaluated at run-time depending upon the context.

`this` in arrow function