DEV Community: Syed Ammar

Show folder name instead of index.tsx in VS Code

Syed Ammar — Sat, 15 Feb 2025 12:18:15 +0000

If you're like me, you probably have a dozen tabs called index.ts or index.tsx opened in VS Code, looking like this:

While VS Code shows the folder name on the right when you have two tabs with the same name open, I always struggle to identify them... (yeah, I read left to right).

Today I learned that you can customize those labels in VS Code. So if you prefer to see the folder name first for index files, you can use the following setting:

Search for workbench.editor custom labels patterns in VS Code settings
Click Add Item
Enter */**/index.{js,jsx,ts,tsx} in Item and ${dirname} (${filename}.${extname}) in Value
Press OK Now your tabs should look like this:

So much easier to read!

(if you'd like to show something different or shorter, feel free to modify the Value to anything that suits you).

Happy Coding !!

What are WeakMaps in JS?

Syed Ammar — Tue, 24 Dec 2024 17:36:26 +0000

A WeakMap in JavaScript is a collection of key-value pairs where the keys are required to be objects, and the references to these keys are "weak." This means that if there are no other references to a key object, it can be garbage-collected, even if it is still in the WeakMap.

Key Features

Keys must be objects:
- Primitive values (like numbers, strings, or booleans) cannot be used as keys.
- Only objects and functions are allowed as keys.
Weak references:
- The key objects in a WeakMap are held weakly.
- If no other references exist to a key, the key-value pair will be automatically removed from the WeakMap.
Not iterable:
- WeakMap does not have methods like forEach, and it cannot be looped through using constructs like for...of or Object.keys().
- This is because the garbage collection process makes it impossible to reliably list all entries.
Useful for private data:
- WeakMap is often used to associate private data with objects without exposing it.

Syntax

const weakMap = new WeakMap();

Methods

Method	Description
`weakMap.set(key, value)`	Adds a new key-value pair or updates an existing key.
`weakMap.get(key)`	Retrieves the value associated with the key.
`weakMap.has(key)`	Checks if the key exists in the `WeakMap`.
`weakMap.delete(key)`	Removes the key-value pair associated with the key.

Examples

Basic Usage

const weakMap = new WeakMap();

const obj1 = { name: "Alice" };
const obj2 = { name: "Bob" };

// Adding key-value pairs
weakMap.set(obj1, "Data for Alice");
weakMap.set(obj2, "Data for Bob");

// Accessing values
console.log(weakMap.get(obj1)); // Output: "Data for Alice"

// Checking existence
console.log(weakMap.has(obj2)); // Output: true

// Removing a key-value pair
weakMap.delete(obj2);
console.log(weakMap.has(obj2)); // Output: false

Garbage Collection

let obj = { key: "value" };
const weakMap = new WeakMap();
weakMap.set(obj, "Some data");

// Remove all references to `obj`
obj = null;

// The `WeakMap` entry for `obj` is automatically removed by garbage collection.

Use Cases

Private Data Storage:
- Associate private data with an object, ensuring it is not exposed or accessible elsewhere.

const privateData = new WeakMap();

class User {
    constructor(name) {
        privateData.set(this, { name });
    }

    getName() {
        return privateData.get(this).name;
    }
}

const user = new User("Alice");
console.log(user.getName()); // Output: "Alice"

DOM Node Metadata:
- Store metadata related to DOM elements without preventing garbage collection.

const metadata = new WeakMap();

function trackElement(element) {
    metadata.set(element, { clicks: 0 });
}

function incrementClicks(element) {
    const data = metadata.get(element);
    if (data) {
        data.clicks++;
    }
}

const button = document.createElement("button");
trackElement(button);
incrementClicks(button);
console.log(metadata.get(button)); // Output: { clicks: 1 }

Advantages

Memory Efficiency: Automatic removal of unreferenced keys helps manage memory effectively.
Encapsulation: Provides a way to store data privately and securely.
No Memory Leaks: Prevents accidental memory leaks by allowing garbage collection of keys.

Limitations

Non-iterable:
- Cannot list all keys or values.
Only Object Keys:
- Does not support primitive keys.
Limited Use Cases:
- Not suitable for scenarios requiring enumeration or full access to stored data.

In summary, WeakMap is a specialized collection designed for scenarios where weak references and private associations are required.

Difference between Map and WeakMap

The primary difference between Map and WeakMap in JavaScript lies in their handling of keys, garbage collection, and functionality. Here’s a detailed comparison:

Key Differences

Feature	Map	WeakMap
Key Types	Keys can be any type: objects, primitives.	Keys must be objects.
Garbage Collection	Does not rely on garbage collection; keys persist.	Keys are held weakly and can be garbage-collected.
Iteration	Iterable (can use `for...of`, `forEach`, etc.).	Not iterable (cannot list keys or values).
Size Property	Has a `size` property to get the number of entries.	No `size` property available.
Use Case	General-purpose key-value storage.	Specialized for associating metadata or private data with objects.
Performance	Slightly slower due to strong key references.	Faster for memory-sensitive operations due to weak references.

Feature Comparison

1. Key Types

Map: Accepts both objects and primitive types (like strings, numbers, booleans) as keys.
WeakMap: Only accepts objects as keys. Primitives are not allowed.

const map = new Map();
map.set(1, "value"); // Allowed
map.set("key", "value"); // Allowed
map.set({}, "value"); // Allowed

const weakMap = new WeakMap();
weakMap.set({}, "value"); // Allowed
weakMap.set(1, "value"); // TypeError: Invalid value used as weak map key

2. Garbage Collection

Map: Retains a strong reference to the key, preventing it from being garbage-collected as long as it exists in the map.
WeakMap: Holds a weak reference to the key, allowing it to be garbage-collected if there are no other references.

let key = { id: 1 };
const map = new Map();
const weakMap = new WeakMap();

map.set(key, "Map Value");
weakMap.set(key, "WeakMap Value");

key = null; // Remove reference to the object

// In Map, the entry still exists
console.log(map); // Map(1) { { id: 1 } => 'Map Value' }

// In WeakMap, the entry is removed by garbage collection
console.log(weakMap); // WeakMap {}

3. Iteration

Map: Iterable. You can use for...of, .keys(), .values(), .entries(), or .forEach() to iterate over its contents.
WeakMap: Not iterable. There are no methods to retrieve all keys, values, or entries.

const map = new Map();
map.set("a", 1);
map.set("b", 2);

for (const [key, value] of map) {
    console.log(key, value);
}
// Output:
// a 1
// b 2

const weakMap = new WeakMap();
weakMap.set({}, "value");
// Cannot iterate over WeakMap

4. Size Property

Map: Provides a size property that returns the number of entries.
WeakMap: Does not have a size property since it is not iterable and entries are weakly referenced.

const map = new Map();
map.set("a", 1);
console.log(map.size); // Output: 1

const weakMap = new WeakMap();
weakMap.set({}, "value");
console.log(weakMap.size); // Undefined

Use Cases

When to Use `Map`

General-purpose key-value storage.
Scenarios requiring enumeration or iteration of keys and values.
Keys may be primitives or objects.

Example:

const map = new Map();
map.set("id", 123);
map.set("name", "Alice");

console.log(map.get("id")); // Output: 123
console.log([...map.keys()]); // Output: ['id', 'name']

When to Use `WeakMap`

When you need to associate metadata or private data with objects without preventing garbage collection.
Ideal for cases where the lifetime of the key should dictate the lifetime of the associated value.

Example:

const weakMap = new WeakMap();

class User {
    constructor(name) {
        weakMap.set(this, { privateData: `Data for ${name}` });
    }

    getPrivateData() {
        return weakMap.get(this).privateData;
    }
}

const user = new User("Alice");
console.log(user.getPrivateData()); // Output: Data for Alice

Summary

Feature	Map	WeakMap
Flexibility	General-purpose, flexible.	Specialized, limited use case.
Performance	Persistent key references.	Memory-efficient with weak references.
Suitability	Iteration and long-term storage.	Private data and ephemeral relationships.

JavaScript Object - Shallow freeze vs Deep freeze

Syed Ammar — Tue, 24 Dec 2024 17:20:39 +0000

The difference between shallow freeze and deep freeze lies in how the freezing behavior is applied to nested objects. Here’s a breakdown of the two concepts:

1. Shallow Freeze

Definition: Freezes only the top-level properties of an object.
Behavior:
- Prevents adding, removing, or modifying the top-level properties.
- Does not freeze nested objects; they remain mutable.
Example:

const shallowObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

Object.freeze(shallowObject);

// Top-level properties are immutable
shallowObject.name = "Bob"; // Ignored
shallowObject.newProp = "test"; // Ignored

// Nested objects are still mutable
shallowObject.details.age = 30; // Allowed

console.log(shallowObject);
// Output: { name: "Alice", details: { age: 30, city: "New York" } }

2. Deep Freeze

Definition: Freezes the object along with all its nested objects and arrays, recursively.
Behavior:
- Ensures that no part of the object (top-level or nested) can be modified.
Example:

const deepObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

// Deep freeze function
function deepFreeze(object) {
    const propertyNames = Object.getOwnPropertyNames(object);
    for (const name of propertyNames) {
        const value = object[name];
        if (value && typeof value === 'object') {
            deepFreeze(value); // Recursively freeze
        }
    }
    return Object.freeze(object);
}

deepFreeze(deepObject);

// Neither top-level nor nested properties can be changed
deepObject.name = "Bob"; // Ignored
deepObject.details.age = 30; // Ignored

console.log(deepObject);
// Output: { name: "Alice", details: { age: 25, city: "New York" } }

Comparison Table

Feature	Shallow Freeze	Deep Freeze
Scope	Only freezes top-level properties.	Freezes top-level and nested objects.
Nested Object Mutability	Mutable.	Immutable.
Implementation	`Object.freeze(object)`.	Custom recursive function with `Object.freeze()`.
Example Mutation	Modifications to nested objects are allowed.	No modifications allowed at any level.

Use Cases

Shallow Freeze:
- Suitable when only the top-level properties need to be immutable.
- Examples: Configurations where nested properties are managed independently.
Deep Freeze:
- Ideal when complete immutability is required for the entire object hierarchy.
- Examples: Ensuring data consistency for deeply nested objects in state management.

Considerations

Performance:
- Deep freezing can be computationally expensive for large or deeply nested objects.
Cyclic References:
- If the object contains circular references, you'll need to track visited objects to avoid infinite recursion.

Handling Cyclic References

To handle cyclic references, you can maintain a WeakSet of visited objects:

function deepFreeze(object, visited = new WeakSet()) {
    // If the object is already visited, return it
    if (visited.has(object)) return object;

    // Add the object to the visited set
    visited.add(object);

    // Retrieve property names
    const propertyNames = Object.getOwnPropertyNames(object);

    // Freeze each property
    for (const name of propertyNames) {
        const value = object[name];
        if (value && typeof value === 'object') {
            deepFreeze(value, visited);
        }
    }

    return Object.freeze(object);
}

This prevents infinite recursion for cyclic references.

Implementing an Express-based REST API in TypeScript with MongoDB, JWT-based Authentication, and RBAC

Syed Ammar — Thu, 19 Dec 2024 14:10:53 +0000

Implementing an Express-based REST API in TypeScript with MongoDB, JWT-based Authentication, and Role-Based Access Control (RBAC)

Creating a robust REST API requires proper architecture, authentication mechanisms, and database integration. This article will guide you through building an Express-based REST API in TypeScript with MongoDB, JWT-based Authentication, and Role-Based Access Control (RBAC).

Prerequisites

Node.js and npm installed.
Basic understanding of TypeScript, Express, and MongoDB.
MongoDB instance (local or cloud, e.g., MongoDB Atlas).

Step 1: Project Setup

1. Initialize the Project

Run the following commands to set up the project:

mkdir express-api-rbac
cd express-api-rbac
npm init -y
npm install typescript ts-node nodemon --save-dev
npm install express mongoose jsonwebtoken bcrypt dotenv cors
npm install @types/express @types/mongoose @types/jsonwebtoken @types/node --save-dev

2. Configure TypeScript

Create a tsconfig.json file:

{
    "compilerOptions": {
        "target": "ES6",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "outDir": "dist",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true,
        "types": ["jest"],
        "moduleResolution": "Node16",
        "module": "Node16"
    },
    "exclude": ["node_modules/"],
    "include": ["src/**/*.ts", "test/**/*.ts"]
}

3. Project Structure

Organize your project as follows:

src/
├── server.ts
├── config/
│   └── config.ts
├── models/
│   └── user.model.ts
├── middleware/
│   ├── auth.middleware.ts
│   └── corsHandler.ts
|   └── loggingHandler.ts
|   └── routeNotFound.ts
├── routes/
│   ├── auth.routes.ts
│   └── user.routes.ts
├── controllers/
│   └── auth.controller.ts
|   └── user.controller.ts
└── utils/
    └── logging.ts

Step 2: Configure MongoDB and other Server configuration

Database Configuration

src/config/config.ts:

import dotenv from 'dotenv';
import mongoose from 'mongoose';
dotenv.config();

export const DEVELOPMENT = process.env.NODE_ENV === 'development';
export const TEST = process.env.NODE_ENV === 'test';

export const MONGO_USER = process.env.MONGO_USER || '';
export const MONGO_PASSWORD = process.env.MONGO_PASSWORD || '';
export const MONGO_URL = process.env.MONGO_URL || '';
export const MONGO_DATABASE = process.env.MONGO_DATABASE || '';
export const MOGO_OPTIONS: mongoose.ConnectOptions = { retryWrites: true, w: 'majority' };

export const SERVER_HOSTNAME = process.env.SERVER_HOSTNAME || 'localhost';
export const SERVER_PORT = process.env.SERVER_PORT ? Number(process.env.SERVER_PORT) : 12345;

export const JWT_SECRET = process.env.JWT_SECRET || 'secret_key';

export const mongo = {
    MONGO_USER,
    MONGO_PASSWORD,
    MONGO_URL,
    MONGO_DATABASE,
    MOGO_OPTIONS,
    MONGO_CONNECTION: `mongodb+srv://${MONGO_USER}:${MONGO_PASSWORD}@${MONGO_DATABASE}.${MONGO_URL}`
};

export const server = {
    SERVER_HOSTNAME,
    SERVER_PORT
};

Connecting to MongoDB

src/server.ts:

import http from 'http';
import express from 'express';
import mongoose from 'mongoose';
import './config/logging';
import { corsHandler } from './middleware/corsHandler';
import { loggingHandler } from './middleware/loggingHandler';
import { routeNotFound } from './middleware/routeNotFound';
import { server, mongo } from './config/config';
import userRouter from './routes/user.routes';
import authRouter from './routes/auth.routes';
export const application = express();
export let httpServer: ReturnType<typeof http.createServer>;

let isConnected = false;

export const Main = async () => {
    logging.log('----------------------------------------');
    logging.log('Initializing API');
    logging.log('----------------------------------------');
    application.use(express.urlencoded({ extended: true }));
    application.use(express.json());

    logging.log('----------------------------------------');
    logging.log('Connect to DB');
    logging.log('----------------------------------------');

    try {
        logging.log('MONGO_CONNECTION: ', mongo.MONGO_CONNECTION);
        if (isConnected) {
            logging.log('----------------------------------------');
            logging.log('Using existing connection');
            logging.log('----------------------------------------');
            return mongoose.connection;
        }

        const connection = await mongoose.connect(mongo.MONGO_CONNECTION, mongo.MOGO_OPTIONS);
        isConnected = true;
        logging.log('----------------------------------------');
        logging.log('Connected to db', connection.version);
        logging.log('----------------------------------------');
    } catch (error) {
        logging.log('----------------------------------------');
        logging.log('Unable to connect to db');
        logging.error(error);
        logging.log('----------------------------------------');
    }

    logging.log('----------------------------------------');
    logging.log('Logging & Configuration');
    logging.log('----------------------------------------');
    application.use(loggingHandler);
    application.use(corsHandler);

    logging.log('----------------------------------------');
    logging.log('Define Controller Routing');
    logging.log('----------------------------------------');
    application.get('/main/healthcheck', (req, res, next) => {
        return res.status(200).json({ hello: 'world!' });
    });

    application.use('/api/users', userRouter);
    application.use('/api/auth', authRouter);

    logging.log('----------------------------------------');
    logging.log('Define Routing Error');
    logging.log('----------------------------------------');
    application.use(routeNotFound);

    logging.log('----------------------------------------');
    logging.log('Starting Server');
    logging.log('----------------------------------------');
    httpServer = http.createServer(application);
    httpServer.listen(server.SERVER_PORT, () => {
        logging.log('----------------------------------------');
        logging.log(`Server started on ${server.SERVER_HOSTNAME}:${server.SERVER_PORT}`);
        logging.log('----------------------------------------');
    });
};

export const Shutdown = () => {
    return new Promise((resolve, reject) => {
        if (httpServer) {
            httpServer.close((err) => {
                if (err) return reject(err);
                resolve(true);
            });
        } else {
            resolve(true);
        }
    });
};

Main();

Step 3: Create the User Model

src/models/user.model.ts:

import mongoose, { Schema } from 'mongoose';

export type UserRole = 'admin' | 'distributor' | 'retailer';

export interface IUser extends Document {
    role: UserRole;
    hash: string;
    name: string;
    email: string;
    password: string;
    contact: string;
    business_name: string;
    address: {
        line1: string;
        city: string;
        state: string;
        zipcode: string;
    };
    geolocation?: { lat: number; long: number };
}

const UserSchema: Schema = new Schema(
    {
        role: { type: String, enum: ['admin', 'distributor', 'retailer'], required: true },
        hash: { type: String },
        name: { type: String, required: true },
        email: { type: String, required: true, unique: true },
        password: { type: String, required: true },
        contact: { type: String, required: true },
        business_name: { type: String, required: true },
        address: {
            line1: String,
            city: String,
            state: String,
            zipcode: String
        },
        geolocation: {
            lat: Number,
            long: Number
        }
    },
    {
        timestamps: true
    }
);

const User = mongoose.model<IUser>('User', UserSchema);

export default User;

Step 4: Implement Middleware

Authentication Middleware

src/middleware/auth.middleware.ts:

import { NextFunction, Request, Response } from 'express';
import jwt from 'jsonwebtoken';

import { IUser, UserRole } from '../models/user.model';
import { JWT_SECRET } from '../config/config';
import mongoose from 'mongoose';

export interface JwtRequest extends Request {
    user?: {
        email: string;
        role: UserRole;
    };
}

export const authentication = (req: JwtRequest, res: Response, next: NextFunction) => {
    const authHeader = req.headers.authorization;
    if (!authHeader) {
        return res.status(401).json('No authorization header found');
    }

    const token = authHeader.split(' ')[1]; // Token structure is 'Bearer <token>'
    try {
        const decoded = jwt.verify(token, JWT_SECRET);
        req.user = decoded as IUser;
        next();
    } catch (error) {
        return res.status(401).json('Invalid token');
    }
};

export function authorizeRoles(allowedRoles: UserRole[]) {
    return (req: JwtRequest, res: Response, next: NextFunction) => {
        const user = req.user;

        if (user && !allowedRoles.includes(user.role)) {
            return res.status(403).json({ message: `Forbidden, you are a ${user.role} and this service is only available for ${allowedRoles}` });
        }

        next();
    };
}

export const generateToken = (_id: mongoose.Types.ObjectId, role: string) => {
    return jwt.sign({ _id, role }, JWT_SECRET, { expiresIn: '1h' });
};

Step 5: Create Routes

Authentication Routes

src/routes/auth.routes.ts:

import express, { Router } from 'express';
import { registerUser, loginUser } from '../controllers/auth.controller';

const authRouter: Router = express.Router();

/**
 * @route   POST /api/auth/register
 * @desc    Create a new user
 * @access  (Public)
 */
authRouter.post('/register', registerUser);

/**
 * @route   POST /api/auth/login
 * @desc    Login a user and get token
 * @access  (Public)
 */
authRouter.post('/login', loginUser);

export default authRouter;

Protected Routes

src/routes/user.routes.ts:

import express, { Router } from 'express';
import { protectedRoute, deleteUser, getUserById, updateUser } from '../controllers/user.controller';
import { authentication, authorizeRoles } from '../middleware/auth.middleware';
const userRouter: Router = express.Router();

/**
 * @route   GET /api/users/protected
 * @desc    A protected route
 * @access  Admin/Distributor/Retailer
 */
userRouter.get('/protected', authentication, protectedRoute);

/**
 * @route   GET /api/users/:id
 * @desc    Get a user by email
 * @access  Admin/Distributor/Retailer (self)
 */
userRouter.get('/:id', authentication, getUserById);

/**
 * @route   DELETE /api/users/:id
 * @desc    Delete a user
 * @access  Admin
 */
userRouter.delete('/:id', authentication, authorizeRoles(['admin']), deleteUser);

/**
 * @route   PUT /users/:id
 * @desc    Update user details
 * @access  Admin/Distributor/Retailer (self)
 */
userRouter.put('/:id', authentication, updateUser);

export default userRouter;

Step 6: Create Controllers

src/controllers/auth.controller.ts:

import { Request, Response } from 'express';
import bcrypt from 'bcrypt';
import User from '../models/user.model';
import { generateToken } from '../middleware/auth.middleware';

//User registration
export const registerUser = async (req: Request, res: Response) => {
    console.log('Register route hit');
    try {
        const { name, email, password, role, contact, business_name, address, geolocation } = req.body;
        const hashedPassword = await bcrypt.hash(password, 10);
        const user = new User({ name, email, password: hashedPassword, role, contact, business_name, address, geolocation });
        await user.save();
        return res.status(201).json({ message: 'User created' });
    } catch (error: any) {
        res.status(400).json({ error: error.message });
    }
};

//User login
export const loginUser = async (req: Request, res: Response) => {
    try {
        const { email, password } = req.body;
        const user = await User.findOne({ email });
        if (!user) {
            return res.status(404).json({ error: 'User does not exist' });
        }
        const isPasswordValid = await bcrypt.compare(password, user.password);
        if (!isPasswordValid) {
            return res.status(401).json({ error: 'Invalid email or password' });
        }
        const token = generateToken(user._id, user.role);
        return res.status(200).json({ token });
    } catch (error: any) {
        res.status(500).json({ error: error.message });
    }
};

Step 7: Start the Server

Run the following command to start the server:

npm run dev

The full source code is available at: https://github.com/syedammar/rest-api-nodejs-typescript

This implementation provides a modular, maintainable API with authentication and role-based access control. You can expand it by adding more routes, models, and business logic as required.

When to use "async" and when "defer" in script tag?

Syed Ammar — Thu, 12 Dec 2024 09:41:54 +0000

The async and defer attributes in the <script> tag are used to optimize script loading and execution in HTML. Both attributes allow scripts to load without blocking the rendering of the page, but they have key differences in how they handle execution.

1. `async` Attribute

How it Works:
- The script is loaded asynchronously, meaning it downloads in parallel with other resources (like CSS or images).
- The script executes as soon as it is downloaded, which may happen before, during, or after the HTML parsing is complete.
Best for:
- Independent scripts that do not rely on or interact with other scripts.
- Examples:
- Analytics scripts (e.g., Google Analytics).
- Advertising or tracking scripts.
- These scripts do not depend on the HTML or other scripts to run correctly.
Example:

  <script src="analytics.js" async></script>

Use Case: When script execution timing does not need to follow the document parsing order or depend on other scripts.

2. `defer` Attribute

How it Works:
- The script is downloaded in parallel with other resources, just like async.
- The script is executed only after the entire HTML document has been parsed.
Best for:
- Scripts that depend on the complete DOM structure being available.
- Scripts that interact with or depend on other scripts in a specific order.
- Examples:
- Frameworks or libraries (e.g., jQuery, Angular).
- Inline scripts that manipulate DOM elements.
Example:

  <script src="main.js" defer></script>

Use Case: When the script should execute only after the HTML document is fully parsed and you need to maintain execution order among multiple scripts.

Key Differences Between `async` and `defer`

Attribute	Script Loading	Script Execution	Order Guarantee
`async`	Parallel to HTML parsing	As soon as it’s downloaded	No, execution is immediate
`defer`	Parallel to HTML parsing	After HTML parsing is complete	Yes, scripts execute in order

Summary

Use async for:
- Independent scripts that don’t depend on other scripts or the DOM.
- Performance-critical tasks like analytics or advertising.
Use defer for:
- Scripts that rely on the DOM being fully loaded.
- Multiple scripts that must execute in a specific order.

Better way to add external script in html page and why?

Syed Ammar — Thu, 12 Dec 2024 09:37:13 +0000

When deciding whether to add an external script in the <head> tag or before the closing </body> tag, the choice depends on how the script affects your page and performance considerations.

1. Adding the Script in the `<head>`

Best for: Critical scripts that need to load early.
Examples:
- Scripts necessary for the structure or functionality of the page, like frameworks or libraries (e.g., AngularJS, React).
- Analytics tools that should capture data right as the page begins loading.
Drawback: If not handled carefully, scripts in the <head> can block rendering, leading to slower page load times and a poor user experience.
Solution: Use the async or defer attribute:
- async: Loads the script asynchronously without blocking the page but executes it as soon as it's downloaded.
- defer: Loads the script in order and delays execution until the HTML is fully parsed, which prevents blocking.

   <head>
       <script src="important-script.js" defer></script>
   </head>

2. Adding the Script Before the Closing `</body>`

Best for: Non-critical or user-interaction scripts.
Examples:
- Scripts for user interactions, animations, or enhancements that don't affect the initial rendering.
- Third-party integrations like chatbots or social widgets.
Benefits:
- Ensures the page's content is loaded and rendered first, providing a faster "perceived load time" for users.
- Non-blocking, as the script loads after the page content.

   <body>
       <!-- Content -->
       <script src="enhancement-script.js"></script>
   </body>

Key Differences

Criteria	In `<head>`	Before `</body>`
Blocking Potential	Higher (unless `defer`)	Lower
User Experience Impact	Critical scripts, early load	Non-critical scripts, delayed load
Performance	May slow down rendering	Ensures content loads first

Conclusion:

Use the <head> for essential scripts (with defer or async).
Use before </body> for scripts that enhance interactivity or are less critical for initial page rendering.

This approach balances performance with functionality, ensuring a smooth user experience.

Let's understand the difference between CJS & MJS

Syed Ammar — Thu, 05 Sep 2024 12:34:42 +0000

The terms CJS (CommonJS) and MJS (ES Module) refer to two module systems used in JavaScript to organize code into reusable components. Here's a comparison between the two:

1. CommonJS (CJS)

Syntax: CommonJS uses require() to load modules and module.exports or exports to export them.
Used in: It’s the module system primarily used in Node.js prior to the introduction of ES modules.
Synchronous Loading: CommonJS modules are loaded synchronously, meaning they block execution until the module is loaded. This is ideal for server-side applications but less suitable for client-side code where async loading is preferred.

Example:

 // Import
 const fs = require('fs');

 // Export
 module.exports = function () {
   console.log("Hello from CJS");
 };

2. ES Modules (MJS)

Syntax: ES Modules use import and export statements.
Used in: Modern JavaScript environments, both in browsers and Node.js (with the .mjs extension or using "type": "module" in package.json).
Asynchronous Loading: ES modules are asynchronously loaded, which is better suited for client-side environments.

Example:

 // Import
 import fs from 'fs';

 // Export
 export function greet() {
   console.log("Hello from MJS");
 }

Key Differences:

Loading Mechanism:
- CJS: Modules are loaded synchronously.
- MJS: Modules are loaded asynchronously, which makes them non-blocking and more efficient in certain scenarios (especially in the browser).
Syntax:
- CJS: Uses require() and module.exports.
- MJS: Uses import and export.
Compatibility:
- CJS: Widely supported in Node.js, but less compatible with browsers (without bundlers).
- MJS: Native support in modern browsers and Node.js (from version 12+), aligning with the ES6 module standard.
Default Exports:
- CJS: Can export an object or a function directly as a module.
- MJS: Supports both named and default exports, allowing more flexibility in exporting multiple functions or values.

When to Use:

CJS (CommonJS): If working with older Node.js projects or existing libraries that are based on the CommonJS module system.
MJS (ES Modules): When building modern applications, especially for client-side development or Node.js projects that target modern runtimes.

In modern development, ES Modules are becoming the standard, but many legacy projects still rely on CommonJS.

Difference between `aria-label` and `aria-labelledby`

Syed Ammar — Wed, 28 Aug 2024 11:31:21 +0000

The aria-label and aria-labelledby attributes are both used in web accessibility to provide labels for elements, but they serve different purposes and are used in different scenarios. Here’s a breakdown of the differences between them:

`aria-label`

Purpose: aria-label provides an explicit label for an element. The label is a string that is directly defined within the aria-label attribute.
Usage: Use aria-label when you want to provide a custom, hidden label for an element that does not have a visible label in the document. It’s often used for elements like buttons or icons where the visible text does not fully describe the element’s function or when there’s no visible text at all.
Example:

  <button aria-label="Close">X</button>

In this example, the button visually displays "X", but the screen reader will announce "Close" because of the aria-label.

Consideration: The label provided by aria-label is not visible on the screen. It’s purely for assistive technologies like screen readers.

`aria-labelledby`

Purpose: aria-labelledby refers to the id of one or more elements that contain the text that labels the current element. This means the label is derived from the content of other elements in the document.
Usage: Use aria-labelledby when there is an existing visible element (or elements) on the page that provides a suitable label. It’s particularly useful for linking to existing text that already describes the element.
Example:

  <label id="username-label">Username:</label>
  <input type="text" id="username" aria-labelledby="username-label" />

In this example, the input field is labeled by the label element with id="username-label". The screen reader will announce the content of the label ("Username:") when the input field is focused.

Consideration: Unlike aria-label, the label provided by aria-labelledby is visible in the document, making it more natural and consistent with how most labels work on a webpage.

Key Differences

Content Source:
- aria-label: The label is defined directly as a string within the attribute.
- aria-labelledby: The label is derived from the content of another element(s) in the DOM, which is referenced by id.
Visibility:
- aria-label: The label is hidden and only accessible to assistive technologies.
- aria-labelledby: The label is visible on the screen because it references existing elements.
Use Case:
- aria-label: Use when you need to provide a label for an element that has no visible label or when the visible label does not accurately describe the element’s purpose.
- aria-labelledby: Use when there is already an appropriate visible label or text that can be associated with the element.

Practical Example:

Here’s a situation where both might be used together:

<div id="name-header">Full Name</div>
<input type="text" aria-labelledby="name-header" aria-label="Enter your full name" />

In this example:

aria-labelledby references id="name-header", which is the visible label.
aria-label provides additional instructions or clarification that is not visible but is important for accessibility.

Using both attributes together might be redundant unless you need to provide extra information not covered by the visible label. Typically, you would use one or the other, depending on the context.

How to improve performance in web application development?

Syed Ammar — Sat, 24 Aug 2024 09:57:10 +0000

Optimizing the performance of a web application involves several strategies to ensure it loads quickly, runs efficiently, and provides a smooth user experience. Here’s a comprehensive approach:

1. Frontend Optimization:

Minimize HTTP Requests: Reduce the number of elements on a page to decrease the number of HTTP requests. Use techniques like CSS sprites and image data URIs where appropriate.
Use Efficient File Formats: Opt for modern file formats like WebP for images and consider using vector graphics (SVG) for icons.
Optimize Images: Compress images and use responsive images to serve different sizes based on the device.
Minify and Bundle Assets: Minify CSS, JavaScript, and HTML files to reduce their size. Bundle multiple files into a single file to reduce the number of requests.
Use a Content Delivery Network (CDN): Distribute your content across multiple servers to reduce latency and improve load times.
Leverage Browser Caching: Set appropriate cache headers for static assets so that browsers can cache files and reduce load times on subsequent visits.
Enable Compression: Use Gzip or Brotli compression to reduce the size of text-based assets.
Optimize CSS and JavaScript Delivery: Load CSS files in the <head> and JavaScript files at the end of the <body> or use async/defer attributes to prevent render-blocking.

2. Backend Optimization:

Database Optimization: Index important columns, optimize queries, and regularly clean up and maintain your database. Use caching strategies to minimize database load.
Efficient Code Practices: Ensure your backend code is efficient and follows best practices. Avoid unnecessary computations and reduce the complexity of algorithms.
Asynchronous Processing: Offload long-running tasks to background processes or queues to keep the application responsive.
Load Balancing: Distribute incoming traffic across multiple servers to ensure that no single server becomes a bottleneck.
Optimize Server Configuration: Configure your server settings for optimal performance, including adjusting memory limits, timeout settings, and connection limits.

3. Performance Monitoring and Testing:

Use Performance Monitoring Tools: Implement tools like New Relic, Datadog, or Google Analytics to monitor performance metrics and identify bottlenecks.
Conduct Load Testing: Simulate traffic to see how your application performs under different loads. Tools like Apache JMeter or Locust can help with this.
Profile and Debug: Use profiling tools to identify performance issues in your code. Tools like Chrome DevTools, Lighthouse, and others can help with this.

4. User Experience (UX) Improvements:

Prioritize Above-the-Fold Content: Ensure that the content visible on the user's screen loads quickly by optimizing above-the-fold content.
Implement Lazy Loading: Load off-screen images and other resources only when they are needed to improve initial load times.
Enhance Interactivity: Ensure your application remains responsive and interactive by minimizing main-thread work and optimizing JavaScript execution.

By combining these strategies, you can significantly enhance the performance of your web application, leading to faster load times and a better user experience.

Why caret symbol (^) is used in the package.json

Syed Ammar — Sun, 18 Aug 2024 10:07:57 +0000

In npm (Node.js package manager), the caret symbol (^) is used in the package.json file to specify version ranges for dependencies. It provides a way to indicate that your project is compatible with a range of versions of a package, rather than a single specific version. Here's how it works:

Versioning with Caret (`^`)

The caret symbol allows for automatic updates to newer minor and patch versions of a package, while ensuring compatibility with the specified major version.

How It Works

^1.2.3: This specifies that the version should be compatible with any version from 1.2.3 up to (but not including) 2.0.0. It allows for updates that only modify the minor or patch version numbers.
^0.2.3: For versions with a major version of 0, it will be compatible with versions from 0.2.3 up to (but not including) 0.3.0. This is because, in the 0.x.y range, changes to the minor version are considered breaking changes.
^0.0.3: For very early versions (major version 0), it will allow updates to the patch version only, so it will be compatible with versions from 0.0.3 up to (but not including) 0.0.4.

Examples

Specifying ^1.2.3:
- Acceptable versions: 1.2.4, 1.3.0, 1.9.9
- Not acceptable versions: 2.0.0 or any version beyond 1.x.x
Specifying ^0.2.3:
- Acceptable versions: 0.2.4, 0.3.0
- Not acceptable versions: 0.4.0 or any version beyond 0.2.x
Specifying ^0.0.3:
- Acceptable versions: 0.0.4, 0.0.5
- Not acceptable versions: 0.1.0 or any version beyond 0.0.x

Benefits of Using `^`

Automatic Updates: Allows your project to automatically receive minor and patch updates, which can include important bug fixes and performance improvements, without manual intervention.
Compatibility: Ensures that updates remain within the same major version, minimizing the risk of breaking changes that can occur with major version upgrades.

Caveats

Breaking Changes: Although ^ is designed to avoid breaking changes by sticking within the same major version, there’s always a chance that minor or patch updates could introduce unexpected issues. It's important to test your application thoroughly when updating dependencies.
Dependency Compatibility: Ensure that your dependencies and their sub-dependencies are compatible with the versions allowed by ^. Sometimes indirect dependencies may not work well with updated versions.

Summary

The caret (^) symbol in npm package versions helps manage dependency versions flexibly by allowing updates that do not change the major version number. This approach strikes a balance between receiving updates and maintaining stability.

Let's understand the different types of NPM dependencies

Syed Ammar — Sun, 18 Aug 2024 09:29:27 +0000

In Node.js and JavaScript projects, dependencies and devDependencies are two types of package dependencies that you can specify in your package.json file. They serve different purposes and are used in different contexts:

Dependencies

Definition: Dependencies are libraries or modules that your application needs to run in a production environment. They are required for the core functionality of your application.

Purpose: These packages are necessary for your application to function correctly when it's deployed and used by end-users.

Example Use Case:

If you're building a web application that relies on Express.js for handling HTTP requests, Express.js would be listed under dependencies.

In package.json:

{
  "dependencies": {
    "express": "^4.17.1"
  }
}

Installation:

Run npm install or yarn install, and these packages will be installed.

How They’re Used:

When you or anyone else installs your application with npm install (or yarn install), both dependencies and devDependencies are installed. However, in production environments, you may choose to install only dependencies by using npm install --production or similar commands.

DevDependencies

Definition: DevDependencies are packages that are only needed during the development and testing phases of your project. They are not required for your application to run in production.

Purpose: These packages are typically used for tasks such as testing, building, and code linting. They help with development and maintenance but are not necessary for the application to function in a production environment.

Example Use Case:

Tools like testing frameworks (e.g., Mocha, Jest), linters (e.g., ESLint), or build tools (e.g., Webpack, Babel) would be listed under devDependencies.

In package.json:

{
  "devDependencies": {
    "jest": "^27.0.0",
    "eslint": "^7.32.0"
  }
}

Installation:

Run npm install or yarn install to install both dependencies and devDependencies. If you want to install only the dependencies, you can use npm install --production or set NODE_ENV=production before running the install command.

How They’re Used:

devDependencies are meant for development purposes. They are excluded from production deployments to keep the production environment lean and efficient.

Summary

Dependencies: Required for your application to run in production.
DevDependencies: Required for development tasks such as testing and building but not needed in production.

When managing your project's dependencies, it's essential to correctly categorize them to ensure that your production environment remains lightweight and free of unnecessary tools and libraries.

How event loop work in Node.js?

Syed Ammar — Sat, 17 Aug 2024 12:17:28 +0000

The event loop is a core concept in Node.js that enables it to handle asynchronous operations efficiently. Here's a simplified explanation of how it works:

1. Single Threaded Nature

Node.js operates on a single thread. This means it can only execute one piece of code at a time. However, Node.js is designed to handle many operations concurrently without requiring multiple threads.

2. Non-Blocking I/O

Node.js uses non-blocking I/O operations. When Node.js performs tasks like reading files, querying a database, or making network requests, it doesn't wait for these tasks to complete before moving on to the next task. Instead, it continues executing other code while these tasks are being processed.

3. Event Loop Mechanism

The event loop is responsible for managing the execution of code and handling asynchronous events. It continuously checks the "queue" of tasks and decides which ones to execute. Here's a step-by-step breakdown:

Initialize: When a Node.js application starts, it initializes and sets up the environment.
Execution Phase: Node.js executes any initial code synchronously. If there are asynchronous tasks (like file reading or HTTP requests), they are handed off to the system's APIs.
Event Loop Phases: The event loop has several phases, and it processes tasks in each phase in a specific order:
- Timers Phase: Executes callbacks scheduled by setTimeout() and setInterval().
- IO Callbacks Phase: Executes callbacks for I/O operations, such as file reads or network requests.
- Idle, Prepare Phase: Internal phase used for system tasks.
- Poll Phase: Retrieves new I/O events, executing their callbacks. If the poll queue is empty, it will check if there are callbacks in the setImmediate() queue.
- Check Phase: Executes callbacks scheduled by setImmediate().
- Close Callbacks Phase: Handles close events, such as those emitted by socket.on('close').
Re-check and Exit: If the event loop has no more tasks to process, it will exit, allowing the program to terminate. If there are tasks still pending, it will continue running.

4. Callback Queue

Asynchronous tasks, once completed, push their callbacks to a queue. The event loop picks these callbacks from the queue and executes them in order.

5. Microtask Queue (Next Tick)

Apart from the main queue, there's also a microtask queue (or next tick queue) where callbacks scheduled with process.nextTick() or promises' .then() handlers are queued. Microtasks have priority over regular callbacks, meaning they are executed after the current operation completes but before the event loop moves on to the next phase.

Example

Here's a simple example to illustrate how the event loop works:

const fs = require('fs');

console.log('Start');

fs.readFile('file.txt', (err, data) => {
  if (err) throw err;
  console.log('File read complete');
});

console.log('End');

Output:

Start
End
File read complete

Explanation:

console.log('Start'); and console.log('End'); are executed synchronously.
fs.readFile initiates an asynchronous file read operation and continues executing the next line of code without waiting.
Once the file read operation completes, its callback (console.log('File read complete');) is pushed to the event loop's callback queue.
The event loop processes the callback after the synchronous code execution completes.

The event loop allows Node.js to efficiently handle many operations at once, despite being single-threaded, by delegating operations to the system and handling their results asynchronously.

The Event Loop orchestrates the execution of tasks, prioritizing the Microtask Queue to ensure promises and related operations are resolved quickly before moving on to tasks in the Main Task Queue (Macro Task).

This dynamic enables JavaScript to handle complex asynchronous behavior in a single-threaded environment.

DEV Community: Syed Ammar

Show folder name instead of index.tsx in VS Code

What are WeakMaps in JS?

Key Features

Syntax

Methods

Examples

Basic Usage

Garbage Collection

Use Cases

Advantages

Limitations

Difference between Map and WeakMap

Key Differences

Feature Comparison

1. Key Types

2. Garbage Collection

3. Iteration

4. Size Property

Use Cases

When to Use Map

When to Use WeakMap

Summary

JavaScript Object - Shallow freeze vs Deep freeze

1. Shallow Freeze

2. Deep Freeze

Comparison Table

Use Cases

Considerations

Handling Cyclic References

Implementing an Express-based REST API in TypeScript with MongoDB, JWT-based Authentication, and RBAC

Implementing an Express-based REST API in TypeScript with MongoDB, JWT-based Authentication, and Role-Based Access Control (RBAC)

Prerequisites

Step 1: Project Setup

1. Initialize the Project

2. Configure TypeScript

3. Project Structure

Step 2: Configure MongoDB and other Server configuration

Database Configuration

Connecting to MongoDB

Step 3: Create the User Model

Step 4: Implement Middleware

Authentication Middleware

Step 5: Create Routes

Authentication Routes

Protected Routes

Step 6: Create Controllers

Step 7: Start the Server

When to use "async" and when "defer" in script tag?

1. async Attribute

2. defer Attribute

Key Differences Between async and defer

Summary

Better way to add external script in html page and why?

1. Adding the Script in the <head>

2. Adding the Script Before the Closing </body>

Key Differences

Conclusion:

Let's understand the difference between CJS & MJS

1. CommonJS (CJS)

2. ES Modules (MJS)

Key Differences:

When to Use:

Difference between `aria-label` and `aria-labelledby`

aria-label

aria-labelledby

Key Differences

Practical Example:

How to improve performance in web application development?

1. Frontend Optimization:

2. Backend Optimization:

3. Performance Monitoring and Testing:

4. User Experience (UX) Improvements:

Why caret symbol (^) is used in the package.json

Versioning with Caret (^)

How It Works

Examples

Benefits of Using ^

Caveats

Summary

When to Use `Map`

When to Use `WeakMap`

1. `async` Attribute

2. `defer` Attribute

Key Differences Between `async` and `defer`

1. Adding the Script in the `<head>`

2. Adding the Script Before the Closing `</body>`

`aria-label`

`aria-labelledby`

Versioning with Caret (`^`)

Benefits of Using `^`