DEV Community: Asim786521

The Hidden World of the DOM & Virtual DOM Explained Simply

Asim786521 — Thu, 11 Sep 2025 07:38:24 +0000

Understanding the DOM Deeply

What is DOM?

The DOM (Document Object Model) is a tree-like structure of nodes, where each node represents a part of the document.

When we open the browser console, we can see the HTML of the website we visited. In reality, the HTML is passed to the browser as a stream of text, and then the DOM is built by:

Parsing the HTML using the HTML parser
Converting HTML tags into element nodes
Converting text into text nodes

Build Flow of the DOM in the Browser

Stream of text

==> Check for <script> tag (if found, run script first)

==> HTML parser converts text

==> HTML tags converted into nodes

==> Build DOM tree

Figure 1: Flow of DOM construction in the browser

Relation with JavaScript

The DOM is not part of JavaScript.
It is a Web API provided by browsers that allows JavaScript to interact with and manipulate websites.

Difference with Virtual DOM

The Virtual DOM is used in React.
It is a lightweight representation of the real DOM tree.
Essentially, it is a JavaScript object representation of the UI.
When an event happens in React:
1. A new Virtual DOM is created
2. It is compared with the old one using diffing
3. Differences are found using the reconciliation algorithm, and only those parts are updated in the real DOM

Figure 2: Real DOM vs Virtual DOM updates in React

Conclusion

The DOM is the foundation of how browsers render and interact with web pages. It provides a tree-like structure that JavaScript can manipulate to make websites dynamic and interactive. However, working directly with the real DOM can be slow and inefficient for large or frequently updated applications.

That’s where the Virtual DOM comes in. By keeping a lightweight copy of the real DOM in memory, React can efficiently determine what needs to change and update only those parts — resulting in faster, smoother performance.

Understanding both the DOM and the Virtual DOM is essential for every modern web developer. With this knowledge, you’ll have a clearer view of how browsers work under the hood and how frameworks like React optimize UI updates.

💡 What about you? Have you faced performance issues while manipulating the DOM directly? Or do you prefer working with frameworks like React that handle the Virtual DOM for you? Share your thoughts in the comments!

Use Lazy Routing with React Suspense to Optimize Performance

Asim786521 — Wed, 03 Sep 2025 03:56:32 +0000

When we handle asynchronous operations in React, Suspense is mainly used to optimize the UI by placing a placeholder UI during rendering.

Using the Suspense component, the UI can be anything from a simple placeholder to a loading spinner. The fallback is a React node that serves as a lightweight view before the child component runs. Suspense will automatically switch to the fallback when its children are still loading.

👉 The ideal case is when we don’t need to load a component upfront. Instead, we render it only when needed. In most cases, Suspense is used with lazy-loaded components.

🔹 What is a lazy-loaded component?

A lazy-loaded component is a performance optimization technique that improves web application speed and efficiency by delaying non-essential resources until they are actually needed by the user.

This feature was introduced in React 16.6.

🔹 Real Case Example

I faced this problem when I created a modal component that rendered conditionally based on a specific event.

Inside the modal, there was a child component responsible for:

Converting data into a file
Uploading the file through a web service

The challenge:

The child component’s data was dynamic (changed each time).
I noticed a delay in opening the modal because the child component was heavy.
The bundle size was also too large.

📌 You might also like my previous post:

Asim786521

Aug 31 '25

How I Built My SaaS MVP in 20 Days (Lessons Learned)

#startup #saas #javascript #webdev

Comments

2 min read

👉 In that article, I explain my 20-day journey building a SaaS MVP, including stack choices, challenges, and lessons learned.

🔹 Solution: Suspense + Lazy Loading

To improve the modal’s performance, I used Suspense with lazy loading:

Changed the child component import to React.lazy, so it only loads when needed.
Wrapped it with Suspense and used a spinner as the fallback UI.

Example Code


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

// Lazy load the child component
const FileUploader = lazy(() => import("./FileUploader"));

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>

      {isModalOpen && (
        <Modal onClose={() => setIsModalOpen(false)}>
          {/* Wrap lazy-loaded component with Suspense */}
          <Suspense fallback={<div>Loading...</div>}>
            <FileUploader />
          </Suspense>
        </Modal>
      )}
    </div>
  );
}


function Modal({ children, onClose }) {
  return (
    <div className="modal">
      <div className="modal-content">
        <button onClick={onClose}>X</button>
        {children}
      </div>
    </div>
  );
}

export default App;

How I Built My SaaS MVP in 20 Days (Lessons Learned)

Asim786521 — Sun, 31 Aug 2025 04:57:00 +0000

Do you know how easy it is to build something digitally and launch it publicly in less time? I built my SaaS in around 20 days with consistency and discipline.

When the thought of building a SaaS came to my mind, I had no idea how to start or how it would solve real-world problems for users. I lacked clarity about the product I wanted to build. Later, I spent time finding clarity about what I really needed to build. Questions like: Will this make me profitable later or not? kept coming to mind.

Eventually, I realized the best approach was to start small in order to gain experience building a product. I decided not to overthink about profitability, but instead to focus on making the product genuinely useful for others.

So, I created a weekly plan (a sprint in Notion). I tracked all progress daily and marked tasks as: what to work on today, what was pending, and what was completed. I also planned priority tasks for the next day. This helped me dedicate fixed time blocks to building my SaaS product.

Here’s the detailed explanation of the SaaS I built:

Asim786521

Aug 16 '25

The Start of Something Big: My First Micro SaaS

#sass #ai #softwaredevelopment #javascript

Comments

2 min read

Here’s the MVP version of my SaaS web application: share Scribe

👉 Try it out and share your feedback in the feedback panel.

Lessons I learned

I felt full of joy throughout this process.
It seemed easy for me because I’m a software developer.
The experience was very satisfying since I was building something for myself.
Whether the product becomes profitable or not, I gained valuable experience in building a product.

But after building, we also need strong marketing skills alongside technical skills. Learning marketing and selling is so important. Currently, I’m learning marketing and looking forward to building new products and trying them out in public.

👉 Share your experiences, suggestions, and ideas in the comments section, and follow my journey as I build and grow this SaaS 🚀

The Start of Something Big: My First Micro SaaS

Asim786521 — Sat, 16 Aug 2025 15:50:34 +0000

For a long time, I’ve had this dream: build something for myself.

As a software developer, most of my time is spent working on client projects and meeting tight deadlines — but outside of work, I’ve always wanted a side hustle. I explored ideas, scrolled through social media, and brainstormed countless times.

Eventually, I realized something: there’s no “perfect” idea. The best way to start is simply to start.

So, I decided to build something small, useful, and privacy-focused — a micro SaaS.

What I Built

I built a micro SaaS application called ShareScribe.

The core purpose is simple: create and share content anonymously with the receiver, while enhancing privacy through end-to-end encryption in private mode.

A few key features:

✨ Key Features (MVP)

No login? Share up to 3 texts.
Free plan? Log in and unlock 1-day text sharing with end-to-end encryption.
Privacy first. Paid plans (coming soon) will include password protection, private sharing, and extended durations.
File sharing? Pro will support images, Unlimited will support DOC/PDF files.
Future roadmap. Branding, analytics, and team collaboration are on the way.

💳 Subscription Plans

🆓 Free – Available now

Perfect for trying it out.

1-day text share
End-to-end encryption (for logged-in users)
Public link only
Community access & basic support

⚡ Pro – In Progress (coming soon)

Best for individuals & small teams.

7-day share duration
Upload up to 2 images
Markdown formatting
Optional password protection
Private sharing
Download exports & custom themes
Priority support

🌟 Unlimited – In Progress (coming soon)

For power users & businesses.

21-day share duration
Upload DOC/PDF files
Advanced branding & custom URLs
Link analytics & insights
Team collaboration + API access
White-label options & SSO
24/7 premium support

👉 Note: Currently only the Free plan is live. Pro and Unlimited are in progress and will be released soon.

Feedback is Open 📢

I’ve built a feedback panel so anyone can share ideas, report bugs, or ask questions. Every bit of feedback helps me improve the app and make it more stable, user-friendly, and fun to use.

Right now, this is just the MVP — your ideas can help shape the official release!

Here’s the link to try it out: share scribe

I’m excited to keep building, adding features, and learning along the way.

If you’re curious about privacy-first tools or just want to send something anonymously — give it a try and let me know what you think.

Why UDP Powers Streaming, Gaming, and Real-Time Apps

Asim786521 — Wed, 25 Jun 2025 15:22:53 +0000

What is UDP?

UDP stands for User Datagram Protocol. It is one of the core principles of internet protocols. It is mainly used for streaming purposes. It is useful in situations where speed is more important than reliability. Also, keep in mind that it does not guarantee delivery of data.

UDP is mainly used in real-time communication and streaming platforms. It offers real-time conversation capabilities efficiently through this protocol. Major companies like Zoom, Skype, and Netflix use this protocol to efficiently transfer data packets.

How UDP Works

Unlike TCP, UDP is a connectionless protocol. This means it sends data directly without first setting up a connection between the sender and receiver. It breaks the data into small packets called datagrams, and sends them to the destination. UDP does not check if the data arrives correctly or in order.

Because of this, UDP is faster and more lightweight, but less reliable. There is no error checking or correction, which makes it perfect for situations where a few lost packets are acceptable.

Where is UDP Used?

UDP is used in many applications where real-time performance is more important than perfect delivery. Some examples include:

🎥 Video streaming (Netflix, YouTube Live)
📞 Voice and video calls (Zoom, Skype, WhatsApp)
🎮 Online gaming (low latency is critical)
📡 Live broadcasting and IPTV
🛰️ DNS (Domain Name System) and other network services

In these use cases, a slight delay or missing packet doesn’t ruin the experience, but slow performance would.

Advantages of UDP

✅ Low latency (no need to wait for acknowledgments)
✅ Fast data transfer
✅ Simple protocol, easy to implement
✅ Ideal for real-time communication

Disadvantages of UDP

❌ No delivery guarantee
❌ No error correction
❌ No ordering of packets
❌ Not suitable for sending critical data like files or transactions

Conclusion

UDP is a powerful protocol that helps deliver fast and real-time communication across the internet. It sacrifices reliability to achieve speed and low latency, which is why it's commonly used in streaming, gaming, and live communication apps.

Even though it doesn’t guarantee delivery, UDP plays a major role in making modern internet applications fast and responsive.

Would you like me to wrap this into a full blog post format with an introduction and conclusion, or help you post it to dev.to or another platform?

How Sharding and Partitioning Help Scale Your Product Efficiently

Asim786521 — Sun, 01 Jun 2025 08:38:03 +0000

Sharding and Partitioning of Data: Scale Your Product Like a Pro 🚀

Have you heard about sharding and partitioning of data when scaling your product?

When a product is scaled, millions of users may use it simultaneously. At that time, we need to maintain data consistency and ensure the product is much faster than before—because performance is directly affected.

Partitioning and sharding are two powerful methods that help fetch data faster from databases and improve performance under heavy load.

🧩 What is Partitioning?

Partitioning is the process of dividing a large dataset into smaller, manageable pieces. This division helps in improving query performance, scalability, and data organization.

There are several types of partitioning:

Horizontal Partitioning
Vertical Partitioning
Range Partitioning
Hash Partitioning

🔹 Horizontal Partitioning

Horizontal partitioning divides the rows of a table into multiple smaller tables, typically across databases or servers. This is the most commonly used type and is the basis for sharding.

📌 Example: Horizontal Partitioning

Suppose you have a Customers table:

CustomerID	Name	Country
1	Alice	USA
2	Bob	USA
3	Charlie	Canada
4	David	UK
5	Eva	Canada

Partition by Country:

USA Table

CustomerID	Name	Country
1	Alice	USA
2	Bob	USA

Canada Table

CustomerID	Name	Country
3	Charlie	Canada
5	Eva	Canada

UK Table

CustomerID	Name	Country
4	David	UK

🔸 Vertical Partitioning

In vertical partitioning, we divide a table by columns instead of rows. It’s helpful when frequently accessed and infrequently accessed data can be separated.

📌 Example: Vertical Partitioning

Suppose you have a Users table:

UserID	Name	Email	PasswordHash	ProfilePicture	Bio
1	Alice	alice@x.com	********	img1.jpg	Loves cats
2	Bob	bob@x.com	********	img2.jpg	Guitar player

Authentication Table

UserID	Email	PasswordHash
1	alice@x.com	********
2	bob@x.com	********

Profile Table

UserID	Name	ProfilePicture	Bio
1	Alice	img1.jpg	Loves cats
2	Bob	img2.jpg	Guitar player

🧱 What is Sharding?

Sharding is a type of horizontal partitioning where data is split across multiple machines or databases (called shards). Each shard holds a subset of the data. Sharding is commonly used in distributed systems to:

Reduce latency
Improve fault tolerance
Scale out horizontally
Bring data closer to the user (geographical sharding)

⚙️ How Sharding Works

🧱 What is Sharding in Databases? (With Formula Explained)

When your application grows and millions of users start hitting your system, your database can become a performance bottleneck. That’s where sharding comes into play.

🚀 What is Sharding?

Sharding is a technique used to split a large database into smaller, faster, and more manageable pieces, known as shards.

Each shard is a separate database that contains a subset of the overall data.

Sharding is a form of horizontal partitioning, and it helps:

🧠 Improve performance
📈 Scale out the system
📉 Reduce latency
💥 Avoid a single point of failure

🧮 How Does Sharding Work?

To decide which shard a particular piece of data goes to, systems use a formula based on a shard key.

🔑 The Sharding Formula:


text
shard = shard_key % n (n defines how many shards your system will use)

5x Your Productivity: How AI-Powered IDEs Are Changing the Face of Development

Asim786521 — Sat, 08 Mar 2025 05:40:47 +0000

AI Tools & IDE Evolution

We are witnessing the rapid boom of AI in recent times. The evolution of AI raises an important question: Is AI here to make our jobs easier, or will it lead to unemployment? This concern has been widely discussed among tech professionals across the world.

Over the past few months, we have seen various AI tools designed for different purposes. AI models are evolving daily, each performing specialized tasks. In the tech industry, AI-powered IDEs have emerged recently, allowing developers to work with AI-driven coding assistants and integrate various API-based Large Language Models (LLMs). Alongside these, AI agents have been developed to automate everyday tasks—from sending emails to retrieving responses through platforms like WhatsApp or Telegram.

AI-Powered IDEs from a Developer’s Perspective

From a developer’s point of view, AI-powered IDEs integrate artificial intelligence to enhance coding efficiency. These tools provide:

Auto-suggestions
Code generation
Debugging assistance
Intelligent refactoring
Automated project file generation in multiple programming languages

Key Features of AI-Powered IDEs

Like GitHub Copilot, these tools suggest entire code blocks based on context. One of the most attractive features of AI-powered IDEs is AI-driven debugging. Many of these IDEs utilize various AI LLM models to detect and fix errors automatically. Additionally, they improve code quality through AI-driven recommendations.

Popular AI-Powered IDEs

Cursor
Trail
GitHub Copilot
Tabnine
Codeium

Advantages of Using AI-Powered IDEs

✅ Boosts Productivity – Faster coding with AI assistance.

✅ Reduces Bugs – AI-powered debugging minimizes errors.

✅ Enhances Learning – AI suggests best practices and optimizations.

✅ Saves Time – Automates repetitive coding tasks.

Challenges and Limitations

⚠️ Dependency on AI – Over-reliance may hinder deep coding skills.

⚠️ Privacy Concerns – AI models may process and store sensitive code.

⚠️ Accuracy Issues – AI-generated code may require manual corrections.

Future of AI-Powered Development

🚀 More advanced AI models with context-aware coding.

🤖 Seamless collaboration tools for AI-assisted pair programming.

🎯 Increased AI personalization for customized coding experiences.

AI-powered IDEs are revolutionizing the way developers write, debug, and optimize code. While they offer significant advantages, it’s crucial to strike a balance between human expertise and AI assistance to maximize efficiency without losing essential coding skills. The future of AI-driven development is promising, and these tools will continue to shape the software industry in exciting ways!

Let me know if you'd like any further refinements! 🚀

Tanstack Router: The Future of Routing in React Applications

Asim786521 — Sun, 02 Feb 2025 07:04:58 +0000

Tanstack offers an advanced development experience in recent times. Today, I will introduce the Tanstack Routing System.

Compared to the React routing system, it has exciting features. The Tanstack Routing System is a modern routing solution that comes with TypeScript support, nested routing, and layouts. It also provides TypeScript JSON-first Search Params state management APIs. Since it is a modern routing system that emerged recently, it utilizes 100% inferred TypeScript support.

How Tanstack Route Creation Happens?

A route is automatically created when a new file is added, with the route name derived from the folder structure.

Let's understand this with an example. We can create both normal files and lazy files by using the .lazy syntax to support lazy loading.To fetch data from parameters, we use the $id syntax in the file name

Root Route

import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const Route = createRootRoute({
  component: () => (
    <>
      <div className="p-2 flex gap-2">
        <Link to="/" className="[&.active]:font-bold">
          Home
        </Link>{' '}
        <Link to="/about" className="[&.active]:font-bold">
          About
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

Using lazy route

import { createLazyFileRoute } from '@tanstack/react-router'

export const Route = createLazyFileRoute('/about')({
  component: About,
})

function About() {
  return <div className="p-2">Hello from About!</div>
}

Using path path(file name start with ${paramsID))

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params }) => {
    return fetchPost(params.postId)
  },
})

Installation Process

We can install Tanstack Router using various package managers like npm, yarn, pnpm, or bun. After installation, we configure the router in our Vite config if we are using the Vite run engine.

There are several other features available in Tanstack Router that help developers enhance routing efficiency.

Tanstack vs. React Router Use Cases

Both Tanstack Router and React Router have their own use cases and advantages. Here’s a quick comparison:

Advantages of Tanstack Router Over React Router

Automatic route generation based on the folder structure.

TypeScript-first approach for better type safety.

Built-in search params management using JSON.

Nested layouts and routes for better organization.

Lazy loading support for better performance.

Efficient state management APIs integrated within the router.

When Should You Use Tanstack Router Instead of React Router??

If you need strong TypeScript support with automatic type inference.

When your project requires advanced route-based state management.

If you prefer automatic route creation based on folder structures.

When working on large-scale applications with deeply nested layouts.

For more details, check the official documentation of Tanstack Router Documentation.

Conclusion

The Tanstack Routing System provides a modern and efficient approach to handling routes in React applications. With its TypeScript-first approach, automatic route creation, and improved state management, it offers a more structured and scalable solution compared to traditional React routing methods. If you're looking for a powerful and developer-friendly routing system, Tanstack Router is definitely worth exploring!

SWR Makes It Easy for Developers!

Asim786521 — Sun, 12 Jan 2025 06:19:48 +0000

Technologies are evolving so rapidly, especially when it comes to JavaScript. React.js and Next.js are powerful frontend frameworks that are highly popular. They provide several hooks to make developers' jobs easier.

SWR is a powerful React hook for data fetching. The name SWR stands for Stale-While-Revalidate. It uses an HTTP cache invalidation strategy as per HTTP RFC 5861. SWR is created by the founding team of Next.js. Its name simply means: stale stands for cached data previously fetched from an API, while refers to the transition period, and revalidate means verifying and updating the cached data to ensure it is up to date with the server.

Let’s discuss how it works

First, it fetches data from an API, stores it in the cache, and displays that data in the UI. While displaying stale data, it automatically sends a request in the background to fetch fresh data. After the cache is updated with the latest data, it re-renders the component to reflect the changes.

Examples

................

import useSWR from 'swr'

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function UserProfile({ userId }) {
  const { data, error } = useSWR(`https://jsonplaceholder.typicode.com/users/${userId}`, fetcher);

  if (error) return <div>Failed to load user</div>;
  if (!data) return <div>Loading user...</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>Email: {data.email}</p>
      <p>Phone: {data.phone}</p>
    </div>
  );
}

Features and advantages of SWR

The main feature of SWR is fast, lightweight, and reusable data fetching.
The most exciting feature is prefetching data, allowing us to preload data before rendering the component.

Why should we use SWR?

Because it saves development time and ensures fresh data without over-fetching.

For more references, check the documentation.

Top 5 javascript libraries you should know

Asim786521 — Tue, 01 Feb 2022 17:11:30 +0000

Nodejs is an asynchronous event-driven javascript runtime is used to build a large web application and it supports many businesses and startups to develop more things and earn revenues.

Express is a leading Framework used to create and develop the application. there are lots of packages in Express to perform different operation and function that helps programmers very much.

npm is the package manager of Node js. It was created in 2009 as an open-source project that helps JavaScript developers easily share packaged modules of code. there are lots of packages that are used in the Express as per user-requirement.

1.Joi

The package much have absolutely necessary package if you are implementing anything which requires a lot of data input from the user. This is the most powerful schema description language and data validator for JavaScript.

Installation

npm install joi

Example

const Joi = require('joi');

const schema = Joi.object({
    username: Joi.string()
        .alphanum()
        .min(3)
        .max(30)
        .required(),

    password: Joi.string()
        .pattern(new RegExp('^[a-zA-Z0-9]{3,30}$')),

    repeat_password: Joi.ref('password'),

    access_token: [
        Joi.string(),
        Joi.number()
    ],

    birth_year: Joi.number()
        .integer()
        .min(1900)
        .max(2013),

    email: Joi.string()
        .email({ minDomainSegments: 2, tlds: { allow: ['com', 'net'] } })
})
    .with('username', 'birth_year')
    .xor('password', 'access_token')
    .with('password', 'repeat_password');


schema.validate({ username: 'abc', birth_year: 1994 });
// -> { value: { username: 'abc', birth_year: 1994 } }

schema.validate({});
// -> { value: {}, error: '"username" is required' }

// Also -

try {
    const value = await schema.validateAsync({ username: 'abc', birth_year: 1994 });
}
catch (err) { }

2.Tiny-invarient

If you have ever used typescript then you known that lots of time the typescript will complain when we pass the value then it show undefined or Null value and also undefined error.when you use invarient then it helps to remain the variable exist.It contains lots of conditions and also assertive statements but also use typescript.

An invariant function takes a value, and if the value is falsy then the invariant function will throw. If the value is truthy, then the function will not throw.

Installation

npm i tiny-invariant

`import invariant from 'tiny-invariant';

invariant(truthyValue, 'This should not throw!');

invariant(falsyValue, 'This will throw!');
// Error('Invariant violation: This will throw!');

`

3.ZXCVBN

zxcvbn is from dropbox and used to allow you to add a good password.zxcvbn is a password strength estimator inspired by password crackers. Through pattern matching and conservative estimation, it recognizes and weighs 30k common passwords, common names and surnames according to US census data, popular English words from Wikipedia and US television and movies, and other common patterns like dates, repeats (aaa), sequences (abcd), keyboard patterns (qwertyuiop), and l33t speak.

cd /path/to/project/root
bower install zxcvbn

4.NanoID

A tiny unique string ID generator for JavaScript.it have a lots of nano ids that go down in the URL structure. This package will generate a tiny secure URL friendly identifier.there are lots of Functions in the package and it has more speed in terms of safety in terms of URL.Early use uuid as as a generator and now shifted to nano id generator.

Installation
npm i nanoid

5.Canvas

node-canvas is a Cairo-backed Canvas implementation for Node.js.you have basically customize a lot of confident effects and if you need to show a appreciation,happiness and milestone this might to be a great package to plug in.

Installation

npm i canvas