DEV Community: Shameel Uddin

How JavaScript Works (Part 2) – Execution Context & Call Stack Explained in Simple Words

Shameel Uddin — Mon, 02 Mar 2026 10:47:03 +0000

In Part 1, we explored how JavaScript runs under the hood and discussed the JavaScript engine and runtime environment.

In this part, we’re going deeper.

We will understand:

What is Execution Context?
What are the different phases and types of an Execution Context?
What is the Call Stack?
How functions are executed internally? And most importantly we’ll visualise everything with a simple code example.

Let’s begin.

What is an Execution Context in JavaScript?

Whenever JavaScript runs your code, it creates a special environment called an Execution Context.

Think of it as a container where JavaScript keeps everything needed to execute your code.

Phases of Execution Context

Each execution context goes through two phases:

1. Creation Phase (Memory Allocation Phase)

Before executing your code, JavaScript:

Scans the code
Allocates memory for variables
Stores function definitions in memory

Important behavior:

Variables declared with varare initialized with undefined
Functions are stored entirely in memory
let and const are hoisted but kept in a temporal dead zone No code is executed here. Only memory setup happens.

2. Execution Phase

In this phase, JavaScript:

Executes code line by line
Assigns actual values to variables
Runs functions when invoked
Evaluates expressions

This is where real execution happens.

Types of Execution Context

There are two main types of execution context:

1.Global Execution Context (GEC)

Created when JavaScript starts running your file
Exists only once and stays in the Call Stack until the program closes
Represents the global scope

2.Function Execution Context (FEC)

Created whenever a function is called or invoked
Each function call creates a new execution context
Has its own memory and thread of execution

What’s Inside an Execution Context?

Thread of Execution

This is the order in which JavaScript runs your code line by line.

JavaScript is (initially) single-threaded, meaning it executes one line at a time.

Memory

Each execution context has its own memory.

Global context → Global memory
Function context → Local memory

This is why variables inside functions are not accessible outside (unless returned).

What is the Call Stack?

JavaScript uses a special memory structure to keep track of all execution contexts called the Call Stack.

It follows LIFO structure, i.e., "Last In, First Out" (like a stack of plates).

The last function added to the stack, will be executed first, and will be popped out of the stack first.

How all of this works: Step-by-Step!

Let’s understand this using a simple example.

const firstName = "Munzah";
const lastName = "Shah";
const age = 27;
const designation = "Software Engineer";

function createFullName() {
  return firstName + " " + lastName;
}

function displayUserDetails() {
  console.log("Full Name:", createFullName());
  console.log("Age:", age);
  console.log("Designation:", designation);
}

displayUserDetails();

Step-by-Step Execution Breakdown

Step 1: Global Execution Context is Created

When the file runs:

Global Execution Context (GEC) is created
It is pushed into the Call Stack

Call Stack:

| Global |

Step 2: Creation Phase of Global Context

Memory is allocated:

firstName → undefined
lastName → undefined
age → undefined
designation → undefined
createFullName → function definition
displayUserDetails → function definition

Step 3: Execution Phase Begins

Now values are assigned:

firstName → "Munzah"
lastName → "Shah"
age → 27
designation → "Software Engineer"

Functions are still not executed just stored.

Step 4: Function Invocation Happens

When this line runs:

displayUserDetails();

A new Function Execution Context is created.

Call Stack becomes:

| displayUserDetails |
| Global             |

Now JavaScript executes displayUserDetails.

Step 5: Inside displayUserDetails()

The thread of execution encounters another function call:

createFullName()

Another Function Execution ExecutionContext is created.

Call Stack now looks like this:


| createFullName     |
| displayUserDetails |
| Global             |

Step 6: createFullName Executes

It returns:

"Munzah Shah"

Once function is completed:

Its result is returned to the parent execution context.
And It's execution context is popped out from the stack.

So now, call Stack becomes:


| displayUserDetails |
| Global             |

Step 7: Remaining Code In displayUserDetails() Function Executes

Now:

Age: 27
Designation: Software Engineer

After finishing the execution of this function:

displayUserDetails() context is removed
Stack pointer goes back to Global

Call Stack:

| Global |

Important Rule to Remember

JavaScript always executes the function that is on the top of the Call Stack.

That’s why it follows LIFO.

Final Output of This Code

Full Name: Munzah Shah
Age: 27
Designation: Software Engineer

Why Understanding This is Important

If you understand:

Execution Context
Call Stack
Creation Phase
Execution Phase

You will easily understand:

Hoisting
Scope
Closures
Asynchronous JavaScript
Event Loop

And that’s when JavaScript truly starts making sense.

Summary

JavaScript creates a Global Execution Context (GEC) when a program starts running.
Every execution context goes through two phases:
Creation Phase (memory allocation)
Execution Phase (code runs line by line)
Variables and function definitions are stored in memory during the creation phase.
Each function call creates a new Function Execution Context (FEC).
Every execution context contains:
Its own memory
A thread of execution
JavaScript uses a Call Stack to manage execution contexts.
The Call Stack follows the **Last In, First Out (LIFO) **principle.
The function at the top of the stack is executed first.
Once a function finishes execution, it is removed (popped) from the stack.
The Global Execution Context remains until the program finishes running.
Understanding execution context and call stack makes advanced concepts like hoisting, closures, and async JavaScript easier to understand.

Instance Variables and Instance Methods in Python

Shameel Uddin — Fri, 20 Feb 2026 09:29:14 +0000

In Object-Oriented Programming (OOP), two of the most important concepts are:

Instance Variables
Instance Methods

If you don’t understand these properly, OOP will always feel confusing.

So let’s break everything down step by step in the simplest way possible.

Let’s Start with a Simple Real-Life Example

Imagine a classroom. Learn How Instance Variables and Methods Actually Work in Python

You (teacher) are the class blueprint.
Your students are objects.

Every student:

Has a name
Has a roll number
Has marks
Can perform actions (submit homework, give test, etc.)

Now here’s the important part:

Even though all students come from the same class,
each student has their own data.

That “own data” is exactly what we call:

Instance Variables

And the actions they perform?

Instance Methods

What is an Instance Method in Python?

An instance method is a method that belongs to an object and works on that specific object.

Definition (Simple Words)

An instance method:

Is defined inside a class
Has self as its first parameter
Can access and modify instance variables

Why Do We Need self?

When we create multiple objects from a class, each object has its own data.

self tells Python:

Work with the current object that is calling this method

Example

class User:
    def activate(self):
        self.is_active = True

If we create two objects:

user1 = User()
user2 = User()

When we call

user1.activate()

Python automatically does this internally:

User.activate(user1)

That means:

self = user1
So instance methods always operate on the object that calls them

What is an Instance Variable in Python?

An instance variable is a variable that belongs to a specific object.

It is created using:

self.variable_name = value

Important Concept

Instance variables:

Store data
Are unique for each object
Exist inside the object
Can be different for different objects Example

def set_email(self, email):
    self.email = email

When we call:

user1.set_email("shameel@hasabtech.com")

It becomes:

user1.email = "shameel@hasabtech.com"

Now email belongs only to user1.

If we check user2, it still does NOT have email until we set it.

That is why instance variables are object-specific.

Complete Example with Deep Explanation

Let’s build a proper example and understand what happens step by step.

class User:

    def activate(self):
        self.is_active = True

    def deactivate(self):
        self.is_active = False

    def set_email(self, email):
        self.email = email

    def show_status(self):
        print(f"{self.email} is {'active' if self.is_active else 'not active'}")

Step 1: Creating Objects (Instances)

user1 = User()
user2 = User()

When we execute this:

Python creates two separate objects in memory
Each object has its own space to store data
Both objects have access to all instance methods

Important: Object and Instance mean the same thing.

What Happens Inside Memory?

Even though both objects come from the same class blueprint:

user1 has its own data storage
user2 has its own data storage

They do NOT share instance variables.

This is the beauty of OOP.

Understanding Instance Methods in Action

Now let’s call:

user1.set_email("shameel@hasabtech.com")

What happens?

Python sees user1
It passes user1 automatically as self
Inside method:

self.email = email

Becomes

user1.email = "shameel@hasabtech.com"

Now:

user1 has email
user2 still has nothing

This proves instance variables belong to objects.

Adding More Data to Objects

Now:

user1.activate()
user2.deactivate()

This creates:

user1.is_active = True
user2.is_active = False

Again:

Each object has its own is_active
They are completely independent

This independence is the core idea of instance variables.

Why Methods are Called Instance Methods?

Because they:

Work with instance variables
Depend on the object
Use self to access object data

For example:

def show_status(self):
    print(f"{self.email} is {'active' if self.is_active else 'not active'}")

This method:

Reads self.email
Reads self.is_active
Prints data of that specific object

So this method behaves differently for each object.

That’s why it is called an instance method.

Common Beginner Confusion

Many students think:
Is self a keyword?
No.

self is just a naming convention.

You can write:

def activate(myobject):

def activate(myobject):

But by convention, we always write self

Why This Concept is Very Important?

If you understand instance variables and instance methods, you can:

Build login systems
Create user management systems
Understand Django models
Work with APIs
Design real-world applications

Without understanding self, OOP will feel complicated.

Final Understanding

Whenever:

You attach data using self → It becomes an instance variable.
You define a method with self → It becomes an instance method.

Each object:

Has its own data
Shares method structure
Behaves independently

Summary

Object = Instance. They mean the same thing.
Instance Variables are the "adjectives" (data) that describe the object.
Instance Methods are the "verbs" (actions) the object can perform.
self is the bridge that connects the method to the specific object’s data.
Each object has its own copy of instance variables

Understanding self in Python OOP: A Beginner Friendly Guide

Shameel Uddin — Thu, 12 Feb 2026 11:31:49 +0000

One of the biggest "roadblocks" for Python beginners is the self keyword. You see it in almost every class, it’s the first argument in every method, and yet, we don't seem to pass any value to it when we call the function.

If you’ve ever wondered:

What does self actually do?
Why do I have to type it every single time?
How does Python know which object I’m talking about?

Then this Blog is for you. Let’s break it down.

What is a Class and a Method?

Before we talk about self, remember the relationship between a Class and an Object.

Class: A blueprint (like a drawing of a house).
Object (Instance): The actual house built from that blueprint.

If you build five houses from the same blueprint, they all have the same structure, but they have different owners and different furniture inside. self is the way the house "identifies" itself.

class User:
    def set_email(self, email):
        self.email = email

Here:

User → Class
set_email() → Method

What is `self`? (The Simple Definition)

selfrepresents the specific instance (object) of the class.

When you define a method inside a class, Python needs a way to distinguish between different objects.

class Robot:
    def introduce(self):
        print(f"Hello, I am {self.name}")

In the code above, self.name tells Python: Look for the name attribute inside THIS specific robot, not all robots in the world.

The Secret Behind Method Calls

This is where most beginners get confused. Look at these two ways to do the exact same thing:

Method 1: The Manual Way (Internal)

User.set_email(user1, "ammad@hasab.tech")
User.set_email(user2, "shameel@hasab.tech")

In this way:

We manually pass the object
user1 becomes self
This helps us understand what Python does internally

Method 2: The Pythonic Way (Standard)

user1.set_email("ammad@hasab.tech")
user2.set_email("shameell@hasab.tech")

Behind the scenes, Python converts this into:

User.set_email(user1, "ammad@hasab.tech")

That’s why:

This method is simpler and mostly used in real projects.

How `self` Works with Different Objects

When this line runs:

user1.set_email("ammad@hasab.tech")

self→ user1
user1.email → "ammad@hasab.tech"

When this line runs:

user2.set_email("shameel@hasab.tech")

self → user2
user2.email → "shameel@hasab.tech"

This shows that self ensures each user instance uses it’s own data or value, which is the core idea of Object Oriented Programming.

Why `self` Is Important

self allows Python to:

Identify which object is calling the method
Store data separately for each object
Avoid data overwriting between objects

Without self, Python would not know where to store object-specific values.

Common Beginner Mistakes

Thinking self is a keyword (it’s not, but it’s a strong convention)
Forgetting to add self as the first parameter
Confusing instance variables with class variables

Always remember:

self.variable_name

means the variable belongs to that specific object.

Summary

self represents the current object in Python
It helps Python identify which object is calling a method
A method can be called in two ways:
Using class name (manual)
Using object name (automatic and common)
self changes depending on the object calling the method
It allows each object to maintain its own data independently

Understanding self is a foundation of Python OOP, and once you grasp it, many advanced concepts become much easier.

Understanding Classes and Objects in Python

Shameel Uddin — Mon, 02 Feb 2026 18:52:38 +0000

Now it’s time to clearly understand what a class is and what an object is in Object-Oriented Programming (OOP) using Python.

These two concepts are the foundation of OOP, and once you understand them, everything else becomes much easier.

What Is a Class in Python?

In simple words, a class is a blueprint or a template for creating objects that share common properties.

To understand this, let’s use a real-world example.

As discussed in our previous blog, first the concept of a human being was created, and then you and I were created from that concept. That concept is like a class, and our individual existence is like an object.

In Python terms:

A class defines the structure (attributes) and behavior (methods).
It describes what an object will look like
It doesn’t occupy memory by itself because it’s just a concept. So basically, a class is just a blueprint, not a real thing.

What Is an Object in Python?

An object is the actual house built from that blueprint. In programming, we call this an instance.

You can think of it this way:

Class = Blueprint
Object = Instance created from that blueprint

In Python, you’ll hear people use "object" and "instance" interchangeably. Don't let that confuse you they refer to the same thing: the real, usable version of a class.

Built-in Classes in Python

You might be surprised to learn that you’ve been using classes since Day 1. Every data type in Python—strings, integers, lists, and dictionaries is actually a class.

Try running this in your terminal:

           print(type("Hello"))
          //Output: <class 'str'>

See that? str is a class provided by Python. When you create a string like name = "Shameel", you are actually creating an object of the str class.

            s0 = ""
            s1 = "Shameel"

Here:

str is the class
str() creates an object
The parentheses () mean that an object of the class is being created
So:
str → blueprint
str() → object (instance)

This is why we say class and instance (object) are closely related.

Literal Syntax in Python

When you write:

s2 = "Shameel"

This is called shorthand literal syntax.

Behind the scenes, Python still creates an object of the strclass. Python just hides this complexity to make the language easy and beginner-friendly.

Modules and Built-in Classes

Every class in Python belongs to a module.

The file you run is also considered a module
Built-in classes like str belong to the builtins module

That’s why when you inspect a string class, you’ll see it comes from builtins, even though you didn’t import anything manually.

Objects and Memory in Python

When you create an object, Python carves out a little piece of your computer's RAM to store it. Each object gets a unique "home address."

If you print a custom object, you’ll often see something like this: <__main__.User object at 0x106558c20>
That long code at the end (0x1065...) is the physical memory address where that specific object lives.

<__main__.User object at 0x106558c20>

This address shows where the object exists in memory.

Creating a Custom Class in Python

Now let’s move from built-in classes to custom classes.

To create your own class in Python, you use the class keyword:

class User:
    pass

Here:

User is the class
pass means the class is empty for now To create an object from this class:

u1 = User()

The () tells Python to create an object from the User class and store it in the variable u1.

You can create multiple objects from the same class:

u2 = User()

This means:

One class
Multiple objects

Just like one concept of humans, but many human beings.

Understanding main in Python Output

When you see output like:

<__main__.User object>

It means:

__main__ is the current file being executed
User is the class defined in that file

If the class were defined in another file, you would see the module name instead of __main__

Checking an Object’s Class with type()

You can check the class of any object using:

type(u1)

Output:

<class '__main__.User'>

This confirms that u1 is an object of the User class.
Checking Object Instances with isinstance()
This is a great way to "double-check" an object. In programming, any function starting with "is" usually returns a True or False (Boolean).

Examples:

isinstance(s1, str)   // True
isinstance(s1, int)   // False
isinstance(u1, User)  // True

In programming, when a sentence starts with “Is”, the result is usually a Boolean value (True or False).

This method is widely used in Python to validate object types.

Summary

Object-Oriented Programming (OOP) in Python is built around classes and objects.
A class is a blueprint that defines structure and behavior.
An object (instance) is a real entity created from a class.
Python’s built-in data types like str, int, list, and dict are actually classes.
Objects are created using parentheses () and stored in memory.
You can create your own custom classes using the class keyword.
Use type() to check an object’s class.
Use isinstance() to verify whether an object belongs to a specific class.
Understanding classes and objects is essential for mastering Python OOP.

Stay connected with hasabTech for more information:

Python OOP Prerequisites: The Essential Checklist for Beginners

Shameel Uddin — Wed, 28 Jan 2026 14:20:20 +0000

Before diving head-first into the world of Object-Oriented Programming (OOP), you need a solid grasp of a few "bread and butter" Python concepts. Think of it like building a house: you can't install the roof (OOP) until you’ve laid the foundation (Basics).

Don’t worry this series is designed for beginners. You don’t need to be a senior dev to get started, but having these few tools in your belt will make the transition to OOP feel like a breeze rather than a climb.

Core Python Basics You Should Know

To get the most out of this OOP series, ensure you're comfortable with the following three pillars:

1. Variables and Data Types

In OOP, we store data inside "Objects." To do that, you must understand how Python handles data. You should be familiar with:

Strings: For names and descriptions.
Integers/Floats: For counts, ages, or prices.
Booleans: For "True/False" logic (essential for state management).
Lists: For storing collections of objects.

Why it matters: In OOP, these variables will eventually become Attributes the characteristics that define your objects.

2. Functions in Python

Functions are the "actions" of your code. Before moving to OOP, you should know:

How to define a function (def).
How to pass arguments (positional and keyword).
How to return values to use elsewhere.

Why it matters: In the OOP world, functions living inside a class are called Methods. If you can write a function, you’re already 80% of the way to writing a class method.

3. Working with Dictionaries

You should understand how Key-Value pairs work because:

Dictionaries represent structured data.
Internally, Python actually uses dictionaries to store object attributes.

If you can pull a value from a dictionary using a key, you'll find the logic of accessing object properties very familiar.

What You Do NOT Need to Know

It’s easy to feel overwhelmed by the vast Python ecosystem. You do not need to master these before starting this series:

Advanced Decorators or Generators: We’ll keep things simple.
Web Frameworks: No Django or FastAPI knowledge is required.
Database Management: We won’t be touching SQL or NoSQL in the beginning.

Our focus is strictly on Core Python OOP step by step.

Setup & Environment

Before we write our first class, make sure your environment is ready:

Python Installed: Ensure you have Python 3.x on your machine.
Terminal Access: You should be comfortable running a script via python filename.py.
Code Editor: Use whatever you like (VS Code, PyCharm, or even a simple text editor). No complex setup or heavy IDE configuration is required.

// Run this to check your Python version
import sys
print("Python version") //Should be 3.7 or higher

How to Master This Series

To truly "level up" your skills, don't just be a spectator. Engage with the content:

Follow the Sequence: Concepts build on each other. Don't skip ahead!
The "Type-Along" Rule: Never just read the code. Type it out. Muscle memory is a real thing in programming.
Break Things: Change a value, delete a colon, or rename a variable. Seeing how the code breaks is the fastest way to learn how to fix it.

Resources & Practice

We believe in Hands-on Learning. To support you:

All code examples are available on our GitHub repository.
Links to the code are provided in our YouTube series descriptions.
Clone it, fork it, or copy it just make sure you practice it.

Final Note

Object Oriented Programming isn't just a syntax change; it’s a mindset shift. It will help you write cleaner, reusable, and more professional code. Stay consistent, keep practicing, and don't be afraid to ask questions.

What Is Object Oriented Programming (OOP) in Python?

Shameel Uddin — Thu, 22 Jan 2026 11:48:06 +0000

Object Oriented Programming (OOP) in Python is a programming approach where software is built using objects that represent real world entities. Each object is created from a class which acts as a blueprint defining its data (attributes) and behavior (methods).

Why Do We Need Object Oriented Programming?

In the early days of programming, developers wrote code line by line variables and functions were all here and there. Data was scattered across the program.

This worked for small scripts, but as applications grew larger (such as social media platforms) this spaghetti code became difficult to manage, maintain, and scale.

Object Oriented Programming solves this problem by organizing code into structured, reusable components.

Understanding OOP with a Real World Example

Think about the creation of a human being. There is a basic biological blueprint that defines what makes a human:

Heart
Brain
Lungs.

While individuals may differ in appearance, the core structure remains the same.

In Python terms:

The Blueprint = Class: A Class defines common properties and behaviours.
The Human = Object: A real instance created from a class is called an Object. Each object is unique, but all objects follow the same structure defined by the class.

What Is a Class in Python?

A class in Python is a template used to create objects. It generally defines two things:

Attributes: Data or properties (e.g., eye color, height).
Methods: Functions that describe behavior (e.g., walking, talking).

Classes help developers write clean, organized, and reusable code.

What Is an Object in Python?

An object in Python is a real instance created from a class. While a class is just a blueprint, an object is the actual thing that exists and can be used in a program.

Each object:

Contains its own data (attributes)
Can perform actions using methods defined in the class
Is independent and unique, even if it is created from the same class

For example, if a class represents a Human, then different people are objects of that class. They all share common features defined in the class, but their values (such as name, age, or height) can be different.

In simple words:

Class = Blueprint
Object = Real-world instance created from that blueprint

Objects allow programs to work with real-world concepts, making code more organized, reusable, and easier to understand.

Why Is It Called Object Oriented Programming?

It is called Object-Oriented Programming because programs are designed as a collection of organized, purposeful objects rather than just a loose list of instructions. This approach makes software easier to understand, maintain, and expand.

Summary

OOP in Python uses objects to represent real-world entities.
A Class is a blueprint or template defining attributes (data) and methods (behaviour).
An Object is a real instance created from a class each object is unique but follows the same structure.
Early programming worked for small scripts but as applications grew this line by line code turned into unmanageable spaghetti code
OOP helps organize code, making it reusable, maintainable, and scalable.
Real-world analogy: Humans are like objects created from a blueprint (class), with core features like a heart, brain, and lungs.
Object Oriented Programming is called “object-oriented” because it treats programs as a collection of organized, purposeful objects.
Benefits of OOP: Clean code, better structure, easy maintenance, and improved scalability.

What’s Next?

Now that you understand the theory, are you ready to code? In the next blog, we will write our first Python Class and Object.

Stay connected with hasabTech:

Website: https://hasab.tech/
Facebook: https://www.facebook.com/hasabTech
LinkedIn: https://www.linkedin.com/company/hasabtech
X (Twitter): https://x.com/hasabTec
YouTube: https://youtube.com/@hasabTech
TikTok: https://tiktok.com/@hasabTech

How Does JavaScript Code Run?

Shameel Uddin — Wed, 14 Jan 2026 14:27:25 +0000

Introduction

Have you ever wondered how JavaScript code actually runs?

Does it execute on its own or is there a system working behind the scenes?

In this blog we will clearly understand:

how JavaScript code really runs?
what a JavaScript Runtime Environment is?
The role of JavaScript Engine and it's types (V8, SpiderMonkey, JavaScriptCore)
how the JavaScript V8 Engine looks like from inside? (Call Stack, Heap, Parser, JIT Compiler, Interpreter, and Garbage Collector)

This blog builds the foundation for understanding:

Call Stack in detail
The working of JavaScript Engine, Execution Thread and Context
The event loop
Callback queue
MicroTask queue
Async JavaScript

which we will cover in our future blogs. In this blog, we focus on building a strong mental model of the JS engine itself.

Does JavaScript Run on Its Own?

The simple answer is No.

JavaScript code cannot do anything on its own unless it is executed inside a Runtime Environment.

A runtime environment provides all the necessary tools, libraries, and features required for JavaScript to interact with the real world such as handling clicks, accessing files, or making network requests.

What Is a JavaScript Runtime Environment?

JavaScript Runtime Environment is a system where JavaScript code lives and runs.

You may have heard some popular runtime environments, such as:

Web Browsers (Chrome, Firefox, Safari)
Node.js
Bun
Deno

All of these provide an environment that allows JavaScript to execute.

What Does a Runtime Environment Provide?

Runtime environment offers:

JavaScript Engine (the heart ♥️ of the runtime)
Environment-specific APIs
Event Loop, Callback Queue, and MicroTask Queue.

Together these components allow JavaScript to perform real-world tasks.

JavaScript Engine: The Heart of Runtime Environment

JavaScript Engine is the core component responsible for executing JavaScript code.

It is not something mysterious a JavaScript engine is simply a program that reads, compiles, and runs your code.

Popular JavaScript Engines

Different environments use different engines:

Chrome & Node.js → V8 Engine
Firefox → SpiderMonkey
Safari → JavaScriptCore

Environment Specific APIs

Runtime environments also provide APIs which allow JavaScript to communicate with other software and systems. APIs depends on which environment they are in (like, Browser, Server, etc)

Browser APIs Examples
When JavaScript runs in a browser it gets access to:

DOM (Document Object Model)
Fetch API
setTimeout and setInterval
localStorage
Event handling APIs

Server-Side APIs (Node.js)

In server environments like Node.js, JavaScript has access to APIs such as:

File System (fs module)
Networking
Global objects
Process management

These APIs are not available in the browser which shows that APIs depend on the runtime environment.

Event Loop (Brief Overview)

The runtime environment also contains:

Event Loop
Callback Queue
Microtask Queue

These components handle asynchronous operations in JavaScript. We will discuss them in detail in upcoming blogs.

Inside the JavaScript V8 Engine

Now let’s take a deeper look at how a JavaScript V8 Engine (which is the most popular one) works internally.

Core Components of a JavaScript V8 Engine

1. Heap Memory

Heap Memory is an unstructured memory space used to store:

Objects
Variables
Functions

It is mainly used for dynamic memory allocation.

2. Call Stack

The Call Stack keeps track of:

Function calls
Execution context

It follows the Last In First Out (LIFO) principle. We’ll discuss this in detail in the next blog.

Additional V8 Engine Components

Modern JavaScript engines like V8 also include several optimisation and processing components:

1. Parser

Reads JavaScript code
Converts it into AST (Abstract Syntax Tree)
AST represents code in a tree structured format

2. Interpreter

Reads and executes code line by line
Produces intermediate bytecode

3. JIT Compiler (Just-In-Time Compiler)

Converts byte code into machine readable code
Improves performance by optimising frequently executed code

4. Garbage Collector

Automatically cleans unused memory
Removes objects and variables that are no longer in use

In our next blog, we will understand the working and execution of JavaScript V8 Engine with the help of a simple code snippet example.

Let’s quickly revise what we learnt in this blog.

Summary:

The JavaScript language itself is limited until and unless it is inside of a Runtime environment.
The runtime environment acts as a container that provides additional context, tools, and capabilities, enabling JavaScript to interact with browsers, servers, and outside world.
The runtime environment comprises of JS Engine, environment specific APIs, Event Loop, Callback Queue, and MicroTask queue.
Engine is the main working component of a runtime, which handles the execution.
JavaScript V8 Engine comprises of a Heap Memory, Call Stack, Parser, JIT Compiler, Interpreter, and a Garbage Collector.

What’s Next?

In our next blog, we will understand the execution and working of the JavaScript engine with the help of a simple code example, where we will explore the:

Call Stack and Heap Memory in action
Execution Thread and Execution Context

Stay connected with hasabTech:

Website: https://hasab.tech/
Facebook: https://www.facebook.com/hasabTech
LinkedIn: https://www.linkedin.com/company/hasabtech
X (Twitter): https://x.com/hasabTec
YouTube: https://youtube.com/@hasabTech
TikTok: https://tiktok.com/

Mastering Intermediate JavaScript

Shameel Uddin — Wed, 07 Jan 2026 12:06:36 +0000

Understanding How JavaScript Really Works

This Intermediate JavaScript Tutorial series is designed for developers who already understand JavaScript basics and want to go beyond syntax to understand how JavaScript actually works behind the scenes.

If you’re comfortable with variables, loops, and functions, but struggle with asynchronous code, unexpected bugs, or confusing behavior, this series will help you build real JavaScript understanding instead of relying on guesswork.

In this Intermediate JavaScript course, we explore the core concepts that power modern web applications, including:

How JavaScript really runs (JavaScript engine and execution context)
Call stack & memory heap
Scopes in JavaScript
Closures
Hoisting (var vs let vs const)
The this keyword in different contexts
Prototype & prototype chain
Event loop (microtasks vs macrotasks)
Asynchronous JavaScript fundamentals
Callbacks and Callback Hell
Promises
Async / await with real-world examples

Many people say they “know JavaScript.”
But knowing JavaScript syntax and understanding how JavaScript actually works behind the scenes are two very different things.

If you can write variables, functions, loops, and basic logic, congratulations!
You are no longer a beginner.

However, becoming an Intermediate JavaScript developer means going much deeper than writing basic code.

This blog introduces what Intermediate JavaScript really means and why it is a critical step in your web development journey.

Beginner vs Intermediate JavaScript: What’s the Difference?

At the beginner level, you focus on:

Writing correct syntax
Making code “work”
Using variables, loops, functions, and conditions

At the intermediate level, your focus shifts to:

Understanding why your code behaves a certain way
Knowing what happens internally in JavaScript
Debugging issues without guessing
Writing code that is predictable, scalable, and maintainable

This is where real JavaScript learning begins.

What Does an Intermediate JavaScript Developer Know?

An intermediate JavaScript developer is someone who:

Understands JavaScript behavior, not just syntax
Can read and understand other developers’ code
Writes clean, debuggable, and scalable code
Knows how asynchronous JavaScript works
Can confidently debug bugs and explain why they happened
Is prepared to move into frameworks like React or backend tools like Node.js

This level is about clarity and confidence, not just writing more code.

Why Do Many Developers Get Stuck?

Many developers move forward too fast.

They jump into:

React
Node.js
Frameworks and libraries

Without fully understanding JavaScript core behavior

This creates a dangerous gap.

Later, this gap shows up as:

Bugs they can’t explain
Code they don’t fully trust
Unexpected behavior in real projects
Fear of debugging complex issues

The problem is not frameworks. The problem is weak JavaScript foundations.

Why Understanding JavaScript Behavior Matters

JavaScript behaves differently from many other programming languages, which is why simply knowing the syntax is not enough. At the intermediate level, developers begin to understand why bugs happen, why code behaves unexpectedly, and how JavaScript handles execution and asynchronous tasks internally. This deeper understanding allows developers to debug issues logically instead of relying on guesswork. Ultimately, this knowledge is what separates average developers from confident and professional JavaScript engineers.

About the hasabTech Intermediate JavaScript Series

This is exactly why we designed the Intermediate JavaScript Series by hasabTech. The series focuses on understanding how JavaScript behaves, not just how it is written. It covers core concepts that developers usually skip, helps build strong fundamentals for real-world projects, and prepares learners for modern frameworks like React, backend tools such as Node.js, and advanced JavaScript development. Because knowing JavaScript is different from truly understanding JavaScript

Watch the full video here

Stay connected with hasabTech:

Website: https://hasab.tech/

Facebook: https://www.facebook.com/hasabTech

LinkedIn: https://www.linkedin.com/company/hasabtech

X (Twitter): https://x.com/hasabTec

YouTube: https://youtube.com/@hasabTech

TikTok: https://tiktok.com/@hasabtech

Career Accelerator Program to help learners become job ready

Shameel Uddin — Mon, 05 Jan 2026 07:35:35 +0000

hasabTech Education Career Accelerator Program 🚀

Submission for DEV's Worldwide Show and Tell Challenge Presented by Mux

What We Built

The hasabTech Career Accelerator Program is a structured learning system designed to make tech learners job-ready developers. Unlike traditional tutorials, our program simulates a real-world software engineering environment, where participants learn in sprint-based formats, work individually on small tasks, collaborate in teams on real-world projects, track their progress, receive mentorship from industry developers, and grow their network by learning in a diverse and thriving tech community.

By the end of the program, learners don’t just know code, they know how to work like a developer in a real software development environment, which makes them job-ready.

Who this is for

Beginners who know basic HTML/CSS/JS but feel stuck
Self-taught developers struggling to stay consistent
Students preparing for junior frontend or full-stack roles

Pitch Video

Live Demo & Testing Access

Live Dashboard

Explore the working dashboard here:

👉 https://accelerator.hasab.tech/

How to Test the Platform

You can explore the platform in two ways, depending on what you want to evaluate:

Option 1: New Learner Experience

Sign up as a learner
Complete the eligibility criteria
Test:
- Sprint flow
- Progress tracking
- Dashboard features

Option 2: Enrolled Learner View (Quick Access)

Use the following demo credentials to directly view an already enrolled student’s dashboard:
Email: test-email@hasab.tech

Password: A3f$9kLp

Tip for Reviewers

Option 1 is recommended if you want to see our enrollment and eligibility criteria process. Option 2 is recommended if you want to quickly evaluate sprint structure, progress visualization, and learner analytics without going through onboarding.

The Story Behind It

Most learners don’t struggle because they lack talent, they struggle because learning in tech is unstructured.

We wanted to solve this by creating a guided system: learners follow structured paths, complete practical sprints, track streaks, and get access to mentorship, internships, open source opportunities, resume polishing, and a community.

It’s not just a course, it’s a career accelerator.

Technical Highlights

Sprint-based learning: Tasks are divided into practical, time-boxed sprints with clearly defined outcomes.
Automated eligibility testing: Learners submit JS tasks via GitHub pipelines, automatically validated before enrollment approval.
Dashboard: Learners can see their analytics and can submit daily and weekly updateds.
Gamification: Learners can score points after submitting daily updates, weekly updates, completing tasks and completing sprints. If tasks and sprints are not completed on time, they get half the points.
Streaks: Similar to snapchat, we introduced streak feature, so that students remain hooked in daily learning.
Leadersboard: Learners can see others on leadersboard and can compete with others which reinforces healthy learning environment.
Discord Integration: All the updates are sent to discord and everyone can see who submitted daily/weekly reports, completed tasks, etc which increases visibility throughout the community.
Mentorship & Community: 1:1 mentorship calls, real-world project opportunities, and a growing developer community on Discord.
Tech Stack: React for frontend, Node.js backend, GitHub Actions for automation, and a scalable database for storing learner progress.

By submitting this, we hope to show how structured guidance + real-world practice + mentorship can help learners transition from hobby coders to job-ready developers.

How to Handle Custom Responses and Headers in NestJS with @Res

Shameel Uddin — Mon, 28 Jul 2025 11:59:29 +0000

In the previous blog, we discussed how to modify HTTP status codes and headers while sending responses to the client. In this post, we'll explore another approach: Modifying headers manually in a NestJS controller using @Res() — similar to how it's done in Express.js.

Express vs. NestJS Response Flow

NestJS, by default, handles HTTP responses for you. This means you can simply return a value from your controller, and Nest will convert it into a response, but sometimes, you might want fine-grained control, like setting custom headers or using an existing Express-style library. In such cases, you can manually handle the response.

How to Modify Headers with @Res()

We already learned how to intercept Express request in our controller so we imported a request like

import {Controller, Get, HttpCode, HttpStatus, Header, Request}from '@nestjs/common';

we can also import a response here like with full form Request or short form Res

import {Controller, Get, HttpCode, HttpStatus, Header, Res}from '@nestjs/common';

Similarly we also import types for this particular Response from Express

import {Response} from 'express';

Now Create a @Get Request

Get()   
FindAll(@Res() response: Response) {
Response.status(HttpStatus.OK) .send();
}

Understanding @Res, res, and Response

In this code

import {Controller, Get, HttpStatus, Res} from "@nestjs/common";
import { Response } from "express";

@Controller("response")
export class ResponseController {
  @Get()
  findAll(@Res() res: Response) {
    res.status(HttpStatus.OK).send();
  }
}

@Res() → Decorator to inject the response object
response → A custom variable name (can also be res)
Response → Type from express for better IntelliSense and typing

So finally, we can modify our header manually and send response to our client.

Conclusion

While NestJS encourages using its built-in response handling, the @Res decorator lets you leverage Express-style syntax for fine-grained control. Use this sparingly to avoid losing Nest’s powerful features.

Note: Use manual response handling sparingly, as it bypasses features like interceptors, exception filters, and built-in decorator.

That said, stay tuned for more advanced NestJS tips!

Video explanation available here ↓

Follow me for more such content:
YouTube: https://www.youtube.com/@ShameelUddin123
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123

AutoTube Thumbnail Generator with Google AI Studio

Shameel Uddin — Sat, 19 Jul 2025 17:22:19 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I built a Next.js app that generates YouTube thumbnails using AI-generated images. The goal was simple: I wanted to stop wasting time manually designing thumbnails and instead leverage AI to automate the process with minimal inputs.

The app lets users:

Type a prompt (e.g., "Integrating GraphQL with NestJS")
Optionally upload logos or related images
Generate a 1280x720 thumbnail using a generative AI model (like Imagen or Gemini)

It combines visual design with contextual relevance — a great tool for creators, educators, and developers who frequently publish technical videos.

Prompt Given to Google AI Studio

To generate the base app using Google AI Studio, I provided this detailed prompt:

I want to build a Next.js app that uses Imagen or any image generation model to generate YouTube thumbnails based on a text prompt.

🔧 Core Features:

The user enters a text prompt (e.g., "Integrating GraphQL with NestJS").

The user can optionally upload one or more images (e.g., logos of GraphQL and NestJS).

The app generates a 1280x720 YouTube thumbnail image using the prompt and uploaded images.

A preview of the generated thumbnail is shown to the user.

The user can download the image or regenerate it with the same or new input.

Tech Stack:

Use Next.js (with the App Router or Pages Router)

Use TailwindCSS for styling

Allow local image upload (drag and drop or file picker)

Use an image generation API like Imagen, Gemini’s image model, or a placeholder mock function

Optional Features:

Save recent thumbnails

Show prompt history

Support templates like “tutorial”, “review”, “vs comparison” etc.

Build the full app including:

UI with input fields for prompt and image uploads

Call to image generation logic

Display area for result with download button

Basic error handling

This prompt helped Google AI Studio scaffold the core app logic and interface with ease.

Demo

My Experience

What I Learned

How to break down a product idea into a developer-friendly AI prompt
The power of using specific, structured prompts with Google AI Studio
How to rapidly prototype apps with Next.js and generative AI APIs
How AI generation can speed up creative workflows like video publishing

What Surprised Me

The responsiveness and quality of Google AI Studio in interpreting complex prompts
How easily the app handled image uploads and rendered generated content in a modern UI

PS. If you’re publishing regularly on YouTube or social media, I highly recommend building something like this — it saves time and looks.

This is far from production-ready but I intend to go down the road sooner =)

Fix error: Delete ` ` eslint (prettier/prettier), and allow use double `cr` Visual Studio Code

Shameel Uddin — Thu, 03 Jul 2025 13:38:31 +0000

Most of the times I keep encountering this issue and I have to google around how to fix it.. So, writing a blog for my future self to just refer from here and it might help others as well...

There are certain solutions which require changing into prettier or eslint config but the following solution works without those changes.

Problem

Windows: Uses both carriage return (CR) and line feed (LF) — written as CRLF.
Linux and modern macOS: Use only line feed (LF).

These differences can cause compatibility problems when sharing or collaborating on code across different environments.

The Role of Git’s `core.autocrlf`

Git offers a configuration setting called core.autocrlf to manage line ending conversions:

On Windows, this is typically set to true by default.
When core.autocrlf is true, Git automatically converts line endings to CRLF when checking out files.
When committing, Git converts them back to LF to store in the repository.

The Problem in Practice

When cloning a project on a Windows machine: Git converts all file line endings to CRLF in your local working directory.

Solution

To avoid automatic line ending conversions by Git, you can disable the behavior with the following command:

git config --global core.autocrlf false

This tells Git not to modify line endings when checking out or committing files. It helps maintain consistent line endings, which is especially useful when collaborating across different operating systems.

Note: After updating this setting, it's recommended to delete your local repository and clone it again. This ensures that all files are pulled with the correct line endings according to the new configuration.

DEV Community: Shameel Uddin

How JavaScript Works (Part 2) – Execution Context & Call Stack Explained in Simple Words

What is an Execution Context in JavaScript?

Phases of Execution Context

1. Creation Phase (Memory Allocation Phase)

2. Execution Phase

Types of Execution Context

1.Global Execution Context (GEC)

2.Function Execution Context (FEC)

What’s Inside an Execution Context?

Thread of Execution

Memory

What is the Call Stack?

How all of this works: Step-by-Step!

Step-by-Step Execution Breakdown

Step 1: Global Execution Context is Created

Step 2: Creation Phase of Global Context

Step 3: Execution Phase Begins

Step 4: Function Invocation Happens

Step 5: Inside displayUserDetails()

Step 6: createFullName Executes

Step 7: Remaining Code In displayUserDetails() Function Executes

Important Rule to Remember

Final Output of This Code

Why Understanding This is Important

Summary

Instance Variables and Instance Methods in Python

Let’s Start with a Simple Real-Life Example

What is an Instance Method in Python?

Definition (Simple Words)

Why Do We Need self?

What is an Instance Variable in Python?

Important Concept

Complete Example with Deep Explanation

Step 1: Creating Objects (Instances)

What Happens Inside Memory?

Understanding Instance Methods in Action

Adding More Data to Objects

Why Methods are Called Instance Methods?

Common Beginner Confusion

Why This Concept is Very Important?

Final Understanding

Summary

Understanding self in Python OOP: A Beginner Friendly Guide

What is a Class and a Method?

What is self? (The Simple Definition)

The Secret Behind Method Calls

Method 1: The Manual Way (Internal)

Method 2: The Pythonic Way (Standard)

How self Works with Different Objects

Why self Is Important

Common Beginner Mistakes

Summary

Understanding Classes and Objects in Python

What Is a Class in Python?

What Is an Object in Python?

Built-in Classes in Python

Literal Syntax in Python

Modules and Built-in Classes

Objects and Memory in Python

Creating a Custom Class in Python

Understanding main in Python Output

Checking an Object’s Class with type()

Summary

Python OOP Prerequisites: The Essential Checklist for Beginners

Core Python Basics You Should Know

1. Variables and Data Types

2. Functions in Python

3. Working with Dictionaries

What You Do NOT Need to Know

Setup & Environment

How to Master This Series

Resources & Practice

Final Note

What Is Object Oriented Programming (OOP) in Python?

Why Do We Need Object Oriented Programming?

Understanding OOP with a Real World Example

What Is a Class in Python?

What Is an Object in Python?

Why Is It Called Object Oriented Programming?

What is `self`? (The Simple Definition)

How `self` Works with Different Objects

Why `self` Is Important

The Role of Git’s `core.autocrlf`