DEV Community: Abhi Raj

notion progress bar tutorial | Create amazing progress bar in notion easily in 5 minutes

Abhi Raj — Fri, 12 Dec 2025 16:24:58 +0000

Here is notion progress bar tutorial, notion progress bar tutorial | Create amazing progress bar in notion easily in 5 minutes
in this video i have exaplained how to make amazing progress bar in notion easily

Install n8n locally in windows easily

Abhi Raj — Fri, 11 Apr 2025 09:09:38 +0000

Looking for a way to Install n8n locally in windows? in this video i have explained how you can do that easily

unlock pdf file without password using kali linux

Abhi Raj — Mon, 07 Apr 2025 18:38:38 +0000

Looking for a way to open a pdf even if you don't know the password? in this video i have explained how you can do that with kali linux

I made Ai Image Upscaler chrome extension with Cursor in a day

Abhi Raj — Tue, 18 Mar 2025 04:02:27 +0000

Yesterday, I challenged myself to build something useful in just one day. Ended up creating an AI Image Upscaler as a Chrome extension using Cursor.

It was surprisingly smooth—Cursor’s AI pair programming helped me move fast. The hardest part? Integrating a clean UI within the browser for seamless upscaling. But once I got it working, seeing images go from low-res to crisp HD in seconds felt super satisfying.

Now I’m curious—what’s the fastest project you’ve ever built that actually worked? 🚀

For any one who wants to check it out

https://www.producthunt.com/products/ai-image-upscaler-and-enhancer-chrome-ex

How to make linked bullet point with css

Abhi Raj — Thu, 20 Jun 2024 10:13:53 +0000

here is the basic idea

you make three li list under ul or li tag

        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>

you make the li tag position: relative; and give some left padding

li {
  height: 40px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  position: relative;
}

you use li::before css property and make left border around.

li::before {
  content: '';
  position: absolute;
  left: -16px;
  border-left: 2px solid black;
  height: 100%;
  width: 1px;
}

Now you use li::after css property and make three circles around it

li::after {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: blue;
  margin-left: -80px;
}

Now finally you crop the line from first and last list


li:first-child:before {
  top: 20px;
}

li:last-child:before {
  top: -20px;
}

and result:

full code:

html:

  <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>

css:

li {
  height: 40px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  position: relative;
}

li::before {
  content: '';
  position: absolute;
  left: -16px;
  border-left: 2px solid black;
  height: 100%;
  width: 1px;
}

li::after {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: blue;
  margin-left: -80px;
}


li:first-child:before {
  top: 20px;
}

li:last-child:before {
  top: -20px;
}

How i migrated my create-react-app legacy code to vite for faster build and compile time

Abhi Raj — Sun, 02 Jun 2024 14:10:04 +0000

This is just a small article, i will not write a long paras on why i did it, and what improvements i experience, i will just tell you how i did it.

About my previous create-react-app legacy code:
it is made in typescript and javascript

How i migrated:

first i installed these libraries
npm install vite @vitejs/plugin-react vite-tsconfig-paths

and create a vite.config.ts file

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

export default defineConfig({
    // depending on your application, base can also be "/"
    base: '',
    plugins: [react(), viteTsconfigPaths()],
    server: {
        // this ensures that the browser opens upon server start
        open: true,
        // this sets a default port to 3000
        port: 3000
    }
});

Then i moved my index.html file to root directory, earlier it was on src folder

then i converted all my js file to jsx where i had some html inside

[note: only do this if you are getting error]
i used this script to convert all my js file to jsx file

it is a powershell script for windows, you can search for your os, just run this file in powershell

/.script.ps1

Get-ChildItem -Path "src" -Filter *.js -Recurse | ForEach-Object {
    $newName = $_.FullName -replace '.js$','.jsx'
    if (-Not (Test-Path $newName)) {
        Rename-Item -Path $_.FullName -NewName $newName
    } else {
        Write-Host "Skipping renaming of $($_.FullName) as $newName already exists."
    }
}

then in my .env file i replaced all REACT_APP_ to VITE_REACT_APP_

and in my code i replaced all process.env to import.meta.env.VITE_REACT_APP

i also made a vite-env.d.ts file and with this and placed it inside src as well as root directory.

/// <reference types="vite/client" />

and that's it. Thanks for reading.

so far my build time has reduced to more than half.

How to make custom mentions input box like google chat in react

Abhi Raj — Tue, 05 Dec 2023 11:49:39 +0000

Note: i also made a package which you can use
https://www.npmjs.com/package/react-mentions-input-latest

code:

./MentionsInput.jsx



import React, { useEffect, useRef, useState } from "react";
import { setCaretToEnd, createSpanDiv } from "./utils";
import "./MentionsInput.css";
function MentionsInput(props) {
  const { data: UsersList, trigger } = props;
  const [showSuggestion, setShowSuggestion] = useState(false);
  const main_text_area = document.getElementById("main-text-area");
  const main_text_areaRef = useRef(null);
  const handleSuggestionClick = (name, id) => {
    createSpanDiv(name, main_text_area);
    setCaretToEnd(main_text_areaRef?.current);
    const childNodes = Array.from(main_text_areaRef?.current?.childNodes);

    childNodes.forEach((node) => {
      if (node.nodeType !== Node.TEXT_NODE) return;
      const text = node.textContent;
      const replacedText = text.replace(
        new RegExp(`${trigger}(\\w+)`, "g"),
        ""
      );
      node.textContent = replacedText;
    });

    setShowSuggestion(false);
  };
  useEffect(() => {
    if (!main_text_areaRef?.current) return;
    const main_text_area = main_text_areaRef?.current;
    const inputVal = document.getElementById("ow808");

    main_text_area.setAttribute("tabindex", 1);
    main_text_area.focus();

    // Function to handle keyup event
    const handleKeyUp = (e) => {
      const inputText = e?.target?.innerText;

      const atIndex = inputText.lastIndexOf(trigger);
      const showSuggestion =
        atIndex !== -1 &&
        inputText.substring(atIndex + 1).split(" ")[0].length > 2;
      setShowSuggestion(showSuggestion);
    };

    // Add event listener
    inputVal.addEventListener("keyup", handleKeyUp);

    // Cleanup function to remove event listener
    return () => inputVal.removeEventListener("keyup", handleKeyUp);
  }, [main_text_areaRef?.current]);

  return (
    <div className="h-screen w-full flex justify-center items-center bg-pink-100">
      <div className="w-[400px] h-[20px]" id="ow808">
        {showSuggestion && (
          <section className="flex flex-col m-2 my-2 bg-white px-2 py-3 rounded-lg transition-all ease-in-out duration-500">
            <div className="max-h-36 overflow-y-scroll">
              {UsersList &&
                UsersList.length > 0 &&
                UsersList.map((user, index) => (
                  <div
                    className={`flex justify-start items-center p-2 space-x-1 cursor-pointer hover:bg-gray-200  ${
                      index === 4 || index === UsersList.length - 1
                        ? ``
                        : `border-b-[1.5px]`
                    } transition-all ease-in-out duration-500 focus:bg-[#c4c4c4] `}
                    key={index}
                    onClick={() => {
                      handleSuggestionClick(user.name, user.id);
                    }}
                  >
                    <img
                      className="h-6 w-6 rounded-full object-cover"
                      src={user?.userAvatar}
                      alt={user?.name}
                    />
                    <p className="overflow-x-hidden">{user.name}</p>
                  </div>
                ))}
            </div>
          </section>
        )}
        <div className="cnOaDb I9OJHe">
          <div
            className="border-2 border-gray-400 focus:outline-none px-3 py-2 rounded-lg"
            role="textbox"
            aria-multiline="true"
            spellCheck="true"
            id="main-text-area"
            ref={main_text_areaRef}
            contentEditable="true"
            dir="ltr"
            placeholder="Type Somehting here ...."
          ></div>
        </div>
      </div>
    </div>
  );
}

export default MentionsInput;

./utils.js



export function setCaretToEnd(element) {
  element.focus();
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(element);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);
}

export const UsersList = [
  {
    id: 235075,
    name: "Nitin P",
    userAvatar:
      "https://cdn.pixabay.com/photo/2018/03/27/21/43/startup-3267505_640.jpg",
  },
  {
    id: 473839,
    name: "Nitin P",
    userAvatar:
      "https://cdn.pixabay.com/photo/2018/03/27/21/43/startup-3267505_640.jpg",
  },
  {
    id: 2360589,
    name: "Nitin Pahwa",
    userAvatar:
      "https://cdn.pixabay.com/photo/2018/03/27/21/43/startup-3267505_640.jpg",
  },
  {
    id: 713607,
    name: "Nitin Pal",
    userAvatar:
      "https://cdn.pixabay.com/photo/2018/03/27/21/43/startup-3267505_640.jpg",
  },
  {
    id: 1496449,
    name: "Nitin Pandey",
    userAvatar:
      "https://cdn.pixabay.com/photo/2018/03/27/21/43/startup-3267505_640.jpg",
  },
];

export const createSpanDiv = (name, main_text_area) => {
  var spanElement = document.createElement("span");
  spanElement.textContent = name;
  spanElement.classList = "text-indigo-500 font-bold mentioned-user";
  spanElement.setAttribute("contenteditable", "false");
  main_text_area.appendChild(spanElement);
};

./MentionsInput.css__




[contenteditable="true"]:empty:before {
  content: attr(placeholder);
  pointer-events: none;
  display: block; /* For Firefox */
  color: rgba(92, 86, 89, 0.497);
}

/* width */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #888;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #5e5d5d;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

use it like this

./App.js



import React, { useEffect, useState } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
  useNavigate,
} from "react-router-dom";
import MentionsInput from "./Components/MentionsInput";
import { UsersList } from "./Components/utils";

function App() {
  return (
    <Router>
      <Routes>
        <Route
          path="/"
          element={
            <>
              <MentionsInput data={UsersList} trigger="#" />
            </>
          }
        />
      </Routes>
    </Router>
  );
}

export default App;

How to hide Zendesk web widget in react

Abhi Raj — Wed, 30 Aug 2023 06:26:49 +0000


  useEffect(() => {
        setTimeout(() => {
            const iframeElement = document.getElementById('launcher');
            if (iframeElement) {
                iframeElement.style.display = 'none';
            }
        }, 1000); // wait for 1 second
    }, []);

how to install and use font awesome icons in react js easily

Abhi Raj — Sat, 11 Mar 2023 10:02:27 +0000

For a video tutorial watch this ☝🏿

First make a react project and install these 4 packages



//install this core package first
npm i --save @fortawesome/fontawesome-svg-core

//install first if you want to use solid icons and
//install second if you want to use regular icons
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

//install this react component to use fontawesome
npm i --save @fortawesome/react-fontawesome@latest

now go to here and pick any icon you like
https://fontawesome.com/search?o=r&s=regular%2Csolid&f=sharp

suppose i like this one

as you can see it's react code is this
<FontAwesomeIcon icon="fa-sharp fa-solid fa-hippo" />

so basicallly you need the last one i.e, fa-hippo
change this to CamelCase and remove dash(-) so it will be fa-hippo to faHippo
and now you can use it like this




import "./App.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHippo } from "@fortawesome/free-solid-svg-icons";
function App() {
  return (
    <div className="App">
      <FontAwesomeIcon icon={faHippo} />
    </div>
  );
}

export default App;

Press the like if you enjoyed this article

how to make a blog in nuxt js quickly

Abhi Raj — Sat, 11 Feb 2023 20:50:55 +0000

For a video tutorial watch this ☝🏿

First open your Nuxt project and install this

if you have Nuxt old version (version 2) install this:

yarn add @nuxt/content@^1

For new version, install this:
yarn add @nuxt/content

And in your nuxt.config.js
add this module

  modules: ["@nuxt/content"],

Now make a file content\articles\First-post.md

and write

---
author:
  name: Abhishek
  bio: Subscribe for more such content
  image: none

title: "this is title"
img: https://images.unsplash.com/photo-1600132806608-231446b2e7af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80
description: "This is desc!"
---

# title is hello world

Now make a file pages\blog\index.vue

and write this inside of index.vue

<template>
  <div
    class="max-w-3xl max-w-5xlmin-h-screen flex justify-center mx-auto my-12"
  >
    <main class="w-full mx-4">
      <h1
        class="text-3xl font-thin mb-6 mx-4 uppercase border-b-4 border-indigo-400"
      >
        My BLOG
      </h1>
      <section class="space-y-4 divide-y">
        <article v-for="post of posts" :key="post.slug" class="pt-4">
          <h2 class="text-lg mb-2 text-blue-700 hover:text-blue-800">
            <nuxt-link :to="`/blog/${post.slug}`">
              {{ post.title }}
            </nuxt-link>
          </h2>
          <img :src="post.img" />
          <!-- <img src="{{ post.img }}" /> -->

          <span>
            {{ post.description }}
          </span>
        </article>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [],
    };
  },
  async fetch() {
    this.posts = await this.$content("articles").fetch();
    console.log(this.posts, "post");
  },
};
</script>

Now make a file pages\blog\_slug.vue

and write this inside of _slug.vue

<template>
  <div class="max-w-3xl mx-4 md:mx-auto min-h-screen my-12">
    <div v-if="post">
      <h1 class="text-2xl font-semibold mb-6">{{ post.title }}</h1>
      <nuxt-content :document="post" />
      <div class="mt-8">
        <nuxt-link to="/blog" class="hover:underline">Back to blog</nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: null,
    };
  },
  async fetch() {
    this.post = (
      await this.$content("articles")
        .where({ slug: this.$route.params.slug })
        .limit(1)
        .fetch()
    )?.[0];
  },
  head() {
    return {
      title: this.post?.title,
      // meta: [{ name: "description", content: this.post?.description }],
      meta: [
        {
          hid: "description",
          name: this.post?.title,
          content: this.post?.description,
        },
      ],
    };
  },
};
</script>

<style>
h2 {
  margin-top: 20px;
  margin-bottom: 20px;
}
a {
  color: blueviolet;
}
</style>

Now go to your localhost:3000/blog
you should see something like this

how to add zendesk chat widget in react js

Abhi Raj — Fri, 13 Jan 2023 18:16:14 +0000

Save this as ZendexConfig.js in your src folder

import { Component } from "react";
import PropTypes from "prop-types";

const canUseDOM = () => {
  if (
    typeof window === "undefined" ||
    !window.document ||
    !window.document.createElement
  ) {
    return false;
  }
  return true;
};

export const ZendeskAPI = (...args) => {
  if (canUseDOM && window.zE) {
    window.zE.apply(null, args);
  } else {
    console.warn("Zendesk is not initialized yet");
  }
};

export default class Zendesk extends Component {
  constructor(props) {
    super(props);
    this.insertScript = this.insertScript.bind(this);
    this.onScriptLoaded = this.onScriptLoaded.bind(this);
  }

  onScriptLoaded() {
    if (typeof this.props.onLoaded === "function") {
      this.props.onLoaded();
    }
  }

  insertScript(zendeskKey, defer) {
    const script = document.createElement("script");
    if (defer) {
      script.defer = true;
    } else {
      script.async = true;
    }
    script.id = "ze-snippet";
    script.src = `https://static.zdassets.com/ekr/snippet.js?key=${zendeskKey}`;
    script.addEventListener("load", this.onScriptLoaded);
    document.body.appendChild(script);
  }

  componentDidMount() {
    if (canUseDOM && !window.zE) {
      const { defer, zendeskKey, ...other } = this.props;
      this.insertScript(zendeskKey, defer);
      window.zESettings = other;
    }
  }

  componentWillUnmount() {
    if (!canUseDOM || !window.zE) {
      return;
    }
    delete window.zE;
    delete window.zESettings;
  }

  render() {
    return null;
  }
}

Zendesk.propTypes = {
  zendeskKey: PropTypes.string.isRequired,
  defer: PropTypes.bool,
};

and in your App.js paste this code

import React from "react";
import ReactDOM from "react-dom";
const ZENDESK_KEY = "##########################";
import Zendesk, { ZendeskAPI } from "./ZendexConfig";
const App = () => {
  const handleLoaded = () => {
    ZendeskAPI("messenger", "open");
  };
  return (
    <div>
      <Zendesk defer zendeskKey={ZENDESK_KEY} onLoaded={handleLoaded} />
    </div>
  );
};

export default App;

Follow this docs to add anything in your handleLoadedFunction
https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/web/sdk_api_reference/#custom-launcher

convert number to words in javascript [ with explanation]

Abhi Raj — Mon, 09 Jan 2023 07:03:46 +0000


// Define an object that maps numbers to their word form
const numbersToWords = {
  0: "zero",
  1: "one",
  2: "two",
  3: "three",
  4: "four",
  5: "five",
  6: "six",
  7: "seven",
  8: "eight",
  9: "nine",
  10: "ten",
  11: "eleven",
  12: "twelve",
  13: "thirteen",
  14: "fourteen",
  15: "fifteen",
  16: "sixteen",
  17: "seventeen",
  18: "eighteen",
  19: "nineteen",
  20: "twenty",
  30: "thirty",
  40: "forty",
  50: "fifty",
  60: "sixty",
  70: "seventy",
  80: "eighty",
  90: "ninety",
};

// Define the convertNumberToWords function
function convertNumberToWords(number) {
  // if number present in object no need to go further
  if (number in numbersToWords) return numbersToWords[number];

  // Initialize the words variable to an empty string
  let words = "";

  // If the number is greater than or equal to 100, handle the hundreds place (ie, get the number of hundres)
  if (number >= 100) {
    // Add the word form of the number of hundreds to the words string
    words += convertNumberToWords(Math.floor(number / 100)) + " hundred";

    // Remove the hundreds place from the number
    number %= 100;
  }

  // If the number is greater than zero, handle the remaining digits
  if (number > 0) {
    // If the words string is not empty, add "and"
    if (words !== "") words += " and ";

    // If the number is less than 20, look up the word form in the numbersToWords object
    if (number < 20) words += numbersToWords[number];
    else {
      // Otherwise, add the word form of the tens place to the words string
      //if number = 37, Math.floor(number /10) will give you 3 and 3 * 10 will give you 30
      words += numbersToWords[Math.floor(number / 10) * 10];

      // If the ones place is not zero, add the word form of the ones place
      if (number % 10 > 0) {
        words += "-" + numbersToWords[number % 10];
      }
    }
  }

  // Return the word form of the number
  return words;
}

console.log(convertNumberToWords(123));