DEV Community: capscode

VegaAI - The Self Driving Agile Team

capscode — Sat, 28 Mar 2026 06:20:32 +0000

This is a submission for the Notion MCP Challenge

What I Built

VegaAI — The Self-Driving Agile Team (Powered by Notion MCP)

VegaAI is an AI-powered "Self-Driving Agile Team" platform where specialized agents— PM, Scrum Master, Dev, and QA—collaborate to plan and build software, one sprint at a time (Can be configurable to run multiple sprint, and multiple stories per sprint).

The core of VegaAI is Notion. Instead of just being a static documentation tool, Notion acts as the Executive Brain and State Machine for the entire AI workforce. Every PRD, feature, sprint, and story lives in Notion, and the agents use Notion MCP to read project state, update tasks, assign themselves to stories, and provide structured feedback per sprint.

Video Demo

Check out the walkthrough of the VegaAI

Show us the code

The repository for VegaAI is available on GitHub:

GitHub Repository — VegaAI

How I Used Notion MCP

Most AI coding tools use a local database. VegaAI is different. I’ve turned Notion into a real-time command center where the human and the AI can work on the same board simultaneously.

1. The "Agentic Toolbox" (MCP Methods Used)

I didn't just use one or two tools. I integrated the full power of the Notion MCP server across my entire agent fleet:

notion_create_page: Used by the PM Agent to document the initial PRD.
notion_create_database: Used once per project to build a customized Agile sprint board.
notion_create_database_item: Used by the Scrum Master to decompose features into actionable stories.
notion_update_page: The most used tool — utilized by ALL agents to flip statuses, update assignees, and append technical notes or comments.
notion_query_database: My UI's "Heartbeat" — used to ensure the Web Dashboard and Notion board stay in perfect sync.
notion_append_block_children: Scrum agent appends standup content to log page

2. Agent Workflow & Tool Specialization

My agents aren't just one big brain; they are specialists with their own focused toolsets:

PM/Scrum Agent: Orchestrates the "Agile Brain." It uses Notion MCP to set up the board and define Acceptance Criteria (AC) inside Notion properties.
Dev Agent: The "Builder." It reads the AC from Notion, then switches to the GitHub MCP to run github_create_repository and github_push_files and pushes the code to the repository.
QA Agent: The "Gatekeeper." It reviews the Dev's GitHub commits and then uses notion_update_page to record its result. If a AC fails, it writes a structured Failure: note back to Notion and re-assigns the story to the Dev agent.

3. Multi-LLM Orchestration

VegaAI is model-agnostic. I built a custom LLM Adapter that dynamically injects MCP tool schemas into the conversation. Whether you’re using OpenA, Anthropic, Groq or Gemini, the system "hot-loads" the Notion MCP tool definitions into the LLM's toolset during every turn.

4. The Robustness Loop (MAX_ATTEMPTS)

LLMs can occasionally hallucinate. I implemented a MAX_ATTEMPTS retry strategy. If the Dev agent fails or the QA agent finds a bug, the system resets the story status in Notion, QA mark the story as failed and assign it to DEV along with proper comments in the story and DEV tries again—preserving all previous failure notes so the next attempt is smarter. User can also move the story to next sprint manually if any story failed and I want to start new sprint.
Also after each dev work the DEV agent commit the code and push it to the GitHub repository via GitHub MCP.

5. Adding stories manually to the sprint

User can add stories manually to the sprint by clicking on the "Add Story" button in the UI. The story will be added to the current sprint and the agents will start working on it. User can also move the story to next sprint manually if any story failed and I want to start new sprint.

Why this matters

By integrating Notion MCP, I’ve moved "AI coding" from a black box CLI into a shared visual workspace. You can watch stories move from Todo → In Dev → In QA → Done in real-time as the agents work. It’s not just an AI tool; it’s a transparent, collaborative agency that lives in your Notion workspace.

What I will add in next version

Multiple projects support
Git branching per story + PRs
Initiate new project.
MCP servers for database and have full stack application support.
WebSocket activity feed (replace polling)
Persistent database
More LLM support

Built with Next.js 14, Notion MCP, GitHub MCP, and the power of specialized agentic loops.

How to configure SSH for accessing remote repositories

capscode — Wed, 30 Jul 2025 09:23:18 +0000

Introduction: SSH vs HTTPS for GitHub Authentication

When working with remote repositories, there are two primary ways developers authenticate their local machines with remote repositories:

HTTPS Authentication
SSH (Secure Shell) Authentication

NOTE: In this article we will see the steps for GitHub, but for other service providers the steps will be similar.

1. HTTPS Login

With HTTPS, every time you interact with a remote repository (like git push, git pull, or git clone), GitHub asks for your username and personal access token (PAT)/Password.

Requires credential caching or a credential manager to avoid typing every time
Simple to set up
Can be cumbersome if working with multiple accounts.

Learn how to setup multiple git/github account for SSH

2. SSH Authentication

SSH uses a public-private key pair for secure, password-less authentication between your machine and GitHub.
Once you add your public SSH key to your GitHub account, your computer can securely authenticate with GitHub without needing to enter your username and password or PAT.

No need to enter credentials for every operation
More secure, encrypted connection
Easily manage multiple accounts using SSH config Link
Perfect for frequent collaborators or CI/CD setups

Why Choose SSH?

Secure, encrypted connection
No repeated password/token prompts
Clean handling of multiple GitHub accounts
Works well for automation, CI/CD, and team setups

Let's see the steps to configure the SSH Authentication.

Step 1: Check for Existing SSH Keys

See if you already have any SSH keys:

ls -al ~/.ssh

If you see files like id_ed25519 and id_ed25519.pub, you might already have one & If you don't want to generate a new key then skip Step 2 & proceed to the next step.

If there is no file/key present or you want to generate a new keys then follow the next steps.

Step 2: Generate a New SSH Key

Use this command to create a new Ed25519 SSH key:

ssh-keygen -t ed25519 -C "your_email@example.com"

NOTE: This will replace the existing key if any and it will affect the auth if configured any.

After running this command you will see 2 files named id_ed25519 (private key) and id_ed25519.pub (public key) in your .ssh folder.

If you need to keep the existing ones for a different use (another service or project), generate a new key with a custom file name:

ssh-keygen -t ed25519 -C "your_email@example.com" -f ~/.ssh/custom_key_name

After running this command you will see 2 files named custom_key_name (private key) and custom_key_name.pub (public key) in your .ssh folder.

For time being, Let's assume we have id_ed25519 and id_ed25519.pub keys in our .ssh folder

Explanation:

-t ed25519: Specifies the key type (Ed25519 is modern, secure, and fast)
-C "your_email@example.com": A comment to label the key (usually your GitHub email)
-f ~/.ssh/custom_key_name: Defines the full path and filename of both public and private key being created

When prompted:

Enter file location: press Enter to accept default (/home/some_name/.ssh/id_ed25519)
Enter a passphrase (optional but recommended for extra security)

Step 3: Add the SSH Key to Your SSH Agent

Start the SSH agent:

eval "$(ssh-agent -s)"

Add your new SSH private key to the agent:

ssh-add ~/.ssh/id_ed25519

If you have generated custom key in step 2 then add that key as well,

ssh-add ~/.ssh/custom_key_name

Check if its added:

ssh-add -l

Optional: If you have multiple keys, manage them using an SSH config file (~/.ssh/config):

Host github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519
  IdentitiesOnly yes

Host bitbucket.org
  HostName bitbucket.org
  User git
  IdentityFile ~/.ssh/custom_key_name
  IdentitiesOnly yes

NOTE: You don't need to add anything in the config file if there is only 1 key pairs.

Step 4: Add the SSH Public Key to GitHub

Copy the public key:

cat ~/.ssh/id_ed25519.pub

Copy the output.

Go to:

GitHub -> Settings
SSH and GPG keys
Click New SSH key
Paste your public key
Give it a Title and Save

Step 5: Test the SSH Connection

Verify your SSH connection to GitHub:

ssh -T git@github.com

If you have multiple keys and have entry in the config file.

ssh -T git@github.com        # uses id_ed25519
ssh -T git@bitbucket.org     # uses custom_key_name

NOTE: Here github.com and bitbucket.org is a host alias name (and not the keyname) you define in your ~/.ssh/config file.

On success, you should see:

Hi your_username! You've successfully authenticated...

Step 6: Configure Git User Info (Optional but Recommended)

Set your Git global identity:

git config --global user.name "Your Name"
git config --global user.email "your_email@example.com"

This identity is used for commit history metadata.

If you have multiple keys and have entry in the config file, then you have to setup git per repo identity

In GitHub repo

git config user.name "github user"
git config user.email "githubemail@exmaple.com"

In BitBucket repo

git config user.name "bitbucket user"
git config user.email "bitbucketemail@bitbucket.com"

Step 7: Set SSH Remote URL for Your Repository

If your repo is already cloned using HTTPS (example: https://github.com/username/repo.git), convert it to SSH:

Check current remote:

git remote -v

Change it to SSH:

git remote set-url origin git@github.com:username/repository.git

Replace username and repository with your actual GitHub username and repo name.

NOTE: Make sure that, If you have configured the config file then in place of github.com your host alias name will go.

From now on, when you git push or git pull, Git will use your SSH key for authentication.

Lets see some QnA

Q. What if we have only one key pair, in this case do we need any config file ?

A. No we don't need any config file.

Q. Will `ssh -T git@github.com` , `ssh -T git@bitbucket.org` uses same key if there is a single key pairs?

A. If You Have Only One Key (id_ed25519)

Let’s say your ~/.ssh/ folder has:

id_ed25519
id_ed25519.pub

And you haven’t set any custom config.

Then:

Command	What SSH Will Do
`ssh -T git@github.com`	Offer the `id_ed25519` key for authentication to GitHub
`ssh -T git@bitbucket.org`	Offer the same `id_ed25519` key for authentication to Bitbucket

Because — by default — SSH will:

Check the SSH agent for loaded keys
Then look for default keys in:

~/.ssh/id_rsa
~/.ssh/id_ecdsa
~/.ssh/id_ed25519
etc.

If it finds only one key, it offers that key for any connection, whether it’s GitHub, Bitbucket, GitLab, or any other SSH service.

If both services (GitHub and Bitbucket) have this same public key registered in their settings, authentication will work fine.

Recap:

Generate SSH key
Add to SSH agent
Add public key to GitHub
Test SSH connection
Set or update remote URL
Optionally configure Git global username and email

Add Dark theme & Light theme in website

capscode — Sun, 08 Jun 2025 11:00:06 +0000

Table of content

Introduction
Need of dark mode on websites
Different ways of enabling dark mode on your websites
1. Using color-scheme CSS property.
2. Using prefers-color-scheme media query.
3. Using color-scheme meta tag.
4. Setting color-scheme value in meta tag using JavaScript.
5. Setting attributes in the body tag using JavaScript.
6. Setting class name in html tag using JavaScript.
Additional concepts

Introduction

Enabling dark mode and light mode on a website involves creating a user interface (UI) that allows users to switch between two different color schemes: one with lighter backgrounds and darker text (light mode) and one with darker backgrounds and lighter text (dark mode). This can enhance the user experience by making the website more accessible and comfortable to view in different lighting conditions.

Each web browser has its own default CSS styles, often referred to as "user agent stylesheets". These stylesheets provide default styling for HTML elements that aren't explicitly styled by a web page's CSS.
So when you create an element in HTML and don't give any styling to it, generally it used to take the default styling from the user-agent stylesheet and even these stylesheets have beautifully handled all the scenarios of light and dark mode based on the user OS theme preferences.

Need of dark mode on websites

Most people love to interact in dark mode and if you do not have this functionality in your website then there is a high chance that they would not like to interact with your website and may leave from there.

A lot of developers struggle to build the dark mode functionality in their websites due to which they use libraries or complicate their codes.
In this article let's see what are the different ways using which you can build the dark mode / light mode functionality in your website without using any third-party library.
In some of the ways we will only use HTML and CSS and we will also use JavaScript to build this feature using some interactions like buttons, toggles or checkboxes.

Different ways of enabling dark mode on your website.

1. Enable dark mode using `color-scheme` CSS property.

color-scheme is a CSS property that defines which color schemes a web page or HTML elements in a webpage can use based on the user Operating System theme selection. It affects how the user agent selects the colors for displaying various UI elements when there is no CSS defined for any particular element.
This property indicates to the browser which color scheme options should be used depending on the value provided to this CSS property.

Values we can provide to color-scheme are,

    color-scheme: normal;
    color-scheme: light;
    color-scheme: dark;
    color-scheme: light dark;
    color-scheme: only light;

The default value is normal.

Example:

:root {
    color-scheme: dark;
    /* above code means dark theme supported */
}

Let's say we have this CSS defined in our CSS code, this indicates the browser's user-agent to use only dark theme by default without checking which theme is there in the user's Operating System.

and you will see the below output.

Now, let's see one more case,

:root {
    color-scheme: dark light;
    /* above code means both dark and light theme is supported */
}

Here we have informed user-agent to use both dark and light themes, Hence browser will check the OS theme selection and based on that it will apply the color theme.

Let's see the output based on OS theme.

When the user has a dark OS theme

When the user has a light OS theme

Advantages of using color-scheme:

By declaring support for light and dark color schemes, web pages can automatically adapt to the user's preferred theme, providing a better user experience and ensuring consistency with the operating system or browser settings.

Limitations of using color-scheme:

With color-scheme we are just declaring the theme color and the control of styling we are giving to the user-agent, we don't have any control over giving our own customized style with color-scheme.
If your design requires a specific theme irrespective of the system settings (the default ones), you’ll need additional logic to override these preferences.

If you want more control over your website design then you can use media queries prefers-color-scheme and CSS variables for finer control over your theme design.

2. Enable light/dark mode using `prefers-color-scheme` media query.

prefers-color-scheme is a media feature or a media query property using which we can customize our CSS layouts and assign our own colors/styles to the elements based on the user's OS theme preference, unlike the previous one as with color-scheme we don't have the option of providing our own customizes CSS style based on OS theme.
When the user or system has not specified a preference, you can assume a "no preference" scenario.

The values for this can be no-preference, dark and light.

    @media (prefers-color-scheme: no-preference){}
    @media (prefers-color-scheme: dark){}
    @media (prefers-color-scheme: light){}

Example:
Let's see how to handle dark mode

html {
    /* the default variables */
    --background-color: #f3c2c1;
    --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
    html {
        /* variable defined for dark theme */
        --background-color: #160100;
        --text-color: #ffffff
    }
}
@media (prefers-color-scheme: light) {
    html {
        /* variable defined for light theme */
        --background-color: #ffffff;
        --text-color: #000000;
    }
}

@media (prefers-color-scheme: no-preference) {
    html {
        /* variable defined when user has no-preference */
        --background-color: #1c0ae0;
        --text-color: #02ff6c;
    }
}

Here if you see, we have defined the background-color variable and text-colorCSS variable so by default when the user doesn't have any theme preference then the color #f3c2c1 for --background-color and #000000 for --text-color will be applied and if the user's OS has any of the themes selected then based on that theme the colors will be applied.

CSS Variables: https://www.capscode.in/blog/variable-in-css

If the user has selected a light theme:

If the user has selected a dark theme:

some corner cases,

If the user has a dark OS theme and @media (prefers-color-scheme: dark) is not defined, then whatever CSS you have written in the .html{} will be the default one.
Similarly for the light theme as well.

Example

html {
    --background-color: #f3c2c1;
    --text-color: #000000;
}

@media (prefers-color-scheme: light) {
    html {
        --background-color: #ffffff;
        --text-color: #000000;
    }
}

Based on the above code, when the OS theme is light then @media (prefers-color-scheme: light){} will be used but if the user's OS has a dark theme then the code written in html{} will be considered as we haven't defined @media (prefers-color-scheme: dark){} in our CSS code.

Let's see the output below.

If the user has a light OS theme:

If the user has a dark OS theme:

3. Enable light/dark mode using `<meta name="color-scheme" content="dark light">`

The next way of enabling light/dark mode is using a meta tag. This looks similar to the first implementation isn't it, But in the first implementation we were doing it using CSS and in this approach, we are using HTML document (meta tag). Hence we have more control over the HTML element and changing the attributes of the HTML elements. In this section, we will see the default behavior of adding color-scheme meta tag and then we will see how changing attributes will help in creating light-themed & dark-themed web apps using JavaScript in further topics.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="dark light">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>

<body>
    <section>
        <h1>Hello CapsCode...Type 3</h1>
        <p>Using meta tag as:
            &lt;meta name="color-scheme" content="dark light"&gt;
        </p>
    </section>
</body>
</html>

Here if you see we have added a meta tag named color-scheme and assigned a content value of dark light in the header of the document. This indicates that our document supports both dark and light themes based on the user's OS theme selection and the rest of the functionality is similar to the first approach discussed above.

If the user has a light OS theme.

If the user has a dark OS theme.

As of now, we have seen the different ways of enabling light mode & dark mode on the website but all of those steps are static based on the user's operating system theme selection where the user doesn't have control over switching between the themes.
Now let us see how we can add JavaScript in our code to have some interactivity and will switch between the themes in our web apps.

4. Enable dark mode by setting `color-scheme` value in the meta tag using JS

In this section, we will see how we can change color-scheme content value to dark/light when clicking on the button.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" id="colorScheme" content="">
    <title>Document</title>
    <script>
        function setColorScheme(scheme) {
            var colorSchemeMeta = document.getElementById('colorScheme');
            colorSchemeMeta.setAttribute('content', scheme);
        }
    </script>
</head>

<body>
    <section>
        <h1>Hello CapsCode...Type 4</h1>
        <button onclick="setColorScheme('dark')">Enable dark mode</button>
        <button onclick="setColorScheme('light')">Enable light mode</button>
    </section>
</body>

</html>

Below is the output:

In this example, we have two buttons, one for light mode and another for dark mode, clicking on which will call the setColorScheme function and that function will add the light or dark values in the color-scheme meta tag and based on that we can see the styles in the UI.

Advantages of this method:

We can have a toggle to switch between the light and the dark mode and it's not only depend upon the OS theme.

Limitations of this method:

We cannot add our customized colors/styles for the theme selected, the colors and other styling stuff will be handled by the user-agent and we don't have much control over the UX (mostly colors).

So, The next question is how we can have both, a toggle between the themes and the control over the declaration of our custom CSS.

Well, there are multiple ways but in this article, we will see the two most easy and helpful approaches.

5. Enable dark mode by setting an attribute in the body or html tag

We can add some attribute in the html or body tag and based on the value of that attribute we can declare our CSS so that our UI will reflect the CSS based on the attribute value.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
    <script>
        function darkmode() {
            document.body.setAttribute('dark-theme', true);
        }
        function lightmode() {
            document.body.setAttribute('dark-theme', false);
        }
    </script>
</head>

<body>
    <section>
        <button id="dark" onclick="darkmode()">Enable dark mode</button>
        <button id="light" onclick="lightmode()">Enable light mode</button>
        <h1>Hello CapsCode...Type 5</h1>
        <p>Using JS and toggle buttons</p>
    </section>
</body>

</html>

So, here in the above code, you can see that we have two buttons, one for light mode and other for dark mode, clicking on one will call their respective functions which will add the dark-theme attribute in the body and give it a boolean value of true or false depending on the function called.

Let's see how our CSS is defined.

body[dark-theme=false] {
    --background-color: #f3c2c1;
    --text-color: #000000;
}

body[dark-theme=true] {
    --background-color: #160100;
    --text-color: #ffffff
}

body {
    min-height: 100vh;
    background: var(--background-color);
}

h1,p {
    color: var(--text-color)
}

Based on the defined CSS, we can see the below output.

you can see in the dev tool, how clicking on the buttons adds/changes the values in the data-theme attribute of the body tag.

When we click on the Enable dark mode button, dark-theme="true" attribute is added in the body tag and from our CSS file, the below CSS will be taken into consideration.

body[dark-theme=true] {
    --background-color: #160100;
    --text-color: #ffffff
}

Due to the above CSS background-color of the body becomes darker and the text-color becomes lighter.

When we click on the Enable light mode button, dark-theme="false" attribute is added in the body tag and from our CSS file, the below CSS will be taken into consideration.

body[dark-theme=false] {
    --background-color: #f3c2c1;
    --text-color: #000000;
}

Due to the above CSS background-color of the body becomes lighter and the text-color becomes darker.

NOTE: Instead of adding the attribute in the body tag we can add the attribute in the html tag as well and there is no restriction in providing the attribute names.

6. Enable dark mode by setting the class name in the body or html tag

In this example, we will see how we can enable dark mode in our application by adding class names in the body tag dynamically by clicking on a toggle button.

Example:

Here is our HTML code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
    <script>
        function themeHandler() {
            const themeToggleButton = document.getElementById('toggle');
            let currentTheme = document.body.classList[0]

            if (currentTheme == undefined) {
                document.body.classList.add(`dark-mode`);
            }
            if (currentTheme == "dark-mode") {
                document.body.classList.remove('dark-mode');
                document.body.classList.add(`light-mode`);
            }
            else {
                document.body.classList.remove('light-mode');
                document.body.classList.add(`dark-mode`);
            }
        }
    </script>
</head>

<body>
    <section>
        <button id="toggle" onclick="themeHandler()">Toggle Theme</button>
        <h1>Hello CapsCode...Type 7</h1>
        <p>Using JS and toggle buttons</p>
    </section>

</body>

</html>

In the above code, you can see that we are adding a class name dynamically in the body tag (i.e. dark-mode or light-mode).

Our themeHandler function first checks what is the current class name in the body tag and if there is no class name given to the body tag then we give the class name as dark-theme. We have written a condition that if the current theme is dark-mode and when you click on the toggle button it will add light-mode and vice versa.

Below is our CSS code.

  /* Default (light mode) styles */
 body.light-mode {
     --background-color: #f3c2c1;
     --text-color: #000000;
 }

 /* Dark mode styles */
 body.dark-mode {
     --background-color: #160100;
     --text-color: #ffffff
 }

 body {
     height: 100vh;
     background-color: var(--background-color);
 }

 h1, p {
     color: var(--text-color);
 }

Below is the output.

You can see in the dev tool, how clicking on the toggle buttons adds the class name in the body tag.

When dark-mode class name is added then the below CSS will be taken into consideration.

body.dark-mode {
     --background-color: #160100;
     --text-color: #ffffff
}

Due to the above CSS, the background-color of the body becomes darker and the text-color becomes lighter.

When light-mode class name is added in the body tag then the below CSS will be taken into consideration.

 body.light-mode {
     --background-color: #f3c2c1;
     --text-color: #000000;
 }

Due to this, the background-color of the body becomes lighter and the text-color becomes darker.

Additional concept

We have seen how we can play around the theme using JavaScript by adding our custom class name or attributes and assigning CSS based on this.
So let's design something different using this concept.

Use case: Click on the button to zoom-in and zoom-out contents on the website.

Example:

Below is the html code.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>

    <script>
        function zoomIn() {
            document.documentElement.setAttribute('data-zoom', "2")
        }
        function zoomOut() {
            document.documentElement.setAttribute('data-zoom', "1")
        }
    </script>
</head>

<body>
    <section>
        <h1>Hello CapsCode...Type 8</h1>
        <button onclick="zoomIn()">Zoom In</button>
        <button onclick="zoomOut()">Zoom Out</button>
    </section>
</body>

</html>

Here we have one Zoom In button and one Zoom Out button, clicking on which will add the attribute data-zoom=2 and data-zoom=1 respectively in the html tag.

Based on this we have below CSS written in our CSS file.

html {
    --background-color: #f3c2c1;
    --text-color: #000000;
    font-size: 24px
}
html[data-zoom="1"] {
    font-size: 24px
}
html[data-zoom="2"] {
    font-size: 44px
}
body {
    min-height: 100vh;
    background: var(--background-color);
    font-size: 1rem;
}
h1, p {
    color: var(--text-color)
}

In this example, we are changing the font-size of the root element based on the attribute of HTML tag.

If you want to learn more about how rem font unit works then do check out the link below.
https://www.youtube.com/watch?v=0GjVwGvvNtk

Below is the Output:

Conclusion

These are the multiple ways to add dark mode or light mode to your website, enhancing the user experience by allowing users to view content in their preferred mode. By leveraging CSS media queries, JavaScript, and browser or system theme preferences, you can provide a seamless and personalized browsing experience. Whether you choose to rely on system settings, offer a manual toggle, or a combination of both, implementing theme toggle mode ensures your website is accessible and visually appealing to a wider audience.

Hope it's a nice and informative read for you. If you find this article useful, like and share this article. Someone could find it useful too.

Difference between proto, [[Prototype]] & .prototype in JavaScript

capscode — Sun, 25 May 2025 07:52:32 +0000

Introduction

JavaScript’s prototype-based inheritance can be confusing, especially when dealing with __proto__, [[Prototype]], and .prototype. While these terms may seem similar, they serve distinct roles in how objects inherit properties and methods.

At the core of JavaScript’s inheritance system is the [[Prototype]] internal slot, which determines an object’s prototype. The __proto__ property provides a way to access or modify this prototype, though it’s now considered outdated. Meanwhile, .prototype exists only on constructor functions and is used to define methods and properties that instances should inherit.

Understanding the difference between these three is crucial for writing efficient, maintainable code. In this article, we’ll break down their roles, how they interact, and best practices for using them correctly.

Difference between `proto`, `[[prototype]]` and `.prototype` in JavaScript

In JavaScript, __proto__, [[Prototype]], and .prototype are related but have distinct roles in the prototype chain. Lets discuss them in details.

1. `proto` (Deprecated but still used)

Every JavaScript object has an internal hidden property called [[Prototype]], which links it to another object and __proto__ is a property that refers to an object's prototype.
Reference to [[Prototype]].
Using __proto__ you can access [[Prototype]] of an instance.
Though widely used, it is considered deprecated in favor of Object.getPrototypeOf() and Object.setPrototypeOf().
__proto__ is a getter/setter for [[Prototype]] and allows access to the prototype chain.
Exists on all objects (except null)
It is used for prototype-based inheritance.

Example:

const obj = { name: "Alice" };
console.log(obj.__proto__ === Object.prototype); // true

1.1 What is the use of `proto`

Let's understand this with the help of an examples,

const animal = {
  eats: true,
  sleep() {
    return "Sleeping...";
  }
};

const dog = {
  barks: true
};

// Setting animal as the prototype of dog
dog.__proto__ = animal;

console.log(dog.barks); // true (own property)
console.log(dog.eats);  // true (inherited from animal)
console.log(dog.sleep()); // "Sleeping..." (inherited method)

Explanation:

Before setting dog prototype to animal, how dog's prototype looks like.

After setting dog prototype to animal how dog's prototype looks like.

dog doesn’t have an eats property, but it inherits it from animal via __proto__.
dog.sleep() works because sleep() is found in animal.
JavaScript uses prototype chaining to look up properties.

1.2 So what is prototype chain/chaining.

Let's understand this using some real life scenarios.

const grandparent = { lastName: "Smith" };
const parent = { __proto__: grandparent }; //or we can also do parent.__proto__=grandparent
const child = { __proto__: parent };

console.log(child.lastName); // "Smith" (inherited from grandparent)

Explanation:
When accessing child.lastName, JavaScript follows the prototype chain to find the property:

Checks child.lastName → Not found in child.

Looks up child.[[Prototype]] (which is parent) → parent.lastName is also not found.

Moves up to parent.[[Prototype]] (which is grandparent) → Finds lastName: "Smith".

Returns "Smith" as the result.

Since JavaScript uses prototype inheritance, if a property isn’t found in an object, it searches its prototype and continues up the chain until it either finds the property or reaches null.

NOTE: Prototype Chain Stops at null.

console.log(grandparent.__proto__); // Object prototype
console.log(grandparent.__proto__.__proto__); // null (end of the chain)

Changing __proto__ dynamically is not recommended for performance reasons. Instead, use Object.create().
Object.create(protoObj) is a cleaner way to set prototypes.

Example:

const animal = {
  eats: true,
  sleep() {
    return "Sleeping...";
  }
};


// Creating an object with animal as its prototype
let dog = Object.create(animal);
dog.bark=true
console.log(dog.sleep()); // "Sleeping..." (inherited)

//We can also do it like the below one, but there is a catch
let dog2={bark:true}
dog2.__proto__=Object.create(animal)
console.log(dog2.sleep()) // "Sleeping..." (inherited)

You might think whats the difference between these 2 and which one should we use.

When you use Object.create(animal), it does not return animal directly. Instead, it creates a new object with animal as its prototype.
dog.__proto__ is now set to this new intermediate object, not animal directly.
This adds an extra unnecessary prototype layer, which can cause confusion. It will still works but, we don't need to add any additional layer to chain.

Why is `proto` Deprecated?

Using __proto__ is slow and can cause performance issues because, JavaScript engines optimize prototype lookups, but modifying __proto__ dynamically breaks these optimizations.

It’s better to use Object.create() to explicitly set prototypes.
This achieves the same result without modifying __proto__ directly.

What if there is an existing object with some properties in it, like below.

const animal = {
  eats: true,
  sleep() {
    return "Sleeping...";
  }
};

let dog={
  bark:true
}

// Setting up prototype inheritance
Object.setPrototypeOf(dog, animal);
//barks remains in dog because it's an own property, even after setting its prototype to animal.

Then which one to use:
Object.create()

Creates a new object instead of modifying an existing one.
More efficient
Safer and more widely recommended in modern JavaScript.
You must manually assign properties if you want to copy an existing object.
.constructor property lost using this method (for constructor function)

Object.setPrototypeOf()

Useful if you already have an object and need to change its prototype.
Slower performance (modifies prototype dynamically, which isn't optimized in JavaScript engines).
Can lead to unexpected behaviors if the object is already in use.
If the object already had a constructor, it remains intact.

2. `[[Prototype]]` (Internal)

[[Prototype]] is the actual internal prototype reference of an object.
It is not directly accessible but can be retrieved using Object.getPrototypeOf() or using __proto__.
[[Prototype]] is a hidden reference inside every object that points to another object.
It determines where JavaScript looks when trying to access a property or method on an object.

NOTE: Every object in JavaScript (except null) has a [[Prototype]].

Example

const obj = { name: "Bob" };
console.log(Object.getPrototypeOf(obj) === obj.__proto__); // true

How to Access `[[Prototype]]`?

JavaScript provides two ways to access the [[Prototype]] of an object:

Using the deprecated __proto__ property (avoid in modern code):

const obj = {};
console.log(obj.__proto__); // Logs Object.prototype

Using Object.getPrototypeOf() (recommended):

const obj = {};
console.log(Object.getPrototypeOf(obj)); // Logs Object.prototype

How `[[Prototype]]` Works?

When you try to access a property or method on an object,
JavaScript first looks for the property inside the object itself.
If not found, it searches in that object's [[Prototype]].
If still not found, it keeps searching up the prototype chain until it reaches null which we have seen above also.

Setting `[[Prototype]]`

Using Object.create() (Recommended)

const animal = {
  makeSound: function () {
    return "Some generic sound";
  }
};

const dog = Object.create(animal); // Creates `dog` with `animal` as its prototype
dog.breed = "Labrador";

console.log(dog.makeSound()); // "Some generic sound" (Inherited property)
console.log(dog.breed); // "Labrador" (own property)
console.log(Object.getPrototypeOf(dog) === animal); // true

Using __proto__ (Deprecated)

const animal = { eats: true };
const dog = { __proto__: animal }; // Avoid using `__proto__` in production

console.log(dog.eats); // true

Using Object.setPrototypeOf()

const animal = { eats: true };
const dog = {};
Object.setPrototypeOf(dog, animal); // Sets `animal` as `dog`'s prototype

console.log(dog.eats); // true

3. `.prototype` (Used in Constructor Functions)

.prototype is a property of both constructor functions (not regular objects) and ES6 classes.
It is used when creating objects via the new keyword.
Objects created using a constructor function inherit properties from .prototype.
.prototype is an object that exists on every function (except arrow functions).
When you create a new object using new keyword, that object’s [[Prototype]] / (__proto__) is set to the constructor’s .prototype.

Example

function Person(name) {
  this.name = name;
}
//adding greet function in the Person's prototype
Person.prototype.greet = function () {
  return `Hello, ${this.name}`;
};
//creating instance of the Person
const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true

Key points:

Every function has a .prototype property, which is an object.
All objects inherit from Object.prototype unless explicitly changed.
Since Person.prototype is an object, it inherits from Object.prototype, making Person.prototype.__proto__ === Object.prototype true.

What is the benefit of using `.prototype`

Examples:

function Person(name) {
  this.name = name;
  this.greet1=function(){
    return `Hello from greet1`
  }
  greet2=function(){
    return `Hello from greet2`
  }
}
Person.prototype.greet3 = function () {
  return `Hello from greet3`;
};

const alice = new Person("Alice");
const bob = new Person("Bob");

console.log(alice.__proto__==Person.prototype); //true
console.log(Person.prototype.__proto__ === Object.prototype); // true

How the instances will look like:

In this above example
greet1 is instance method means every instance gets a separate copy of greet1, which is inefficient. It behaves similarly to defining a method inside an object literal. Also meaning that changes to one instance’s method do not affect other instances.

greet2 is local method meaning greet2 is not attached to this, meaning it is just a local function inside the constructor.It is not added to the instance. It will not be accessible from alice or bob.

& greet3 is prototype method means greet3 method is added to the prototype of the Person constructor function meaning every instances will share the same function and make it more memory efficient.
greet3 is stored once in the prototype instead of being duplicated for each instance. Here Changing method affects all instances.

prototype in ES6 Classes

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

  // This is stored in Person.prototype
  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

const alice = new Person("Alice", 25);
console.log(alice.greet()); // "Hello, my name is Alice and I am 25 years old."
const bob = new Person("Bob");
console.log(alice.greet === bob.greet); // true (Shared method from prototype)
console.log(alice.hasOwnProperty("greet")); // false (Not an instance property)
console.log(Person.prototype.hasOwnProperty("greet")); // ✅ true (Stored in prototype)
console.log(alice.__proto__==Person.prototype); //true
console.log(Person.prototype.__proto__ === Object.prototype); // true

When Is a Method an "Instance Method" in classes?

If you define a method inside the constructor, then it becomes an instance method (separate for each object):

class Person {
  constructor(name) {
    this.name = name;
    this.greet = function() { // Instance method (not on prototype)
      return `Hello, ${this.name}`;
    };
  }
}

const alice = new Person("Alice");
const bob = new Person("Bob");

console.log(alice.greet === bob.greet); // false (Different function instances)
console.log(alice.hasOwnProperty("greet")); // true (Stored on each instance)

How alice instance looks like:

Overriding `.prototype`

You can completely replace .prototype, but this breaks the default constructor reference.

function Bird() {}

Bird.prototype = {
  fly: function () {
    return "I can fly!";
  }
};

const sparrow = new Bird();
console.log(sparrow.fly()); // "I can fly!"
console.log(sparrow.constructor === Bird); // false (constructor is lost)
console.log(sparrow.constructor === Object); // true (now points to Object)

Problem: The .constructor reference is lost because we replaced Bird.prototype.

Fixing the constructor:

Bird.prototype.constructor = Bird;
console.log(sparrow.constructor === Bird); // true

Best Practice: Instead of replacing .prototype, extend it using Object.create().

JavaScript's built-in objects (Array, String, Object, etc.) also use prototypes.

Extending Built-in Prototypes

Array.prototype.first = function () {
  return this[0];
};

const numbers = [10, 20, 30];
console.log(numbers.first()); // 10

NOTE: Modifying built-in prototypes is not recommended, as it can break existing code.

NOTE: JavaScript does not support multiple inheritance directly through the extends keyword. However, multiple inheritance can be simulated using mixins or composition.

Questions you might ask

Is `Object` a constructor function ?

Object is a constructor function, and Object.prototype is the default prototype for all objects in JavaScript.

List of Built-in Constructor Functions in JavaScript

JavaScript provides several built-in constructor functions that are used to create objects of different types.

1. Object Constructors

Constructor	Description	Example
`Object`	Creates a generic object.	`const obj = new Object();`
`Array`	Creates an array object.	`const arr = new Array(1, 2, 3);`
`Function`	Creates a function dynamically.	`const fn = new Function('a', 'b', 'return a + b');`
`Boolean`	Creates a boolean object.	`const bool = new Boolean(false);`
`Number`	Creates a number object.	`const num = new Number(100);`
`String`	Creates a string object.	`const str = new String("Hello");`
`Symbol`	Creates a new unique symbol.	`const sym = Symbol("id");`

2. Error Constructors

Constructor	Description	Example
`Error`	Creates a generic error object.	`const err = new Error("Something went wrong");`
`TypeError`	Represents an incorrect type.	`const err = new TypeError("Invalid type!");`
`ReferenceError`	Represents an invalid reference.	`const err = new ReferenceError("x is not defined");`
`SyntaxError`	Represents syntax errors.	`const err = new SyntaxError("Unexpected token");`
`RangeError`	Represents an out-of-range value.	`const err = new RangeError("Value out of range!");`
`EvalError`	(Legacy) Represents an error in `eval()`.	`const err = new EvalError("eval() error");`

3. Collection Constructors

Constructor	Description	Example
`Map`	Creates a map (key-value pairs).	`const map = new Map();`
`Set`	Creates a set (unique values).	`const set = new Set();`
`WeakMap`	Creates a weak map (keys are objects).	`const weakMap = new WeakMap();`
`WeakSet`	Creates a weak set (values are objects).	`const weakSet = new WeakSet();`

4. Date & Utility Constructors

Constructor	Description	Example
`Date`	Creates a date object.	`const date = new Date();`
`RegExp`	Creates a regular expression.	`const regex = new RegExp("\\d+");`
`Promise`	Creates a promise object.	`const promise = new Promise((resolve) => resolve("Done!"));`

5. Buffer & Typed Array Constructors

Constructor	Description	Example
`ArrayBuffer`	Creates a buffer for raw binary data.	`const buffer = new ArrayBuffer(16);`
`DataView`	Views data in an `ArrayBuffer`.	`const view = new DataView(buffer);`
`Int8Array`	Creates an array of 8-bit signed integers.	`const int8 = new Int8Array([1, 2, 3]);`
`Uint8Array`	Creates an array of 8-bit unsigned integers.	`const uint8 = new Uint8Array([1, 2, 3]);`
`Int16Array`	Creates an array of 16-bit signed integers.	`const int16 = new Int16Array([1, 2, 3]);`
`Float32Array`	Creates an array of 32-bit floating-point numbers.	`const float32 = new Float32Array([1.1, 2.2]);`

6. Web API Constructors (Environment-Specific)

These constructors are available in browser environments, not in pure JavaScript engines.

Constructor	Description	Example
`Event`	Creates a DOM event.	`const event = new Event("click");`
`XMLHttpRequest`	Handles HTTP requests.	`const xhr = new XMLHttpRequest();`
`WebSocket`	Creates a WebSocket connection.	`const ws = new WebSocket("ws://example.com");`
`File`	Represents a file object.	`const file = new File(["content"], "example.txt");`
`Blob`	Represents raw file-like data.	`const blob = new Blob(["Hello"], { type: "text/plain" });`

So for these constructor functions, the methods like `map` `filter` etc. are added using Array.prototype.map ??

Yes! Methods like .map(), .filter(), .push() for Array are not directly added to individual arrays. Instead, they are stored in Array.prototype, and all arrays inherit from it.

How It Works?

Example with Array.prototype.map

const arr = [1, 2, 3];

console.log(arr.map); // [Function: map] (Exists on Array.prototype)
console.log(arr.__proto__ === Array.prototype); // true

// Using the method
const newArr = arr.map((num) => num * 2);
console.log(newArr); // [2, 4, 6]

The .map() method is not inside the arr object itself, but inside Array.prototype.

How Prototype Lookup Works?

When you call arr.map(), JavaScript follows this lookup chain:

First, it checks if arr has a map method (it doesn't).
Then, it looks in Array.prototype, where map is defined.
Since it finds .map(), it executes it using arr as this.

This process is called Prototype Chain Lookup

Summary

In JavaScript, understanding __proto__, .prototype, and [[Prototype]] is essential for working with inheritance and the prototype chain. The [[Prototype]] is an internal hidden reference that every object (except null) has, pointing to its prototype, which is used for property and method lookup. Although [[Prototype]] is not directly accessible, it can be modified using Object.getPrototypeOf() and Object.setPrototypeOf(). The __proto__ property, while often used to access or change an object's prototype, is now considered outdated and should be replaced with the modern Object methods. On the other hand, .prototype is a property specific to constructor functions and ES6 classes. It is used to define methods and properties that are shared across all instances created by that constructor. When an object is created using new, its [[Prototype]] is automatically set to the constructor function's .prototype, enabling inheritance and shared behavior. Understanding these concepts is crucial for writing efficient, maintainable JavaScript code.

Constructor Function in JavaScript

capscode — Thu, 22 May 2025 04:43:25 +0000

What is a Constructor Function?

Both regular functions and constructor functions are just JavaScript functions. The difference lies in how they are used and whether they create objects when called with new.

A constructor function in JavaScript is a special type of function used to create and initialize objects. It acts as a blueprint for creating multiple instances of similar objects.

Key Characteristics of a Constructor Function:

A regular function that is called with the new keyword.
Used to initialize object properties.
By convention, named with a capitalized first letter (e.g., Person, Car).

Example:

function Person(name, age) {
  this.name = name; // Assign instance properties
  this.age = age; // Assign instance properties
}

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

console.log(person1.name); // "Alice"
console.log(person2.age);  // 30
console.log(person1 instanceof Person); // true

Adding methods to a constructor function

Inefficient Way (Defining Methods Inside Constructor)

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function () { // BAD: Creates a new function for every instance
    return `Hello, my name is ${this.name}`;
  };
}

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

console.log(person1.greet === person2.greet); // false (different function instances)

If you define a method inside the constructor, each instance will get its own copy, which is inefficient:

🚨 Problem:
Every time a new Person object is created, a new greet function is created in memory.

Efficient Way (Using `prototype` for shared methods)

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

// Adding a shared method to the prototype
Person.prototype.greet = function () {
  return `Hello, my name is ${this.name}`;
};

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

console.log(person1.greet()); // "Hello, my name is Alice"
console.log(person1.greet === person2.greet); // true (both share the same function)

Let's see why this approach is efficient.

Why using `.prototype` is Better?

Methods defined on Person.prototype are shared by all instances, reducing memory usage.
JavaScript looks up methods through the prototype chain when calling them.

📌 Prototype Chain:

person1 --> Person.prototype --> Object.prototype --> null

NOTE: JavaScript uses a prototype-based inheritance system (not class-based like some other languages, although ES6 introduced class syntax which is syntactic sugar over prototypes).

Read about prototype chain here

The `constructor` Property

Every function in JavaScript automatically has a prototype object containing a constructor property along with [[Prototype]] (hidden).

console.log(Person.prototype.constructor === Person); // true
console.log(person1.constructor === Person); // true

Ensures instances can always identify their constructor function.

Checking an Object’s Constructor

Use instanceof to check if an object was created by a constructor:

console.log(person1 instanceof Person); // true
console.log(person1 instanceof Object); // true
console.log([] instanceof Array); // true
console.log([] instanceof Object); // true

instanceof checks if an object inherits from a constructor’s prototype.

Alternative: Using `Object.create()` Instead of `new`

If you don’t want to use new, you can manually set the prototype using Object.create().

const personPrototype = {
  greet: function () {
    return `Hello, my name is ${this.name}`;
  }
};

const person1 = Object.create(personPrototype);
person1.name = "Alice";
console.log(person1.greet()); // "Hello, my name is Alice"

Allows manual prototype setting without constructor functions.

Read how Object.create() works step by step here

Enforcing `new` Usage with `new.target`

Inside a constructor function, new.target refers to the function only if called with new.

function Person(name) {
  if (!new.target) {
    throw new Error("Must use 'new' with Person()");
  }
  this.name = name;
}

const p1 = new Person("Alice"); // Works
const p2 = Person("Bob"); // Error: Must use 'new' with Person()

NOTE: Using new.target prevents accidental function calls without new.

Constructor Function vs. Class Syntax (ES6)

ES6 introduced class syntax, which is syntactic sugar over constructor functions.
Read more about classes in JavaScript here

Example:

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

  greet() {
    return `Hello, my name is ${this.name}`;
  }
}

const person1 = new Person("Alice", 25);
console.log(person1.greet()); // "Hello, my name is Alice"
console.log(person1 instanceof Person); // true

Key Differences:

class syntax is more readable.
Methods in class are automatically added to the prototype (no need to explicitly use Person.prototype).

What Happens When You Call `new Circle()`?

Example:

function Circle() {}
const circle = new Circle();

Step-by-Step Breakdown:

A new empty object is created internally:

   const circle = {}; // (internally)

The prototype is set:

   circle.__proto__ = Circle.prototype;

This sets up the prototype chain, so circle can inherit methods defined on Circle.prototype

Any properties or methods added using this inside the function are assigned directly to the new object and any properties or methods defined on Circle.prototype will be available to circle (via prototype chaining).
The new object is returned.

Checking the Prototype Relationship:

console.log(circle.__proto__ === Circle.prototype); // true

Prototype Chain:

circle --> Circle.prototype --> Object.prototype --> null

Adding Methods to `Circle.prototype`

function Circle(radius) {
  this.radius = radius;
}

Circle.prototype.getArea = function () {
  return Math.PI * this.radius * this.radius;
};

const smallCircle = new Circle(2);
const bigCircle = new Circle(5);

console.log(smallCircle.getArea()); // 12.57
console.log(bigCircle.getArea());   // 78.54
console.log(smallCircle.__proto__ === Circle.prototype); // true

Method Overriding in Prototypes

Instances can override prototype methods if needed:

smallCircle.getArea = function () {
  return "Overridden method!";
};

console.log(smallCircle.getArea()); // "Overridden method!"
console.log(bigCircle.getArea());   // 78.54 (still uses prototype)

Inspecting `Circle.prototype`

function Circle() {}
console.log(Circle.prototype); // {}
console.log(Circle.prototype.constructor === Circle); // true
console.log(Object.getPrototypeOf(smallCircle) === Circle.prototype); // true
console.log(smallCircle instanceof Circle); // true

JavaScript automatically creates an object called Circle.prototype.
This Circle.prototype object is used to define shared methods or properties that all instances of Person will inherit via their [[Prototype]] (aka __proto__).
Circle.prototype.constructor points back to Circle.

What’s Inside an Instance `circle`?

Instance Properties (Directly on `circle`)

function Circle(radius) {
  this.radius = radius; // Own property
  this.describe = function () { // Own method
    return `Radius: ${this.radius}`;
  };
}

Prototype Methods (Inherited)

Circle.prototype.getArea = function () {
  return Math.PI * this.radius * this.radius;
};

const circle = new Circle(5);
console.log(circle.hasOwnProperty("getArea")); // false
console.log("getArea" in circle); // true (inherited)

Checking Properties:

Own properties:

console.log(Object.keys(circle)); // ["radius", "describe"]

All properties (including inherited):

for (let key in circle) {
  console.log(key); // "radius", "describe", "getArea"
}

NOTE: (Important)

for...in loop
Iterates over all enumerable properties, including both own properties and inherited properties (from the prototype chain).
Object.keys(circle)
Returns an array of the object's own enumerable properties (excluding inherited properties).

Internal Structure of `circle`:

{
  radius: 5,
  describe: function() { ... },
  __proto__: {
    getArea: function() { ... },
    constructor: Circle
  }
}

Difference Between Constructor Function and Regular Function

Feature	Regular Function	Constructor Function
Usage	Called normally	Called with `new`
Purpose	Executes code	Creates objects
Naming Convention	camelCase (`doSomething`)	PascalCase (`Person`)
Prototype Linkage	No	Yes
Return Behavior	Returns explicitly	Returns `this` (new object)

Q: Is Capitalization Mandatory for Constructor Functions?

No, but it’s a best practice to use PascalCase (e.g., Person) to indicate that the function should be called with new.

Summary

In JavaScript, constructor functions serve as blueprints for creating multiple objects with similar properties and methods. When invoked with the new keyword, these functions automatically create a new object, set its prototype to the constructor's prototype property, bind this to the new object, and return it. By convention, constructor functions are named with PascalCase (like Person or Car) to distinguish them from regular functions. For efficient memory usage, methods should be added to the constructor's prototype rather than defined inside the function itself, allowing all instances to share the same method references. The prototype chain enables inheritance, where objects can access properties and methods from their constructor's prototype. Modern JavaScript offers class syntax as a cleaner alternative, but under the hood, classes still use this constructor/prototype pattern. Understanding constructor functions is fundamental to grasping JavaScript's object-oriented capabilities and prototypal inheritance system.

In-depth details of Class in JavaScript

capscode — Mon, 19 May 2025 13:12:11 +0000

Introduction to Classes

A class in JavaScript is a blueprint for creating objects. It allows you to define reusable object structures with properties and methods, making object creation and management more structured and efficient.

They introduce object-oriented programming (OOP) concepts like encapsulation, inheritance, and abstraction.

Before ES6, JavaScript used constructor functions and prototypes to create and manage objects. With ES6, class syntax was introduced to provide a cleaner, more intuitive way to define object templates.

Why Do We Need Classes If We Already Have Objects?

JavaScript allows creating objects without classes using object literals, but classes provide advantages in scalability, maintainability, and reusability. Let's explore:

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

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person("Charlie", 35);
person.greet(); // Hello, my name is Charlie

Cleaner & More Readable compared to functions with prototypes.
Encapsulation: Methods and properties are inside the class.
Inheritance: Easily extend functionality using extends.

What is `constructor()`?

constructor() is a special method for creating and initializing objects.

Advantages of Classes Over Constructor function & Plain Objects

Feature	Object Literals	Constructor Functions	Classes (ES6)
Code Reusability	No reusability	Reusable with `new`	Best for reuse
Encapsulation	Hard to group methods/data	Uses `prototype` for methods	Methods inside class
Inheritance	Not possible	Possible but complex	Easy with `extends`
Readability	Simple for small cases	Verbose with prototypes	Clean and structured

When to Use Classes?

When you need to create multiple objects with the same structure.
When your objects have methods and behavior (not just data).
When you need inheritance (extend features from a parent class).
When writing large-scale applications for better maintainability.

NOTE: If you're just defining a single, simple object, object literals are fine. But for structured, scalable code, classes are the best approach.

Why Don't We Need prototype in ES6 Classes?

With ES6 classes, methods are automatically added to the prototype, so we don't need to manually define them.
Must read about __proto__, [[Prototype]], .prototype

In the above example, greet() method is automatically stored in Person.prototype

Key Takeaway:

In Constructor Functions, we manually define methods on prototype to avoid duplication.
In ES6 Classes, methods are automatically added to prototype, making code cleaner.

Does the `greet()` Method in a Class Consume Memory Before Calling It?

Yes, but in an efficient way. In JavaScript classes, methods like greet() are stored in the prototype of the class only once and are shared among all instances.

Even though greet() is not executed until you call it, it still exists in memory as part of the class's prototype. However, since it's only stored once (not duplicated in each object), it is memory efficient compared to defining it inside the constructor.

Comparing Memory Efficiency: Class vs. Constructor Function

1. Constructor Function Without Prototype (Memory Waste)

function Person(name) {
  this.name = name;
  this.greet = function() {  // Each instance has its own copy of greet()
    console.log(`Hello, my name is ${this.name}`);
  };
}

const person1 = new Person("Alice");
const person2 = new Person("Bob");

console.log(person1.greet === person2.greet); // false (Different function instances)

Each time you create an instance of Person, a new copy of greet() is created in memory.
If you create 1000 objects, there are 1000 separate greet() functions, which wastes memory.

2. Constructor Function With Prototype (Efficient)

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

Person.prototype.greet = function() {  // Stored once in prototype
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person("Alice");
const person2 = new Person("Bob");

console.log(person1.greet === person2.greet); // true (Same function reference)

greet() is only stored once in Person.prototype and shared by all instances.
More memory-efficient than defining greet inside the constructor.

3. ES6 Class (Automatically Optimized)

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

  greet() {  // Automatically added to prototype
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person1 = new Person("Alice");
const person2 = new Person("Bob");

console.log(person1.greet === person2.greet); // true (Same function reference)

Key Takeaways

Class methods (like greet()) are memory efficient because they are stored once in the prototype and shared across all instances.
Memory is not wasted, even if you create 1000 objects, the greet() function exists only once in memory.
Method execution (calling greet()) happens only when needed, but the function itself is already available in the prototype.
Same memory efficiency as manually using prototype, but with cleaner syntax.

So yes, class methods are memory efficient compared to defining methods inside the constructor.

NOTE: In ES6 classes, methods are automatically added to the prototype of the class.

How Prototype Methods Work in Classes

In ES6 classes, all methods inside the class body are added to ClassName.prototype.

Example:

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

  // This is a prototype method
  greet() {
    return `Hello, my name is ${this.name}`;
  }
}

const alice = new Person("Alice");
const bob = new Person("Bob");

console.log(alice.greet()); // "Hello, my name is Alice"
console.log(bob.greet());   // "Hello, my name is Bob"

// Checking the prototype
console.log(alice.__proto__ === Person.prototype); // true
console.log(alice.greet === bob.greet); // true (Same function from prototype)

All instances share the same greet() method because it is stored in Person.prototype.
Even though ES6 class methods look like instance methods, they are actually prototype methods by default.

Where Is the `greet()` Method Stored?

Even though it looks like greet() is inside each instance, it's actually in Person.prototype:

console.log(Person.prototype); 
// { constructor: ƒ Person(), greet: ƒ greet() }

console.log(alice.hasOwnProperty("greet")); 
// false (greet is not in alice itself, it's in the prototype)

console.log(Object.getPrototypeOf(alice) === Person.prototype); 
// true

This is the same behavior as manually assigning methods to Person.prototype in constructor functions.

Can We Add Methods to `Person.prototype` Manually?

Yes! Even after defining a class, you can manually add prototype methods.

Person.prototype.sayBye = function () {
  return `Goodbye from ${this.name}`;
};

console.log(alice.sayBye()); // "Goodbye from Alice"
console.log(bob.sayBye());   // "Goodbye from Bob"

This works because ES6 classes still use prototypes under the hood.

Public, Private, and Protected Fields

Public Fields (Default)

All properties and methods are public by default.

class Car {
  constructor(brand) {
    this.brand = brand; // Public property
  }

  start() {// Public method
    console.log(`${this.brand} is starting...`); 
  }
}

const car = new Car("Tesla");
console.log(car.brand); // Tesla (Accessible)
car.start(); // Tesla is starting...

Private Fields (#)

Fields (properties) can be made truly private in JavaScript classes by prefixing them with #. Private fields cannot be accessed outside the class.

class BankAccount {
  #balance = 0; // Private property

  constructor(owner) {
    this.owner = owner; // Public property
  }

  deposit(amount) {
    this.#balance += amount;
    console.log(`Deposited: $${amount}`);
  }

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

const account = new BankAccount("Alice");
account.deposit(100);
console.log(account.getBalance()); // 100
console.log(account.#balance); // Error: Private field

Private Methods (#method())

Methods can be made truly private in JavaScript classes by prefixing them with #. Private methods cannot be accessed outside the class.

class Logger {
  #formatMessage(message) { // Private method
    console.log(message);
  }
  logMessage(message) {
    this.#formatMessage(message);
  }
}

const logger = new Logger();
logger.logMessage("System updated."); // System updated.
logger.#formatMessage("Test"); // Error

Key Points:

Private fields start with # and cannot be accessed outside the class.
They cannot be modified directly (account.#balance = 500 → Error).
Use them when you want to hide internal data.
Private fields are NOT accessible in subclasses.
Private methods are only accessible inside the class they are defined in.

Why Use Private Methods?

Hide implementation details.
Prevent accidental external access.

Summary:

Access Pattern	Private Method Accessible?
Inside class	Yes
From instance	No
From subclass	No

Protected Fields ( _ ) (Convention Only)

Fields (properties) can be made protected in JavaScript classes by prefixing them with _. JavaScript doesn't have true protected fields, but _ is a naming convention to indicate internal use.

class Employee {
  constructor(name, salary) {
    this.name = name;
    this._salary = salary; // Convention: Internal use
  }

  getSalary() {
    return this._salary;
  }
}

const emp = new Employee("Bob", 5000);
console.log(emp._salary); // Works, but should be avoided

NOTE: _salary is not truly private, just a hint that it's for internal use.

A protected field is:

Accessible inside the class
Accessible inside subclasses (inherited classes)
Not meant to be accessed from outside the class (but technically still possible)

Getters & Setters

Used to control access to properties while keeping them private.
getters and setters can be used for both private and public fields. However, they are most useful for encapsulating private fields to prevent direct access and modification.

class Product {
  #price;

  constructor(name, price) {
    this.name = name;
    this.#price = price;
  }

  get price() {
    return `₹ ${this.#price}`;
  }

  set price(newPrice) {
    if (newPrice < 0) {
      console.log("Price cannot be negative!");
    } else {
      this.#price = newPrice;
    }
  }
}

const item = new Product("Laptop", 1200);
console.log(item.price); // ₹ 1200 (Getter)
item.price = -500; // Price cannot be negative!

Why Use Getters & Setters?

Protect properties from invalid values.
Format or modify values dynamically (₹ 1200 instead of 1200)

Static Methods and Properties

We can define the static members using the static keyword. Static methods & properties belong to the class itself, not instances.

class MathHelper {
  static PI = 3.14159;

  static square(num) {
    return num * num;
  }
}

console.log(MathHelper.PI); // 3.14159
console.log(MathHelper.square(4)); // 16
const helper = new MathHelper();
console.log(helper.PI);        // Undefined
console.log(helper.square(4)); // TypeError: helper.square is not a function

Inheritance

Inheritance is a concept in OOPs where one class (called the subclass or child class) inherit properties and methods from another class (called the superclass or parent class).
It promotes code reusability, extensibility, and organizational clarity.

In JavaScript, inheritance is built on top of its prototype-based system — though with ES6 classes, it provides a cleaner, more familiar syntax.

In JS we can implements inheritance using the extends keyword in class-based syntax, which sets up the prototype chain between the child class and the parent class.

The subclass inherits both properties and methods from the parent.

The super() function is used inside the subclass constructor to call the parent's constructor.

Methods can be overridden in the subclass.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  // Inherits everything from Animal
  bark() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Scooby");
dog.speak(); // Scooby makes a noise.

Why Use Inheritance?

Avoids code duplication.
Makes the code more organized and reusable.

What is inherited by a subclass (extends)

All public properties and methods of the parent class
All protected fields (by convention, prefixed with _)
You can override or extend them in the child class

What is not inherited

Private Fields (#field)
Truly private fields declared with # are not accessible or inherited by subclasses
They are scoped only to the class they are defined in
If you define a private method with the same name in the child class, it’s not overriding — it’s a completely separate method.

Summary:

Feature	Inherited?	Notes
Public Methods/Fields	Yes	Via `Parent.prototype`.
Static Methods/Fields	Yes	Accessed via `Child.staticMethod()`.
Protected (`_field`)	Yes*	Convention only (no JS enforcement).
Private (`#field`)	No	Only accessible within the parent class.
Constructor Logic	No	Must call `super()` to reuse parent constructor logic.

Method overriding

Method overriding is an object-oriented programming (OOP) concept where a child (subclass) class provides a specific implementation of a method that is already defined in its parent (superclass).

When the overridden method is called from an instance of the subclass, the subclass’s version is executed instead of the parent’s version.

How It Works in JavaScript:

JavaScript uses prototype-based inheritance under the hood. When you call a method on an instance:
JavaScript looks for the method on the instance.
If not found, it looks up the prototype chain.
If the child class has a method with the same name, it will override the parent’s method at that point in the chain.

Important points to note

Private methods (#methodName) cannot be overridden because they're not part of the prototype chain.
Static methods can also be overridden if redefined in the child class using the static keyword.
Private static methods (static #methodName() {}) can’t be overridden.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  // Inherits everything from Animal
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Scooby");
dog.speak(); // Scooby barks.

super Keyword

super is used to access and call functions or constructors on an object's parent class.
You must call super() before accessing this in a subclass constructor.

super() inside a constructor Used to call the parent class's constructor. It must be called before using this in a subclass constructor.

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  describe() {
    return `This is a ${this.brand}.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls Vehicle constructor
    this.model = model;
  }

  describe() {
    return `${super.describe()} Model: ${this.model}.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.describe()); // This is a Tesla. Model: Model S.

✅ Without super(brand), the subclass can't initialize this.name.
❗ If you skip super() in a subclass constructor, you’ll get Error.

super.method() inside a method Used to call a method from the parent class.

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

class Dog extends Animal {
  speak() {
    super.speak(); // calls Animal's speak()
    console.log("Dog barks");
  }
}

Useful when you want to want to add extra logic in child method.

NOTE: JavaScript does not support multiple inheritance directly through the extends keyword. However, multiple inheritance can be simulated using mixins or composition.

Instance Method in classes?

If you define a method inside the constructor function or class constructor, then it becomes an instance method (separate for each object):

class Person {
  constructor(name) {
    this.name = name;
    this.greet = function() { // Instance method (not on prototype)
      return `Hello, ${this.name}`;
    };
  }
}

const alice = new Person("Alice");
const bob = new Person("Bob");

console.log(alice.greet === bob.greet); // false (Different function instances)
console.log(alice.hasOwnProperty("greet")); // true (Stored on each instance)

Overriding instance method

Lets take an example

class Animal {
  constructor(name) {
    this.name = name;
    this.speak = function() {
      console.log(`${this.name} makes a sound.`);
    };
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} makes noise.`);
  }
}

const dog = new Dog("Rocky");
dog.speak(); //Rocky makes a sound.

Why does it executed the method of Animal and not of the Dog class?
Methods defined inside a constructor are not inherited via the prototype chain.
They are created as a new function and attached directly to each instance when that constructor runs.
In JavaScript, instance properties (like this.speak from the constructor) will always take precedence over prototype properties when looking up methods via the prototype chain.

How Property Lookup Works in JavaScript (The Lookup Chain)

When you access a property or method on an object, JavaScript follows this exact sequence:

Check the object (instance) itself.
👉 If the property/method is found here, it’s used immediately.
If not found, check the object's prototype (__proto__ or [[Prototype]])
👉 Moves up to the prototype object linked via Object.getPrototypeOf(obj) or obj.__proto__
Keep moving up the prototype chain
👉 Until either:

It finds the property/method.
Or reaches Object.prototype, and if still not found — returns undefined.

Can we override private methods and fields ?

You cannot override private fields or methods (declared with #) in JavaScript — they are completely encapsulated within the class they are defined in.

Example:

class Animal {
  #speak() {
    return "Animal sound";
  }

  makeSound() {
    console.log(this.#speak());
  }
}

class Dog extends Animal {
  #speak() {
    return "Dog barks";
  }
}

const dog = new Dog();
dog.makeSound(); // Output: Animal sound

dog.speak() // Uncaught SyntaxError: Private field '#speak' must be declared in an enclosing class

Why dog.speak() throws error we will see in the below section (i.e private method)

NOTE:

Animal's #speak() can only be called inside Animal.
Dog's #speak() can only be called inside Dog.
There's no overriding happening because private members are not part of the prototype chain.
Subclasses cannot override private methods.
To enable overriding, use public or conventionally protected methods.

Summary

Feature	Can Be Overridden?	Inherited?	Accessible in Subclass
Public Method/Field	✅ Yes	✅ Yes	✅ Yes
`_Protected` Convention	✅ Yes	✅ Yes	✅ Yes
`#Private` Field/Method	❌ No	❌ No	❌ No

Inheritance and Static Members:

Static members are inherited by subclasses and can be called on them directly:

class MathHelper {
  static PI = 3.14159; //static property

  static square(num) { //static method
    return num * num;
  }
}

// Inheriting from MathHelper
class AdvancedMathHelper extends MathHelper {
  static cube(num) { //static method
    return num * num * num;
  }

  static areaOfCircle(radius) {
    // Using the inherited static property PI
    //Inside a static method, this refers to the class itself
    return this.PI * this.square(radius);
  }
}

console.log(AdvancedMathHelper.square(4));        // 16 (inherited static method)
console.log(AdvancedMathHelper.cube(3));          // 27 (own static method)
console.log(AdvancedMathHelper.areaOfCircle(5));  // 78.53975 (uses inherited PI and square)

NOTE: Static members are inherited and can be accessed using this or the class name inside the subclass.

How we can say static member are overridden ?

class Animal {
  static info() {
    console.log("This is the Animal class.");
  }
}

class Dog extends Animal {
  static info() {
    console.log("This is the Dog class.");
  }
}

// Now, let's call them:
Animal.info(); // 👉 "This is the Animal class."
Dog.info();    // 👉 "This is the Dog class."

The static method is considered "overridden" because calling Dog.info() does NOT use Animal.info() — it uses its own definition.

But if you don’t override it in Dog, then:

class Dog extends Animal {
  // no info() method here
}

Animal.info(); // 👉 "This is the Animal class."
Dog.info();    // 👉 "This is the Animal class."

✅ Now, Dog inherits Animal’s static method because it didn’t define its own.

Why Use Static Methods?

They don't depend on instance properties.
Defining constant values that are related to the class but remain the same across all instances.
Creating methods that return new instances of the class based on certain parameters or conditions.
Since static members are shared across all instances, they can help conserve memory when the same data or behavior is needed across instances.

NOTE: Static methods do not have access to instance properties or methods. Attempting to reference this within a static method refers to the class itself, not an instance.

What if `areaOfCircle` is not static

class MathHelper {
  static PI = 3.14159;

  static square(num) {
    return num * num;
  }
}

class AdvancedMathHelper extends MathHelper {
  areaOfCircle(radius) {
    // 'this.constructor' refers to the class (AdvancedMathHelper)
    return this.constructor.PI * this.constructor.square(radius);
  }
}

const helper = new AdvancedMathHelper();
console.log(helper.areaOfCircle(5)); // Output: 78.53975

In an Instance Method:
this refers to the instance.
this.constructor refers to the class.

In a Static Method:
this already refers to the class itself.
So this.constructor refers to the constructor of the class, which is usually Function, not useful here.
Hence the below will not work in static areaOfCircle() method.

// Wrong — this.constructor is not what you want here
return this.constructor.PI * this.constructor.square(radius); // Doesn't work

Summary

JavaScript classes provide a structured and efficient way to create objects using a blueprint pattern. Introduced in ES6, they offer a cleaner syntax compared to traditional constructor functions while supporting core object-oriented programming principles like encapsulation, inheritance, and abstraction. Classes contain constructors for initializing objects, methods that are automatically assigned to the prototype for memory efficiency, and support inheritance through the extends keyword with super() for accessing parent class members. They also include static properties/methods for class-level operations and multiple access modifiers - public by default, truly private fields using # prefix for encapsulation, and protected fields (conventionally marked with _) for internal use. Additional features like getters/setters allow controlled property access, while private methods enable implementation hiding. Under the hood, classes still use JavaScript's prototypal inheritance, but provide a more intuitive and maintainable syntax for object creation and organization, especially beneficial for large-scale applications requiring reusable components with shared behavior. The memory-efficient prototype system ensures method sharing across instances, and the class syntax makes inheritance hierarchies clearer than manual prototype manipulation.

Difference between some() & every() in JavaScript

capscode — Sat, 22 Feb 2025 13:23:25 +0000

Table of content

Introduction
array.every() in JavaScript
Real world use case of every()
array.some() in JavaScript
Real world use case of some()
Key difference between some() and every()
Example showing the difference
When to use which?
Performance considerations
Summary

Introduction

In JavaScript, array.every() and array.some() are array methods used to test elements of an array against a provided condition (callback function). These methods are particularly useful when you need to validate or check the contents of an array in a concise and efficient manner.

array every() in JavaScript

Purpose: Tests whether all elements in the array satisfy a given condition (i.e., return true). It’s like asking, "Does every single item in this array meet this requirement?"
Returns: true if every element satisfies the condition; otherwise, false.
Stops on failure: If one element fails the condition (or returns false), it immediately stop the execution and returns false.

Syntax:

array.every(callback(element, index, array), thisArg);

Example 1:

const numbers = [2, 4, 6, 8];
const allEven = numbers.every(num => num % 2 === 0);  
// true, because all numbers are even

Example 2:

const numbers = [2, 4, 6, 8];
const allEven = numbers.every(num => {
    console.log(num);
    if(num % 2 === 0) return false
    else return true
}); 
// In this example we are returning false on satisfying of a condition.
//this will console log only 2 and return false, hence the execution will stop.

Real-World use case of every()

Validating if all items in a shopping cart meet a discount condition.
Checking if every user in a list is above a certain age.

array.some() in JavaScript

Purpose: Tests whether at least one element in the array satisfies a given condition. It’s like asking, "Is there at least one item in this array that meets this requirement?"
Returns: true if any element satisfies the condition otherwise false.
Stops on success: If one element passes the condition or returns true(i.e., the callback returns true for at least one element), it immediately stop execution and returns true.

Syntax:

array.some(callback(element, index, array), thisArg);

Example 1:

const numbers = [1, 2, 3, 4];
const hasEven = numbers.some(num => num % 2 === 0);  
// true, because at least one number is even

Example 2:

const numbers = [1, 2, 3, 4];
const hasEven = numbers.some(num =>{
    console.log(num)
    if(num % 2 === 0) return false;
    else return true
})
//This will console 1 and the condition of else returns true, hence it will be iterated only once and then exit.

Real world use case of some():

Checking if any item in a list is out of stock.
Verifying if at least one user in a group has admin privileges.

Key difference between some() and every()

Feature	array.every()	array.some()
Purpose	Checks if all elements pass the condition	Checks if at least one element passes the condition
Return value	`true` if all elements pass, otherwise `false`	`true` if at least one element passes, otherwise `false`
Stops on	First failure (returns false)	First success (returns true)
Use Case	Check if every element in the array meets a condition	Check if any element in the array meets a condition

Example showing the difference

const numbers = [1, 2, 3, 4, 5];

// Using every() to check if all numbers are greater than 0
const allPositive = numbers.every(num => num > 0);   // true

// Using some() to check if any number is greater than 3
const hasLargeNumber = numbers.some(num => num > 3); // true (because 4 and 5 are greater than 3)

When to use which?

Use every() when you need to ensure that every single element in the array meets a specific condition.

For example:

Are all users logged in?
Are all items in the cart eligible for free shipping?

Use some() when you only need to check if at least one element meets a condition.

For example:

Is there at least one item on sale?
Does any user have admin access?

Performance considerations

Both every() and some() are efficient because they short-circuit (stop iterating) as soon as the result is determined:

every() stops as soon as it finds a failing element.
some() stops as soon as it finds a passing element.

This makes them ideal for large arrays where you don’t need to process every element unnecessarily.

Summary

Use every() when you need to ensure all elements pass the condition.
Use some() when you need to know if any element passes the condition.

In other words:

every(): -- if any of the condition returns false, the execution will stop and return false or stop execution and returns false as soon as one condition fails.
some(): -- if any of condition returns true, the execution will stop and return true or stop execution and returns true as soon as one condition passes.
every(): Use it to validate that all elements in an array meet a condition. It’s strict and stops on the first failure.
some(): Use it to check if at least one element in an array meets a condition. It’s lenient and stops on the first success.

By understanding these methods, you can write cleaner, more efficient JavaScript code for array validation and filtering tasks.

Horizontal swiper using HTML & CSS only.

capscode — Sun, 04 Feb 2024 14:00:11 +0000

Introduction

In the world of web development, creating interactive and engaging user interfaces often requires the use of JavaScript or external libraries. However, there are instances where a simple solution can be crafted using just HTML and CSS. In this article, we'll explore the process of building a horizontal swiper without relying on any JavaScript or external libraries.

Swipers or sliders are commonly used elements in web design to showcase content in a visually appealing way. While JavaScript-powered sliders are prevalent, the challenge lies in creating a slider using only HTML and CSS. Let's embark on this coding journey together.

What we are building

HTML Structure

To begin, we'll structure our HTML to create a container for the swiper and individual items to be swiped. Here's a basic example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Horizontal scroll only using html css</title>
  </head>
  <body>
    <div class="container">
      <div class="slider-container">
        <div class="cards-holder">
          <div class="card">
            <div class="title">One</div>
            <div class="subtitle">1</div>
            <span>➜ </span>
          </div>

          <div class="card">
            <div class="title">Two</div>
            <div class="subtitle">2</div>
            <span>➜ </span>
          </div>

          <div class="card">
            <div class="title">Three</div>
            <div class="subtitle">3</div>
            <span>➜ </span>
          </div>

          <div class="card">
            <div class="title">Four</div>
            <div class="subtitle">4</div>
            <span>➜ </span>
          </div>

          <div class="card">
            <div class="title">Five</div>
            <div class="subtitle">5</div>
            <span>➜ </span>
          </div>

          <div class="card">
            <div class="title">Six</div>
            <div class="subtitle">6</div>
            <span>➜ </span>
          </div>

          <div class="card">
            <div class="title">Seven</div>
            <div class="subtitle">7</div>
            <span>➜ </span>
          </div>

          <div class="card">
            <div class="title">Eight</div>
            <div class="subtitle">8</div>
            <span>➜ </span>
          </div>

          <div class="card">
            <div class="title">Nine</div>
            <div class="subtitle">9</div>
            <span>➜ </span>
          </div>

          <div class="card">
            <div class="title">Ten</div>
            <div class="subtitle">10</div>
            <span>➜ </span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS Styling

Now, let's style our swiper using CSS. We'll use flexbox to achieve the horizontal swiper effect:

      body {
        width: 100%;
        height: 100vh;
        margin: 0;
        padding: 0;
        background: rgb(182, 155, 58);
      }
      .container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .slider-container {
        width: 100%;
        height: fit-content;
        padding: 20px 0;
        overflow: auto;
      }
      .slider-container::-webkit-scrollbar {
        width: 80px;
        height: 5px;
      }
      .slider-container::-webkit-scrollbar-thumb {
        background: rgb(255, 255, 255);
        border-radius: 10px;
      }
      .slider-container::-webkit-scrollbar-track {
        background: rgba(224, 224, 224, 0.2);
      }

      .cards-holder {
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .card {
        width: 300px;
        height: 300px;
        background: white;
        box-shadow: 0 30px 30px rgba(0, 0, 0, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        margin: 0 20px;
        border-radius: 20px;
      }
      .title {
        font-size: 40px;
        font-weight: 600;
      }
      .subtitle {
        font-size: 14px;
      }
      .card span {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-size: 30px;
      }

Animation

If you want the cards to be moving then you can define a keyframe as below and add the animation effect in cards-holder or card class names.

.cards-holder {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scroll 10s linear infinite;
    }

    .card {
        width: 300px;
        height: 300px;
        background: white;
        box-shadow: 0 30px 30px rgba(0, 0, 0, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        margin: 0 20px;
        border-radius: 20px;
        /* animation: scroll 10s linear infinite; */
        /* YOU CAN ADD HERE AS WELL BASED ON REQUIREMENT */
      }

@keyframes scroll {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-100%);
        }
      }

This CSS defines the basic structure of our swiper, including the container, wrapper, and individual items.

Conclusion

And there you have it! A simple horizontal swiper created using only HTML and CSS. This approach provides a lightweight solution for scenarios where JavaScript might be unnecessary or undesired.

Feel free to customize the styles, add more items, or enhance the functionality as per your project requirements. This pure HTML and CSS swiper is a testament to the versatility and power of these foundational web technologies. Happy web dev!

WEB DEV RESOURCE: Your Ultimate Hub for 1000+ Web Development Tools

capscode — Mon, 15 Jan 2024 13:44:35 +0000

Introduction:

Welcome to WEB DEV RESOURCE, your ultimate destination for a curated collection of over 1000+ web development tools, meticulously assembled to support developers at every stage of their journey. Developed by CapsCode, WEB DEV RESOURCE is designed to be the go-to platform for developers seeking efficiency, creativity, and excellence in their projects.

LINK:- WEB DEV RESOURCE

Generators: Igniting Innovation

WEB DEV RESOURCE houses an extensive range of generators to spark innovation in your projects. From code generators to content ideas, our tools are crafted to inspire creativity and accelerate your development process.

Templates: Building Foundations with Ease

Discover a plethora of templates that serve as building blocks for your projects. Whether you're working on websites, landing pages, or applications, WEB DEV RESOURCE provides templates to simplify the development process and ensure a professional outcome.

Packages and Libraries: Empowering Your Codebase

Navigate through a comprehensive library of packages and libraries to empower your codebase. Stay ahead of the curve by incorporating the latest and most efficient tools into your projects, all conveniently available on WEB DEV RESOURCE.

Icons and Illustrations: Enhancing Visual Appeal

Elevate your designs with our curated collection of icons and illustrations. From simple icons to detailed illustrations, WEB DEV RESOURCE provides resources to add visual appeal and uniqueness to your web projects.

Images and Videos: Elevating User Experience

Enrich your projects with a diverse selection of images and videos, enhancing the overall user experience. Explore and integrate visual content seamlessly, thanks to the vast library available on WEB DEV RESOURCE.

Converters: Streamlining Workflows for Efficiency

Optimize your workflows with our converters designed to streamline various development processes. Whether you're converting file formats or code snippets, WEB DEV RESOURCE ensures efficiency at every step.

Learning Materials: Fueling Continuous Growth

Embrace continuous growth with our extensive learning resources. Access tutorials, articles, and guides covering a wide range of web development topics, empowering you to tackle new challenges and expand your skill set.

Cheat Sheets: Quick References for Swift Development

Speed up your coding process and minimize errors with our comprehensive cheat sheets. WEB DEV RESOURCE provides quick references for various programming languages, frameworks, and tools, ensuring efficiency in your coding endeavors.

Hosting Solutions: Seamless Deployment for Success

Explore reliable hosting solutions to ensure seamless deployment of your web applications. WEB DEV RESOURCE offers insights into different hosting providers and tips to optimize your hosting environment for peak performance.

Fonts, Logos, and Animations: Polishing Your Presentation

Give your projects a professional touch with our collection of fonts, logos, and animations. WEB DEV RESOURCE ensures you have the resources needed to create visually stunning and memorable web experiences.

We are working on integrating gen AI features, so that you can tell the requirements and our web app will suggest you the libraries or fonts or any such thing to make your development journey faster and easier.

Conclusion:

WEB DEV RESOURCE is more than just a platform; it's a commitment to the success of web developers. With a repository of over 1000+ web development resources, our goal is to make your development journey smoother and more enjoyable. Explore WEB DEV RESOURCE today and unlock the tools you need to elevate your web development projects to new heights!

"We'd love to hear from you! Please take a moment to share your valuable feedback with us; it helps us improve and better serve you."
Share your feedback here

Temporal Dead Zone

capscode — Fri, 12 Jan 2024 04:42:38 +0000

Table of content

Introduction
How hoisting works in JavaScript
What is a Temporal Dead Zone (TDZ)
Temporal Dead Zone of let variable
Temporal Dead Zone of const variable
Temporal Dead Zone of var variable
Temporal Dead Zone of functions
Why do we need TDZ
Conclusion

Introduction

Have you ever wondered why we get ReferenceError while accessing the variable declared with let or const before their declaration or initialization?
That is because the variable entered into the Temporal Dead Zone.

It is very important to understand the working principle of Hoisting and Temporal Dead Zone so that you can write error-free and bug-free code.

Temporal Dead Zone is a time period where a variable declared with let and const exists but cannot be accessible to use it or to assign it a value.

TDZ of a variable starts at the beginning of the scope in which the variable is declared and ends at the point of the declaration of a variable.

Accessing the variable in this TDZ throws a ReferenceError.

For example

//TDZ of foo starts here
.
.
.
//TDZ of foo continues here
.
.
let foo="bar" //TDZ of foo ends here
.
.
.
// TDZ of foo doesn't exist here

How hoisting works in JavaScript

Temporal Dead Zone and Hoisting are two related concepts.
Before hoisting let's first discuss how JavaScript engine executes a program in short.
In JavaScript the program’s declarations got higher precedence over initializations, invocations, and other code. Hence whenever we declare a variable, JS engine reads it first and this is what we call Hoisting in JavaScript.

Note: Hoisting does not mean JavaScript rearranges or moves code above one another.

You can read more about how hoisting works for var, let, const, function declaration and function expressions here.

When we declare the variables, JS engine hoist the variables and keeps them inside the TDZ (Temporal Dead Zone) until execution reaches the line of code where the actual declaration is made.

What is a Temporal Dead Zone (TDZ)

The Temporal Dead Zone is a specific phase during the execution of your code where a variable declared with let or const exists but cannot be accessed.

This occurs from the start of the block or scope in which the variable is declared until the actual declaration is reached in the code.
If you try to access the variable within the Temporal Dead Zone, a ReferenceError will be thrown.

Keeping variables in TDZ works differently for var, let, const, function declaration and function expressions. Let's see all of these below.

TDZ of let variable

TDZ of a variable declared with let starts at the beginning of the scope in which it is being declared and ends at the point/line of code where it is being declared.

For example

//TDZ of foo starts here
.
.
.
//TDZ of foo continues here
.
.
let foo="bar" //TDZ of foo ends here
.
.
// TDZ of foo doesn't exist here
.
.

Here, when JS engine starts its execution it first sees the declared foo variable and keeps it in the Temporal Dead Zone until it reaches the place in the code where the variable is declared or initialized. And if we try to access the variable before it gets initialized will return a ReferenceError.

When the execution reaches the point where we have done the actual declaration of foo variable TDZ of foo ends and if we do console.log it will either return the initialized value or undefined (if not initialized with a value)

For example

//TDZ of foo starts here

//TDZ of foo continues here
console.log(foo) //ReferenceError: foo is not defined
//TDZ of foo continues here

let foo="bar" //TDZ of foo ends here

console.log(foo) //bar

// TDZ of foo doesn't exist here

If we do console.log(foo) before the initialization of foo variable it will give ReferenceError as the variable lies in TDZ.

But the second console.log(foo) returns bar because the TDZ of foo variable ends when we have declared the variable.

let's see the second example,

//TDZ of foo starts here

//TDZ of foo continues here
console.log(foo) //ReferenceError: foo is not defined
//TDZ of foo continues here

let foo //TDZ of foo ends here

console.log(foo) //undefined

// TDZ of foo doesn't exist here

The second console.log(foo) returns undefined.

Explanation:
While inside the TDZ, the variable has not been initialized with a value.
The variable foo is initialized with a value when execution reaches the place in the code where it is declared. If no initial value was specified with the variable declaration, it will be initialized with a value of undefined.

TDZ of const variable

TDZ of const is similar to let except for one difference, that we have to initialize it with a value while declaring a const variable, if we don't initialize it with a value it will throw an error.

For example

//TDZ of foo starts here

//TDZ of foo continues here
console.log(foo) //ReferenceError: foo is not defined
//TDZ of foo continues here

const foo="bar" //TDZ of foo ends here
//const foo; // will throw an error

console.log(foo) //bar

// TDZ of foo doesn't exist here

If we do console.log(foo) before the initialization of foo variable it will give ReferenceError as the variable lies in TDZ.

But the second console.log(foo) returns bar because the TDZ of foo variable ends when we initialize it with a value.

The reason that we get a reference error when we try to access a let or const variable before its declaration is because of the Temporal Dead Zone (TDZ).

JavaScript does not initialize a let or const variable with any value whenever it hoists the variable. Instead, the variable remains dead and inaccessible and this creates what is known as TDZ, during which trying to access the variable results in a ReferenceError.

TDZ of var variable

It is important to note that TDZ of var variable works differently.

When the JS engine hoists a var variable, it automatically initializes the variable with the value of undefined and the TDZ of var variable seems to be not exists.

For example

//TDZ of foo starts here and ends here
console.log(foo) //undefined

//TDZ of foo doesn't exist here

var foo="bar" //TDZ of foo doesn't exist here

//TDZ of foo doesn't exist here

console.log(foo) //bar

// TDZ of foo doesn't exist here

As you can see in the above example the first console.log statement returns undefined because during the compilation phase, the JS engine sees the variable declared with var hence hoist the variable and also initializes it with the value of undefined and that's the reason the TDZ of var variable ends in the first line of the scope.

TDZ of functions

Note that only function declarations are hoisted, not function expressions and due to which we can call/access the function declaration before the actual line of code where it is defined.
But for function expression, all the rules are applicable based on its definition whether it is defined using var let, or const.

The Temporal Dead Zone of a function declaration starts and ends at the beginning of the scope in which the function is defined.

For example

//TDZ of func start and end here
.
.
//TDZ of func doesn't exist here
.
.
func() //returns hello...
.
//TDZ of func doesn't exist here
.
function func(){
    console.log('hello...')
}
.
//TDZ of func doesn't exist here
.
func() //returns hello...
.
.

Why do we need TDZ

For better coding practices

The TDZ ensures that variables are accessed only after they have been properly declared and initialized, promoting and reducing the likelihood of accessing variables in an undefined or uninitialized state.

To write bug-free code

The TDZ does not apply to the variables declared with var. They are hoisted to the top of their scope and can be accessed throughout the scope, even before their actual declaration. This behavior can sometimes lead to unexpected results and potential bugs if not handled carefully.

More reliable and predictable code

It helps catch potential issues caused by accessing variables before their initialization.

Conclusion

Hoisting and Temporal Dead Zone are two related concepts, having knowledge of the relation between both of them and understanding and respecting the Temporal Dead Zone is an integral part of writing clean, error-free and bug-free JavaScript code. It aligns with the language's design principles and contributes to a more reliable and maintainable codebase.

What is CSS Module?

capscode — Sun, 20 Aug 2023 05:31:00 +0000

Table of content

Introduction
What is CSS Module
How to use CSS Module
How to write multiple class name in CSS Module
Gloabel styling in CSS Module
Styling HTML element in CSS Module
Compose in CSS Module
Variable in CSS Module
How CSS Module work
Conclusion

1. Introduction

CSS modules are just like plain CSS which you already know with lots of extra advantages and some specific rules.

2. Why we are using CSS modules and what is the need to use them?

If you have worked in ReactJS for creating your web apps, then you might be aware that all of the CSS files in your application are combined and get added to the style tag of your document (at the top).

Due to this, the styles of the classes get overridden and you may get some styling issues in the application.

NOTE: The overridden depends on the import of the component and most last import will override the previous ones.

Example,
let's say we have two components folder

ComponentOne
1. index.js
2. style.css
ComponentTwo
1. index.js
2. style.css

and we have h1 tag with classname heading, h2 tag with classname sub-heading in both ComponentOne & ComponentTwo.

ComponentOne.js

import "./style.css";
export default CompOne = () => {
  return (
    <>
      <h1 className="heading">Component One Heading--green</h1>
      <h2 className="sub-heading">Component One Subheading--yellow</h2>
    </>
  );
};

ComponentTwo.js

import "./style.css";
export default CompTwo = () => {
  return (
    <>
      <h1 className="heading">Component Two Heading--red</h1>
      <h2 className="sub-heading">Component Two Subheading--blue</h2>
    </>
  );
};

We have given color styles to both tags in their respective style.css file and import them in their respective component file.

in ComponentOne > style.css

.heading {
  color: green;
}

.sub-heading {
  color: yellow;
}

in ComponentTwo > style.css

.heading {
  color: red;
}

.sub-heading {
  color: blue;
}

and we are importing both the components in App.js

import ComponentOne from "./ComponentOne";
import ComponentTwo from "./ComponentTwo";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <ComponentOne />
      <ComponentTwo />
    </div>
  );
}

Please take note that we have imported ComponentTwo after importing ComponentOne
and below is the output

What happened here is that the ComponentTwo style.css has taken priority and its style has overridden the style of ComponentOne folder's style.css.

What if we import ComponentTwo before ComponentOne?

Have you noticed the difference?
What happened here is the ComponentOne style.css has taken priority and its style has overridden the style of ComponentTwo folder's style.css.

And that's the biggest issue when multiple developers work on the same project and are giving the same classname to the elements.

This is one of the main reasons we should use CSS Module in ReactJS.

No one wants to clutter their code with !important overrides in CSS as it creates a lot of confusion while debugging. However, !important becomes tempting as the project grows and multiple developers work in a team. CSS Modules are one way to solve this issue.

3. How to use CSS Module in RectJS

Instead of creating the file as filename.css you have to create the file as filename.module.css

style.module.css

  .header{
      font-weight:700;
      color:red;
  }
  #sub-heading{
      color: black;
      background-color:white
  }

We have to then import these CSS Module styles into a variable and that variable (let's say styles) will be a JavaScript object containing all the styles (classes, ids).

import styles from './style.module.css

Then wherever you are writing your classNames you have to write them like

<h1 className={styles.heading}>Heading</h1> //adding className

<h2 id={styles["sub-heading"]}>Sub Heading</h2> //adding id

We can also destructure the class names and id names.

import {heading, "sub-heading" as subheading} from './style.module.css'

// or

let { heading, "sub-heading": subheading } = styles;

Do you know why we have assigned new names to the "sub-heading" key ?
check out here

NOTE: All the rules for accessing classes/ids from CSS Module will be similar to accessing keys in JS objects.
As we know that the id's should be unique in the html document, whenever we give styling to the id it will get applied to that element but in CSS Module compiler used to generate a unique name for all the classes and id's defined in the CSS Module and hence the same id name in multiple CSS Module files get different name during build time.

That's it, you are done. CSS Module is as simple as CSS is.

Let's see some of the important points of CSS Module (how to...).

4. How to write multiple class names to an element when we are using CSS Module

we can use the JSX syntax to write that

<div className={`${styles.heading} ${styles.mainHeading}`}>Heading</div> //adding multiple className

// OR

<div className={styles.heading +" "+ styles.mainHeading}>Heading</div> //adding multiple className
// not preferable

5. How can we make a global styling in CSS Module

We just need to add :global suffix before the defined classname in the CSS Module.

Syntax

:global (.myclass) {
  background-color: red;
}

Example:

:global .global-style {
    color:cyan
}

<h3 className="global-style">Component Heading</h3>

6. We should not give styling to the `elements` in CSS Module.

We should never apply CSS to an HTML element in the CSS Module because if we do so, then it will become the global one automatically.

h3 {
  font-size: 20px;
  font-style: italic;
}

Best practice is to create some global css file (let's say global.css) file and define all your global styling in that file.

7. Composing multiple styles together in CSS Module.

You can create a class and then compose it within other classes by using the composes selector.

 .heading {
   background-color: green;
   color: white;
 }

 .main-heading {
   composes: heading;
   color: blue;
 }

The classes being composed do not have to be in the same file. It can be imported in from another css file or module as well.

 .main-heading {
   composes: heading from './style.css';
   color: blue;
 }

8. How to define CSS variables in CSS Modules.

CSS Modules have a variable system that allows you to create variables in the CSS Module.

@value blue: #ff0000;
@value red:#0c77f8;
@value green: #aaf200;

/* Note that we have given some red kind of color code in blue variable */
 .heading {
   color: blue;
 }

In the example above, we've created valriable blue, red and green. For cleaner referencing and reusability, these values can be defined in a separate file and then we can imported from there.

colors.css

@value blue: #ff0000;
@value red:#0c77f8;
@value green: #aaf200;

style.module.css

 /* importing variable. */
@import colors: "./colors.css";
@import blue, red, green from colors;

 .heading {
   color: blue;
 }

NOTE: in some of the documents you may see @value in place of @import. Both are fine, it depends on the compiler.

Please checkout the codesandbox for the css module example

9. How CSS Module works behind the scene

CSS Modules create a unique classname of the format [filename]_[classname]__[hash].

When we import our CSS Module, CSS module export the classnames and ids defined in the file like a normal JavaScript object,
where the keys will be the original classnames/ids (only name) and their value will be the globally generated classes and ids (generated by webpack or any other compiler in the format mentioned above)

The build tools transform our class names into variables that are exported separately as named exports and as an object.

Although CSS Module is written like plain CSS, it actually compiles to a low-level interchangeable format called ICSS (Interoperable CSS) that is designed for loader implementers, not end-users. It is a superset of standard CSS and a low-level file format that enhances CSS.

Tools such as Webpack are used to perform this compilation process.

Also, if you import the CSS file into a different component, the key names would also be different as its locally scoped and the compiler would be named in the format of [filename]_[classname]__[hash]

You may have some questions in your mind that how it is getting exported from filename.module.css
It's as simple as exporting object from JavaScript.

This image speaks 1000's of word.

Please double-check the point 1. and point 2. marked in the image.

if you want to check the demo of how css module does the export of styles, do cehckout

10. Conclusion

Awesome! Now you become an expert in using CSS Modules in your application.
CSS module are very much useful when you dont want to install any 3rd party library like StylesComponent, Emotions etc. and want to continue writing your CSS in the tradtional way.
Its developer friendly, less time consuming, easy to debug and easy to manage as well.

Thank you for reading this far. This is a brief introduction of CSS Module.

If you find this article useful, share this article. Someone could find it useful too. If you find anything technically inaccurate please feel free to create a issue.

Hope it's a nice and informative read for you.
VISIT https://www.capscode.in/blog TO LEARN MORE...

Few of the trending articles,

Thanks,
CapsCode

You should not use Fetch API

capscode — Tue, 04 Jul 2023 13:00:00 +0000

Introduction

Fetch API is the most common and traditional way to fetch resources from the server.
fetch() method is available globally in both windows and worker contexts.

With all the pros, there are a few cons in using the fetch() API to call an endpoint and getting resources from a URI.

Syntax of `fetch()` API

fetch(url, {
    method: "POST", // *GET, POST, PUT, DELETE, etc.
    mode: "cors", // no-cors, *cors, same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, *same-origin, omit
    headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: "follow", // manual, *follow, error
    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body data type must match "Content-Type" header
  })

//this will return a promise

without discussing more about fetch() API usage let's discuss the main topic of this article i.e cons of fetch() API

you can read more about fetch() API usage here & here

Let's first see the example of `fetch()` API with some valid endpoint

fetch("https://api.github.com/users")
  .then((response) => {
    console.log("response", response);
    return response.json();
  })
  .then((result) => console.log("success", result))
  .catch((error) => console.log("error", error));

the output is straightforward.

As the API is successful, fetch() will return resolved promises so, it will enter inside the first .then() method and print the response object(raw format) and we are returning the JSON from it.
response.json() returns a resolved promise to a JSON object.

As the promise is resolved it will enter inside the second .then() method and prints the success message and the JSON output.

everything is all OK till now.

Lets now test this with some invalid API endpoint

fetch("https://api.github.com/myusers") //invalid api path
  .then((response) => {
    console.log("response", response);
    return response.json();
  })
  .then((result) => console.log("success", result))
  .catch((error) => console.log("error", error));

As the API endpoint is invalid. It should print the error statement right,

But that's not the case with fetch() API.

The fetch() promise will be resolved into the first .then() method and return the JSON response and then it has entered into the second .then() method rather than entering inside the catch method
as the base URL is valid, only the requested resource, i.e myusers is invalid / not present (and will return 404).

But that is not fair and may lead to major bugs/breakdowns in your code.

NOTE: fetch API only rejects into catch if the request fails due to a network error, or in other words - the request never gets to your server. If you get any response, even an HTTP 500, then the promise resolves into .then() method.

Ref.- MDN

fetch("https://api.mygithub.com/users") //invalid api base URL
  .then((response) => {
    console.log("response", response);
    return response.json();
  })
  .then((result) => console.log("success", result))
  .catch((error) => console.log("error", error));
//this will logs the catch method
//error TypeError: Failed to fetch

Then how we can resolve this issue of fetch() API ?

Let's see it in the next example.

fetch("https://api.github.com/myusers")
  .then((response) => {
    console.log("response", response);
    if (response.ok) return response.json();
    else return Promise.reject("api failed with " + response.status + " code");
  })
  .then((result) => console.log("success: ", result))
  .catch((error) => console.log("error: ", error));

what we are doing here is, we are checking the status of the response we are getting before returning the resolved promise.
If the status is not 200 or response.ok is not true we are returning the rejected promise.
So that the catch block will get executed.

Some of the other demerits of `fetch()` API are:

In fetch() API while passing the payload, we have to manually stringify the data whereas most of the other libraries do it automatically.
Automatic transformation of response data is not happening in fetch() API and we have to do it manually.
Response timeout configuration in fetch() API is difficult to implement.
fetch() doesn’t provide a way to intercept requests by default, and it's bit difficult to implement.
The fetch() API doesn’t have any progress bar handler function. Instead, it provides an instance of ReadableStream via the body property of the response object. While other libraries do have a progress bar handler function.

These are the main reason most developers avoid using fetch API in their code, as we have to write a lot of extra code to achieve a simple thing.

There are a lot of libraries and some of them are,
Axios
React Query
SWR
RTK Query

Conclusion

No doubt, fetch is an amazing API and every beginner should learn the fetch API first and then only switch to any other libraries.
There is nothing that we cannot do with fetch API, but we have to write more codes and it will be sometimes difficult to manage. Just keep one thing in mind about fetch API is that in fetch API, only network errors are the actual errors, whereas the other libraries handle all types of errors whether it's a network error or resource not found errors automatically.

Sorry fetch API 🙏🏻🙏🏻🙏🏻

Thank you for reading this so far. This is a brief introduction that why we should not use fetch API for calling an API endpoint.

If you find this article useful, share this article. Someone could find it useful too. If you find anything technically inaccurate please feel free to create an issue.

Hope it's a nice and informative read for you.
VISIT https://www.capscode.in/blog TO LEARN MORE.

Thanks,
CapsCode

DEV Community: capscode

VegaAI - The Self Driving Agile Team

What I Built

VegaAI — The Self-Driving Agile Team (Powered by Notion MCP)

Video Demo

Show us the code

How I Used Notion MCP

1. The "Agentic Toolbox" (MCP Methods Used)

2. Agent Workflow & Tool Specialization

3. Multi-LLM Orchestration

4. The Robustness Loop (MAX_ATTEMPTS)

5. Adding stories manually to the sprint

Why this matters

What I will add in next version

How to configure SSH for accessing remote repositories

Introduction: SSH vs HTTPS for GitHub Authentication

1. HTTPS Login

2. SSH Authentication

Why Choose SSH?

Let's see the steps to configure the SSH Authentication.

Step 1: Check for Existing SSH Keys

Step 2: Generate a New SSH Key

Step 3: Add the SSH Key to Your SSH Agent

Step 4: Add the SSH Public Key to GitHub

Step 5: Test the SSH Connection

Step 6: Configure Git User Info (Optional but Recommended)

Step 7: Set SSH Remote URL for Your Repository

Lets see some QnA

Q. What if we have only one key pair, in this case do we need any config file ?

Q. Will ssh -T git@github.com , ssh -T git@bitbucket.org uses same key if there is a single key pairs?

Recap:

Add Dark theme & Light theme in website

Table of content

Introduction

Need of dark mode on websites

Different ways of enabling dark mode on your website.

1. Enable dark mode using color-scheme CSS property.

2. Enable light/dark mode using prefers-color-scheme media query.

3. Enable light/dark mode using <meta name="color-scheme" content="dark light">

4. Enable dark mode by setting color-scheme value in the meta tag using JS

5. Enable dark mode by setting an attribute in the body or html tag

6. Enable dark mode by setting the class name in the body or html tag

Additional concept

Conclusion

Difference between __proto__, [[Prototype]] & .prototype in JavaScript

Introduction

Difference between __proto__, [[prototype]] and .prototype in JavaScript

1. __proto__ (Deprecated but still used)

1.1 What is the use of __proto__

1.2 So what is prototype chain/chaining.

Why is __proto__ Deprecated?

What if there is an existing object with some properties in it, like below.

2. [[Prototype]] (Internal)

How to Access [[Prototype]]?

How [[Prototype]] Works?

Setting [[Prototype]]

3. .prototype (Used in Constructor Functions)

What is the benefit of using .prototype

prototype in ES6 Classes

When Is a Method an "Instance Method" in classes?

Overriding .prototype

JavaScript's built-in objects (Array, String, Object, etc.) also use prototypes.

Questions you might ask

Is Object a constructor function ?

List of Built-in Constructor Functions in JavaScript

1. Object Constructors

2. Error Constructors

3. Collection Constructors

4. Date & Utility Constructors

5. Buffer & Typed Array Constructors

6. Web API Constructors (Environment-Specific)

So for these constructor functions, the methods like map filter etc. are added using Array.prototype.map ??

How It Works?

How Prototype Lookup Works?

Summary

Constructor Function in JavaScript

What is a Constructor Function?

Key Characteristics of a Constructor Function:

Example:

Adding methods to a constructor function

Q. Will `ssh -T git@github.com` , `ssh -T git@bitbucket.org` uses same key if there is a single key pairs?

1. Enable dark mode using `color-scheme` CSS property.

2. Enable light/dark mode using `prefers-color-scheme` media query.

3. Enable light/dark mode using `<meta name="color-scheme" content="dark light">`

4. Enable dark mode by setting `color-scheme` value in the meta tag using JS

Difference between proto, [[Prototype]] & .prototype in JavaScript

Difference between `proto`, `[[prototype]]` and `.prototype` in JavaScript

1. `proto` (Deprecated but still used)

1.1 What is the use of `proto`

Why is `proto` Deprecated?

2. `[[Prototype]]` (Internal)

How to Access `[[Prototype]]`?

How `[[Prototype]]` Works?

Setting `[[Prototype]]`

3. `.prototype` (Used in Constructor Functions)

What is the benefit of using `.prototype`

Overriding `.prototype`

Is `Object` a constructor function ?

So for these constructor functions, the methods like `map` `filter` etc. are added using Array.prototype.map ??

Efficient Way (Using `prototype` for shared methods)

Why using `.prototype` is Better?

The `constructor` Property

Alternative: Using `Object.create()` Instead of `new`

Enforcing `new` Usage with `new.target`

What Happens When You Call `new Circle()`?

Adding Methods to `Circle.prototype`

Inspecting `Circle.prototype`

What’s Inside an Instance `circle`?

Instance Properties (Directly on `circle`)

Internal Structure of `circle`:

What is `constructor()`?

Does the `greet()` Method in a Class Consume Memory Before Calling It?

Where Is the `greet()` Method Stored?

Can We Add Methods to `Person.prototype` Manually?