DEV Community: Sarvesh Patil

Microfrontends with React: A Complete Guide from Basics to Advanced

Sarvesh Patil — Tue, 16 Dec 2025 05:55:09 +0000

Microfrontends with React: What I Learned (and Why I Almost Ditched It)

I'm gonna be real with you - when I first heard about microfrontends, it sounded like the solution to literally everything. Independent teams! Deploy without fear! Different frameworks per module!

Spoiler: it's not magic. It's actually pretty complicated. But when it works, it's really good.

What's a Microfrontend Anyway?

Think of it like this - instead of one massive React app that everyone commits to, you're splitting it into smaller React apps that live separately and talk to each other.

The classic example: you have a header component built by the platform team, a product listing built by the commerce team, and a cart built by the checkout team. All deployed independently. All running at the same time on the same page.

That's a microfrontend setup.

Why I Started Using Them (The Real Reasons)

I was working on this e-commerce platform with like 5 different teams, and our main app became a nightmare. 200KB bundle just for vendor dashboard stuff that 90% of users never saw. A change to the header meant rebuilding everything. Deploy conflicts happened every day.

Microfrontends seemed like "okay, each team owns their domain, they ship code independently, no more conflicts."

That part actually works. When you set it up right.

How Module Federation Actually Works

Webpack 5 gave us this thing called Module Federation. It's basically a way to load code from different domains/ports at runtime instead of bundling everything upfront.

Here's what I did:

// Header app (runs on localhost:3001)
// webpack.config.js
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  mode: "production",
  entry: "./src/index",
  output: {
    path: __dirname + "/dist",
    filename: "[name].[contenthash].js",
  },
  devServer: {
    port: 3001,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "header",
      filename: "remoteEntry.js",
      exposes: {
        "./Header": "./src/Header",
      },
      shared: {
        react: { singleton: true, requiredVersion: "^18.0.0" },
        "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
      },
    }),
  ],
};

The important bits:

name: tells other apps "I'm the header app"
exposes: "I'm sharing this component"
shared with singleton: "use MY version of React if you don't have one, don't load React twice"

Then the main app says "I want header":

// Main shell app (localhost:3000)
new ModuleFederationPlugin({
  name: "mainApp",
  remotes: {
    header: "header@http://localhost:3001/remoteEntry.js",
  },
  shared: {
    react: { singleton: true, requiredVersion: "^18.0.0" },
    "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
  },
})

And then you import it like:

import React, { lazy, Suspense } from "react";

const Header = lazy(() => import("header/Header"));

export default function App() {
  return (
    <div>
      <Suspense fallback={<div>loading header...</div>}>
        <Header />
      </Suspense>
      <main>{/* rest of app */}</main>
    </div>
  );
}

This works surprisingly well. The header app loads independently, React only loads once, everything plays nice.

State Management: The Part That Bit Me

Here's where I messed up initially. I thought "oh I can just use Context API across modules!"

Nope.

Context only works within a single React tree. When you lazy-load a component from a different webpack bundle, it's technically a different React root. Your context provider is in shell, but the remote module has its own React instance.

I burned like 3 days figuring that out.

What actually works:

Option 1: URL + localStorage (Simple approach)

// When user logs in in the auth module
const user = { id: 123, name: "Alice" };
localStorage.setItem("user", JSON.stringify(user));
window.location.hash = `#user-logged-in`;

// In other modules, listen to storage events
useEffect(() => {
  const handleStorageChange = (e) => {
    if (e.key === "user") {
      const newUser = JSON.parse(e.newValue);
      setUser(newUser);
    }
  };
  window.addEventListener("storage", handleStorageChange);
  return () => window.removeEventListener("storage", handleStorageChange);
}, []);

Honestly? This works for simple stuff. User logged in, user preferences, basic state. Not great for complex state.

Option 2: Window Events (Better)

// Auth module emits an event
function handleLogin(user) {
  const event = new CustomEvent("app:user-login", { detail: user });
  window.dispatchEvent(event);
}

// Header module listens
useEffect(() => {
  function handleUserLogin(e) {
    setUser(e.detail);
  }
  window.addEventListener("app:user-login", handleUserLogin);
  return () => window.removeEventListener("app:user-login", handleUserLogin);
}, []);

This is better. Each module is independent, they communicate via events. If one crashes, others don't care.

Option 3: Shared State Service (What We Do Now)

// shared-state-service.js - tiny module both import
class StateService {
  constructor() {
    this.listeners = new Map();
    this.state = {
      user: null,
      theme: "light",
      cart: [],
    };
  }

  subscribe(key, callback) {
    if (!this.listeners.has(key)) {
      this.listeners.set(key, []);
    }
    this.listeners.get(key).push(callback);

    return () => {
      // unsubscribe
      const cbs = this.listeners.get(key);
      cbs.splice(cbs.indexOf(callback), 1);
    };
  }

  setState(key, value) {
    this.state[key] = value;
    if (this.listeners.has(key)) {
      this.listeners.get(key).forEach((cb) => cb(value));
    }
  }

  getState(key) {
    return this.state[key];
  }
}

export default new StateService();

Then in your modules:

// Auth module
import stateService from "shared/state-service";

function handleLogin(user) {
  stateService.setState("user", user);
}

// Header module
import stateService from "shared/state-service";
import { useEffect, useState } from "react";

export default function Header() {
  const [user, setUser] = useState(stateService.getState("user"));

  useEffect(() => {
    return stateService.subscribe("user", setUser);
  }, []);

  return <header>Hello {user?.name}</header>;
}

This is what we use now. Tiny, works reliably, each module stays independent.

The Stuff Nobody Talks About

1. Version Conflicts Are Real

You'll have situations where module A needs lodash@4 but module B needs lodash@3. They're in shared, now you've got both in production. Your bundle suddenly jumped 200KB.

What we do: Lock versions at the shell level. All remotes MUST use the versions we specify.

2. Error Handling Is Painful

const Header = lazy(() =>
  import("header/Header").catch((err) => {
    console.error("header load failed", err);
    // Return fallback component
    return { default: () => <div>Header unavailable</div> };
  })
);

If the header app is down in production, your entire page doesn't break. But you need to handle this explicitly.

3. Local Development Gets Messy

Running header on 3001, sidebar on 3002, main app on 3000? You need a script that starts all three. DevTools become confusing. Debugging is annoying because code's spread across tabs.

We use docker-compose for local dev now.

When Microfrontends Actually Make Sense

Multiple independent teams that deploy on different schedules
Large apps where different domains truly don't talk to each other much
Different performance requirements (cart is performance-critical, admin dashboard isn't)

When They're Overkill

Small team, single app
Heavy cross-domain state sharing
When you actually LIKE your monolith

Honestly? We use it now because we have to, and it works. But if I could go back, I'd probably keep the main app as a monolith and only use microfrontends for truly independent features (like admin dashboard as a separate app).

Real Gotchas I Hit

CSS collisions - module A sets body { font-size: 16px }, module B expects 18px. Use CSS modules or shadow DOM
Bundle duplication - forgot to mark React as shared, loaded it 3 times. Page was 500KB instead of 200KB
CORS issues - remoteEntry.js wasn't being served with right headers, everything failed silently
State out of sync - one module cached user data, other got new data, confusion everywhere

What I'd Do Differently

If I were starting over, I'd:

Keep it monolithic until you genuinely need microfrontends
Start with just 2-3 remotes, not 10
Have a shared library for state service from day one
Use feature flags to gradually roll out each module
Have ONE person own the shell/orchestration code

Resources That Actually Helped

Module Federation docs are decent
Zack Jackson's talks are gold
Honestly, your own code is the best teacher

Microfrontends aren't the future for everyone. They're a tool that solves specific problems really well. Just don't use them because they sound cool.

Learned that the hard way.

The Definitive Guide to Updating Node.js Dependencies in 2025 (Without Losing Your Mind)

Sarvesh Patil — Sun, 14 Dec 2025 09:13:20 +0000

Long story short: You are entering a world of pain.

If you've just opened a repo that hasn't been touched in six months and decided to "quickly update packages," you know exactly what I'm talking about. It starts with good intentions and ends with you questioning your career choices at 2 AM.

But ignoring it isn't a strategy—it's just technical debt compounding daily.

Here is the no-nonsense workflow to getting your green checkmarks back without blowing up production.

Phase 1: Know Your Enemy

Before you touch the terminal, you need to understand why things break.

SemVer (Semantic Versioning): It's a trust exercise.

Patch/Minor (Green/Yellow): Should be backwards compatible. Usually safe.
Major (Red): The author definitely broke something on purpose. Proceed with caution.

Node Version Drift: If you are still running Node 16 (or older), stop. You are running on unmaintained software. Most modern libraries now require Node 20 or 22 minimum.

The "Ghost" Package: Sometimes a package is just... gone. The maintainer quit. You might have to rip it out entirely.

Phase 2: The Setup

Do not start upgrading without these two safety nets.

1. Engine Locking

Stop your coworkers (or your future self) from trying to run your Node 22 project on Node 14. Add this to your package.json immediately:

"engines": {
  "node": ">=20.0.0",
  "pnpm": ">=9.0.0"
}

2. The "Sanity Check"

If you don't have automated tests, you are gambling. Pure and simple. If you have zero tests, write at least one "smoke test" that checks if the app actually boots up before you start messing with dependencies.

Phase 3: The Tools (Stop doing it manually)

If you are manually changing version numbers in package.json, you are wasting your time. We have interactive tools for this now.

If you use pnpm (Standard for 2025):

pnpm update -i

If you use Yarn:

yarn upgrade-interactive

If you use npm: The native npm experience is still lacking here. Grab npm-check-updates (ncu).

npx npm-check-updates -i

Phase 4: The Strategy

When you run those commands, you'll get a list of packages color-coded by how scary the update is.

Here is the playbook:

The "Easy Win" Sweep

Select all the Green and Yellow updates (patch/minor). Hit update. Run your tests. Commit this separately with a message like chore: update non-breaking dependencies.

The Red Zone (Major Updates)

This is where the actual work is.

Rule #1: One at a time.
Rule #2: Read the Changelog. Go to the GitHub releases page and Ctrl+F for "Breaking Changes."
Rule #3: Verify. Fix the code, run the app, ensure it works.

If you try to update 5 major versions at once, you will create a dependency conflict so deep you'll want to delete the repo. Don't be a hero.

Decision Flow

Phase 5: The "Boss Battles"

There are two scenarios that will make you want to quit.

1. Updating Node.js itself

Moving from Node 18 to 22 isn't just a number change. It often breaks binary dependencies (like image processors or encryption tools).

The fix: Usually, you need to nuke your node_modules and lockfile:

rm -rf node_modules pnpm-lock.yaml
pnpm install

2. The Deprecated Package

You see a warning: "This package is deprecated."

This isn't an update task; it's a rewrite. If a library is dead, you have to find an alternative. Do not squeeze this into your maintenance PR. Create a separate ticket for "Replace [Dead Library]" and do it later.

Pro Tip: Automate the misery

Honestly, doing this manually is labor. I feel like I should get paid double every time I resolve a peer dependency conflict.

In 2025, just set up Renovate Bot or GitHub's Dependabot. Configure it to:

Automatically merge patch updates (if tests pass)
Open PRs for major updates so you can review them one by one

Summary

Take it slow. If you have a massive backlog, don't do it all in one Friday afternoon. Chip away at it.

And if you see a red error message... well, welcome to the club.

JavaScript Object Functions Cheat Sheet: Your Ultimate Guide

Sarvesh Patil — Sun, 19 Mar 2023 06:08:51 +0000

Preparing for an interview or just refreshing your Object manipulation skills? This is all you’ll need.

Introduction

JavaScript is a versatile programming language that provides developers with a range of powerful tools to work with. One such tool is an Object.

With this cheat sheet, you’ll be able to quickly and easily reference the most important object functions in JavaScript. Let’s dive straight into it then.

Pre-requisites

What is an Object?
Objects are essential for creating complex data structures and organizing code in Javascript and are the building blocks of any JavaScript program. They allow developers to perform various operations on objects, including adding or removing properties, looping through object properties, and checking for the existence of properties.
What are enumerables in Javascript?
In JavaScript, enumerable is a property attribute that determines whether a property can be iterated over in a for…in loop. If a property is enumerable, it will be listed when you loop through an object’s properties using a for…in loop. The default value of the enumerable property is true. Any property you define on an object is enumerable by default unless you specify otherwise.

Object.defineProperties()

Object.defineProperties() is a built-in JavaScript function that allows you to define multiple properties for an object at once. This function takes two arguments: the object you want to define the properties for, and an object that defines the properties.

There’s a Object.defineProperty() method too, it works similar way for similar use cases just that it can define a single property at a time.

const myObj = {};

Object.defineProperties(myObj, {
  name: {
    value: "Max",
    writable: false
  },
  age: {
    value: 30,
    writable: true
  }
});
console.log(myObj);  // prints {name: "Max", age: 30}

myObj.name = "John"; // throws an error

myObj.age = 31;
console.log(myObj.age); // prints 31

Now, how is it different than assigning properties with dot notation, you might ask :

Object.defineProperties() allows you to define multiple properties at once, whereas assigning key and values with dot notation can only set one property at a time.
Object.defineProperties() provides greater control over the behavior of properties. For example, you can set properties to be read-only or non-enumerable, which is not possible with dot notation.

Object.keys()

Object.keys() is a built-in JavaScript function that returns an array of a given object’s property names. Object.keys() can be useful when you need to loop through an object's properties or access a specific property by name. It's also a handy way to check if an object has any properties at all, as the returned array will be empty if the object has no enumerable properties.

There’s a method Object.getOwnPropertyNames() which returns an array of all the object’s property names, regardless of whether they are enumerable or not. This includes properties created using Object.defineProperty().

const myObj = { name: "Sarvesh", age: 24};

const keys = Object.keys(myObj); //returns ["name", "age"]

Object.defineProperty(myObj, "city", {
  value: "Mumbai",
  enumerable: false,
});
console.log(Object.getOwnPropertyNames(obj)); // Output: ["name", "age", "city"]

Object.values()

Object.values() is a built-in function in JavaScript that allows you to extract the values of an object’s properties and return them in an array.

const myObj = { name: "Sarvesh", age: 24, city: "Mumbai" };

const values = Object.values(myObj); // returns [ 'Sarvesh', 24, 'Mumbai' ]

Object.entries()

Object.entries() method is a built-in function in JavaScript that allows you to get an array of all the property key-value pairs of an object. The returned array contains sub-arrays, where each sub-array represents a property of the object and consists of two elements: the property name (key) and the corresponding value.

const myObj = { name: "Sarvesh", age: 24, city: "Mumbai" };

const entries= Object.entries(myObj); 
// returns [[ 'name', 'Sarvesh' ], [ 'age', 24 ], [ 'city', 'Mumbai' ]]

Object.fromEntries()

Object.fromEntries() is a built-in JavaScript function that creates an object from an array of key-value pairs. It takes an iterable (such as an array) containing key-value pairs and returns a new object with those pairs as properties. So basically, it's just the reverse of Object.entries().

const entries = [["name", "Max"], ["age", 30], ["city", "Mumbai"]];

const obj = Object.fromEntries(entries);
console.log(obj); // output: { name: "Max", age: 30, city: "Mumbai" }

Object.assign()

Object.assign() is a way to combine the properties of different objects into a new object without changing the original objects. This function is useful when you need to merge two or more objects into a single object.

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const mergedObj = Object.assign(obj1, obj2);
// returns {a: 1, b: 2, c: 3, d: 4}

Object.freeze()

Object.freeze() is a built-in function that freezes an object, preventing any modifications to its properties. This function is useful when you want to prevent accidental changes to an object.

const myObj = { name: "John", age: 30, city: "New York" };
Object.freeze(myObj);

myObj.name = "Jane"; 
// throws an error because the object is frozen

Object.isFrozen()

Object.isFrozen() determines if an object is frozen.

const obj = {}
Object.isFrozen(obj) // false

Object.freeze(obj)

Object.isFrozen(obj) //true

Object.seal()

Object.seal() is a built-in function that seals an object, preventing the addition or removal of properties.

Now how is this different from Object.freeze(), you might ask:

Object.freeze() is more restrictive than Object.seal()When an object is frozen, its properties cannot be added, deleted, or modified in any way. When an object is sealed, its properties can still be modified, but they cannot be added or deleted.
Object.freeze() affects all levels of an object’s properties, while Object.seal() only affects the object’s immediate properties. This means that if an object has nested objects as properties, Object.freeze() will prevent changes to those nested objects as well.

In layman's language, freezing an object means that its properties cannot be changed, while sealing an object only prevents the addition or deletion of properties.

const myObj = { name: "Sarvesh", age: 24, city: "Mumbai" };
Object.seal(myObj);

myObj.name = "Max"; // allowed with seal, not with freeze
myObj.gender = "Male"; // throws an error because the object is sealed

Object.isSealed()

Object.isSealed() determines if an object is sealed.

const obj = {}
Object.isSealed(obj) // false

Object.seal(obj)

Object.isSealed(obj) // true

Object.create()

Object.create() is a built-in function in JavaScript that creates a new object with the specified prototype object and properties.

const person = {
  name: "",
  age: 0,
  greet: function() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }
};

const john = Object.create(person);
john.name = "Max";
john.age = 24;

john.greet(); // Output: Hi, my name is Max and I'm 24years old.

In this example, we create an object person with three properties: name, age, and greet. We then create a new object john using Object.create(person), which sets person as the prototype object for john. This means that john inherits all the properties and methods of person.

We then set the name and age properties of john, and call the greet method, which outputs a message using the name and age properties of the john object.

Object.getPrototypeOf()

As Object.create() creates a new object with the specified prototype, Object.getPrototypeOf() returns the prototype of an object. Therefore, we can say that Object.getPrototypeOf() is the reverse of Object.create()

const proto = { a: 1 }
const obj = Object.create(proto)

obj.b = 2 // obj = { b: 2 }
Object.getPrototypeOf(obj) // { a: 1 }

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor() is a built-in function in JavaScript that returns an object containing the descriptor for a specific property of an object. The descriptor provides information about the property, such as whether it is writable or enumerable.

There’s a Object.getOwnPropertyDescriptors() method too, it works similar way for similar use cases just that it can define multiple properties of the object at a time.

const myObj = {
  name: 'Max',
  age: 30,
  city: 'Mumbai'
};

const descriptor = Object.getOwnPropertyDescriptor(myObj, 'name');

console.log(descriptor);
//returns { value: 'Max', writable: true, enumerable: true, configurable: true }


const descriptorS = Object.getOwnPropertyDescriptors(myObj)

console.log(descriptors)
//Outputs
{
//   name: { value: 'Max', writable: true, enumerable: true, configurable: true },
//   age: { value: 30, writable: true, enumerable: true, configurable: true },
//   city: { value : "Mumbai", writable:true, enumerable: true, configurable: true }
// }

Object.preventExtensions()

Object.preventExtensions() is a built-in function in JavaScript that prevents new properties from being added to an object.

const obj = { a: 1 }
Object.preventExtensions(obj)

Object.defineProperty(obj, 'b', { value: 2 }) //throws an error

Object.isExtensible()

Object.isExtensibles() is a built-in function in JavaScript that determines whether an object can have new properties added to it.

const obj = {}
Object.isExtensible(obj) // true

Object.preventExtensions(obj)

Object.isExtensible(obj) // false

Object.prototype.hasOwnProperty()

Object.prototype.hasOwnProperty() is a built-in function in JavaScript that returns boolean indicating whether an object has the specified property.

const obj = { a: 1 }

obj.hasOwnProperty('a') // true
obj.hasOwnProperty('b') // false

Object.prototype.isPrototypeOf()

Object.prototype.isPrototypeOf() is a built-in function in JavaScript that checks if an object exists in another object’s prototype chain.

const proto = { a: 1 }

const obj = Object.create(proto)
proto.isPrototypeOf(obj) // true

Object.prototype.propertyIsEnumerable()

Object.prototype.propertyIsEnumerable() is a built-in function in JavaScript that checks if object exists in another object’s prototype chain.

const obj = { a: 1 }
const arr = ['a']

obj.propertyIsEnumerable('a') // true
arr.propertyIsEnumerable(0) // true
arr.propertyIsEnumerable('length') // false

Resources

Object - JavaScript | MDN

You may check if an Object method is still supported by a range of browsers or is redundant on :
Can I use... Support tables for HTML5, CSS3, etc

Conclusion

In conclusion, understanding the various methods available on the Object prototype in JavaScript is essential for writing clean and efficient code.

In this blog post, we’ve covered a wide range of methods available on the Object prototype, including Object.keys(), Object.values(), Object.entries(), Object.assign(), Object.freeze(), Object.seal(), Object.create(), Object.defineProperty(), Object.defineProperties(), Object.getPrototypeOf(), Object.setPrototypeOf(), and Object.is(). By understanding the purpose and functionality of each of these methods, developers can make more informed decisions about which methods to use in their code.

Subscribe to my (free) weekly newsletter about writing and web development — https://sarveshh.beehiiv.com/subscribe

If you liked this, you might enjoy:

bootcamp.uxdesign.cc

A Comprehensive guide to Next.JS routing | by Sarvesh | Mar, 2023 | Medium

Sarvesh ・ Mar 10, 2023 ・
sarveshh.Medium

Next.js Routing: A Comprehensive Guide to Building Single-Page Applications

Sarvesh Patil — Sat, 04 Mar 2023 09:02:02 +0000

Next.js is a powerful framework that makes building single-page applications (SPAs) easy and intuitive. One of its key features is its built-in routing system, which allows you to create complex navigation structures and manage page transitions with ease. In this article, we’ll explore Next.js routing and show you how to use it to build SPAs that are fast, responsive, and easy to navigate.

Introduction to Next.js routing

Next.js routing is a built-in feature that allows you to create single-page applications that are fast, responsive, and easy to navigate. It supports traditional routing, dynamic routing, nested routing, and custom routes.

Traditional routing is based on the file system, where each file inside the pages directory represents a route. Dynamic routing allows you to create pages with variable parameters. Nested routing *enables you to create complex navigation structures. *Custom routes allow you to create custom URL structures. By leveraging Next.js routing, you can manage page transitions, trigger animations or other effects, and create SEO-friendly URLs.

In this article, we'll explore each type of routing in detail and show you how to use them to build engaging and dynamic single-page applications.

Static Routing

Static routing is the most basic and straightforward way of defining routes. It is based on the file system, where each file inside the pages directory represents a route. This means that when you create a new file in the pages directory, it automatically becomes a new route in your application. Static routing is ideal for simple applications that don't require dynamic content.

Example:

Let’s say you want to create a simple application that has three pages: home, about, and contact. To do this, you would create three files in the pages directory: index.js, about.js, and contact.js. The index.js file would represent the home page, the about.js file would represent the about page, and the contact.js file would represent the contact page.

When you run the application and navigate to the root URL, Next.js will automatically render the index.js file and display the home page. If you navigate to /about, Next.js will render the about.js file and display the about page, and so on. This is the basic concept of static routing in Next.js.

Dynamic Routing

Dynamic routing is a more advanced feature in Next.js that allows you to create pages with variable parameters. This means that you can create pages that display different content based on the URL parameters. Dynamic routing is achieved by using square brackets in the file name, like [id].js, and then using the useRouter hook to access the dynamic parameters and fetch data based on them.

Example:

Let’s say you want to create a blog application where each blog post has a unique ID. Instead of creating a new file for each blog post, you can use dynamic routing to create a single file that displays the content for each blog post based on the ID in the URL. To do this, you would create a file called blog/[id].js in the pages directory.

When a user navigates to /blog/123, Next.js will render the blog/[id].js file and pass the value 123 as a parameter. You can then use the useRouter hook to access the id parameter and fetch the content for the blog post with that ID. This allows you to create a dynamic and scalable blog application without the need for creating a new file for each blog post.

Nested Routing

Nested routing in Next.js allows you to create complex navigation structures by nesting routes inside each other. This means that you can create pages that are accessible through multiple URLs, and also have multiple pages inside a single parent page. Nested routing is achieved by creating subdirectories inside the pages directory, and then creating files inside those subdirectories to represent the nested routes.

Example:

Let’s say you have a product catalog application where each product belongs to a specific category and has a unique ID. You can use nested routing to create a structure like /products/category-1/123, /products/category-2/456, etc. To do this, you would create a subdirectory called products inside the pages directory, and then create a subdirectory inside products called [category]. Inside the [category] subdirectory, you would create a file called [id].js.

When a user navigates to /products/category-1/123, Next.js will render the products/[category]/[id].js file and pass the values category-1 and 123 as parameters. You can then use the useRouter hook to access the category and id parameters and fetch the details for that specific product. This allows you to create a dynamic and scalable product catalog application with nested routing in Next.js.

Custom Routes

Custom routing in Next.js allows you to define your own routing rules and patterns for your application. This means that you can create custom URLs that don’t follow the default routing rules in Next.js. Custom routing is achieved by defining a rewrites property in the next.config.js file.

Example:

Let’s say you want to create a custom URL for a specific page in your application. You can define a rewrite rule in next.config.js that maps the custom URL to the actual page in your application.

Here’s an example of how to create a custom URL /about for the pages/about.js page:



    // next.config.js

    module.exports = {
      async rewrites() {
        return [
          {
            source: '/about',
            destination: '/about',
          },
        ];
      },
    };

When a user navigates to /about, Next.js will rewrite the URL to match the destination and render the pages/about.js page. This allows you to create custom URLs that are easy to remember and share with others.

Conclusion

Next.js routing is a powerful tool for building SPAs that are fast, responsive, and easy to navigate. By leveraging its built-in routing system, you can create complex navigation structures, manage page transitions, and customize your URL structure to fit your application's needs. By following the examples and tips outlined in this article, you can take your Next.js application to the next level and create an engaging user experience for your audience.

How to optimise SEO in NextJs

Sarvesh Patil — Tue, 28 Feb 2023 18:13:42 +0000

In a digital world where visibility is everything, it’s crucial to optimize your website for search engine rankings. If you’re using Next.js to build your web app, this guide will show you the best practices to increase your website’s SEO. From meta tags and structured data to dynamic imports and server-side rendering, this article will help you make your Next.js app more search engine-friendly.

Introduction

Search Engine Optimization (SEO) is an essential part of web development. The goal is to make your website more visible to search engines and increase traffic to your site. While there are many factors that contribute to good SEO, optimizing your Next.js app for SEO can be a bit tricky. In this article, we will explore some of the best practices for optimizing your Next.js app for SEO.

Use Meta tags
Meta tags are HTML tags that describe the content of a webpage. They provide search engines with important information about your page, such as the title, description, and keywords. In Next.js, you can use the “Head” component to add meta tags to your pages.

  import Head from 'next/head'

    function MyPage() {
      return (
        <div>
          <Head>
            <title>My Page Title</title>
            <meta name="description" content="This is a description of my page." />
            <meta name="keywords" content="my, page, keywords" />
            <meta name="robots" content="index, follow" />
            <meta name="author" content="My Name" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          </Head>
          <p>This is my page content.</p>
        </div>
      )
    }

The title tag is the most important meta tag for SEO, as it tells search engines what the page is about. The description tag provides a short description of the page, and the keywords tag lists the main keywords associated with the page. The robots tag tells search engine robots whether or not to index the page and whether or not to follow the links on the page. The author tag can be used to specify the author of the page, and the viewport tag specifies how the page should be scaled on different devices.

Next.js provides the Head component, which is a built-in component that allows you to set the head tags of a page. The Head component is similar to setting the head tag in React, but it has some advantages:

Server-side rendering: When you use the Head component in Next.js, the head tags are rendered on the server and sent to the client as part of the HTML document. This can improve the performance of your app, as the browser can start rendering the page immediately, without waiting for JavaScript to execute.
Dynamic head tags: With the Head component, you can set head tags dynamically based on the state of your app. This can be useful if you need to set different meta tags for different pages or based on user input.
SEO optimization: The Head component provides a convenient way to set meta tags that can help with SEO. By setting the title, description, and keywords tags, you can provide search engines with valuable information about your page that can help it rank higher in search results.
Multiple head tags: The ability to use the Head component in multiple pages and the built-in server-side rendering in Next.js makes it easier to maintain and update the head tags across a large website or web application.

Implement Structured Data
Structured data is a type of data that is organized in a specific way to help search engines understand the content of your webpage. This can improve your chances of appearing in rich snippets, which are more prominent search results that include additional information such as ratings, reviews, and images.

    import Head from 'next/head'

    function MyPage() {
      const structuredData = {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "My Product",
        "image": "https://example.com/my-product.jpg",
        "description": "This is my product description.",
        "sku": "1234567890",
        "brand": {
          "@type": "Brand",
          "name": "My Brand"
        },
        "offers": {
          "@type": "Offer",
          "url": "https://example.com/my-product",
          "priceCurrency": "USD",
          "price": "10.00",
          "availability": "https://schema.org/InStock"
        }
      };

      return (
        <div>
          <Head>
            <script
              type="application/ld+json"
              dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
            />
          </Head>
          <p>This is my page content.</p>
        </div>
      )
    }

Optimize Images
Images can have a big impact on your website’s SEO. By optimizing your images for search engines, you can improve your chances of appearing in image search results. To optimize your images, you should make sure they are properly sized, compressed, and have descriptive file names and alt tags.

import Image from 'next/image'

    function MyPage() {
      return (
        <div>
          <h1>My Page</h1>
          <Image
            src="/my-image.jpg"
            alt="My Image"
            width={500}
            height={300}
          />
          <p>This is my page content.</p>
        </div>
      )
    }

In this example, we’re using the next/image component to display an image on the page. We've specified the src attribute as the URL of the image file, and we've also set the alt attribute for accessibility purposes.

The next/image component also provides several benefits over using a regular img tag:

Automatic optimization: The next/image component automatically optimizes images by compressing and resizing them to the appropriate size. This can reduce the file size of the image and improve the performance of your app.
Lazy loading: The next/image component also supports lazy loading, which means that the image is only loaded when it becomes visible on the screen. This can improve the initial page load time and reduce the amount of data that needs to be downloaded by the user.
Automatic format selection:The next/image component automatically selects the best image format based on the user's browser and device. This can improve the performance of your app by reducing the file size of the image and ensuring that it's displayed correctly on all devices.
Automatic quality selection: The next/image component automatically selects the optimal image quality based on the user's device and connection speed. This can ensure that the image is displayed at the highest possible quality without sacrificing performance.
Automatic caching: The next/image component automatically caches images on the server and the client, which can improve the performance of your app by reducing the number of requests to the server.

Use Dynamic Imports
Dynamic imports are a powerful feature of Next.js that can help improve your website’s performance and SEO. By using dynamic imports, you can load JavaScript code and components only when they are needed. This can help reduce the initial load time of your page, which is important for both user experience and SEO.

import dynamic from 'next/dynamic'

    const MyComponent = dynamic(
      () => import('../components/MyComponent'),
      { ssr: false }
    )

    function MyPage() {
      return (
        <div>
          <MyComponent />
          <p>This is my page content.</p>
        </div>
      )
    }

Implement Server-Side Rendering
Server-side rendering (SSR) is a technique that can improve your website’s SEO by rendering your pages on the server before sending them to the client. This can improve the speed and performance of your website, as well as make it more search engine-friendly. In Next.js, you can use the “getServerSideProps” function to implement SSR.

    function MyPage(props) {
      return (
        <div>
          <p>This is my page content.</p>
          <ul>
            {myData.map((item) => (
              <li key={item.id}>{item.name}</li>
            ))}
          </ul>
        </div>
      )
    }

 export async function getServerSideProps(context) {
      const res = await fetch('https://api.example.com/my-data')
      const data = await res.json()

      return {
        props: {
          myData: data
        }
      }
    }

The getServerSideProps function is a special function in Next.js that runs on the server every time a page is requested. It fetches data from an external API and passes it to the MyPagecomponent as a prop.
The MyPage component receives the myData prop and renders it as an unordered list using the map function. Each item in the list is a li element with the name property of the myData object as its content.

This example demonstrates how to implement server-side rendering (SSR) in a Next.js app. By fetching data on the server and passing it to the component as a prop, the data is available when the page is first loaded, making it more SEO-friendly than if the data were fetched client-side.

Conclusion

Optimizing your Next.js app for SEO can be challenging, but it’s worth the effort. By following these best practices, you can help search engines understand your content and improve your website’s visibility. By including meta tags, implementing structured data, optimizing images, using dynamic imports, and implementing server-side rendering, you can give your website a boost in search engine rankings.

Thank you for reading this far. Subscribe to my newsletter for posts just like this.

Subscribe | The Pen, Pixel & Profit Club

Join 1,187+ coders, entrepreneurs, and creators for a weekly newsletter featuring web dev tips, business case studies, how-to stories, writing deconstructions, and genius AI tools with usage instructions. Get inspiration and practical advice for your projects. Sign up now!

sarveshh.beehiiv.com

How to Implement ARIA Tags for Better Accessibility: A Comprehensive Guide for Web Developers

Sarvesh Patil — Mon, 27 Feb 2023 07:20:06 +0000

Introduction

As web developers, it’s essential to make sure your website is accessible to everyone. One of the ways to achieve this is by implementing Accessible Rich Internet Applications (ARIA) tags. ARIA tags are HTML attributes that help make web content more accessible to people with disabilities. In this blog post, we’ll cover everything you need to know about implementing ARIA tags, from the basics to advanced topics.

Let’s start with the basics. ARIA tags are designed to provide additional information to assistive technology, such as screen readers. They help users with disabilities understand the content on your website better.

Some basic ARIA tags that you can start using today include:

ARIA labels and descriptions

aria-label

This attribute is used to provide an accessible name for an element that would otherwise not have a name. You can use this attribute to label buttons, links, and form controls.

<button aria-label="Search" type="submit">Search</button>

aria-labelledby

This attribute is used to provide an accessible name for an element that is related to another element on the page. The value of this attribute should be the ID of the element that provides the accessible name.

<label id="searchLabel">Search:</label>
<input type="text" aria-labelledby="searchLabel">

aria-describedby

This attribute is used to provide additional information about an element, such as instructions or descriptions. The value of this attribute should be the ID of the element that provides the additional information

<label for="password">Password:</label>
<input type="password" id="password" aria-describedby="passwordDesc">
<span id="passwordDesc">Please enter a password that is at least 8 characters long.</span>

ARIA roles

ARIA roles are a set of predefined attributes that can be used in HTML and JavaScript to define the role or function of an element on a web page.

In JavaScript, ARIA roles can be added to elements using the setAttribute() method, which allows you to specify the role for the element.

By setting the role of an element to the appropriate ARIA role, you can ensure that it is properly identified by assistive technologies and provide a more accessible user experience. It’s important to note that ARIA roles should only be used when necessary, and should be used in conjunction with other accessibility best practices to ensure that your website is fully accessible to all users.

role=”button”

The button role is for clickable elements that trigger a response when activated by the user.

const myDiv = document.getElementById("myDiv");
myDiv.setAttribute("role", "button");

//OR

<div role="button">Search</div>

More examples of roles that can be assigned to elements are:

role=”heading”

The heading role indicates that an element is a heading, and the aria-level attribute can be used to indicate the level of the heading (1 through 6).

<h1 role="heading" aria-level="1" >This is a heading</h1>
<h2 role="heading" aria-level="2" >This is a heading</h2>
<h3 role="heading" aria-level="3" >This is a heading</h3>
<h4 role="heading" aria-level="4" >This is a heading</h4>
<h5 role="heading" aria-level="5" >This is a heading</h5>
<h6 role="heading" aria-level="6" >This is a heading</h6>

role=”link”

The link role indicates that an element is a hyperlink, and the href attribute can be used to specify the target URL.

<button href="https://example.com" role="link">Link Text</button>

role=”menu”

The role menu indicates that an element is a menu, and the aria-orientation attribute can be used to specify the orientation of the menu (horizontal or vertical).

<ul role="menu" aria-orientation="horizontal">
  <li role="menuitem"><a href="#">Menu Item 1</a></li>
  <li role="menuitem"><a href="#">Menu Item 2</a></li>
  <li role="menuitem"><a href="#">Menu Item 3</a></li>
</ul>

role=”progressbar”

The role progressbar indicates that an element is a progress bar, and the aria-valuemin, aria-valuenow, and aria-valuemax attributes can be used to specify the current and maximum values of the progress bar.

<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">50%</div>

role=”radiogroup”

The role radiogroup indicates that an element is a group of radio buttons, and the aria-checked attribute can be used to specify the currently selected radio button.

<div role="radiogroup">
  <label><input type="radio" name="option" role="radio" aria-checked="true"> Option 1</label>
  <label><input type="radio" name="option" role="radio"> Option 2</label>
  <label><input type="radio" name="option" role="radio"> Option 3</label>
</div>

role=”region”

The role region indicates that an element is a region of the page, and the aria-label attribute can be used to provide a descriptive label for the region.

<div role="region" aria-label="Main Content">
  <p>This is the main content of the page.</p>
</div>

role=”search”

The role search indicates that an element is a search field, and the aria-label attribute can be used to provide a label for the search field.

<form role="search">
  <label for="search">Search:</label>
  <input type="text" id="search" name="search" aria-label="Search">
  <button type="submit">Submit</button>
</form>

ARIA states and properties

ARIA states and properties refer to attributes that can be used to make web content more accessible to users with disabilities. ARIA state can indicate whether an element is expanded or collapsed, or whether it’s selected or not. ARIA properties provide more specific information about an element.

aria-hidden

This attribute is used to hide an element from screen readers and other assistive technology. This can be useful for decorative or redundant elements that do not provide any meaningful information.

<div class="decorative" aria-hidden="true">
  <img src="decorative-image.png" alt="">
</div>

aria-invalid

This attribute is used to indicate that the value of an input is not valid. This can be useful for form validation and error messages.

<label for="email">Email:</label>
<input type="email" id="email" aria-invalid="true" required>
<div class="error-message">Please enter a valid email address.</div>

aria-checked

Indicates whether an element is checked or not

<!-- Using aria-checked with a checkbox -->
<input type="checkbox" id="example-checkbox" aria-checked="false" />

<!-- Using aria-checked with a button -->
<button id="example-button" aria-checked="true">Selected</button>

aria-disabled

Indicates whether an element is disabled or not.

<!-- Using aria-disabled with a button -->
<button id="example-button" aria-disabled="true">Disabled</button>

aria-expanded

Indicates whether an element is expanded or not.

<!-- Using aria-expanded with a collapsible section -->
<button id="example-button" aria-expanded="false" aria-controls="example-section">Expand</button>
<section id="example-section" aria-hidden="true">Collapsible content</section>

aria-selected

Indicates whether an element is selected or not

<!-- Using aria-selected with a listbox -->
<ul role="listbox">
  <li role="option" aria-selected="true">Option 1</li>
  <li role="option" aria-selected="false">Option 2</li>
  <li role="option" aria-selected="false">Option 3</li>
</ul>

ARIA live regions

ARIA live regions are a set of Accessible Rich Internet Applications (ARIA) attributes that allow web developers to create dynamic, live updates to web content that are accessible to users with disabilities. In JavaScript, ARIA live regions can be used to update portions of a web page without requiring the user to refresh the entire page.

ARIA live regions are particularly useful for web applications that display real-time information, such as news tickers, chat rooms, or sports scores.

To use ARIA live regions in JavaScript, developers can use the aria-live attribute to specify the level of importance and the mode of updating the live region. The aria-live attribute has three possible values: "off", "polite", and "assertive".

The “polite” value indicates that updates to the live region are less urgent and should not interrupt the user’s current task.
The “assertive” value indicates that updates to the live region are more important and should interrupt the user’s current task.
The “off” value means that the live region is not active.

Overall, ARIA live regions in JavaScript are a powerful tool for creating more dynamic and accessible web applications, especially for users with disabilities. By using ARIA live regions, developers can ensure that all users, regardless of their abilities, can access and interact with web content in real-time.

Example:

<div id="live-region" aria-live="polite">
    Initial content.
</div>
<button onclick="updateLiveRegion()">Update Live Region</button>

function updateLiveRegion() {
  var liveRegion = document.getElementById("live-region");
  var newContent = "New content added at " + new Date().toLocaleTimeString();
  liveRegion.innerHTML = newContent;
}

In this example, there is a div element with an id of "live-region". The aria-live attribute is set to "polite" to indicate that the live region should not interrupt the user's current task. The initial content of the live region is "Initial content".

When the user clicks the “Update Live Region” button, the updateLiveRegion() function is called. This function gets the div element with an id of "live-region" using the getElementById() method, and then updates the innerHTML property of the element with the current time. Because the aria-live attribute is set to "polite", the updated content is announced by screen readers without interrupting the user's current task.

This is just a simple example, but it shows how ARIA live regions can be used to provide real-time updates to web content that are accessible to all users, including those with disabilities.

ARIA modal dialogs

ARIA modal dialogs are a type of ARIA tag that can be used in JavaScript to create accessible modal dialogs. Modal dialogs are typically used to present information or requests to users that require immediate attention, such as error messages, confirmations, or notifications.

ARIA modal dialogs are designed to be accessible to users with disabilities, particularly those who use screen readers. They work by temporarily disabling the rest of the page, while the modal dialog is displayed, and by providing information about the dialog to assistive technology. This makes it easier for users with disabilities to understand and interact with the content of the dialog.

To create an accessible modal dialog using ARIA, you can use the role attribute to define the role of the element as a dialog, and the aria-modal attribute to indicate that it is a modal dialog. You can also use other ARIA attributes to provide additional information about the dialog, such as its title, description, and state.

Example:

<button id="open-modal">Open Modal Dialog</button>

<div id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Modal Dialog</h2>
  <p>This is a modal dialog. Press the escape key or click the close button to close the dialog.</p>
  <button id="close-modal">Close</button>
</div>

const openModalButton = document.getElementById('open-modal');
const closeModalButton = document.getElementById('close-modal');
const modal = document.getElementById('modal');

function openModal() {
  modal.style.display = 'block';
  modal.setAttribute('aria-hidden', 'false');
  document.body.style.overflow = 'hidden';
}

function closeModal() {
  modal.style.display = 'none';
  modal.setAttribute('aria-hidden', 'true');
  document.body.style.overflow = 'auto';
}

openModalButton.addEventListener('click', openModal);
closeModalButton.addEventListener('click', closeModal);
modal.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    closeModal();
  }
});

In this example, we have a button that, when clicked, opens a modal dialog. The modal dialog has a role attribute of "dialog" and an aria-modal attribute of "true", which indicate that it is a modal dialog. It also has an aria-labelledby attribute, which references the ID of the title of the dialog, and a close button, which will be used to close the dialog.

In the JavaScript code, we define functions to open and close the modal dialog, and add event listeners to the buttons and the modal to handle user interaction. When the modal dialog is open, we set the aria-hidden attribute of the rest of the page to "true", which makes it inaccessible to screen readers. We also disable scrolling on the page while the modal is open to prevent users from accidentally interacting with the rest of the page.

This is just one example of how you can use ARIA modal dialogs in JavaScript. The key is to use the appropriate ARIA attributes to indicate that the element is a modal dialog and to provide additional information about the dialog to assistive technology. By doing so, you can make your modal dialogs more accessible to users with disabilities.

ARIA tab panels

ARIA tab panels are a way to organize content into tabs, which users can click or tap on to access different sections of a webpage. For example, screen readers can read out the different tabs and their associated content, allowing users with visual impairments to navigate the page more efficiently. ARIA tab panels also provide a more organized and streamlined user interface for all users, improving the overall user experience of a website.

<div role="tabpanel" aria-labelledby="tab1">
  <p>This is the content of the first tab.</p>
</div>
<div role="tabpanel" aria-labelledby="tab2">
  <p>This is the content of the second tab.</p>
</div>

<ul role="tablist">
  <li role="tab" id="tab1" aria-controls="panel1" tabindex="0">Tab 1</li>
  <li role="tab" id="tab2" aria-controls="panel2">Tab 2</li>
</ul>

Best Practices

To ensure that you’re using ARIA tags correctly, it’s essential to follow best practices. Here are some tips to keep in mind when implementing ARIA tags:

Only use ARIA tags when necessary
Use ARIA tags consistently across your website
Test your website with assistive technology to ensure that it’s accessible to people with disabilities

By following these best practices, you can ensure that your website is both accessible and usable for everyone.

Conclusion

In conclusion, implementing ARIA tags is a crucial step in making your website more accessible. By understanding the basics and more advanced topics of ARIA tags, you can make significant improvements in the accessibility of your website. By following best practices, you can ensure that your website is accessible to everyone, regardless of disability or impairment. As an expert in web development, it’s your responsibility to ensure that your website is accessible, and implementing ARIA tags is a great way to achieve this goal.

Thank you for reading this far

Subscribe to my Newsletter for exciting posts just like this.

Subscribe | The Pen, Pixel & Profit Club

sarveshh.beehiiv.com

Originally published at https://blog.sarveshpatil.com

10 Reasons Why Next.js is the Superior Choice over create-react-app for Your Next Project

Sarvesh Patil — Mon, 27 Feb 2023 07:13:54 +0000

Introduction

Are you a front-end developer looking for the best framework for your next project? If you’re considering React, you might be wondering whether to use create-react-app or Next.js. While create-react-app is a popular option, Next.js has several advantages that make it the superior choice

So what is Next.js?

Next.js is an open-source framework built on top of React that provides out-of-the-box server-side rendering, static site generation, and other features to help improve website performance and SEO. It’s flexible and can be used for a wide range of projects, from simple websites to complex applications. Next.js is easy to use, has a large and active community of developers, and is maintained by Vercel, a cloud platform for building and deploying websites and applications.

How server-side rendering faster than client-side rendering?

Server-side rendering is faster than client-side rendering because the server sends a pre-rendered page to the user’s browser instead of waiting for the browser to download and execute JavaScript code to build the page. This results in faster load times, better search engine optimization (SEO), and improved user experience. Next.js makes server-side rendering easy by providing built-in tools and configuration options to help developers optimize the rendering process.

10 reasons why you should use Next.js for your next project

Server-Side Rendering Next.js provides built-in support for server-side rendering, allowing you to pre-render pages on the server and deliver them to the client as HTML, which can improve website performance and SEO. Server-side rendering also makes your website more accessible to users with slow or unreliable internet connections, as it can reduce the amount of time needed to load pages.
Static Site Generation Next.js allows you to generate static HTML pages at build time, which means that your website can be delivered faster and more securely, with fewer server requests. This can be especially useful for websites with static content, such as blogs or portfolios.
API Routes Next.js makes it easy to create API routes without the need for a separate backend server. This feature can be used to retrieve data from a database, access external APIs, or perform any other server-side logic that your website requires.
Automatic Code Splitting Next.js automatically splits your code into smaller chunks, which can speed up your website’s load times. This feature is especially useful for larger projects that require more code, as it can prevent users from having to download the entire website at once.
Improved Routing Next.js provides improved routing capabilities, including dynamic routes and client-side navigation. With dynamic routes, you can create URLs that match a specific pattern, such as /blog/[slug], which can be used to display different content depending on the URL. Client-side navigation allows users to navigate between pages without reloading the entire website, which can improve user experience.
Image Optimization Next.js automatically optimizes images for faster load times and better user experience. This includes features such as lazy loading, which can delay the loading of images until they are needed, and responsive images, which can be resized based on the size of the user’s device.
TypeScript Support Next.js has excellent support for TypeScript, a typed superset of JavaScript that can help improve code quality and reduce bugs. TypeScript provides advanced features such as type checking and interfaces, which can help catch errors before they occur.
Customizable Configuration Next.js allows you to customize its configuration to fit your specific needs. This includes options such as adding custom webpack loaders or configuring the server to use a specific middleware.
Large and Active Community Next.js has a large and active community of developers, who are constantly sharing their experiences and best practices. This can be useful for getting help with specific issues, learning new techniques, or staying up-to-date with the latest developments in the framework.
Easy Deployment Next.js provides easy deployment options, including deployment to Vercel, a cloud platform that specializes in serverless and Jamstack applications. This can make it simple to get your website up and running, without having to worry about server configuration or infrastructure management.

How to get started?

Pre-requisites

ReactJs knowledge is a must: In case you don’t know ReactJS, I suggest you learn that first. There are plenty of resources available online, I will mention some of them down here.
ReactJs official documentation
ReactJs Crash Course
NextJs Resources
NextJs Official Documentation is a great place to learn
NextJs Crash Course

Thank you for reading this far

Subscribe to my Newsletter for exciting posts just like this.

Subscribe | The Pen, Pixel & Profit Club

sarveshh.beehiiv.com

Originally published at https://blog.sarveshpatil.com.

Responsive Web Design: Best Practices and Advanced Techniques

Sarvesh Patil — Mon, 27 Feb 2023 07:10:21 +0000

Creating a responsive website that looks great on any device is a must-have for any modern web designer. In this post, we’ll explore the best practices and advanced techniques for responsive web design.

Use a Mobile-First Approach With the majority of internet traffic now coming from mobile devices, it’s essential to design for mobile first. This approach helps you focus on the most important content and functionality, and ensures that your website is optimized for smaller screens.
Design with a Fluid Grid A fluid grid is an essential component of responsive web design. Instead of using fixed widths for your website’s layout, use a grid system that scales with the screen size. This ensures that your website’s content is always displayed optimally, no matter the screen size.
Use Media Queries for Targeted Styling Media queries allow you to target specific screen sizes and apply custom styling. Use media queries to create different layouts and styles for different devices, ensuring that your website looks great on all screens.
Optimize Images for Performance Images can significantly impact your website’s performance. To ensure your website loads quickly on all devices, it’s essential to optimize your images. Use image compression tools and choose the right image formats to reduce file size without sacrificing quality.
Test Your Design on Different Devices To ensure your design is truly responsive, test it on different devices and screen sizes. Use developer tools or testing tools to check how your website looks and performs on different devices.
Use responsive frameworks and tools Utilize frameworks and tools like Bootstrap, or TailwindCss to streamline your responsive design process and ensure cross-browser compatibility. Bootstrap and Tailwind CSS, for instance, offer pre-built components and styles that you can use to easily create a responsive design. These frameworks also handle cross-browser compatibility, which can be a time-consuming aspect of responsive web design. With these tools, you can focus more on creating unique, custom designs that are optimized for all screen sizes, without worrying about compatibility issues.

Conclusion

In conclusion, responsive web design is an essential skill for any modern web designer. With the tips and techniques we’ve explored in this blog post, you can create a responsive website that looks great on any device. From a mobile-first approach to fluid grids and media queries, these best practices will help you take your web design skills to the next level.

Thank you for reading this far

Subscribe to my Newsletter for exciting posts just like this.

Subscribe | The Pen, Pixel & Profit Club

sarveshh.beehiiv.com

Originally published at https://blog.sarveshpatil.com.

Mastering CSS Flexbox: From Basics to Advanced Techniques

Sarvesh Patil — Sat, 18 Feb 2023 10:44:44 +0000

Introduction

Are you tired of using tables, floats, and other traditional CSS layout methods that just don’t cut it anymore? It’s time to embrace the power of CSS Flexbox! With Flexbox, you can create complex and dynamic layouts that adapt to different screen sizes and device orientations. This tutorial will take you through all the basics of CSS Flexbox and introduce you to advanced techniques for creating truly stunning web designs.

If you’re the ‘learn by doing’ type, I suggest you check out this game based on flexbox. You’ll understand the whole module in no time.
Flexbox Froggy

In this tutorial, you will learn about the following Flexbox properties and their respective code examples:

Flexbox Properties for Parent (container)

display

Defines the container as a flex container and enables Flexbox properties to be applied to its children.

.container {
    display: flex; /* or inline-flex */
}

flex-direction

Sets the direction in which flex items are placed inside the container. Options include row, row-reverse, column, and column-reverse.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

Determines whether flex items should wrap or not when there is not enough space on the main axis. Options include nowrap, wrap, and wrap-reverse.

nowrap (default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

.container { flex-wrap: nowrap | wrap | wrap-reverse; }

flex-flow

Shorthand for setting both flex-direction and flex-wrap at once.

.container {
  flex-flow: column wrap;
}

justify-content

justify-content is a CSS Flexbox property that aligns flex items along the main axis of the container. It has six possible values:

flex-start: This value aligns the items to the start of the container. If the container’s main axis is horizontal, the items will be aligned to the left. If the main axis is vertical, the items will be aligned to the top.
flex-end: This value aligns the items to the end of the container. If the container’s main axis is horizontal, the items will be aligned to the right. If the main axis is vertical, the items will be aligned to the bottom.
center: This value centers the items along the main axis of the container. If the main axis is horizontal, the items will be centered horizontally. If the main axis is vertical, the items will be centered vertically.
space-between: This value evenly distributes the items along the main axis of the container, with the first item aligned to the start and the last item aligned to the end. The remaining items are spaced evenly between them.
stretch: This value stretches the items to fill the container along the main axis. This means that the items will be expanded or contracted to fill the available space.
space-around: This value evenly distributes the items along the main axis of the container, with equal spacing between them. There is also spacing at the start and end of the container, so the items are not aligned with the edges.

.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch }

align-items

The align-items property is used to vertically align the flex items inside the container. Here are the descriptions for each value:

flex-start: This value aligns the flex items at the top of the container. The items are aligned based on the cross-start margin edge of the flex items.
flex-end: This value aligns the flex items at the bottom of the container. The items are aligned based on the cross-end margin edge of the flex items.
center: This value aligns the flex items at the center of the container. The items are aligned based on the midpoint of the cross-start and cross-end margin edges of the flex items.
stretch: This value stretches the flex items to fill the container vertically. The items are stretched to fit the container height based on their flex-grow and flex-shrink values.
baseline: This value aligns the flex items such that their baselines align. The items are aligned based on their baseline, which is defined by the font-size and line-height properties.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline
}

align-content

The align-content property is used to vertically align multiple lines of flex items inside the container when there is extra space along the cross-axis. It only applies when there are multiple lines of flex items, created either by flex-wrap: wrap or when there is not enough space for all items in a single line. Here are the descriptions for each possible value:

flex-start: This value aligns the lines of flex items at the top of the container.
flex-end: This value aligns the lines of flex items at the bottom of the container.
center: This value centers the lines of flex items vertically in the container.
space-between: This value distributes the lines of flex items evenly along the cross-axis, with the first line at the top of the container and the last line at the bottom.
space-around: This value distributes the lines of flex items evenly along the cross-axis, with equal space between each line and the top and bottom of the container.
stretch: This value stretches the lines of flex items to fill the container vertically. The lines are stretched to fit the container height based on their flex-grow and flex-shrink values

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline 
}

gap, row-gap, column-gap

gap, row-gap, and column-gap are CSS properties used in conjunction with the CSS flexbox layout. These properties allow you to add spacing between flex items in a more efficient way than using margins.

gap: This property specifies the size of the gap between flex items in both the horizontal and vertical directions. It is a shorthand property for row-gap and column-gap and sets the value for both.

Example:

.container {
  display: flex;
  gap: 10px;
}

This code sets a gap of 10px between all flex items inside the container.

row-gap: This property specifies the size of the gap between flex items in the vertical direction only.

Example:

.container {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

This code sets a gap of 10px between all rows of flex items in the container.

column-gap: This property specifies the size of the gap between flex items in the horizontal direction only.

Example:

.container {
  display: flex;
  column-gap: 10px;
}

This code sets a gap of 10px between all columns of flex items in the container. Note that this property only works if the flex-wrap property is set to wrap or wrap-reverse.

Flexbox properties for children (items)

order

The order property is used to change the order of flex items within a container. By default, all flex items have an order value of 0. You can set the order property to a positive or negative integer value to change the order of the flex item.

Example :

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-1 {
  order: 2;
}

.item-2 {
  order: 1;
}

.item-3 {
  order: 3;
}

.item-4 {
  order: 4;
}

In this example, we have a container with four flex items. We use the order property to change the order of the items.

.item-1 has an order value of 2, which means it will be displayed after .item-2.

.item-2 has an order value of 1, which means it will be displayed first.

.item-3 has an order value of 3, which means it will be displayed after .item-1.

.item-4 has an order value of 4, which means it will be displayed last.

Using the order property, we can rearrange the order of the flex items inside the container without changing the HTML structure.

flex-grow

The flex-grow property is used to specify how much a flex item should grow relative to the other flex items inside the same container. It is a unitless value that represents the proportion of the available space that the item should take up.

If all items have flex-grow set to 1, the container’s remaining space will be distributed equally to all children. If one of the children has a value of 2, that child will take up twice as much space as the others (or it will try, at least).

Here is an example:

.container {
  display: flex;
  width: 500px;
}
.item {
  flex-grow: 1;
  background-color: red;
}

In this example, the container has a width of 500px and contains three flex items with the class .item. The flex-grow property is set to 1 for each item. This means that each item should take up an equal amount of the available space in the container. Since there are three items, each item will take up one-third of the available space.

If we add another item to the container and set its flex-grow property to 2, like this:

.container {
  display: flex;
  width: 500px;
}

.item {
  flex-grow: 1;
  background-color: red;
}

.item-4 {
  flex-grow: 2;
  background-color: blue;
}

The fourth item will take up twice as much space as the other items, since its flex-grow value is set to 2. This means that it will take up two-fifths of the available space, while the other items will take up one-fifth each.

flex-basis

The flex-basis property is used to set the initial size of a flex item before any available space is distributed among the items.

Here’s an example of how to use flex-basis:

.item {
  flex-basis: 150px;
}

In this example, the flex-basis property is set to 150px for the .item class. This means that the initial size of the item will be 150px, and any remaining space will be distributed among the other flex items.

It’s important to note that flex-basis is just one of the properties that controls the size of flex items. The other two are flex-grow and flex-shrink. Together, these properties form what is called the "flex factor," which determines how available space is distributed among the flex items.

Here’s an example of how all three properties work together:

.item {
  flex-basis: 150px;
  flex-grow: 1;
  flex-shrink: 0;
}

In this example, the flex-basis property sets the initial size of the item to 150px. The flex-grow property is set to 1, which means that the item will grow proportionally to other flex items in the container when there is available space. The flex-shrink property is set to 0, which means that the item will not shrink when there is not enough space in the container.

flex-shrink

The flex-shrink property is used to specify how much a flex item should shrink relative to the other flex items in the container when there isn't enough space on the main axis. The default value for flex-shrink is 1, which means that all flex items will shrink equally.

Here’s an example that shows how flex-shrink works:

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

.container {
  display: flex;
}

.box {
  flex-basis: 100px;
  height: 100px;
  border: 1px solid black;
}

.box1 {
  flex-grow: 1;
  flex-shrink: 1;
}

.box2 {
  flex-grow: 1;
  flex-shrink: 2;
}

.box3 {
  flex-grow: 1;
  flex-shrink: 3;
}

In this example, we have a container with three flex items. Each item has a flex-basis of 100px, which sets the initial size of the items. The flex-grow property is set to 1 for all items, which means that they will all grow equally if there is extra space on the main axis.

However, the flex-shrink property is set to different values for each item. The first item has a flex-shrink value of 1, which means that it will shrink proportionally to the other items if there isn't enough space. The second item has a flex-shrink value of 2, which means that it will shrink twice as much as the first item. The third item has a flex-shrink value of 3, which means that it will shrink three times as much as the first item.

If the container doesn’t have enough space to fit all the items at their initial size, the items with higher flex-shrink values will shrink more than the items with lower values. For example, if the container is only 250px wide, the first item will keep its initial size of 100px, the second item will shrink to 75px, and the third item will shrink to 50px.

Conclusion

In conclusion, CSS Flexbox is a powerful tool for building responsive layouts with ease. It provides a simple and intuitive way to arrange elements on a web page, with a minimum amount of code. From the basics to the advanced concepts, we have covered all the important aspects of Flexbox layout in this blog.

We have learned how to create a Flexbox container, how to set up Flexbox properties on child elements, and how to use Flexbox to create responsive layouts. We have also explored some of the lesser-known Flexbox properties like gap, flex-basis, and order.

In summary, CSS Flexbox is a must-learn skill for any web developer. It is an efficient and modern way of creating responsive layouts, and can save you time and effort in the long run. So go ahead, give it a try and start building beautiful, responsive layouts today!

Thank you for reading this far

Subscribe to my Newsletter for exciting posts just like this.

Subscribe | The Pen, Pixel & Profit Club

sarveshh.beehiiv.com

8 Essential CSS Tricks and Techniques for Perfecting Your Website

Sarvesh Patil — Sat, 18 Feb 2023 10:38:07 +0000

8 Essential CSS Tricks and Techniques for Perfecting Your Website

Introduction

CSS is one of the key technologies used in web development. It allows developers to style their websites and create engaging, visually appealing interfaces. However, with so many different CSS techniques and tricks available, it can be challenging to keep up with the latest best practices.

In this post, I’ll share some of the top CSS tricks and techniques that you can use to take your website’s styles to the next level.

Use Flexbox for Efficient Layouts
Flexbox is a powerful layout tool that allows developers to create responsive, flexible layouts quickly and easily. By using Flexbox, you can eliminate the need for complex floats and positioning, which can make your code easier to read and maintain. With Flexbox, you can create complex, multi-column layouts that adjust automatically to different screen sizes and devices.
Embrace CSS Grid for Even More Control
If you need even more control over your layouts, CSS Grid is another powerful tool to consider. CSS Grid allows you to create complex, multi-dimensional layouts that can be customized down to the individual grid cell. With CSS Grid, you can create layouts that are completely flexible and responsive, while still retaining precise control over the positioning and sizing of your elements.
Use Variables for Consistency and Efficiency
CSS variables are a relatively new feature in CSS, but they can be incredibly powerful. With variables, you can define reusable values for colors, font sizes, and other CSS properties, which can make your code more efficient and consistent. By using variables, you can change the appearance of your website quickly and easily, without having to manually update dozens of different styles.
Experiment with CSS Blend Modes
CSS blend modes allow you to blend two or more elements together, creating unique visual effects that can be incredibly engaging. By using blend modes, you can create cool effects like color overlays, gradients, and more. Experiment with different blend modes to find the one that works best for your website’s style.
Use CSS Animations and Transitions for Dynamic Effects
Animations and transitions can bring your website to life, creating engaging and dynamic interfaces that capture users’ attention. With CSS animations and transitions, you can create effects like fading, sliding, and rotating elements, which can make your website feel more interactive and engaging. Just be careful not to overdo it — too many animations can be distracting and overwhelming.
Use Pseudo-Classes to Target Specific Elements
Pseudo-classes allow you to target specific elements in your HTML, based on their state or position in the document. For example, you can use the :hover pseudo-class to change the appearance of an element when the user hovers over it. Similarly, the :nth-child() pseudo-class allows you to target specific child elements of a parent element, based on their position in the HTML.
Optimize Your Styles for Performance
While CSS can be incredibly powerful, it can also have a significant impact on your website’s performance. To ensure that your website loads quickly and smoothly, it’s important to optimize your styles by using techniques like minification, compression, and caching. You can also reduce the amount of CSS your website uses by removing unused styles and consolidating multiple styles into a single rule.
Use Browser DevTools for Debugging and Testing
Browser DevTools are a powerful tool for debugging and testing your CSS code. With DevTools, you can inspect and modify your website’s styles in real time, making it easy to pinpoint and fix issues. DevTools can also help you test your website’s responsiveness and accessibility, by allowing you to simulate different screen sizes and user scenarios.

Resources

Flexbox Froggy
Mastering CSS Flexbox: From Basics to Advanced Techniques

Conclusion

These are just a few of the many CSS tricks and techniques that you can use to take your website’s styles to the next level. By using tools like Flexbox, CSS Grid, variables, blend modes, and animations, you can create engaging and dynamic interfaces that capture users’ attention and keep them coming back for more. So go forth and experiment — the possibilities are endless!

Thank you for reading this far

Subscribe to my Newsletter for exciting posts just like this.

Subscribe | The Pen, Pixel & Profit Club

sarveshh.beehiiv.com

Originally published at https://blog.sarveshpatil.com.

Useful GitHub repositories for learning Web Development

Sarvesh Patil — Wed, 17 Feb 2021 16:54:11 +0000

I know this is kind of clickbait stuff, but I personally feel that I would've benefitted a lot if I knew this sooner. So here I go.
You can't master something without practicing it. So, I would divide this post into some important sections such as

Learning
Practicing
Preparing for Interviews

Learning

1. Web Dev for Beginners

This has everything to get you started. Starting from the ground up, text-editors, GitHub, and whatnot.

microsoft / Web-Dev-For-Beginners

24 Lessons, 12 Weeks, Get Started as a Web Developer

2. You-need-to-know-css

Exactly, you need to know CSS. Here is a more user-friendly interface to help you learn easily.

l-hammer / You-need-to-know-css

💄CSS tricks for web developers~

3. Front-End Checklist

This is the end to the repetitive basics, but you're gonna get better because of that. Just make sure you cover everything in here.

thedaviddias / Front-End-Checklist

🗂 The perfect Front-End Checklist for modern websites and meticulous developers

4. The Algorithms - JavaScript

Every important algorithm in Javascript exists here. Get some hold over the basics of the language and this would be easy peasy for you.

TheAlgorithms / JavaScript

Algorithms and Data Structures implemented in JavaScript for beginners, following best practices.

5. Javascript Algorithms

Can be used as an extension to the repository above.

trekhleb / javascript-algorithms

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

6. Node.js Best Practices (Optional but important)

Before we start applying our knowledge and developing projects, we need to know the best practices, and this repository will help you with that.

goldbergyoni / nodebestpractices

✅ The Node.js best practices list (March 2023)

7. Project Guidelines (Optional but important)

It never hurts to know general practices in the field, does it.

elsewhencode / project-guidelines

A set of best practices for JavaScript projects

Practicing

8. Vanilla Web Projects

Okay, it's time we start making personal projects to test our knowledge. This would kickstart you just fine with HTML, CSS and Javascript.

bradtraversy / vanillawebprojects

Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries

9. 50projects50days

Just in case above projects seem a tad short.

bradtraversy / 50projects50days

50+ mini web projects using HTML, CSS & JS

10. javascript-testing-best-practices

Well, we all like bug-free software don't we? Testing is the phase that will make your app almost bug-free.

goldbergyoni / javascript-testing-best-practices

📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (December 2022)

Interviewing

11. Front End Interview Handbook

yangshun / front-end-interview-handbook

⚡️ Front End interview preparation materials for busy engineers

12. JavaScript Questions

lydiahallie / javascript-questions

A long list of (advanced) JavaScript questions, and their explanations ✨

Thank you for reading this far

Subscribe to my Newsletter for exciting posts just like this.

Subscribe | The Pen, Pixel & Profit Club

sarveshh.beehiiv.com

Reasons to use Next.js instead of create-react-app in your next project

Sarvesh Patil — Tue, 17 Nov 2020 06:43:16 +0000

React is a wonderful framework, isn't it?
I have been a react developer for some time now and I love it.
But recently I came across Next.js, which is built on top of React and it is definitely an improvement over the latter.

So what is Next.Js?

NextJS is a open-source framework for building React applications. It comes with server-side rendering, static-site generation, serverless functions, SEO support and so so much more, that too out of the box. Yay!

How is server-side rendering faster than client-side rendering?

In server-side rendering the contents of the webpage, be it HTML, CSS or Javascript are generated on the server, and the whole HTML page is downloaded and displayed. So, all the pre-processing, calculations, and any complex communication with the server are handled in the server itself whereas, in client-side rendering, everything is processed at clientside

Advantages of NextJs over React

It's super fast
With the help of Server-side rendering and static-site generation loads the site blazing fast.
It's SEO friendly.
Server-side rendering fuels our goals to achieve levels of SEO, UX, performance, etc. Moreover, you can customize your own <meta> tags to improve your Search Engine Optimisation to your liking by importing Head from "next/head" and these meta tags will be appended to your page so that search engines could crawl swiftly. How cool is that!
Wide features out of the box
Minifying javascript, doing code splitting, lazy loading, prefetching assets, render the minimal amount of HTML, caching builds, all performance optimization comes out of the box, in nextJs so your primary focus remains the development of your project.

How to get started?

NextJs Docs

1. Pre-requisites

ReactJS knowledge is must.
NodeJS or Yarn should be installed.

2. Creating a project

NextJS recommends creating a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run in the terminal after navigating to the desired directory:

npx create-next-app
# or
yarn create next-app

Here's a Codesandbox example of what you'll get:

Resources

In case you don't know ReactJS, I suggest you learn that first. There's plenty of resources available online, I will mention some of them down here.

ReactJs resources.

NextJS resources

NextJs Docs is great place to start.
This YouTube course will get you started from ground up.

Thank you for reading this far

Subscribe to my Newsletter for exciting posts just like this.

Subscribe | The Pen, Pixel & Profit Club

sarveshh.beehiiv.com

DEV Community: Sarvesh Patil

Microfrontends with React: A Complete Guide from Basics to Advanced

Microfrontends with React: What I Learned (and Why I Almost Ditched It)

What's a Microfrontend Anyway?

Why I Started Using Them (The Real Reasons)

How Module Federation Actually Works

State Management: The Part That Bit Me

Option 1: URL + localStorage (Simple approach)

Option 2: Window Events (Better)

Option 3: Shared State Service (What We Do Now)

The Stuff Nobody Talks About

1. Version Conflicts Are Real

2. Error Handling Is Painful

3. Local Development Gets Messy

When Microfrontends Actually Make Sense

When They're Overkill

Real Gotchas I Hit

What I'd Do Differently

Resources That Actually Helped

The Definitive Guide to Updating Node.js Dependencies in 2025 (Without Losing Your Mind)

Phase 1: Know Your Enemy

Phase 2: The Setup

1. Engine Locking

2. The "Sanity Check"

Phase 3: The Tools (Stop doing it manually)

Phase 4: The Strategy

The "Easy Win" Sweep

The Red Zone (Major Updates)

Decision Flow

Phase 5: The "Boss Battles"

1. Updating Node.js itself

2. The Deprecated Package

Pro Tip: Automate the misery

Summary

JavaScript Object Functions Cheat Sheet: Your Ultimate Guide

Preparing for an interview or just refreshing your Object manipulation skills? This is all you’ll need.

Introduction

Pre-requisites

Object.defineProperties()

Object.keys()

Object.values()

Object.entries()

Object.fromEntries()

Object.assign()

Object.freeze()

Object.isFrozen()

Object.seal()

Object.isSealed()

Object.create()

Object.getPrototypeOf()

Object.getOwnPropertyDescriptor()

Object.preventExtensions()

Object.isExtensible()

Object.prototype.hasOwnProperty()

Object.prototype.isPrototypeOf()

Object.prototype.propertyIsEnumerable()

Resources

Conclusion

A Comprehensive guide to Next.JS routing | by Sarvesh | Mar, 2023 | Medium

Sarvesh ・ Mar 10, 2023 ・ sarveshh.Medium

Next.js Routing: A Comprehensive Guide to Building Single-Page Applications

Introduction to Next.js routing

Static Routing

Dynamic Routing

Nested Routing

Custom Routes

Conclusion

How to optimise SEO in NextJs

Introduction

Conclusion

Subscribe | The Pen, Pixel & Profit Club

How to Implement ARIA Tags for Better Accessibility: A Comprehensive Guide for Web Developers

Introduction

ARIA labels and descriptions

aria-label

aria-labelledby

aria-describedby

ARIA roles

role=”button”

role=”heading”

Sarvesh ・ Mar 10, 2023 ・
sarveshh.Medium