DEV Community: Deepak Jaiswal

Download all your AWS S3 bucket folders in single script

Deepak Jaiswal — Sun, 05 Jul 2026 03:56:50 +0000

Today when i need to downlaod all s3 bucket folders. but in bucket the button is getting disabled. so i have created a script that download all the folders
like images, videos, fonts etc.

I hope it can help you in some projects.

const { S3Client, ListObjectsV2Command, GetObjectCommand } = require('@aws-sdk/client-s3');
const fs = require('fs');
const path = require('path');
const { pipeline } = require('stream/promises');
require('dotenv').config();

const region = process.env.AWS_REGION || 'us-east-1';
const accessKeyId = process.env.AWS_ACCESS_KEY_ID || '';
const secretAccessKey = process.env.AWS_SECRET_ACCESS_KEY || '';
const bucketName = process.env.AWS_S3_BUCKET || '';

if (!bucketName) {
  console.error('Error: AWS_S3_BUCKET is not defined in your environment variables.');
  process.exit(1);
}

const s3Client = new S3Client({
  region,
  credentials: {
    accessKeyId,
    secretAccessKey,
  },
});

async function downloadAll() {
  const publicDir = path.join(__dirname, 'public');
  if (!fs.existsSync(publicDir)) {
    fs.mkdirSync(publicDir, { recursive: true });
  }

  let isTruncated = true;
  let continuationToken = undefined;

  console.log(`Starting download from S3 Bucket: ${bucketName}...`);

  while (isTruncated) {
    const listParams = {
      Bucket: bucketName,
      ContinuationToken: continuationToken,
    };

    const listResponse = await s3Client.send(new ListObjectsV2Command(listParams));

    if (listResponse.Contents && listResponse.Contents.length > 0) {
      for (const object of listResponse.Contents) {
        const key = object.Key;
        // Skip directory placeholder objects (objects with size 0 that end in a slash)
        if (key.endsWith('/')) {
          continue;
        }

        const localPath = path.join(publicDir, key);
        console.log(`Downloading ${key} -> ${localPath}...`);

        try {
          const getParams = {
            Bucket: bucketName,
            Key: key,
          };
          const getResponse = await s3Client.send(new GetObjectCommand(getParams));

          // Ensure parent directory exists for the file
          const dir = path.dirname(localPath);
          if (!fs.existsSync(dir)) {
            fs.mkdirSync(dir, { recursive: true });
          }

          await pipeline(getResponse.Body, fs.createWriteStream(localPath));
          console.log(`Successfully downloaded ${key}`);
        } catch (error) {
          console.error(`Failed to download ${key}:`, error);
        }
      }
    }

    isTruncated = listResponse.IsTruncated;
    continuationToken = listResponse.NextContinuationToken;
  }

  console.log('Download complete.');
}

downloadAll().catch((err) => {
  console.error('Fatal error during download:', err);
  process.exit(1);
});

If you are facing any issue with it please add a comment.

you can run this script like if save it like loads3.js

then just run into the terminal

node loads3.js

https://medium.com/@deepakjais/download-all-aws-s3-bucket-folders-in-single-script-490fc14afe4b?sharedUserId=deepakjais

TypeScript Methods Every Developer Should Know (But Not Everyone Does)

Deepak Jaiswal — Wed, 01 Jul 2026 03:50:08 +0000

TypeScript builds on JavaScript's runtime methods and adds its own compile-time utilities. Most developers know the basics — map, filter, reduce — but a lot of genuinely useful methods and utility types get overlooked. Here's a practical tour, from the familiar to the underused.

1. The array methods everyone "knows" (but half-knows)

`Array.prototype.map`, `filter`, `reduce`

These are the bread and butter of functional-style TypeScript. Quick refresher with types attached:

const numbers: number[] = [1, 2, 3, 4, 5];

const doubled: number[] = numbers.map((n) => n * 2);
const evens: number[] = numbers.filter((n) => n % 2 === 0);
const sum: number = numbers.reduce((acc, n) => acc + n, 0);

`Array.prototype.find` and `findIndex`

Returns the first matching element (or undefined), not an array — a common source of bugs when people confuse it with filter.

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: "Asha" },
  { id: 2, name: "Ravi" },
];

const user = users.find((u) => u.id === 2); // User | undefined

2. The ones developers forget exist

`Array.prototype.flatMap`

Combines map and flat in one pass — great for when a mapping function returns an array per item.

const sentences: string[] = ["hello world", "typescript rocks"];
const words: string[] = sentences.flatMap((s) => s.split(" "));
// ["hello", "world", "typescript", "rocks"]

`Array.prototype.at`

Lets you index from the end without length - 1 gymnastics.

const list = [10, 20, 30, 40];
const last = list.at(-1); // 40

`Object.entries`, `Object.fromEntries`

Useful for transforming objects the same way you'd transform arrays.

const prices: Record<string, number> = { apple: 1, banana: 2 };

const doubledPrices = Object.fromEntries(
  Object.entries(prices).map(([key, value]) => [key, value * 2])
);
// { apple: 2, banana: 4 }

`Array.prototype.some` and `every`

Both return booleans — some checks "at least one," every checks "all." Cleaner than manual loops for validation logic.

const scores = [88, 92, 79, 95];
const allPassed = scores.every((s) => s >= 60); // true
const anyFailed = scores.some((s) => s < 60); // false

3. TypeScript-specific utility types (not runtime methods, but just as valuable)

These aren't methods you call — they're compile-time helpers that reshape types. Underused because people don't think to reach for them.

`Partial<T>` and `Required<T>`

interface Settings {
  theme: string;
  language: string;
}

function updateSettings(update: Partial<Settings>) {
  // caller can pass just { theme: "dark" }
}

`Pick<T, K>` and `Omit<T, K>`

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
}

type ProductSummary = Pick<Product, "id" | "name">;
type ProductWithoutDescription = Omit<Product, "description">;

`Record<K, V>`

Great for typing dictionaries/maps cleanly instead of { [key: string]: V }.

type StatusMap = Record<"success" | "error" | "loading", string>;

const messages: StatusMap = {
  success: "Done!",
  error: "Something went wrong.",
  loading: "Please wait...",
};

`ReturnType<T>` and `Parameters<T>`

Handy when you want to derive types from a function instead of duplicating them.

function createUser(name: string, age: number) {
  return { name, age, id: crypto.randomUUID() };
}

type NewUser = ReturnType<typeof createUser>;
type CreateUserArgs = Parameters<typeof createUser>;

4. String methods that quietly save time

`String.prototype.padStart` / `padEnd`

const invoiceId = "42".padStart(6, "0"); // "000042"

`String.prototype.replaceAll`

No more regex-with-global-flag just to replace every occurrence.

const csv = "a,b,c".replaceAll(",", " | "); // "a | b | c"

5. A note on optional chaining and nullish coalescing

Not "methods" in the traditional sense, but they belong here because they replace patterns that used to require verbose helper functions.

interface Config {
  server?: {
    port?: number;
  };
}

const config: Config = {};

const port = config.server?.port ?? 3000; // 3000, no runtime errors

Wrapping up

Most TypeScript codebases lean on map/filter/reduce and stop there — which works, but leaves a lot of expressiveness on the table. Methods like flatMap, at, and Object.fromEntries, paired with utility types like Pick, Omit, and ReturnType, often let you delete a helper function or a manual type declaration entirely.

The best way to internalize these is to keep the TypeScript Utility Types docs and MDN's Array reference open while refactoring — you'll start spotting places to swap in a cleaner method almost every time.

https://medium.com/webnex-labs/typescript-methods-every-developer-should-know-but-not-everyone-does-e2778ce8e289?sharedUserId=deepakjais

Node.js Developer Interview Questions in 2026: What's Actually Being Asked

Deepak Jaiswal — Wed, 01 Jul 2026 03:47:03 +0000

Node.js interviews have shifted. A few years ago, knowing require vs import and reciting "non-blocking I/O" was enough to get through a junior screen. In 2026, interviewers dig deeper — into event loop internals, memory diagnostics, and system design — even at mid-level. Here's a practical breakdown of what's actually coming up, organized by topic, with the event loop getting its own deep-dive section since it's the single most-tested concept at every level.

1. Event Loop Questions (the ones that trip people up most)

The event loop is Node's most-asked topic because it's easy to describe vaguely and very hard to explain precisely. Interviewers use it to separate people who memorized a definition from people who've actually reasoned about execution order.

Q: What is the event loop, and why does Node need it?

A: Node.js runs JavaScript on a single thread, but it needs to handle many concurrent operations — file reads, network requests, timers — without blocking that thread. The event loop is the mechanism that makes this possible: it continuously checks for completed asynchronous operations and executes their callbacks, cycling through a fixed set of phases. This lets Node handle thousands of concurrent connections efficiently instead of spawning a thread per request.

Q: What are the phases of the event loop, in order?

A: Each loop iteration ("tick") runs through these phases in order:

Timers — executes callbacks scheduled by setTimeout and setInterval.
Pending callbacks — executes I/O callbacks deferred from the previous cycle.
Idle/prepare — internal use.
Poll — retrieves new I/O events and executes their callbacks; this is where most work happens.
Check — executes setImmediate() callbacks, right after the poll phase.
Close callbacks — executes cleanup callbacks, e.g. socket.on('close', ...).

Between every phase transition, Node drains the microtask queue (Promises, process.nextTick) before moving on.

Q: What's the difference between `process.nextTick()` and `setImmediate()`?

A: This is the classic trick question. process.nextTick() callbacks run before the event loop continues to the next phase — they're processed as part of the current operation, before I/O events are polled. setImmediate() callbacks run in the check phase, after the poll phase of the current loop iteration.

console.log("start");

setImmediate(() => console.log("setImmediate"));
process.nextTick(() => console.log("nextTick"));

console.log("end");

// Output:
// start
// end
// nextTick
// setImmediate

nextTick always fires before setImmediate in this pattern because the microtask queue (which nextTick uses) is drained before the loop advances to the check phase.

Q: Where do Promises fit into this? Microtasks vs macrotasks.

A: Promise callbacks (.then, .catch, async/await continuations) go into the microtask queue, which has higher priority than the macrotask/callback queue used by setTimeout, setInterval, and I/O callbacks. Node fully drains the microtask queue after every callback and between every event loop phase, before touching the next macrotask.

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("promise"));
console.log("sync");

// Output:
// sync
// promise
// timeout

Even though the timeout is scheduled for "0ms," the promise callback always runs first because microtasks are cleared before macrotasks.

Q: If Node is single-threaded, how does it handle file I/O or DNS lookups without blocking?

A: Node offloads I/O-heavy or blocking operations (file system access, DNS lookups, some crypto operations) to a thread pool managed by libuv, Node's underlying C library. The main thread stays free to keep running JavaScript; when the offloaded task finishes, its callback is queued back into the event loop's poll phase for execution on the main thread.

Q: What happens if you run a CPU-intensive synchronous task, like a large loop or heavy computation?

A: It blocks the event loop entirely. Since JavaScript execution on the main thread is synchronous, a long-running loop or expensive computation prevents the event loop from processing any other callback — timers, I/O, everything — until it finishes. This is why CPU-bound work should be offloaded to worker threads or a separate process, not run inline in request handlers.

Q: How would you diagnose an event loop that's "blocked" or "lagging" in production?

A: This is a senior-level follow-up. A strong answer covers:

Using perf_hooks' monitorEventLoopDelay() to measure loop lag directly.
Taking CPU profiles (--prof or a tool like Clinic.js) to find synchronous hotspots.
Checking for accidental synchronous APIs (fs.readFileSync, JSON parsing of huge payloads) inside request handlers.
Considering whether the workload belongs in a worker thread or a queued background job instead of the main event loop.

2. Core Node.js Fundamentals

Asked at every level, usually as a warm-up before diving deeper.

Q: How is Node.js different from a traditional multi-threaded server?
A: Traditional servers employ multi-threading, spawning a new thread per client request, which requires resources even when idle. Node.js instead uses a single thread with non-blocking, asynchronous functions for I/O, making it well-suited for real-time updates and microservices.

Q: What's the first argument convention in a Node.js callback?
A: By convention, the first argument is reserved for an error object — null or undefined if nothing went wrong, otherwise an Error. Checking it before touching the results is the expected pattern.

Q: Why choose Node.js over Java, PHP, or similar backend stacks?
A: Full-stack JavaScript (same language on client and server), a huge npm ecosystem, and an architecture that's naturally efficient for I/O-heavy, real-time, or high-concurrency workloads.

3. Concurrency and Performance (mid to senior level)

Q: Compare child_process.spawn(), child_process.fork(), and worker threads.
A: spawn() launches an independent external process (e.g. running a shell command) with its own memory space and no shared V8 engine. fork() is a specialized version of spawn() for launching new Node.js processes, with an IPC channel built in for message passing. Worker threads run within the same process but on separate threads, letting you offload CPU-bound JavaScript work without the overhead of a full new process.

Q: How does the Cluster module improve performance?
A: The Cluster module lets you run multiple Node.js worker processes that share the same server port, letting a single-threaded runtime take advantage of multiple CPU cores. It also enables rolling restarts without downtime.

Q: How would you handle a memory leak in a long-running Node process?
A: Take heap snapshots at intervals (via --inspect and Chrome DevTools, or heapdump), compare them to find growing retained objects, and check common culprits: unbounded caches, unclosed event listeners, or closures holding references longer than intended.

4. System Design Questions (senior roles)

Senior interviews increasingly open with a design prompt — "design a URL shortener," "design a real-time collaboration tool," "design a chat backend" — and drill into:

REST API design: idempotency, status codes, pagination
WebSockets/real-time messaging (socket.io, ws)
Horizontal scaling: stateless services, load balancing
Streams and backpressure for large payloads or file uploads
Observability: structured logging, metrics, distributed tracing

5. Security Questions

How do you prevent XSS and CSRF in a Node/Express app? (Input validation, output encoding, Helmet middleware, CSP headers.)
How do you manage secrets and environment configuration safely across dev/staging/prod?
What's your process for keeping dependencies patched and auditing for known vulnerabilities?

6. A 2026-Specific Shift Worth Knowing

Two things have become near-universal expectations that weren't guaranteed a couple of years ago:

TypeScript fluency. Interviewers now routinely hand you TypeScript code to read or extend, and expect you to speak to type safety trade-offs, not just plain JS.
AI-assisted coding literacy. Some interviewers now watch how you use AI tools during live coding — whether you can debug, iterate, and clearly explain your reasoning — treating thoughtful AI use as a baseline skill rather than something to hide.

Wrapping Up

If there's one area worth over-preparing, it's the event loop — not the one-sentence definition, but being able to trace through phase ordering, explain nextTick vs setImmediate vs Promise microtasks from memory, and reason about what blocks the loop versus what gets offloaded to libuv's thread pool. That single topic shows up at every seniority level, just with increasing follow-up depth.

medium.com

Using PostHog in Your React App: Integration Guide and Benefits

Deepak Jaiswal — Tue, 23 Jun 2026 03:10:32 +0000

If you’re building a React app, you eventually hit the same wall every team hits: you ship features, but you don’t actually know how people use them. Which buttons get clicked? Where do users drop off in a signup flow? Did that new feature actually move the needle? This is where PostHog comes in.

PostHog is an open-source product analytics platform that bundles event tracking, session replay, feature flags, A/B testing, and error tracking into a single tool. Instead of stitching together Google Analytics, LaunchDarkly, Sentry, and Hotjar separately, PostHog gives you most of that in one SDK. Here’s how to wire it into a React app and what you actually get out of it.

Installing PostHog in React
PostHog has a dedicated React SDK (@posthog/react) that sits on top of the core posthog-js library. For a standard Vite or Create React App project, installation is straightforward.

Install both packages:

npm install posthog-js @posthog/react
Add your project token and host to your environment variables. If you’re using Vite, prefix them with VITE_ so they're exposed to the frontend:

.env.local

VITE_PUBLIC_POSTHOG_KEY=your_project_api_key
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
You can find both values in your PostHog project settings.

Wrapping Your App with the Provider
PostHog integrates at the root of your app using the PostHogProvider, typically in main.jsx (Vite) or index.js (CRA):

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { PostHogProvider } from '@posthog/react'
import App from './App.jsx'
const options = {
  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
  defaults: '2026-01-30', // applies PostHog's recommended SDK defaults
}
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <PostHogProvider
      apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY}
      options={options}
    >
      <App />
    </PostHogProvider>
  </StrictMode>
)

view full post visit

https://medium.com/webnex-labs/using-posthog-in-your-react-app-integration-guide-and-benefits-179cf5c2ce89

Build a Screen Sharing App Using noVNC (Like AnyDesk)

Deepak Jaiswal — Tue, 23 Jun 2026 03:07:47 +0000

Ever wondered how tools like AnyDesk or TeamViewer let you control a remote computer right from your browser? In this guide, we’ll build exactly that — a browser-based remote desktop app using noVNC, websockify, and Node.js.

By the end, you’ll have a working screen sharing app where anyone can connect to a remote machine from a web browser — no client software needed.

What We’re Building
A remote desktop system with:

A VNC server on the host machine (the one being shared)
A WebSocket bridge to relay VNC traffic over the web
A noVNC HTML5 client that runs entirely in the browser
A Node.js + Express backend to manage sessions and serve the app
This is the same architecture used by cloud providers like AWS, DigitalOcean, and Gitpod for their browser-based terminals and desktops.

How It Works
[Browser] ←→ WebSocket ←→ [websockify] ←→ TCP ←→ [VNC Server] ←→ [Desktop]

A VNC server (like x11vnc or TigerVNC) captures the screen and handles input on the host machine
websockify acts as a bridge — it converts WebSocket connections from the browser into plain TCP connections that the VNC server understands

noVNC is a JavaScript VNC client that runs in the browser and talks to websockify over WebSockets

Prerequisites
A Linux machine (Ubuntu 20.04+ recommended) as the host
Node.js 18+
Python 3 (for websockify)
A desktop environment (GNOME, XFCE, etc.) or a virtual display
sudo apt update
sudo apt install -y x11vnc xvfb websockify nodejs npm
Step 1: Set Up a Virtual Display (Optional)
If your server doesn’t have a physical monitor, create a virtual display using Xvfb:

Start a virtual display on screen :1

Xvfb :1 -screen 0 1920x1080x24 &

Set the display environment variable

export DISPLAY=:1
To verify it’s running:

DISPLAY=:1 xterm & # Should open a terminal on the virtual display
Step 2: Start the VNC Server
We’ll use x11vnc to capture the display and expose it over VNC:

x11vnc -display :1 \
-rfbport 5901 \
-passwd yourpassword \
-forever \
-shared \
-noxdamage

view full post visit my medium

https://medium.com/@deepakmukundpur/build-a-screen-sharing-app-using-novnc-like-anydesk-03a31def47cc

Add localization in nextjs project

Deepak Jaiswal — Sun, 09 Mar 2025 17:45:05 +0000

When i am integrating localization in nextjs getting many issues. so can create post for it. I have implement in client side.
First you need to create file for language which you want to include.

like
public/locales/
en.json , ar.json, de.json

en.json

{
  "HEADING":"My First Page"
}

de.json

{
  "HEADING":"Meine erste Seite"
}

like this you can add language keys.

package.json

{
"name": "translation-project",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"aos": "^2.3.4",
"bootstrap": "^5.3.3",
"i18next": "^24.2.2",
"i18next-browser-languagedetector": "^8.0.4",
"i18next-http-backend": "^3.0.2",
"next": "15.1.6",
"react": "^19.0.0",
"react-bootstrap": "^2.10.8",
"react-dom": "^19.0.0",
"react-i18next": "^15.4.1"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/node": "22.12.0",
"eslint": "^9",
"eslint-config-next": "15.1.6",
"sass": "^1.85.1",
"sass-loader": "^16.0.5",
"typescript": "5.7.3"
}
}

Base.tsx

import React, { useEffect, useState } from 'react'
import Footer from '../footer/page';
import { I18nextProvider, useTranslation } from "react-i18next";
import i18n from "../../../utils/i18n";
const Base = ({children}) => {
const { i18n: i18nInstance } = useTranslation();
const [loading, setLoading] = useState(true);
useEffect(() => {
if (i18nInstance.isInitialized) {
   setLoading(false);
}
}, [i18nInstance.isInitialized]);

if (loading) {
return (
<div className="global-loading">
</div>
);
}
return (
<I18nextProvider i18n={i18n}>
{children}
<Footer />
</I18nextProvider>
)
}
export default Base;

i18n.ts

"use client"; 
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpApi from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
if (typeof window !== "undefined") {
i18n
.use(HttpApi) // Load translations dynamically
.use(LanguageDetector)
.use(initReactI18next)
.init({
supportedLngs: ["en", "ar"],
fallbackLng: "en",
debug: false, // Set false in production
detection: {
  order: ["localStorage", "cookie", "navigator"],
  caches: ["localStorage"]
},
backend: {
   loadPath: "/locales/{{lng}}.json"
},
interpolation: {
    escapeValue: false
}
});
}
export default i18n;

In this file i have show that how you can change language & use it.

Footer.tsx

"use client";
import React, { useEffect } from 'react';
import Link from 'next/link';
import './style.scss';
import { PolicyMenu, SocialMenu } from "../../../constant/const";
import { useTranslation } from 'react-i18next';
export default function Footer() {
const { t, i18n } = useTranslation();
const change = (lang) => {
if (i18n?.language == lang) return;
i18n?.changeLanguage(lang);
}
return (
<div className='footer-wrapper'>
<div className='container'>
<div className='row align-items-center justify-content-center gap-8'>
<div className='col-md-3'>
<p className='mb-0 text-white'>{t("SITE_BY")}</p>
</div>
<div className='col-md-6'>
<ul className='social-menu d-flex gap-8 justify-content-center flex-wrap'>
{SocialMenu.map((item, index) => (
<li key={index}><Link target="_blank" href={item.url}>{item.icon}</Link></li>
))}
</ul>
</div>
<div className='col-md-3'>
<ul className='footer-links d-flex flex-wrap'>
{PolicyMenu.map((value, index) => (
<li key={index}><Link className='text-white'
href={value.url}>{t(value.name)}</Link></li>
))
}
<div className='d-flex gap-2 text-white lang-active'>
<span className={ 'cursor-pointer ' +(i18n?.language=='en' && "active")}
onClick={() => change('en')}>EN</span>
<span className={ 'cursor-pointer ' +(i18n?.language=='ar' && "active")}
onClick={() => change('ar')}>AR</span>
</div>
</ul>
</div>
</div>
</div>
</div>
)
}

Create slug using title in React

Deepak Jaiswal — Thu, 06 Feb 2025 18:25:50 +0000

I have seen some time we are using _id in routing. and we get the data based on _id but it shows our original data id that i have leak. and based on SEO the id is not best way to add in url.

Like i'm creating a blog detail page based on id it looks bad but when i am using slug based on title. it looks good.

And the user understand by the url.

function getSafeRegexpString(input) {
  return input
    .split("")
    .map((char) => `\\${char}`)
    .join("");
}

I am using the package diacritics which is remove unnecessary text.

import { remove as stripAccents} from 'diacritics';
function format(
  input,
  delimiter,
  ignoreInvalid = false
) {
  const harmonized = stripAccents(input).trim().toLowerCase();
  const safeDelimiter = getSafeRegexpString(delimiter);

  if (ignoreInvalid) {
    return harmonized.replace(/\s+/g, delimiter);
  }

  return harmonized
    .replace(new RegExp(`[^a-z0-9\\u0900-\\u097F${safeDelimiter}]+`, "g"), delimiter) // Replace all non-valid caracters by delimiter
    .replace(new RegExp(`${safeDelimiter}+`, "g"), delimiter) // Remove multiple delimiters repetition
    .replace(new RegExp(`^${safeDelimiter}`, "g"), "") // remove delimiter at the beginning
    .replace(new RegExp(`${safeDelimiter}$`, "g"), ""); // remove delimiter at the end
};

You can also put your regex for custom change. I have put [^a-z0-9\u0900-\u097F${safeDelimiter}] for hindi words.

export default function slugify(
  node,
  options = { delimiter: "-", prefix: "" }
) {
  if (!options.delimiter) options.delimiter = "-";
  if (!options.prefix) options.prefix = "";

  if (!node || typeof node === "boolean") {
    return "";
  }

  const { delimiter, prefix } = options;

  // boolean
  if (typeof node === "boolean") {
    return ""; // not much we can do here
  }

  // string, number
  if (typeof node === "string" || typeof node === "number") {
    const harmonizedPrefix = format(prefix, delimiter, true);
    const harmonizedNode = format(String(node), delimiter);

    if (harmonizedPrefix) {
      return `${harmonizedPrefix}${delimiter}${harmonizedNode}`;
    }

    return harmonizedNode;
  }

  // ReactPortal
  if ("children" in node) {
    return slugify(node.children);
  }

  // ReactElement
  if ("type" in node) return slugify(node.props.children, options);

  // ReactFragment (including array of nodes)
  if (Symbol.iterator in node) {
    return slugify(
      Array.from(node)
        .map((subNode) => slugify(subNode, { delimiter }))
        .join(delimiter),
      options
    );
  }

  // unhandled case
  return "";
};

Astro: Best for business, portfolio and bloging sites

Deepak Jaiswal — Sun, 19 Jan 2025 19:16:23 +0000

I am writing this post because I see their performance and seo friendly nature.and I'm surprised when see their ratio from others framework.

Astro powers the world's fastest marketing sites, blogs, e-commerce websites, and more

Astro is a JavaScript web framework optimized for building fast, content-driven websites.

Server-First

Astro improves website performance by rendering components on the server, sending lightweight HTML to the browser with zero unnecessary JavaScript overhead.

Content-Driven

Astro was designed to work with your content, no matter where it lives. Load data from your file system, external API, or your favorite CMS.

Customizable

Extend Astro with your favorite tools. Bring your own JavaScript UI components, CSS libraries, themes, integrations, and more.

Real-World Core Web Vitals

Astro Core Web Vitals Passing
65%

Gatsby Core Web Vitals Passing
44%

WordPress Core Web Vitals Passing
43%

Next.js Core Web Vitals Passing
28%

Nuxt Core Web Vitals Passing
26%

Many brands currently using you can on their website https://astro.build/

Create Custom Block in Quill like Video, Link, Banner.

Deepak Jaiswal — Mon, 14 Aug 2023 18:09:01 +0000

i am creating this post as my experience. sometime we need to create custom block in quill to create block for our need. i create some block.

index.html

<div class="" id="editor-wrapper" (keyup)="keyup($event)" (click)="keyup($event)">

</div>
<div><button (click)="download()">Download</button></div>
<div><button (click)="insert()">Insert Hr</button></div>
<div id="customDropdown" style="display: none;">
  <!-- Add your dropdown options here -->
  <button>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</div>

editor.ts

declare const Quill: any;
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
declare const quillBetterTable: any;
declare const htmlToPdfmake: any;
declare const pdfMake: any;
import jsPDF from 'jspdf';

Quill.register({
  'modules/better-table': quillBetterTable
}, true);
const Link = Quill.import("formats/link");

const BlockEmbed = Quill.import("blots/block/embed");

class VideoBlot extends BlockEmbed {
  static create(obj:any) {
    console.log(obj)
    let node = super.create(obj?.url?obj?.url:obj);
    let iframe = document.createElement('iframe');
    let con = document.createElement('span');
    con.setAttribute('style', 'display:flex;');
    con.setAttribute('class', 'resize-container');
    con.innerHTML=`
        <button data-size="1" class="re-1">1x</button>
        <button data-size="2" class="re-2">2x</button>
        <button data-size="3" class="re-3">3x</button>
        <button data-size="4" class="re-4">4x</button>
    `
    // con.addEventListener('click',(e:any)=>{
    //   node.setAttribute('data-width', 'embed-responsive-'+e.target.dataset.size);
    //   console.log("first",e.target.dataset.size)
    // })

    node.setAttribute('data-width', obj?.size?obj?.size:'embed-responsive-'+3);
    // Set styles for wrapper
    node.setAttribute('class', 'embed-responsive embed-responsive-16by9');
    node.appendChild(con)
    // Set styles for iframe
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', 'true');
    iframe.setAttribute('src', obj?.url?obj?.url:obj);
    // Append iframe as child to wrapper
    node.appendChild(iframe);
    return node;
  }

  static value(domNode:any) {
    const url=domNode.getElementsByTagName('iframe')[0].getAttribute('src');
    const size=domNode.getAttribute('data-width');
    return {url,size}
  }

  // format(name:any, value:any) {
  //   // Override the format method to handle your custom attribute
  //   if (name === 'custom-attribute') {
  //     const previousValue = this['domNode'].getAttribute('data-custom-attribute');
  //     if (value) {
  //       this['domNode'].setAttribute('data-custom-attribute', value);
  //     } else {
  //       this['domNode'].removeAttribute('data-custom-attribute');
  //     }
  //     // Use the previousValue as needed
  //   } else {
  //     super.format(name, value);
  //   }
  //   console.log('Previous value:', name,value);
  // }
}
VideoBlot['blotName'] = 'video';
VideoBlot['tagName'] = 'div';

Quill.register(VideoBlot, true);

var CustomLink = Quill.import('formats/link');
CustomLink.sanitize = function(url:any) {
  return url; // Customize the URL sanitization if needed
};

class CustomLinkFormat extends CustomLink {
  static create(value:any) {
    const node = super.create(value.url);
    console.log(value);
    node.setAttribute('data-custom-attribute', value.customAttribute); // Set the custom attribute
    return node;
  }

  static formats(node:any) {
    const format = super.formats(node);
    console.log(node)
    format.customAttribute = node.getAttribute('data-custom-attribute')||'1'; // Get the custom attribute
    return format;
  }
}
Quill.register(CustomLinkFormat, true);

var Inline = Quill.import('blots/inline');

// Define the custom format class
class CustomFormat extends Inline {
  static create(v:any) {
    const node = super.create();
    const d=document.createElement('sup');
    d.classList.add('custom-format');
    d.appendChild(node)
    return d;
  }
}

// Assign a CSS class name to the custom format
CustomFormat['blotName'] = 'highlight';
CustomFormat['tagName'] = 'span';

// Register the custom format with Quill
Quill.register(CustomFormat);


// Extend ListContainer module
// const Block = Quill.import('blots/block');

// class CustomListContainer extends Block {
//   static create(value:any) {
//     const node = super.create(value);
//     node.classList.add('custom-list-container');
//     return node;
//   }
// }

// CustomListContainer['tagName'] = 'div';
// CustomListContainer['allowedChildren'] = [Block, CustomListContainer];
// CustomListContainer['scope'] = Block.scope;
// CustomListContainer['defaultChild'] = 'block';


// // Override the default ListItem module to use the custom list container
// const ListItem = Quill.import('formats/list');

// class CustomListItem extends ListItem {   
//   format(name:any, value:any) {
//     if (name === 'list' && value) {
//       const isOrdered = value === 'ordered';
//       const CustomContainer:any = isOrdered ? 'OL' : 'UL';
//       const container:any = this['parent'];
//       if (!(container instanceof CustomContainer)) {
//         const newContainer = this['scroll'].create(CustomContainer);
//         container.replaceWith(newContainer);
//         newContainer.appendChild(this['domNode']);
//       }
//     }
//     super.format(name, value);
//   }
// }


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-rich-editor',
  templateUrl: './rich-editor.component.html',
  styleUrls: ['./rich-editor.component.css']
})
export class RichEditorComponent implements OnInit{
  data:any=`<p><br></p>`
  quill:any;
  constructor(public sanitizer: DomSanitizer){

  }
  ngOnInit(): void {
    setTimeout(()=>{
      this.initEditor()
    },1000)
    // document.querySelector('.re-1')?.addEventListener('click',()=>{
    //   console.log('sadasa')
    // })

  }

  initEditor(){
    this.quill = new Quill('#editor-wrapper', {
      theme: 'snow',
      modules: {
        toolbar:{
          container:[
          'video',
          'image',
          'link',
          'align',
          'customLink',
          { 'script': 'sub'}, { 'script': 'super' },
          {'list':'ordered'},{'list':'bullet'}
        ],
        handlers:{
          'customLink':(v:any)=>{
            console.log(v)
            this.quill.format('link', {
              url: 'https://example.com',
              customAttribute: 'custom value'
            });
          },
          },

      },
        table: false,  // disable table module
        'better-table': {
          operationMenu: {
            items: {
              unmergeCells: {
                text: 'Another unmerge cells name'
              }
            }
          }
        },
        keyboard: {
          bindings: quillBetterTable.keyboardBindings
        },
      },
    })

    var customDropdown:any = document.getElementById('customDropdown');
    var dropdownOpen = false;

    this.quill.on('text-change', (delta:any, oldDelta:any, source:any)=> {
      console.log(delta,oldDelta,source)
      var range = this.quill.getSelection();
      if (range && range.length === 0) {
        var cursorPosition = range.index;
        var lineText = this.quill.getText(0, cursorPosition);

        // Define the trigger text or condition to open the dropdown
        var triggerText = '/'; // Example: Open the dropdown when the user types '@dropdown'

        if (lineText.endsWith(triggerText)) {
          if (!dropdownOpen) {
            // Get the bounds of the current cursor position
            var bounds = this.quill.getBounds(range.index);

            // Get the offset position of the Quill editor
            var editorBounds:any = document.getElementById('editor-wrapper')?.getBoundingClientRect();
            var editorOffsetTop = editorBounds.top + window.pageYOffset;
            var editorOffsetLeft = editorBounds.left + window.pageXOffset;

            // Position the dropdown below the cursor, considering the editor offset
            customDropdown.style.left = (bounds.left - editorOffsetLeft) + 'px';
            customDropdown.style.top = (bounds.top - editorOffsetTop + bounds.height) + 'px';
            customDropdown.style.display = 'block';
            dropdownOpen = true;
          }
        } else {
          if (dropdownOpen) {
            // Close the dropdown
            customDropdown.style.display = 'none';
            dropdownOpen = false;
          }
        }
      }
    });

    document.addEventListener('click', function(event) {
      // Close the dropdown if a click event occurs outside the dropdown
      if (!customDropdown.contains(event.target)) {
        customDropdown.style.display = 'none';
        dropdownOpen = false;
      }
    });

  }
  click(x:any){
    console.log(x)
  }

  download(){
   let x=this.quill.root.innerHTML;
  const htmlString = '<ol><li class="child">Item 1</li><li>Item 2</li></ol><ol><li class="chi">Item 1</li><li>Item 2</li></ol>';

// Replace <ol> tags with <ul> tags for child elements with the class "child"
x= x.replaceAll(/<ol\b([^>]*)>(.*?<li\s+data-list="bullet">.*?<\/li>.*?)<\/ol>/gi, '<ul $1>$2</ul>')



    var html = htmlToPdfmake(x);
  // console.log(html)
  var docDefinition = {
    content: [
      html
    ],
    styles:{

    }
  };

  var pdfDocGenerator = pdfMake.createPdf(docDefinition);
  pdfDocGenerator.download()

  // var doc:any = new jsPDF();
  // doc.html(this.quill.root.innerHTML, {
  //   callback: function (docs:any) {
  //     docs.save('quill_content.pdf');
  //   }
  // });

  }

  insert(){
    const range=this.quill.getSelection();
    const is=this.quill.getFormat(range.index,range.length)
    console.log(is)
    if(is.highlight)
    this.quill.format('highlight', false);
    else this.quill.format('highlight', true);
  }

  keyup(event:any){
    console.log(event)
  }
}

style.css

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 160px;
  padding: 5px 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: block;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

Watchlist application using ReactJS, NodeJS

Deepak Jaiswal — Sat, 08 Apr 2023 07:08:53 +0000

today we create watchlist application using reactjs, nodejs.

Backend

config.js

{
    "DB_URL": "mongodb+srv://user:password@cluster0.wb0iyao.mongodb.net/?retryWrites=true&w=majority"
}

default.js

module.exports.defaultSymbols=[
    {
        symbol:"SYY",
        bid:"sp",
        ask:"sp",
        bidSize:3,
        askSize:4,
        volume:5,
        description:"Fixed wrong interpolated variables with node-sass/Hugo"
    },
    {
        symbol:"KJJ",
        bid:"d",
        ask:"d",
        bidSize:3,
        askSize:4,
        volume:5,
        description:"Fixed wrong interpolated variables with node-sass/Hugo"
    },
    {
        symbol:"LLL",
        bid:"ru",
        ask:"ru",
        bidSize:3,
        askSize:4,
        volume:5,
        description:"Fixed wrong interpolated variables with node-sass/Hugo"
    },
    {
        symbol:"NHD",
        bid:"nd",
        ask:"nd",
        bidSize:2,
        askSize:6,
        volume:0,
        description:"Fixed wrong interpolated variables with node-sass/Hugo"
    },
    {
        symbol:"QWA",
        bid:"ts",
        ask:"ts",
        bidSize:7,
        askSize:4,
        volume:1,
        description:"Fixed wrong interpolated variables with node-sass/Hugo"
    }
]

watchlist.controller.js

const WatchListModel = require("../models/WatchList")

module.exports.getWatchLists=async(req,res,next)=>{
    try {
        const watchLists=await WatchListModel.find({});
        res.status(200).send(watchLists);
    } catch (error) {
        next(error)
    }
}

module.exports.addSymbol=async(req,res,next)=>{
    try {
        const {symbol,bid,ask,bidSize,askSize,volume}=req.body;
        const symbolObj={
            symbol,
            bid,
            ask,
            bidSize,
            askSize,
            volume
        }
        const watchList=await WatchListModel.findOneAndUpdate({
            _id: req.params.id
        },{
          $push:{
            symbols:symbolObj
          }
        },{new:true})
        res.status(200).send(watchList);
    } catch (error) {
        next(error)
    }
}

module.exports.updateSymbol=async(req,res,next)=>{
    try {
        const {symbolId,symbol,bid,ask,bidSize,askSize,volume,description}=req.body;
        const symbolObj={
            symbol,
            bid,
            ask,
            bidSize,
            askSize,
            volume,description
        }
        let watchList=await WatchListModel.findOne({
            _id: req.params.id
        })
        const index=watchList?.symbols.findIndex((symbol)=>symbol?._id?.toString()==symbolId);
        watchList.symbols[index]=symbolObj;
        watchList=await WatchListModel.findOneAndUpdate({_id: req.params.id},{$set:{
            symbols:watchList?.symbols
        }},{new:true})
        res.status(200).send(watchList);
    } catch (error) {
        next(error)
    }
}

module.exports.removeSymbol=async(req,res,next)=>{
    try {
        const {symbolId}=req.body
        let watchList=await WatchListModel.findOne({
            _id: req.params.id
        })
        const updatedSymbols=watchList?.symbols.filter((symbol)=>symbol?._id?.toString()!==symbolId);
        watchList=await WatchListModel.findOneAndUpdate({_id: req.params.id},{$set:{
            symbols:updatedSymbols
        }},{new:true})
        res.status(200).send(watchList);
    } catch (error) {
        next(error)
    }
}

createDefaultwatchlist.middleware.js

const WatchListModel = require("../models/WatchList")
const symbols=require('../constants/defaults')

module.exports.createDefaultWatchList=async(req,res,next)=>{
    try {
        let watchList=await WatchListModel.findOne({});
        console.log(watchList)
        if(!watchList){
            watchList=new WatchListModel({symbols:symbols.defaultSymbols});
            watchList=await watchList.save();
            next(watchList)
        }
    } catch (error) {
        next(error)
    }
}

error.middleware.js


module.exports=async(err,req,res)=>{
    try {
        if(err){
            return res.status(500).send({status:500,message:err})
        }
    } catch (error) {
        console.log(error.body);
    }
}

validateObjectId.middleware.js

const mongoose= require("mongoose")

module.exports.validateObjectId=(req,res,next)=>{
    try {
        if(!mongoose.Types.ObjectId.isValid(req.params.id))
            return res.status(400).send({message:"Invalid Id",status:400});
        next(); 
    } catch (error) {
        next(error)
    }
}

watchlist.model.js

const mongoose=require('mongoose');

const {Schema,model}=mongoose;

const watchlistSchema=new Schema({
    symbols:[
        {
            symbol:{
                type:String,
                required: true,
                index:true
            },
            bid:{
                type:String,
                default:''
            },
            ask:{
                type:String,
                default:''
            },
            bidSize:{
                type:Number,
                default:null
            },
            askSize:{
                type:Number,
                default:null
            },
            volume:{
                type:Number,
                default:null
            },
            description:{
                type:String,
                default: ""
            }
        }
    ]
})

const WatchListModel=model('watchlist',watchlistSchema);

module.exports=WatchListModel;

watchlist.route.js

const express=require('express');
const { createDefaultWatchList } = require("../middlewares/createDefaultWatchList.middleware");
const WatchListModel = require("../models/WatchList.model");
const router=express.Router();
const symbols=require('../constants/defaults');
const { addSymbol, getWatchLists, removeSymbol, updateSymbol } = require("../controllers/watchlist.controller");
const { validateObjectId } = require('../middlewares/validateObjectId.middleware');

router.get('',getWatchLists);

router.post('/create-default',createDefaultWatchList);

router.post('/add-symbol/:id',validateObjectId,addSymbol);

router.patch('/update-symbol/:id',validateObjectId,updateSymbol);

router.patch('/remove-symbol/:id',validateObjectId,removeSymbol);

module.exports=router;


(async ()=>{
    let watchList=await WatchListModel.findOne({});
    if(!watchList){
        watchList=new WatchListModel({symbols:symbols.defaultSymbols});
        watchList=await watchList.save();
        console.log('default watch list created')
    }
})()

connection.js

const mongoose=require('mongoose');
const config=require('config');

const DB_URL=config.get('DB_URL');

module.exports=mongoose.connect(DB_URL).then((conn)=>{
    console.log(`Database connected on mongo server ${DB_URL}`);   
}).catch((err)=>{
    console.log(`Database Error ->:  ${err}`);  
})

app.js

const express=require('express');
const cors=require('cors');

require('./services/connection');
const errorMiddleware=require('./middlewares/error.middleware');
const watchListRouter=require('./routes/watchlist.route')

const app=express();
const PORT=process.env.PORT|| 8000;
//middlewares
app.use(express.json());
app.use(express.urlencoded({extended:false}));
app.use(cors());
//routes of app
app.use('/api/v1/watchlist',watchListRouter);
//global error middleware 

app.use(errorMiddleware)

app.listen(PORT,()=>{
    console.log(`server is running on the port ${PORT}`)
})

package.json

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js",
    "dev": "nodemon app.js"
  },
  "keywords": [],
  "author": "Sandeep Jaiswal",
  "license": "MIT",
  "dependencies": {
    "config": "^3.3.9",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "mongoose": "^7.0.3"
  }
}

Frontend

Header.js

import React from 'react'

const Header = () => {
    return (
        <div className="container-fluid bg-primary">
            <nav className="navbar navbar-expand-lg bg-body-tertiary">
                <div className="container-fluid">
                    <a className="navbar-brand text-white fw-bold" href="#">Watchlist</a>
                </div>
            </nav>
        </div>
    )
}

export default Header

UpdateWatch.js

import React, { useEffect, useState } from 'react'

const UpdateWatch = ({ data, updateSymbol }) => {
  const [form, setForm] = useState({
    symbolId: '', symbol: '', bid: '', ask: '', bidSize: null, askSize: null, volume: null, description: ''
  })
  useEffect(() => {
    setForm({ symbolId: data?._id, symbol: data?.symbol,
       bid: data?.bid, ask: data?.ask, bidSize: data?.bidSize||0,
        askSize: data?.askSize||0 ,volume:data?.volume||0,description:data?.description});
  }, [data?._id])

  const change = (event) => {
    const { name, value } = event.target;
    setForm({ ...form, [name]: value })
  }

  const submit = () => {
    updateSymbol(form);
    setForm({
      symbolId: '', symbol: '', bid: '', ask: '', bidSize: 0, askSize: 0, volume: 0, description: ''
    })
  }
  return (
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Update Symbol</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">Symbol:</label>
                <input type="text" name="symbol" value={form.symbol} onChange={(e) => change(e)} class="form-control" id="recipient-name" />
              </div>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">Bid:</label>
                <input type="text" name="bid" value={form.bid} onChange={(e) => change(e)} class="form-control" id="recipient-name" />
              </div>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">ask:</label>
                <input type="text" name="ask" value={form.ask} onChange={(e) => change(e)} class="form-control" id="recipient-name" />
              </div>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">Bid Size:</label>
                <input type="number" name="bidSize" value={form.bidSize} onChange={(e) => change(e)} class="form-control" id="recipient-name" />
              </div>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">Ask Size:</label>
                <input type="number" name="askSize" value={form.askSize} onChange={(e) => change(e)} class="form-control" id="recipient-name" />
              </div>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">Volume:</label>
                <input type="number" name="volume" value={form.volume} onChange={(e) => change(e)} class="form-control" id="recipient-name" />
              </div>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">Description:</label>
                <input type="text" name="description" value={form.description} onChange={(e) => change(e)} class="form-control" id="recipient-name" />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onClick={() => submit()}> Update</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default UpdateWatch

watchlist.js

import React, { useContext, useState } from 'react'
import WatchListContext from "../contexts/WatchListContext";
import { addSymbols, removeSymbols, updateSymbols } from "../services/watchList.service";
import UpdateWatch from "./common/UpdateWatch";

const WatchList = () => {
    const [watchlist, setWatchlist] = useContext(WatchListContext);
    const [updateObject,setUpdateObject]=useState({});
    const [selectedSymbol,setSelectedSymbol]=useState([])
    const addSymbol = async (event) => {
        if (event.keyCode === 13) {
            const res = await addSymbols(watchlist?._id, { symbol: event.target.value });
            setWatchlist(res.data);
            event.target.value = '';
        }
    }

    const removeSymbol = async (symbolId) => {
            const res = await removeSymbols(watchlist?._id, { symbolId });
            setWatchlist(res.data);
    }

    const updateSymbol = async (data) => {
        const res = await updateSymbols(watchlist?._id, data)
        setWatchlist(res.data);
    }
    const toggleSelect=(symbol)=>{
        const check=selectedSymbol.find(s=>s?._id===symbol?._id)
        if(check){
            let s=selectedSymbol.filter(sym=>sym?._id!==symbol?._id)
            setSelectedSymbol(s);
        }else{
            let s=[...selectedSymbol,symbol]
            setSelectedSymbol(s);
        }
    }
    return (
        <div>
            <div className="p-4">
                <div className="row">
                    <div className="col-3 fs-2">
                        Quote Details
                    </div>
                    <div className="col-9">
                        {selectedSymbol?.length ? 
                            selectedSymbol?.map((s)=>(
                                <div key={s?._id}>
                                    <h5>{s?.symbol}</h5>
                                    <p>{s?.description}</p>
                                </div>
                            )
                        ):"No Any row selected"}
                    </div>
                </div>
                <div className="border">
                    <div className="bg-light p-2 fw-bold">My Watchlist</div>
                    <table className="table table-bordered">
                        <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col">Bid</th>
                                <th scope="col">Ask</th>
                                <th scope="col">Bid Size</th>
                                <th scope="col">Ask Size</th>
                                <th scope="col">Volume</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        {watchlist?.symbols.map((symbol) => (
                        <tr key={symbol?._id} onClick={()=>toggleSelect(symbol)} className={selectedSymbol?.find(s=>s?._id===symbol?._id)?'table-success':''}>
                        <th scope="row">{symbol?.symbol}</th>
                        <td>{symbol?.bid}</td>
                        <td>{symbol?.ask}</td>
                        <td>{symbol?.bidSize}</td>
                        <td>{symbol?.askSize}</td>
                        <td>{symbol?.volume}</td>
                        <td>
                            <div className="d-flex justify-content-around">
                            <button className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo" onClick={()=>setUpdateObject(symbol)}>Edit</button>
                            <button className="btn btn-danger" onClick={()=>removeSymbol(symbol?._id)}>Delete</button>
                            </div></td>
                    </tr>    
                    ))}

                        </tbody>
                    </table>
                    <div className="bg-light p-1 w-100" style={{ height: 40 }}>
                        Add Symbol <input className="ms-2 rounded" placeholder="" onKeyUp={(e) => addSymbol(e)} />
                    </div>
                </div>
                <UpdateWatch data={updateObject} updateSymbol={updateSymbol}/>
            </div>
        </div>
    )
}

export default WatchList

watchlist.service.js

import { toast } from "react-toastify";

const { http, URL } = require("./http.service")


export const getWatchList = async () => {
    try {
        const res = await http.get(URL + '/watchlist');
        return res;
    } catch (error) {
        handleError(error);
    }
}

export const addSymbols = async (watchListId,payload) => {
    try {
        const res = await http.post(URL + '/watchlist/add-symbol/'+watchListId, payload);
        return res;
    } catch (error) {
        handleError(error);
    }
}

export const removeSymbols = async (watchListId, payload) => {
    try {
        const res = await http.patch(URL +'/watchlist/remove-symbol/' + watchListId, payload);
        return res;
    } catch (error) {
        handleError(error);
    }
}

export const updateSymbols = async (watchListId, payload) => {
    try {
        const res = await http.patch(URL +'/watchlist/update-symbol/' + watchListId, payload);
        return res;
    } catch (error) {
        handleError(error);
    }
}

export const isLogged = () => {
    const token = localStorage.getItem('token');
    return token ? true : false;
}

export const logoutUser = () => {
    localStorage.removeItem('token');
}

export const getToken = () => {
    return localStorage.getItem('token');
}

export const handleError = (error) => {
    toast.error(error?.message)
}

export const setCredentials=(token)=>{
    http.defaults.headers.common['x-auth-token'] = token;
}

App.js

import { useEffect, useState } from "react";
import './App.css';
import WatchList from "./components/WatchList";
import WatchListContext from "./contexts/WatchListContext";
import { getWatchList } from "./services/watchList.service";
import Header from "./components/common/Header";
import Loader from "./components/common/Loader";

function App() {
  const [watchlist,setWatchlist]=useState();
  const [isLoading,setIsLoading]=useState(false);

  useEffect(()=>{
    getWatchListData()
  },[]);

  const getWatchListData=async ()=>{
    setIsLoading(true)
    const result=await getWatchList();
    if(result.status ===200 ){
      setWatchlist(result?.data?.[0])
      setIsLoading(false)
    }else{
      setIsLoading(false)
    }
  }

  return (
    <WatchListContext.Provider value={[watchlist,setWatchlist]}>
         <Header />
         {isLoading?<Loader />:<WatchList />}
    </WatchListContext.Provider>
  );
}

export default App;

this is not of the complete code if you have any doubt regarding this comment in this post. I give the answer as soon as possible. thank you for reading my post.

TINYMCE Editor with angular

Deepak Jaiswal — Sat, 18 Mar 2023 06:14:59 +0000

tinymce editor is paid editor to use in our application. tinymce has many toolbar, plugins, and events to use in our application. today we add in our angular app.

Setup and installation

import { NgModule } from '@angular/core';

import 'tinymce';
import 'tinymce/themes/modern';
import 'tinymce/plugins/table';
import 'tinymce/plugins/link';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { EditorModule } from '@tinymce/tinymce-angular';


import { TinyEditorComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, EditorModule ],
  declarations: [ TinyEditorComponent ],
  providers: [],
  bootstrap:    [ TinyEditorComponent ]
})
export class AppModule { }

Setup editor configuration

import {
  Component,
  AfterViewInit,
  EventEmitter,
  OnDestroy,
  Input,
  Output,
} from '@angular/core';

declare var tinymce: any;

@Component({
  selector: 'tinymce-editor',
  template: `<textarea id="editor"></textarea>`,
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
  @Output() onEditorContentChange = new EventEmitter();

  editor;

  ngAfterViewInit() {
    tinymce.init({
      selector: '#editor',
      plugins: ['link', 'table'],
      skin_url: 'assets/skins/lightgray',
      setup: (editor) => {
        this.editor = editor;
        editor.on('keyup change', () => {
          const content = editor.getContent();
          this.onEditorContentChange.emit(content);
        });
      },
    });
  }

  ngOnDestroy() {
    tinymce.remove(this.editor);
  }

Add editor event

  ngAfterViewInit() {
    tinymce.init({
      selector: '#local-upload',
      plugins: 'image code',
      toolbar: 'undo redo | image code',

      /* we override default upload handler to simulate successful upload*/
      images_upload_handler: function (blobInfo, success, failure) {
        setTimeout(function () {
          /* no matter what you upload, we will turn it into TinyMCE logo :)*/
          success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
        }, 2000);
      },
    });
  }

Hide toolabr & menubar

Add domain in tinymce cloud

Use axios as better practice in ReactJS

Deepak Jaiswal — Tue, 14 Feb 2023 03:40:56 +0000

in this post i explain use axios as in ReactJS as better practice.you all kown very well axios handle http request in single promise.

Use axios as http

import axios from 'axios';

export let URL="http://localhost:5000/api/v1";
export let URL_PROFILE="http://localhost:5000/uploads/avatar/";
export let URL_POST="http://localhost:5000/uploads/posts/";
export let AUTH_TOKEN=localStorage.getItem('token')||'';

axios.defaults.baseURL = URL;
axios.defaults.headers.common['x-auth-token'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


export const http=axios;

and use http in your services like

import { http, URL } from "./http.service";
import { errorHandler } from "./error.service";

export const getAllTags=async ()=>{
    try {
        let resp=await http.get(URL+'/tag/all/tags')
        return resp;
    } catch (error) {
        errorHandler(error)
    }
}

it is better practice to use axios in your application
and when you change your default token like this

import { http} from "./http.service";
export const setToken=(token)=>{
  axios.defaults.headers.common['x-auth-token'] = token;
}

use error handler

import { toast } from "react-toastify"

export const errorHandler=(error)=>{
   if(error.message==="Network Error" && error.status===500){
        toast.error(error.message)
   }
   toast.error(error?.response?.data?.message)
}

I think you better understanding of axios better practice to use. thank you.