DEV Community: Muhammad Azfar Aslam

Implementing Google Publisher Tag Ads in Next.js 15 Single Page Application 2025

Muhammad Azfar Aslam — Mon, 20 Jan 2025 07:59:01 +0000

Hi, Salut, Hola, Bonjour, Salam,

I’m back with another informative tutorial! Whenever I encounter a tricky problem and can’t find a proper solution or guide compiled in one place on the Internet, I take it as an opportunity to create one. This way, I contribute to our developer community and ensure that others don’t experience the same frustrations I did.

Google Publisher Tag (GPT) ads can be challenging to implement in a Single-Page Application (SPA) due to issues such as ads only loading on the first-page load, failing to reload on route changes, and layout shifts causing Cumulative Layout Shift (CLS). In this blog, I’ll share my solution for implementing GPT ads in Next.js 15 SPA, ensuring they work seamlessly on route changes while addressing CLS issues.

The Problem

Ads Only Load on First Page: In SPAs, scripts often execute only on the initial load. As a result, ads might not refresh when navigating to a new route.
Cumulative Layout Shift (CLS): Ads loading asynchronously often cause layout shifts, which impact the user experience and Core Web Vitals.

The Solution

After thorough research and experimentation, I came up with a solution to:

Ensure ads load dynamically on route changes.
Predefine ad sizes to avoid CLS.

Adding the GPT Script

To start, include the GPT script in the root layout file to ensure it’s available throughout the app. In rootlayout.js:

<script
  async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
></script>
<script
  dangerouslySetInnerHTML={{
    __html: `window.googletag = window.googletag || { cmd: [] };
      // Pushes a function to the GPT command queue to define and display the ad slot dynamically
      googletag.cmd.push(() => {
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
      });`,
  }}
/>

Ad Banner Component

Next, create a reusable AdBanner.jsx component. This component ensures each ad slot has a predefined height and width, which prevents CLS:

import React from "react";
import Ad from "@/components/common/Ad";

const AdBanner = ({ width = "728px", height = "90px", adId, slot }) => {
  return (
    <div className="headerTopAdInner" style={{ width, height }}>
      <Ad adId={adId} slot={slot} />
    </div>
  );
};

export default AdBanner;

Ad Component

The Ad component dynamically loads and renders ads. It ensures cleanup on unmount to prevent memory leaks and stale ads:

import React, { useEffect } from "react";
import { ads } from "@/utils/ads";

function Ad({ adId, slot }) {
  // This component handles dynamic ad loading by defining and displaying ad slots
  // It ensures proper cleanup on unmount to avoid memory leaks and stale ads
  // Fetching the ad configuration for the given adId from a predefined list of ads
  const ad = ads[adId];

  useEffect(() => {
    const { googletag } = window;

    // This check ensures the ad configuration exists before attempting to define the ad slot
    if (!ad) {
      console.error(`Ad configuration not found for adId: ${adId}`);
      return;
    }

    googletag.cmd.push(() => {
      console.log(`Defining slot for adId: ${adId}`);

      const existingSlot = googletag.pubads().getSlots().find(
        (slot) => slot.getSlotElementId() === adId
      );
      if (existingSlot) {
        googletag.destroySlots([existingSlot]);
      }

      const mapping = googletag
        .sizeMapping()
        .addSize([1024, 0], ad.mapping[1024] || [])
        .addSize([0, 0], ad.mapping[0] || [])
        .build();

      googletag
        .defineSlot(slot, ad.sizes, adId)
        .defineSizeMapping(mapping)
        .addService(googletag.pubads());

      googletag.display(adId);
    });

    // This return function acts as a cleanup mechanism, removing the ad slot when the component unmounts
    return () => {
      googletag.cmd.push(() => {
        const currentSlot = googletag.pubads().getSlots().find(
          (slot) => slot.getSlotElementId() === adId
        );
        if (currentSlot) {
          googletag.destroySlots([currentSlot]);
        }
      });
    };
  }, [ad, adId, slot]);

  if (!ad) {
    return <div>Error: Ad configuration not found for adId: {adId}</div>;
  }

  return <div id={adId}></div>;
}

export default Ad;

Ad Configuration

Define all your ad configurations in a centralized file (ads.js):

export const ads = {
  top: {
    sizes: [
      [728, 90],
      [300, 250],
    ],
    mapping: {
      0: [300, 250],
      1024: [728, 90],
    },
  },
  bottom: {
    sizes: [300, 250],
    mapping: {
      0: [300, 250],
      1024: [],
    },
  },
  sidebar: {
    sizes: [
      [728, 90],
      [300, 250],
    ],
    mapping: {
      0: [300, 250],
      1024: [728, 90],
    },
  },
};

Using AdBanner

Finally, integrate AdBanner into your components. For example, in the rootlayout.js, place ads above the header and in the footer:

<AdBanner adId="top" slot="/2233445566/someName/top" />
<AdBanner adId="bottom" slot="/2233445566/someName/bottom" />

For article detail pages, add ads in the sidebar:

<AdBanner adId="sidebar" slot="/2233445566/someName/sidebar" />

Replace 2233445566 and someName with your Google Ad Manager account details.

Benefits of the Solution

Dynamic Ad Loading: The useEffect hook ensures ads reload dynamically on route changes.
CLS Prevention: Predefined dimensions for each ad slot eliminate layout shifts.
Slot Cleanup: Destroying slots on unmount prevents stale ads and memory leaks.

Conclusion

Implementing Google Publisher Tag ads in a Next.js 15 SPA requires careful handling of script initialization, dynamic loading, and slot cleanup. By following this approach, you can ensure your ads work seamlessly across route changes while maintaining a smooth user experience.

I hope this will be helpful, love to connect with you on LinkedIn

Few more articles

React Design Patterns: Compound Component Pattern

Muhammad Azfar Aslam — Wed, 10 Jul 2024 10:27:30 +0000

Salut, Hola, Bonjour, Hi and Salam to Everyone

React's flexibility allows developers to create highly reusable and customizable components. One powerful design pattern that leverages this flexibility is the Compound Component Pattern. This pattern enables developers to build components composed of multiple, related sub-components. In this blog post, we'll explore the Compound Component Pattern and demonstrate its use through an example of a card component.

What is the Compound Component Pattern?

The Compound Component Pattern involves creating a parent component that manages state and behavior, and child components that consume and display this state. This pattern allows you to build components that are highly flexible and reusable. The parent component provides context and state, while the child components use this context to render their UI parts.

Advantages of the Compound Component Pattern

Flexibility: Child components can be rearranged, omitted, or repeated in different orders.
Reusability: Components can be reused in different contexts with varying content.
Separation of Concerns: State management and UI rendering are separated, making components easier to maintain and test.

Example: Card Component
Let's build a card component using the Compound Component Pattern. The card will have an image, a title, and a description.
There are two ways to achieve this pattern, I will share both ways.

Approach 1

In this way, we will use normal functions to create compound components as Arrow functions are not hoisted, so you cannot use them before initialization, that's why I am using regular functions.

Create a Card Component
Create a Card.jsx file. In this card component, we will create compound components.



import React from "react";


function Card({ children }) {
  return <div className="card">{children}</div>;
}

Card.Image = Image;
Card.Title = Title;
Card.Description = Description;

export default Card;

function Image({ src, alt }) {
  return <img className="card-image" src={src} alt={alt} />;
}

function Title({ children }) {
  return <h2 className="card-title">{children}</h2>;
}

function Description({ children }) {
  return <p className="card-description">{children}</p>;
}

Create a styles.css
Let's create a style file to write some basic styling. This is not a CSS tutorial so not going to put much effort into this part. Just some normal CSS.



.app {
  text-align: center;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  gap: 20px;
}
.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  width: 300px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card-image {
  width: 100%;
  height: auto;
}

.card-title {
  font-size: 1.5rem;
  margin: 16px;
  color: Blue;
}

.card-description {
  font-size: 1rem;
  margin: 16px;
}

How to use Compound Component
Now let's use these components inside our App.jsx. The styles file is the same as above.



import Card from "./Card";
import "./styles.css";

const App = () => {
  return (
    <div className="app">
      <Card>
        <Card.Image
          src="/reactjs.jpeg"
          alt="Placeholder Image"
        />
        <Card.Title>I'm Azfar Aslam</Card.Title>
        <Card.Description>
          This is a description for the first card. If you like this tutorial,
          please like, subscribe, and share.
        </Card.Description>
      </Card>
      <Card>
        <Card.Image
          src="/reactjs.jpeg"
          alt="Placeholder Image"
        />
        <Card.Title>I'm Lead Web Developer</Card.Title>
        <Card.Description>
          This is a description for the second card. If you like this tutorial,
          please like, subscribe, and share.
        </Card.Description>
      </Card>
    </div>
  );
};

export default App;

Final Result
This is how it will look like at the end. You can see how much control we have in this pattern and reusability.

Approach 2

In this way, we will create compound components using arrow functions. I am making it all inside one card component file but you can also create separate files.

Create a Card Component
Create a Card.jsx file. In this card component, we will create compound components.



import React from "react";

const Card = ({ children }) => {
  return <div className="card">{children}</div>;
};

export default Card;

export const CardImage = ({ src, alt }) => {
  return <img className="card-image" src={src} alt={alt} />;
};

export const CardTitle = ({ children }) => {
  return <h2 className="card-title">{children}</h2>;
};

export const CardDescription = ({ children }) => {
  return <p className="card-description">{children}</p>;
};

How to use Compound Component
Now let's use these components inside our App.jsx. The styles file is the same as above.



import Card from "./Card";
import { CardDescription } from "./Card";
import { CardTitle } from "./Card";
import { CardImage } from "./Card";
import "./styles.css";

const App = () => {
  return (
    <div className="app">
      <Card>
        <CardImage
          src="/reactjs.jpeg"
          alt="Placeholder Image"
        />
        <CardTitle>Hello World</CardTitle>
        <CardDescription>
          This is a description for the first card. If you like this tutorial,
          please like, subscribe, and share.
        </CardDescription>
      </Card>
      <Card>
        <CardImage
          src="/reactjs.jpeg"
          alt="Placeholder Image"
        />
        <CardTitle>This is Second Card</CardTitle>
        <CardDescription>
          This is a description for the second card. If you like this tutorial,
          please like, subscribe, and share.
        </CardDescription>
      </Card>
    </div>
  );
};

export default App;

The result will be the same.

Conclusion

The Compound Component Pattern in React allows for building flexible, reusable components by separating state management from UI rendering. By using this pattern, you can create components that are easy to maintain and extend. The card component examples demonstrates how to implement this pattern effectively, providing a robust and scalable solution for complex UIs.

With this pattern, you can create a wide range of components that can be easily customized and reused across your application, enhancing both the developer experience and the application's overall structure.

I hope this will be helpful, love to connect with you on LinkedIn

Few more articles

Managing Global State with useReducer and Context API in Next JS 14

Muhammad Azfar Aslam — Wed, 03 Apr 2024 07:33:02 +0000

Salut,
I've been a big fan of Next JS since the beginning but since Next JS 13, many things changed compared to Next JS 12. One of the main differences is Redux and Global State. Managing a global state can be a challenging task, especially when the state needs to be shared across multiple components. One reason is that Redux is only available on the client side. The question is how can we manage the global state on the server side? I came up with the solution context API. However, if we have to manage complex logic, the combination of useReducer and the Context API provides an elegant solution to this problem. In this tutorial, we will create a simple counter application to demonstrate how to use useReducer and the Context API to manage the global state in React. Let's dive in to the example.

Step 1: Setting Up the Context and Reducer

First, let's create a new context for our counter application and define a reducer function that will handle state updates:

"use client";
import React, { createContext, useContext, useReducer } from 'react';

// Create a new context for the counter
const CounterContext = createContext();

// Reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

In this code, we define a new context called CounterContext using React's createContext function. We also define a reducer function that takes the current state and an action, and returns the new state based on the action type.

Step 2: Creating the Counter Provider

Next, let's create a CounterProvider component that will use the useReducer hook to manage the state and provide the state and dispatch function to its children:

// Counter provider component
const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
};

In this code, we use the useReducer hook to create a state and dispatch function pair. We then use the CounterContext.Provider component to wrap the children components, providing them with the state and dispatch function via the context.

Step 3: Consuming the Counter Context

Now, let's create a custom hook called useCounter that will allow us to consume the counter context in our components:

// Custom hook to consume the CounterContext
const useCounter = () => {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error('useCounter must be used within a CounterProvider');
  }
  return context;
};

In this code, we use React's useContext hook to access the counter context. We also perform a check to ensure that the hook is used within a CounterProvider component, throwing an error if it is not.

Step 4: Creating Components Using the Counter Context

Finally, let's create two components, CounterDisplay and CounterControls, that will use the useCounter hook to interact with the counter state:

const CounterDisplay = () => {
  const { state } = useCounter();

  return <div>Count: {state.count}</div>;
};

const CounterControls = () => {
  const { dispatch } = useCounter();

  return (
    <div>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

In these components, we use the useCounter hook to access the counter state and dispatch function. The CounterDisplay component displays the current count, while the CounterControls component provides buttons to increment and decrement the count.

Step 5: Using the Counter Provider in the App

Finally, let's use the CounterProvider component in our App component to wrap the CounterDisplay and CounterControls components:

const HomePageWrapper = () => {
  return (
    <CounterProvider>
      <CounterDisplay />
      <CounterControls />
    </CounterProvider>
  );
};

In this code, we wrap the CounterDisplay and CounterControls components with the CounterProvider component to provide them with access to the counter state and dispatch function.

Conclusion

In this tutorial, we have learned how to use useReducer and the Context API to manage the global state in a Next JS 14 application. By using these tools, we can create a centralized state management system that makes it easy to share state across multiple components.

I hope this will be helpful, love to connect with you on LinkedIn

Few more articles

Highlight on the new features of Next JS 14 config 2023

Muhammad Azfar Aslam — Fri, 27 Oct 2023 13:44:43 +0000

Hi again and welcome to the new Next JS 14. Yes, you've read it correctly, Within 12 months, Next JS 14 is out. I've experienced attending config again and what a startling presentation by Guillermo Rauch, CEO of Vercel and creator of Next JS. No new API, we are following the same Next JS 13 APIs but with some excellent improvements. Some of the main topics are mentioned below.

Turbopack
Server Actions (Stable)
Partial Prerendering (Preview)
Next.js Learn (New)

Turbopack

Guillermo Rauch asked many people should work on Performance or Feature and Performance wins. Now they think should we change our source language or what but they continue to same. Next JS 14 is still using Rust Engine.

5,000 integration tests for the next dev are now passing with Turbopack, our underlying Rust engine. These tests include 7 years of bug fixes and reproductions.

While testing on vercel.com, a large Next.js application, we've seen:

Up to 53.3% faster local server startup
Up to 94.7% faster code updates with Fast Refresh

Server Actions (Stable)

Guillermo said, we were doing great in Next JS 13 but there was one piece missing and that was Server Actions. Now with Next JS 14, Server Actions are stable and we can call them from anywhere. No external API is required, you can fetch data directly from sql.



export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }

  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Mutating data, re-rendering the page, or redirecting can happen in one network roundtrip, ensuring the correct data is displayed on the client, even if the upstream provider is slow. Further, you can compose and reuse different actions, including many different actions in the same route.

Partial Prerendering (Preview)

As a front-end developer, my favorite feature is this. Partial Prerendering. Sam Selikoff Founder, Build UI addressed at the conference that he was really impressed with React useSWR and he wanted to do something amazing inside Next JS and he did well.

He said, according to him. React JS works like LEGOS and small LEGOS work together to form anything. Similarly, small components can work together like a charm and can produce some amazing work. Nike is also using Next JS.

Partial Prerendering is defined by your Suspense boundaries. Here's how it works. Consider the following ecommerce page:



export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

Next.js Learn (New)

Mr. Guillermo also introduced a brand new, free course on Next.js Learn. This course teaches:

The Next.js App Router
Styling and Tailwind CSS
Optimizing Fonts and Images
Creating Layouts and Pages
Navigating Between Pages
Setting Up Your Postgres Database
Fetching Data with Server Components
Static and Dynamic Rendering
Streaming
Partial Prerendering (Optional)
Adding Search and Pagination
Mutating Data
Handling Errors
Improving Accessibility
Adding Authentication
Adding Metadata

Houssein Djirdeh - Senior Software Engineer, at Google who is working under Aurora to develop third parties for Next JS announced some enhancements as well.

Most developers like myself face a similar problem when they import 3rd parties and that is a performance issue in Google page speed. LCP increases that cost performance. He is trying to overcome this issue. Had a huge amount of success already but still working on it.

With new third-party scripting, they have achieved 65x faster loading.

Some example of these scripts from conference are below.

All images are from the Next JS 14 conference and some text is taken from the official blog.

I hope this will be helpful, love to connect with you on LinkedIn

Few more articles

API Driven React-Hook Form (Dynamic Forms)

Muhammad Azfar Aslam — Thu, 24 Aug 2023 10:04:45 +0000

Salut,

Table of content

Introduction
Dynamic Form Data
React Hook Form
Text Input Field
Text Area Field
Radio Field
Dropdown Field
Checkbox Field
Error Component
Complete Input Component

Introduction

API-driven forms refer to the practice of using APIs (Application Programming Interfaces) to integrate and manage forms within web applications. This approach offers several benefits that can enhance the functionality and user experience of forms on websites or applications.

Dynamic Data Loading
Real-time Validation
Flexibility and Customization
Secure Data Handling
Seamless Integration with Backends
Consistency Across Platforms
Reduced Development Time
Scalability
Easier Updates and Maintenance

Prerequisite - React Hook Form. As this article is related to API-driven forms, that's why I'll now elaborate on the working of React Hook Form. However, if you need an understanding of this library, just leave a comment and I'll explain it in another article.

Dynamic Form Data

When we call an API for form fields, it should have the following payload. I am going to write my code accordingly to this payload if you guys want a different payload. You will be required to make changes in the code accordingly. I am not calling any API in this article, just creating a variable "dynamicForm" and assigning payload to it.



const dynamicForm = {
  firstName: {
    label: "First Name",
    type: "text",
    placeholder: "",
    defaultValue: "Yes",
    rules: {
      required: true,
    },
  },
  lastName: {
    label: "Last Name",
    type: "text",
    placeholder: "",
    defaultValue: "",
    rules: {
      required: true,
    },
  },
  email: {
    label: "Email",
    type: "email",
    placeholder: "",
    defaultValue: "",
    rules: {
      required: true,
    },
  },
  subject: {
    label: "Subject",
    type: "dropdown",
    options: ["Chemistry", "Physics", "Arts"],
    defaultValue: "",
    rules: {
      required: true,
    },
  },
  message: {
    label: "Message",
    type: "textarea",
    placeholder: "",
    defaultValue: "",
    rules: {
      required: false,
    },
  },
}

React Hook Form

I will make a component named "Input" but for now let's suppose there is a component. Now, let's call the form and this Input component.



const {
    handleSubmit,
    control,
    formState: { errors },
  } = useForm();

Let's convert dynamicForm object to array and map through it the Input component.



const formInputs = Object.keys(dynamicForm).map((e, i) => {
    const { rules, defaultValue, label } = dynamicForm[e];

    return (
      <section key={i}>
        <label className="grey">
          {label} {rules?.required ? <span className="red">*</span> : ""}
        </label>
        <Controller
          name={e}
          control={control}
          rules={rules}
          defaultValue={defaultValue}
          render={({ field }) => (
            <div>
              <Input
                cClass="input-1"
                value={field.value}
                onChange={field.onChange}
                {...dynamicForm[e]}
              />
            </div>
          )}
        />
        {errors[e] && <Error>This field is required</Error>}
      </section>
    );
  });

Now, add a submit handler and form to our main component.



const onSubmit = (data) => console.log(data);

  return (
    <div className="wrapper">
      <form onSubmit={handleSubmit(onSubmit)}>
        {formInputs}
        <div>
          <button type="submit" className="btn-1">
            Submit
          </button>
        </div>
      </form>
    </div>
  );

Text Input Field



const Input = ({ cClass, value, onChange, type, ...rest }) => {
 return (
                <input
                    type='text'
                    placeholder={rest?.placeholder}
                    onChange={(e) => onChange(e.target.value)}
                    value={value}
                    className={cClass}
                />
            );
}

Text Area Field



const Input = ({ cClass, value, onChange, type, ...rest }) => {
 return (
                <textarea name="" id="" cols="30" rows="10" className={cClass} onChange={(e) => onChange(e.target.value)}>{value}</textarea>
            );
}

Radio Field



const Input = ({ cClass, value, onChange, type, ...rest }) => {
 return rest?.options.map((i) => (
                <label>
                    <input
                        type='radio'
                        key={i}
                        value={i}
                        onChange={(e) => onChange(e.target.value)}
                        checked={value === i}
                    />
                    {i}
                </label>
            ));
}

Dropdown Field



const Input = ({ cClass, value, onChange, type, ...rest }) => {
 return (
                <select value={value} onChange={(e) => onChange(e.target.value)} className={cClass}>
                    <option value="">Select an option</option>
                    {rest?.options.map((option) => (
                        <option key={option} value={option}>
                            {option}
                        </option>
                    ))}
                </select>
            );
}

CheckBox Field



const Input = ({ cClass, value, onChange, type, ...rest }) => {
 return (
               <label>
                    <input
                        type="checkbox"
                        onChange={(e) => onChange(e.target.checked)}
                        checked={value}
                    />
                    {rest?.checkboxLabel}
                </label>
            );
}

I used a switch statement to check the type.

Error Component



export const Error = ({ children }) => <p style={{ color: "red" }}>{children}</p>;

Complete Input Component



const Input = ({ cClass, value, onChange, type, ...rest }) => {
    switch (type) {
        case "text":
            return (
                <input
                    type='text'
                    placeholder={rest?.placeholder}
                    onChange={(e) => onChange(e.target.value)}
                    value={value}
                    className={cClass}
                />
            );
        case "email":
            return (
                <input
                    type='email'
                    placeholder={rest?.placeholder}
                    onChange={(e) => onChange(e.target.value)}
                    value={value}
                    className={cClass}
                />
            );
        case "textarea":
            return (
                <textarea name="" id="" cols="30" rows="10" className={cClass} onChange={(e) => onChange(e.target.value)}>{value}</textarea>
            );
        case "radio":
            return rest?.options.map((i) => (
                <label>
                    <input
                        type='radio'
                        key={i}
                        value={i}
                        onChange={(e) => onChange(e.target.value)}
                        checked={value === i}
                    />
                    {i}
                </label>
            ));
        case "dropdown":
            return (
                <select value={value} onChange={(e) => onChange(e.target.value)} className={cClass}>
                    <option value="">Select an option</option>
                    {rest?.options.map((option) => (
                        <option key={option} value={option}>
                            {option}
                        </option>
                    ))}
                </select>
            );

        case "checkbox":
            return (
                <label>
                    <input
                        type="checkbox"
                        onChange={(e) => onChange(e.target.checked)}
                        checked={value}
                    />
                    {rest?.checkboxLabel}
                </label>
            );
        default:
            return null;
    }
};

export default Input

Frontend would render like this.

Thank you for reading this far. This is a brief introduction of API Driven forms
If you find this article useful, please like ❤ and share this article. Someone could find it useful too. If you find anything technically inaccurate please feel free to leave a comment.
Hope it's a nice and informative read for you. Follow me on LinkedIn for more helpful resources or reach out for any mutual opportunity.

Few more articles:

JavaScript and React Interview questions (Junior/Mid-level) 2023

Muhammad Azfar Aslam — Mon, 10 Jul 2023 05:40:16 +0000

Hi, I am working as Frontend/JavaScript developer for the past 5+ years. I've taken multiple interviews. I want to share some questions I used to ask from candidates. Hope it'll be helpful for you guys. Let's dive into it.

JavaScript Questions:

What is an Event loop?
What are the various data types that exist in JavaScript?
Difference between Primitive and non-primitive?
What are the scopes of a variable in JavaScript?
What is Hoisting in JS?
What is the ‘this’ keyword in JavaScript?
What is ES6/ES7?
What is Callback in JavaScript?
What is the difference between var, let, and const?
What is the difference between splice and slice?
What is the difference between a map and foreach?
What is the difference between an arrow function and a normal function?
What is a generator function?
What is the difference between cookies, sessions, and local storage?
What are Closures in JavaScript?
What is the difference between Document and Window in JavaScript?
What is the difference between Undefined and Undeclared in JavaScript?
What is the difference between Call and Apply?
Difference between “ == “ and “ === “ operators?
What is NaN property in JavaScript?
What is the difference between Passed by value and passed by reference?
What is an Immediately Invoked Function in JavaScript?
What are Higher Order Functions?
What is currying in JavaScript?
How many Types of errors are in JavaScript?
What is BOM?
Difference between client-side and server-side?
What is a spread operator?
What are promises in JS?
What is Object Destructuring?
Difference between Async and Promise?
What is the role of deferred scripts?
What is the difference between Event Capturing and Event Bubbling?
What is the Strict mode in JavaScript?
What is the difference between filter and find?
Is JavaScript Case-Sensitive?
How can you convert an object to an array?
What Is Garbage Collection in JavaScript?

React Js:

Differentiate between Real DOM and Virtual DOM.
What is the significance of keys in React?
What is the purpose of render() in React?
What are Props?
What is a state in React?
Differentiate between stateful and stateless components.
What are lifecycle methods in React?
What is the difference between class and functional components?
What is an event in React?
What are Refs in React?
Explain useEffect in detail?
What are Higher Order Components(HOC)?
What are Pure Components?
What is the significance of keys in React?
What is JSX?
What is Redux?
What are the principles of Redux?
How can you access value from Redux?
What is the difference between controlled and uncontrolled components?
What is the difference between useMemo and useCallback?
What is the difference between useEffect and useLayoutEffect?
What is SPA?
What are custom hooks?
When to use util or custom hook?
How do you handle optimization in a large React application?
What is Context API?
Explain the concept of a Portal in React?
How do you handle asynchronous data loading in a React application?
How do you handle localization in a React application?
What is the difference between static and dynamic components in React?
How do you handle server-side rendering in a React application?
What is PropTypes?
Explain the concept of Memoization in React?
Does React have one or two-way binding?
How do you send data from the child to the parent component?
Does useEffect triggers when we change by reference?
How to convert functional components to pure components?
What is Axios interceptor?
How to validate forms in React?
What is unit testing?
What is JWT?

If you find this standalone react app (microservice) helpful then please like ❤ and share it with your friends, follow me on LinkedIn for more helpful resources.

How to create React Micro Frontend/Microservice (example) cloning NY Times sidebar widget

Muhammad Azfar Aslam — Wed, 28 Dec 2022 12:07:37 +0000

Bonjour,
Today, I will try to demonstrate a concept of microservice in react js. We all know that Cloud Microservice Architecture is the favorite architecture of many developers these days. One of the popular examples in production with monthly traffic of 387.17M (Oct, 22) is "Netflix". My example is just a small widget, nothing compared to Netflix of course.

I am going to clone a sidebar widget of NY times.

Steps 1
For this just create a new react app using this command

npx create-react-app ny-times-microservice-widget-clone

Now, download some packages

npm i axios
npm i parcel

Then add the following code in the package.json file.

"build:widget": "parcel build src/index.js --no-source-maps --dist-dir widget",

Now let's start some coding :)

Steps 2

Create a folder components inside the src folder.
Create a new file inside named PostsWidget.jsx
Write the following lines of code.

const PostsWidget = () => {
  return (
    <section>
      <div>
        <h3>Tags</h3>
        <h3>This is a title</h3>
        <p>1 Reactions</p>
      </div>
    </section>
  );
};

export default PostsWidget;

Here we just created a component that will render two headings and one paragraph at the front-end. Let's add some styling (Note: all styling is copied from NY Times).

Create a new file inside components folder named PostsWidget.module.css

.storyWrapper{
 border-bottom: 1px solid #dfdfdf;
 padding: 16px 0px
}

.subHeading{
    color: #727272;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.35em !important;
    letter-spacing: 1px !important;
    margin-bottom: 0.25rem;
}

.mainHeadind{
    color: #121212;
    font-size: 1.375rem;
    line-height: 1.2em;
    letter-spacing: 0.01em;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

.reactions{
    color:  #727272;
    font-size: 0.625rem;
    line-height: 1.25em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    margin-top: 0.25rem;
}

import styles from "./PostsWidget.module.css";
...
<h3 className={styles.subHeading}>Tags</h3>
<h3 className={styles.mainHeadind}>This is a title</h3>
<p className={styles.reactions}>1 Reactions</p>
...

Steps 3
API integration, I am using dummyjson.com for dummy data.

const [articles, setArticles] = useState([]);
...
useEffect(() => {
    axios
      .get(`https://dummyjson.com/posts?skip=0&limit=5`)
      .then(function (response) {
        console.log("response", response?.data);
        setArticles(response.data);
      })
      .catch(function (error) {
        setError("error");
      });
  }, [limit, skip]);
...

Step 4
A div with data attributes to pass props and render this widget.
<div class="post-widget" data-skip="0" data-limit="5"></div>

Step 5
Targeting this div and passing props to our component. Go to src/index.js. Now, we'll use a JavaScript selector (querySelectorAll) to target the div. Then we will loop through it so we can render this widget as many times as we want on the same page.

...
import PostsWidget from './components/PostsWidget.jsx';

const widgets = document.querySelectorAll('.post-widget')

widgets.forEach(widget => {
    ReactDOM.render(
        <React.StrictMode>
            <PostsWidget widget={widget} />
        </React.StrictMode>,
        widget
    );
})
...

Then, get this prop inside component and passing it to API endpoint.

...
const PostsWidget = ({ widget }) => {
  const skip = widget.getAttribute("data-skip") || 0;
  const limit = parseInt(widget.getAttribute("data-limit") ?? 5);
...
  const [error, setError] = useState(false);

  useEffect(() => {
    axios
      .get(`https://dummyjson.com/posts?skip=${skip}&limit=${limit}`)
      .then(function (response) {
        console.log("response", response?.data);
        setArticles(response.data);
      })
      .catch(function (error) {
        setError("error");
      });
  }, [limit, skip]);

  if (error) {
    return <div>{error}</div>;
  }

now map all the articles

...
{articles?.posts?.map((article) => {
        return (
          <div className={styles.storyWrapper} key={article.id}>
            <h3 className={styles.subHeading}>{article?.tags?.toString()}</h3>
            <h3 className={styles.mainHeadind}>
            {article?.title}
            </h3>
            <p className={styles.reactions}>{article?.reactions} Reactions</p>
          </div>
        );
})}
...

Step 6
Build, a normal react build will create multiple static files but we need a single file for JavaScript and CSS to target this widget. For this purpose, we install Parcel at the start. Let's create a build using this package.

yarn build:widget

Step 7
Host your widget somewhere. For learning purposes, I've served this build locally and used it inside an HTML file to show you guys.

...
<link rel="stylesheet" href="http://192.100.00.00:3000/index.css">
....
<body>
  <div class="post-widget" data-skip="0" data-limit="5"></div>
  <script src="http://192.100.00.00:3000/index.js"></script>
</body>
...

You can find the complete code here. My vscode directory before the build.

My vscode directory after the build.

NY times widget for reference

This is how react widget will look.

What if we need only the JS link and HTML div, no CSS link
Yes, we can do it. just need to add another hook. Go to your PostWidget.js file and write following code

useEffect(() => {
    const fetchCSS = async () => {
      try {
        const response = await axios.get('http://192.100.00.00:3000/index.css');
        const style = document.createElement('style');
        style.textContent = response.data;
        document.head.appendChild(style);
      } catch (error) {
        console.error(error);
      }
    };
    fetchCSS();
  }, []);

This hook will add your CSS code in the head direct. This is one way of doing it, not sure which one is better. Let me know your opinion in the comments.

If you find this standalone react app (microservice) helpful then please like ❤ and share it with your friends, follow me on LinkedIn for more helpful resources.

How to create an equal border with a display grid - Hack (HTML5 and CSS3)

Muhammad Azfar Aslam — Thu, 22 Dec 2022 13:28:35 +0000

We have different types of displays in CSS, the most famous are as follows

Block
Flex
Grid
Table etc.

Today, I want to discuss Grid. We can fully control grid rows and columns. Grid is one of the most used CSS properties to create a Masonry gallery. Recently I was creating a table dynamically whose columns are fixed but the number of rows increases based on the number of items. Therefore, a normal table is not possible for this case scenario. Grid was the solution, I can create table alike layout and generates a dynamically exact number of columns and rows as well. The only problem left was the border. If I use border property of CSS then it will cause a double border between and one single border of the box.

I was using tailwind. A sample code and UI are something like this.

<div class="grid grid-cols-4">
   <div class="border">
      <h3 class="text-center py-6">1</h3>
   </div>
   .....
   .....
</div>

As you guys can see the problem. I searched but no solution was available on the internet. Most of the solutions were about nth-child() but I didn't have a fixed number of items so nth-child() was not for me. I came up with a solution I wanted to share with you guys, I hope maybe it can help anyone. I used a gap and background for the border. So, this is how my code and UI look after this idea.

<div
  class="grid grid-cols-4 bg-black border border-black"
  style="gap: 1px">
    <div class="bg-white">
       <h3 class="text-center py-6">1</h3>
    </div>
    ....
    ....
</div>

Thank you for your time.

Highlight on the new features of Next JS 13 config 2022

Muhammad Azfar Aslam — Tue, 01 Nov 2022 05:32:51 +0000

Welcome to the new era of Next JS 13. I've experienced attending config22 and what a startling presentation by Guillermo Rauch, CEO of Vercel. I believe it is bringing some exceptional new features, and all would love to work with them. Some of the main topics are mentioned below.

Turbopack

Next JS 13 is introducing Turbopack which is the fastest compiler infrastructure for JS and Typescript projects. We are moving to a world where running your app locally and making an incremental change can happen in as little as 10 milliseconds. Building for production will happen in single-digit seconds, even for large code bases. Turbopack is 10x faster updates than Vite, 4x faster cold starts than Webpack, and 700x faster updates than Webpack. Here are some visual comparisons according to the Next JS team.

New Next JS router

Next JS has introduced Layouts in the router. Previously we create a component and use it as a layout. We can either add it inside _app.js or with the help of middleware. But the new router-optimized layout issue means that all the benefits of ISR, static data fetching, service side data fetching, and even SWR are now all in one hybrid solution. Thanks to the new React primitives, we're enabling ergonomic ways to handle loading and error states, streaming UI as it's rendered, and in the future, even mutate data. Here is a visual of the file and folder structure for layout.

Improved Next JS Image and Font component

Improved image component that performs better and maintains its familiar interface. Next JS team has also reimagined how developers use fonts with a brand-new font system developed in collaboration with the chrome team.

This built-in module, not only optimizes your fonts but also removes any external request for improved privacy and performance by eliminating connection setup times to third-party hosts. The new font module can automatically avoid 99% of layout shifts caused by custom fonts and 100% of visual disruption from missing fonts.

Open Graph Images

We all know how much social sharing is important these days. This is also an important part of Social media optimization (SMO). According to a study, Facebook has the highest conversion rate, on the second it's Instagram, and then Twitter, LinkedIn, YouTube, etc.

Next 13, announcing Vercel OG image generation, a new solution for instantaneously generating dynamic social cards. This approach is five times faster than existing solutions.

(All images by Next13 via config22)

How to configure React JS app on WSL2 Windows 10

Muhammad Azfar Aslam — Tue, 18 Oct 2022 13:00:39 +0000

Salut,
If you use a windows machine with windows installed on it but also want to work using Linux/Ubuntu environment. There are mainly three approaches. (There can be more)

Virtual Machine
Dual Boot
WSL

I would recommend you WSL because of two reasons. One, the first two approaches would be required a lot of resources like RAM and Hard Drive memory, etc. WSL consumes minimal resources and secondly, it allows you to export its image and import it on another computer within minutes.

Enable Windows Subsystem for Linux

Open Start on Windows 10.
Search for Turn Windows features on or off and click the top result to open the experience.
Check the “Windows Subsystem for Linux” option.

Click the OK button.
Click the Restart button.

Enable Virtual Machine Platform

Open Start, Search for PowerShell, right-click the top result, and select the Run as administrator option.
Type the following command to enable the Virtual Machine Platform feature and press Enter:



Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform

Install WSL2 on Windows 10

Search for Command Prompt, right-click the top result, and select the Run as administrator option.

Type the following command to install the WSL on Windows 10 and press Enter:



wsl --install

Another way is to go to the Microsoft store and install Ubuntu 18.04.

Once you install Ubuntu run following commands.



sudo apt update



sudo apt-get install curl



curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash



source ~/.bashrc



nvm install 16



sudo apt-get install build-essential

Now go to your home directory and install react js app.

cd /home



npx create-react-app my-app-on-wsl



npm start

You may face a permission error (mostly this occurs with the Next JS app). To resolve this error you need to give app folder permission to your user as well.
I hope this would be helpful for you guys. Do like and follow for more updates.

Custom 'Tooltip' component using Tailwind and React Js

Muhammad Azfar Aslam — Mon, 19 Sep 2022 12:29:28 +0000

Bonjour
I hope you all guys are good in health. I always prefer creating custom components (like a tooltip) instead of libraries because libraries mostly bring extra code. Of course, for major functionality. You should use a library as its code is optimized and provide a variety of possibilities.

Let's come back to our original topic. The reason behind choosing Tailwind instead of bootstrap.

It is Highly Customizable.
It Has Common Utility Patterns.
It Can Be Optimized Using Purge CSS.
It Enables Building Complex Responsive Layouts Freely.
It Facilitates Fluid Community Interaction.

I would not explain these points in detail but I hope they're enough to give an idea.

import React, { ReactNode, useState } from "react";

export const Tooltip = ({ message, children }: { message: string; children: ReactNode }) => {
  const [show, setShow] = useState(false);
  return (
    <div className="relative flex flex-col items-center group">
      <span className="flex justify-center" onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
        {children}
      </span>
      <div className={`absolute whitespace-nowrap bottom-full flex flex-col items-center  group-hover:flex ${!show ? "hidden" : null}`}>
        <span className="relative z-10 p-2 text-xs leading-none text-white whitespace-no-wrap bg-gray-600 shadow-lg rounded-md">
          {message}
        </span>
        <div className="w-3 h-3 -mt-2 rotate-45 bg-gray-600" />
      </div>
    </div>
  );
};

Now, you can simply import this and call it like below

<Tooltip message="Hello, world!">
   <InfoIcon />
</Tooltip>

You can style your tooltip box of any type. Also, it will allow you to style info text which you can not normally with an npm package. I hope it was helpful,
Please like and share this post.
You can also connect with me on LinkedIn 😉

JavaScript: Falsy(False) and Truthy(True) values explanation with example

Muhammad Azfar Aslam — Mon, 15 Aug 2022 13:03:00 +0000

Bonjour, for a long time at beginning of my career I thought some statement is true if two values comparison is equal and false when some condition does not meet. The above statement is not wrong but incomplete. If we don't understand the all possibilities of truly(true) and falsy(false) values, we will not be able to understand all possible solutions/outcomes we can achieve with this concept. I recently came across a problem/challenge posted by "Hackerrank" in which I am going to explain the concept of True and False statements.

So, the problem is to count all socks whose pairs are available in a pile. The pile may also contain a single sock with no pair available.

Input Format

The first line contains an integer representing the number of socks.
The second line contains space-separated integers, the colors of the socks in the pile.

This can be solved by multiple approaches but I am going to use for loop just to explain what I am trying here to share with you guys.

function sockCount(n, ar) {
    let temp = {}
    let count = 0
    for (var i = 0; i < n; i++) {
        temp[ar[i]] = !temp[ar[i]]
        if (!temp[ar[i]]) count++
    }
    return count
}

And I pass values as following

const n = 9;
const ar = [10, 20, 20, 10, 10, 30, 50, 10, 20]
sockCount(n, ar)

So, all values are true except false, 0, -0, 0n, "", null, undefined, and NaN.

At the start, temp is initialized by the empty object. It contains no value. This means if we check anything on this object, it'll return false due to undefined properties. So with all that in mind, we check to see if temp[ar[i]] exists.

Case (No) The object temp does not contain the value stored at ar[i]. So in that case, we want to set the value of storage[ar[i]] to the opposite of its current value, which is undefined. Since undefined is falsy, the opposite is true. So we are setting storage[ar[i]] to true. So if our array is temp = { 1: true, 2: false} and we check for temp[3], we get undefined, so we update temp to { 1: true, 2: false, 3: true}

Case (Yes) If sock color is already in temp array, we inverse its value from true to false.

Case (False check) If we get a false in the current iteration, we just increase the count by one.

I hope you guys grab more clear explanation of falsy and truthy values after reading this article. If you do, do like this post.
But if you loved it? man you gotta connect with me on LinkedIn 😉

DEV Community: Muhammad Azfar Aslam

Implementing Google Publisher Tag Ads in Next.js 15 Single Page Application 2025

The Problem

The Solution

Adding the GPT Script

Ad Banner Component

Ad Component

Ad Configuration

Using AdBanner

Benefits of the Solution

Conclusion

React Design Patterns: Compound Component Pattern

What is the Compound Component Pattern?

Advantages of the Compound Component Pattern

Approach 1

Approach 2

Conclusion

Managing Global State with useReducer and Context API in Next JS 14

Step 1: Setting Up the Context and Reducer

Step 2: Creating the Counter Provider

Step 3: Consuming the Counter Context

Step 4: Creating Components Using the Counter Context

Step 5: Using the Counter Provider in the App

Conclusion

Highlight on the new features of Next JS 14 config 2023

API Driven React-Hook Form (Dynamic Forms)

Table of content

Introduction

Dynamic Form Data

React Hook Form

Text Input Field

Text Area Field

Radio Field

Dropdown Field

CheckBox Field

Error Component

Complete Input Component

JavaScript and React Interview questions (Junior/Mid-level) 2023

JavaScript Questions:

React Js:

Other links:

How to create React Micro Frontend/Microservice (example) cloning NY Times sidebar widget

Other links:

How to create an equal border with a display grid - Hack (HTML5 and CSS3)

Other links:

Highlight on the new features of Next JS 13 config 2022

Turbopack

New Next JS router

Improved Next JS Image and Font component

Open Graph Images

Other links:

How to configure React JS app on WSL2 Windows 10

Other links:

Custom 'Tooltip' component using Tailwind and React Js

JavaScript: Falsy(False) and Truthy(True) values explanation with example