DEV Community: Hemendra Khatik

Devs, stop embedding boring forms.

Hemendra Khatik — Tue, 24 Feb 2026 19:16:09 +0000

I built YourForm — a developer-first form platform designed for builders.

This isn’t just another hosted form builder.

It gives you a powerful SDK to create and control forms programmatically with full flexibility.

That means you can:

Create forms programmatically
Fully control the UI and embed it inside your product
Manage submissions your own way
Own your data

It supports:

Webhooks
Telegram notifications
Slack notifications
Microsoft Teams notifications
Discord notifications

So every submission can:

Trigger your backend
Start an automation workflow
Notify your team instantly
Send data anywhere you want

No rigid dashboards. No platform lock-in.

You can try it here: https://yourform.live

Documentation: https://docs.yourform.live/

If you're building SaaS onboarding, feedback systems, waitlists, internal tools, or lead capture inside your product — you don’t need third-party hosted forms anymore.

Build the exact experience you want.

I Built My Own JSON Previewer Because I Stopped Trusting Random Ones

Hemendra Khatik — Wed, 05 Nov 2025 15:40:10 +0000

Every time I searched for a “JSON formatter” or “JSON viewer” I ended up on some old looking site filled with ads, popups, or weird network calls in the background.

I’d paste my data… and then realize -

“Wait, I just gave my JSON file to some random server on the internet.” 😅

As a dev, that didn’t sit right with me. So I decided to fix it for myself.

The Idea

I wanted something that:

Works instantly, with zero lag
Runs 100% on the client - no backend, no tracking
Feels modern, not like a 2010 web tool
Lets me explore JSON easily (collapsible, clean, dark UI)
Basically - a JSON viewer that respects both privacy and design.

You can try here - https://pjson.live/

Playing with keyframes

Hemendra Khatik — Thu, 15 Sep 2022 12:22:33 +0000

How is it?

What exactly Just in time (JIT) compilation is in JavaScript?

Hemendra Khatik — Mon, 25 Jul 2022 10:20:00 +0000

Is JavaScript compiled language or interpreted language or a mix of both?

Don't worry! Take a chill pill 😎

I'll break it down for you, bit by bit.

But first thing first...

Take a deep breath, and follow along.

JavaScript engines use the JIT(just in time) compiler to execute the code.

I know you must be wondering what the hell is JIT and how it works?

Let me demystify it for you

But before understanding JIT, let's change the topic for a while, and try to understand what compiler and interpreter are and how they work?

Compiler

The source code is converted into machine code once and then gets executed.

Pros
- Suppose we have a loop that runs 40 times, we do not need to translate the same code again and again. The time it saves is huge.
- The converted code will be more efficient cause we have more time for optimization.
Cons
- It takes a little bit more time to start up because it has to go through that compilation step at the beginning.

Interpreter

Interpreters are quick. We don’t have to go through that whole compilation step before execution. It just starts translating the first line and then executes it.

Pros
- Fast start-up times are characteristic of interpreters. That's why browsers used JavaScript interpreters in the beginning.
Cons
- When you’re running the same code more than once. For example, if you’re in a loop. Then you have to do the same translation over and over and over again.
- The code will be less efficient than the compiler cause we have less time for optimization.

Just In Time(JIT) compiler

To get rid of the interpreter's inefficiency, "the interpreter keeps retranslating the same code every time it goes through the loop".

In the JIT compiler we have a new component called a monitor (aka a profiler). That monitor watches the code as it runs and

Identify the hot or warm components of the code eg: repetitive code.
Transform those components into machine code during run time.
Optimize the generated machine code.
Hot swap the previous implementation of the code.

In short Just in time compiler is nothing but a combination of an interpreter and a compiler.

I hope you found it helpful, and if you have any questions, please let me know.

Feel proud to correct me if I'm wrong:)

Twitter || Linkedin

Polyfills and Transpilers in JavaScript.

Hemendra Khatik — Wed, 13 Jul 2022 11:34:00 +0000

Have you ever been in a situation where your code runs in one browser and fails in another?

And you would be wondering what the hell is happening??

Even after checking your code thoroughly, over and over again, you find it 100% correct.

Then where the hell actual problem lies in?

Let's understand this weird behaviour of JavaScript.

As we all know, JavaScript keeps on evolving over time. The browsers need to be updated with the time too.

If we don't update our browser, Modern JavaScript code will fail on the older versions of the browsers.

So basically It's not your fault It's the browser's fault.

Pro Tip: Don't forget to update your browser.

But wait...

We don't want to give users a bad user experience.

Is there any way we can fix this issue..?

And the answer is ...

Yes! we're magicians.

We gotta learn new magic mantras for this.

And those are:

Polyfill's Mantra
Transpiler's Mantra

Polyfill's Mantra

A polyfill is a piece of code used to provide modern functionality on older browsers that do not natively support it.

EG:

let str = 'hello world';

console.log(str.includes('hello')); // true
console.log(str.includes('bye')); //false

If you run the above code in updated versions of Chrome, firebox, safari, etc. It will work fine.

But if you run it in Internet Explorer 11 you will face an error as below.

To make our code run in older engines we need to write a polyfill for includes function.


// Checking if includes method exist or not
if (!String.prototype.includes) {
    // polyfill method
    String.prototype.includes = function (searchString) {
    let isFound = false;

    // here <this> refers to the string it self
    if (this.indexOf(searchString) !== -1) {
      isFound = true;
    }
    return isFound;
  }
} 

// Now it will work in IE 11 too.

let str = 'hello world';

console.log(str.includes('hello')); // true
console.log(str.includes('bye')); //false

Transpiler's Mantra

A transpiler is a piece of software that translates one source code to another source code. It can parse modern code and rewrite it using the older syntax of that language so that it will also work in outdated engines.

Babel is one of the most used transpilers out there.

Usually, developer runs the transpiler on their own computer or in the cloud and then deploys the transpiled code to the server.

Tip: Remember these two mantras, and your code will never fail.

Do let me know if this blog was helpful

follow me for more such blog posts.

Twitter || Linkedin

How to upload file using expressJS

Hemendra Khatik — Sun, 10 Jul 2022 13:53:00 +0000

It took me 4-days and 100+ attempts to solve this simple issue of uploading a file using node.

And the moment I got it right, I was like...phewww

Here is how I solved this issue.

By creating a -

Simple node server.
Middleware to process files.
POST route to accept files.
Route to serve files.
Middleware to Handle CORS issue(you won't get this issue in postman).

Node server using express

Initialize the project using below command

node init

Install the required dependencies.

using npm -> npm i express dotenv
using yarn -> yarn add express dotenv

Create server.js and paste below code


const express = require("express");
const dotenv = require("dotenv");

const app = express();

dotenv.config(); // <-- To use.env file

app.use(express.json());
/*
express.json() middleware helps us to parse all HTTP requests

like --> req.body

And express.json() middleware always should be at the top

*/

const PORT = process.env.PORT || 5000;
app.listen(
  PORT,
  console.log(`Server is up and running on port ${PORT}`)
);

Now run the node server using below command

node server.js

Create a middleware to process files.

Install the dependencies

using npm -> npm i multer

using yarn -> yarn add multer

Create processFile.js file and paste below code in it and create upload folder to store uploaded files in it.

const multer = require("multer");
const path = require("path");

const MIME_TYPES = {
  "image/jpg": "jpg",
  "image/jpeg": "jpg",
  "image/png": "png",
  // you can add more here
};

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null,path.join(__dirname, './upload'));
   // Note ./upload path should be relative. Change this path according to your folder structure
  },
  filename: (req, file, callback) => {
    const name = file.originalname.split(" ").join("_");
    const extension = MIME_TYPES[file.mimetype];
    callback(null, name + Date.now() + "." + extension);
  },
});

const processFile = multer({ storage: storage }).single("file"); //<--here `file` key
/*
Look at the last example of how we will use `file` key to 
upload files using form data and postman.

For accepting multiple files change above line to 

const processFile = multer({ storage: storage }).array('file', 12);
Where 12 is the number of files you want to accept.

*/

module.exports = processFile;

Create a POST route to accept file.

Paste below code in server.js file

For uploading single file

const processFile = require("./processFile");

app.post("/api/upload", processFile, (req, res, next) => {

  const url = req.protocol + "://" + req.get("host");

  const file = url + "/files/" + req.file.filename;

  res.status(201).json({
    message: "Success",
    file: file,
  });
});

For uploading multiple files

const processFile = require("./processFile");

app.post("/api/upload", processFile, (req, res, next) => {
  const files = []
  const url = req.protocol + "://" + req.get("host");
  req.files.forEach(file=>{
    const file_url = url + "/files/" + file.filename;
    files.push({
      url: file_url,
    });
  })

  res.status(201).json({
    message: "files saved successfully!",
    files,
  });
});

So far you would be able to store files in your upload folder but you can't access files using links you are receiving in the response and for that, we need to serve those files.

Serve uploaded files

Add below code in server.js file and restart the server.

const path = require("path");

app.use("/files", express.static(path.join(__dirname, "upload")));

Now you should be able to see the files if you visit the links.

CORS (Cross Origin Resource Sharing)

Note: You won't face this issue in the postman but in your client-side app you will face this issue.

To resolve CORS issue

Create a cors middleware.
Apply cors middleware at the top of your file


const cors = (req, res, next) => {
  const origin = "*"; // <-- change this in production
  res.setHeader("Access-Control-Allow-Origin", origin);
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content, Accept, Content-Type, Authorization"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, PATCH, OPTIONS"
  );
  next();
};

app.use(cors); // <-- Should be at the top

Upload file from client


  const data = new FormData();
  data.append("file", FILE_URI);

  fetch("http://localhost:5000/api/upload", {
    method: "post",
    body: data,
  })
  .then((res) => res.json())
  .catch((err) => {
     console.log(err);
  });

And That's how I solved this issue. Let me know if you have any doubt.

follow me for more such blog posts.

Twitter || Linkedin

Functions are Objects in javaScript

Hemendra Khatik — Tue, 05 Jul 2022 10:00:00 +0000

Whattttt???

Yes, You read that correctly.

Let's deep dive into this topic.

Before we get into a serious drill, Let's quickly revise objects and functions in JavaScript.

Object:

Objects in JavaScript are nothing but a non-primitive type data structure. We can define an object using curly brackets and put key-value pairs separated by a comma in it.

const user = {
   name:"Hemendra",
   nickname:"Hemu",
   email:"hi@aamchora.space",
}

user.city = "Bhilwara" // add new value in existing object

user.city = "Jaipur" // update new value in existing object

console.log(user.name);
/*
output

Hemendra

*/
console.log(user);

/*
output

{
   name:"Hemendra",
   nickname:"Hemu",
   email:"hi@aamchora.space",
   city:"Jaipur"
}
*/

What is throttling in JavaScript?

Hemendra Khatik — Thu, 30 Jun 2022 07:27:00 +0000

Again a jargonish word, but let me demystify it for you.

It's nothing but a simple technique we use to prevent unnecessary function calls to improve app's performance.

Unlike Debouncing, here we block a function call for a particular time if it's been executed recently. Or we could also say that throttling ensures a function call regularly at a fixed rate.

Let's look at the below example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Throttling</title>
    </head>
    <body>
        <button class="btn">Click here</button>
        <script src="index.js"></script>
    </body>
</html>

let count = 0;
function submitData(query){
   // some api call
   console.log("result",count++)
}

document.querySelector(".btn").addEventListener("click",()=>{
submitData();
})

In the above example, if you click 10 times in 2000ms, Function will be called 10 times, as you can clearly see in the above example.

It's a very expensive operation, and as dev, our job is to make operations as cheap as possible.

Let's see how throttling helps us to make these operations cheaper.

function throttle(fn,delay){
  let last = 0;
 /*  
here ...args is optional I've used this in case, if you 
want to pass some parameters you can use ...args
*/ 
  return (...args)=>{
    const now = new Date().getTime();
    if(now - last < delay){
      return;
    }
   last = now;
   return fn(...args)
  }

}

const magicFunction = throttle(submitData,1000);

let count = 0;
function submitData(){
   // some api call
   console.log("result",count++)
}

document.querySelector(".btn").addEventListener("click",magicFunction);

Now, if you click 10 times in 2000ms, Function will be called 2 times only, as you can see in the code. We have blocked the function call for 1000ms.

That's how we can implement the throttling technique to improve our app's performance

follow me for more such blog posts.
Let me know if this blog was helpful.

Twitter || Linkedin

Note for beginners

Hemendra Khatik — Tue, 28 Jun 2022 15:28:20 +0000

Beginner’s Guide

If you are thinking to start your developer journey, then ask yourself,

What do you want to be?

What do you really want to be?

Do you want to become a researcher or a developer?

Before you get on a serious drill to become a developer, this question is super important because many of us feel confused whether we should learn the subject in-depth or not

Allow me to make it simple for you

As a beginner, I think you can start with the followings:-

1. Application of knowledge >> Depth Knowledge

Forget about theoretical jargon and how giant tech companies function when you are just starting out! It will scare the shit out of you and you’ll be like “so much to do”

Start with how to apply the small things you learn and keep at it religiously.

2. One day at a time

It’s obvious that you will think about how to build a large-scale and efficient system but when you start, all you need to focus on is how to build.

💡 Pro-tip: Once you know how to build stuff with your coding skills then only you should study how to write a large-scale and efficient system.

3. Concepts >>> Syntax

Again, your focus should be crystal clear concepts and not syntax.

For example, while learning the basic JavaScript you should try to learn how the map function or filter or reduce is working rather than asking why are we exactly writing it as array.map.

See, this is how it’s written and that's how it works, you need to learn this and move forward.

4. Depths are dangerous when you are just starting out

We are NOT saying that asking questions is wrong.

It’s perfectly fine to have the curiosity to learn things in depth while learning something new but you should also understand that if you keep getting into the depths of everything, things will start becoming really difficult and hard to understand as a beginner.

And, eventually, you will start thinking that programming is very hard and is not for me and you will give up!

To sum it up, as a beginner, the goal is not to get into the depths of the topics but to learn what is necessary and then move forward to the next topic.

PS for experts: This blog is for beginners only, don't overwhelm them by sharing your years of knowledge. Be real and share the truth about how many times you failed and how gradually you learned everything you now know.

follow me for more such blog posts.
Let me know if this blog was helpful.

Twitter || Linkedin

What is debouncing in JavaScript?

Hemendra Khatik — Tue, 28 Jun 2022 06:27:00 +0000

While building an app using JavaScript. We may need to call the function many times to achieve the desired result.

Some examples are

While scrolling or resizing the screen you would want to compute something.
Sometime we may need to display quick results as user types in the input field.

Let's see, how we usually write code to achieve the desired result.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Debouncing</title>
    </head>
    <body>
        <input class="search" type="text" placeholder="search"/>
        <script src="index.js"></script>
    </body>
</html>


let count = 0;
function search(query){
   // some api call
   console.log("result",count++)
}

document.querySelector(".search").addEventListener("input",(e)=>{
search(e.target.value);
})

In the above example, If I search for a laptop, The function search will be called 6 times. Which is an inefficient way of calling a function. And it is very expensive for JavaScript.

You must be wondering what do you mean by expensive for JavaScript?

JavaScript is a synchronous single-threaded language. Which means we have a single callstack to execute everything. And because it is single-threaded, we should not block the thread by calling functions unnecessary.

But wait ...

How do we prevent unnecessary function calls to improve performance?

Here, the concept of debouncing kicks into the picture.

Debouncing is a technique used to improve the browser's performance. It ensures that time-consuming tasks do not fire so often, In other words, it limits the rate at which a function gets invoked.

Let's re-write the above code using Debouncing technique.


let count = 0;
function search(query){
   // some api call
   console.log("result",count++)

}

const magicFunction = debounce(search,300);

function debounce(func, delay){
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

document.querySelector(".search").addEventListener("input",(e)=>{
  magicFunction(e.target.value);
});

The idea behind debouncing technique is that we do not call function during the event but after the event.

In the above example, We can clearly see.

debounce is a higher order function(HOF). Which takes two parameters the first parameter will be a function and the second will be a delay.

If the delay between two keystrokes is less than 300ms, function will not execute and setTimeout will be destroyed. And if the delay is more than 300ms, then only function will execute.

That's how we can implement the debouncing technique to improve our app's performance

follow me for more such blog posts.
Let me know if this blog was helpful.

Twitter || Linkedin

What exactly JavaScript is?

Hemendra Khatik — Sun, 26 Jun 2022 18:30:00 +0000

Definition

JavaScript is a synchronous single-threaded scripting language that was initially meant to run on the client-side(web browsers). But nowadays, we can run JavaScript on the server-side as well.

But wait, What does it mean by synchronous and single-threaded?

Let's deep dive into it

Synchronous

In English, it simply means that something is happening at the same time. And in terms of programming language, it simply means the code will execute in order line by line.

EG:

console.log("one");
console.log("two");
console.log("three");

/*
The above code will execute in below order

one
two
three

*/

But, sometimes you might encounter some code that will run asynchronously in JavaScript.

EG:

console.log("one");

function magicFunction(){
  console.log("It's magic");
}

setTimeout(magicFunction,5000);

console.log("two");

/*
The above code will output the below result

one
two
undefined
It's magic --> will display this after 5000ms.

*/

Now you would be wondering what the hell is happening, you just have read that JavaScript is a synchronous language??

Let's understand this more deeply why and how.

In the above example, setTimeout will execute asynchronously.

But what if I tell you that - setTimeout is not a part of the JavaScript language itself instead it's a part of the browser's web API.

Some examples of browser APIs are fetch, setInterval, DOM methods etc.

To make JavaScript more powerful on the client-side, browser JS-Engine attaches browser APIs with JavaScript and it will work like normal JavaScript.

So it means JavaScript is a synchronous language only. There are some other wrappers around it that make JavaScript run asynchronously.

Okay, but what does it mean by single-threaded?

Single-thread

It simply means we have a single-thread or a callstack to execute a JavaScript code. And we should not block this thread or else your app will crash and you won't be able to perform another task while one task is executing.

In the above example, we saw that setTimeout was running asynchronously.

But here it won't block the main thread. It will execute outside the callstack.

After timeout, callback function inside the seTimeout will wait in callback queue till the callstack gets empty.

An Event loop constantly keeps checking whether the callstack is empty or not. As soon as it gets empty event loop put callback function from callback queue to callstack and it gets executed.

And there you go ... 🤗🤗🤗

Now you know what exactly JavaScript is.

follow me for more such blog posts.
Let me know if this blog was helpful.

Twitter || Linkedin

Why scalability is important?

Hemendra Khatik — Fri, 24 Jun 2022 13:55:00 +0000

Scalable tech sounds SCALABLE but what makes scalability important???

Remember - we cannot build scalable tech in a jiffy.

We all know it is important to ship fast features when a product needs to thrive and live up to the expectations of users and stakeholders.

But in most startups, it doesn’t work that way.

Founders often assume that

Hiring a bigger team of developers will ship features faster.
Code is perfect as long as the feature functions well.
It’s not important to create a scalable tech or clean code.

These assumptions backfire as slow progress when they wish to scale. On top of it, they end up paying high costs for building tiny features which takes more time and effort.

But, what if? I tell you there is a way

You can add any feature and functionality at very minimal cost & effort in no time.

Yes, it's possible!

Things to keep in mind while building a scalable tech.

Code scalability.
Server scalability.

Code scalability

Writing scalable code is super important for large-scale apps.

Because -

It helps multiple teams work together in a single codebase conveniently.
It gets easier to add new features.
It takes less time to understand the code and focus more on the building.

Your code should be clean and maintainable.

Components, functions, and variable names should be meaningful.
Use comments to explain the code logic.
Use DRY and KISS rules while writing code but don’t abuse these rules.

Code navigation.

Navigating through your code should be easy.
Create a good folder structure and group similar files altogether.

Well-documented code.

Reading documentation is fun but writing one is painful. Have some empathy, and don’t be lazy.
Don’t keep flowcharts and algorithms in your mind. Spit it out in the documentation.

Server scalability.

At any stage, your app users can drastically increase which means increased API requests. In most cases, single server can’t handle it well.

In such conditions, you don’t want your app to crash. To prevent your app from crashing you can do the following -

Horizontal scaling.
1. Buy more servers.
2. Setup load-balancer.
Vertical scaling.
1. Buy bigger server.
Hybrid scaling(Horizontal + Vertical).
1. Buy more bigger servers.

follow me for more such blog posts.
Let me know if this blog was helpful.