DEV Community: Jakaria Masum

Docker Images Explained Simply

Jakaria Masum — Wed, 09 Jul 2025 19:25:27 +0000

Why I Decided to Learn Docker

As a web developer, I kept hearing about Docker — a tool that everyone says is “a must-learn” for deployment, team collaboration, and DevOps. But at first, it felt like something only backend engineers or DevOps folks needed.

Turns out, that’s not true.

So today, I decided to dive in — and guess what? I created my first Docker image from scratch and ran it like magic!

Here’s what I learned — explained the way I wish someone told me earlier.

What Even Is Docker?

Imagine you're building a project that works perfectly on your machine — but when you hand it to your friend or deploy it to a server, everything breaks.
Different environments, missing dependencies, version mismatches…

Docker solves that. It lets you package your app with everything it needs — code, dependencies, runtime — into a neat box called a container.

Think of a Docker container as a zip file of your app that always runs the same — anywhere.

Docker Image vs Container

Image = The blueprint (like a cake recipe)
Container = The actual running app (like the cake made from that recipe)

Creating My First Docker Image (Step-by-Step)

I created a simple Node.js app, wrote a Dockerfile, and ran it using Docker. Here’s how:

1. My Project Structure

docker-practice/
│
├── index.js
└── Dockerfile
└── package.json
└── package-lock.json

2. index.js (Simple server)

import express from "express";

const app = express();
const PORT = process.env.PORT || 3000;
app.use(express.json());

app.get("/", (req, res) => {
  res.send("Hello from Docker container!");
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

3. Dockerfile (The magic recipe)

# Use the official Node.js image as the base image
FROM node:20

# Set the working directory inside the container
# This is where the application code will be copied and run
WORKDIR /app

# Copy package.json and package-lock.json (if available) to the working directory
# This allows Docker to cache the npm install step, speeding up builds when dependencies haven't changed
COPY package*.json .

# Install the application dependencies
# This will install all the dependencies listed in package.json
RUN npm install

# Copy the rest of the application code to the working directory
# This includes all source files, configuration files, etc.
COPY . .


# Expose the port that the application will run on
# This is the port that will be accessible from outside the container
EXPOSE 3000


# Define the command to run the application
# This command will be executed when the container starts
# It starts the Node.js application using npm
CMD ["npm", "start"]

4. Build the Image

docker build -t my-node-app .

This tells Docker:

“Hey, here’s my Dockerfile. Create an image and call it my-node-app.”

5. Run the Container

docker run -p 3000:3000 my-node-app

Now open http://localhost:3000 — and boom!
You’ll see Hello from Docker container!

What I Learned

Docker makes your app environment portable and consistent
A Dockerfile is like a list of cooking instructions for your app
Docker containers are isolated environments that run your app anywhere

Things That Surprised Me

How easy it was to build and run a container
How fast Docker is (it felt like running a normal app)
How powerful it is for collaboration and deployment

Understanding Throttle in JavaScript

Jakaria Masum — Thu, 03 Jul 2025 16:10:00 +0000

If you’ve ever worked with JavaScript and added event listeners (like scroll or resize), you might have noticed that your code runs too often, which can slow things down. This is where throttle comes to the rescue!

In this post, we’ll break down what throttling is, why it’s useful, and how to implement it — with a fun real-life example to help you visualize it.

What is Throttling?

Throttling means limiting how often a function can run.

Imagine you’re at a concert, and the security guard checks tickets at the entrance. Even if 100 people rush in at once, the guard can only check one ticket every 2 seconds. That’s throttling — it controls the rate of a repetitive action.

In JavaScript, throttling ensures that a function can only run once in a specified time period, no matter how many times it’s triggered.

Why Do We Need Throttling?

Some events in the browser can fire many times per second, such as:

scroll
resize
mousemove
keydown

If you attach a function to these events without throttling, the function might run hundreds or thousands of times in a short period! This can cause:

Slow performance
Laggy interfaces
High CPU usage

Throttling helps keep your app fast and smooth by controlling how often the event handler runs.

How Throttling Works (With Code)

Here’s a simple throttle function:

function throttle(func, delay) {
  let lastCall = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastCall >= delay) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

How to use it:

function onScroll() {
  console.log("Scroll event handler called at", new Date().toISOString());
}

window.addEventListener("scroll", throttle(onScroll, 1000)); 
// This will log at most once every 1000ms, no matter how fast you scroll

Real-Life Example: Throttling Window Resize

Let’s say you have a dashboard, and you want to recalculate layout sizes whenever the window is resized. Without throttling, the handler might run dozens of times as you drag the window. Let’s throttle it!

function updateLayout() {
  console.log("Updating layout at", new Date().toISOString());
  // Imagine some expensive calculations here
}

window.addEventListener("resize", throttle(updateLayout, 500));
// Layout updates no more than once every 500ms

Real-life analogy:
Think of this like adjusting your seat while driving. You don’t adjust your seat position every microsecond as you move — you pause, assess, and adjust every few moments. Throttling does the same for your code!

When to Use Throttle?

Scroll events — e.g., loading more content as you scroll down.
Resize events — e.g., adjusting layout or graphics size.
Mouse move or drag — e.g., drawing tools, sliders.

Final Thoughts

Throttle helps you control how often a function runs, making your app more efficient and smooth.

Whenever you’re working with high-frequency events, consider using throttle to keep performance in check!

Bonus Tip

There are libraries like Lodash that give you a ready-made _.throttle function — super handy!

import throttle from 'lodash/throttle';

window.addEventListener("scroll", throttle(() => {
  console.log("Throttled scroll!");
}, 1000));

Summary

Throttling limits how often a function can run in a given time frame.
It’s great for scroll, resize, mousemove, and similar events.
It keeps your app smooth and prevents unnecessary work.

Higher-Order Functions in JavaScript

Jakaria Masum — Thu, 03 Jul 2025 10:02:50 +0000

If you’re starting out with JavaScript, you might have heard the term higher-order function and wondered what it means. It sounds complicated, but I promise it’s not! By the end of this post, you’ll understand what higher-order functions are, see some examples, and learn why they are so useful.

What Is a Higher-Order Function?

In JavaScript, functions are first-class citizens. This means:

You can store functions in variables.
You can pass functions as arguments to other functions.
You can return functions from other functions.

A higher-order function is any function that does one or both of the following:

Takes one or more functions as arguments.
Returns a function.

That’s it! No tricky concepts — just functions that deal with other functions.

A Simple Example: Passing a Function as an Argument

Let’s see a higher-order function in action.

function greet(name) {
  console.log(`Hello, ${name}!`);
}

function processUserInput(callback) {
  const name = prompt("Please enter your name:");
  callback(name);
}

processUserInput(greet);

In this example:

processUserInput is a higher-order function because it accepts another function (greet) as an argument.
greet is called inside processUserInput to display the greeting.

Example: Returning a Function

A higher-order function can also return a new function. Here’s how:

function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // Output: 10

What’s happening here?

multiplier is a higher-order function because it returns another function.
We create double by calling multiplier(2), which gives us a function that doubles numbers.

Why Use Higher-Order Functions?

Higher-order functions help make your code:

Reusable — You can apply the same logic in different situations by passing different functions.
Cleaner and shorter — No need to repeat similar logic in multiple places.
Flexible — Combine small, focused functions to create powerful features.

In fact, many of JavaScript’s built-in array methods are higher-order functions!

Built-In Higher-Order Functions in JavaScript

Let’s look at some examples you might already be familiar with.

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

// map applies a function to each element
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter keeps elements that match a condition
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

// reduce combines all elements into one value
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

map, filter, and reduce all take functions as arguments — that’s what makes them higher-order!

Final Thoughts

Higher-order functions are functions that work with other functions.
They might sound intimidating at first, but they’re everywhere in JavaScript. Once you understand them, you’ll be able to write smarter, cleaner, and more reusable code.

Debounce in JavaScript

Jakaria Masum — Tue, 01 Jul 2025 18:15:46 +0000

Have you ever typed in a search bar and noticed that results don’t appear instantly with every keystroke, but only after you stop typing for a second? That smooth behavior is often made possible using something called debounce.

In this blog, we'll break down what debounce is, why it's useful, and how to use it with a clear JavaScript example.

What is Debounce?

Debounce is a technique used to limit how often a function is executed.

In simple terms:

Debounce waits for a pause in a series of events before running a function.

Why Use Debounce?

Imagine you have an input box that sends a search request to the server every time you type a letter.

Without debounce:

Typing “food” = 4 API calls (one for each letter)

With debounce:

Typing “food” quickly = 1 API call (after you stop typing)

This saves bandwidth, avoids unnecessary processing, and improves performance.

Real-Life Examples

Live search boxes
Window resizing
Scroll event listeners
Form validations as you type

How Debounce Works — Step by Step

Let’s say you type something quickly:

f → o → o → d

With debounce:

Every time you type, the timer resets.
Only after you stop typing for X milliseconds, the function runs.

Debounce Example in JavaScript

Here’s a simple debounce function:

function debounce(func, delay) {
  let timeoutId;

  return function (...args) {
    clearTimeout(timeoutId); // Cancel the previous timer
    timeoutId = setTimeout(() => {
      func.apply(this, args); // Run the function after delay
    }, delay);
  };
}

Let’s apply it:

function handleSearch(event) {
  console.log("Searching for:", event.target.value);
}

const debouncedSearch = debounce(handleSearch, 500);

document.getElementById("search").addEventListener("input", debouncedSearch);

Now handleSearch will only run 500ms after the user stops typing.

Visual Summary

[User types] f o o d
[Debounce resets timer on each key]
[Wait 500ms of no typing] → Run search once

Analogy: Pressing Elevator Button

Think of debounce like this:

You press the elevator button multiple times (input events).
The elevator only responds after you stop pressing for a while.
Pressing more quickly resets the timer.

Debounce is a powerful, simple concept:

It helps you avoid running functions too often.
It improves app performance and user experience.

Next time you're working with input boxes, scroll events, or anything frequent — consider using debounce.

Docker Explained in Minutes

Jakaria Masum — Mon, 28 Apr 2025 19:22:55 +0000

In today’s world of software development, applications need to be fast, reliable, and portable.

This is where Docker comes in.

Docker has completely changed how developers build, ship, and run applications.

If you're new to Docker, don’t worry — this guide will help you understand the basics easily.

What is Docker?

Docker is an open-source platform that lets you package an application along with all its dependencies into a container.

This container can then run on any system, ensuring that "it works on my machine" problems are a thing of the past.

In simple words:

Docker always yields the exact same application and execution behavior! No matter where or by whom it might be executed.

What is a Container?

A container is a lightweight, standalone, and executable package of software.

It contains:

Your application code
Libraries
System tools
Settings

Containers are different from virtual machines (VMs) because they share the host system’s operating system.

This makes them faster and less heavy compared to VMs.

Why Use Docker?

Here are some reasons why Docker is so popular:

Portability: Run your app anywhere — no need to worry about system differences.
Speed: Containers start in seconds.
Efficiency: Less resource usage compared to virtual machines.
Consistency: Your app behaves the same in development, testing, and production.
Scalability: Easily manage and scale apps using tools like Kubernetes.

Basic Docker Concepts

Term	Meaning
Image	A snapshot of your app and its environment (read-only template).
Container	A running instance of an image.
Dockerfile	A text file with instructions to build a Docker image.
Docker Hub	A public registry to store and share Docker images.

How Does Docker Work?

write a Dockerfile describing your app and environment.
build a Docker image from this file.
run a container from the image.
app is now isolated and portable!

A Simple Example

Here’s a tiny example to understand it better:

Step 1: Create a file called Dockerfile

FROM node:20
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 5000
CMD ["node", "app.mjs"]

Step 2: Build the image

docker build .

After build, copy docker image_id from docker image desktop

Step 3: Run the container

docker run -p 5000:5000 image_id

That’s it! 🎉 Your Express app now runs inside a container!

Conclusion

Docker makes life easier for developers and businesses by making applications more portable, consistent, and easy to manage.

Once you master Docker basics, you’ll open the door to advanced tools like Docker Compose, Kubernetes, and cloud-native development.

Internationalization in Next.js

Jakaria Masum — Sun, 27 Apr 2025 04:10:00 +0000

What is Internationalization (i18n)?

Internationalization, or i18n, is the process of designing your app so it can easily be adapted to different languages and regions without changing the codebase.

In web apps, this typically means:

Displaying text in different languages (e.g., English, Bengali)
Formatting dates, numbers, and currencies based on the locale
Changing URLs to reflect the language (/en/about vs /bn/about)

Why Use `next-intl`?

next-intl is a powerful library that enhances i18n support in Next.js. Here's why it's awesome:

✅ Fully supports App Router in Next.js 13+

✅ Enables per-locale routing (/en, /bn, etc.)

✅ Provides hooks like useTranslations for client-side translations

✅ Offers getTranslations for server-side rendering

✅ Handles locale detection automatically

✅ Middleware support for redirecting users based on their browser's locale

✅ Scales well for large multilingual apps

Let’s go step by step

1. Install next-intl

First, install the package:

npm install next-intl

Folder Structure

src
├──  app
│     ├── [locale]
│         ├── layout.tsx
│         ├── page.tsx 
├──i18n
│   ├── locales
│   │     ├── en.json
│   │     ├── bn,json
│   ├── routing.ts
│   ├── navigation.ts
│   ├── request.ts
├── middleware.ts
├── next.config.js

2. Create the `/i18n` directory

Inside your app, create a locales folder with translation files:

/locales
  ├── en.json
  └── bn.json

Example en.json:

{
  "home": {
    "title": "Hello world!",
    "about": "Go to the about page"
  }
}

Example bn.json:

{
  "home": {
    "title": "হ্যালো বিশ্ব!",
    "about": "সম্বন্ধে পৃষ্ঠায় যান"
  }
}

3. Define Supported Locales

Create a file i18n/routing.ts to hold your config:

import {defineRouting} from 'next-intl/routing';

export const routing = defineRouting({
  // A list of all locales that are supported
  locales: ['en', 'bn'],

  // Used when no locale matches
  defaultLocale: 'en'
});

4. Define Navigation

Once we have our routing configuration in place, we can use it to set up the navigation APIs.
Create a file i18n/navigation.ts to navigation:

import {createNavigation} from 'next-intl/navigation';
import {routing} from './routing';

// Lightweight wrappers around Next.js' navigation
// APIs that consider the routing configuration
export const {Link, redirect, usePathname, useRouter, getPathname} =
  createNavigation(routing);

5. Setup Middleware for Locale Detection

import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';

export default createMiddleware(routing);

export const config = {
  // Match all pathnames except for
  // - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
  // - … the ones containing a dot (e.g. `favicon.ico`)
  matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)'
};

This middleware will redirect users to the right locale based on the path or browser settings.

6. Configure `next.config.js`

Update your next.config.js:

import {NextConfig} from 'next';
import createNextIntlPlugin from 'next-intl/plugin';

const nextConfig: NextConfig = {};

const withNextIntl = createNextIntlPlugin();
export default withNextIntl(nextConfig);

Make sure you do not use i18n field in this config. next-intl handles that routing now.

7. Provide Translations via `getRequestConfig`

import {getRequestConfig} from 'next-intl/server';
import {hasLocale} from 'next-intl';
import {routing} from './routing';

export default getRequestConfig(async ({requestLocale}) => {
  // Typically corresponds to the `[locale]` segment
  const requested = await requestLocale;
  const locale = hasLocale(routing.locales, requested)
    ? requested
    : routing.defaultLocale;

  return {
    locale,
    messages: (await import(`./locales/${locale}.json`)).default
  };
});

8. Use `NextIntlClientProvider` in `layout.tsx`

import {NextIntlClientProvider, hasLocale} from 'next-intl';
import {notFound} from 'next/navigation';
import {routing} from '@/i18n/routing';

export default async function LocaleLayout({
  children,
  params
}: {
  children: React.ReactNode;
  params: Promise<{locale: string}>;
}) {
  // Ensure that the incoming `locale` is valid
  const {locale} = await params;
  if (!hasLocale(routing.locales, locale)) {
    notFound();
  }

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider>{children}</NextIntlClientProvider>
      </body>
    </html>
  );
}

9. Use Translations in Your Page

import {useTranslations} from 'next-intl';
import {Link} from '@/i18n/navigation';

export default function HomePage() {
  const t = useTranslations('home');
  return (
    <div>
      <h1>{t('title')}</h1>
      <Link href="/about">{t('about')}</Link>
    </div>
  );
}

In case of async components, you can use the awaitable getTranslations function instead:

import {getTranslations} from 'next-intl/server';

export default async function HomePage() {
  const t = await getTranslations('home');
  return <h1>{t('title')}</h1>;
}

🎉 Done!

You now have a fully functional i18n setup in Next.js App Router using next-intl!

Your app will:

Route via /en, /bn, etc.
Load the right translations
Handle locale detection and fallback

💬 Got stuck? Drop a comment or question below — happy to help!

RTK Query: A Beginner-Friendly Guide

Jakaria Masum — Fri, 25 Apr 2025 17:04:12 +0000

If you've ever built a React app with Redux, you’ve probably experienced the repetitive boilerplate of fetching data — action creators, reducers… and don't forget loading and error states. 😩

Enter RTK Query, a powerful data-fetching and caching tool built right into Redux Toolkit. It helps eliminate much of the hassle involved with managing server-side state. In this guide, we’ll break down what RTK Query is, why you should care, and how to use it in your projects with simple, practical examples.

🧠 What is RTK Query?

RTK Query is a data-fetching and caching solution provided by Redux Toolkit (RTK). It's designed to simplify API communication by handling:

Data fetching
Caching
Invalidations
Refetching
Loading and error states

Basically, RTK Query reduces all the fluff and gives you a clean, maintainable way to work with remote data.

🛠️ Why Use RTK Query?

Here’s what makes it awesome:

🔁 Automatic caching & re-fetching – Minimizes unnecessary network requests
⏳ Built-in loading & error state management
💾 Optimistic updates and caching control
🧼 Cleaner code with fewer reducers and actions

⚙️ Setting Up RTK Query

Let's walk through the basic setup. First, make sure you have the Redux Toolkit and React-Redux installed:

npm install @reduxjs/toolkit react-redux

Now create an API service using createApi.

// services/api.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api', // name of the slice
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => 'posts',
    }),
  }),
});

export const { useGetPostsQuery } = api;

Next, hook the API into your Redux store:

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import { api } from './services/api';

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});

And wrap your app with the Redux Provider:

// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>
);

🧪 Using Queries in Components

Here’s how you can fetch and display data in a component using the auto-generated hook:

import React from 'react';
import { useGetPostsQuery } from './services/api';

const PostList = () => {
  const { data: posts, error, isLoading } = useGetPostsQuery();

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Something went wrong</p>;

  return (
    <ul>
      {posts?.map((post: any) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default PostList;

No reducers. No thunks. No dispatching. Just hooks. 💥

🧰 Bonus: Mutations with RTK Query

Need to POST, PUT, DELETE? RTK Query’s got you. Here’s an example of a mutation to create a new post:

addPost: builder.mutation({
  query: (newPost) => ({
    url: 'posts',
    method: 'POST',
    body: newPost,
  }),
}),

Use it like this:

const [addPost, { isLoading }] = useAddPostMutation();
addPost({ title: 'New Post', body: 'Hello world!' });

🎯 Final Thoughts

RTK Query is a game-changer when working with APIs in Redux apps. It’s intuitive, concise, and handles the hard parts for you. Whether you're building a large-scale app or a small side project, it's worth exploring.

Next time you're building a React app with Redux, give RTK Query a try — your future self will thank you. 🙌

📚 Resources

File Upload using Multer

Jakaria Masum — Thu, 24 Apr 2025 10:14:43 +0000

In this post, you'll learn how to build a clean, reusable backend API in Node.js + TypeScript using Express and Multer to handle file uploads. We'll keep it simple — no file type restrictions or size limits — just basic upload functionality that saves files using their original name.

🛠 Tech Stack

Express: Web framework for Node.js
Multer: Middleware for handling multipart/form-data (file uploads)
TypeScript: Optional static typing
MVC Structure: For clean separation of logic

🗂 Folder Structure

file-upload-api/
├── controllers/
│   └── upload.controller.ts
├── middleware/
│   └── upload.middleware.ts
├── routes/
│   └── upload.route.ts
├── services/
│   └── upload.service.ts
├── uploads/  (created automatically)
├── index.ts
├── tsconfig.json
└── package.json

📦 Step 1: Install Dependencies

npm install express multer
npm install -D typescript ts-node-dev @types/node @types/express @types/multer

Add a simple tsconfig.json if you don’t have one yet:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["./**/*.ts"]
}

✍️ Step 2: Multer Middleware

middleware/upload.middleware.ts

import multer from 'multer';
import path from 'path';
import fs from 'fs';

// Ensure uploads directory exists
const uploadDir = path.join(process.cwd(), 'uploads');
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

const storage = multer.diskStorage({
  destination: (_req, _file, cb) => cb(null, uploadDir),
  filename: (_req, file, cb) => {
    const timestamp = Date.now();
    cb(null, `${timestamp}-${file.originalname}`);
  },
});

export const upload = multer({ storage });

💼 Step 3: Upload Service

services/upload.service.ts

export const handleUploadService = (file: Express.Multer.File) => {
  return {
    message: 'File uploaded successfully!',
    originalName: file.originalname,
    filename: file.filename,
    path: file.path,
    size: file.size,
  };
};

📤 Step 4: Upload Controller

controllers/upload.controller.ts

import { Request, Response } from 'express';
import { handleUploadService } from '../services/upload.service';

export const uploadFile = (req: Request, res: Response) => {
  if (!req.file) {
    return res.status(400).json({ error: 'No file uploaded' });
  }

  const data = handleUploadService(req.file);
  res.status(200).json(data);
};

🛣 Step 5: Define the Route

routes/upload.route.ts

import { Router } from 'express';
import { upload } from '../middleware/upload.middleware';
import { uploadFile } from '../controllers/upload.controller';

const router = Router();

router.post('/file', upload.single('file'), uploadFile);

export default router;

🚀 Step 6: Initialize Express Server

index.ts

import express from 'express';
import uploadRoute from './routes/upload.route';

const app = express();
const PORT = 3000;

app.use(express.json());
app.use('/api/upload', uploadRoute);

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

🧪 Test It with Postman

Method: POST
URL: http://localhost:3000/api/upload/file
Body: form-data
- Key: file (type: File)
- Select a file from your system

You should get a JSON response like:

{
  "message": "File uploaded successfully!",
  "originalName": "video.mp4",
  "filename": "1713967431914-video.mp4",
  "path": "/uploads/1713967431914-video.mp4",
  "size": 123456
}

✅ Conclusion
You now have a robust, scalable backend setup for handling video uploads using Express, TypeScript and Multer. It saves with original file names (timestamp-prefixed), and follows clean code separation via MVC.

Writing Quality Commit Messages: A Small Habit with a Big Impact

Jakaria Masum — Sun, 20 Apr 2025 12:02:39 +0000

In software development, we talk a lot about frameworks, tools, testing, deployment, and code quality. But there’s one silent hero that often gets overlooked—commit messages.

Whether you’re working solo or as part of a team, quality commit messages can make or break your project’s maintainability and collaboration. Let’s explore why they matter and how to write them well.

✅ Why Commit Messages Matter

Track the "Why" Behind the Code
Code changes are easy to see with git diff. But why something changed? That’s in the commit message. Future-you (or your teammates) will thank you for explaining the reasoning.
Simplify Collaboration
Clear commit messages help teammates quickly understand what’s happening in the codebase. It’s crucial when reviewing pull requests or resolving merge conflicts.
Improve Debugging
When bugs arise, git history becomes a timeline of what went wrong and when. Quality commit messages speed up the debugging process.
Support Better Release Notes
Tools like conventional commits or changelogs use commit messages to generate release notes automatically. Sloppy messages = messy changelogs.

✍️ What Makes a Good Commit Message?

A great commit message is:

Concise but descriptive
Written in the imperative mood
Focused on one logical change
Often includes context if the change isn’t obvious

🧱 Structure of a Commit Message

<type>: <short summary>

<optional body explaining the reason or additional context>

Examples:

fix: resolve login failure when using expired token
feat: add donation tracking dashboard for charity accounts
chore: update dependencies and clean up unused imports
refactor: simplify payment verification logic

📐 Best Practices for Writing Commit Messages

Use Imperative Tone

“Fix bug” not “Fixed bug” or “Fixes bug”. Think of it as a command: “What will this commit do?”
Keep Subject Line Under 50 Characters
Brevity improves readability, especially in logs.
Use Body for Context
Use the message body to explain why a change was made or what problem it solves.
Stick to One Purpose
Each commit should ideally address one concern or logical task.
Use Conventional Commits (Optional but Helpful)
Adopt a standard format (feat:, fix:, docs:, chore:, etc.) to support automation and clarity.

🧰 Tools That Help

Commitlint – Lint commit messages to enforce style
Husky – Run commit message checks before commits
Semantic Release – Automate versioning and changelogs from commit messages

🧠 Real-World Impact

Projects that treat commit messages seriously enjoy:

Cleaner git logs
Faster onboarding for new devs
Easier debugging and rollback
More confident and accurate deployments

If you’ve ever stared at a commit like “update stuff” or “fix thing”, you already know how painful vague messages can be.

💡 Final Thoughts

Writing a great commit message takes just a few seconds more, but the payoff lasts the lifetime of your project. It's a small habit that scales with your team and codebase.

So next time you’re about to write “updated code,” pause and ask: What did I really change, and why?

Introduction to CI/CD Pipelines: A Beginner's Guide

Jakaria Masum — Wed, 12 Mar 2025 16:44:38 +0000

Welcome to the first blog in my series on CI/CD pipelines! If you're new to the world of software development, you might be wondering what CI/CD stands for and why it's so important. In this blog, we'll break down the basics of CI/CD pipelines in a beginner-friendly way, using simple examples to help you understand.

What is CI/CD?

CI/CD stands for Continuous Integration and Continuous Deployment (or Continuous Delivery). These are practices used in software development to automate the process of integrating, testing, and deploying code changes. The goal is to make the development process more efficient, reliable, and faster.

Continuous Integration (CI)

Continuous Integration is the practice of automatically integrating code changes from multiple contributors into a shared repository. This process includes:

Code Commit: Developers write code and commit it to a version control system like Git.
Automated Build: The CI system automatically builds the code to ensure it compiles correctly.
Automated Testing: The system runs automated tests to check for bugs and ensure the code works as expected.
Feedback: Developers receive feedback on their code changes, allowing them to fix issues quickly.

Continuous Deployment (CD)

Continuous Deployment takes the process a step further by automatically deploying the code changes to a production environment. This means that every change that passes the automated tests is released to the users immediately.

Continuous Delivery

Continuous Delivery is similar to Continuous Deployment, but with a manual approval step before the code is deployed to production. This allows for more control over the release process.

Why Use CI/CD?

CI/CD pipelines offer several benefits:

Faster Release Cycles: Automating the integration and deployment process reduces the time it takes to release new features or bug fixes.
Improved Code Quality: Automated testing catches bugs early, leading to more stable and reliable software.
Reduced Manual Effort: Automating repetitive tasks frees up developers to focus on writing code and solving complex problems.
Consistent Deployments: Automated deployments ensure that the same process is followed every time, reducing the risk of human error.

Example of a CI/CD Pipeline

Let's walk through a simple example of a CI/CD pipeline for a web application.

Step 1: Code Commit

A developer writes a new feature for the web application and commits the code to the Git repository.

Step 2: Automated Build

The CI system detects the new commit and triggers an automated build process. This might involve compiling the code, bundling assets, and preparing the application for deployment.

Step 3: Automated Testing

The CI system runs a series of automated tests to ensure the new feature works as expected and doesn't introduce any bugs. These tests might include:

Unit Tests: Testing individual components of the application.
Integration Tests: Testing how different components work together.
End-to-End Tests: Testing the entire application from the user's perspective.

Step 4: Feedback

If the tests pass, the developer receives a notification that their code changes have been successfully integrated. If the tests fail, the developer is notified of the issues so they can fix them.

Step 5: Deployment

Once the code passes all the tests, it is automatically deployed to a staging environment for further testing. If everything looks good, the code is then deployed to the production environment, making the new feature available to users.

Getting Started with CI/CD

If you're ready to implement CI/CD in your own projects, here are some popular tools to get you started:

Jenkins: An open-source automation server that supports building, deploying, and automating any project.
GitLab CI/CD: Integrated CI/CD pipelines that work seamlessly with GitLab repositories.
GitHub Actions: Automated workflows that run in response to events in your GitHub repository.
CircleCI: A continuous integration and delivery platform that automates the process of testing and deploying code.

Conclusion

CI/CD pipelines are a powerful way to streamline the software development process, making it faster, more reliable, and less error-prone. By automating the integration, testing, and deployment of code changes, you can focus on writing great software and delivering value to your users.

JavaScript Interview Questions for Beginners

Jakaria Masum — Fri, 21 Feb 2025 15:15:00 +0000

If you're new to JavaScript, don't worry! This guide will break down some common JavaScript concepts into simple terms with easy-to-understand examples. Let’s dive in!

1. What is a Higher-Order Function & Callback Function?

Higher-Order Function

A higher-order function is like a "boss" function that can either:

Take another function as an input (like hiring a worker), or
Return a function as output (like creating a new worker).

Example:

// A higher-order function that takes a function as input
function sayHello(name, callback) {
  console.log(`Hello, ${name}!`);
  callback(); // Call the callback function
}

function sayGoodbye() {
  console.log("Goodbye!");
}

sayHello("Alice", sayGoodbye);
// Output:
// Hello, Alice!
// Goodbye!

Here, sayHello is the boss, and sayGoodbye is the worker (callback).

Callback Function

A callback function is just a regular function that gets passed into another function and is called later.

Why Use Callbacks?
Callbacks are useful when you want to do something after a task finishes, like waiting for a user to click a button or fetching data from the internet.

2. What is Hoisting in JavaScript?

Hoisting means that JavaScript moves variable and function declarations to the top of their scope before running the code. It’s like writing your homework title at the top of the page before filling in the answers.

Example:

console.log(x); // undefined (not an error)
var x = 5;

// Behind the scenes, JavaScript does this:
var x;         // Declaration is hoisted
console.log(x); // undefined
x = 5;         // Assignment happens later

Important Note: let and const don’t get hoisted in the same way as var. If you try to use them before declaring, you’ll get an error.

3. What is Scope in JavaScript?

Scope is like a "boundary" that decides where variables live. Think of it like rooms in a house:

Variables declared inside a room (function) can only be used there.
Variables declared outside all rooms (globally) can be used anywhere.

Types of Scope:

Global Scope: Variables declared outside any function.
Local/Function Scope: Variables declared inside a function.
Block Scope: Variables declared with let or const inside {}.

Example:

var globalVar = "I'm everywhere!";

function myRoom() {
  var localVar = "I'm stuck in this room!";
  console.log(globalVar); // Works
  console.log(localVar);  // Works
}

myRoom();
console.log(globalVar); // Works
console.log(localVar);  // Error: localVar is not defined

4. What is the Difference Between `call`, `apply`, and `bind`?

These methods help control the value of this in a function. Imagine this as a person who needs to know where they belong.

call: Calls the function immediately and lets you pass arguments one by one.
apply: Calls the function immediately but lets you pass arguments as an array.
bind: Creates a new function with this set to a specific value, but doesn’t call it right away.

Example:

const person = {
  name: "Alice",
  greet: function (greeting) {
    console.log(`${greeting}, ${this.name}`);
  },
};

const otherPerson = { name: "Bob" };

// Using call
person.greet.call(otherPerson, "Hi"); // Output: Hi, Bob

// Using apply
person.greet.apply(otherPerson, ["Hello"]); // Output: Hello, Bob

// Using bind
const greetBob = person.greet.bind(otherPerson);
greetBob("Hey"); // Output: Hey, Bob

5. What is the Difference Between `==` and `===` Operators?

== (Equality): Compares values but allows JavaScript to change types if needed (type coercion).
=== (Strict Equality): Compares both value and type without changing anything.

Example:

console.log(5 == "5");  // true (JavaScript converts "5" to a number)
console.log(5 === "5"); // false (different types)

console.log(null == undefined); // true
console.log(null === undefined); // false

Tip: Always use === unless you have a good reason to use ==.

6. What is a Cookie?

A cookie is like a sticky note that websites leave on your browser to remember things about you, like your login details or preferences.

Example:

// Setting a cookie
document.cookie = "username=JohnDoe";

// Reading cookies
console.log(document.cookie); // Output: username=JohnDoe

Cookies are small and limited in size, so they’re best for simple tasks.

7. What is a Promise?

A promise is like a box that may contain a gift (success) or a note saying it’s out of stock (failure). Promises are used for asynchronous tasks, like fetching data from a server.

States of a Promise:

Pending: Waiting for the result.
Fulfilled: Got the result successfully.
Rejected: Something went wrong.

Example:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve("Data loaded!"); // Success
      } else {
        reject("Error occurred!"); // Failure
      }
    }, 2000);
  });
};

fetchData()
  .then((data) => console.log(data)) // Output: Data loaded!
  .catch((error) => console.error(error));

8. What is an Event Loop?

The event loop is like a waiter in a restaurant. It keeps checking if the kitchen (call stack) is free to take new orders (tasks). If the kitchen is busy, the waiter waits until it’s ready.

Example:

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

// Output:
// Start
// End
// Promise
// Timeout

Explanation:

setTimeout goes to the "waiting area" (task queue).
Promises go to the "VIP area" (microtask queue) and get served first.

9. What is a Prototype Chain?

Every object in JavaScript has a "parent" object called a prototype. If you ask an object for something it doesn’t have, JavaScript looks up its prototype chain to find it.

Example:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  console.log(`Hello, ${this.name}`);
};

const alice = new Person("Alice");
alice.greet(); // Output: Hello, Alice

Here, greet is not directly on alice, but JavaScript finds it through the prototype chain.

10. How Can You Eliminate Duplicate Values from a JavaScript Array?

Removing duplicates is like cleaning up a messy room by keeping only one of each item.

Using `Set`:

const numbers = [1, 2, 2, 3, 4, 4];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // Output: [1, 2, 3, 4]

Using `filter`:

const numbers = [1, 2, 2, 3, 4, 4];
const uniqueNumbers = numbers.filter((value, index, array) => array.indexOf(value) === index);
console.log(uniqueNumbers); // Output: [1, 2, 3, 4]

By understanding these concepts step-by-step, you'll build a strong foundation in JavaScript. Practice these examples, and soon you'll feel confident tackling more advanced topics!
Happy Coding!🚀

Understanding and Overcoming the N+1 Query issue in GraphQL

Jakaria Masum — Mon, 10 Feb 2025 18:10:18 +0000

Understanding the N+1 Problem in GraphQL

The N+1 problem is a common performance issue that can arise when using GraphQL. It occurs when a single query leads to multiple additional requests, instead of fetching all the necessary data in one go. This can significantly impact our application's performance and scalability.

What is the N+1 Problem?

Imagine we're building an API that fetches a list of musicians along with their album titles. In an ideal scenario, we should want to retrieve this data with just two requests: one for the list of musicians and another for their albums. However, if our API isn't optimized, it might make one request to get the list of musicians (the "1" part) and then n additional requests—one for each musician—to fetch their albums (the "n" part). This results in n+1 total requests.

Why is it a Problem?

Performance Issues: As our dataset grows, so does the number of requests. This can lead to slower response times and increased latency.
Resource Waste: Excessive database queries or API calls consume more resources and may increase costs if we're using cloud services.
User Experience: High latency can frustrate users and negatively impact engagement.

How Does it Happen in GraphQL?

In GraphQL, clients specify what data they need without defining how it should be fetched from storage. Each nested field within a query might require its own resolver function call, which often translates into separate database queries or API calls.

For example:

query {
  top100Reviews {
    body
    author {
      name
    }
  }
}

Here:

The top100Reviews resolver fetches 100 reviews.
For each review, another resolver (author) makes an additional call to get the author's details based on authorId.

This results in 101 total queries: one for reviews plus one per review for authors.

Solving the N+1 Problem

Using Data Loaders

Data loaders are powerful tools designed specifically to tackle this issue by batching similar client requests into fewer server-side queries.

How Data Loaders Work:

Instead of making n separate calls for each item's related data (like fetching albums per musician), data loaders allow us to send all relevant IDs at once (e.g., musician IDs) and receive back all related items (e.g., albums) in a single response.

Here’s how we might implement this:

// Example Resolver with DataLoader
const resolvers = {
  Query: {
    topMusiciansWithAlbums() {
      // Fetching top musicians first...
      const musicians = getTopMusicians();

      // Then use DataLoader to batch album fetching by ID.
      const albumLoader = new DataLoader((ids) => fetchAlbumsForIds(ids));

      return Promise.all(musicians.map((musician) => ({
        ...musician,
        albums: albumLoader.loadMany(musician.albumIds),
      })));
    },
  },
};

Other Strategies

While data loaders are highly effective, other strategies include:

Optimizing Resolvers: Ensure resolvers are efficient by minimizing unnecessary database interactions.
Using JOINs: If possible, perform SQL JOIN operations directly within resolvers instead of relying on nested resolvers[3].

However, JOINs may not always be feasible or efficient depending on our schema complexity or backend architecture.

Conclusion

The N+1 problem is common but solvable with techniques like batching through data loaders. By understanding how these issues arise and implementing solutions early on during development phases helps ensure scalable applications that provide better user experiences while reducing operational costs over time!

DEV Community: Jakaria Masum

Docker Images Explained Simply

Why I Decided to Learn Docker

What Even Is Docker?

Docker Image vs Container

Creating My First Docker Image (Step-by-Step)

1. My Project Structure

2. index.js (Simple server)

3. Dockerfile (The magic recipe)

4. Build the Image

5. Run the Container

What I Learned

Things That Surprised Me

Understanding Throttle in JavaScript

What is Throttling?

Why Do We Need Throttling?

How Throttling Works (With Code)

Real-Life Example: Throttling Window Resize

When to Use Throttle?

Final Thoughts

Bonus Tip

Summary

Higher-Order Functions in JavaScript

What Is a Higher-Order Function?

A Simple Example: Passing a Function as an Argument

Example: Returning a Function

Why Use Higher-Order Functions?

Built-In Higher-Order Functions in JavaScript

Final Thoughts

Debounce in JavaScript

What is Debounce?

Why Use Debounce?

Real-Life Examples

How Debounce Works — Step by Step

Debounce Example in JavaScript

Visual Summary

Analogy: Pressing Elevator Button

Docker Explained in Minutes

What is Docker?

What is a Container?

Why Use Docker?

Basic Docker Concepts

How Does Docker Work?

A Simple Example

Conclusion

Internationalization in Next.js

What is Internationalization (i18n)?

Why Use next-intl?

1. Install next-intl

Folder Structure

2. Create the /i18n directory

3. Define Supported Locales

4. Define Navigation

5. Setup Middleware for Locale Detection

6. Configure next.config.js

7. Provide Translations via getRequestConfig

8. Use NextIntlClientProvider in layout.tsx

9. Use Translations in Your Page

🎉 Done!

RTK Query: A Beginner-Friendly Guide

🧠 What is RTK Query?

🛠️ Why Use RTK Query?

⚙️ Setting Up RTK Query

🧪 Using Queries in Components

🧰 Bonus: Mutations with RTK Query

🎯 Final Thoughts

📚 Resources

File Upload using Multer

🛠 Tech Stack

🗂 Folder Structure

📦 Step 1: Install Dependencies

✍️ Step 2: Multer Middleware

💼 Step 3: Upload Service

📤 Step 4: Upload Controller

🛣 Step 5: Define the Route

🚀 Step 6: Initialize Express Server

🧪 Test It with Postman

Writing Quality Commit Messages: A Small Habit with a Big Impact

✅ Why Commit Messages Matter

✍️ What Makes a Good Commit Message?

Why Use `next-intl`?

2. Create the `/i18n` directory

6. Configure `next.config.js`

7. Provide Translations via `getRequestConfig`

8. Use `NextIntlClientProvider` in `layout.tsx`

4. What is the Difference Between `call`, `apply`, and `bind`?

5. What is the Difference Between `==` and `===` Operators?

Using `Set`:

Using `filter`: