Forem: Rizwanul Islam Rudra

Problem: ATM Withdrawal Simulator (Thailand Edition)

Rizwanul Islam Rudra — Sat, 05 Jul 2025 04:19:31 +0000

Problem Description

You are simulating the behavior of an ATM machine in Thailand. The ATM can dispense only three denominations of Thai Baht (THB): 100, 500, and 1000.

When a user enters a withdrawal amount, the ATM will always prioritize the largest denomination first, working downwards. Your task is to determine which banknotes are dispensed.

The ATM has the following rules:

It always dispenses the least number of banknotes possible, starting from the highest denomination.
The maximum withdrawal per transaction is 50,000 THB. If the user requests more than this amount, the system should return an error message.
If the amount is not exactly divisible by the available denominations (e.g., 125), the system should return an error stating the amount cannot be dispensed.

Function Signature

def withdraw(amount: int) -> Union[List[int], str]:

Input

amount (int): The amount of Thai Baht the user wants to withdraw.
- Constraint: 1 ≤ amount ≤ 100000

Output

A list of integers representing the denominations dispensed (e.g., [1000, 1000, 500])
Or a string error message in the following cases:
- If the amount exceeds 50,000 THB.
- If the amount cannot be dispensed using only 100, 500, and 1000 THB notes.

Example 1

Input: 3500
Output: [1000, 1000, 1000, 500]

Example 2

Input: 370
Output: "Cannot dispense the requested amount with available denominations."

Example 3

Input: 60000
Output: "Withdrawal amount exceeds the maximum limit of 50,000 THB."

Additional Constraints

The ATM only supports denominations: 100, 500, 1000 THB.
All inputs are positive integers.
Return the minimum number of notes required to fulfill the amount.
Return appropriate error messages if the request is invalid.
Try to solve the problem with O(1) Time and Space Complexity

💬 Your Turn!

Try solving the challenge and feel free to share your solution in the comments below. I'd love to see how you approach it — whether it's in Python, JavaScript, or any other language!

Interop 2025: What's New for Web Developers

Rizwanul Islam Rudra — Sun, 16 Feb 2025 03:54:54 +0000

Every year, browsers get better at supporting modern web features, making frontend development smoother and more efficient. Interop 2025 is here, and it brings a fresh set of improvements to enhance performance, CSS, and APIs across browsers. Let’s dive into the most exciting changes!

🎯 Key Features in Interop 2025

1. Anchor Positioning 🔗

No more absolute positioning nightmares! This feature allows elements to be anchored to another element, making positioning tooltips, popovers, and dropdowns much easier—without relying on third-party libraries.
✅ Supported in: Chrome 125, Edge 125
❌ Not yet in: Firefox, Safari

2. View Transitions API 🔄

This brings native page transitions to Single Page Applications (SPAs), allowing smooth animations between states—no more complex JS workarounds!
✅ Supported in: Chrome 111, Edge 111, Safari 18
❌ Not yet in: Firefox

3. Backdrop Filter 🎨

The backdrop-filter property lets you create blur and transparency effects behind an element, enabling beautiful glassmorphism UI. While widely available, browser inconsistencies will be addressed in 2025.
✅ Supported in: Chrome 76, Edge 79, Firefox 103, Safari 18

4. Scoped Styles (@scope) 🎯

Finally, CSS styles can be scoped without relying on CSS modules! The @scope rule lets you define styles within a specific DOM subtree, reducing global pollution.
✅ Supported in: Chrome 118, Edge 118, Safari 17.4
🚧 Firefox: Behind a flag

5. Scrollend Event 📜

Tired of setTimeout hacks to detect when scrolling stops? The new scrollend event provides a built-in way to detect when scrolling has actually finished.
✅ Supported in: Chrome 114, Edge 114, Firefox 109
❌ Not yet in: Safari

6. Storage Access API 🔐

Cross-site authentication is getting better! The Storage Access API helps manage cookies across different origins while respecting privacy and security standards.

⚡ Performance & Core Web Vitals Improvements

Largest Contentful Paint (LCP) & Interaction to Next Paint (INP): Improved implementation of these Web Vitals across browsers.
WebAssembly Enhancements: Better support for JavaScript string builtins and resizable buffers, making WebAssembly more powerful.
Mutation Events Removal: The legacy Mutation Events API is finally being removed in favor of the much more efficient Mutation Observer API.

🏆 What’s Next?

Interop 2025 is making great strides toward better browser interoperability, ensuring fewer inconsistencies and hacks for frontend developers. You can follow along on the Interop 2025 Dashboard and track progress.

What feature are you most excited about? Let’s discuss in the comments! 💬

Understanding Binary Search Trees (BST)

Rizwanul Islam Rudra — Sun, 15 Dec 2024 07:17:34 +0000

I was solving some binary search tree-related problems and thought it could be interesting to revise my memory and share what I learned with my followers! So here we go:

What is a Binary Search Tree (BST)

A Binary Search Tree (BST) is a foundational data structure in computer science that allows for efficient searching, insertion, and deletion of data. It's a tree-based structure where every node has at most two children, and the left child is always smaller than the parent node, while the right child is larger.

Key Features of a BST

1. Efficient Searching: With a time complexity of O(log n) for balanced trees.

2. Dynamic Structure: Nodes can be added or removed dynamically.

3. Hierarchical Representation: Useful in hierarchical data representation, like a filesystem or a family tree.

Let’s dive into a practical implementation of a Binary Search Tree using TypeScript.

class Node {
    value: number;
    left: Node | null;
    right: Node | null;

    constructor(value: number) {
        this.value = value;
        this.left = null;
        this.right = null;
    }
}

class BinarySearchTree {
    root: Node | null;

    constructor() {
        this.root = null;
    }

    insert(value: number): void {
        const newNode = new Node(value);
        if (this.root === null) {
            this.root = newNode;
            return;
        }

        let currentNode = this.root;
        while (true) {
            if (value < currentNode.value) {
                if (currentNode.left === null) {
                    currentNode.left = newNode;
                    return;
                }
                currentNode = currentNode.left;
            } else {
                if (currentNode.right === null) {
                    currentNode.right = newNode;
                    return;
                }
                currentNode = currentNode.right;
            }
        }
    }

    contains(value: number): boolean {
        let currentNode = this.root;

        while (currentNode !== null) {
            if (value === currentNode.value) return true;
            currentNode = value < currentNode.value ? currentNode.left : currentNode.right;
        }

        return false;
    }

    // In-order Traversal: Left -> Root -> Right
    inOrderTraversal(node: Node | null = this.root): void {
        if (node !== null) {
            this.inOrderTraversal(node.left);
            console.log(node.value);
            this.inOrderTraversal(node.right);
        }
    }
}

// Usage
const bst = new BinarySearchTree();
bst.insert(47);
bst.insert(21);
bst.insert(76);
bst.insert(18);
bst.insert(52);
bst.insert(82);

console.log("Contains 21:", bst.contains(21)); // true
console.log("Contains 99:", bst.contains(99)); // false

console.log("In-order Traversal:");
bst.inOrderTraversal();

Diagram Representation of the BST

Here’s what the Binary Search Tree would look like after inserting the values 47, 21, 76, 18, 52, 82:

How it Works

Insert: New values are placed based on comparisons. Smaller values go to the left, and larger values go to the right.
Search (Contains): Traverse left or right depending on the value until the node is found or the traversal ends at a null node.
Traversal: In-order traversal visits nodes in sorted order (Left -> Root -> Right).

Why Use Binary Search Trees?

Efficient Lookups: Searching in a BST can be very efficient when the tree is balanced.
Dynamic Size: You can add or remove elements without needing to resize arrays or shift elements.
Sorted Data: Traversals provide data in sorted order, useful in scenarios like priority queues and in-memory databases.

Edge Cases to Keep in Mind

Duplicates: Standard BSTs do not handle duplicate values by default. You may need to implement logic to allow or reject duplicates, such as storing a count in each node or skipping duplicate insertions.
Unbalanced Trees: If values are inserted in sorted order (e.g., 1, 2, 3, 4, ...), the BST becomes skewed and degrades to a linked list with O(n) time complexity for operations. Using self-balancing BSTs (e.g., AVL trees, Red-Black trees) helps mitigate this issue.
Empty Tree: Always check for the case where the tree is empty (i.e., this.root === null) to prevent runtime errors during operations like contains or traversal.
Edge Nodes: In scenarios like removing nodes, consider edge cases such as nodes with only one child, no children, or being the root node.
Performance: If your dataset is large or comes in sorted chunks, consider rebalancing or using a more appropriate data structure for efficient lookups.

To ensure efficiency, the BST should remain balanced. Unbalanced trees can degrade performance to O(n). Consider using self-balancing trees like AVL or Red-Black Trees for consistently optimized performance. I will discuss about the other trees in a post later on.

Use Cases of BSTs in Software Applications

Binary Search Trees (BSTs) are more than just a data structure you encounter in textbooks—they have tons of real-world applications! Here are some practical ways BSTs are used in computer science:

Databases and Indexing: Balanced BSTs (like AVL or Red-Black Trees) are often behind the scenes in database indexing. They make range queries and lookups super-efficient.
In-Memory Sorted Data: Need to keep data sorted while adding and searching dynamically? BSTs are your go-to. Think real-time analytics or monitoring systems.
Symbol Tables in Compilers: Compilers rely on BSTs to implement symbol tables for storing and quickly accessing identifiers and their attributes.
Autocompletion and Spell Checkers: Ever wondered how autocompletion works? BST variations, like Ternary Search Trees, are used to organize dictionaries of words efficiently.
Priority Scheduling: While heaps are more common, BSTs can also be used in dynamic scheduling systems where priorities are constantly changing.
Geographical Data (GIS): BSTs help in GIS systems by storing and retrieving spatial data—like finding nearby locations or filtering by a range.
Data Compression: Huffman encoding, a key part of data compression algorithms, uses a special kind of binary tree to assign variable-length codes to data symbols.
Gaming Systems: BSTs make dynamic leaderboards and scoreboards possible by keeping scores sorted and retrieving rankings in real-time.
Networking and Routing: Routing tables sometimes rely on BST-like structures to determine efficient paths for data transfer.
Version Control Systems: Systems like Git use tree-like structures (BST-inspired) to manage commits and versions efficiently within a Directed Acyclic Graph (DAG).

BSTs are everywhere, from powering the tools we use daily to solving complex computational problems. Pretty cool, right?

But it’s essential to be mindful of their limitations and edge cases. Understanding these nuances can help you design more efficient and reliable systems.

Have you encountered any interesting challenges or solutions while working with BSTs? Let’s discuss below! 🚀

6 Common Data Structures in Programming

Rizwanul Islam Rudra — Sat, 14 Dec 2024 19:02:19 +0000

Data structures are the building blocks of efficient software in programming. Understanding when and why to use each one can elevate your problem-solving skills. Here, we explore 6 essential data structures, delving into their characteristics, use cases, and implementation in TypeScript. Each section includes diagrams and code examples for clarity.

1. Array

An array is a contiguous block of memory where elements of the same type are stored.

Characteristics:

Fast access via index.
Fixed-size (in most languages).
Can hold duplicate values.

When to Use: Arrays are used to store ordered collections of elements where quick random access is required.

Code Example

const fruits: string[] = ['apple', 'banana', 'cherry'];
console.log(fruits[1]); // Outputs: banana

Visualization

2. Linked List

A linked list is a collection of nodes where each node contains data and a reference to the next node.

Characteristics:

Dynamic size.
Inefficient random access.
Efficient insertions/deletions.

When to Use: Use linked lists for applications requiring frequent insertions and deletions, such as undo functionality in editors.

Code Example

class Node<T> {
  value: T;
  next: Node<T> | null = null;
  constructor(value: T) {
    this.value = value;
  }
}

class LinkedList<T> {
  head: Node<T> | null = null;

  add(value: T) {
    const newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = newNode;
    }
  }
}

const list = new LinkedList<number>();
list.add(10);
list.add(20);
console.log(JSON.stringify(list)); 
// Outputs: {"head":{"value":10,"next":{"value":20,"next":null}}}

Visualization

3. Stack

A stack is a LIFO (Last In, First Out) data structure.

Characteristics:

Push and pop operations.
Useful for backtracking, such as in DFS or expression evaluation.

When to Use: Use stacks for managing function calls, syntax parsing, or undo operations.

Code Example

class Stack<T> {
  private items: T[] = [];
  push(item: T): void {
    this.items.push(item);
  }
  pop(): T | undefined {
    return this.items.pop();
  }
  display(): void {
    console.log(this.items.reverse());
  }
}

const stack = new Stack<number>();
stack.push(1);
stack.push(2);
stack.push(3);
console.log(stack.pop()); // Returns 3

Visualization

4. Queue

A queue is a FIFO (First In, First Out) data structure.

Characteristics:

Enqueue and dequeue operations.
Used in scheduling and buffering.

When to Use: Use queues for managing tasks, such as job scheduling or breadth-first search.

Code Example

class Queue<T> {
  private items: T[] = [];
  enqueue(item: T): void {
    this.items.push(item);
  }
  dequeue(): T | undefined {
    return this.items.shift();
  }
  display(): void {
    console.log(this.items);
  }
}

const queue = new Queue<number>();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
queue.display(); // Outputs: [1, 2, 3]
console.log(queue.dequeue()); // Returns 1

Visualization

5. Hash Table

A hash table is a key-value pair data structure optimized for quick lookups.

Characteristics:

Average O(1) time complexity for lookup and insertion.
Handles collisions using chaining or open addressing.

When to Use: Use hash tables for dictionaries, caching, and sets.

Code Example

class HashTable<K, V> {
  private buckets: [K, V][][] = [];

  private hash(key: K): number {
    return JSON.stringify(key).length % 10;
  }

  set(key: K, value: V): void {
    const index = this.hash(key);
    this.buckets[index] = this.buckets[index] || [];
    this.buckets[index].push([key, value]);
  }

  get(key: K): V | undefined {
    const index = this.hash(key);
    const bucket = this.buckets[index] || [];
    for (const [k, v] of bucket) {
      if (k === key) return v;
    }
  }
}

const hashTable = new HashTable<string, number>();
hashTable.set("name", "Alice");
hashTable.set("age", 30);
console.log(hashTable.get("age")); // Outputs: 30

Visualization

6. Binary Tree

A binary tree is a hierarchical structure where each node has up to two children.

Characteristics:

Traversals include inorder, preorder, and postorder.
Basis for binary search trees (BST).

When to Use: Use binary trees for hierarchical data like file systems.

Code Example

class TreeNode<T> {
  value: T;
  left: TreeNode<T> | null = null;
  right: TreeNode<T> | null = null;

  constructor(value: T) {
    this.value = value;
  }
}

const root = new TreeNode(1);
root.left = new TreeNode(2);
root.right = new TreeNode(3);
console.log(JSON.stringify(root));
// Outputs: {"value":1,"left":{"value":2,"left":null,"right":null},"right":{"value":3,"left":null,"right":null}}

Visualization

Conclusion

Understanding data structures is crucial for writing efficient and scalable code. Arrays, linked lists, stacks, queues, hash tables, and binary trees each serve specific purposes, from managing order to organizing data hierarchically.

Mastering these basics empowers you to solve diverse challenges, whether in coding interviews or real-world projects. Practice regularly, and you'll quickly see the impact on your problem-solving skills.

References for Further Learning

Books:

Interactive Platforms:

LeetCode - Solve coding problems using these structures.
GeeksforGeeks - Comprehensive articles on data structures.
HackerRank - Learn and practice data structures hands-on.

Courses:

CS50’s Introduction to Computer Science - A great beginner-friendly resource.
Data Structures and Algorithms Specialization on Coursera - In-depth, structured learning.

Follow me on X for more!

Unit Testing with Vitest: A Next-Generation Testing Framework

Rizwanul Islam Rudra — Sun, 08 Dec 2024 06:19:47 +0000

Why Choose Vitest?

Vitest is designed with modern development in mind. Here’s why it stands out:

Speed

Vitest leverages Vite as its foundation, utilizing its lightning-fast hot module replacement (HMR) and esbuild for bundling and transpilation. This results in:

Smart & Instant Watch Mode: Tests are re-run only for affected files, making the feedback loop instantaneous.
Out-of-box ESM support: Modern projects benefit from direct support for ES modules without hacks.

In performance benchmarks, Vitest consistently outpaces Jest by a significant margin due to its use of Vite’s optimized build pipeline.

Framework	Time to run 500 tests
Jest	~8 seconds
Vitest	~3 seconds
Mocha	~6 seconds

Note: These benchmarks may vary depending on project complexity and system specifications.

Compatibility

Vitest is Jest-compatible, which means you can reuse much of your existing test suite with minimal changes. It also supports popular tools like TypeScript, JSX, and ESM out-of-the-box.

Developer Experience

Integrated with Vite’s HMR for fast test iteration.
Simple API and configuration.
Rich ecosystem and growing community support.

---

Setting Up Vitest

Let’s dive into setting up Vitest in a TypeScript project. We'll demonstrate this using a React project, but the steps are similar for Vue 3 or Node.js projects.

Installation

Ensure you have Node.js and npm/yarn/pnpm installed.
Install Vitest and its peer dependencies:

npm install --save-dev vitest

For projects using React, you’ll also need the React testing library:

npm install --save-dev @testing-library/react @testing-library/jest-dom

Configuration

Create or update your vite.config.ts to enable Vitest:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom', // Use 'node' for Node.js projects
    setupFiles: './test/setup.ts',
  },
});

Adding Setup Files

Set up files are used to configure the testing environment. Create a test/setup.ts file:
import '@testing-library/jest-dom';

Adding Scripts

Update your package.json to include a test script:

{
  "scripts": {
    "test": "vitest"
  }
}

---

Writing Unit Tests with Vitest

Vitest provides a Jest-like API that makes writing tests straightforward. Here’s a simple example:

Example: React Component

Imagine you have a React component:

// src/components/Greeting.tsx
import React from 'react';

type GreetingProps = {
  name: string;
};

export const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Writing Tests

Create a test file for the component:

// src/components/__tests__/Greeting.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Greeting } from '../Greeting';

describe('Greeting Component', () => {
  it('renders the correct greeting', () => {
    render(<Greeting name="Vitest" />);
    expect(screen.getByText('Hello, Vitest!')).toBeInTheDocument();
  });
});

Running Tests

Run the tests using:
npm run test

You’ll see output similar to this:
✓ Greeting Component renders the correct greeting

---

Advanced Features

Mocking

Vitest supports mocking modules and functions directly:

import { vi } from 'vitest';

const mockFn = vi.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();

Snapshot Testing

Snapshot testing is as simple as:

import { render } from '@testing-library/react';
import { expect } from 'vitest';
import { Greeting } from '../Greeting';

test('matches snapshot', () => {
  const { container } = render(<Greeting name="Vitest" />);
  expect(container).toMatchSnapshot();
});

Performance Testing

Use Vitest's CLI options to measure performance:
vitest --run --coverage

---

Conclusion

Vitest is a compelling choice for modern testing, offering speed, simplicity, and rich features powered by Vite. Whether migrating from Jest or starting fresh, Vitest provides an excellent developer experience and ensures your tests run as fast as your code.

Try Vitest in your next project and experience the difference!

References

Vitest website
Vite

When Scalability Meets Spectacle: Lessons from Netflix's Tyson-Paul Fight Crash

Rizwanul Islam Rudra — Sun, 17 Nov 2024 09:59:25 +0000

On November 15, 2024, Netflix streamed its most ambitious live event yet: the Tyson-Paul fight. With over 120 million viewers tuning in globally (according to initial reports), the scale of the event was unprecedented—and so were the technical challenges. Many users reported buffering, lag, and service outages on platforms like Downdetector, showcasing the difficulty of handling such extreme traffic.

What likely went wrong?

While Netflix hasn't confirmed the root cause yet, large-scale streaming challenges often stem from these areas:

CDN Bottlenecks: Content delivery networks may have struggled to handle the global surge, highlighting the need for multi-CDN setups and load-aware traffic distribution.

Load Balancing Issues: The server infrastructure may have been overwhelmed without sufficient dynamic scaling or geographic balancing.

Insufficient Stress Testing: Simulating 120+ million concurrent users with varied device capabilities is complex and may not have fully predicted the real-world load.

Technical Takeaways for Engineers:

Robust Elastic Infrastructure: Tools like Kubernetes and serverless architectures allow dynamic scaling to meet traffic spikes in real time.

Advanced Caching: Aggressive edge caching and adaptive bitrate streaming can reduce server load significantly.

Monitoring and Observability: Real-time insights with tools like Grafana or Prometheus can pinpoint bottlenecks and anomalies.

WebSocket Optimization: Scalable real-time communication protocols, supported by fallback mechanisms, ensure continuity even under strain.

Disaster Recovery Plans: Backup options like SD-only streams or audio-only feeds can maintain user experience during partial failures.

ISP Collaboration: Partnering with ISPs or using P2P streaming (e.g., WebRTC) could alleviate last-mile congestion for global events.

For other companies exploring large-scale live events, this is a reminder that meticulous preparation, redundancy across systems, and multi-layered fallback strategies are non-negotiable.

Engineers, have you faced similar challenges in scaling for massive events? What strategies worked for you? Share your insights in the comments!

Learning to Code? Avoid Overusing AI Tools

Rizwanul Islam Rudra — Fri, 08 Nov 2024 14:17:06 +0000

If you're just starting with coding, using AI to generate your code might sound like a shortcut to success. But actually, it could hold you back in ways you might not realize. Here’s the thing: as a new programmer, your main focus should be on learning the basics and building a strong foundation. Coding isn’t magic, and it’s not about writing beautiful poetry either. It’s about giving clear, step-by-step instructions to a computer to get real things done.

Take JavaScript, for instance. If you started learning with it, you might not have seen the lower-level side of how code is run by the computer. And that’s okay! But a lot is going on under the hood that can give you a much deeper understanding. I started with C, which grounded me in low-level programming concepts. In university, I even took a course in Assembly language. Yep, Assembly—the dinosaur language that people still use in hardware programming today, but it taught me so much about how the program works.

Adding two numbers in Assembly looks like this:

.model small
.stack 100h

.data
    num1 dw 10       ; Define a word (16-bit) with value 10
    num2 dw 20       ; Define a word (16-bit) with value 20

.code
main PROC
    mov ax, num1     ; Load the value of num1 into AX
    mov bx, num2     ; Load the value of num2 into BX
    add ax, bx       ; Add the values in AX and BX

    ; Exit the program
    mov ah, 4Ch      ; DOS interrupt for program termination
    int 21h          ; Call DOS interrupt to exit
main ENDP
END main

But in JavaScript, it’s just:

let sum = 5 + 3;

Or in Python:

sum = 5 + 3

Today, we’ve got tools like ChatGPT, Gemini, Claude, Cursor and Bolt that can churn out lines of code for you in seconds. It’s cool, but is that what you want? If all you’re doing is writing prompts and waiting for code that’s not even yours, you’re missing out. The real joy comes from figuring things out yourself—puzzling through the problem, working out the solution, and building something you own. Trust me, that’s way more satisfying.

Now, don’t get me wrong—AI tools can be great. They're super helpful for automating repetitive tasks, writing some CI/CD scripts, explaining confusing sections of code (just be careful with sensitive data!), or even brainstorming project ideas. But at the end of the day, your job as a developer is to solve problems. Crafting solutions to real-world challenges or helping to build your company’s next big product is what will make you a better developer—not learning how to write the perfect prompt.

Plus, AI-generated code still needs a human touch. If you focus on growing your skills and learning from people around you, you'll find that your growth is more meaningful and lasting. Coding is just one part of software engineering. Debugging, analyzing problems, quality assurance (QA), UI/UX design—there's a lot to this field! Relying only on AI early on means missing out on building these other essential skills, and that could end up holding you back.

Another big area to focus on? Data structures and algorithms. Without a solid understanding here, how will you know if AI's solution is efficient? Are you going to keep prompting it until you find a better answer? That sounds exhausting—and it's not the best use of your time. Pick up the keyboard, grab a coffee, and dive into the code yourself. There's nothing quite like the satisfaction of seeing your solution come to life.

At the end of the day, AI can be a helpful sidekick, but don't let it become a crutch. If you want to be a great software engineer, it'll take time, patience, and a lot of hands-on practice. AI is just a tool. The real magic comes from you.

JavaScript’s Fun Twists and How TypeScript Makes It Better

Rizwanul Islam Rudra — Sat, 12 Oct 2024 06:04:46 +0000

JavaScript is a language we all love, right? It's flexible, lightweight, and runs everywhere. But for all its greatness, let's be honest, it can be weird. The kind of weird that makes you question your sanity after seeing something work that really should not.

In this article, we will tour some of the kinks within JavaScript - those behaviors that surprise you when you least expect it. Fortunately, there is a knight in shining armor for developers called TypeScript. We show you here how it can save you from tearing your hair by making those JavaScript's bizarreness somewhat more manageable.

1. The Great `==` vs `===` Debate

JavaScript gives us two flavors of equality: == or loose equality and === or strict equality.

console.log(0 == '0'); // true
console.log(0 === '0'); // false

Wait, what? Yeah, JavaScript made 0 and '0' be considered equal with ==, but not with ===. That is because == does type coercion, or converting of types, before doing the comparison. It's trying to be helpful, making that string into a number for you—but this help leads to bugs.

Imagine using == on user input to check against a number. You might get true when the types aren't the same leading to unexpected behavior which is hard to track down. Why does this matter? Because JavaScript's type of coercion often works until it breaks something important.

How TypeScript Helps

TypeScript already enforces type safety out of the box. If you compare two things of different types, it's going to yell at you long before you can even run any code:

let a: number = 0;
let b: string = '0';

console.log(a === b); // TypeScript Error: This comparison is invalid

Any surprise gone comparing a number against a string. TypeScript makes sure you always compare apples and apples or in this case number to number.

2. The Mysterious `undefined` vs `null`

Both undefined and null speak to nothing, but in subtly different ways. undefined is what JavaScript assigns to a variable that hasn't been initialized, while null is used when you intentionally want to assign an empty value. They are different, yet similar enough to confuse.

let foo;
console.log(foo); // undefined

let bar = null;
console.log(bar); // null

Unless you are careful, you might end up checking for one but not the other, which results in some confusing bugs.

if (foo == null) {
    console.log("This catches both undefined and null");
}

This works but can lead to subtle bugs if you don’t clearly distinguish between the two.

How TypeScript Helps

TypeScript encourages you to be explicit and precise about whether something can be null or undefined. It does this by making you handle both cases explicitly, so you are certain of what's going on:

let foo: number | undefined;
let bar: number | null = null;

// TypeScript will enforce these constraints
foo = null; // Error
bar = 5; // No problem!

With TypeScript, you decide which types are allowed so that you don't accidentally mix types. This kind of strictness protects you from those bugs where you forget to check for null or undefined.

3. The Curious Case of NaN (Not-a-Number)

Have you ever run into the dreaded NaN? It's short for Not-a-Number, and it pops up when you try to perform mathematical operations that don’t make sense.

console.log(0 / 0);  // NaN
console.log("abc" - 5);  // NaN

Here’s the catch: NaN is actually of type number. That’s right, Not-a-Number is a number!

console.log(typeof NaN); // "number"

This can lead to some truly bizarre outcomes if you aren’t checking for NaN explicitly. What's worse, NaN is never equal to itself, so you can't easily compare it to check if it exists.

console.log(NaN === NaN); // false

How TypeScript Helps

TypeScript can mitigate this issue by enforcing proper type checks and catching bad operations at compile-time. If TypeScript can infer that an operation will return NaN, it can throw an error before your code even runs.

let result: number = 0 / 0; // Warning: Possible 'NaN'

TypeScript can also help you narrow down when and where NaN might pop up, encouraging better handling of numeric values.

4. The Wild `this`

this in JavaScript is one of the most powerful, yet easily misunderstood concepts. The value of this depends entirely on how a function is called, which can lead to unintended behavior in certain contexts.

const person = {
    name: 'Alice',
    greet() {
        console.log('Hello, ' + this.name);
    }
};

setTimeout(person.greet, 1000); // Uh-oh, what happened here?

What you might expect is to see "Hello, Alice" printed after a second, but instead, you’ll get Hello, undefined. Why? Because this inside setTimeout refers to the global object, not the person object.

How TypeScript Helps

TypeScript can help you avoid these sorts of issues by using arrow functions which don't have their own this, and keep the context of the object they are in.

const person = {
    name: 'Alice',
    greet: () => {
        console.log('Hello, ' + person.name); // Always refers to 'person'
    }
};

setTimeout(person.greet, 1000); // No more surprises!

No more unexpected this behavior. TypeScript forces you to think about context and helps you bind this properly, reducing the risk of weird undefined bugs.

5. Function Hoisting: When Order Does Not Matter

JavaScript functions are hoisted to the top of the scope; that means you can invoke them even before you have declared them in your code. This is kind of a cool trick, but can also be confusing if you are not paying attention to what's going on.

greet();

function greet() {
    console.log('Hello!');
}

While this can be convenient, it can also cause confusion, especially when you're trying to debug your code.

This works just fine, because of function declaration hoisting. But it can make your code harder to follow, especially for other developers (or yourself after a few months away from the project).

How TypeScript Helps

TypeScript does not change how hoisting works but it gives you clearer feedback about your code's structure. If you accidentally called a function before it is defined, TypeScript will let you know immediately.

greet(); // Error: 'greet' is used before it’s defined

function greet() {
    console.log('Hello!');
}

TypeScript forces you to do some cleanup, where your functions are declared before they are used. It makes your code much more maintainable this way.

Wrapping It Up

JavaScript is an amazing language, but it can certainly be quirky at times. By using TypeScript, you can tame some of JavaScript’s weirdest behaviors and make your code safer, more reliable, and easier to maintain. Whether you’re working with null and undefined, taming this, or preventing NaN disasters, TypeScript gives you the tools to avoid the headaches that can arise from JavaScript’s flexible—but sometimes unpredictable—nature.

So next time you find yourself puzzling over a strange JavaScript quirk, remember: TypeScript is here to help!

Happy coding!

Forem: Rizwanul Islam Rudra

Problem: ATM Withdrawal Simulator (Thailand Edition)

Problem Description

Function Signature

Input

Output

Example 1

Example 2

Example 3

Additional Constraints

Interop 2025: What's New for Web Developers

🎯 Key Features in Interop 2025

1. Anchor Positioning 🔗

2. View Transitions API 🔄

3. Backdrop Filter 🎨

4. Scoped Styles (@scope) 🎯

5. Scrollend Event 📜

6. Storage Access API 🔐

⚡ Performance & Core Web Vitals Improvements

🏆 What’s Next?

Understanding Binary Search Trees (BST)

What is a Binary Search Tree (BST)

Key Features of a BST

Diagram Representation of the BST

How it Works

Why Use Binary Search Trees?

Edge Cases to Keep in Mind

Use Cases of BSTs in Software Applications

6 Common Data Structures in Programming

1. Array

2. Linked List

3. Stack

4. Queue

5. Hash Table

6. Binary Tree

Conclusion

References for Further Learning

Unit Testing with Vitest: A Next-Generation Testing Framework

Why Choose Vitest?

Speed

Compatibility

Developer Experience

Setting Up Vitest

Installation

Configuration

Adding Setup Files

Adding Scripts

Writing Unit Tests with Vitest

Example: React Component

Writing Tests

Running Tests

Advanced Features

Mocking

Snapshot Testing

Performance Testing

Conclusion

References

When Scalability Meets Spectacle: Lessons from Netflix's Tyson-Paul Fight Crash

What likely went wrong?

Technical Takeaways for Engineers:

Learning to Code? Avoid Overusing AI Tools

JavaScript’s Fun Twists and How TypeScript Makes It Better

1. The Great == vs === Debate

How TypeScript Helps

2. The Mysterious undefined vs null

How TypeScript Helps

3. The Curious Case of NaN (Not-a-Number)

How TypeScript Helps

4. The Wild this

How TypeScript Helps

5. Function Hoisting: When Order Does Not Matter

How TypeScript Helps

Wrapping It Up

1. The Great `==` vs `===` Debate

2. The Mysterious `undefined` vs `null`

4. The Wild `this`