Forem: Navdeep Mishra

How I Rendered Mermaid Diagrams in React (and Built a Library for It)

Navdeep Mishra — Mon, 06 Oct 2025 16:08:09 +0000

🧠 TL;DR — I couldn’t find a working React library for Mermaid diagrams, so I built my own — simple, typed, and customizable. Here’s how it works and how you can use it.

1️⃣ The Problem: Rendering Mermaid in React is not smooth

If you’ve ever tried to render Mermaid diagrams inside a React app, you know the pain.
Recently, I faced the same challenge — and realized most existing libraries either don’t work well or are abandoned.

The current React-specific packages are either too old, poorly documented, or simply not working anymore.
Sure, you can always use plain Mermaid.js directly — but that means writing a bunch of boilerplate setup code just to render a simple diagram.

That’s extra work every time you want to add or update one.

What I Noticed While Researching.

Many libraries are outdated and unmaintained.
Some break during render or don’t handle updates properly.
Most have poor documentation and very few examples.

All this slowed down my project — and sparked an idea:

What if I build a React library that just works out of the box?

Introducing My Library — Render Mermaid in React with Ease

So I rolled up my sleeves and built a lightweight React library that lets you render Mermaid code with minimal setup.

It supports two main approaches, depending on how you like to work:

1. Component-based Approach

This is the easiest way to get started.
Just import and use the provided React component — no extra setup required.

✅ Features:

Plug-and-play usage
Fully typed props (TypeScript support)
Customizable theme & style
Built-in error states for syntax/render issues
Copy-code + download-as-SVG support

import RenderMermaid from "react-x-mermaid";

function App() {
  const d1 = `
  graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
`;

  return (
    <div className="app">
      <RenderMermaid mermaidCode={d1} mermaidConfig={{ theme: "dark" }} />
    </div>
  );
}

export default App;

2. Hook-based Approach (For Advanced Use Cases)

If you want full control, the library also provides a custom hook.
It gives you access to the rendered SVG and state, so you can build your own UI around it.

import { useMermaid } from "react-x-mermaid";

function AdvanceMermaidRenderer({ chart }: { chart: string }) {
  // hook also gives you svg along with ref and error which it generate which you can use to download and save locally if required
  const { ref, error } = useMermaid(chart, {
    theme: "dark", // mermaid config
  });

  if (error) {
    // show error or render code in <pre> and <code> tags if you need as a fallback.
    return <div className="mermaid__error">{error}</div>;
  }

  return <div className="mermaid-renderer" ref={ref} />;
}

export default AdvanceMermaidRenderer;

✅ Perfect for:

Integrating Mermaid inside markdown renderers
Custom toolbars, editors, or documentation apps

🚀_ Why This Matters_

If you’re building documentation tools, internal dashboards, or markdown editors, Mermaid diagrams are incredibly useful for visualizing flows and systems.
Having a reliable React wrapper saves hours of setup and debugging.

🧠 Behind the Scenes

Written in TypeScript
Uses Mermaid v11+
Handles async rendering and cleanup
Tested across SSR and client-only setups

🙌 Try It Yourself
Install it in seconds:

npm install react-x-mermaid mermaid
# or
yarn add react-x-mermaid mermaid

Docs and examples: https://www.npmjs.com/package/react-x-mermaid

💬 Wrap-up

If you’ve struggled to render Mermaid in React, this library should make it a breeze.
Give it a try — and if you hit any edge cases, drop them in the comments.
I’d love to see how you use it in your projects!

Effortless JavaScript Retries with redo.js!

Navdeep Mishra — Tue, 01 Apr 2025 08:09:11 +0000

Effortless JavaScript Retries with redo.js! 🚀

Tired of handling unreliable APIs, flaky database queries, or network failures? Instead of writing complex retry logic, let redo.js handle it for you—simple, powerful, and effortless!

Why redo.js?

✅ Works with Node.js, React, Vue, and more✅ Supports customizable retry strategies (exponential backoff, fixed delays, etc.)✅ Handles errors automatically with minimal code

📦 Installation

Using npm:

npm install redo.js

Using yarn:

yarn add redo.js

⚡ Usage

🔄 Retry Synchronous Operations

import { retryOperation } from "redo.js";

retryOperation({
  retryCount: 3, // Default: 3 - Number of retry attempts
  retryDelay: 1000, // Default: 1000ms - Delay between retries
  // incrementalDelayFactor: 2, // Optional - Exponential backoff factor

  retryCallback: () => {
    console.log("Retrying operation...");
    throw new Error("Operation failed");
  },
  onErrorCallback: () => console.log("An error occurred."),
  onSuccessCallback: () => console.log("Operation succeeded!"),
  afterLastAttemptErrorCallback: (error) =>
    console.error("Final error:", error.message),
});

🔄 Retry Asynchronous Operations

import axios from "axios";
import { retryAsyncOperation } from "redo.js";

const fetchData = async () => {
  return axios.get("https://jsonplaceholder.typicode.com/posts");
};

retryAsyncOperation({
  retryCount: 3,
  retryDelay: 1000,
  // incrementalDelayFactor: 2,

  retryAsyncCallback: async () => await fetchData(),
  onErrorCallback: (error, currentRetryCount) =>
    console.log(`Retry #${currentRetryCount} failed: ${error.message}`),
  onSuccessCallback: (response) =>
    console.log("Operation succeeded with status:", response.status),
  afterLastAttemptErrorCallback: (error) =>
    console.error("Final error:", error.message),
});

🚀 Try redo.js today and make your async workflows resilient!

🔄 Like, share, and support! 😊

Thank you! 🙌

Effortless JavaScript Retries with redo.js!

Navdeep Mishra — Mon, 31 Mar 2025 18:17:01 +0000

Effortless JavaScript Retries with redo.js! 🚀

Tired of handling unreliable APIs, flaky database queries, or network failures? Instead of writing complex retry logic, let redo.js handle it for you—simple, powerful, and effortless!

Why redo.js?

✅ Works with Node.js, React, Vue, and more✅ Supports customizable retry strategies (exponential backoff, fixed delays, etc.)✅ Handles errors automatically with minimal code

📦 Installation

Using npm:

npm install redo.js

Using yarn:

yarn add redo.js

⚡ Usage

🔄 Retry Synchronous Operations

import { retryOperation } from "redo.js";

retryOperation({
  retryCount: 3, // Default: 3 - Number of retry attempts
  retryDelay: 1000, // Default: 1000ms - Delay between retries
  // incrementalDelayFactor: 2, // Optional - Exponential backoff factor

  retryCallback: () => {
    console.log("Retrying operation...");
    throw new Error("Operation failed");
  },
  onErrorCallback: () => console.log("An error occurred."),
  onSuccessCallback: () => console.log("Operation succeeded!"),
  afterLastAttemptErrorCallback: (error) =>
    console.error("Final error:", error.message),
});

🔄 Retry Asynchronous Operations

import axios from "axios";
import { retryAsyncOperation } from "redo.js";

const fetchData = async () => {
  return axios.get("https://jsonplaceholder.typicode.com/posts");
};

retryAsyncOperation({
  retryCount: 3,
  retryDelay: 1000,
  // incrementalDelayFactor: 2,

  retryAsyncCallback: async () => await fetchData(),
  onErrorCallback: (error, currentRetryCount) =>
    console.log(`Retry #${currentRetryCount} failed: ${error.message}`),
  onSuccessCallback: (response) =>
    console.log("Operation succeeded with status:", response.status),
  afterLastAttemptErrorCallback: (error) =>
    console.error("Final error:", error.message),
});

🚀 Try redo.js today and make your async workflows resilient!

🔄 Like, share, and support! 😊

Thank you! 🙌

Spoiler Alert: Import Alias in React + Vite

Navdeep Mishra — Fri, 01 Mar 2024 14:33:35 +0000

Today in this short article let's quickly learn how to set up path aliases in your React application. Avoid boring long imports in your app and start using path aliases now.

Pre-requisites
Must have a React app with vite. If you are still using CRA, checkout my guide to migrate your app to vite.

For Javascript Projects

Update your vite config You have to update your vite config to make your aliases work.

Paste the following contents -

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@components": path.resolve(__dirname, "./src/components"),
      "@pages": path.resolve(__dirname, "./src/pages"),
      "@forms": path.resolve(__dirname, "./src/forms"),
      "@utils": path.resolve(__dirname, "./src/utils"),
      "@providers": path.resolve(__dirname, "./src/providers"),
      "@assets": path.resolve(__dirname, "./src/assets"),
    },
  },
  plugins: [react())],
});

You can add your own folder according to your need. Likes hooks,context and etc.

For Javascript/Typescript project, create a jsconfig.json or tsconfig.json (For Typescript Project) file in the root of your project. This step is necessary to make sure vs code intellisense works properly.

Paste the following contents -

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@pages/*": ["./src/pages/*"],
      "@assets/*": ["./src/assets/*"],
      "@forms/*": ["./src/forms/*"],
      "@providers/*": ["./src/providers/*"],
      "@utils/*": ["./src/utils/*"]
    }
  }
}

This file will help your code editor intellisense to recommend you the path aliases during import.

That's all, now you can import a component like

import MyComponent from "@components/MyComponent";

Thank you for reading this article. 💓
Please share and follow for more dev content. 😄

Webpack Killed Again 😢: Guide to Migrate Electron Forge Webpack Project to Vite

Navdeep Mishra — Sun, 24 Dec 2023 07:52:34 +0000

In this blog post, I'll take you through the steps I took to bid farewell to Webpack and welcome Vite into the world of Electron Forge. You'll find this guide incredibly beneficial if you're looking to streamline your development process, leverage Vite's lightning-fast bundling, and make your Electron app development smoother than ever before.

So Let's get started...

I assume that you are already having the a project running on Electron Forge Webpack Template

If you don't know what is Electron Forge and why you should use it. Check out this link -

https://www.electronforge.io/core-concepts/why-electron-forge

If you want to migrate to an existing Electron App to Electron Forge, then checkout this link.

https://www.electronforge.io/import-existing-project

So, Now I assume that you are having already having a project running on Electron Forge with Webpack template. When I first started using Electron Forge, there was not Vite template. So I use the webpack one.

The Problem - 😑

The webpack is no doubt a good old trusted bundler but when it comes to startup times and bundling, it's slow. Also if you are using frameworks like Vue or Lib's like React, Then it becomes more slow in bundling those assets.
Whereas, Vite is very fast in this and also Vite is gaining popularity everyday due to it's features.

The Simple Solution 🙂
Electron Forge team has introduced the Vite template now and you can create a Electron Project with Vite as a tooling and bundling.
That's good right? Yeah, It's superb.

Again There is a problem 🫡

I don't know why but I found sometimes the Electron Forge document is not accurate which create issues. Right now there is no proper migration Guide. The is lack of information in migrating a new project. Current Document is about the Vite plugin https://www.electronforge.io/config/plugins/vite
but it's not enough for migrating the project.

I also faced the issues in migrating my existing project. I though let's figure it out and share it with my folks. 😎

Let's Get started now ...

First of all we have to install the Vite plugin for Electron Forge

npm install --save-dev @electron-forge/plugin-vite

Now create three files in your root folder just in the same level as your src directory.

vite.main.config.js or .ts

import { defineConfig } from "vite";

// https://vitejs.dev/config
export default defineConfig({
  resolve: {
    // Some libs that can run in both Web and Node.js, such as `axios`, we need to tell Vite to build them in Node.js.
    browserField: false,
    conditions: ["node"],
    mainFields: ["module", "jsnext:main", "jsnext"],
  },
});

vite.preload.config.js or .ts

import { defineConfig } from "vite";

// https://vitejs.dev/config
export default defineConfig({});

vite.renderer.config.js or .ts

import { defineConfig } from "vite";

// https://vitejs.dev/config
export default defineConfig({});

Now move your index.html from src to the root of the project. And paste the following lines -

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <h1>💖 Hello World!</h1>
    <p>Welcome to your Electron application.</p>
    <script type="module" src="./src/renderer.js"></script>
  </body>
</html>

Update your forge.config.js ``js module.exports = { packagerConfig: {}, rebuildConfig: {}, makers: [ { name: "@electron-forge/maker-squirrel", config: {}, }, { name: "@electron-forge/maker-zip", platforms: ["darwin"], }, { name: "@electron-forge/maker-deb", config: {}, }, { name: "@electron-forge/maker-rpm", config: {}, }, ], plugins: [ { name: "@electron-forge/plugin-vite", config: { //buildcan specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc. // If you are familiar with Vite configuration, it will look really familiar. build: [ { //entryis just an alias forbuild.lib.entryin the corresponding file ofconfig`. entry: "src/main.js", config: "vite.main.config.js", }, { entry: "src/preload.js", config: "vite.preload.config.js", }, ], renderer: [ { name: "main_window", config: "vite.renderer.config.js", }, ], }, }, ], };

- Update your `package.json` main entry from webpack to Vite.

```json
  "main": ".vite/build/main.js",

Final step is to update our main.js with Vite specific variables to load our app.

main.js

const { app, BrowserWindow } = require("electron");
const path = require("path");

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require("electron-squirrel-startup")) {
  app.quit();
}

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  console.log(MAIN_WINDOW_VITE_DEV_SERVER_URL);
  // and load the index.html of the app.
  if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
  } else {
    mainWindow.loadFile(
      path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`)
    );
  }

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

That's it. I know little long but worth doing.

Now final step is to run our app and see Vite in action.

Run

yarn start
# if using npm
# npm start

That's it...Enjoy Vite with your existing Electron App 😎

If you have any issues, Let me know in the comment section. I would be happy to answer them all.

Save it for future and Like 👍 and Follow 👈 for more content. ✨

ECMAScript 2023: Fresh Goodies for JavaScript Developers

Navdeep Mishra — Sun, 17 Dec 2023 12:56:11 +0000

Greetings, fellow code warriors! ⚔️ The JavaScript landscape is constantly evolving, and with the arrival of ECMAScript 2023 (ES14) in June 2023, we've got a new batch of tools to craft even more powerful and elegant applications. Let's explore some of the coolest features and unleash their potential in your code!

1. Array Enhancements: Supercharge your data wrangling. All these new methods are called copying methods. They return a new array instead of modifying the actual array.

toReversed: Say goodbye to .reverse() loops! This method lets you flip your arrays with a single, readable line:



const numbers = [3, 1, 4, 2];
const reversedNumbers = numbers.toReversed(); // [2, 4, 1, 3]

toSorted: Taming unruly data becomes a breeze. Sort your arrays in natural order. The toSorted() method of Array instances is the copying version of the sort() method. It returns a new array with the elements sorted in ascending order. You can also pass a compare function just like our good old sort method.



const fruits = ["apple", "banana", "mango", "kiwi"];
const sortedFruits = fruits.toSorted(); // ["apple", "banana", "kiwi", "mango"]

toSpliced: Need precise surgical edits? toSpliced adds or removes elements at specific indexes:



const letters = ["a", "b", "c", "d", "e"];
const editedLetters = letters.toSpliced(2, 1, "x", "y"); // ["a", "b", "x", "y", "d", "e"]

2. Symbols as WeakMap Keys: Unleash memory magic

WeakMaps hold references to objects without preventing garbage collection. Now, you can use symbols as keys, making your code even more memory-efficient!



const symbolKey = Symbol("MySecretId");
const weakMap = new WeakMap();
weakMap.set(symbolKey, document.body); // Reference held without keeping element alive

// ... later, symbolKey can still access the element

3. Hashbang Standardization: Say hello to portable scripts

Shebang lines (#!) in your JavaScript files now have a standardized grammar, making them consistent and easier to run across different environments. No more confusion!



#!/usr/bin/env node
// Your amazing JavaScript code goes here

4. Private Class Members (Stage 3): A peek into the future

While still under development, private class fields and methods promise to revolutionize code organization and data encapsulation. Get ready for cleaner, more secure classes!

5. Bonus Goodies:

Improved type inference for object literals simplifies and clarifies your code.
New BigInt asDate and BigInt asTime functions let you work with large time values effortlessly.
Stricter error handling in async functions makes debugging smoother.
Promise.prototype.finally provides a concise way to run code after any Promise outcome.

Remember: These are just a taste of the exciting possibilities in ES14. Explore the full spec and experiment with these features to take your JavaScript skills to the next level!

Share your favorite new ES14 feature in the comments below! Let's discuss how we can leverage these tools to build even better web experiences. 😎

And don't forget, the journey of learning never ends! Stay curious, stay code-hungry, and keep building amazing things!

Follow for more content 💓

Store your notes in your browser 😎🔥

Navdeep Mishra — Sun, 15 Oct 2023 17:16:36 +0000

Hi Dev's, Today I'll be sharing one of my starter projects when I was learning web development. The one of the most useful tool for everyone which is a Notes app. We all want to store our notes so I just wanted to create a notes app without any backend just frontend.

Interesting.... hmm...

It now more than 3 years I guess, that time I didn't knew the backend and was just exploring the frontend. Although there are several notes apps, but as a developer I wanted to learn the process and then I thought to create a mini project on this.

This stores your notes on your browser which is completely local, Offers a nice clean UI, Edit & Delete option and other handy features.

3 years back, That day, I opened my VS Code and created this. NoteFizz

This is completely mobile friendly as well so you can use it from your mobile browser.

Just Try it out and rate it. What you guys think how it could more useful.

Let me know in the comments, if any Ideas and suggestions you have. 😎

Silly Git Mistakes! Fixing Author name in git history

Navdeep Mishra — Thu, 05 Oct 2023 18:51:03 +0000

Your Git commit history is not only a record of your project's progress but also a reflection of the individuals who contributed to its development. However, there are times when you may need to correct or update author information for multiple commits. Whether it's fixing a typo in your email address or ensuring your commits are properly attributed, Git provides powerful tools for reshaping your commit history. 😎

In this blog post, I will explore an essential Git task that every developer should know: changing the author information for all commits in your repository. We'll dive into the process step by step, covering both classic and modern methods, and provide tips on best practices to avoid common pitfalls. 😉

Join me on this journey to unlock the full potential of your Git history, as we unveil the secrets to seamlessly updating author details for all your commits. Let's dive in!

When you are working with git and using Github may of you may have encountered a condition when you noticed that you pushed a commit to master branch but still you commit in not showing in your contributions graph. That time every dev's reaction.....

Very common mistake which developer do is setting the wrong username and email in the git config
Now if you don't remember what's this then it's the very first step you do when you start working with git by setting the username and email in your git config. 😯

Now, This is very common when you are working with two different git accounts (work and personal) and set username and email globally using



$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

Before jumping into the solution let's know how to avoid this thing in future if you haven't faced this issue.

Avoid working with different git account in same PC.
Type you email and username correctly when setting git config value.
Avoid setting username and email globally and instead set it locally ```

$ git config --local user.name "John Doe"
$ git config --local user.email johndoe@example.com


**Now if already did the mistake then.........**

![How do we fix this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ozzeycv1qdcpkw4q4n8.gif)

**Relax............**

![Relax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i15ht0vvwww53plmltr6.gif)


![I have solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qn9x6w1cdx6m3qz3wgz3.gif)


**_But before proceeding to solution. _**
_Warning: Changing commit information for all commits in your repository will rewrite the entire commit history, and it can be very disruptive if you're working in a shared repository. Make sure you have a good reason to do this, and communicate with your team before proceeding.
Do at your own risk._


**_There are two way of doing this._**

1. Git Filter Branch (Less Risky)
2. Git Rebase (Risky sometimes)


> **_Git Filter Branch (Less Risky)_**

For future use as well and doing in multiple repos I recommend creating a script which you can use in any repo and save it somewhere easily.

- If you want to change all commits author

!/bin/sh

git filter-branch --env-filter '
export GIT_AUTHOR_NAME="New Author Name";
export GIT_AUTHOR_EMAIL="new.email@example.com";
export GIT_COMMITTER_NAME="New Author Name";
export GIT_COMMITTER_EMAIL="new.email@example.com";
' -- --all

- You want to change only specific ones

git filter-branch --env-filter '
OLD_EMAIL="old@email.com"
NEW_EMAIL="new@email.com"
NEW_NAME="John Doe"

if test "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL"
then
GIT_AUTHOR_EMAIL=$NEW_EMAIL
GIT_AUTHOR_NAME=$NEW_NAME
fi

if test "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL"
then
GIT_COMMITTER_EMAIL=$NEW_EMAIL
GIT_COMMITTER_NAME=$NEW_NAME
fi
' -- --all

Make sure to change your name and email to the correct ones.

After that make the script executable.

chmod +x update_author_info.sh

Now just run the script

./update_author_info.sh

Force-push the rewritten branch to update the remote repository:

git push origin --all --force


> Git Rebase (Risky sometimes)

- The first step is to identify the commits that you want to modify. You can do this by using the git log command, which displays the commit history of your repository.

git log

It should show the information like this

commit 5e3f7ba5d4249f5c06a4e5f4b3d1e7f7d6d1b917
Author: John Smith john@example.com
Date: Tue Jun 1 12:34:56 2021 -0500

Add new feature

commit 2a7b9a1e9f6d7b5c8a3a714d61f6d7e1e0b8a6c2
Author: Jane Doe jane@example.com
Date: Mon May 31 11:22:33 2021 -0500

Fix bug

commit 8c8e1b4d2b4a2d4f4a4e4f4d6b6c6f0d8c8e8b2d
Author: John Smith john@example.com
Date: Sun May 30 10:11:12 2021 -0500

Initial commit


- Start an Interactive Rebase

git rebase -i HEAD~3

This command tells Git to start an interactive rebase from the current HEAD (the latest commit) up to three commits back. You can adjust the number to include more or fewer commits, depending on your needs.

After running this command, Git will open a text editor with a list of all the commits that you want to modify. Each commit is listed with a hash code, the author name and email, the commit date, and the commit message.

pick 8c8e1b4 Initial commit
pick 2a7b9a1 Fix bug
pick 5e3f7ba Add new feature

- Now it’s time to edit the commits. For each commit that you want to modify, change the pick command to edit.

edit 8c8e1b4 Initial commit
pick 2a7b9a1 Fix bug
edit 5e3f7ba Add new feature

Save and close the file to continue

- _Modify the Author and Committer Information_

After saving and closing the file, Git will begin the interactive rebase. When it reaches the first commit that you want to modify, it will pause and allow you to make changes.

To modify the author and committer information, use the following commands:

git commit --amend --author="New Author Name new-email@example.com" --no-edit
git commit --amend --reset-author --no-edit

Replace New Author Name and new-email@example.com with the new name and email address that you want to use.

The first command modifies the author information of the commit, while the second command modifies the committer information. The --no-edit option tells Git not to open the commit message editor.

Once you have made your changes, use the following command to continue the rebase:

git rebase --continue

- _Finish the Rebase_

git rebase --continue


- _Push the Changes_

git push --force


This command tells Git to force push the modified commits to the remote repository, overwriting the existing commits. Be careful when using git push --force as it can cause data loss if used incorrectly.

Source - [Check Here ](https://saturncloud.io/blog/how-to-change-the-author-and-committer-name-and-email-of-multiple-commits-in-git/)



![Now Chill](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zye6wfpq8sbxe5khyqoy.gif)





Thankyou for reading. 💓
Please like, share, and follow for more dev content. 😉

3 State Switches are not tough - Ultimate guide to CSS Switches using CSS only

Navdeep Mishra — Wed, 20 Sep 2023 17:36:18 +0000

Hi there, when it comes to switches most people look for modern libraries but building core is very important.
Creating switches are very easy. Today I will be sharing the guide to create CSS switches.

We'll be seeing -

2 state switches
2 state switches with custom icons.
3 state switches

2 State Switches

For creating switches you need a way to figure out the active states. If you are using JavaScript then there are lot of ways you can do it by dynamically adding classes on click. When it comes to css we have one very popular way which is by using the input type checkbox. Which changes it's state and you can target that state easily with CSS only.

Check the below html structure -



<div class="switch1-container">
      <h5> Simple two state switch</h5>
      <div class="switch1">
        <input type="checkbox" id="switch1-input"/>
        <label for="switch1-input"></label>
        <span class="switch-bg"></switch>
      </div>
</div>

Note - Here in this html structure for giving the bg to the switch I experimented with a separate span and used absolute positioning. You can achieve the similar behavior using the ::before pseudo element.

Main thing to know here is that for getting the on status for the switch we can use the checked state of the input element.
You can easily get it on input using :checked pseudo class.

For styling the CSS switch button we have to make use of the input label. The good thing is when you click on the label then input states gets toggled. So hide the input and design the label with good looking round circle.

Once you designed the b and the circle now for moving the circle with the bg to give feel like a switch. Make use of transform property. Use translateX to move the circle and add transition on transform to make it smooth. 🙃

That's it
Your switch is ready. 🫡

Checkout the Css below to understand what we discussed.
Practical knowledge is more important you know.😎



*{
  margin:0;
  padding:0;
}
*,*::before,*::after{
  box-sizing:border-box;
}

:root{
    --clr-primary: #d9d9d9;
  --clr-secondary:#fafafa;
  --clr-clear:#ffffff;
  --clr-grey: #6d6d6d;
  --clr-dark:#1e1e1e;
  --ff-base:'Inter', sans-serif;
  --fw-regular: 400;
  --fs-200:0.875rem;
  --fs-300:1rem;
  --fs-400:1.125rem;
  --fs-500:1.375rem;
  --fs-600:1.75rem;
  --fs-700:3.25rem;

}
html{
  color-scheme: dark;
}
body{
  font-family: var(--ff-base);
  font-size: var(--fs-300);
  font-weight: var(--fw-regular);
}

.container{
  max-width:80%;
  margin: auto;
  height:100dvh;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
/*   justify-content:center; */
  padding: 4rem;
}

input{
  display:none;
  cursor: pointer;
}
label{
  cursor: pointer;
}

.switch1-container h5{
  margin-bottom: 1rem;
}
.switch1{
  position:relative;
  border-radius: 30px;
  width:6rem;
  height:2.5rem;
  background: #ccc;
  display:flex;
  align-items:center;
  transition: .3s background-color ease;
}
.switch-bg{
  background-color: #eceeef;
  position:absolute;
  top:4px;
  left:5px;
  width:90%;
  height:80%;
  border-radius:30px;
  transition: background-color .2s ease-out;
}


.switch1 label {
  background-color:white;
  border: 1px solid #bbb;
  display:inline-block;
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-block;
  vertical-align:bottom;
  margin:5px 8px;
  z-index:2;
  transition: transform .3s ease;

}
.switch1 input:checked + label{
  transform: translateX(56px);
}
.switch1 input:checked + label + .switch-bg {
  background-color: dodgerblue;
}

2 State Switches with Custom Icon
For adding the icon to your switches is very easy you can use various way of doing that. I picked it using css only even no extra Html. I used fontawesome for directly using icons in the stylesheet. The one I created is useful when you want to toggle between dark and night mode. 😎

Just add this to your styles sheet and in Html file.

Html



<div class="switch2-container">
      <h5> Simple two state siwtch with custom icon</h5>
      <div class="switch2">
        <input type="checkbox" id="switch2-input"/>
        <label for="switch2-input"></label>
        <span class="switch-bg"></switch>
      </div>
    </div>

Css




.switch2-container h5{
  margin-bottom: 1rem;
}
.switch2{
  position:relative;
  border-radius: 30px;
  width:6rem;
  height:2.5rem;
  background: #ccc;
  display:flex;
  align-items:center;
  transition: .3s background-color ease;
}
.switch2-bg{
  background-color: #eceeef;
  position:absolute;
  top:4px;
  left:5px;
  width:90%;
  height:80%;
  border-radius:30px;
  transition: background-color .2s ease-out;
}


.switch2 label {
/*   background-color:white; */
/*   border: 1px solid #bbb; */
  display:inline-block;
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-block;
  vertical-align:bottom;
  margin:3px 8px 0px;
  z-index:2;
  transition: transform .3s ease;

}
.switch2 input:checked + label{
  transform: translateX(56px);
}
.switch2 input:checked + label + .switch-bg {
  background-color: dodgerblue;
}

.switch2 label::before{
  font: var(--fa-font-solid);
  content: "\f185";
  color: gold;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 4px;
}
.switch2 input:checked + label::before{
  content: "\f186";
  color:gold;
  border: none;
}
.switch2 input:checked + label + .switch-bg{
  background: black;
}

Now the third one is the powerful one.
3 State Switches

For this one I use input type radios because of one good behavior that when you have radio group and each has same name attribute then if you select one then the other one will be de-selected automatically.

I created my html structure like this.



 <div class="switch3-container">
      <h5> Simple three state siwtch</h5>
      <div class="switch3">
        <input type="radio" id="switch3-radio1" name="radio"/>
        <label for="switch3-radio1">FrontEnd</label>

        <input type="radio" id="switch3-radio2" name="radio"/>
        <label for="switch3-radio2">BackEnd</label>

        <input type="radio" id="switch3-radio3" name="radio"/>
        <label for="switch3-radio3">FullStack</label>

      </div>
    </div>

For this I have used three html input elements with type radio.
Each has it's own label for showing the text.
For highlighting the selected option, I have use the ::before pseudo element on .switch3.

Thanks to new :has selector of css which made this more easier and cleaner html as well.

Check the css below -



.switch3-container h5{
  margin-bottom: .7rem;
}
.switch3
{

  position: relative;
  height:50px;
  display:flex;
  justify-content:space-around;
}
.switch3 label{
  padding: 1rem;
  z-index:1;
}
.switch3::before{
  content: '';
  position: absolute;
  left:0;
  width: 34%;
  height: 100%;
  background: #14142a;
  border: 1px solid #fff;
  border-radius: 12px;
  opacity: .5;
  transition: .5s left ease;
}

.switch3:has(#switch3-radio1:checked)::before{
  left: 0%;
}
.switch3:has(#switch3-radio2:checked)::before{
  left: 33%;
}
.switch3:has(#switch3-radio3:checked)::before{
  left: 66%;
}

That's how all three looks like.

Experiment with my codepen - Codepen Live

Similarly we can create 4 state switch as well.
If you have any doubts or questions, feel free to discuss in the comments.
Any better approach? let's discuss. 😎

Thanks for reading.
Please follow for more Webdev content. 😉

Navdeep M.

Accordion Component With Only CSS [No Javascript]

Navdeep Mishra — Tue, 19 Sep 2023 07:37:53 +0000

Hi Web Dev's, 👋 We all know how much good web dev is that's why we are doing this. When it comes to web design it's a very important skill you must have. Creating component using core technologies improves your core skills.
Today in this tutorial I'll sharing how I created a simple accordion component with Neomorphism design using only Html and CSS.

Without wasting time, Let's start -

If you are not familiar with what is accordion then checkout this - MUI Accordion Component.

For creating the accordion component we need the basic skeleton first our HTML



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">


  <title>Document</title>
</head>
<body>
  <main class="container">
  <div class="accordion">
    <div class="accordion__head">
    <p class="accordion__title">
      Hey there, I am a accordion title      
    </p>
    <div class="accordion__opener"> 
        <input type="checkbox" id="accordion-opener-input" checked>
      <label for="accordion-opener-input">
          <i class="fa-solid fa-caret-up"></i>
          </label>
    </div>
    </div>
     <div class="accordion__description">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
    </div>
    </div>

  </div>
  </main>
  <script src="https://kit.fontawesome.com/31571152d6.js" crossorigin="anonymous"></script>
</body>
</html>

We'll not go in details of html structure. Here I used the good old trick to check for the open and close state like we do for switch. I have used the input type checkbox to toggle between open and closed states.

Now let's come to the heart of the web. The CSS Style.



*{
  margin:0;
  padding:0;
}
*,*::before,*::after{
  box-sizing:border-box;
}
img {
  max-width:100%;
  display:block;
}

:root{
  --clr-primary: #d9d9d9;
  --clr-secondary:#fafafa;
  --clr-clear:#ffffff;
  --clr-grey: #6d6d6d;
  --clr-dark:#1e1e1e;
  --ff-base:'Inter', sans-serif;

  --fw-regular: 400;

  --fs-200:0.875rem;
  --fs-300:1rem;
  --fs-400:1.125rem;
  --fs-500:1.375rem;
  --fs-600:1.75rem;
  --fs-700:3.25rem;

}
html{
  color-scheme: light dark;
}
body{
  font-family:var(--ff-base);
  font-size: var(--fs-300);
  line-height:1.5;
  font-weight: var(--fw-regular);
  height:100vh;

}
main {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  height:80%;
  padding-top:4rem;
}
.accordion{
  font-size:inherit;
  padding: 1.2em 2em;
  border-radius:.5em;
  max-width:30rem;
  width:100%;
  box-shadow:  10px 10px 30px #000000,
             -10px -10px 30px #1f1f1f;
  transition: box-shadow .5s ease;
}
.accordion:hover{
  box-shadow:  10px 10px 20px #000000,
             -10px -10px 20px #1f1f1f;
}
.accordion__head{
  display:flex;
  justify-content:space-between;
}
.accordion__title{
  display:inline-block;
}
.accordion__opener{
  display:inline;
  margin-left:.5rem;

}
.accordion__opener input{
  display:none;
}
.accordion__opener label{
  cursor:pointer;
}
.accordion__opener label i {
/*   transform: rotate(90deg); */
  display:inline-block;
  transition: transform .4s ease;

}
.accordion__description{
  overflow:hidden;
  margin-top:0;
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s, margin-top .5s; 
  color: var(--clr-grey);

}
.accordion__description p {
  overflow: hidden;
}
.accordion__opener input:checked + label i{
  transform: rotate(180deg);
}
.accordion__head:has(.accordion__opener input:checked) + :is(.accordion__description){
  margin-top: 10px;
  grid-template-rows: 1fr;
}

@media (prefers-color-scheme: light){
  body{
    background: #e0e0e0;
  }
  .accordion{
    background: #e0e0e0;
box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
  }
  .accordion:hover{
    background: #e0e0e0;
    box-shadow:  20px 20px 30px #bebebe,
             -20px -20px 30px #ffffff;
  }
}

Here I have used the basic Css normalization for removing default styling of few things. Also declared few variables for reusing properties and making our life easier.😆

Now what's different here? In most of the tutorial for creating the css only accordion, you'll find out that they we mentioning the max-width property. Which is not good sometime when you don't know how much height your content can have.
In this I have used the css grid trick. With css grid-template-row, I am manipulating the height and achieving the same functionality without mentioning max-width on the description. You can use max-width trick as well if your use case requires that.

Also I have used the *BEM Naming convention for Css * which is a standard for writing the Css classes.

For generating the Neomorphism styles I have used a Neomorphism style generator. Link is in the resources section.

Checkout the Codepen here - CSS Only Accordion Component

Useful Resources:

BEM Convention - Checkout
Neomorphism Generator - Checkout

Feel free to discuss more about the article in the comments below😎
Thanks for reading.
Please like and share.
Follow for more post on #webdev

Killing the Create React App - CRA to Vite migration guide (Javascript)

Navdeep Mishra — Fri, 25 Aug 2023 19:13:57 +0000

Create React App (CRA) is a popular tool for creating React applications. It provides a quick and easy way to get started with React, but it can be limiting in terms of features and flexibility. Vite is a newer build tool that offers a number of advantages over CRA, including faster development times, smaller bundle sizes, and more customization options.

Here are some of the reasons why you might want to migrate from CRA to Vite:

Faster development times: Vite uses native ES modules and has a built-in dev server that can hot reload your changes in real time. This can save you a lot of time when you're developing your application.
Smaller bundle sizes: Vite uses modern build tools to optimize your code, which can result in smaller bundle sizes. This can improve the performance of your application and make it easier to deploy to production.
More customization options: Vite has a simpler configuration than CRA, which gives you more control over how your application is built. This can be helpful if you need to customize your build process for specific needs.

Of course, there are also some potential drawbacks to migrating to Vite:

Less community support: Vite is not as widely used as CRA, so there is less community support available. This can make it more difficult to find help with problems you might encounter when using Vite.

Overall, the benefits of migrating from CRA to Vite outweigh the drawbacks. If you're looking for a faster, more customizable, and more performant build tool for your React applications, then Vite is a great option.

Let's now quickly see how we can do that. 😎

If you already have an app running on Create React App or CRA with JS template then follow the below steps to migrate safely.

Note: I am using Yarn here for package management. If you are using npm or pnpm then use commands according to your package manager. 😎

Step 1:
We have to install first vite in our project. 🔥

yarn add -D vite @vitejs/plugin-react

Step 2:
Uninstall the react-script (CRA) from your project. 😆

yarn remove react-scripts

Step 3:
Let's modify our package.json scripts. 😮

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
},

Step 4:
Create the vite.config.json in your root directory of the project 😯

touch vite.config.js

Step 5:
Copy paste the content mentioned below in your vite.config.js 🤔

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});

Step 6:
Now one of the crucial step is to rename all the existing files from js to jsx. Vite not supports js file containing any jsx syntax like '< or >' aka angular brackets but if you think any file is by mistake renamed then revert back that file to .js extension. 😆😆😆😆😆

To do that we have a smart command. Thanks to this Github Conversation

if using git then run this command in your root directory in bash terminal.

find ./src -type f -name '*.js' -not -name '*.jsx' -not -name '*.ejs' -exec bash -c 'grep -l "</" $0' {} \; -exec bash -c 'git mv "$0" "${0%.js}.jsx"' {} \;

if not using git then run

# finds all *.js files that have either `</` or `/>` tags in them and renames them to *.jsx
find ./src -type f -name '*.js' -not -name '*.jsx' -not -name '*.ejs' -exec bash -c 'grep -l -E "</|/>" "$0"' {} \; -exec bash -c 'mv "$0" "${0%.js}.jsx"' {} \;

Step 6:
After renaming, move the index.html from public folder to your root directory. 🙃

mv public/index.html .

Step 7:
Afterward, remove all %PUBLIC_URL% occurrences in the index.html file like mention below. You can use global search ctrl+shift+s in vs code to find and replace it. 🫡

- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="icon" href="/favicon.ico" />

<!-- do this for all occurrences  -->

Step 8:
Last, link the src/index.js file in your moved index.html file like this

<body>
  <div id="root"></div>
  <script type="module" src="/src/index.jsx"></script>
</body>

That's all for normal project using CRA. We'll see few bonus tips ass well. 😉

Now run

yarn dev

Now open your browser and type localhost:5173 you'll see your project running. 😎

That's all for a project running on CRA.

Now Let's see some bonus tips.

If you are using **svg's as React Component you have to install svgr. Run**

yarn add vite-plugin-svgr

Now modify your vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [
      react(),
      // svgr options: https://react-svgr.com/docs/options/
      svgr({ svgrOptions: { icon: true } }),
    ],
  };
});

// which allows you to import SVGs as React components
// import { ReactComponent as MyIcon } from './my-icon.svg';

If you want to use the path alias, then modify your vite.config.js

import path from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

export default defineConfig(() => {
  return {
    resolve: {
      alias: {
        '~': path.resolve(__dirname, './src'),
      },
    },
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});

// which allows you to import from folders under the /src folder
// import Button from '~/components/Button';

If you want to open browser on server start, add the following code in your vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => {
  return {
    server: {
      open: true,
    },
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});

If you face error for your env variables saying process is undefined or anything similar then remove the REACT_APP prefix from them and instead write VITE as prefix and instead of using process.env use import.meta.env.[VARIABLE_NAME] For more info on vite env variable and modes Check Here

i.e -

.env

REACT_APP_TEST=true
//to
VITE_TEST=true

Use in this way

//from 
process.env.REACT_APP_TEST=true
//to
import.meta.env.VITE_TEST=true

If you are using emotion, update your vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [
      react({
        jsxImportSource: '@emotion/react',
        babel: {
          plugins: ['@emotion/babel-plugin'],
        },
      }),
    ],
  };
});

That's all for this guide. 😉 If you face any issue or have any updates please comment below. For more content please Share, Like and Follow.

Thankyou 😎

Appwrite Functions: The Ultimate Guide to deploy serverless functions with Appwrite Cloud

Navdeep Mishra — Sat, 19 Aug 2023 18:52:46 +0000

Hey everyone, Today we'll see how we can deploy our own Appwrite function with Appwrite Cloud within minutes. It's so easy and useful.

So for getting started first create your account here - Appwrite Cloud

After signup create a project, click on Functions as shown below -

After this there are two ways to deploy it.

Method 1 - Appwrite CLI

Appwrite provide a featured packed CLI for managing your Appwrite projects. This is a one time process and helps a lot in deploying your functions easily.

Install the Appwrite CLI -



npm install -g appwrite-cli

or dependency free installation

For Mac

brew tap appwrite/sdk-for-cli https://github.com/appwrite/sdk-for-cli
brew update
brew install --HEAD appwrite


> For windows

iwr -useb https://appwrite.io/cli/install.ps1 | iex


> For Linux

curl -sL https://appwrite.io/cli/install.sh | bash


- After the installation is complete, verify the install using

appwrite -v


- Now, Login to the appwrite cli. This will ask for your email and password. If you logged in with social auth try password reset and set a password first.

appwrite login



!['Appwrite login'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48y13noe32pjd917p5zp.png)

- After this, verify that you can access your project -

appwrite projects get --projectId [PROJECT_ID]


- Now our appwrite cli setup is complete and now let's set up our function.

> Now we have to connect our existing project first. Run

appwrite init project

- Select the existing project and after that you'll see result like this in your console.


!['appwrite project init'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f46uybzmytf9nj4onmi7.png)

- Now run below command to initialize your project.

appwrite init function


!['appwrite init function image'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4irzjew68o2rcuotrout.png)

- Now here you have to select your runtime. If you want to deploy a javascript function then select _node runtime_. I have selected _node runtime_ here.

**_After selecting this our function is created_**.

!['appwrite function directory image'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pes8jwp8t2amhtn85tqn.png)

- Update `src/index.js` with your function code. For detailed information about functions visit [here](https://appwrite.io/docs/functions).

- Once you have updated your code then

appwrite deploy function

- Select your function with `arrow keys` and confirm with `space` and hit 'enter'.

**Congratulations** 🎊🎊🎊 _Your Appwrite function is deployed successfully in Appwrite Cloud.
Now visit your functions dashboard, open the function you deployed just now. Go to settings tab and change the execution policies according to your need. Now Execute the function on event or add custom schedules for execute from your code. You can check function execution in the function dashboard by clicking on `Execute` button._

**Method 2 - Appwrite Cloud**

- Login to your Appwrite cloud account and navigate to functions page.

- Click on _create function_ button and enter necessary details.

!['Create function appwrite cloud'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1k2n91n6mgy6ktl39oi.png)

- In the next optional steps you can add _Events_, _Execute Access_, _Schedule_ and _Variables_ for your Appwrite function and then hit _Create_

**_Your Appwrite function is created._** 🔥

Wait .......................... 🤔🤔🤔🤔
We have to add code as well right?....
So let's proceed then..

- After creating your function you should see this screen.

!['appwrite function'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psl5pf1v5vwuih35xfer.png)

- Now just pick your `index.js` file (with all code) and `package.json` and create a `tar.gz` compressed file. You can use **7zip** if you are in windows platform.

- Once you have create `tar.gz` compressed file. Go to function dashboard and click on **Create Deployment** and upload this `tar.gz` file like shown below and mention `index.js` as the entry point.


!['uploading the tar.gz files'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d337asp1j4cfbzyvx7fh.png)
- Also check the **Activate deployment** checkbox to activate function after deployment.

**Congratulations** 🎊🎊🎊 _Your Appwrite function is deployed successfully in Appwrite Cloud.

- Once done click on `Execute Now` button and you'll see this.

!['Function executed successfully'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yxxea30yau2fc7t92tn.png)

_You can check logs where you can find all error logs, console logs or response returned by your Appwrite function._

_That's all, You have successfully learned how to deploy Appwrite function.

Thankyou for reading this😉
Please like 💓, share 🌐 and follow 🙍‍♂️ for more useful content._

Navdeep M.