Forem: Naym Hossen

JavaScript-এর Hidden Secrets: splice() VS slice()

Naym Hossen — Mon, 09 Dec 2024 06:11:23 +0000

দুই ভাইয়ের গল্প: Splice এবং Slice

এক দেশে ছিলো একটি ছোট্ট গ্রাম, যার নাম "অ্যারে"। এই গ্রামে একদম শান্তিপূর্ণ জীবনযাপন করত অসংখ্য এলিমেন্ট—যারা সংখ্যাও হতে পারে, আবার নামও হতে পারে। তাদের মধ্যে splice এবং slice নামে দুই ভাই ছিল। দুই ভাইয়ের কাজ ছিল প্রোগ্রামারদের সাহায্য করা, তবে তারা দুজনের মধ্যে একেবারে আলাদা। তাদের কাজের ধরন আর স্বভাবও পুরোপুরি ভিন্ন।

তবে, যে প্রোগ্রামাররা তাদের সঠিকভাবে ব্যবহার করত, তারা কোডিংয়ের দুনিয়ায় একধরনের ম্যাজিক অনুভব করত। আজ আপনাদের সেই দুই ভাইয়ের গল্প বলব।

splice: দুষ্টু কিন্তু কার্যকর

ছোট ভাই splice ছিল বেশ দুষ্টু। তার কাজই ছিল যে অ্যারেতে সে যেত, সেটি সম্পূর্ণ বদলে ফেলা। কোনো কিছু কেটে ফেলতে হোক, নতুন কিছু যোগ করতে হোক—splice সবসময় অ্যারেকে পরিবর্তন করতে পছন্দ করত।

একদিনের গল্প

জনি নামের একজন প্রোগ্রামার তার প্রজেক্টে ব্যস্ত ছিল। তার কাছে একটি অ্যারে ছিল:

let friends = ["Alice", "Bob", "Charlie", "David"];

জনি চেয়েছিল এই অ্যারে থেকে Charlie এবং David কে সরিয়ে দিতে। সে splice-কে ডেকে বলল,

“হে splice, তুমি কি ২ নম্বর ইন্ডেক্স থেকে ২টি এলিমেন্ট সরিয়ে দিতে পারবে?”

splice সঙ্গে সঙ্গে উত্তর দিল, “অবশ্যই! তবে মনে রেখো, আমি যখন কাজ করব, তখন তোমার অ্যারে বদলে যাবে।”

জনি রাজি হলো। আর splice ম্যাজিক শুরু করল:

friends.splice(2, 2); // ইন্ডেক্স ২ থেকে ২টি এলিমেন্ট সরাও
console.log(friends); // ["Alice", "Bob"]

জনি খুব খুশি। কিন্তু সে লক্ষ করল, splice তার অ্যারেটিকে বদলে দিয়েছে। ছোট ভাইয়ের এমন দুষ্টুমি দেখে জনি একটু অবাক হলেও মুগ্ধ হলো।

splice-এর আরো দুষ্টুমি

splice শুধু মুছে ফেলাতেই সীমাবদ্ধ নয়। সে নতুন কিছু যোগ করতেও ভালোবাসে।

জনি আবার তাকে ডেকে বলল, “তুমি কি আমার অ্যারেতে নতুন বন্ধু Eve আর Frank যোগ করতে পারো?”

splice বলল, “কোন ইন্ডেক্সে?”

জনি বলল, “২ নম্বর ইন্ডেক্সে।”

friends.splice(2, 0, "Eve", "Frank"); // নতুন দুটি এলিমেন্ট যোগ
console.log(friends); // ["Alice", "Bob", "Eve", "Frank"]

splice ছিল জনির ভরসার জায়গা যখনই তাকে অ্যারে সম্পূর্ণ বদলে ফেলতে হতো।

slice: শান্ত ও নিরীহ

এবার আসি বড় ভাই slice-এর গল্পে। slice ছিল একেবারে শান্ত স্বভাবের। সে কখনোই অ্যারের মূল অংশে হাত দিত না। তার একটাই কাজ—অ্যারের নির্দিষ্ট অংশ কপি করে একটি নতুন অ্যারে তৈরি করা। তার সততার কারণে প্রোগ্রামাররা তাকে খুব পছন্দ করত।

আরেকদিনের গল্প

জনি তার অ্যারে নিয়ে আবার বসেছিল। এবার তার চাওয়া, শুধু Bob এবং Eve এর একটি আলাদা কপি বানানো।

slice বলল, “আমি তোমার কাজ করব, কিন্তু আমি তোমার মূল অ্যারেটিকে একটুও বদলাব না।”

let newFriends = friends.slice(1, 3); // ইন্ডেক্স ১ থেকে ৩ পর্যন্ত কপি (৩ বাদ)
console.log(newFriends); // ["Bob", "Eve"]
console.log(friends);    // ["Alice", "Bob", "Eve", "Frank"] (মূল অ্যারে একই আছে)

slice-এর কাজ দেখে জনি মুগ্ধ হলো। সে ভাবল, যখন অ্যারে কপি করতে হবে, তখন slice-এর বিকল্প নেই।

splice আর slice-এর মূল পার্থক্য

একদিন জনি দুই ভাইকে নিয়ে বসে তাদের কাজের মধ্যে পার্থক্য খুঁজে বের করার চেষ্টা করল। আর সে একটা টেবিল বানাল:

বৈশিষ্ট্য	splice	slice
মূল অ্যারে পরিবর্তন	হ্যাঁ, মূল অ্যারে সরাসরি বদলে যায়।	না, মূল অ্যারে অপরিবর্তিত থাকে।
কাজের ধরন	এলিমেন্ট যোগ করা, মুছে ফেলা, বা উভয়ই।	নির্দিষ্ট অংশ কপি করা।
রিটার্ন ভ্যালু	সরানো হওয়া এলিমেন্টের একটি নতুন অ্যারে।	কপি করা অংশের একটি নতুন অ্যারে।
পরিবর্তনের ক্ষমতা	অ্যারের গঠন পুরোপুরি বদলে দিতে পারে।	শুধু একটি নির্দিষ্ট অংশ কপি করতে পারে।

একটি বাস্তব উদাহরণ

যেন splice আর slice-এর পার্থক্য আরও পরিষ্কার বোঝা যায়, জনি নিচের উদাহরণ লিখে রাখল:

splice দিয়ে কাজ:

let fruits = ["Apple", "Banana", "Cherry", "Date"];
fruits.splice(1, 2, "Blueberry", "Coconut"); // ১ থেকে ২টি সরিয়ে নতুন যোগ
console.log(fruits); // ["Apple", "Blueberry", "Coconut", "Date"]

slice দিয়ে কাজ:

let fruits = ["Apple", "Banana", "Cherry", "Date"];
let newFruits = fruits.slice(1, 3); // ১ থেকে ৩ পর্যন্ত কপি (৩ বাদ)
console.log(newFruits); // ["Banana", "Cherry"]
console.log(fruits);    // ["Apple", "Banana", "Cherry", "Date"] (মূল অ্যারে অপরিবর্তিত)

শেষ কথা

splice এবং slice দুই ভাইয়ের গল্প থেকে একটি বিষয় পরিষ্কার: তাদের ভূমিকা আলাদা।

যদি তুমি অ্যারেকে সরাসরি পরিবর্তন করতে চাও, তবে splice-কে ডাকো।
আর যদি তুমি অ্যারের নির্দিষ্ট অংশ কপি করতে চাও, তবে slice তোমার বিশ্বস্ত সঙ্গী।

তাদেরকে সঠিকভাবে ব্যবহার করতে পারলে তোমার কোড আরও পরিষ্কার, কার্যকর এবং দক্ষ হবে। গল্প শেষ, এবার কোডিং শুরু! 😊

What Are Arrow Functions, and How Do They Make Your Code Cleaner?

Naym Hossen — Sun, 01 Dec 2024 06:57:20 +0000

Ever looked at your JavaScript code and thought, "Why does this function look so messy?" It’s like trying to find your keys in a cluttered drawer—frustrating and unnecessarily complicated. If you've been there, you're not alone. This is where arrow functions come in, offering a cleaner, more concise way to write JavaScript functions. Think of them as the Marie Kondo of your codebase—they spark joy by reducing clutter.

Why Arrow Functions Matter

Arrow functions, introduced in ES6 (ECMAScript 2015), are a new syntax for writing JavaScript functions. They’re not just about saving a few keystrokes—they simplify your code, especially in scenarios involving callbacks, and make it more readable. If you're a developer striving for efficiency, mastering arrow functions is essential.

What Are Arrow Functions?

Arrow functions are a shorthand way to define functions in JavaScript. Here’s a comparison:

Traditional Function:

function add(a, b) {
  return a + b;
}

Arrow Function:

const add = (a, b) => a + b;

Pretty neat, right? Let’s break this down:

The function keyword is replaced by an arrow (=>).
The parentheses (a, b) hold the function's parameters.
The code after the arrow is the function body.

If the function body is a single expression, like a + b above, the return is implicit—no need for the return keyword or braces ({}).

Key Features of Arrow Functions

Conciseness:

Say goodbye to bulky syntax. With arrow functions, even complex operations look cleaner.
Lexical this:

Traditional functions create their own this context, which can lead to confusion when using them in callbacks. Arrow functions don’t have their own this—they inherit it from their surrounding scope.

Example:

class Timer {
  constructor() {
    this.seconds = 0;
    setInterval(() => {
      this.seconds++;
      console.log(this.seconds); // Arrow function inherits 'this'
    }, 1000);
  }
}
new Timer();

Shorter Syntax for Callbacks: They shine in array methods like map, filter, and reduce.

Example:

const numbers = [1, 2, 3, 4];
const squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9, 16]

When (and When Not) to Use Arrow Functions

Best Times to Use:

Callbacks: Functions passed to array methods or event listeners.
Anonymous Functions: When the function doesn’t need a name.
Scenarios Where this Matters: To avoid binding headaches.

When to Avoid:

Object Methods: Arrow functions can’t access this in object methods as expected.
Dynamic Contexts: When you need the this of the current function.

Example of a Pitfall:

const obj = {
  count: 10,
  increment: () => {
    this.count++; // Error: 'this' is undefined
  }
};

Tips for Writing Clean Arrow Functions

Skip Parentheses for Single Parameters:

const greet = name => `Hello, ${name}!`;

Keep It Readable:

If the function body is too complex, stick to the traditional syntax for clarity.
```
const calculate = (a, b) => {
  const sum = a + b;
  return sum * 2;
};
```

Use Default Parameters:

const multiply = (a, b = 1) => a * b;
console.log(multiply(5)); // 5

Spark Joy with Cleaner Code

Arrow functions aren’t just a modern trend; they’re a tool to make your JavaScript code more efficient and elegant. By embracing them, you’ll write less code that does more, stay consistent with modern best practices, and reduce those "Why doesn’t this work?" moments.

Try refactoring one of your projects using arrow functions. Notice how it improves readability and functionality. Have questions or cool examples? Share them in the comments!

By integrating arrow functions into your coding toolkit, you'll take a step closer to mastering JavaScript—and to a codebase that truly sparks joy.

15 Best Chrome Extensions for Devs 🧑‍💻

Naym Hossen — Sat, 30 Nov 2024 07:02:57 +0000

Ever spent hours searching for the right tools to optimize your workflow, only to end up frustrated by choice overload? As developers, our time is precious, and the right Chrome extensions can transform your browser into a productivity powerhouse. From managing code reviews to optimizing search, we’ve compiled the 15 best Chrome extensions to supercharge your dev journey.

Let’s dive into these tools and discover how they can make your life easier, one click at a time.

1. Qodo Merge: AI-Powered Code Reviews & Chat

A lifesaver for developers managing pull requests. Qodo Merge combines AI-driven insights with seamless collaboration tools, making your code reviews faster and smarter.

Key Features:

AI-powered suggestions for cleaner code.
Inline code annotations for team discussions.
Integrated chat for real-time collaboration.

Why it’s a must-have: Skip the nitpicking. Let Qodo Merge suggest the best practices while you focus on building features.

2. Stacks: Your Search Co-Pilot

Stacks transforms your Chrome into a developer-centric search engine. It analyzes your queries and recommends the most relevant results from trusted sources like Stack Overflow and GitHub.

Key Features:

Filters results by relevance to your project type (e.g., React, Python).
Saves your top searches for easy reference.
AI-based recommendations tailored to your dev needs.

Pro Tip: Pair Stacks with Daily.dev for a killer content consumption combo.

3. Daily.dev

Stay updated with the latest in tech without lifting a finger. Daily.dev curates the best blogs, tutorials, and news from top developer resources directly in your browser’s new tab.

Key Features:

Highly customizable content feed.
Tracks trends in languages, frameworks, and tools.
Offline reading mode for uninterrupted learning.

Developer Love: “It’s like having your personal dev news channel every time you open a new tab.”

4. HackerTab.dev

A minimalist alternative to Daily.dev, HackerTab.dev focuses on open-source projects and Hacker News integration. Perfect for developers looking for a more coding-oriented experience.

Key Features:

Fetches trending repositories from GitHub.
Displays Hacker News headlines with quick previews.
Lightweight and blazing fast.

Best For: Developers who thrive on open-source contributions.

5. 10015.io

This Swiss Army knife of an extension packs over 15 tools in one app, including JSON formatter, image converter, and URL encoder/decoder.

Key Features:

Instant access to a range of utilities directly from your browser.
Sleek interface with drag-and-drop functionality.
Free and regularly updated.

Favorite Feature: The in-browser QR code generator—quick and efficient.

6. Clear Cache

Tired of manually clearing cache for specific sites while debugging? This extension simplifies the process to a single click.

Key Features:

Configurable cache-clearing options (cookies, local storage, etc.).
One-click operation—no annoying confirmation pop-ups.
Lightweight and non-intrusive.

Developer’s Delight: Saves precious seconds during testing cycles.

7. Octotree

If GitHub is your second home, Octotree will make navigation a breeze. This extension adds a code tree to GitHub repositories, making it easier to browse large projects.

Key Features:

Code tree navigation for faster file discovery.
Support for private repositories.
Seamless integration with GitHub’s interface.

Pro Tip: Combine Octotree with Qodo Merge for streamlined reviews.

8. Code Copy

Ever wished copying code snippets was easier? Code Copy adds a simple copy button to code blocks on websites like Stack Overflow and GitHub.

Key Features:

Works across major documentation and Q&A sites.
Preserves formatting for clean pasting.
Lightweight and highly efficient.

Why You’ll Love It: No more triple-clicking or miscopied snippets.

9. Window Resizer

Designing for multiple screen sizes? Window Resizer lets you simulate various screen resolutions with a single click.

Key Features:

Customizable presets for different devices (e.g., mobile, tablet).
Handy for responsive design testing.
One-click toggle between resolutions.

Pro Tip: Use it with Chrome’s DevTools for a complete testing suite.

10. Wappalyzer

Curious about what powers a website? Wappalyzer reveals the tech stack behind any site, including frameworks, CMS, and analytics tools.

Key Features:

Detects over 1,000 technologies.
Browser and server-side identification.
Exportable reports for analysis.

Best Use Case: Researching competitors’ tech stacks.

11. WhatFont

A designer’s favorite, WhatFont identifies the fonts used on any webpage in seconds.

Key Features:

Easy-to-use cursor hover for font detection.
Displays font size, family, and weight.
Includes links to purchase or download the fonts.

Why it Stands Out: Perfect for ensuring typography consistency in your projects.

12. JSON Viewer Pro

Debugging JSON data? JSON Viewer Pro prettifies JSON files for easier analysis and navigation.

Key Features:

Collapsible JSON sections for clarity.
Syntax highlighting for better readability.
Dark mode support.

Why Developers Love It: No more messy raw JSON files!

13. Page Ruler Redux

Measure pixel-perfect dimensions on your screen. A handy extension for front-end developers and designers alike.

Key Features:

Drag-and-draw measurement tool.
Guides to ensure alignment and spacing.
Works on any webpage.

Best For: Fine-tuning layouts during QA.

14. Tab Wrangler

Manage tab overload with Tab Wrangler. It automatically closes inactive tabs and saves them for later.

Key Features:

Auto-saves closed tabs to a history for easy recovery.
Customizable inactivity timers.
Reduces memory usage for better performance.

Why it Matters: Keep your browser lean and focused.

15. ColorZilla

ColorZilla is a must-have for picking colors and gradients directly from webpages.

Key Features:

Advanced eyedropper tool for pixel-perfect color sampling.
Color history and palette support.
CSS gradient generator.

Bonus Use: Save color schemes from your favorite websites for inspiration.

With these 15 Chrome extensions, you’ll spend less time wrestling with your tools and more time building incredible projects. Each of these has been handpicked to address specific developer challenges, from debugging to design.

So, why wait? Start experimenting with these extensions today, and let us know your favorites in the comments!

What are your go-to Chrome extensions for development?
Please share your tips and tools below, and let’s grow this list together.

𝐓𝐡𝐞 𝐌𝐢𝐬𝐭𝐚𝐤𝐞𝐬 𝐈 𝐌𝐚𝐝𝐞 𝐀𝐬 𝐚 𝐁𝐞𝐠𝐢𝐧𝐧𝐞𝐫 𝐏𝐫𝐨𝐠𝐫𝐚𝐦𝐦𝐞𝐫

Naym Hossen — Fri, 29 Nov 2024 13:34:25 +0000

Ever stared at hundreds of lines of your own code, wondering how it became such an unmanageable mess? I’ve been there—and it’s a rite of passage for many beginner programmers. From writing code without a plan to endlessly chasing the 'perfect' solution, I’ve made my share of rookie mistakes. But the good news? Each misstep taught me something invaluable.

𝑺𝒆𝒕 𝒕𝒉𝒆 𝑺𝒕𝒂𝒈𝒆, 𝒕𝒐 𝑬𝒙𝒑𝒍𝒂𝒊𝒏 𝒕𝒉𝒆 𝒖𝒏𝒊𝒗𝒆𝒓𝒔𝒂𝒍 𝒋𝒐𝒖𝒓𝒏𝒆𝒚 𝒐𝒇 𝒃𝒆𝒈𝒊𝒏𝒏𝒆𝒓 𝒑𝒓𝒐𝒈𝒓𝒂𝒎𝒎𝒆𝒓𝒔: 𝒆𝒙𝒄𝒊𝒕𝒆𝒎𝒆𝒏𝒕 𝒎𝒊𝒙𝒆𝒅 𝒘𝒊𝒕𝒉 𝒇𝒓𝒖𝒔𝒕𝒓𝒂𝒕𝒊𝒐𝒏.

𝑯𝒊𝒈𝒉𝒍𝒊𝒈𝒉𝒕 𝒘𝒉𝒚 𝒍𝒆𝒂𝒓𝒏𝒊𝒏𝒈 𝒇𝒓𝒐𝒎 𝒄𝒐𝒎𝒎𝒐𝒏 𝒎𝒊𝒔𝒕𝒂𝒌𝒆𝒔 𝒆𝒂𝒓𝒍𝒚 𝒄𝒂𝒏 𝒍𝒆𝒂𝒅 𝒕𝒐 𝒇𝒂𝒔𝒕𝒆𝒓 𝒈𝒓𝒐𝒘𝒕𝒉 𝒂𝒏𝒅 𝒃𝒆𝒕𝒕𝒆𝒓 𝒉𝒂𝒃𝒊𝒕𝒔.

𝟏. 𝐖𝐫𝐢𝐭𝐢𝐧𝐠 𝐂𝐨𝐝𝐞 𝐖𝐢𝐭𝐡𝐨𝐮𝐭 𝐏𝐥𝐚𝐧𝐧𝐢𝐧𝐠
Jumping straight into coding without thinking through requirements. Like, I once started building a to-do list app without sketching out the features. By the time I added due dates, priorities, and categories, the codebase was spaghetti.

𝑆𝑡𝑎𝑟𝑡 𝑤𝑖𝑡ℎ 𝑎 𝑐𝑙𝑒𝑎𝑟 𝑝𝑙𝑎𝑛. 𝑇𝑜𝑜𝑙𝑠 𝑙𝑖𝑘𝑒 𝑓𝑙𝑜𝑤𝑐ℎ𝑎𝑟𝑡𝑠 𝑜𝑟 𝑒𝑣𝑒𝑛 𝑎 𝑠𝑖𝑚𝑝𝑙𝑒 𝑛𝑜𝑡𝑒𝑝𝑎𝑑 𝑐𝑎𝑛 ℎ𝑒𝑙𝑝 𝑦𝑜𝑢 𝑚𝑎𝑝 𝑦𝑜𝑢𝑟 𝑙𝑜𝑔𝑖𝑐.

𝟐. 𝐈𝐠𝐧𝐨𝐫𝐢𝐧𝐠 𝐃𝐨𝐜𝐮𝐦𝐞𝐧𝐭𝐚𝐭𝐢𝐨𝐧
Skipping docs and relying on Stack Overflow for quick fixes. Documentation isn't just dry text—it’s your secret weapon for understanding the bigger picture of tools and libraries.

𝐷𝑒𝑑𝑖𝑐𝑎𝑡𝑒 15 𝑚𝑖𝑛𝑢𝑡𝑒𝑠 𝑑𝑎𝑖𝑙𝑦 𝑡𝑜 𝑠𝑘𝑖𝑚 𝑡ℎ𝑟𝑜𝑢𝑔ℎ 𝑑𝑜𝑐𝑠 𝑜𝑓 𝑎 𝑙𝑎𝑛𝑔𝑢𝑎𝑔𝑒 𝑜𝑟 𝑙𝑖𝑏𝑟𝑎𝑟𝑦 𝑦𝑜𝑢 𝑢𝑠𝑒.

𝟑. 𝐎𝐯𝐞𝐫𝐞𝐧𝐠𝐢𝐧𝐞𝐞𝐫𝐢𝐧𝐠 𝐄𝐯𝐞𝐫𝐲𝐭𝐡𝐢𝐧𝐠
Trying to build the perfect app with the “coolest” tools. I once used a complex state management library for a project that could’ve been handled with simple React hooks. It was like using a tank to crack a walnut.

𝑆𝑡𝑎𝑟𝑡 𝑠𝑖𝑚𝑝𝑙𝑒, 𝑡ℎ𝑒𝑛 𝑠𝑐𝑎𝑙𝑒. 𝙱𝚛𝚎𝚊𝚔 𝚙𝚛𝚘𝚋𝚕𝚎𝚖𝚜 𝚒𝚗𝚝𝚘 𝚜𝚖𝚊𝚕𝚕𝚎𝚛 𝚌𝚑𝚞𝚗𝚔𝚜 𝚝𝚘 𝚊𝚟𝚘𝚒𝚍 𝚘𝚟𝚎𝚛𝚠𝚑𝚎𝚕𝚖.

𝚄𝚜𝚎 𝚝𝚘𝚘𝚕𝚜 𝚕𝚒𝚔𝚎 𝙴𝚂𝙻𝚒𝚗𝚝 𝚊𝚗𝚍 𝙿𝚛𝚎𝚝𝚝𝚒𝚎𝚛 𝚝𝚘 𝚖𝚊𝚒𝚗𝚝𝚊𝚒𝚗 𝚌𝚘𝚍𝚎 𝚚𝚞𝚊𝚕𝚒𝚝𝚢.

𝙲𝚘𝚕𝚕𝚊𝚋𝚘𝚛𝚊𝚝𝚎 𝚠𝚒𝚝𝚑 𝚘𝚝𝚑𝚎𝚛𝚜 (𝚘𝚛 𝚎𝚟𝚎𝚗 𝚢𝚘𝚞𝚛 𝚏𝚞𝚝𝚞𝚛𝚎 𝚜𝚎𝚕𝚏) 𝚋𝚢 𝚠𝚛𝚒𝚝𝚒𝚗𝚐 𝚌𝚕𝚎𝚊𝚛 𝚌𝚘𝚖𝚖𝚎𝚗𝚝𝚜.

Use tools like ESLint and Prettier to maintain code quality. Collaborate with others (or even your future self) by writing clear comments. The universal nature of making mistakes as a beginner. Emphasize that growth comes from learning and reflecting on them.

𝑾𝒉𝒂𝒕 𝒘𝒆𝒓𝒆 𝒚𝒐𝒖𝒓 𝒃𝒊𝒈𝒈𝒆𝒔𝒕 𝒔𝒕𝒓𝒖𝒈𝒈𝒍𝒆𝒔 𝒂𝒔 𝒂 𝒃𝒆𝒈𝒊𝒏𝒏𝒆𝒓 𝒑𝒓𝒐𝒈𝒓𝒂𝒎𝒎𝒆𝒓? 𝑳𝒆𝒕’𝒔 𝒔𝒘𝒂𝒑 𝒔𝒕𝒐𝒓𝒊𝒆𝒔 𝒊𝒏 𝒕𝒉𝒆 𝒄𝒐𝒎𝒎𝒆𝒏𝒕𝒔!

Include rhetorical questions to engage readers, e.g., “Sound familiar?” Think of a flowchart as a visual map for your app logic.

HTML

Naym Hossen — Tue, 26 Nov 2024 11:30:07 +0000

______ 𝐇𝐓𝐌𝐋 ______

ইন্টারনেট এর বিশাল জগৎ আমরা প্রতিদিন ব্যাবহার করি, কিন্তু কখনো চিন্তা করে দেখেছেন এই ওয়েবসাইট গুলো কিভাবে কাজ করে? এর ভিওি বা কাঠামো আছে কি না!

এতো বড়ো বড়ো [ 𝑮𝒐𝒐𝒈𝒍𝒆, 𝑭𝒂𝒄𝒆𝒃𝒐𝒐𝒌, 𝑿] ওয়েবসাইট কি এমনি এমনি চলে অবশ্যই এর একটা কাঠামো বা স্ট্রাকচার আছে, এই স্ট্রাকচার বানানোর কাজই করে মুলত 𝐇𝐓𝐌𝐋

চলুন 𝐇𝐓𝐌𝐋 সম্পর্কে কিছুটা জানার চেস্টা করি!

কোন কিছু শুনলে প্রথমেই প্রশ্ন আসে জিনিসটা কি?

𝐇𝐓𝐌𝐋 কি?

এর পূর্ণরূপ হলো - 𝑯𝒚𝒑𝒆𝒓𝑻𝒆𝒙𝒕 𝑴𝒂𝒓𝒌𝒖𝒑 𝑳𝒂𝒏𝒈𝒖𝒂𝒈𝒆 - যদিও এটি কোন ভাষা না তারপরও এর নাম এর শেষে Language শব্দ আছে

যদিও 𝑯𝑻𝑴𝑳 শেখা অনেক সহজ, কিন্তু এর একটি ওয়েব সাইট বানানোতে এর গুরুত্ব অপরিসীম। একটু আগেই বল্লাম ভুলে গেলে হয়! 𝑯𝑻𝑴𝑳 হলো ওয়েব সাইট বানানোর ভিত্তি (যেমন, কামাড় এর ভিত্তি হলো হাতুড়ি)। এটি ব্রাউজার কে বলে দেয় ওয়েবসাইট এর পেজে কিভাবে ওয়েবসাইট এর কন্টেন্ট সাজানো হবে।

𝐇𝐲𝐩𝐞𝐫𝐓𝐞𝐱𝐭

এটি ওয়েব সাইট এর লিংক ওর পেজ এর মধ্যে কানেকশন ঘটায়

𝐌𝐚𝐫𝐤𝐮𝐩 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞

এটি মূলত বিভিন্ন ট্যাগ (যেমন, 𝒉1, 𝒉2, 𝒑, 𝒑𝒂𝒓𝒂𝒈𝒓𝒂𝒑𝒉, 𝒆𝒕𝒄.) এর মাধ্যমে ডকুমেন্ট এর কনটেন্ট নির্ধারণ করতে কাজ করে।

১৯৮৯ সালে টিম বার্নার্স-লি 𝐂𝐄𝐑𝐍 - এ কাজ করার সময় প্রথম ওয়ার্ল্ড ওয়াইড ওয়েব (𝚆𝚆𝚆) ওয়েব সিস্টেমের ধারণা উপস্থাপন করেন।

তিনি মূলত রিসার্চ ডকুমেন্টস সহজে শেয়ার করার জন্য একটা সহজ পদ্ধতি বের করার চেষ্টা করতেছিলেন, তার এই চেস্টা থেকেই জন্ম নেয় HTML এর।

১৯৯০ সালে তিনি প্রথম ওয়েব ব্রাউজার এবং সার্ভার তৈরি করেন। একই সময়ে HTML এর প্রথম সংস্করণ ও বের করেন, তখন মাত্র ১৮ টি ট্যাগ ছিল HTML এর মধ্যে।

𝐇𝐓𝐌𝐋 এর গুরুত্ব নিয়ে বলতে গেলে,

আগেই বলেছি এটি হলো ওয়েব সাইট এর কাঠামো। যেমন, একটি খালি ঘরের কাঠামোর মতো, এটি ছাড়া ওয়েবসাইট বানানো সম্ভব নয়। আর এই ওয়েব সাইট কে ডায়নামিক ও সুন্দর ডিজাইন করতে Javascript and css ব্যাবহার করা হয়।

𝐇𝐓𝐌𝐋 শিখতে অনেক সহজ, এটা শেখার জন্য প্রোগ্রামিং এর কোন লজিক শিখতে হয় না, কয়েকটা ট্যাগ মনে রাখলেই হয়।

কন্টেন্ট অনুযায়ী সঠিক ট্যাগ ব্যাবহার করতে পারলে সহজেই ওয়েব সাইট 𝑺𝑬𝑶 ফ্রেন্ডলি হয়।

আপনি বাংলায় HTML শিখতে চাইলে 𝒘𝒆𝒃𝒄𝒐𝒂𝒄𝒉𝒃𝒅 এর ওয়েবসাইট ভিজিট করতে পারেন, তাছাড়া ইউটিউব এও প্রচুর কন্টেন্ট দেওয়া আছে যার কনটেন্ট ভালো লাগে দেখে শিখতে পারেন।

HTML হলো একজন প্রোগ্রামার এর প্রোগ্রামিং শেখা এর শুরুর ধাপ। এটি যতই ভালো ভাবে আয়ও করবেন, আপনার জার্নি ততই সহজ হবে।

𝑪𝑺𝑺, 𝑱𝒂𝒗𝒂𝒔𝒄𝒓𝒊𝒑𝒕 অথবা অন্য যেকোনো রিলেটেড স্কিল শেখার আগে HTML অবশ্যই ভালো ভাবে শিখে নেওয়া জরুরি।

কোন ভুল থাকলে ধরিয়ে দিবেন। কোন কিছু জানার থাকলে কমেন্ট করতে পারেন।

ধন্যবাদ।

𝐇𝐚𝐩𝐩𝐲 𝐂𝐨𝐝𝐢𝐧𝐠.

htmlhistory #webdevelopment #InternetEvolution #learnhtml #WebDesignBasics

𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 — এ কেন [ ] == ![ ] এর ফলাফল 𝐭𝐫𝐮𝐞?

Naym Hossen — Mon, 25 Nov 2024 04:07:43 +0000

𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 — এ কেন [ ] == ![ ] এর ফলাফল 𝐭𝐫𝐮𝐞?

সহজ কথায় বলতে গেলে,

জাভাস্ক্রিপ্ট টাইপ 𝒄𝒐𝒏𝒗𝒆𝒓𝒔𝒂𝒕𝒊𝒐𝒏 ও 𝒄𝒐𝒆𝒓𝒄𝒊𝒐𝒏 নিয়ে কাজ করে বিধায় [ ] ==! [ ] রিটার্ন করে।

তাহলে এখন কথা হলো 𝐜𝐨𝐧𝐯𝐞𝐫𝐬𝐚𝐭𝐢𝐨𝐧 ও 𝐜𝐨𝐞𝐫𝐜𝐢𝐨𝐧 কি?

জাভাস্ক্রিপ্ট এ conversation ও coercion এর কাজ হলো, এক ধরনের ডেটা টাইপ থেকে অন্য ডেটা টাইপ এ পরিবর্তন হওয়া।

𝐂𝐨𝐧𝐯𝐞𝐫𝐬𝐢𝐨𝐧
যখন প্রোগ্রামার ইচ্ছাকৃতভাবে এক ডেটা টাইপ থেকে অন্য ডেটা টাইপ এ পরিবর্তন করে তখন এটিকে explicit conversion অথবা টাইপ কাস্টিং ও বলা হয়।

যেমন,
let num = “123”;
let convertedNum = Number(num);

“এটি স্ট্রিং “123” কে নম্বর 123-এ রূপান্তর করে”

𝐂𝐨𝐞𝐫𝐜𝐢𝐨𝐧
কোয়ের্কিং তখন ঘটে, যখন স্বয়ংক্রিয় ভাবে javascript এক ধরনের ডেটা টাইপ থেকে অন্য ডেটা টাইপ এ পরিবর্তন করে। এটিকে 𝒊𝒎𝒑𝒍𝒊𝒄𝒊𝒕 𝒄𝒐𝒏𝒗𝒆𝒓𝒔𝒊𝒐𝒏 ও বলা হয়।

যেমন,
console.log(5 + “10”);
answer: “510” |> (সংখ্যা 5 কে স্ট্রিং-এ রূপান্তর করা হয়েছে)

সাধারণত 𝐜𝐨𝐞𝐫𝐜𝐢𝐨𝐧 দুই ধরনের হয়,

𝐓𝐫𝐮𝐭𝐡𝐲 এবং 𝐅𝐚𝐥𝐬𝐲 ভ্যালু

যেমন,
“”, 0, null, undefined, NaN এইসব হলো falsy ভ্যালু।

বাকিসব ভ্যালু হলো truthy।

𝐄𝐪𝐮𝐚𝐥𝐢𝐭𝐲 𝐂𝐨𝐞𝐫𝐜𝐢𝐨𝐧

এইটা হলো == অপারেটর, এটা দুই ভ্যালুর মধ্যে তুলনা করতে ব্যাবহার করা হয়

— — — — — —
— — — — — —

[🧠] ==! [🧠] কেন true রিটার্ন করে চলুন পেট ফোড়া করে দেখা যাক,

![ ] কেন false হয় 🤷‍♂️

[ ] এলো একটি ফাঁকা অ্যারে, এটি একটি ট্রুথি ভ্যালু।

অপরদিকে ! এই অপারেটর কাজ করে বেকু মেশিন এর মতো সবকিছু উল্টায় ফালায়, ফলে এর মান হয় false,

এতে বোঝা যায়! [ ] এর মান হলো false

আবার [ ] == false কেন হয় 🤷‍♂️

যখন == ব্যাবহার করা হয়, তখন javascript এর নিয়ম অনুযায়ী কনভার্সন ঘটে,

আর আমরা আগেই দেখেছি যে কনভার্সন হলে এক ডেটা টাইপ থেকে অন্য ডেটা টাইপ এ পরিবর্তন হয়,

ফলে এইখানে [ ] এবং false, একই টাইপ এ রুপান্তর হয়ে যায়।

একইভাবে false কে number টাইপ এ রুপান্তর করলে তা 0 হয়ে যায়।

এখন যদি ফাঁকা [ ] কে নম্বর এ পরিবর্তন করা হয়, তখন এটি 0 হয়ে যায়

আর 0 == 0 যদি তুলনা করা হয় তখন আর কনভার্সন করার দরকার পরে না দুইটাই নম্বর তাই এর মান true

তাহলে দেখা যায়, [ ] == ![ ] true হয়

জাভাস্ক্রিপ্ট ভেতরে ভেতরে [ ] কে কনভার্সন করে 0 বানায়, আর আমারা যানি ![ ] এর মান false, যা পরে কনভার্সন হয়ে 0 তে রুপান্তর হয়ে যায়। এতে দুইপাশের মান য়ে যায় 0,

আমরা আগেই দেখেছি যে Number একই হলে conversion এর দরকার পরে না, তাই 0 == 0 tru হয়ে যায়।

মূলত এটি টাইপ কনভার্সন এর একটি উদাহরণ।

এখানে ভেতরে ভেতরে javascript নিজে নিজে ডেটা টাইপ পরিবর্তন করে নেয়।

কোন কিছু ভুল হলে কমেন্টে জানিয়ে দিতে পারেন, আমি একজন Student মাত্র শিখে নিবো।
ধন্যবাদ

JavaScriptTips #WebDevelopment #CodingKnowledge #LearnProgramming #DevCommunity

A Guide to MongoDB Operators and Aggregations

Naym Hossen — Tue, 12 Nov 2024 03:46:34 +0000

Working with MongoDB, you'll often encounter situations where you need to go beyond basic CRUD operations to filter, transform, and manipulate data in more complex ways. MongoDB's rich set of operators and aggregation framework allows developers to implement powerful queries and data transformations that meet a variety of business needs. In this post, we'll explore MongoDB operators and dive into aggregation pipelines with practical examples.

MongoDB Aggregation Framework
MongoDB's aggregation framework is like a data processing pipeline, where you can define multiple stages that transform and summarize data as it flows through. It’s ideal for performing complex transformations directly within MongoDB, reducing the need to retrieve large datasets and perform processing on the client side.

Let's look at some common aggregation stages, using examples from the provided code.

Example: Age-Based Grouping with $bucket, $sort, and $limit

In this example, we’re grouping documents based on age, dividing them into buckets with age boundaries. We then sort by count (in descending order) and limit the output to the top four groups.

const result = await eiaDataCollection
  .aggregate([
    {
      $bucket: {
        groupBy: "$age", // Grouping field
        boundaries: [20, 40, 60, 80],
        default: "80 up peoples",
        output: {
          count: { $sum: 1 },
          availablePersons: { $push: "$$ROOT" }
        }
      }
    },
    { $sort: { count: -1 } },
    { $limit: 4 },
    { $project: { count: 1 } }
  ])
  .toArray();

$bucket: Divides documents into groups, creating "buckets" based on age.
$sort: Orders groups by the count field.
$limit: Limits the number of results to four.
$project: Specifies fields to include in the final output.

Example: Using $group and $unwind

To explore interests by age, this example first unwinds the interests array in each document, then groups by age and aggregates interests per age.

const result = await eiaDataCollection
  .aggregate([
    { $unwind: "$interests" },
    { $group: { _id: "$age", interestPerAge: { $push: "$interests" } } }
  ])
  .toArray();

$unwind: Expands the interests array into individual documents for easier grouping.
$group: Groups by age and aggregates interests into an array per age group.

Using $match to Filter Data
If we want only female mentors under 30, we can use $match followed by $project to specify only the fields we need.

const result = await eiaDataCollection
  .aggregate([
    { $match: { gender: "Female", age: { $lt: 30 } } },
    { $project: { name: 1, gender: 1 } }
  ])
  .toArray();

$match: Filters documents based on gender and age.
$project: Limits the fields in the output to name and gender.

MongoDB Operators in Action

Operators like $set, $push, and $inc are crucial when you need to update documents based on conditions.

Adding a Skill with $push

To add a new skill to a mentor's profile, use $push. This operation appends an object to the skills array.

const result = await eiaDataCollection.updateOne(
  { email: "amccurry3@cnet.com" },
  {
    $push: {
      skills: {
        name: "Python",
        level: "Beginner",
        isLearning: true
      }
    }
  }
);

Updating a Salary with $inc

To increment a field value, such as a mentor's salary, use $inc. This is useful for cases like applying salary adjustments.

const result = await eiaDataCollection.updateOne(
  { _id: new ObjectId("6406ad63fc13ae5a40000065") },
  { $inc: { salary: 37 } }
);

Summary
MongoDB’s aggregation framework and operators are versatile tools for data transformation, making it possible to do advanced processing without needing to transfer data to the client side. Aggregations like $group, $bucket, $sort, and $unwind make it possible to reshape your data, while operators such as $push and $inc provide powerful ways to manipulate document fields directly. Understanding and applying these techniques can help you streamline data handling and make your MongoDB applications more efficient.

Why Are Type Guards Necessary? Exploring Different Types and Their Use Cases

Naym Hossen — Fri, 08 Nov 2024 04:39:50 +0000

Why Are Type Guards Necessary? Exploring Different Types and Their Use Cases

In TypeScript, type guards play an essential role in making the codebase more reliable, and developer-friendly. They help ensure type safety by allowing developers to narrow down types, which helps in runtime errors and makes code easier to understand and easy maintain.

What are Type Guards?

Type guards are expressions od functions that perform runtime checks on types, ensuring that values meet specific criteria before they are processed further. They help maintain type safety, allowing developers to handle values appropriately.

Why Are Type Guards Necessary?

In JavaScript, you often encounter values that could have multiple types, like a function that returns either a string or number. Without type guards, TypeScript wouldn’t be able to determine the exact type, leading to potential runtime errors and incorrect behavior. Type guards allow you to check the type of a value at runtime, helping TypeScript to narrow types and provide more accurate type-checking.

Common Types of Type Guards and Their Use Cases

1. typeof Type Guards

Use Case: Basic type checking for primitive types.
Example:

function printValue(value: string | number) {
  if (typeof value === "string") {
    console.log(`String value: ${value.toUpperCase()}`);
  } else {
    console.log(`Number value: ${value.toFixed(2)}`);
  }
}

Explanation: typeof is effective with primitive types (string, number, boolean). It allows the function to handle string and number types differently.

2. Custom Type Guards (is Keyword)

Use Case: For complex logic, checking custom shapes or interfaces.

Example:

 interface Square {
    side: number;
  }
  interface Circle {
    radius: number;
  }

  function isSquare(shape: Square | Circle): shape is Square {
    return (shape as Square).side !== undefined;
  }

  function calculateArea(shape: Square | Circle) {
    if (isSquare(shape)) {
      return shape.side * shape.side;
    } else {
      return Math.PI * shape.radius * shape.radius;
    }
  }

Explanation: Custom type guards let you define functions that check specific attributes to determine the type. Here, isSquare checks the presence of the side property.

3. in Operator Type Guards

Use Case: Checking if an object has a specific property.
Example:

 interface Car {
    drive(): void;
  }
  interface Boat {
    sail(): void;
  }

  function move(vehicle: Car | Boat) {
    if ("drive" in vehicle) {
      vehicle.drive();
    } else {
      vehicle.sail();
    }
  }

Explanation: The in operator checks for the existence of a property, helping TypeScript understand the type and allowing access to the relevant methods.

Conclusion

Type guards are a powerful feature in TypeScript that enable precise type-checking, reduce errors, and improve code readability and maintainability. By leveraging typeof, instanceof, custom type guards, and the in operator, you can handle complex types safely and effectively in TypeScript projects.

Mastering Advanced TypeScript: A Deep Dive into Dynamic Types, Asynchronous Programming, and Utility Types

Naym Hossen — Sun, 03 Nov 2024 10:31:29 +0000

As I continue to deepen my expertise in TypeScript, I’m excited to share some powerful concepts I recently explored. These advanced TypeScript features are game-changers when it comes to building scalable, resilient, and type-safe applications. In this post, I’ll break down each concept, provide examples, and discuss how they can elevate your coding skills.

1. Dynamic Flexibility with `keyof` and Generic Constraints

Using keyof with generics allows you to define types that depend on the properties of another type. This approach enables dynamic typing while ensuring type safety.

Example:

Imagine you’re building a utility to access properties on an object. Here’s how you could implement this with keyof:

typescript
Copy code
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const person = { name: "Alice", age: 25 };
const name = getProperty(person, "name"); // Type-safe access

By extending K extends keyof T, we’re making sure that only keys within T are allowed. This prevents accidental access to non-existent properties, helping maintain code accuracy.

2. Asynchronous TypeScript: Keeping Promises Type-Safe

Handling asynchronous functions with TypeScript is crucial for ensuring predictable and safe operations. TypeScript makes it easy to type asynchronous code with Promise<T> types, enabling clear expectations around what each function returns.

Example:

Here’s a simple example of fetching data with type safety:

typescript
Copy code
async function fetchData(url: string): Promise<{ data: string }> {
  const response = await fetch(url);
  return await response.json();
}

fetchData("https://api.example.com/data")
  .then((result) => console.log(result.data));

By defining the return type as Promise<{ data: string }>, TypeScript ensures that result.data is available and correctly typed, reducing the likelihood of runtime errors.

3. Conditional Types for Dynamic Type Logic

Conditional types allow you to build types that adapt based on conditions. This feature is highly useful in complex applications where types need to evolve based on different scenarios.

Example:

Here’s a simple type that returns true or false based on whether the type is string:

typescript
Copy code
type IsString<T> = T extends string ? true : false;

type Test1 = IsString<string>; // true
type Test2 = IsString<number>; // false

Conditional types empower TypeScript to infer types conditionally, making it possible to build highly adaptive code structures. This is particularly helpful when working with complex data transformations or API responses.

4. Mapped Types with Dynamic Generics

Mapped types allow you to create new types by transforming properties in another type, while dynamic generics enable these transformations to be flexible. This combination is powerful for structuring large-scale applications where data structures need to adapt dynamically.

Example:

Suppose you want a version of a type where all properties are optional:

typescript
Copy code
type Partial<T> = {
  [P in keyof T]?: T[P];
};

interface Person {
  name: string;
  age: number;
}

type PartialPerson = Partial<Person>;
// Equivalent to { name?: string; age?: number }

Mapped types can take any type and transform it, enabling scalable type structures that can be customized on the fly.

5. Essential Utility Types: `Pick` and `Omit`

TypeScript provides built-in utility types like Pick and Omit to help you quickly modify existing types without reinventing the wheel. These are invaluable for code modularity and reusability.

Pick: Creates a new type by selecting specific properties from an existing type.

typescript
Copy code
type PersonName = Pick<Person, "name">; // { name: string }

Omit: Creates a new type by excluding specific properties from an existing type.

typescript
Copy code
type PersonWithoutAge = Omit<Person, "age">; // { name: string }

By using Pick and Omit, you can create tailored versions of types for different contexts, enhancing reusability and reducing redundant code.

6. Interfaces and Type Assertions

Interfaces in TypeScript are great for defining the structure of objects and are especially useful when dealing with complex data. Type assertions are useful when you need to tell TypeScript to treat a variable as a different type, though they should be used sparingly.

Example:

Here’s a quick example of defining an interface and using an assertion:

typescript
Copy code
interface Car {
  brand: string;
  model: string;
}

const car = {} as Car;
car.brand = "Toyota";
car.model = "Corolla";

Interfaces make the structure of your objects clear and predictable, while assertions provide flexibility when you’re certain of the type of a value, despite TypeScript’s inference.

7. Generics for Reusable Types, Interfaces, and Functions

Generics allow you to write flexible, reusable components that can adapt to various types, making them a cornerstone of TypeScript. By defining types that work with a variety of types, generics make your code more adaptable.

Example:

Here’s a generic function for creating an array from multiple inputs:

typescript
Copy code
function makeArray<T>(...elements: T[]): T[] {
  return elements;
}

const numbers = makeArray<number>(1, 2, 3); // [1, 2, 3]
const strings = makeArray<string>("a", "b", "c"); // ["a", "b", "c"]

In this function, <T> acts as a placeholder for any type passed into makeArray, allowing it to work with numbers, strings, or any other type.

Why Advanced TypeScript Concepts Matter

These advanced TypeScript concepts have completely transformed the way I approach writing and organizing my code. By leveraging features like keyof constraints, conditional types, and mapped types, I’m able to write highly adaptive, resilient code that scales as applications grow.

If you’re on a similar journey or have experience with these TypeScript features, I’d love to hear your thoughts! Feel free to share insights, tips, or questions in the comments. Together, we can build cleaner, smarter, and more scalable applications.

Happy coding! 🎉

Diving into TypeScript: My First Day of Learning!

Naym Hossen — Fri, 01 Nov 2024 02:02:18 +0000

Today, I started with TypeScript fundamentals and explored how it makes JavaScript development safer and more powerful. Here’s a breakdown of what I covered and some code examples!

1. Reference Types and Literal Types

Readonly & Optional Properties: These are great for ensuring certain values stay fixed, while optional properties provide flexibility.

type Person = {
  readonly name: string;  // Name cannot be changed
  age: number;
  isMarried?: boolean;  // Optional property
};

const person: Person = { name: "John Doe", age: 30 };
// person.name = "Jane Doe";  // Error: Cannot modify readonly property

2. Typed Functions

Function with Explicit Types: Ensures functions return the correct type, enhancing code predictability.

function sum(num1: number, num2: number): number {
  return num1 + num2;
}

// Arrow Function
const addNum = (add1: number, add2: number): number => add1 + add2;

3. Arrays and Typed Array Methods

Typed Arrays: TypeScript enforces type safety in arrays, making methods like .map() safer.

const array: number[] = [1, 3, 2, 4, 5, 6];
const newArray: number[] = array.map((ele: number): number => ele * ele);
console.log(newArray);  // [1, 9, 4, 16, 25, 36]

4. Spread, Rest, and Destructuring Operators

Spread & Rest Operators make handling dynamic data smooth, while destructuring simplifies assignments.

const [first, ...rest] = array;
console.log(first);  // 1
console.log(rest);   // [3, 2, 4, 5, 6]

5. Type Aliases and Union Types

Type Aliases: Creating reusable types for better code structure.

Union Types: Allowing variables to hold multiple types, adding flexibility without sacrificing safety.

type ID = string | number;

let userId: ID = 101;  // Could be a string or a number
userId = "A102";

6. Conditional Types and Operators (`?`, `??`, `|`, `&&`)

Using optional chaining (?) and nullish coalescing (??) operators help keep the code clean and avoid unnecessary null checks.

function greet(name?: string) {
  const displayName = name ?? "Guest";
  console.log(`Hello, ${displayName}!`);
}

greet();           // Hello, Guest!
greet("Naym");  // Hello, Naym!

Starting with TypeScript has been an eye-opener in terms of writing clean, type-safe code! Excited to keep building on this foundation. 💪🔥

Forem: Naym Hossen

JavaScript-এর Hidden Secrets: splice() VS slice()

দুই ভাইয়ের গল্প: Splice এবং Slice

splice: দুষ্টু কিন্তু কার্যকর

একদিনের গল্প

splice-এর আরো দুষ্টুমি

slice: শান্ত ও নিরীহ

আরেকদিনের গল্প

splice আর slice-এর মূল পার্থক্য

একটি বাস্তব উদাহরণ

splice দিয়ে কাজ:

slice দিয়ে কাজ:

শেষ কথা

What Are Arrow Functions, and How Do They Make Your Code Cleaner?

Why Arrow Functions Matter

What Are Arrow Functions?

Key Features of Arrow Functions

When (and When Not) to Use Arrow Functions

Best Times to Use:

When to Avoid:

Tips for Writing Clean Arrow Functions

Spark Joy with Cleaner Code

15 Best Chrome Extensions for Devs 🧑‍💻

1. Qodo Merge: AI-Powered Code Reviews & Chat

2. Stacks: Your Search Co-Pilot

3. Daily.dev

4. HackerTab.dev

5. 10015.io

6. Clear Cache

7. Octotree

8. Code Copy

9. Window Resizer

10. Wappalyzer

11. WhatFont

12. JSON Viewer Pro

13. Page Ruler Redux

14. Tab Wrangler

15. ColorZilla

𝐓𝐡𝐞 𝐌𝐢𝐬𝐭𝐚𝐤𝐞𝐬 𝐈 𝐌𝐚𝐝𝐞 𝐀𝐬 𝐚 𝐁𝐞𝐠𝐢𝐧𝐧𝐞𝐫 𝐏𝐫𝐨𝐠𝐫𝐚𝐦𝐦𝐞𝐫

HTML

htmlhistory #webdevelopment #InternetEvolution #learnhtml #WebDesignBasics

𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 — এ কেন [ ] == ![ ] এর ফলাফল 𝐭𝐫𝐮𝐞?

JavaScriptTips #WebDevelopment #CodingKnowledge #LearnProgramming #DevCommunity

A Guide to MongoDB Operators and Aggregations

Why Are Type Guards Necessary? Exploring Different Types and Their Use Cases

Mastering Advanced TypeScript: A Deep Dive into Dynamic Types, Asynchronous Programming, and Utility Types

1. Dynamic Flexibility with keyof and Generic Constraints

Example:

2. Asynchronous TypeScript: Keeping Promises Type-Safe

Example:

3. Conditional Types for Dynamic Type Logic

Example:

4. Mapped Types with Dynamic Generics

Example:

5. Essential Utility Types: Pick and Omit

6. Interfaces and Type Assertions

Example:

7. Generics for Reusable Types, Interfaces, and Functions

Example:

Why Advanced TypeScript Concepts Matter

Diving into TypeScript: My First Day of Learning!

1. Reference Types and Literal Types

2. Typed Functions

3. Arrays and Typed Array Methods

4. Spread, Rest, and Destructuring Operators

5. Type Aliases and Union Types

6. Conditional Types and Operators (?, ??, |, &&)

1. Dynamic Flexibility with `keyof` and Generic Constraints

5. Essential Utility Types: `Pick` and `Omit`

6. Conditional Types and Operators (`?`, `??`, `|`, `&&`)