DEV Community: Elham Najeebullah

Start with the problem statement and your mindset approach, then dive into the code journey.

Elham Najeebullah — Sat, 07 Jun 2025 04:09:47 +0000

The power of this approach is that you see your actual thinking process through the code evolution. You learn that getting it wrong initially is part of the process, and that optimization comes after getting a working solution.

Let me should you my approach:

Section 1: Understanding the Problem First

Show the original problem with examples, then explain lexicographical order with your simple analogies (dictionary ordering, etc.).

Section 2: First Experimentation - Getting it Wrong

Show your very first attempt where you had the logic backwards:

// My first attempt - this was WRONG but important for learning!
const a1 = ["arp", "live", "strong"];
const a2 = ["lively", "alive", "harp", "sharp", "armstrong"];

a1.forEach(function (elementA1, indexA1) {
    a2.forEach(function(elementA2, indexA2) {
        // This was backwards - checking if short string contains long string!
        console.log(elementA1.includes(elementA2)); // Always false!
    });
});

Explain why this failed and what you learned from the mistake.

Section 3: The Breakthrough - Fixing the Logic

Show your corrected version:

// The "aha moment" - flipping the logic around
const matchedArr = new Set<string>();

a1.forEach(function (elementA1) { 
    a2.forEach(function(elementA2) {
        // Now checking: Does the BIG string contain the SMALL string?
        if (elementA2.includes(elementA1)) {
            matchedArr.add(elementA1);
        }
    });
});

console.log("Matched Array", matchedArr);

Section 4: Building the Clean Solution

Show your two-function approach:

// Clean, working solution with separation of concerns
function matchedWords(a1: string[], a2: string[]): Set<string> {
    const matchedArr = new Set<string>();

    a1.forEach(function (elementA1) { 
        a2.forEach(function(elementA2) {
            // Check if elementA1 is a substring of elementA2
            if (elementA2.includes(elementA1)) {
                matchedArr.add(elementA1);
            }
        });
    });

    return matchedArr;
}

function lexOrderSorted(setArr: Set<string>): string[] {
    // Convert Set to array and sort lexicographically
    return Array.from(setArr).sort();
}

// Using the functions together
const matchedWordsArr = matchedWords(a1, a2);
const sortedLexOrderArr = lexOrderSorted(matchedWordsArr);
console.log(sortedLexOrderArr); // ["arp", "live", "strong"]

Section 5: Optimization Journey

First, show the performance analysis discussion, then the optimized code:

// Optimized version with early termination and edge case handling
function matchedWords(a1: string[], a2: string[]): Set<string> {
    // Handle edge cases first
    if (a1.length <= 0 || a2.length <= 0) return new Set<string>();

    const matchedArr = new Set<string>();

    for (let elementA1 of a1) {
        // Once we find a match, break out of inner loop (optimization!)
        for (let elementA2 of a2) {
            if (elementA2.includes(elementA1)) {
                matchedArr.add(elementA1);
                break; // Stop checking remaining strings in a2
            }
        }
    }

    return matchedArr;
}

Conclusion

The real lesson from this coding journey isn't about mastering lexicographical ordering or substring matching - it's about developing the problem-solving mindset that separates confident developers from those who get stuck.

Notice how we started by understanding the problem deeply, experimented fearlessly with our first (wrong) attempt, built a working solution through iteration, and only then optimized for performance.

This systematic approach of breaking down complexity, embracing mistakes as learning opportunities, and improving incrementally is exactly how professional developers tackle every challenge they encounter.

The next time you face a coding problem that seems overwhelming, remember this process: understand first, experiment boldly, make it work, then make it better.

This mindset will carry you through interview questions, personal projects, and your entire programming career because every expert developer still follows these same fundamental steps, no matter how complex the problem becomes.

Verbalate: Break Language Barriers in Your Videos with AI Magic

Elham Najeebullah — Mon, 08 Jul 2024 06:06:43 +0000

Ever wished your videos could speak every language? Meet Verbalate, the game-changer in video translation.

Imagine your content reaching viewers worldwide, speaking their language perfectly. That's what Verbalate does. It uses smart AI to translate your videos, creating natural voiceovers that match lip movements. It's like having a pro dubbing team at your fingertips.

Whether you're into e-learning, marketing, or just want to go global, Verbalate makes it easy. No more subtitle headaches or awkward voice-overs. Just smooth, natural translations that feel like the real deal.

Curious? Try Verbalate free and watch your audience grow. Click below to start your journey to becoming a multilingual content superstar!
verbalate.ai

Create a Lambda function that responds to CloudWatch Alarm actions

Elham Najeebullah — Tue, 27 Feb 2024 13:06:03 +0000

To create a Lambda function that responds to CloudWatch Alarm actions and modifies AWS resources accordingly, you can follow these steps.

This guide will demonstrate creating a Lambda function in Node.js that can stop EC2 instances as a response to an alert, but the concept can be extended to other resources and actions (e.g., modifying or terminating resources).

Prerequisites:

AWS CLI installed and configured.
Basic knowledge of AWS services (Lambda, CloudWatch, EC2).
Node.js installed locally if you wish to test the script outside of AWS initially.

Step 1: Create an IAM Role for Lambda

IAM Console: Go to the IAM console in AWS.
Create Role: Select "Lambda" as the service that will use this role.
Attach Policies: Attach policies that grant the necessary permissions. For stopping EC2 instances, attach the AmazonEC2FullAccess policy. In a production environment, you should create a custom policy with more restricted permissions.
Review and Create: Name your role (e.g., LambdaEC2ManagementRole) and create it.

Step 2: Create the Lambda Function

Lambda Console: Go to the AWS Lambda console and choose "Create function".
Configuration:
- Name your function (e.g., StopEC2Instances).
- Select Node.js as the runtime.
- Choose the IAM role created in Step 1.

Function Code: Use the AWS SDK for JavaScript in Node.js. Below is a simple example that stops a specific EC2 instance when triggered. Replace 'INSTANCE_ID' with the actual instance ID you want to stop.

const AWS = require('aws-sdk');
const ec2 = new AWS.EC2();

exports.handler = async (event) => {
    console.log("Event: ", JSON.stringify(event, null, 2));

    const params = {
        InstanceIds: ['INSTANCE_ID'], // Replace with your instance ID
        DryRun: false
    };

    try {
        const data = await ec2.stopInstances(params).promise();
        console.log("Success", JSON.stringify(data, null, 2));
    } catch (err) {
        console.error("Error", err);
    }
};

Deploy: After entering your code, deploy the Lambda function.

Step 3: Configure CloudWatch Alarm or AWS Budgets to Trigger Lambda

For CloudWatch Alarms: Navigate to the CloudWatch console, create or select an existing alarm, and specify the Lambda function as the action for the alarm state (e.g., "In Alarm").
For AWS Budgets Alerts:
- Go to the AWS Budgets console.
- Create a budget or select an existing one.
- In the "Alerts" section, add a new alert.
- Set the alert to publish to an SNS topic.
- Subscribe the Lambda function to the SNS topic either through the Lambda console or the SNS console.

Step 4: Testing and Verification

Invoke Manually: Initially, you might want to invoke the Lambda function manually with a test event to ensure it operates as expected without waiting for an alarm.
Monitor Logs: Check the CloudWatch Logs for your Lambda function to verify it's being triggered and is executing correctly.
Trigger Alarm: To fully test the integration, you can configure conditions that trigger the CloudWatch Alarm or exceed your AWS Budgets threshold to ensure the Lambda function is invoked automatically.

React & TypeScript: useReducer Hook

Elham Najeebullah — Mon, 16 Jan 2023 07:46:06 +0000

Why use it?
useReducer is a hook that allows you to manage the state of your component in a similar way to how you would use a reducer function in Redux. It is an alternative to the useState hook and it is useful in cases where your component's state is complex and requires multiple updates based on the previous state, or when you need to handle side effects in response to state changes.

Here are some reasons why you might use useReducer:

Complex state: When your component's state is complex and requires multiple updates based on the previous state, useReducer can make it easier to manage. The reducer function takes the current state and an action as arguments and returns a new state based on the action. This makes it easy to handle complex state updates and ensures that the state updates are performed in a predictable and consistent way.
Performance: useReducer can improve the performance of your component by reducing unnecessary re-renders. When you use useState, every time you update the state, the component re-renders. However, with useReducer, you can update the state without causing the component to re-render, which can improve the performance of your application.
Side effects: When you need to handle side effects in response to state changes, useReducer can make it easier to manage. For example, you can use useEffect in conjunction with useReducer to handle side effects such as fetching data from an API or handling a user's input.
Code organization: When your component's state is complex and requires multiple updates based on the previous state, useReducer can make it easier to organize and manage the component's logic.

How to use Typescript with React

interface State {
  count: number;
}

enum ActionType {
  Increment = 'INCREMENT',
  Decrement = 'DECREMENT'
}
interface Action {
  type: ActionType;
  payload: number;
}

const initialState: State = { count: 0 };

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case ActionType.Increment:
      return { count: state.count + action.payload };
    case ActionType.Decrement:
      return { count: state.count - action.payload };
    default:
      return state;
  }
};

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: ActionType.Increment, payload: 1 })}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: ActionType.Decrement, payload: 1 })}>
        Decrement
      </button>
    </div>
  );
}

const [state, dispatch] = useReducer(reducer, initialState); is a way to call the React Hook useReducer and it's used to initialize the state and the dispatch function in your component.

Here's what it does step by step:

useReducer is called and passed two arguments: the reducer function and the initialState object.
useReducer returns an array with two elements, the first element is the current state, the second element is the dispatch function.
The const [state, dispatch] destructures the returned array and assigns the first element to state and the second element to dispatch.

The state variable now contains the current state of the component and it can be used to render the component's UI. The dispatch function is used to update the state by passing an action to the reducer function.

For example, when you call dispatch({ type: 'increment', payload: 1 }) it will pass the action object to the reducer function and the reducer will update the state and return the new state.

In summary, this line of code sets up the state and the dispatch function for the component, it's the initial state of the component, the state will change as the component updates and the dispatch function is used to update the state based on the actions that are dispatched.

React & TypeScript: useCallback Hook

Elham Najeebullah — Mon, 16 Jan 2023 06:57:31 +0000

What is useCallback Hook?
useCallback is a React Hook that allows you to memoize a function. It takes a function and an array of dependencies as arguments, and returns a memoized version of the function.

Why use it?
The main purpose of useCallback is to improve the performance of your React application by preventing unnecessary re-renders. When a component re-renders, all of its child components also re-render, even if their props haven't changed. If a child component receives a callback function as a prop, it will cause the child component to re-render every time the parent component re-renders, even if the callback function is the same.

By using useCallback, you can ensure that the callback function is only recreated if one of its dependencies has changed. This can significantly improve the performance of your application, especially when you have a large number of child components or when the child components are expensive to render.

Here's an example of how to use useCallback:

import { useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // only re-create the handleClick function if count changes

  return (
    <ChildComponent onClick={handleClick} />
  );
}

function ChildComponent({ onClick }: { onClick: () => void }) {
  return <button onClick={onClick}>Click me</button>;
}

In this example, the handleClick function is only recreated if the count state changes, which means that the ChildComponent will not re-render unless the count state changes.

It's important to note that you should only pass the minimal set of values as dependencies to useCallback otherwise it will re-create the function on every re-render which will make the performance worse.

How to use useEffect hook with useCallback?
The useEffect hook can be used with the useCallback hook to improve the performance of your application. Here is an example of how to use useEffect with useCallback:

import { useEffect, useState, useCallback } from 'react';

function MyComponent() {
  const [data, setData] = useState<MyDataType | null>(null);

  const fetchData = useCallback(() => {
    // fetch data and update state
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return <div>{data}</div>;
}

In this example, useCallback is used to create a fetchData function that is only recreated if its dependencies change. The useEffect hook is then used to invoke the fetchData function when the component is mounted and when the fetchData function changes.

By using useCallback to memoize the fetchData function, we ensure that it is only recreated if its dependencies change. This means that the useEffect hook will not invoke the fetchData function unnecessarily, which can improve the performance of your application.

It's important to note that if the dependencies passed to the useCallback hook are not changing, the callback function will stay the same on every re-render and it will not cause unnecessary re-renders.

useEffect + useCallback to handle cleanup logic
You can also use useEffect and useCallback together to handle cleanup logic. Here's an example of how you can use them together to handle cleanup logic:

import { useEffect, useState, useCallback } from 'react';

function MyComponent() {
  const [data, setData] = useState<MyDataType | null>(null);

  const handleData = useCallback((data: MyDataType) => {
    setData(data);
  }, []);

  useEffect(() => {
    const subscription = someDataSource.subscribe(handleData);
    return () => {
      subscription.unsubscribe();
    };
  }, [handleData]);

  return <div>{data}</div>;
}

In this example, we are using useCallback to create a handleData function that is only recreated if its dependencies change. The useEffect hook is then used to subscribe to a data source and pass the handleData function as a callback. The useEffect hook also returns a cleanup function that is invoked when the component is unmounted or when the handleData function changes, in which case it unsubscribes from the data source.

Note that in this case, handleData is used as a dependency for the useEffect hook, this way the subscription is only created when the handleData callback change. This ensures that the component will not subscribe to the data source multiple times and will not cause unnecessary re-renders.

MySQL: How to create One-to-Many Relationship

Elham Najeebullah — Thu, 12 Jan 2023 08:10:17 +0000

First, I have created the necessary table in a MySQL database for an ecommerce application example:

/*The "customers" table stores information about the website's customers, including their first and last name, email, and password.*/
CREATE TABLE customers (
    customerID INT AUTO_INCREMENT PRIMARY KEY,
    firstName VARCHAR(50) NOT NULL,
    lastName VARCHAR(50) NOT NULL,
    email VARCHAR(100) NOT NULL,
    password VARCHAR(255) NOT NULL
);

/*The "categories" table stores information about different product categories, including the name of the category.*/
CREATE TABLE categories (
    categoryID INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50) NOT NULL
);

/*The "products" table stores information about the products available for purchase on the website, including their name, price, and the category they belong to.*/
CREATE TABLE products (
    productID INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    price DECIMAL(10, 2) NOT NULL,
    categoryID INT NOT NULL,
    FOREIGN KEY (categoryID) REFERENCES categories(categoryID)
);

/*The "orders" table stores information about orders made by customers, including the customer's ID, and the date of the order.*/
CREATE TABLE orders (
    orderID INT AUTO_INCREMENT PRIMARY KEY,
    customerID INT NOT NULL,
    orderDate DATE NOT NULL,
    FOREIGN KEY (customerID) REFERENCES customers(customerID)
);

/*The "orderDetails" table stores information about the products included in each order, including the order ID, product ID, and quantity.*/
CREATE TABLE orderDetails (
    orderID INT NOT NULL,
    productID INT NOT NULL,
    quantity INT NOT NULL,
    PRIMARY KEY (orderID, productID),
    FOREIGN KEY (orderID) REFERENCES orders(orderID),
    FOREIGN KEY (productID) REFERENCES products(productID)
);

Each table have a key that related to other tables, for example product table related to categories table by categoryID, and order table related to customers table by customerID. Also, orderDetails table related to order table and product table by orderID and productID respectively.

The "products" table and "categories" table have a one-to-many relationship.

This is because, for each category, there can be multiple products (many products in one category), but each product can only belong to one category.

In database terms, this is represented by a foreign key on the "products" table that references the primary key of the "categories" table. This allows each row in the "products" table to be linked to a specific row in the "categories" table, creating the one-to-many relationship.

The "orders" table and "orderDetails" table have a one-to-many relationship.

This is because, for each order, there can be multiple products included (many order details), but each order detail can only belong to one order.

In database terms, this is represented by a foreign key on the "orderDetails" table that references the primary key of the "orders" table. This allows each row in the "orderDetails" table to be linked to a specific row in the "orders" table, creating the one-to-many relationship.

Still not sure. Here is a simple example
In MySQL, you can define and create a one-to-many relationship by:

Creating two tables: the "one" table and the "many" table.
Adding a foreign key column in the "many" table that references the primary key of the "one" table.
Using the FOREIGN KEY constraint to enforce the relationship between the two tables.

Here is an example of creating a one-to-many relationship between the "categories" table and the "products" table:

CREATE TABLE categories (
    categoryID INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50) NOT NULL
);

CREATE TABLE products (
    productID INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    price DECIMAL(10, 2) NOT NULL,
    categoryID INT NOT NULL,
    FOREIGN KEY (categoryID) REFERENCES categories(categoryID)
);

In the above example the category table is the one and the product table is the many, categoryID in product table is the foreign key that references the primary key categoryID in categories table.

This creates a one-to-many relationship, where each category can have multiple products, but each product can only belong to one category.

The primary key in the "orderDetails" table
A primary key is a column or a set of columns that uniquely identifies each row in a table. In this case, the combination of the "orderID" and "productID" columns together, is used to uniquely identify each row in the "orderDetails" table. This means that there cannot be two rows with the same values for both "orderID" and "productID" columns.

It is called a composite primary key, it is used when we have more than one column that needed to be unique in the table.
The primary key is used to enforce the integrity of the data in the table and to create relationships between tables.

Side Note: Enforcing the integrity of the data in a table
Enforcing the integrity of the data in a table means making sure that the data in the table is accurate, consistent and valid. This is done by setting rules and constraints on the table, such as the primary key, foreign key, unique and not null constraints, etc.

For example, in the table "orders" if we enforce the integrity of the data by setting the customerID as a foreign key that references the primary key customerID in the customers table, this will ensure that every customer ID in the order table must exist in the customer table, so this will prevent any invalid customer ID from being entered in the orders table.

Another example, in the table "orderDetails" if we enforce the integrity of the data by setting the composite primary key ( orderID, productID) this will ensure that every order and product combination is unique, so this will prevent any duplication of order and product in the orderDetails table.

By enforcing these constraints and rules, the database management system can prevent any accidental or intentional errors from occurring, such as duplicate data, missing data, or data that does not conform to the rules. Thus, it guarantees the integrity of the data in the table.

Data can be inserted into the "customers", "categories", "products", "orders", and "orderDetails" tables:

INSERT INTO customers (firstName, lastName, email, password) 
VALUES ('John', 'Doe', 'johndoe@email.com', 'password123');

INSERT INTO categories (name) 
VALUES ('Electronics');

INSERT INTO products (name, price, categoryID) 
VALUES ('Laptop', 999.99, 1);

INSERT INTO orders (customerID, orderDate) 
VALUES (1, '2022-01-01');

INSERT INTO orderDetails (orderID, productID, quantity) 
VALUES (1, 1, 2);

The first query inserts a new row into the "customers" table with the first name "John", last name "Doe", email "johndoe@email.com", and password "password123".

The second query inserts a new row into the "categories" table with the name "Electronics".

The third query inserts a new row into the "products" table with the name "Laptop", price "999.99", and category ID "1".

The fourth query inserts a new row into the "orders" table with the customer ID "1" and order date "2022-01-01".

The fifth query inserts a new row into the "orderDetails" table with the order ID "1", product ID "1", and quantity "2".

Keep in mind that the the values of foreign keys should match the existing values in the referenced table, otherwise it will cause an error.

Retrieve Data
So, when you want to retrieve the data from the "customers" table and the "orders" table together, you can use the join statement on the "customerID" column.

SELECT customers.firstName, customers.lastName, orders.orderDate
FROM customers
JOIN orders
ON customers.customerID = orders.customerID;

This query will return the first name, last name, and order date of customers, and it will join the customers table and orders table based on the customerID column.

You can also use other clauses such as WHERE, GROUP BY, HAVING, ORDER BY, LIMIT to retrieve the data in a specific way.

This relationship is important because it allows you to link specific orders to specific customers and retrieve the customer's information when you need it.

Okay, but what is the relationship between "products" table, "orders" table, and "orderDetails" table?

The relationship between the "products" table, "orders" table, and "orderDetails" table is a many-to-many relationship.

This is because, for each order, there can be multiple products included (many order details), and each product can be included in multiple orders.

To handle this relationship, we use a bridge table called "orderDetails" that has a composite primary key (orderID, productID) that references the primary keys of "orders" and "products" tables. Each row in the "orderDetails" table represents a specific product that is included in a specific order.

So, when you want to retrieve the data from the "products" table, "orders" table and "orderDetails" table together, you can use the join statement on the "orderDetails" table, as I mentioned before:

SELECT orderDetails.orderID, products.name, products.price, orderDetails.quantity 
FROM orderDetails
JOIN products
ON orderDetails.productID = products.productID;

Creating a many-to-many relationship in MySQL is done by using a bridge table (also known as a junction table or join table) that has a composite primary key that references the primary keys of the two tables that you want to connect.

Here is an example of how to create a many-to-many relationship between a "products" table and a "orders" table using a "orderDetails" table:

CREATE TABLE orderDetails (
  orderID INT NOT NULL,
  productID INT NOT NULL,
  quantity INT NOT NULL,
  PRIMARY KEY (orderID, productID),
  FOREIGN KEY (orderID) REFERENCES orders(orderID),
  FOREIGN KEY (productID) REFERENCES products(productID)
);

In this example, the "orderDetails" table has a composite primary key (orderID, productID) that references the primary keys of "orders" and "products" tables.
This composite primary key ensures that each combination of orderID and productID is unique in the table.

The foreign keys in the "orderDetails" table, orderID and productID are used to reference the primary keys of the "orders" and "products" tables, respectively. This creates the many-to-many relationship between the "products" and "orders" tables.

React: Infinite Scrolling with "react-infinite-scroll-component" npm package

Elham Najeebullah — Tue, 10 Jan 2023 11:40:15 +0000

import React, { useState, useEffect } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import axios from "axios";
import "./App.css";

const App = () => {
  const [data, setData] = useState([]);
  const [skip, setSkip] = useState(0);
  const [hasMore, setHasMore] = useState(true);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await axios.get(
      `https://dummyjson.com/comments?limit=10&skip=${skip}&select=body,postId`
    );
    if (response.data.comments.length > 0) {
      setData(data.concat(response.data.comments));
      setSkip(skip + 10);
    } else {
      setHasMore(false);
    }
  };

  return (
    <InfiniteScroll
      dataLength={data.length}
      next={fetchData}
      hasMore={hasMore}
      loader={<h4>Loading...</h4>}
    >
      {data.map((item) => {
        return (
          <div className="card" key={item.id}>
            <h4>Comment for postId: {item.postId}</h4>
            <p>{item.body}</p>
          </div>
        );
      })}
    </InfiniteScroll>
  );
};

export default App;

React: Create Infinite Scrolling With Intersection Observer API

Elham Najeebullah — Tue, 10 Jan 2023 07:37:29 +0000

A simple explanation of how the infinite scrolling component works:

The component makes an initial API request to fetch a set of posts when it first mounts. This is done using a useEffect hook with an empty dependencies array, which means the effect will only run once when the component mounts. The fetch function is used to make the API request, and the response is converted to JSON using the json method. The set of posts is stored in the component's state using the setPosts function, which is called with the data from the API response.
The component uses another useEffect hook to set up an intersection observer that listens for when the bottom of the page is reached. The intersection observer is created using the IntersectionObserver constructor, and it takes a callback function as an argument. This callback function is called with an array of intersection observer entries, which contain information about the element being observed (in this case, the bottom of the page). The intersection observer is set up to trigger the callback function when the element is intersecting with the viewport, which means it is visible on the screen.
When the bottom of the page is reached and the intersection observer's callback function is called, a new API request is made to fetch more posts. This is done using an async function called fetchMorePosts, which is called inside the intersection observer's callback function. The fetchMorePosts function uses the fetch function to make the API request, and the response is converted to JSON using the json method. The new posts are added to the existing set of posts using the setPosts function, which is called with a concatenated array of the previous posts and the new posts. The setLoading function is called with true to display the loading spinner, and the setShowLoading function is called with true to delay the display of the spinner using the setTimeout function.
When the new posts have been fetched and added to the existing set of posts, the component re-renders to display the additional posts. The setLoading function is called with false to hide the loading spinner, and the setShowLoading function is called with false to remove the delay on the display of the spinner.
This process is repeated indefinitely as the user scrolls to the bottom of the page. The intersection observer continues to listen for when the bottom of the page is reached, and the fetchMorePosts function is called to fetch more posts each time.

Here is the code example:

import React, { useEffect, useState, useRef } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [showLoading, setShowLoading] = useState(false);
  const bottom = useRef(null);
  const delay = 10000; // time in ms

  useEffect(() => {
    async function fetchPosts() {
      const res = await fetch("https://jsonplaceholder.typicode.com/posts");
      const data = await res.json();
      setPosts(data);
    }
    fetchPosts();
  }, []);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        async function fetchMorePosts() {
          setLoading(true);
          setTimeout(() => setShowLoading(true), delay);
          const res = await fetch("https://jsonplaceholder.typicode.com/posts");
          const data = await res.json();
          setPosts((prevPosts) => [...prevPosts, ...data]);
          setLoading(false);
          setShowLoading(false);
        }
        fetchMorePosts();
      }
    });
    observer.observe(bottom.current);
  }, []);

  return (
    <div className="infinite-scroll-container">
      <ul>
        {posts.map((post) => (
          <li key={post.id} className="post-card">
            <div className="post-card-header">
              <img className="avatar" src="path/to/avatar.jpg" alt="Avatar" />
              <div className="post-card-header-text">
                <h3 className="username">{post.username}</h3>
                <p className="post-date">{post.date}</p>
              </div>
            </div>
            <div className="post-card-body">
              <p className="post-text">{post.title}</p>
            </div>
            <div className="post-card-footer">
              <button className="like-button">Like</button>
              <button className="comment-button">Comment</button>
            </div>
          </li>
        ))}
      </ul>
      {loading && (
        <div
          className={showLoading ? "loading" : ""}
          style={{ opacity: showLoading ? 1 : 0 }}
        >
          Loading...
        </div>
      )}
      <div ref={bottom} />
    </div>
  );
}

export default App;

I hope this helps! Let me know if you have any questions or need further assistance.

Mongoose ODM Best Practices Part One.

Elham Najeebullah — Tue, 10 Jan 2023 03:44:35 +0000

1. A better way to connect to the database

To connect the latest version of Mongoose with an Express app and use the separation of concern design principle, you can do the following:

Create a separate module for your database connection and Mongoose models:

// models/index.js

const mongoose = require('mongoose');

async function connectToDatabase() {
  try {
    await mongoose.connect('mongodb://localhost/my-app', {
      useCreateIndex: true,
      useFindAndModify: false,
    });
    console.log('Successfully connected to database');
  } catch (error) {
    console.error(error);
  }
}

module.exports = {
  connectToDatabase,
};

Then in your Express app, require the models module and call the connectToDatabase function when the app starts:

const express = require('express');
const models = require('./models');

const app = express();

models.connectToDatabase();

// ... your app routes and middleware go here

app.listen(3000, () => {
  console.log('Express app listening on port 3000');
});

This code separates the database connection and Mongoose models into a separate models module, which can be imported and used in the main Express app. This follows the separation of concern design principle, as it allows you to keep your database logic and app logic separate and modular.

2. Use the power of Index

In a database, an index is a data structure that improves the speed of data access operations on a table. Indexes allow the database to quickly find and retrieve specific rows of data based on the values in one or more columns.

Here is an example of how you might use an index in Mongoose, a popular ODM (Object Document Mapper) for MongoDB:

const UserSchema = new mongoose.Schema({
  name: String,
  email: { type: String, index: true },
});

In this example, we are creating a new Mongoose schema for a User model with a name field and an email field. We are also adding an index to the email field by setting the index property to true. This will create an index on the email field in the underlying MongoDB collection, allowing the database to quickly find and retrieve documents based on the value of the email field.

There are several benefits to using indexes in Mongoose:

Improved performance: Indexes can significantly improve the performance of read operations, such as queries and sorts, by allowing the database to quickly locate the desired documents.
Unique constraints: Indexes can be used to enforce unique constraints on a field, ensuring that no two documents in a collection have the same value for that field.

 const UserSchema = new mongoose.Schema({
   name: String,
   email: { type: String, unique: true },
 });

This will create a unique index on the email field in the underlying MongoDB collection, ensuring that no two documents in the users collection have the same value for the email field.

If you try to insert a document with the same value for the email field as an existing document, Mongoose will return a validation error indicating that the value is not unique.

const user1 = await User.create({ name: 'John', email: 'john@example.com' });
// success

const user2 = await User.create({ name: 'Jane', email: 'john@example.com' });
// throws an error: "E11000 duplicate key

Text search: Indexes can be used to support text search operations, allowing you to search for documents that contain specific words or phrases. You can create a text index on the fields you want to search and use the $text operator in your queries.

const BlogPostSchema = new mongoose.Schema({
  title: String,
  content: String,
});

BlogPostSchema.index({ title: 'text', content: 'text' });

const BlogPost = mongoose.model('BlogPost', BlogPostSchema);

async function searchBlogPosts(searchTerm) {
  const results = await BlogPost.find({
    $text: { $search: searchTerm },
  });
  console.log(results);
}

searchBlogPosts('MongoDB');

This code defines a BlogPostSchema with a title field and a content field, and creates a text index on both fields. It then defines a BlogPost model using this schema.

The searchBlogPosts function demonstrates how to use the $text operator in a query to search for documents that contain the specified search term in either the title or content field. When the searchBlogPosts function is called with the search term "MongoDB", it will find all blog posts that contain the word "MongoDB" in either the title or content field.

Geospatial queries: Indexes can be used to support geospatial queries, allowing you to find documents based on their location relative to a given point or shape.

3. Create Relationship

To create a one-to-many relationship in Mongoose, you will need to use a ref property to reference the related documents.

Here is an example of how you might set up a one-to-many relationship between a User model and a Task model in Mongoose:

const TaskSchema = new mongoose.Schema({
  description: String,
  user: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
});

const UserSchema = new mongoose.Schema({
  name: String,
  email: String,
  tasks: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Task' }],
});

const User = mongoose.model('User', UserSchema);
const Task = mongoose.model('Task', TaskSchema);

In this example, we are defining a TaskSchema with a user field that references a User document, and a UserSchema with a tasks field that is an array of references to Task documents. This sets up a one-to-many relationship between users and tasks, where a user can have many tasks, but each task is associated with a single user.

To create a new task for a user, you can use the populate method to retrieve the related user documents:

const task = await Task.create({ description: 'Finish homework', user: userId });
const populatedTask = await Task.findById(task.id).populate('user');

console.log(populatedTask.user.name); // prints the name of the user associated with the task

Here is a more complete example of how you might set up a one-to-many relationship between a User model and a Task model in Mongoose:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/my-app', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const TaskSchema = new mongoose.Schema({
  description: String,
  user: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
});

const UserSchema = new mongoose.Schema({
  name: String,
  email: String,
  tasks: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Task' }],
});

const User = mongoose.model('User', UserSchema);
const Task = mongoose.model('Task', TaskSchema);

async function createUserAndTask() {
  const user = await User.create({ name: 'John', email: 'john@example.com' });
  const task = await Task.create({ description: 'Finish homework', user: user._id });
  console.log(task);
}

createUserAndTask();

async function getUserAndTasks() {
  const user = await User.findOne({ name: 'John' }).populate('tasks');
  console.log(user);
}

getUserAndTasks();

This code defines a TaskSchema with a user field that references a User document, and a UserSchema with a tasks field that is an array of references to Task documents. It also defines User and Task models using these schemas, and creates a new user and task in the createUserAndTask function.

The getUserAndTasks function demonstrates how to use the populate method to retrieve the related task documents for a user. When the getUserAndTasks function is called, it will find the user with the name "John" and populate the tasks field with the associated task documents, resulting in a single query to the database.

To create multiple tasks for a single user in Mongoose, you can simply push the new task documents to the tasks array of the user document. Here is an example of how you might do this:

async function createTasksForUser(userId) {
  const user = await User.findById(userId);
  const task1 = await Task.create({ description: 'Finish homework', user: user._id });
  const task2 = await Task.create({ description: 'Buy groceries', user: user._id });
  user.tasks.push(task1, task2);
  await user.save();
}

createTasksForUser(userId);

This code finds the user with the specified userId, creates two new tasks, and then pushes the tasks to the tasks array of the user document. It then saves the updated user document back to the database.

To retrieve all the tasks associated with a user, you can use the populate method as shown in the previous example:

async function getTasksForUser(userId) {
  const user = await User.findById(userId).populate('tasks');
  console.log(user.tasks);
}

getTasksForUser(userId);

More to come in Part 2 :)

React & TypeScript: Create a reusable List component using generic

Elham Najeebullah — Mon, 09 Jan 2023 12:26:56 +0000

In this example, the List component is a function component that accepts props of type ListProps. The ListProps interface includes an items array of type T and a renderItem function that takes an item of type T and returns a JSX element.

//Generic List Example
import React from "react";

interface ListProps<T> {
  items: T[];
  //Render the list items
  renderItem: (item: T) => React.ReactNode; //Or JSX.Element
}

const List = <T extends {}>({ items, renderItem }: ListProps<T>) => {
  return (
    <ul>
      {items.map((item, i) => (
        <li key={i}>{renderItem(item)}</li>
      ))}
    </ul>
  );
};

export default List;

In the List component's type definition, the <T extends {}>
syntax is used to specify a type parameter called T. Type parameters are used to create generic types in TypeScript, which allow you to define a type that can work with a variety of different types.

The extends {} part of the type parameter definition specifies that the T type parameter must be a subtype of the empty object type {}. This means that it can be any type except for null or undefined.

Using a type parameter in this way allows you to create a generic component that can accept a variety of different types for the items and renderItem props. This can make the component more reusable and flexible, as it can be used with different types of data.

interface Customer {
  id: string;
  name: string;
  email: string;
}

const customers: Customer[] = [
  { id: "1", name: "John Smith", email: "john@example.com" },
  { id: "2", name: "Jane Doe", email: "jane@example.com" },
  { id: "3", name: "Bob Johnson", email: "bob@example.com" },
];

const renderCustomer = (customer: Customer) => {
  return (
    <div>
      <h3>{customer.name}</h3>
      <p>{customer.email}</p>
    </div>
  );
};

interface Order {
  id: string;
  customer: string;
  items: string[];
  total: number;
}

const orders: Order[] = [
  {
    id: "1",
    customer: "John Smith",
    items: ["Item 1", "Item 2"],
    total: 29.99,
  },
  { id: "2", customer: "Jane Doe", items: ["Item 3", "Item 4"], total: 39.99 },
  {
    id: "3",
    customer: "Bob Johnson",
    items: ["Item 5", "Item 6"],
    total: 49.99,
  },
];

const renderOrder = (order: Order) => {
  return (
    <div>
      <h3>{order.customer}</h3>
      <ul>
        {order.items.map((item) => (
          <li key={Math.random() * 100}>{item}</li>
        ))}
      </ul>
      <p>Total: ${order.total}</p>
    </div>
  );
};

function App(): JSX.Element {
  return (
    <div>
      <List items={customers} renderItem={renderCustomer} />
      <List items={orders} renderItem={renderOrder} />
    </div>
  );
}

**
Why use generic list component function in react?**

Using a generic component function in React can be useful when you want to create a component that can be used with a variety of different types of data. By using a type parameter, you can create a component that is flexible and reusable, as it can be used with different types of data without having to create separate components for each type.

I hope this helps! Let me know if you have any questions or need further assistance.

React & TypeScript: What is React.FC and Why should i use it?

Elham Najeebullah — Mon, 09 Jan 2023 06:04:37 +0000

React.FC is a type that stands for "Function Component" in React. It is a generic type that allows you to specify the props that a function component will accept.

Using React.FC can be helpful for a number of reasons:

It provides type safety for the props that a component expects to receive. This can help catch bugs early on and make your code easier to understand.
It makes it easier to refactor your component's props. For example, if you want to rename a prop, the TypeScript compiler will catch any places where that prop is used and help you update them.
It makes it easier to see the expected shape of a component's props just by looking at its type definition.

Here's an example of how you might use React.FC:

import React from 'react';

interface Props {
  name: string;
  age: number;
  onClick: () => void;
}

const MyComponent: React.FC<Props> = ({ name, age, onClick }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <button onClick={onClick}>Click me</button>
    </div>
  );
};

In this example, MyComponent is a function component that accepts props of type Props, which includes a name string, an age number, and an onClick function. The component is defined using the React.FC type, which allows TypeScript to check that the component is being used correctly and provides type information for the component's props.

You can also use React.FC when you want to specify a defaultProps object for your function component. For example:

import React from 'react';

interface Props {
  name: string;
  age: number;
  onClick: () => void;
}

const MyComponent: React.FC<Props> = ({ name, age, onClick }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <button onClick={onClick}>Click me</button>
    </div>
  );
};

MyComponent.defaultProps = {
  name: 'John',
  age: 25,
  onClick: () => {},
};

In this example, the MyComponent function component has a defaultProps object that specifies default values for the name, age, and onClick props. These default values will be used if the component is rendered without the corresponding props being passed in.

What is defaultProps?
In a React function component, the defaultProps object is a way to specify default values for props that may be omitted when the component is used. This can be useful if you want to provide a fallback value for a prop in case it is not supplied by the component's parent.

Using the defaultProps object can be helpful for a number of reasons:

It allows you to specify a fallback value for a prop in case it is not provided. This can help prevent undefined values from being passed to your component, which can cause errors.
It can make it easier to understand the expected shape of a component's props just by looking at the defaultProps object.
It can make it easier to test your component by allowing you to focus on testing the behavior of the component with a specific set of props, rather than having to supply all possible props every time.

Conclusion:
You should use React.FC when you want to define a function component in your React application and you want to specify the type of props that the component expects to receive.

I hope this helps! Let me know if you have any questions.

Serverless and AWS Lambda with TypeScript example for beginners

Elham Najeebullah — Mon, 09 Jan 2023 03:20:58 +0000

A serverless function is a type of cloud computing service that allows you to run code without having to manage any infrastructure. Instead of deploying your code to a server or a cluster of servers, you can simply write and deploy your code as a function, and the cloud provider will automatically execute your code and scale it as needed.

AWS Lambda is a serverless compute service offered by Amazon Web Services (AWS). It allows you to run code in response to a variety of events, such as an HTTP request, a change to a database, or a message being published to a messaging queue.

To use AWS Lambda, you simply write and deploy your code as a function, and then specify the triggers that will invoke your function. For example, you might create a Lambda function that sends an email whenever a new user signs up for your application. When a new user signs up, the cloud provider will automatically execute your Lambda function and send the email.

Here is an example of how you could create an AWS Lambda function with TypeScript that sends a welcoming message to a new user when they sign up with your application:

First, you will need to install the AWS SDK for JavaScript and the @types/aws-lambda type definitions:

npm install aws-sdk @types/aws-lambda

Next, you can create a new file for your Lambda function, sendWelcomeMessage.ts, and import the necessary dependencies:

import { Context, Callback } from 'aws-lambda';
import { SES } from 'aws-sdk';

// Replace with your AWS region
const REGION = 'us-east-1';

// Replace with your sending email address
const SENDER = 'sender@example.com';

// Replace with the recipient email address
const RECIPIENT = 'recipient@example.com';

// The subject and body of the welcome email
const SUBJECT = 'Welcome to our application';
const BODY = `
  <h1>Welcome to our application!</h1>
  <p>Thank you for signing up. We hope you have a great experience using our service.</p>
`;

Then, you can define your Lambda function and use the AWS SDK to send the welcome email:

export function handler(event: any, context: Context, callback: Callback) {
  const ses = new SES({ region: REGION });

  const params = {
    Destination: {
      ToAddresses: [RECIPIENT],
    },
    Message: {
      Body: {
        Html: {
          Charset: 'UTF-8',
          Data: BODY,
        },
      },
      Subject: {
        Charset: 'UTF-8',
        Data: SUBJECT,
      },
    },
    Source: SENDER,
  };

  ses.sendEmail(params, (err, data) => {
    if (err) {
      callback(err);
    } else {
      console.log(`Email sent to ${RECIPIENT} with message Id: ${data.MessageId}`);
      callback(null, data);
    }
  });
}

Finally, you can configure your Lambda function to be triggered by an event, such as a new user sign-up event, and deploy your code to AWS.

What is event argument and context argument inside AWS lambda function?

In an AWS Lambda function, the event argument represents the payload of the event that triggered the function. This can be a wide variety of things, depending on the trigger that you have configured for your function.

For example, if your function is triggered by an HTTP request, the event argument might contain information such as the HTTP method, the path, the headers, and the body of the request. If your function is triggered by a change to a database, the event argument might contain information about the type of change and the data that was changed.

The context argument represents the context in which the function is being executed. It contains information such as the function name, the function version, the AWS request ID, and the identity of the caller.

Here is an example of how you might use the event and context arguments in an AWS Lambda function:

import { SNS } from 'aws-sdk';

export function handler(event: any, context: Context) {
  console.log(`Function name: ${context.functionName}`);
  console.log(`AWS request ID: ${context.awsRequestId}`);

  if (event.Records) {
    event.Records.forEach((record: any) => {
      const sns = record.Sns;
      console.log(`SNS message: ${sns.Message}`);
    });
  }
}

In this example, the function logs the name of the function and the AWS request ID from the context argument, and logs the message of each SNS record from the event argument.

Is AWS cost-effective?
AWS Lambda automatically scales your functions, so you don't have to worry about capacity planning or infrastructure management. You only pay for the compute time that you consume, and you can set concurrency limits to ensure that your functions are executed in a way that meets your performance and cost requirements.

Overall, serverless functions like AWS Lambda can be a convenient and cost-effective way to execute code in the cloud, as you only pay for what you use and don't have to manage any infrastructure.

I hope this helps! Let me know if you have any questions or need further assistance.