DEV Community: Ujjawal Kumar

Intro to Relational DBMS

Ujjawal Kumar — Sun, 08 Oct 2023 18:43:16 +0000

A Relational Database Management System (RDBMS) is a type of database management system that organizes data into structured tables with rows and columns and enforces the principles of the relational model. The relational model, developed by Edgar F. Codd in 1970, is a mathematical and conceptual framework for organizing and managing data. Relational model Wikipedia

Here are some key concepts associated with RDBMS:

Tables: In an RDBMS, data is organized into tables. Each table consists of rows and columns. Rows represent individual records or data entries, while columns represent attributes or fields of those records. Each table has a unique name that identifies it within the database.
Rows and Records: Rows in a table are also referred to as records or tuples. Each row represents a single data entity, such as a customer, product, or employee, and contains values for each of the table's columns that describe the characteristics of that entity.
Columns and Fields: Columns in a table represent the attributes or characteristics of the data entities. Each column has a name and a data type that specifies the kind of data it can hold, such as text, numbers, dates, or binary data.
Keys: Keys are used to uniquely identify rows within a table. The primary key is a column or set of columns that ensures each row has a unique identifier. Foreign keys are used to establish relationships between tables, allowing data to be linked and maintained across multiple tables.
Relationships: RDBMS allows you to define relationships between tables. These relationships are typically based on keys, where one table's key is linked to another table's key. Common types of relationships include one-to-one, one-to-many, and many-to-many relationships.
Data Integrity: RDBMS enforces data integrity rules to ensure the accuracy and consistency of data. Common integrity constraints include unique constraints, check constraints, and referential integrity constraints.
SQL (Structured Query Language): SQL is the standard language used to interact with RDBMSs. It provides a set of commands for creating, querying, updating, and deleting data from the database. SQL allows users to perform operations like SELECT (to retrieve data), INSERT (to add data), UPDATE (to modify data), and DELETE (to remove data).
Transactions: RDBMSs supports transactions, which are sequences of database operations that are treated as a single unit of work. Transactions ensure that either all operations within the unit are completed successfully, or none are, maintaining the integrity of the data.
Normalization: Normalization is a process used to design databases efficiently by minimizing data redundancy and ensuring data integrity. It involves decomposing tables into smaller, related tables to eliminate data anomalies.
Indexing: Indexes are data structures that improve the performance of database queries by providing fast access to specific rows in a table. Indexes are created on one or more columns and allow the database system to quickly locate the data you are searching for.

RDBMSs are widely used in various applications, including business, finance, healthcare, e-commerce, and more, due to their ability to efficiently store, retrieve, and manage structured data while ensuring data consistency and integrity. Some well-known RDBMSs include MySQL, PostgreSQL, Oracle Database, Microsoft SQL Server, and SQLite.

Properties:

Relational Database Management Systems (RDBMSs) are known for their key properties and characteristics that make them suitable for managing structured data in various applications. Here are some of the core properties of RDBMSs

Data Structuring: RDBMSs organize data into structured tables, where data is stored in rows and columns. This tabular format makes it easy to represent and manage structured data with clear relationships.
Data Integrity: RDBMSs enforce data integrity through various constraints, such as primary keys, unique keys, foreign keys, and check constraints. These constraints ensure that data is accurate, consistent, and follows predefined rules.
Relationships: RDBMSs support the establishment of relationships between tables using keys. This allows for the modeling of complex data structures, including one-to-one, one-to-many, and many-to-many relationships, which are crucial for data organization and retrieval.
ACID Properties: RDBMSs provide support for transactions, which adhere to the ACID properties (Atomicity, Consistency, Isolation, Durability). These properties ensure that database transactions are reliable, maintain data integrity, and can recover from failures.

Atomicity: Transactions are treated as a single unit of work, either fully completed or fully rolled back in case of failure.
Consistency: Transactions bring the database from one consistent state to another, preserving data integrity.
Isolation: Transactions are isolated from each other to prevent interference and maintain data consistency.
Durability: Once a transaction is committed, its changes are permanent and will survive system failures.

Query Language: RDBMSs uses SQL (Structured Query Language) as a standard language for querying and manipulating data. SQL provides a powerful and standardized way to interact with the database, enabling users to perform operations like SELECT, INSERT, UPDATE, and DELETE.
Indexing: RDBMSs support the creation of indexes on columns, which significantly improve query performance by allowing for faster data retrieval. Indexes enable the database engine to quickly locate specific rows based on the indexed column values.
Data Normalization: RDBMSs encourage the practice of data normalization, which involves designing databases to minimize data redundancy and dependency. Normalization helps prevent data anomalies and improves data consistency.
** Multi-User Support:** RDBMSs are designed to support concurrent access by multiple users or applications. They incorporate mechanisms for managing locks and ensuring data consistency in a multi-user environment.
Security: RDBMSs offers various security features, including user authentication, access control, and encryption. Database administrators can define user roles and permissions to restrict access to sensitive data.
Scalability: RDBMSs can scale vertically by adding more resources to a single server or horizontally by distributing data across multiple servers in a cluster. This scalability helps handle growing data and user loads.
Backup and Recovery: RDBMSs provide tools and mechanisms for creating backups of the database and recovering data in case of system failures, ensuring data durability and availability.
Data Independence: RDBMSs provide a level of data independence, separating the logical schema (how data is viewed) from the physical schema (how data is stored). This allows for flexibility in adapting the database design to changing requirements without affecting the application code.

Node.js path module

Ujjawal Kumar — Mon, 11 Sep 2023 14:27:16 +0000

The path module in Node.js is a built-in module that provides utilities for working with file and directory paths. It helps in constructing, manipulating, and working with file and directory paths in a cross-platform manner, making it easier to write platform-independent code.

Here are some common functions provided by the path module:
1. path.join([...paths]):
Joins one or more path segments into a single path, using the appropriate platform-specific separator (e.g., "\" on Windows and "/" on Unix-like systems).

2. path.resolve([...paths]):
Resolves an absolute path from relative paths. It returns an absolute path by combining the current working directory with the provided paths.

    const path = require('path');
    const absolutePath = path.resolve('folder', 'file.txt');

3. path.basename(path, [ext]):
Returns the last portion of a path (i.e., the filename). You can also specify an extension to remove.

    const path = require('path');
    const filename = path.basename('/path/to/file.txt'); // Returns 'file.txt'

4. path.dirname(path):
Returns the directory name of a path.

    const path = require('path');
    const dirname = path.dirname('/path/to/file.txt'); // Returns '/path/to'

5. path.extname(path):

Returns the file extension of a path, including the dot.

    const path = require('path');
    const extension = path.extname('/path/to/file.txt'); // Returns '.txt'

6. path.normalize(path):
Normalizes a path by resolving '..' and '.' segments and removing redundant slashes.

    const path = require('path');
    const normalizedPath = path.normalize('/path/to/../file.txt'); // Returns '/path/file.txt'

7. path.isAbsolute(path):

Check if a path is an absolute path.

    const path = require('path');
    const isAbsolute = path.isAbsolute('/path/to/file.txt'); // Returns true

These are just a few of the functions provided by the path module. The module is particularly useful when dealing with file I/O, working with file paths in a cross-platform way, and ensuring that your code behaves consistently across different operating systems.

What Is Templating and how to use it in JavaScript?

Ujjawal Kumar — Mon, 04 Sep 2023 16:36:05 +0000

In the context of programming and web development, templatingrefers to the process of creating a reusable format or layout for presenting data in a consistent manner.

Templates typically include placeholders or variables that can be dynamically filled with data, allowing the same template to be used for multiple instances of similar content. For example, in web development, templates are often used to define the structure and layout of web pages, with placeholders for content that will vary depending on the page being displayed.

Templates can be used in a variety of programming languages and frameworks, and they are particularly useful for creating dynamic web pages or generating reports with consistent formatting. They help developers save time and ensure consistency by separating the presentation layer from the business logic and data processing.

Why to use Templates ?

Templating serves several important purposes, and here are some of the key reasons why we use templating in JavaScript:

1. Dynamic Content Generation: Templating allows you to create dynamic web pages or user interfaces by inserting data into predefined templates. This is especially important for web applications where data changes frequently, such as social media feeds, e-commerce product listings, or news articles.

2. Separation of Concerns: Templating promotes a separation of concerns between the data and the presentation. By keeping the HTML markup and JavaScript code separate, it's easier to manage and maintain code. Developers can focus on the structure and logic of the template, while data can be manipulated independently.

3. Code Reusability: Templates can be reused across different parts of a web application or even in different applications. This reduces code duplication and helps maintain consistency in the user interface.

4. Improved Performance: Templating engines often include optimizations to render content efficiently, which can lead to better performance compared to manually manipulating the DOM. Templating engines can update only the parts of the page that change, minimizing unnecessary DOM manipulation.

5. Security: Templating can help mitigate security risks such as cross-site scripting (XSS) attacks by automatically escaping or sanitizing user-generated content before rendering it in the template.

6. Readability and Maintainability: Templating code tends to be more readable and maintainable compared to generating HTML strings using concatenation. Templates provide a clear structure for representing the intended output.

7. Accessibility: Templating can be used to ensure that generated HTML includes proper accessibility attributes and semantic elements, making web applications more accessible to users with disabilities.

There are various JavaScript templating libraries and frameworks available, such as Handlebars, Mustache, Pug, EJS, and more, each with its own syntax and features.

Example:

Here's an example of how to use the Handlebars.js templating library to create and render a simple template:

First, include the Handlebars.js library in your project:



<script    
src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handleb ars.min.js">
</script>

Create a template using Handlebars syntax:



<script id="my-template" type="text/x-handlebars-template">
  <h1>{{title}}</h1>
  <p>{{description}}</p>
</script>

Compile the template using Handlebars:



const template = Handlebars.compile(document.querySelector('#my-template').innerHTML);

Define some data to populate the template:



const data = {
  title: 'My Template',
  description: 'This is a Handlebars template example.'
};

Render the template with the data:



const renderedTemplate = template(data);
document.querySelector('#output').innerHTML = renderedTemplate;

In this example, we created a simple Handlebars template that includes two placeholders for data: {{title}} and {{description}}. We then compiled the template using Handlebars.compile, defined some data to populate the template, and finally rendered the template with the data using the compiled template function.

The rendered template is then inserted into an element with the ID "output" in the HTML document.

Here's the demo code:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
  </head>
  <body>
    <div id="output"></div>
    <script id="my-template" type="text/x-handlebars-template">
      <h1>{{title}}</h1>
      <p>{{description}}</p>
    </script>

    <script>
      const data = {
        title: "Endeavour Monk",
        description: "Please like ❤️ this article and follow for more contents",
      };
      const template = Handlebars.compile(
        document.querySelector("#my-template").innerHTML
      );
      const renderedTemplate = template(data);
      document.querySelector("#output").innerHTML = renderedTemplate;
    </script>
  </body>
</html>

Thanks for reading.

Node.js Event Loop

Ujjawal Kumar — Mon, 28 Aug 2023 07:33:21 +0000

The Node.js event loop is a crucial concept in understanding how Node.js manages asynchronous operations and handles concurrency. Node.js is designed to be non-blocking and asynchronous, which allows it to efficiently handle a large number of I/O-bound operations without getting blocked by any single operation.

Here's how the Node.js event loop works:

Event Loop: The event loop is a central component of Node.js that manages all the asynchronous operations. It constantly checks for new events in the event queue and processes them in a loop.
Event Queue: The event queue holds various types of events, such as callbacks, timers, and I/O events, that are generated as a result of asynchronous operations. These events are added to the queue when they are triggered but are not executed immediately.
Callbacks: Callbacks are functions that are provided as arguments to asynchronous functions. They are executed once the corresponding asynchronous operation is completed and the event loop reaches the event in the queue. This mechanism allows Node.js to perform tasks without waiting for the completion of one task before moving on to the next.
Timers: Node.js provides two types of timers: setTimeout() and setInterval(). These timers schedule callbacks to be executed after a specified amount of time or at regular intervals.
I/O Operations: When Node.js performs I/O operations (e.g., reading from or writing to files, making network requests), it does not block the execution of the rest of the program. Instead, it delegates the I/O operation to the operating system and registers a callback to be executed when the operation is complete.
Microtask Queue: In addition to the event queue, Node.js also maintains a microtask queue. Microtasks are tasks that have higher priority than regular callbacks and are executed before the next iteration of the event loop. Promises and certain APIs (e.g., process.nextTick()) add tasks to the microtask queue.

Here's a simplified step-by-step breakdown of how the event loop works:

Check the event queue for pending events.
If there are pending events, dequeue an event and execute its associated callback.
Execute any microtasks that are in the microtask queue.
Perform any ready I/O operations.
Check if any scheduled timers have expired. If yes, execute their callbacks.
Repeat the process from step 1.

The event loop allows Node.js to handle multiple tasks concurrently without creating a separate thread for each task. This concurrency model is efficient for I/O-bound operations, but it's important to note that CPU-bound operations can still block the event loop and should be offloaded to worker threads or other processes to maintain the responsiveness of the application.

Key Points:

The event loop is a single-threaded loop, which means that only one task can be executed at a time. However, the event loop can handle multiple tasks concurrently by running them in a non-blocking manner.
The event queue is a FIFO (first-in, first-out) queue, which means that events are processed in the order in which they are added to the queue.
Microtasks are executed before regular callbacks, which means that they have higher priority. This is because microtasks are typically used to perform tasks that are related to the event loop itself, such as scheduling timers and handling I/O events.
The event loop can be blocked by CPU-bound operations, which are operations that require a lot of processing power. To avoid blocking the event loop, CPU-bound operations should be offloaded to worker threads or other processes.

Hope you enjoyed this, Please like this article. Follow for more.

Event Capturing and Event Bubbling in JavaScript: Exploring DOM Event Handling Mechanisms

Ujjawal Kumar — Tue, 22 Aug 2023 18:41:32 +0000

Event capturing and event bubbling are two different mechanisms through which events are handled in JavaScript. These mechanisms determine the order in which event handlers are executed when an event occurs on an element that is nested within other elements.

Event Capturing (also known as the "capture phase"):

In the capture phase, the event is first captured by the outermost element and then propagated inward to the target element.
During this phase, the event travels from the top of the DOM hierarchy down to the target element.
The capturing phase is not commonly used in practice and is optional in event handling.

Event Bubbling (also known as the "bubble phase"):

In the bubbling phase, the event is first handled by the target element's event handler and then propagated upward through the DOM hierarchy.
During this phase, the event travels from the target element up to the topmost ancestor.
This is the default behavior for most DOM events.

To illustrate the concept, consider the following HTML structure:



<div id="outer">
  <div id="inner">Click me!</div>
</div>

If you attach event handlers to both the outer and inner elements for a click event, and then click on the inner element, the order of execution will be as follows:

Event Capturing Phase: Event handlers attached to the outer element are executed (if any), starting from the topmost ancestor and moving inward toward the target element.
Event Target Phase: The event handler attached to the inner element is executed.
Event Bubbling Phase:

The event handler attached to the inner element is executed (again).
Event handlers attached to the outer element are executed (if any), starting from the target element and moving upward toward the topmost ancestor.

By default, events in JavaScript follow the event bubbling mechanism. However, you can explicitly enable event capturing by setting the capture option to true when adding an event listener using the addEventListener() method. For example:

element.addEventListener('click', handler, true);

In the above code, the event handler will be executed during the event capturing phase.

Both event capturing and event bubbling are useful in different scenarios, depending on the desired behavior and event handling requirements.

If you found this helpful please give a like, follow for more posts.
Thanks for your time.

Promise Pool JavaScript LeetCode 2636

Ujjawal Kumar — Tue, 15 Aug 2023 15:42:43 +0000

Given an array of asynchronous functions functions and a pool limit n, return an asynchronous function promisePool. It should return a promise that resolves when all the input functions resolve.

The Pool limit is defined as the maximum number of promises that can be pending at once. promisePool should begin execution of as many functions as possible and continue executing new functions when old promises resolve. promisePool should execute functions[i] then functions[i + 1] then functions[i+2], etc. When the last promise resolves, promisePool should also resolve.

For example, if n = 1, promisePool will execute one function at a time in a series. However, if n = 2, it first executes two functions. When either of the two functions resolves, a 3rd function should be executed (if available), and so on until there are no functions left to execute.
You can assume all functions never reject. It is acceptable for promisePool to return a promise that resolves any value.

Example 1:

Input:

functions = [
    () => new Promise(res => setTimeout(res, 300)),
    () => new Promise(res => setTimeout(res, 400)), 
    () => new Promise(res => setTimeout(res, 200))
]
n = 2

Output: [[300, 400, 500],500]

Explanation:

Three functions are passed in. They sleep for 300ms, 400ms, and 200ms respectively.
They resolve at 300ms, 400ms, and 500ms respectively. The returned promise resolves at 500ms.
At t=0, the first 2 functions are executed. The pool size limit of 2 is reached.
At t=300, the 1st function resolves, and the 3rd function is executed. The pool size is 2.
At t=400, the 2nd function resolves. There is nothing left to execute. The pool size is 1.
At t=500, the 3rd function resolves. The pool size is 0 so the returned promise also resolves.

Example 2:

Input:

functions = [
    () => new Promise(res => setTimeout(res, 300)),
    () => new Promise(res => setTimeout(res, 400)),
    () => new Promise(res => setTimeout(res, 200))
] 
n = 5

Output: [[300, 400, 200], 400]

Explanation:

The three input promises resolve at 300ms, 400ms, and 200ms respectively.
The returned promise resolves at 400ms.
At t=0, all 3 functions are executed. The pool limit of 5 is never met.
At t=200, the 3rd function resolves. The pool size is 2.
At t=300, the 1st function resolved. The pool size is 1.
At t=400, the 2nd function resolves. The pool size is 0, so the returned promise also resolves.

Example 3:

Input:

functions = [
    () => new Promise(res => setTimeout(res, 300)),
    () => new Promise(res => setTimeout(res, 400)),
    () => new Promise(res => setTimeout(res, 200))
] 
n = 1

Output: [[300,700,9001,900]

Explanation:

The three input promises resolve at 300ms, 700ms, and 900ms respectively. The returned promise resolves at 900ms.
At t=0, the 1st function is executed. The pool size is 1.
At t=300, the 1st function resolves and the 2nd function is executed. The pool size is 1.
At t=700, the 2nd function resolves and the 3rd function is executed. The pool size is 1.
At t=900, the 3rd function resolves. The pool size is 0 so the returned promise resolves.

Constraints:

0 <= function.length <= 10
0 <= n <= 10

Intuition:

The problem revolves around executing a given set of asynchronous functions in a controlled manner with a specified pool limit. The goal is to execute as many functions concurrently as the pool limit allows while ensuring that the overall execution sequence follows the order of the input functions.

Approach:

The promisePool function is defined with two parameters: an array of asynchronous functions functions and an integer n representing the pool limit.
The function returns a Promise. It's an asynchronous function that takes advantage of the async/await syntax and uses Promise for its asynchronous operations.
Inside the returned Promise, a helper function is defined. This function is responsible for managing the execution of functions and the pool size.
The base case of the recursion is checked: If the index is greater than or equal to the length of functions and there are no promises in progress (inProgress === 0), it means all functions have been executed. In this case, the main promise is resolved to signal the completion.
Inside the helper function, a while loop is used to execute functions in parallel up to the pool limit n. It checks if there's room in the pool (inProgress < n) and if there are more functions to execute (index < functions.length).
When the loop condition is met, the inProgress counter is incremented, and the current function at the index is executed using .then(). When the promise of the function resolves, the inProgress counter is decremented, and the helper function is called recursively. This ensures that as soon as one function completes, another function is started.
Outside the helper function, the execution is initiated by calling the helper function for the first time.

Code:

/**
 * @param {Function[]} functions
 * @param {number} n
 * @return {Function}
 */
// TC: O(functions.length)
var promisePool = async function (functions, n) {
  return new Promise((resolve) => {
    let inProgress = 0, index = 0;
    function helper() {
      // base case
      if (index >= functions.length) {
        if (inProgress === 0) resolve();
        return;
      }

      while (inProgress < n && index < functions.length) {
        inProgress++;
        functions[index++]().then(() => {
          inProgress--;
          helper();
        });
      }
    }
    helper();
  });
};

/**
 * const sleep = (t) => new Promise(res => setTimeout(res, t));
 * promisePool([() => sleep(500), () => sleep(400)], 1)
 *   .then(console.log) // After 900ms
 */

Time Complexity:

The time complexity of this code is O(functions.length), where "functions.length" represents the number of functions in the input array. This is because each function is executed once within the while loop, and the while loop iterates through all the functions in the array.

Space Complexity:

The space complexity of this code is O(1), which is constant space complexity. This is because the memory usage of the code does not grow with the input size or any recursion depth.

Checkout the video Solution:

Hope you find helpful, if yes then give it a like.

Pagination in React with implementation

Ujjawal Kumar — Sat, 12 Aug 2023 19:47:15 +0000

Pagination is a technique used in web development to divide a large set of content or data into smaller, more manageable sections or pages. This allows users to navigate through the content in a structured and organized manner, preventing overwhelming them with a single, long list of items.

In a web context, pagination is commonly used for displaying lists of items such as articles, products, search results, or comments. Instead of loading and displaying all items at once, pagination breaks them down into smaller chunks, or "pages," which are presented one at a time. Users can then navigate through these pages using navigation controls like "Previous" and "Next" buttons or numbered page links.

Key components of pagination include:

Page Size: The number of items displayed on a single page. This can be a fixed number or a user-configurable option.
Total Items: The total number of items available in the dataset. This is used to calculate the total number of pages.
Current Page: The page is currently being displayed to the user.
Navigation Controls: Buttons or links that allow users to move between pages, such as "Previous" and "Next" buttons, as well as numbered page links.
Ellipsis: An ellipsis (...) is often used to indicate that there are more pages in between when there are too many pages to display all at once. For example, "1 2 ... 10 11 12 ... 20."
Data Fetching: When users navigate to a new page, the data corresponding to that page is fetched from the server (or from local data) and displayed.

Pagination helps improve the user experience by making content more accessible and easier to navigate. It reduces loading times and the cognitive load on users, making it especially useful when dealing with large sets of data.

Implementation in React:



import "./styles.css";

import { useState, useEffect } from "react";

export default function App() {
  const [products, setProducts] = useState([]);
  const [page, setPage] = useState(1);

  const fetchProducts = async () => {
    const res = await fetch("https://dummyjson.com/products?limit=100");
    const data = await res.json();
    if (data.products && data.products.length) setProducts(data.products);
  };

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

// event handler for page change on click
  const handlePageChange = (pageNumber) => {
    if (
      pageNumber > 0 &&
      pageNumber <= products.length / 10 &&
      pageNumber !== page
    )
      setPage(pageNumber);    
  };

  return (
    <div className="App">
      <h1>All Products</h1>
      {products.length && (
        <ol className="All__products">
          {products.slice(page * 10 - 10, page * 10).map((product) => (
            <li key={product.id} className="product">
              <img src={product.thumbnail} alt={product.title} />
              <h4>{product.title}</h4>
            </li>
          ))}
        </ol>
      )}

      {products.length > 0 && (
        <section className="pagination">
          <span
            onClick={() => handlePageChange(page - 1)}
            className={`arrow ${page === 1 ? "pagination__disabled" : ""}`}
          >
            ⬅
          </span>
          {[...Array(Math.floor(products.length / 10))].map((_, i) => (
            <span
              className={`page__number ${
                page === i + 1 ? "selected__page__number" : ""
              }`}
              key={i + 1}
              onClick={() => handlePageChange(i + 1)}
            >
              {i + 1}
            </span>
          ))}
          <span
            onClick={() => handlePageChange(page + 1)}
            className={`arrow ${
              page === Math.floor(products.length / 10)
                ? "pagination__disabled"
                : ""
            }`}
          >
            ➡
          </span>
        </section>
      )}
    </div>
  );
}

Codesandbox

Output

Working

Let's break down the provided code step by step to understand its functionality:

1. Import Statements: The code starts by importing the necessary modules and styles. The useState and useEffect hooks from the react package are used for managing state and performing side effects.

2. State Initialization: Two pieces of state are initialized using the useState hook:

products: An array that will store the fetched products.
page: A number that represents the current page of products to display.

3. Fetching Products: The fetchProducts function is defined using the async/await pattern to fetch data from an API endpoint (dummyjson.com/products?limit=100). The fetched products are set in the products state using the setProducts function.

4. Use Effect Hook: The useEffect hook is used to fetch products when the component mounts. The empty dependency array ([]) ensures that the effect runs only once when the component is mounted. Inside this we are fetching the products once.

5. Handle Page Change: The handlePageChange function takes a pageNumber argument and updates the page state only if the provided page number is within valid limits (greater than 0, less than or equal to the calculated total pages, and not equal to the current page).

6. Rendering Products: Inside the JSX, the component first renders a heading "All Products". It then conditionally renders a list of products inside an ordered list with the class All__products. The products are displayed using the slice method based on the current page and items per page to display the products in chunk.

7. Pagination Controls: If there are products available, a pagination section is rendered. It consists of:

A "Previous" arrow (<-) that is clickable if the current page is greater than 1.
The expression [...Array(Math.floor(products.length / 10))] is used to generate an array with a length that represents the number of pagination elements needed based on the total number of products.
A series of page numbers is generated using the map function. The page numbers are clickable, and the currently selected page is highlighted with the selected_page_number class.
A "Next" arrow (->) that is clickable if the current page is not the last page.

Pagination control elements have click handlers that invoke the handlePageChange function with appropriate arguments to change the page.

In conclusion, pagination is a crucial web development technique that enhances user experience by dividing extensive content into manageable sections. This facilitates structured navigation and prevents overwhelming displays. Commonly used for various lists, such as articles, products, or search results, pagination divides content into pages with controls like "Previous" and "Next" buttons. The React code example demonstrates dynamic product pagination, utilizing useState for state management and useEffect for fetching data. The rendered products are chunked based on the current page, with intuitive pagination controls. This technique offers a user-friendly approach, particularly when handling extensive datasets, thus streamlining content consumption.

Hope you Iiked it, If yes then give a like. Thanks for reading.

Check this one out: Why we should not mutate state in react

Or this one: Endeavour Monk Youtube

Semaphore in Operating System with implementation in C

Ujjawal Kumar — Wed, 09 Aug 2023 14:25:50 +0000

A semaphore is a synchronization construct used in operating systems to control access to shared resources among multiple processes or threads. It is essentially a variable or an abstract data type that provides two fundamental operations: "wait" and "signal" (also known as "P" and "V" operations, respectively).

Here's how semaphores work:

Wait Operation (P): When a process/thread wants to access a shared resource, it first performs a "wait" operation on the semaphore associated with that resource. If the semaphore value is positive (greater than 0), it decrements the value by 1 and continues accessing the resource. If the semaphore value is zero, indicating that the resource is currently being used by another process/thread, the process/thread is blocked or put to sleep until the semaphore becomes available.

Signal Operation (V): When a process/thread finishes using a shared resource, it performs a "signal" operation on the semaphore, which increments the semaphore value by 1. This operation indicates that the resource is now available for other processes/threads waiting on it. If there are any blocked processes/threads waiting for the semaphore, one of them is awakened and granted access to the resource.

Semaphores provide a mechanism to enforce mutual exclusion and prevent race conditions, ensuring that only one process/thread can access a shared resource at a time. They are commonly used in scenarios such as controlling access to critical sections of code, managing concurrent access to shared data structures, and implementing synchronization mechanisms like locks and barriers.

Semaphores can be implemented as either counting semaphores (allowing non-negative integer values) or binary semaphores (with values limited to 0 and 1), depending on the specific synchronization requirements.

Code:



#include <stdio.h>
#include <pthread.h>

typedef struct {
    pthread_mutex_t mutex;
    pthread_cond_t condition;
    int value;
} semaphore;

void semaphore_init(semaphore* sem, int initial_value) {
    pthread_mutex_init(&(sem->mutex), NULL);
    pthread_cond_init(&(sem->condition), NULL);
    sem->value = initial_value;
}

void semaphore_wait(semaphore* sem) {
    pthread_mutex_lock(&(sem->mutex));
    while (sem->value <= 0) {
        pthread_cond_wait(&(sem->condition), &(sem->mutex));
    }
    sem->value--;
    pthread_mutex_unlock(&(sem->mutex));
}

void semaphore_signal(semaphore* sem) {
    pthread_mutex_lock(&(sem->mutex));
    sem->value++;
    pthread_cond_signal(&(sem->condition));
    pthread_mutex_unlock(&(sem->mutex));
}

void* thread_function(void* arg) {
    semaphore* sem = (semaphore*)arg;

    printf("Thread waiting\n");
    semaphore_wait(sem);

    printf("Thread acquired the semaphore\n");
    // Perform some critical section or shared resource access here

    printf("Thread releasing the semaphore\n");
    semaphore_signal(sem);

    return NULL;
}

int main() {
    semaphore sem;
    semaphore_init(&sem, 1); // Initialize the semaphore with initial value 1

    pthread_t thread;
    pthread_create(&thread, NULL, thread_function, (void*)&sem);

    // Main thread also performs some work
    printf("Main thread performing some work\n");

    // Main thread waits for the semaphore
    printf("Main thread waiting\n");
    semaphore_wait(&sem);

    printf("Main thread acquired the semaphore\n");
    // Perform some critical section or shared resource access here

    printf("Main thread releasing the semaphore\n");
    semaphore_signal(&sem);

    pthread_join(thread, NULL);

    return 0;
}

Output:



Main thread performing some work
Main thread waiting
Main thread acquired the semaphore
Main thread releasing the semaphore
Thread waiting
Thread acquired the semaphore
Thread releasing the semaphore

If you liked this article then please like and share, Thanks for reading 🙏.

Checkout this also: https://www.youtube.com/@endeavourmonk

Why we should not mutate state in react

Ujjawal Kumar — Thu, 03 Aug 2023 19:09:48 +0000

In React, it is generally considered a best practice not to mutate the state variable directly. Instead, you should use the setState method provided by React to update the state. There are several reasons why mutating the state directly is discouraged:

1. Predictable Behavior: React relies on the state and props to determine when to re-render components. By using the setState method, React can accurately track changes to state and trigger re-renders when necessary. If you mutate the state directly, React may not detect the change and fail to update the component properly.

2. Immutability and Immutability Benefits: React promotes the concept of immutable data. Immutable data means that once created, the data cannot be changed. When you mutate the state directly, you are breaking this principle and introducing potential side effects and unexpected behavior.

3. Performance Optimizations: React can perform optimizations like shallow comparisons to determine if a component needs to re-render. Immutability helps with these optimizations, as React can quickly check if the reference to the state has changed. If you mutate the state directly, React might assume the state has not changed and skip re-rendering when it's necessary.

4. Undo/Redo and Time-Travel Debugging: Immutability makes it easier to implement features like undo/redo functionality and time-travel debugging, as you can keep track of previous states without worrying about mutations.

5. Functional Programming Paradigm: Immutability aligns with the principles of functional programming, making your code easier to reason about and less prone to bugs.

Example

Let's create a simple component that will reverse the array when we click the button and display it in the UI.

Wrong way of reversing the array:



import { useState } from 'react';

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

export default function List() {
// state variable and method to update it
  const [arr, setArr] = useState(initialArr);

// function to reverse the array on button click
  function handleClick() {
    arr.reverse();    // mutating the state directly
    setArr(arr);
  }

  return (
    <>
      <button onClick={handleClick}>
        Reverse
      </button>
      <ul>
        {arr.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

Output:

Reason:

Array.prototype.reverse() mutates the original array in place, and then we are setting the state with the same array reference using setArr(arr). In React, when the state is set with the same reference, React doesn't detect the change, and it won't trigger a re-render.

Right Approach to Reverse:



import { useState } from 'react';

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

export default function List() {
// state variable and method to update it
  const [arr, setArr] = useState(initialArr);

// function to reverse the array on button click
  function handleClick() {
    const newArr = [...arr]; // creating new array and then reversing
    newArr.reverse()
    setArr(newArr);
  }

  return (
    <>
      <button onClick={handleClick}>
        Reverse
      </button>
      <ul>
        {arr.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

Output:

Reason

This code will work as expected. By creating a new array newArr and then reversing it using newArr.reverse(), we ensure that the original arr state is not modified directly. Instead, you update the state with a new reference, which will trigger a re-render in React and reflect the reversed array in the UI.

Hope you liked the article, if yes then give a like.

Have a Look: https://www.youtube.com/@endeavourmonk

Waterfall Model in Software Development

Ujjawal Kumar — Tue, 13 Jun 2023 14:53:10 +0000

Process Model:

A process model in software engineering refers to a framework or a set of guidelines that defines the various activities, tasks, and their relationships involved in developing software. It provides a structured approach to software development, outlining the steps to be followed, the order in which they should be executed, and the deliverables at each stage.

Process models help in organizing and managing the software development process, ensuring that the project progresses in a systematic and controlled manner. Different process models exist, each with its own characteristics, advantages, and limitations.

Waterfall Model:

The waterfall model is a sequential software development process model that follows a linear and structured approach. It is one of the traditional and earliest models used in software engineering. The waterfall model consists of several distinct phases that are executed in a linear order, with each phase being completed before the next one begins.

Phases of Waterfall Model:
Here are the typical phases of the waterfall model:

1. Requirements Gathering: In this phase, the requirements for the software system are collected from the stakeholders. This includes understanding the needs of the users and defining the software requirements.

2. System Design: Once the requirements are gathered, the system design phase begins. The software architecture is designed, and the system components are identified. This phase determines how the software will be structured, including databases, user interfaces, and other components.

3. Implementation: The implementation phase involves translating the system design into actual code. Programmers write the code according to the specifications and design documents created in the previous phases.

4. Testing: After the code is developed, it is tested to ensure that it functions as expected and meets the defined requirements. Different types of testing, such as unit testing, integration testing, and system testing, are performed during this phase.

5. Deployment: Once the software is tested and validated, it is deployed or released to the end-users or customers. This phase involves installation, configuration, and making the software available for use.

6. Maintenance: The maintenance phase involves fixing any issues or bugs discovered after the software is deployed. It also includes making enhancements or modifications to the software based on user feedback or changing requirements.

The waterfall model assumes that the requirements are well-defined and stable from the beginning, and it follows a sequential approach where each phase has clear deliverables and is completed before moving on to the next phase. However, one of the main drawbacks of the waterfall model is its lack of flexibility in accommodating changes that may arise during the development process.

Due to its sequential nature, any changes in requirements or design in later stages can be costly and time-consuming to implement. This limitation led to the emergence of more iterative and flexible software development models, such as the Agile methodology, which allows for more adaptability and collaboration throughout the development lifecycle.