DEV Community: JOYDIP PAUL

Understanding Angular Signals with Real Examples (বাংলায় সহজভাবে)

JOYDIP PAUL — Sun, 26 Oct 2025 15:20:59 +0000

Angular 16+ এ এসেছে Signals — একদম নতুন reactive concept। এই ব্লগে সহজ বাংলায় দেখানো হয়েছে Signals কীভাবে কাজ করে, কেন দরকার, আর কিভাবে তুমি তোমার কোডে reactive behavior আনতে পারো।

Angular Signals vs Normal Variables — পার্থক্যটা আসলে কোথায়?

Angular 16 থেকে শুরু করে একটা নতুন reactive concept এসেছে — Signal।
অনেকে ভাবে, “আরে ভাই, এটা তো আরেকটা state variable, নতুন কিছুর দরকার কী?”
কিন্তু একবার কোডে ঢুকলেই বোঝা যায় — Signal আসলে একেবারে অন্য লেভেলের জিনিস।

একটা সিম্পল উদাহরণ

constructor() {
  this.withOutSignal();
  this.withSignal();
}

withOutSignal() {
  let x = 10;
  let y = 20;
  let z = x + y;
  console.log('[Normal] Initial Sum:', z);

  x = 15;
  console.log('[Normal] After Change:', z);
}

withSignal() {
  const x = signal(10);
  const y = signal(20);
  const z = computed(() => x() + y());

  console.log('⚡ [Signal] Initial Sum:', z());

  x.set(150);
  console.log('⚡ [Signal] After Change:', z());
}

Output:

[Normal] Initial Sum: 30 [Normal] After Change: 30 [Signal] Initial Sum: 30 [Signal] After Change: 170
এখানে প্রথমটা (withOutSignal) তে x এর মান পাল্টালেও z আপডেট হচ্ছে না।
কিন্তু দ্বিতীয়টা (withSignal) তে Signal ব্যবহার করায় x এর মান বদলাতেই z রিয়েল টাইমে 170 হয়ে গেছে।

পার্থক্যটা কোথায়?

ধরন	Reactive?	আপডেট হয়?	আউটপুট
সাধারণ ভ্যারিয়েবল	না	না	30
Signal + Computed	হ্যাঁ	হয়	30 → 170

Signal হলো “reactive variable” — মানে, একে Angular ট্র্যাক করে রাখে।
যখনই signal-এর মান বদলাবে, সেটার ওপর নির্ভর করা সব জায়গায় মান আপডেট হবে।
আর computed() মানে হচ্ছে “যে ভ্যারিয়েবলটা অন্য signal গুলোর উপর নির্ভর করে”।

🛒 Real-Life Example: Add to Cart

ধরো তুমি একটা eCommerce অ্যাপ বানাচ্ছো।
Signal ছাড়া আমরা সাধারণত এমন করি

let cartItems = 0;

function addToCart() {
  cartItems++;
  console.log('Items in cart:', cartItems);
}

addToCart(); // 1
addToCart(); // 2

এখানে cartItems সাধারণ ভ্যারিয়েবল — ঠিকই কাজ করছে,
কিন্তু Angular এটাকে reactive ভাবে ট্র্যাক করছে না।

এখন যদি Signal ব্যবহার করি

import { signal, computed, effect } from '@angular/core';

const cart = signal(0);
const pricePerItem = 500;
const totalPrice = computed(() => cart() * pricePerItem);

// Automatically log when cart updates
effect(() => {
  console.log(`Items: ${cart()}, Total: ${totalPrice()}৳`);
});

function addToCart() {
  cart.update(c => c + 1);
}

addToCart(); // Items: 1, Total: 500৳
addToCart(); // Items: 2, Total: 1000৳
addToCart(); // Items: 3, Total: 1500৳

এখানে effect() ব্যবহার করার ফলে কনসোলে নিজে থেকেই cart count আর total price আপডেট হয়ে প্রিন্ট হচ্ছে — কোনো manual console.log() লাগছে না!

Signal মানে হলো জীবন্ত ভ্যারিয়েবল — মান বদলালে, তার ওপর নির্ভর করা সব জায়গা নিজে থেকেই বদলে যায়।

Written by: Joydip Paul
Web Developer

JavaScript Guess the Output: মজার কিছু ধাঁধা! 🚀

JOYDIP PAUL — Fri, 21 Mar 2025 16:47:41 +0000

JavaScript-এর অদ্ভুত ও মজার কিছু ধাঁধা সমাধান করার জন্য প্রস্তুত? এই ব্লগে কিছু চমৎকার "Guess the Output" প্রশ্ন রয়েছে, যা নতুন ও অভিজ্ঞ ডেভেলপারদের জন্য সমানভাবে চ্যালেঞ্জিং হবে! 🔥

চলুন দেখি আপনি কতটা সঠিক উত্তর দিতে পারেন! 🧠

1️⃣ Array Destructuring

const [, , , a] = [10, 20, 30, 40, 50];
console.log(a);

Output:

Explanation: এখানে প্রথম তিনটি এলিমেন্ট স্কিপ করা হয়েছে, চতুর্থ এলিমেন্ট a তে অ্যাসাইন হয়েছে। তাই আউটপুট 40।

2️⃣ Object Destructuring

const { name } = { age: 25, name: "John" };
console.log(name);

Output:

"John"

Explanation: এখানে name প্রপার্টিটি অবজেক্ট থেকে ডিসট্রাকচার করা হয়েছে এবং এর মান "John"।

3️⃣ Spread Operator with Arrays

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
console.log(newArr);

Output:

[1, 2, 3, 4, 5]

Explanation: স্প্রেড অপারেটর ...arr পুরানো অ্যারেটি কপি করে নতুন অ্যারেতে যোগ করে।

4️⃣ Spread Operator with Objects

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2);

Output:

{ a: 1, b: 2, c: 3 }

Explanation: এখানে obj1-এর কপি obj2 তে তৈরি করা হয়েছে এবং নতুন c: 3 প্রপার্টি যোগ হয়েছে।

7️⃣ Hoisting

console.log(a);
var a = 5;

Output:

undefined

Explanation: var-এর hoisting হয়, কিন্তু এর মান অ্যাসাইনমেন্টের আগে undefined থাকে।

8️⃣ Let vs Var Scope

if (true) {
  let x = 10;
}
console.log(x);

Output:

ReferenceError: x is not defined

Explanation: let ব্লক-স্কোপড হওয়ায় এটি বাইরে এক্সেসযোগ্য নয়।

9️⃣ setTimeout Inside Loop

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}

Output:

3
3
3

Explanation: var ফাংশন-স্কোপড, তাই লুপ শেষে i এর মান 3 হয়ে যায় এবং প্রতিটি setTimeout সেই মান এক্সেস করে।

🔟 Undefined vs Null

let a;
console.log(a, typeof a);
console.log(null, typeof null);

Output:

undefined "undefined"
null "object"

Explanation: undefined হল ভ্যারিয়েবলের ডিফল্ট মান, যেখানে null একটি ইন্টেনশনাল নাথিংনেস। জাভাস্ক্রিপ্টে এটি object টাইপ হিসেবে চিহ্নিত হয়।

শেষ কথা 🎯

এই "Guess the Output" প্রশ্নগুলো JavaScript-এর মজার ও চমকপ্রদ দিকগুলোকে ভালোভাবে বুঝতে সাহায্য করবে। আপনি কটি সঠিকভাবে অনুমান করতে পেরেছেন? কমেন্টে জানাতে ভুলবেন না! 🚀

JavaScript শিখতে থাকুন, কোড লিখতে থাকুন! 💙

Creating Custom SCSS Breakpoints for Responsive Design

JOYDIP PAUL — Fri, 14 Mar 2025 06:03:05 +0000

In modern web development, responsive design ensures a seamless user experience across different screen sizes. SCSS provides a powerful way to manage breakpoints efficiently with mixins. In this blog, we will explore how to create custom SCSS breakpoints using mixins for flexible and maintainable styles.

Why Use Custom SCSS Breakpoints?

Using custom breakpoints in SCSS allows you to:

Maintain cleaner and more readable code.

Apply media queries efficiently without repetition.

Easily adjust styles for different screen sizes by reusing mixins.

Creating the Custom SCSS Breakpoints

We will define two mixins: one for minimum-width breakpoints and another for maximum-width breakpoints.

SCSS Mixin for Min-Width Breakpoints

This mixin applies styles when the viewport is at least a specified width.

@mixin breakpoint-min($width) {
    @media only screen and (min-width: $width) {
        @content;
    }
}

SCSS Mixin for Max-Width Breakpoints

This mixin applies styles when the viewport is at most a specified width.

@mixin breakpoint-max($width) {
    @media only screen and (max-width: $width) {
        @content;
    }
}

Using the SCSS Breakpoint Mixins

Now, let’s see how we can use these mixins to apply responsive styles.

Example: Styling for Mobile and Tablet Screens

@include breakpoint-max(767px) {
    body {
        background-color: lightgray;
    }
}

@include breakpoint-max(991px) {
     body {
        background-color: recebapurple;
    }
}

Example: Applying Min-Width Breakpoints

@include breakpoint-min(1024px) {
    .navbar {
        display: flex;
    }
}

Applies Styles at 1024px and Above – The mixin ensures the styles inside it take effect only when the screen width is 1024px or larger.
Uses a Custom Mixin – Calls breakpoint-min(1024px), which generates a min-width media query.
Enables Flexbox for Navbar – The .navbar gets display: flex, making it a flexbox container for better alignment.
Supports Responsive Design – Helps transition from a mobile-friendly layout to a more structured navbar on larger screens.
Keeps Code Clean & Reusable – Using mixins avoids repetition and makes managing breakpoints easier and more maintainable.

Benefits of Using SCSS Breakpoint Mixins

Reusability: Define breakpoints once and use them throughout your stylesheets.

Readability: Improves code organization and avoids redundant media queries.

Maintainability: Easily modify breakpoints in a single place without affecting multiple files.

Conclusion

Using SCSS mixins for breakpoints enhances your workflow and helps maintain a scalable and well-structured codebase. Implementing custom breakpoint mixins ensures consistency and flexibility in your responsive designs.

Give these mixins a try in your next project and experience the benefits of writing cleaner, more efficient SCSS!

বেম পদ্ধতি (BEM methodology)

JOYDIP PAUL — Wed, 30 Aug 2023 08:59:11 +0000

BEM (Block,Element,Modifier) এই পদ্ধতি ওয়েব ডেভেলপমেন্টে খুবই জনপ্রিয়। এটি আসলে সিএসএস (CSS) এর ক্লাস নেইম লিখার একটি পদ্ধতি যা একটি প্যাটার্নে লিখা হয়। এই প্যাটার্নকেই মূলত বেম পদ্ধতি বলা হয়।

ছোট প্রজেক্টের ক্ষেত্রে বেম ব্যবহার না করলেও বড় প্রজেক্টের ক্ষেত্রে বেম পদ্ধতি ব্যবহার করা গুরুত্বপূর্ন। কারণ বড় প্রজেক্টে মেইন্টেনেবল কোড লিখা হয়। মেইন্টেনেবল কোড বলতে বুঝায় অল্প সময়ে এবং অন্য কোনো কম্পোনেন্টে এফেক্ট ছাড়া সহজেই পরিবর্তন করা যায় এমন কোড। সিএসএস এর ক্ষেত্রে মেইন্টেনেবল কোড লিখার জন্যই বেম পদ্ধতি এত জনপ্রিয়।

বেম পদ্ধতি ব্যবহার করে একটি উদাহরণ দেখা যাক। নিচের এই কার্ড ডিজাইনটি বেম দ্বারা তৈরি করা হয়েছে।

এখানে আমি সিএসএস এর প্রিপ্রসেসর সাস ব্যবহার করেছি।

কোডপেন লিঙ্কঃ https://codepen.io/joydippaul9/pen/ZEmKwzY

<!-- HTML CODE -->

<div class="card">
  <div class="card__image">
    <img src="watch.png" alt="Watch" />
  </div>
  <div class="card__header">
    <h2 class="card__header--title">Smart Watch</h2>
    <h2 class="card__header--price">36$</h2>
  </div>
  <div class="card__description">
      <p class="card__description--text">Watch description</p>
  </div>
  <div class="card__button">
    <button class="card__button--primary">Add to cart</button>
    <button class="card__button--secondary">View details</button>
  </div>
</div>

<!-- SCSS CODE -->

.card {
  &__image {
    img {
    }
  }

  &__header {
    &--title {
    }
    &--price {
    }
  }

  &__description {
      &--text {
      }
  }

  &__button {
    .btn {
    }
    &--primary {
    }
    &--secondary {
    }
  }
}

বেম ব্যবহারের সুবিধাগুলি কী কী?
১। এই মার্কআপ অনেক সহজ। ডেভেলপারদের বুঝতে সময় কম লাগে।
২। এক কম্পনেন্টের কোড অন্য কম্পনেন্টে কোডের সাথে কনফ্লিক্ট তৈরি করে না। নেমিং কনভেনশন এনং নেস্টেড আকারে কোড লিখার জন্য অন্য কোনো কম্পোনেন্টে এফেক্ট ছাড়া সহজেই পরিবর্তন করা যায় ।
৩। ডিবাগিং অনেক দ্রুত করা যায়।
৪। বেম একটি নেমিং কনভেনশন স্ট্রাকচার তৈরি করে, যা টিমের সদস্যদের মধ্যে একটি স্থির নির্দেশনা প্রদান করে।

বেম ব্যবহারের অসুবিধাগুলি কী কী?
১। যখন ব্লক, এলিমেন্ট বা মডিফায়ারগুলি পরিবর্তন করতে হয়, তখন এই পরিবর্তন বারবার এবং এইচটিএমএল এবং সিএসএস ফাইলগুলিতে বিভিন্ন স্থানে পরিবর্তন করতে হতে পারে।

লিনিয়ার সার্চ (Linear Search) ইন জাভাস্ক্রিপ্ট

JOYDIP PAUL — Wed, 28 Jun 2023 17:37:01 +0000

সার্চিং অ্যালগরিদমের মধ্যে সব চেয়ে সহজ অ্যালগরিদম হচ্ছে লিনিয়ার সার্চ অ্যালগরিদম। লিনিয়ার সার্চ মানে কোনো কিছু সরল রৈখিকভাবে খোঁজা।
ধরোন একটি শপিং মলে একটি ব্লকে প্রথম সারিতে ২০ টি দোকান আছে। আপনি ১৬ নাম্বার দোকান খুঁজে বের করতে চান। তাহলে আপনি যদি ১ নাম্বার দোকান থেকে ২০ নাম্বার দোকান পর্যন্ত সরল রৈখিকভাবে খুঁজতে থাকেন তাহলে নিশ্চয়ই একটা সময় পর আপনার টার্গেট ১৬ নাম্বার দোকান খুঁজে পাবেন।
এটাই হল linear search প্রক্রিয়া।

ধরি, আমাদের কাছে একটি অ্যারে আছে

let numbers = [ 10, 12, 3, 52, 1, 25, 58, 65]

এবং আমাদের 25 সংখ্যাটি খুঁজে বের করতে হবে অর্থ্যাৎ,
target value = 25

numbers অ্যারের মধ্যে target value আছে কি না তা আমাদের খুঁজে বের করতে হবে। target value লিস্টের কততম পজিশনে আছে তা জানা নেই। target value লিস্টের প্রথম পজিশনে থাকতে পারে, মধ্যখানেও থাকতে পারে আবার একেবারে শেষ পজিশনেও থাকতে পারে।

numbers অ্যারের মধ্যে একটি লুপ চালাতে হবে। প্রতিবার লুপ চালাকালিন সময়ে কন্ডিশন চেক করতে হবে অ্যারের ইনডেক্স অ্যার টার্গেট ভ্যালূ সমান কিনা। যদি সমান হয় তাহলে সেই ইনডেক্স সংখ্যাটি রিটার্ন করবে, আর সমান না হলে অ্যারের শেষ পর্যন্ত লুপ চালবে।
আসলে লিনিয়ার সার্চ হল, অ্যারের এর প্রথম ডাটা থেকে তুলনা করা হয়। যখনি অ্যারের ডাটা এর ভ্যালুর সাথে টার্গেট ভ্যালূ মিলে যাবে, তখন অ্যারের ইনডেক্স রিটার্ন করবে।

কাজের ধাপ:

১। প্রথমে একটি ফর লুপ তৈরি করতে হবে এবং লুপটি Array.length পর্যন্ত চলবে।
২। লুপ চলাকালীন অ্যারের প্রতিটি ইনডেক্স এর ভ্যালূর সাথে টার্গেট ভ্যালূ সমান হয় কিনা যাচাই করতে হবে। যদি সমান হয়, তাহলে লুপ সেখানেই শেষ হবে, আর যদি সমান না হয়, তাহলে পরবর্তী ইনডেক্সে যাবে। যদি টার্গেট ভ্যালূ অ্যারের শেষ ইনডেক্সে থাকে তাহলে শেষ ইনডেক্স পর্যন্তই লুপ চলবে।

যদি টার্গেট ভ্যালূ অ্যারের মধ্যে একাধিকবার থাকে তাহলে যতগুলো ইন্ডেস্কে টার্গেট ভ্যালূ পাওয়া যাবে সবগুলো ইন্ডেস্ক বের করতে হবে। একে গ্লোবাল লিনিয়ার সার্চ বলা হয়। সেক্ষেত্রে আমাদের একটি এম্পটি অ্যারে নিতে হবে,

let newArray = [];

প্রতিবার ইন্ডেস্ক চেক করার সময় যদি টার্গেট ভ্যালূ পাওয়া যায় তাহলে সেই ইন্ডেস্ক (i) কে নতুন অ্যারের ভিতর পুশ করতে হবে এবং newArray কে রিটার্ন করতে হবে।