DEV Community: Shifa

Day 6: String Compression (LeetCode 443)

Shifa — Sat, 11 Apr 2026 17:34:34 +0000

Problem Overview

The task is to compress a given array of characters in-place. For each group of consecutive repeating characters:

If the character appears once, it remains unchanged.
If it appears multiple times, append the character followed by its frequency.

The result must be stored in the same array, and the function should return the new length of the compressed array. The solution must use constant extra space.

Approach

To solve this problem efficiently, we use a two-pointer technique:

A read pointer (i) to traverse the array.
A write pointer (index) to overwrite the array with the compressed result.

Steps:

Initialize index = 0 to track the position for writing.
Traverse the array using pointer i.
For each character:

Count how many times it appears consecutively.
Write the character at index.
If the count is greater than 1:
- Convert the count to a string.
- Write each digit of the count into the array.
  1. Continue until the entire array is processed.
  2. Return the final value of index.

Code Implementation (C++)

class Solution {
public:
    int compress(vector<char>& s) {
        int n = s.size();
        int index = 0;

        for(int i = 0; i < n; ) {
            char curr = s[i];
            int count = 0;

            while(i < n && s[i] == curr) {
                i++;
                count++;
            }

            s[index++] = curr;

            if(count > 1) {
                string cnt = to_string(count);
                for(char c : cnt) {
                    s[index++] = c;
                }
            }
        }

        return index;
    }
};

Example

Input:

["a","a","b","b","c","c","c"]

Output:

["a","2","b","2","c","3"]

Returned Length: 6

Complexity Analysis

Time Complexity: O(n)
Each element is processed once.
Space Complexity: O(1)
The compression is done in-place without extra memory.

Key Insights

The two-pointer approach allows efficient in-place updates.
Converting counts to strings ensures correct handling of multi-digit frequencies.
Careful index management is crucial to avoid overwriting data incorrectly.

Introduction to Server in Backend Development

Shifa — Tue, 02 Sep 2025 14:58:20 +0000

What is Server?

Before reading the article think of server in your mind , Great did you just saw big hardware devices in front of you placed in a room?
Now let me tell you the Reality
In backend development, a server is not just a physical machine it’s primarily a software application that listens for requests from clients (such as browsers or mobile apps), processes them, and sends back responses. Servers act as the middle layer between the frontend (user interface) and backend logic or database.

                              **VS**

Using Node.js, we can create custom servers to handle data, control access, and manage communication between different parts of an application.

The Classic Server Setup (Browser-Based)
Before using tools like Postman or frameworks like Express.js, it's useful to understand the basic server setup in Node.js. In the classic approach, we create a server that listens on a specific port and returns a plain message (usually text or HTML) directly in the browser.

This type of server is helpful for understanding how the request-response cycle works at a low level. When you open a URL like http://localhost:3000, your browser sends a request to the server, which returns a message that gets displayed on the screen.

There’s no routing logic or data handling in this basic setup—it simply sends a fixed response for every request. This is how many developers start learning server fundamentals.

Handling GET and POST Requests
Once you're familiar with the basics, the next step is to handle different HTTP methods, like GET and POST.

GET is used to retrieve data. For example, when a user opens a page or fetches information from your server, a GET request is made.

POST is used to send data to the server. This is typically used in forms, API calls, or when submitting any kind of user input.
_

Node.js Server for Postman Testing (GET & POST)

const http = require('http');

const PORT = 3000;

const server = http.createServer((req, res) => {
  // Handle GET request to /api/hello
  if (req.method === 'GET' && req.url === '/api/hello') {
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({ message: 'Hello from Node.js server!' }));

  // Handle POST request to /api/data
  } else if (req.method === 'POST' && req.url === '/api/data') {
    let body = '';

    // Listen for data chunks
    req.on('data', chunk => {
      body += chunk.toString();
    });

    // Finished receiving data
    req.on('end', () => {
      try {
        const parsedData = JSON.parse(body); // Convert JSON string to object
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({
          message: 'Data received successfully!',
          yourData: parsedData
        }));
      } catch (error) {
        res.writeHead(400, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({ error: 'Invalid JSON data' }));
      }
    });

  // Handle unknown routes
  } else {
    res.writeHead(404, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({ error: 'Route not found' }));
  }
});

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

How to Test in Postman

Test the GET route Method: GET

URL: http://localhost:3000/api/hello
Expected Response:

{
  "message": "Hello from Node.js server!"
}

"For a more detailed explanation, refer to the official documentation."
Reference : https://www.postman.com/api-platform/api-testing/
https://share.google/images/v5EoLNZMRBFBQX6pj
https://share.google/images/QByzuPAbnnMdlYLxA

Introduction to MongoDB and NoSQL — Day 1

Shifa — Sun, 31 Aug 2025 12:00:06 +0000

Lets not waste our time on intro directly dive deep into the concept

What is MongoDB?

MongoDB is a NoSQL database that stores data in a flexible, JSON-like format called documents. Unlike traditional databases that require structured tables and fixed columns, MongoDB allows you to store varied data structures within the same collection.

MongoDB is often used in the backend of applications to manage and store data, but it’s important to note that MongoDB itself is not a backend framework — it is strictly a database.

What Does “NoSQL” Mean?

Many people think "NoSQL" means “no SQL,” but that’s not entirely accurate.

NoSQL actually stands for “Not Only SQL”, and it refers to a class of databases that break away from traditional relational models.

Instead of storing data in rows and columns (like in MySQL or PostgreSQL), NoSQL databases store data in formats like:

Key-value pairs
Wide-column stores
Graph databases
Document-oriented databases (like MongoDB)

SQL vs NoSQL — What's the Difference?

Here’s a quick comparison to help you understand how MongoDB differs from traditional SQL databases:

Feature	SQL (Relational DB)	NoSQL (MongoDB)
Data Structure	Tables (Rows & Columns)	Documents (JSON-like)
Schema	Fixed	Flexible (Schema-less)
Relationships	Joins, Foreign Keys	Embedding or Referencing
Scalability	Vertical (scale-up)	Horizontal (scale-out)
Best For	Structured data	Dynamic, unstructured data
Examples	MySQL, PostgreSQL	MongoDB, CouchDB, Cassandra

MongoDB Structure: Key Terminology

Let’s break down the three most important terms you’ll encounter in MongoDB:

Document: A single data record stored in JSON or BSON format. Example:

  { "name": "Shifa", "roll no": 21, "email": "shifa@example.com" }

Collection: A group of related documents, similar to a table in SQL.
Database: A container for collections — the top-level structure in MongoDB.

Why MongoDB is Flexible

In SQL, all records in a table must follow the same schema — same columns, same types. In MongoDB, this restriction doesn’t exist.

You can store documents with different structures in the same collection.

For example:

{ "name": "sahil", "age": 25 }
{ "name": "sam", "email": "sam@example.com" }

These two documents live in the same collection, but they have different fields — and that’s completely valid in MongoDB.

What You’ll Do Today

As part of Day 1, here’s what students should do to get hands-on experience:

1. Install MongoDB

Download from mongodb.com
Or create a free cloud database with MongoDB Atlas

2. Explore MongoDB Compass

MongoDB Compass is a GUI that helps you view databases and documents.
Use it to create a new database and insert your first document.

3. Insert a Document

Example:

{
  "name": "Shifa",
  "roll no": 21,
  "course": "MongoDB Basics"
}

Congratulations — you’ve just added your first record to a NoSQL database!

References -
https://www.mongodb.com/resources/basics/unstructured-data/schemaless
https://www.integrate.io/blog/the-sql-vs-nosql-difference/
https://www.mongodb.com/resources/basics/databases/nosql-explained

Starting My Backend Journey:

Shifa — Tue, 12 Aug 2025 11:49:25 +0000

I’ve always felt a little different when it came to backend development. The people around me who knew backend carried an aura in my eyes — something mysterious, powerful, and undeniably cool. And now, here I am, finally stepping into that world and learning a skill I’ve secretly wanted to master.

Ever since I was a kid, I wanted to know what coding really was. The idea of writing lines of text and creating something out of nothing fascinated me. But I never got a real opportunity to dive in. My journey truly began with a simple HTML chapter in school — my first exposure to “coding.”

Yes, I know many people will say HTML isn’t a real programming language, but honestly, I didn’t care then (and still don’t). For me, at that moment, I was coding. And that was enough to set my imagination on fire. The funniest part? I did all my HTML experiments on my phone because I didn’t have access to a laptop at the time.

Days passed, and coding became an interior love — a quiet passion I couldn’t really show the world. Years went by, and when I started college, I realized coding wasn’t just about fun or looking “cool” on a black screen filled with colorful text. It’s about battling awkward errors, Googling solutions at 2 AM, and silently celebrating when the code finally works.

We can pretend to show off, but deep down, every developer knows that feeling when a single stubborn error line ruins your day — and the joy when it finally disappears.

So here I am, ready to learn backend development. Ready to move beyond the front-end playground and dive deep into the logic, structure, and heart of how things work behind the scenes.

This isn’t just about writing code. It’s about building something that can make a real difference in the world. And I’m here for it.

Completed My JavaScript A to Z Series

Shifa — Thu, 05 Jun 2025 18:05:46 +0000

Completed My JavaScript A to Z Series – with almost 50 Articles yayyy!

I'm incredibly happy to share that I’ve officially completed my JavaScript A to Z series – a journey of nearly 50 detailed articles covering everything from the basics to advanced concepts!

From var, let, and const to closures, promises, async/await, and even the latest ES6+ features — this series was my way of learning deeply, practicing consistently, and helping others grow along the way.

Writing almost 50 articles wasn’t always easy, but seeing it all come together has been one of the most fulfilling parts of my learning journey. This is not just a milestone — it's a reminder of what can be achieved with focus and passion.

A huge thank you to everyone who read, shared, or gave feedback on the series.
And if you're learning JavaScript or want a complete roadmap — this series is for you!

"The Untold Secret Behind JavaScript's Flexibility: Lexical Scope and Closures Revealed"

Shifa — Mon, 02 Jun 2025 16:48:42 +0000

JavaScript often feels magical to newcomers and even to seasoned developers at times. Some of that “magic” is powered by concepts like lexical scoping and closures—two foundational principles that give JavaScript its flexibility and strength.

Understanding these concepts not only makes you a better developer, but also unlocks the door to writing more elegant, efficient, and bug-free code.

In this article, we’ll demystify lexical scoping and closures, demonstrate how they work under the hood, and show you how to harness them like a pro.

What is Lexical Scoping?

Lexical scoping means that the scope of a variable is determined by its position in the source code—not where or how it's called.

When JavaScript compiles your code, it organizes variables into nested scopes based on where they physically appear in the code. This hierarchy allows inner functions to access variables defined in their outer (parent) functions.

Example:

function outer() {
    let name = "JavaScript";

    function inner() {
        console.log(name); // Accessible due to lexical scoping
    }

    inner();
}

outer();

Here, inner() has access to the variable name defined in its lexical environment, even though name is not declared within it. Why? Because it’s nested inside outer(), and lexical scoping ensures access to its parent’s variables.

Closures: Lexical Scoping in Action

A closure is formed when a function "remembers" and continues to access variables from its lexical scope, even after the parent function has finished executing.

In simpler terms, a closure allows an inner function to retain access to variables defined in an outer function even after the outer function has returned.

Example:

function counter() {
    let count = 0;

    return function () {
        count++;
        console.log(count);
    };
}

const increment = counter();

increment(); // 1
increment(); // 2
increment(); // 3

Even though counter() has returned, the returned function still has access to the count variable. That’s a closure at work. The function closes over the count variable, keeping it alive in memory.

Why Should You Care About Closures?

Closures aren’t just a quirky detail of the language. They are essential for:

Data Privacy: Mimicking private variables
Callback Functions: Used extensively in asynchronous code
Function Factories: Creating reusable, customizable functions
Maintaining State: Especially in React or functional-style JavaScript

Common Real-World Use Case: Data Privacy

function createUser(name) {
    let loginCount = 0;

    return {
        login() {
            loginCount++;
            console.log(`${name} logged in ${loginCount} times`);
        },
        getLoginCount() {
            return loginCount;
        }
    };
}

const user = createUser("Alice");

user.login(); // Alice logged in 1 times
user.login(); // Alice logged in 2 times
console.log(user.getLoginCount()); // 2

loginCount is not accessible from the outside, but can be interacted with via the closure returned by createUser(). This encapsulation is a powerful pattern in JavaScript.

Lexical Environment and Scope Chain

Every time a function is created, JavaScript captures its surrounding scope. This is known as the lexical environment. Closures maintain a reference to this environment, and when a variable is not found in the current function scope, JavaScript walks up the scope chain to find it.

This explains how even deeply nested functions can access variables defined many levels up.

The Bottom Line

Lexical scoping and closures are not just academic concepts. They are the backbone of many advanced JavaScript patterns and frameworks. From event listeners to promises, from React hooks to state management—closures are everywhere.

If you're serious about mastering JavaScript, understanding these concepts isn't optional. It's essential.

Once you grasp lexical scoping and closures, you don’t just write JavaScript—you start thinking in JavaScript.

Next Steps

Revisit your own code and identify where closures are being used.
Practice writing functions that return other functions.
Use tools like Chrome DevTools to visualize closures in memory.
Build a small module that uses closures for encapsulation.

Conclusion

Lexical scoping and closures may seem subtle at first, but they unlock a deeper level of fluency in JavaScript. They make your code more powerful, flexible, and expressive.

Don’t just memorize the theory—use it. Explore it. Break it. And above all, experiment with it.

Because in JavaScript, the magic is not in the syntax. It’s in the scope.

Getters and Setters in JavaScript

Shifa — Sun, 01 Jun 2025 17:03:35 +0000

In JavaScript, getters and setters are special methods that allow you to control access to the properties of an object. They are primarily used to define object properties dynamically, encapsulate logic, and ensure data integrity. By using getters and setters, developers can control how properties are read and written without directly exposing the underlying data structure.

What are Getters and Setters?

Getter: A method that gets the value of a specific property.
Setter: A method that sets or updates the value of a specific property.

They are defined using the get and set keywords inside an object or class.

Why Use Getters and Setters?

Encapsulation: Hide the internal representation of data.
Validation: Apply logic before assigning or retrieving values.
Computed Properties: Dynamically calculate values based on other properties.
Consistency: Uniform access to data, whether stored or computed.

Syntax

In Object Literals

const person = {
  firstName: "John",
  lastName: "Doe",

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },

  set fullName(name) {
    const parts = name.split(" ");
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

console.log(person.fullName); // John Doe
person.fullName = "Jane Smith";
console.log(person.firstName); // Jane
console.log(person.lastName);  // Smith

In ES6 Classes

class Rectangle {
  constructor(width, height) {
    this._width = width;
    this._height = height;
  }

  get area() {
    return this._width * this._height;
  }

  set dimensions({ width, height }) {
    if (width > 0 && height > 0) {
      this._width = width;
      this._height = height;
    } else {
      throw new Error("Dimensions must be positive numbers.");
    }
  }
}

const rect = new Rectangle(10, 20);
console.log(rect.area); // 200
rect.dimensions = { width: 15, height: 25 };
console.log(rect.area); // 375

Key Considerations

Prefixing internal properties with an underscore (e.g., _width) is a common convention to indicate that they are meant to be private.
Avoid complex logic inside getters and setters to maintain readability and performance.
Use getters and setters when there’s a clear benefit, such as validation, transformation, or abstraction.

Use Cases

Creating derived properties (e.g., fullName from firstName and lastName).
Validating input before updating a value.
Triggering side effects (with caution) when a property changes.
Protecting private data from being directly manipulated.

Conclusion

Getters and setters in JavaScript are powerful tools for object-oriented programming and data encapsulation. By defining custom behavior when properties are accessed or modified, you can write more robust, maintainable, and secure code. However, they should be used thoughtfully to avoid unnecessary complexity.

Understanding `bind()` in JavaScript

Shifa — Sat, 31 May 2025 17:28:34 +0000

In JavaScript, functions are first-class objects. This means they can be stored in variables, passed as arguments, and have methods. One such method is bind(), which plays a crucial role in function context management. Understanding how bind() works is essential for writing clean, predictable, and maintainable JavaScript code, especially in object-oriented and event-driven programming.

What is `bind()`?

The bind() method creates a new function that, when called, has its this keyword set to the provided value. It also allows optional prepending of arguments, known as partial application.

Syntax

function.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg: The value to which this should refer when the bound function is called.
arg1, arg2, ...: Optional arguments to prefill in the bound function.

Why is `bind()` Useful?

JavaScript’s this behaves differently than in many other languages. It is determined by how a function is called, not where it is defined. This can lead to unexpected behavior, particularly in asynchronous code, event handlers, and callbacks.

Common Use Cases

Preserving Context in Event Handlers

function Handler() {
  this.message = "Event triggered";
}

Handler.prototype.handleClick = function () {
  console.log(this.message);
};

const handler = new Handler();
document.getElementById("btn").addEventListener("click", handler.handleClick.bind(handler));

Without bind(), this would refer to the element that triggered the event, not the Handler instance.

Partial Application

You can use bind() to create a function with preset arguments.

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // Output: 10

Working with setTimeout or setInterval

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

Greeter.prototype.greet = function () {
  console.log("Hello, " + this.name);
};

const greeter = new Greeter("Alice");

setTimeout(greeter.greet.bind(greeter), 1000);

If you don’t bind greet(), this will be undefined or refer to the global object.

Difference Between `call()`, `apply()`, and `bind()`

call(): Invokes the function immediately with specified this and arguments.
apply(): Same as call(), but arguments are passed as an array.
bind(): Returns a new function with bound this and optional arguments, but does not invoke it immediately.

Example:

function sayHello(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const person = { name: "John" };

sayHello.call(person, "Hi");       // Output: Hi, John
sayHello.apply(person, ["Hello"]); // Output: Hello, John
const boundFunc = sayHello.bind(person, "Hey");
boundFunc();                       // Output: Hey, John

Important Characteristics

bind() does not modify the original function.
The returned function from bind() can be reused or stored.
It works seamlessly with object-oriented patterns and ES6+ classes.

Conclusion

The bind() method is a powerful feature of JavaScript that helps manage the this context in a reliable way. It is especially helpful in asynchronous programming, event handling, and functional programming patterns. Mastering bind() equips developers with deeper control over function execution, leading to more robust and maintainable code.

Master OOP in JavaScript and Instantly Level Up Your Code

Shifa — Fri, 30 May 2025 16:38:43 +0000

Object-Oriented Programming (OOP) is a programming paradigm built around the concept of "objects" — reusable pieces of code that bundle together data and behavior. While JavaScript is known for its flexibility and support for multiple paradigms, its object-oriented features have grown significantly over time, especially with the introduction of ES6 classes.

In this article, we’ll explore how OOP works in JavaScript, why it matters, and how you can apply it in real-world development.

What is OOP?

At its core, OOP is about modeling software using objects. Each object can represent a real-world entity, containing both:

Properties (data/state)
Methods (functions/behavior)

The four main principles of OOP are:

Encapsulation: Keeping data and related behavior bundled together.
Abstraction: Hiding complex implementation details and showing only the necessary parts.
Inheritance: Creating new classes from existing ones to reuse code.
Polymorphism: Using a common interface to interact with different underlying forms (objects).

How JavaScript Implements OOP

Unlike classical OOP languages like Java or C++, JavaScript is prototype-based. However, with ES6, JavaScript introduced the class syntax, which made OOP feel more familiar and accessible.

1. Creating a Class

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const person1 = new Person("Alice", 25);
person1.greet(); // Output: Hi, my name is Alice and I'm 25 years old.

2. Inheritance

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

const student1 = new Student("Bob", 20, "12th");
student1.greet();  // Inherited method
student1.study();  // New method

3. Encapsulation and Private Fields

With modern JavaScript, you can use private class fields using the # symbol:

class BankAccount {
  #balance = 0;

  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
    }
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount();
account.deposit(100);
console.log(account.getBalance()); // 100

Attempting to access #balance directly from outside the class will result in an error, which helps enforce encapsulation.

4. Polymorphism

Polymorphism is often implemented using method overriding. Here's a basic example:

class Animal {
  speak() {
    console.log("Animal speaks");
  }
}

class Dog extends Animal {
  speak() {
    console.log("Dog barks");
  }
}

const myDog = new Dog();
myDog.speak(); // Output: Dog barks

Even though myDog is an instance of Dog, we can treat it as an Animal and call speak. The overridden method will still run, demonstrating polymorphism.

When to Use OOP in JavaScript

OOP is helpful when you're building applications that need:

A clear and reusable structure (like user, product, and order objects)
Complex data relationships
Encapsulation of logic and data
Scalable code organization, especially in large front-end or back-end apps

However, it’s not always necessary. JavaScript’s functional programming capabilities are strong, and in some scenarios, functions and closures might be a better fit.

Conclusion

Object-Oriented Programming brings a powerful set of tools for organizing and structuring your code in JavaScript. Understanding how to create and extend classes, encapsulate data, and use polymorphism will help you write more maintainable and flexible applications.

While JavaScript gives you multiple ways to solve problems, mastering OOP is a valuable skill that pays off, especially as your projects grow in complexity.

V8 Engine, JavaScript APIs, and XMLHttpRequest (XHR)

Shifa — Thu, 29 May 2025 19:46:10 +0000

JavaScript is a foundational language for building dynamic web applications. However, JavaScript does not operate alone. Behind the scenes, it relies on powerful engines and interfaces provided by host environments such as web browsers and server-side runtimes. This article explores three key components in this ecosystem: the V8 engine, JavaScript APIs, and the XMLHttpRequest (XHR) object.

The V8 Engine

The V8 engine is an open-source JavaScript engine developed by Google. It is written in C++ and is used in several major platforms, including Google Chrome and Node.js. The primary responsibility of V8 is to compile and execute JavaScript code.

Key Features of V8:

Just-In-Time (JIT) Compilation: V8 compiles JavaScript code directly into optimized machine code at runtime, improving performance.
Garbage Collection: V8 includes an efficient memory management system to automatically handle memory allocation and deallocation.
Execution of Core JavaScript: It provides execution support for the ECMAScript standard (core JavaScript features).

It is important to note that V8 itself does not include any Web APIs such as XMLHttpRequest, fetch, or setTimeout. These APIs are provided by the environment in which JavaScript runs.

JavaScript APIs and the Host Environment

JavaScript APIs refer to the set of interfaces provided by the host environment, which can be a web browser or a runtime like Node.js. These APIs extend the capabilities of JavaScript beyond its core syntax and functions.

In a web browser, the following are examples of commonly used APIs:

DOM (Document Object Model): Methods to manipulate HTML and CSS (document.querySelector, getElementById, etc.).
Timer APIs: Methods for managing timed operations (setTimeout, setInterval).
Networking APIs: Interfaces for making HTTP requests (fetch, XMLHttpRequest).
Storage APIs: Access to local storage and session storage (localStorage, sessionStorage).

These APIs are built into the browser and are accessible to JavaScript code running in that context.

XMLHttpRequest (XHR)

XMLHttpRequest is a browser-provided Web API that allows JavaScript to make HTTP requests to a server without requiring a full page reload. It was one of the original technologies that enabled asynchronous web applications, commonly referred to as AJAX (Asynchronous JavaScript and XML).

How XMLHttpRequest Works:

A new XMLHttpRequest object is created using new XMLHttpRequest().
The request is configured using the open() method (e.g., HTTP method, URL).
The request is sent using the send() method.
The response is handled via event listeners or callback functions.

Example:

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log("Response:", xhr.responseText);
    }
};

xhr.send();

Modern Alternative: `fetch()`

While XMLHttpRequest is still widely supported and used, modern JavaScript development often prefers the fetch() API, which provides a more flexible and promise-based approach to making HTTP requests.

Conclusion

Understanding the distinction between the V8 engine, JavaScript APIs, and specific interfaces like XMLHttpRequest is crucial for modern JavaScript development. The V8 engine executes core JavaScript, while Web APIs such as XMLHttpRequest are provided by the browser environment. Together, they enable developers to build rich, interactive web applications.

By separating concerns between the language engine and the runtime environment, JavaScript remains versatile and powerful, whether running in a browser or on a server.

Understanding Events in JavaScript

Shifa — Wed, 28 May 2025 17:48:27 +0000

JavaScript is a powerful programming language that enables interactive web experiences. One of its core features is the ability to respond to events—actions that occur in the browser, such as user interactions or system-generated occurrences. Events are central to making web pages dynamic and responsive.

What Are Events?

An event is a signal that something has happened. Common examples include:

A user clicking a button
A webpage finishing loading
A key being pressed
A form being submitted
The mouse hovering over an element

These events can be captured and handled using event listeners, allowing developers to define custom behaviors in response.

The Event Model

JavaScript uses an event-driven model, where event handlers (functions) are assigned to respond when specific events occur. The key concepts include:

Event Source: The HTML element where the event occurs
Event Type: The kind of event (e.g., click, keydown, submit)
Event Handler: The function that executes in response to the event

Adding Event Listeners

There are several ways to attach event handlers in JavaScript.

1. Inline HTML Event Handlers

<button onclick="greet()">Click Me</button>

<script>
  function greet() {
    alert("Hello, world!");
  }
</script>

2. Using DOM Element Properties

const button = document.getElementById("myButton");
button.onclick = function () {
  alert("Button clicked");
};

3. Using `addEventListener` (Recommended)

const button = document.getElementById("myButton");
button.addEventListener("click", function () {
  alert("Clicked using addEventListener");
});

This approach is preferred because it allows multiple listeners for the same event and offers better control.

Common Event Types

Mouse Events: click, dblclick, mouseenter, mouseleave, mousedown, mouseup, mousemove
Keyboard Events: keydown, keypress, keyup
Form Events: submit, change, focus, blur
Window Events: load, resize, scroll, unload

Event Object

When an event occurs, an event object is automatically passed to the event handler. This object contains useful information such as:

event.type: Type of event
event.target: The element that triggered the event
event.preventDefault(): Prevents the default action
event.stopPropagation(): Stops the event from bubbling up

Example:

document.getElementById("myForm").addEventListener("submit", function (event) {
  event.preventDefault(); // Prevents page reload
  console.log("Form submitted");
});

Event Propagation

There are two main phases in event propagation:

Capturing Phase: The event moves from the root to the target element
Bubbling Phase: The event bubbles up from the target to the root

By default, most events bubble. You can handle events in either phase using addEventListener with the optional third argument:

element.addEventListener("click", handler, true); // Capturing
element.addEventListener("click", handler, false); // Bubbling (default)

Removing Event Listeners

To remove an event listener:

function handleClick() {
  console.log("Clicked");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

Note that the reference to the function must be the same when removing it.

Conclusion

Events are fundamental to creating interactive web applications. Understanding how to work with them effectively—using event listeners, managing propagation, and leveraging the event object—is essential for every JavaScript developer. Mastering these concepts enables you to build responsive, user-friendly interfaces that react to real-time user actions.

From Zero to Streaking: My 1-Month Journey on DEV

Shifa — Tue, 27 May 2025 09:31:12 +0000

"I started with no idea, no support… but I kept going. Today, I stand with a streak, five badges, and a heart full of purpose."

Hey Dev Community 👋

Exactly one month ago, I took a leap into the unknown. I had no roadmap, no prior audience, and no clue if anyone would even read my words. But I made a promise to myself: I’d show up every day, no matter what.

🎉 1300+ Followers and Growing!

This journey has not only helped me build consistency and confidence—it’s helped me connect with over 1300 amazing developers who now follow my journey.
To each one of you: thank you. Your support means the world to me.

🚀 The Start Wasn’t Easy

Let’s be honest—I had no idea how DEV.to worked.

I didn’t know what to write.
I didn’t think anyone would care.
I had zero support and almost gave up before even clicking "Publish".

But then… I hit publish.
That first article was messy, simple, raw—but it was mine.

💬 Then Came the Comments

Instead of silence, I got something unexpected: engagement.
People actually read what I wrote. They commented. They encouraged me.

So I started doing the same.

I began commenting on others’ posts—not just to be noticed, but to learn, grow, and connect. That interaction sparked a habit, and soon, I earned three comment streak badges. 🎯

🏅 The Badges That Told My Story

In just one month, I’ve earned:

🏆 First Article Badge – for taking the first step
💬 3 Streak Comment Badges – for showing up in conversations
📅 Weekly Writing Challenge Badge – for participating in the amazing community challenge

And now, I’m excitedly waiting for my 4-Week Writing Streak Badge—because yes, I’ve written every single day for the past month, without missing even one.

💡 What I’ve Learned

Consistency beats perfection – I didn’t write the “best” article every day, but I kept writing.
The community matters – DEV is more than a platform, it’s a support system.
Progress is personal – You don’t need a million followers to feel proud. Sometimes, just hitting "Publish" is the biggest win.

🙌 To You, Reading This

If you’re where I was—unsure, nervous, wondering if anyone will care—this is your sign: Start now.

You don’t need to be perfect. You just need to begin.

Thank you to everyone who's read, commented, and supported me in this journey.
I’m just getting started—and I hope to see you on this path too.

Let’s keep writing, together. 🖊️🔥

DEV Community: Shifa

Day 6: String Compression (LeetCode 443)

Problem Overview

Approach

Steps:

Code Implementation (C++)

Example

Complexity Analysis

Key Insights

Introduction to Server in Backend Development

What is Server?

Introduction to MongoDB and NoSQL — Day 1

What is MongoDB?

What Does “NoSQL” Mean?

SQL vs NoSQL — What's the Difference?

MongoDB Structure: Key Terminology

Why MongoDB is Flexible

What You’ll Do Today

1. Install MongoDB

2. Explore MongoDB Compass

3. Insert a Document

Starting My Backend Journey:

Completed My JavaScript A to Z Series

"The Untold Secret Behind JavaScript's Flexibility: Lexical Scope and Closures Revealed"

What is Lexical Scoping?

Example:

Closures: Lexical Scoping in Action

Example:

Why Should You Care About Closures?

Common Real-World Use Case: Data Privacy

Lexical Environment and Scope Chain

The Bottom Line

Next Steps

Conclusion

Getters and Setters in JavaScript

What are Getters and Setters?

Why Use Getters and Setters?

Syntax

In Object Literals

In ES6 Classes

Key Considerations

Use Cases

Conclusion

Understanding `bind()` in JavaScript

What is bind()?

Syntax

Why is bind() Useful?

Common Use Cases

Difference Between call(), apply(), and bind()

Important Characteristics

Conclusion

Master OOP in JavaScript and Instantly Level Up Your Code

What is OOP?

How JavaScript Implements OOP

1. Creating a Class

2. Inheritance

3. Encapsulation and Private Fields

4. Polymorphism

When to Use OOP in JavaScript

Conclusion

V8 Engine, JavaScript APIs, and XMLHttpRequest (XHR)

The V8 Engine

Key Features of V8:

JavaScript APIs and the Host Environment

XMLHttpRequest (XHR)

How XMLHttpRequest Works:

Example:

Modern Alternative: fetch()

Conclusion

Understanding Events in JavaScript

What Are Events?

The Event Model

Adding Event Listeners

1. Inline HTML Event Handlers

2. Using DOM Element Properties

3. Using addEventListener (Recommended)

Common Event Types

Event Object

Event Propagation

Removing Event Listeners

What is `bind()`?

Why is `bind()` Useful?

Difference Between `call()`, `apply()`, and `bind()`

Modern Alternative: `fetch()`

3. Using `addEventListener` (Recommended)