DEV Community: Siddhartha Mishra

Check this out

Siddhartha Mishra — Thu, 05 Mar 2026 18:50:53 +0000

Introducing SnapbitTools

Siddhartha Mishra ・ Mar 5

Introducing SnapbitTools

Siddhartha Mishra — Thu, 05 Mar 2026 18:50:12 +0000

In the modern digital workflow, we are constantly moving between tasks that require small but essential data transformations. Whether it’s a developer needing to prettify a JSON object, a social media manager compressing a batch of images for a quick upload, or an office administrator converting a CSV report into an Excel sheet, these "micro-tasks" can often become major bottlenecks.

Enter Snapbittools, a comprehensive collection of browser-based utilities designed to handle these exact scenarios. Built with a focus on speed, simplicity, and uncompromising privacy, SnapbitTools provides a robust toolkit for developers, creators, and everyday users who need to process files and data without the friction of heavy software or risky uploads.

The Problem With Traditional Online Tools

For years, the go-to solution for quick file conversions or data formatting has been a quick Google search followed by a visit to a random "free online converter." While these sites serve a purpose, they often come with significant drawbacks that can compromise both your productivity and your security.

1. Privacy and Security Concerns
The biggest red flag with traditional online utilities is the requirement to upload your files to a third-party server. When you upload a document, an image, or a dataset to "Convert-My-File.com," you are essentially handing over your data to an unknown entity. For professionals handling sensitive client information or proprietary code, this is often a non-starter and a major compliance risk.

2. Latency and Slow Processing

Traditional tools rely on a server-side round trip. You upload the file, the server processes it, and then you download the result. If your internet connection is slow or the file is large, this process can take minutes. Furthermore, if the site’s server is under heavy load, your "quick" task can grind to a halt.

3. Cluttered, Ad-Heavy Interfaces

Many free tool sites are subsidized by aggressive advertising. This results in interfaces cluttered with "Download" buttons that are actually ads, pop-ups that distract from the task at hand, and a generally poor user experience that slows down your workflow.

What Makes SnapbitTools Different?

SnapbitTools was built from the ground up to solve these specific frustrations. By leveraging modern web technologies and the power of the React ecosystem, we have created a platform that prioritizes the user over the infrastructure.

The core philosophy of SnapbitTools is that your data belongs to you. Unlike other platforms, SnapbitTools performs all computations directly within your browser. When you "upload" a file to our Image Compressor or CSV Converter, it never leaves your computer. The browser handles the logic, and the output is generated locally.

Because no data is ever sent to a server, SnapbitTools is inherently secure. You can process sensitive JSON files, private photos, or internal company spreadsheets with the peace of mind that no logs are being kept and no third party is seeing your content.

By eliminating the need for uploads and downloads, processing becomes near-instantaneous. The speed is limited only by your computer’s hardware, not your internet bandwidth. This makes SnapbitTools feel like a native desktop application rather than a slow web page.

We believe that tools should be functional, not flashy. SnapbitTools features a minimalist, professional interface designed for productivity. No misleading "Download" ads, no intrusive pop-ups—just the tools you need, exactly when you need them.

Key Features

SnapbitTools offers a diverse array of utilities categorized to help you find the right solution for your specific problem.

-Format Converter & Base64 Converter: Quickly switch between formats like PNG, JPG, and WebP, or encode images into Base64 strings for direct embedding in CSS or HTML.

-Image Compressor & Cropper: Optimize images for web performance without losing quality, or use the intuitive cropper to get the perfect framing for your social media posts.

-Image to PDF: Effortlessly bundle multiple images into a single, professional PDF document.

-JSON Formatter: Instantly turn "minified" or messy JSON code into a readable, properly indented structure.

-Diff Checker: Compare two snippets of code or text to identify changes, additions, or deletions—essential for debugging or reviewing document revisions.

-CSV ↔ XLSX Converter: Seamlessly move data between spreadsheet formats.

-JSON to CSV: Transform complex data structures into a flat format ready for analysis in Excel or Google Sheets.

-Word Counter: Get instant statistics on your writing, including character counts and reading time.

-Lorem Ipsum Generator: Generate placeholder text for design mockups in seconds.

The Bulk File Renamer(New)

One of the most powerful features in the SnapbitTools arsenal is the Bulk File Renamer. Anyone who has ever tried to manually rename 50 photos from a digital camera or 20 disorganized PDF receipts knows how tedious the task can be.
SnapbitTools allows you to drop a massive list of files into the browser and apply logic-based renaming rules instantly

Prefix and Suffix: Quickly add dates, project names, or categories to the beginning or end of your filenames.
Pattern-Based Renaming: Create sequential numbering or standardized naming conventions across hundreds of files.
Find and Replace: Strip out unwanted characters, replace underscores with spaces, or update version numbers globally across your selection.

Check it out - Link

Imagine a photographer who has just finished a shoot. Instead of having files named IMG_4821.jpg, IMG_4822.jpg, etc., they can use SnapbitTools to instantly rename them to Wedding_Smith_Oct2023_001.jpg in a single click. It’s local, it’s fast, and it’s free.

Why You Should Bookmark SnapbitTools

Whether you are a professional or a student, SnapbitTools is designed to be your digital Swiss Army knife.

For Developers: Format data and compare code snippets without leaving your browser or installing heavy IDE extensions.
For Students: Quickly convert document formats for assignments and use the word counter for essays.
For Content Creators: Optimize images for blogs and rename massive sets of creative assets in seconds.
For Office Workers: Convert reports between CSV and Excel formats without worrying about the privacy of sensitive company data.

By operating entirely within the browser, SnapbitTools removes the barrier of software installation. There are no accounts to create and no subscriptions to manage. It is simply a reliable, private, and incredibly fast way to get things done.

Ready to streamline your workflow? Explore the full collection at SnapbitTools.

Also Comment which new tool you want to see in Snapbit.
Stay Tuned for new features.
Thank you

Mutating State in React

Siddhartha Mishra — Tue, 01 Jul 2025 15:36:22 +0000

Recently in my job, I was working on a project. I have to build a component that searches particular product from the json based on SKU code and fill all the details.

Here is the function.

  searchProduct = (value, index) => {
    const matchedProduct = this.state.products[value];
    if (matchedProduct && matchedProduct.name) {
      const billProducts = this.state.billProducts;
      billProducts[index].desc = matchedProduct.name;
      billProducts[index].rate = String(matchedProduct.price);
      billProducts[index].sku = matchedProduct.sku;
      billProducts[index].hsn = matchedProduct.hsn;
      billProducts[index].gst = matchedProduct.gst;
      billProducts[index].cess = matchedProduct.cess;
      const qtyInput = document.getElementById(`qty-${index}/2`);
      qtyInput.focus();
    }
  };

Now at first glance, It was looking perfect and also working as expected. But when I was reviewing my code, I find that I am not setting the state after updating it. I was shocked, How the hell all functionality is working.

I dig deeper in react and Js theory. After researching a bit I found some amazing facts.

Lets look at them one by one

1. Arrays and Objects are passed by reference in JS

This is the root cause of this unexpected behaviour.

const billProducts = this.state.billProducts;

Although in this line it looks like I am creating another Array billProducts, but since this.state.billProducts is array, it is just a reference. I am directly mutating the state. So even if I am not setting the state, all changes are visible in component.

2. How does React work with this?

React works with virtual DOM, in background it checks if the previous state and current state is same or not. If it differs then, It re renders the component. But in this case it is not re rendering, because I am directly mutating the original Array, reference is same and I am not calling this.setState, hence React does not re render.

Although It seems good, because we are saving the renders. But it might result in unexpected behavior. Since React does not re renders, other state might not change which might affect the UI.

React is build on the concept of Immutability. You should not mutate the state directly. Use setter function to always change the state.

In my case, It doesn't cause any issue, but still I used this.setState().

I never knew about this concept in JS and React. So thought of worth sharing with my network.

Thank you

Follow me
Twitter
LinkedIn

Parcel with React

Siddhartha Mishra — Sun, 18 Feb 2024 08:00:00 +0000

Basics

If you have worked with Javascript, you know about Module bundlers, right?
In simple term, Module bundler , bundles your code, spread across multiple files (HTML,CSS,JS...) into smaller chunks. Now you might be wondering , why to build bundler if you can send js, html and css files directly from the server. You are right. But remember we are not living in early 2000's, where websites are crap,slow and not to mention their UI.

As different technologies are evolving, for a simple website build using any framework it is common to have files in megabytes.This might seem small, but server and internet is dealing with millions if not billions of such files. If server send files in their raw format just think about internet usage and bandwidth. And we are not even talking about client side. If for every page mb's of files are downloaded and cached in browser. Then you will not be able to open more than 5 pages, before your browser memory ran out.

To tackle this software engineers, build bundlers, they combine your files, minify them and divide them into chunks, to have smaller files to manage for the browser.

I am a front end developer especially work with react.I started with create-react-app and now I move on to Vite. If you don't know these are build tools to bootstrap your react project. Now these tools come with their own module bundlers integrated. CRA uses webpack and Vite uses esBuild. Now these have their own pros and cons.

Now apart from these two, there is third option "Parcel". But sadly there is no build tool with Parcel bundler.
But I was curious how can we use Parcel with React.

So I decided why not give it a try.

The Parceled Journey

I have build my portfolio using Vite. I decided to build same but with parcel. Now to be honest, I have never play with bundler or setup project from scratch. So this overwhelmed me a lot. But surprisingly, it was not that bumpy ride as I thought. Parcel have documented how to setup react project. I follow that and I setup my base.

Now it's time to build the website. I have used tailwindCSS and typescript in my portfolio.

Amazingly Typescript works out of the box with Parcel. No need for additional compiler, tsconfig , nothing. So writing or more frankly copying tsx was a breeze with no compiler error. For TailwindCSS, I have struggled a bit. especially handling the folder structure. But it worked out at last.

My app was running fine, lazy loading , optimization works as expected, CSS was perfect.

But , as always, how can this be so easy.After testing my app, I found out that my Atropos container/styling was not working at all. If you don't know, Atropos is the package to provide 3D parallax effect on hover. In about me page, if you hover over showcase container, there is a beautiful parallax affect. It was not working at all.

I tried to re-install the package, but it was of no use.
Upon closure inspection, I found that, regular import was not working with Atropos.

Let me demonstrate you
In my Vite app, I use -
import Atropos from "atropos/react";

but, in Parcel app it was not importing anything from this path

After some debugging, I find the solution, I have to use -
import Atropos from "atropos/atropos-react";

But still no change in the UI.
I thought , if I have import is working fine. Then issue might be with the CSS of Atropos.
And here also , normal import was not working in Parcel. But unlike above problem , CSS was not auto import was not working either.

whereas in Vite app , it was working perfect -

I don't know whether it was VScode bug, or Parcel bug, but this bug "bug" me whole day

Atlast when I simply add import "atropos/atropos.css"; without suggestion or auto import, it works.

Apart from these major fixes, few minor tweaks was required but you can infer it.

And my portfolio was ready with Parcel. 🎉🎉🎉

I was literally amazed how, easy is Parcel to set up and work with

If you want to check my Parcel Project visit github

Thank You

Visit
My Portfolio

Follow me
Twitter
LinkedIn

Lazy Loading in React

Siddhartha Mishra — Mon, 28 Aug 2023 10:46:03 +0000

If you know about web performance, then you might be familiar with the concept of Lazy Loading.As the name suggest, this technique is used to load website data lazily or with some sort of delay.
According to mdn web docs - "Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times."

I know , the definition is bit hard to understand. In simple terms it says that only those resources are loaded to browser that are needed to render the page, all other resources are blocked away. It gives two major advantages, first , it reduces the loading time and storage of the web browser and second, it also reduces the bandwidth of your internet.

Now that you are conscious with the primary understanding of the Lazy Loading, we will explore how this concept is utilised in React. As you are familiar, React uses component approach to render the webpage. For smaller websites, loading all the components at once may not affect the performance, but for large websites, loading all the resources at once can be a nightmare. So in react we use lazy and Suspense to apply this strategy.

Lets learn how to apply in our app. But wait, first I'll show you what does it mean to load resources at once.

I have created 3 routes for my app using react-router-dom

App.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Angular from "./pages/Angular";
import Vue from "./pages/Vue";
import "./App.css";

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/angular" element={<Angular />} />
          <Route path="/vue" element={<Vue />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

I have create three routes for my app. Each webpage has heading and a image.

- Run the React server and open your browser.
- On your server port , open chrome-dev-tools by inspecting the page or press ctrl+shift+i.
- Navigate to sources tab .
- In your localhost folder you can verify that, although we have no use of other routes data to display Home component. But still it is loading all the resources.

Now you can see that all extra resources are using web storage and bandwidth that can be reduced.

Lets try to implement Lazy Loading Strategy in our app.We will create a 'loading' screen for our app.

Loader.jsx

import React from "react";

const Loader = () => {
  return (
    <>
      <div>
        <h1>...</h1>
      </div>
    </>
  );
};

export default Loader;

For developers sake , React provide inbuilt tool lazy and Suspense
We have to make some changes in the App.jsx where we define our routes.

App.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { lazy, Suspense } from "react";
import Loader from "./Loader";
import "./App.css";

const Home = lazy(() => import("./pages/Home"));
const Angular = lazy(() => import("./pages/Angular"));
const Vue = lazy(() => import("./pages/Vue"));

function App() {
  return (
    <>
      <BrowserRouter>
        <Suspense fallback={<Loader />}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/angular" element={<Angular />} />
            <Route path="/vue" element={<Vue />} />
          </Routes>
        </Suspense>
      </BrowserRouter>
    </>
  );
}

export default App;

And that's it. We have added lazy loading in our react app.
Voila!.

To verify that our lazy loading is working properly, lets again check our sources tab in chrome dev tools.

As it is visible, our app load only those resources that are needed to render Home page.

This is just a small app, so this doesn't seem to effect much performance, but as your app grows managing resources become crucial.
We can apply lazy-loading concept to any component , not just on routes.Also, for Loader we can use any spinner, progress, text, image as per our requirement.

For this tutorial I have used Vite for building my react app , but it works similar to create-react-app.

I hope you got get the better understanding of lazy loading and how we can use it in out react app.

Feel free to comment if you have any doubt.

References -
mdn
react docs

Thank you for reading.
Connect me on sidme.tech

Class Based React

Siddhartha Mishra — Mon, 24 Jul 2023 08:11:39 +0000

If you are a new React developer then most probably you will be using functional based Approach for React components. But if you are an old React Developer then most likely you have used Class based Approach for React Components or might be still using.
Now there are many debates that functional based approach is better than class based approach and vice-versa. But it's not as simple as that. Different scenarios need different approaches. It is not a rule of line that you have to only use one approach and denounce other one rather it is better to have understanding of both approaches.

Class based approach

It uses ES6 Classes for defining components. If you are familiar with functional based approach then, you know that, it uses functions to define the component. In case of class based approach, all class components are extended form of React.Component. Extending React.Component class allows user to use prebuild API's. Basic App component in Class based React looks like :

import React from "react"
class App extends React.Component{
  render(){
    return <h1>Hello World!</h1>
}
export default App;

What about Hooks

Technically you can use hooks with classes. But it takes away the features of Class Based Approach. Nearly all functionality of hooks can be achieved using classes.
In rare scenarios you are bound to use hooks for achieving a functionality with ease. If you are familiar with basic hooks in React then, you will not find any difficulty in grasping the Class implementation. For Example - instead of useState() we use this.state and setState().

Now , I'll try to explain how simple functionalities of useState() and useEffect() hooks are achieved using classes.

constructor()

Before learning about state management, it is very crucial to get the gist of constructor(). Basically constructor() are the methods that are called when object of Class is initialized. This method is used to setup state of the Component with initial values.

In the constructor another method that is important is super method. By calling this method we get access to methods and states of parent classes in which this is called. This method is useful for accessing props in the Component.

import React from "react"
class App extends React.Component {
  constructor(props) {
    super(props)
  }
  return <h1>Hello World!</h1>
  }
}
export default App;

Counter App

Now lets try to implement counter in Class based Approach. If you are familiar with hooks, then implementing this functionality will cost no effort.

We will start by defining state. In the Component

constructor(props){
  super(props)
  this.state = {
  count:0
 }
}

For changing the value of count,we will be using setState() method . As

this.setState({count:this.state.count+1})
this.setState({count:this.state.count-1})

Our basic Counter App is ready.
Complete code

import React from "react";

class App extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }
  render() {
    return (
      <>
        <h1>{this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          +
        </button>
        <button onClick={()=>this.setState({count:this.state.count-1})}>
          -
        </button>
      </>
    );
  }
}

export default App;

In the above code we initialize count state and change its value using setState() method. It is very similar to useState() hook. this keyword is typically used here to bind method with its corresponding class.

Data fetching

In functional based approach, we use useEffect() hook to fetch data from the API. Typically this hook is used for side effects in the web application. Because we don't want to stop the rendering of page, therefore we fetch data as a side effect.
In class based approach we use componentDidMount() method . It allows user to perform actions when component is rendered on the webpage. If you deep dive into both the methods then, they are very different to their core, but for achieving these types of functionality, they work pretty much identical.
Now let's learn it by the code-
In this example , I will be using DummyJSON product API. You can get it here

First we will create a fetching function as

fetchData=async()=>{
  const response=await fetch('https://dummyjson.com/products')
  const result = await response.json()
  this.setState({products:result})
}

In this example, I'll be storing the result in products state.

Now it's time to call fetchData() method so that it doesn't block rendering of the page.

 componentDidMount(){
    this.fetchData()
  }

For the products state

constructor(props){
 super(props)
 this.state={
  products=[];
 }
}

`App.js`

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { products: [] };
  }

  fetchData = async () => {
    const response = await fetch("https://dummyjson.com/products");
    const result = await response.json();
    this.setState({ products: result });
  };

  componentDidMount() {
    this.fetchData();
  }

  render() {
    console.log(this.state.products);
    return (
      <>
        <h1>Data fetching</h1>
      </>
    );
  }
}

export default App;

console

That's it, now you know the basic concept of class based approach to react. I tried my best to explain the concept. Hope you learnt a lot.

References -
react.dev
super and props

For any queries , connect with me here

React-Redux

Siddhartha Mishra — Fri, 07 Jul 2023 10:20:27 +0000

Before directly jumping to react-redux. It is crucial to be aware about React first. I will be very concise.

What is React

React is the front-end JavaScript library that is used to design and build web apps. Since it is the library, it means there are multiple packages/modules that are used to perform different tasks. Earlier it was mainly dealt in class component but since the introduction of "hooks" class based components nearly became obsolete.

Now for react hooks, they provide function based components instead of class based components.
In React we build components and then you integrate them to build a complete app. For Example, in a particular website- navbar, sidebar, search, footer etc. are different components. Hooks provide a way to store and reuse logic between states of the application.

Here is the basic structure of a react component.

import React from 'react';

function App() {
  return (
    <div>
      <h1>React, Redux and Redux-toolkit</h1>
    </div>
  );
}

export default App;

Most common hook in React is useState. This hook stores the state of the application and provide a method to change it. While building an application, sometimes number of states can reach to
overwhelming number. In that case, it can be very exhaustive to properly manage states. To solve this problem, we use Redux.

redux

First Redux is the state management library for any JavaScript application. Redux provides a centralized storage to store state for the application. It means, instead of creating state for every single component, we create states that are accessible to all the components of the application.

Before moving on to react-redux, there are few important terminologies that crucial to learn in redux.

store: As the name suggests, it is the centralized location to store and manage the states of the application. There are two important methods that are used in store. First one getState()is used to retrieve the current state of the application and second one dispatch(action)is used to initiate the state change.

Actions: are the JavaScript Object that signals the store to that state is needed to change. It describes the type and payload. payload can be considered as the data or argument that can be passed to the store.

Reducers: These are pure JavaScript functions that basically changes the state. These functions take actions and current state and then return the updated state. actions are the operations that are performed on the state.

Note: state in Redux are immutable i.e., they cannot be changed. Therefore reducers doesn't actually changes the state rather they create an updated copy of state.

react-redux

react-redux is the library that provides linkage between React and Redux.

Now let's try to understand redux with simple counter app.

There are few packages that we need to use redux in our react application.

npm i redux react-redux

Firstly we will create store, where we will store our states for the application. To keep example easy, I am writing reducer in the same file where we store our state.

store.js

import {createStore} from 'redux'

const reducerFxn=(state={counter:0},action)=>{
    if(action.type==="increase"){
        return {counter:state.counter+1}
    }
    if(action.type==="decrease"){
        return {counter:state.counter-1}
    }
    return state
}
const store =createStore(reducerFxn)
export default store;

In the above code segment, there is reducerFxn which takes current state and action as its input. Then according to action.type it returns new state with updated value. In this case there are increase and decrease action type. and in the last there is default return state.(specifically for initial render)

For the application, to access the store, wraps whole app in the <Provider> component.

index.js

import {React} from 'react'
import {ReactDOM} from 'react-dom/client'
import {App} from './App.jsx'
import './index.css'
import { Provider } from 'react-redux'
import {store} from './store/index.js'
ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </Provider>
);

We pass the store props so that each component inside <App/> can access the store. We import the store from store.js

At last, we will build our main application component.

app.js

import {useSelector,useDispatch} from 'react-redux'
function App{
  const counter=useSelector((state)=>state.counter)
  const dispatch=useDispatch()
  const increment=()=>{
    dispatch({type:'increase'})
  }
  const decrement=()=>{
    dispatch({type:'decrease'})
  }
  return (
    <div>
      <h1>Counter app</h1>
      <h2>{counter}</h2>
      <button onClick={increment}>increase</button>
      <button onClick={decrement}>decrease</button>
    </div>
  );
}
export default App;

useSelector hook is used to access the state from the store.
useDispatch hook is used to initiate or dispatch the action for the reducer(in this case reducerFxn).We cannot directly use dispatch hook so we have to initialize it.

Our Counter application is ready🥳🥳

I hope you get the basic gist of the 'redux' and 'react-redux'.

Here are some references that can be helpful-
react redux

You can connect with me here