
In JavaScript, you can pass a function as a parameter to another function by simply passing the function name without invoking it with parentheses.

Here's an example of how to pass a function as a parameter in JavaScript:

```js
// Define a function that takes another function as a parameter
function performOperation(operation, a, b) {
  return operation(a, b);
}

// Define the functions that will be passed as parameters
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

// Call the performOperation function with different operations
console.log(performOperation(add, 5, 3)); // Output: 8
console.log(performOperation(subtract, 5, 3)); // Output: 2
```

In the above example, we define a `performOperation` function that takes three parameters: operation, a, and b. The operation parameter is the function we want to perform on a and b. We then define two functions, `add` and `subtract`, that will be passed as the operation parameter to the performOperation function. Finally, we call the performOperation function twice, passing in different functions each time, and log the results to the console.


Learn How to Pass a Function as a Parameter in JavaScript

Unlocking the Secrets of Linked List Algorithms: Top 10 Questions and Solutions


If you want to download a PDF file from a website without using any external packages, you can use the following steps in your ReactJS component:

- Create a function that will handle the PDF file download. In this example, the file download will be triggered by clicking a button.

```js
import React from "react";

function handleDownloadPDF() {
  const pdfURL = "https://example.com/file.pdf";
  const link = document.createElement("a");
  link.href = pdfURL;
  link.setAttribute("download", "example.pdf");
  document.body.appendChild(link);
  link.click();
}
```

if you are using Nextjs you can save the pfd file in the `public` dir and adapt the `pdfURL = "/example.pdf"`

- Create a button element in the component's render method that will call the handleDownloadPDF function on click.

```js
function PDFDownloadButton() {
  return <button onClick={handleDownloadPDF}>Download PDF</button>;
}
```

The **handleDownloadPDF** function will create a new a element, set its href attribute to the PDF file URL, and its download attribute to the desired file name. It will then append the a element to the body of the document and simulate a click on the a element to initiate the download.
That's it! You can customize the PDF URL and file name to suit your needs.


Make pdf download button 


# Learn Reactjs custom hooks by examples

**ReactJS custom hooks** are functions that you can create and use in your React application. They are called "custom" hooks because you create them yourself, rather than using the built-in hooks provided by React (such as `useState` and `useEffect`).

The purpose of a custom hook is to encapsulate some behavior or logic that you want to reuse across multiple components in your application. For example, let's say you have a form that has several inputs, and you want to validate each input when the user submits the form. You could create a custom hook called useFormValidation that contains the validation logic, and then use that hook in each component that needs to validate a form.

The benefits of using a custom hook are that it can help you write cleaner, more modular code. By encapsulating complex logic in a separate function, you can make your components simpler and easier to understand. Additionally, because the custom hook can be reused across multiple components, you can avoid duplicating code and make your application more efficient.

I will try to explain the following 5 custom hooks:

### useLocalStorage, useToggle, useIntersectionObserver, useOnClickOutside and useInterval

so lets begin

## useLocalStorage

The localStorage API allows you to store key-value pairs in the browser's local storage. In React, you can use this API to implement features like persisting user preferences or keeping track of the user's login state.

To make React use the **localStorage** API, you can create a custom hook that uses the `useState` and `useEffect` hooks to read and write data to the localStorage.

Here's an example of how to create a useLocalStorage hook:

```js
import { useState, useEffect } from "react";

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue !== null ? JSON.parse(storedValue) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}
```

In this hook, we define a state variable called `value` and a `setValue` function to update it. We use the `useState` hook to initialize value to the value stored in the localStorage for the given key, or to the initialValue if no value is found.

We also use the `useEffect` hook to update the localStorage whenever value changes. We pass an array of dependencies to the `useEffect` hook that includes key and value to ensure that the effect runs only when these values change.

Finally, we return an array containing value and setValue so that it can be used in the component that consumes it.

To use this hook in a component, you can import it and call it like this:

```js
import React from "react";
import useLocalStorage from "./useLocalStorage";

function MyComponent() {
  const [count, setCount] = useLocalStorage("count", 0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
```

In this example, we create a state variable called `count` and a `setCount` function to update it. We use the `useLocalStorage` hook to initialize count to the value stored in the localStorage for the key 'count', or to 0 if no value is found.

We then render the current value of count and a button to increment it using setCount. When the button is clicked, the count state variable is updated and the new value is stored in the localStorage using the `useEffect` hook defined in the `useLocalStorage` hook.

## useToggle

The `useToggle` hook is a simple custom hook that allows you to toggle a boolean value. In React, you can use this hook to implement features like expanding and collapsing sections, toggling a menu, or switching between two states.

Here's an example of how to create a useToggle hook:

```js
import { useState, useCallback } from "react";

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggleValue = useCallback(() => {
    setValue((value) => !value);
  }, []);

  return [value, toggleValue];
}
```

In this hook, we define a state variable called `value` and a `setValue` function to update it. We use the `useState` hook to initialize value to initialValue or false if no value is provided.

We also define a toggleValue function using the `useCallback` hook to ensure that it doesn't change on each render. This function simply calls setValue with the negation of the current value.

Finally, we return an array containing value and toggleValue so that it can be used in the component that consumes it.

To use this hook in a component, you can import it and call it like this:

```js
import React from "react";
import useToggle from "./useToggle";

function MyComponent() {
  const [isExpanded, toggleExpansion] = useToggle();

  return (
    <div>
      <button onClick={toggleExpansion}>
        {isExpanded ? "Collapse" : "Expand"}
      </button>
      {isExpanded && <p>Some content here</p>}
    </div>
  );
}
```

In this example, we create a state variable called `isExpanded` and a `toggleExpansion` function to update it. We use the `useToggle` hook to initialize isExpanded to false and provide toggleExpansion as the toggle function.

We then render a button that toggles the isExpanded state variable and changes its text based on the current value. We also conditionally render some content using the isExpanded state variable. When isExpanded is true, the content is shown; when isExpanded is false, the content is hidden.

## useIntersectionObserver

Intersection Observer is a browser API that allows you to observe changes to the intersection of a target element with an ancestor element or with the viewport. In React, you can use this API to implement lazy loading, infinite scrolling, and other similar features.

To make React use the Intersection Observer API, you can create a custom hook that uses the `useRef` and `useEffect` hooks to create an instance of the Intersection Observer and observe changes to the intersection of the target element.

Here's an example of how to create a **useIntersectionObserver** hook:

```js
import { useState, useEffect, useRef } from "react";

function useIntersectionObserver(ref, options = {}) {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const observerRef = useRef(null);

  useEffect(() => {
    observerRef.current = new IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting);
    }, options);

    const node = ref.current;
    observerRef.current.observe(node);

    return () => {
      observerRef.current.unobserve(node);
    };
  }, [ref, options]);

  return isIntersecting;
}
```

In this hook, we define two state variables: isIntersecting to keep track of whether the target element is intersecting with the observer and observerRef to keep a reference to the Intersection Observer instance.

The useEffect hook is used to create and observe changes to the intersection of the target element. We create a new instance of the Intersection Observer and pass a callback function to it that updates the isIntersecting state variable based on the isIntersecting property of the entry object.

We then observe the target element using the observe method of the Intersection Observer instance, and return a cleanup function that unobserves the element using the unobserve method.

Finally, we return the isIntersecting state variable from the hook so that it can be used in the component that consumes it.

To use this hook in a component, you can import it and call it like this:

```js
import React, { useRef } from "react";
import useIntersectionObserver from "./useIntersectionObserver";

function MyComponent() {
  const ref = useRef(null);
  const isIntersecting = useIntersectionObserver(ref);

  return <div ref={ref}>{isIntersecting ? "Visible" : "Not visible"}</div>;
}
```

In this example, we create a ref using the useRef hook and pass it to the useIntersectionObserver hook. We then render an element and attach the ref to it using the ref prop. Finally, we use the isIntersecting state variable to conditionally render the text "Visible" or "Not visible".

## useOnClickOutside

The useOnClickOutside hook is a custom hook that allows you to detect clicks outside of a specified element. In React, you can use this hook to implement features like closing a dropdown menu when the user clicks outside of it or dismissing a modal dialog when the user clicks outside of it.

Here's an example of how to create a useOnClickOutside hook:

```js
import { useEffect, useRef } from "react";

function useOnClickOutside(ref, handler) {
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        handler();
      }
    };

    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref, handler]);
}
```

In this hook, we use the `useEffect` hook to add and remove an event listener for mouse clicks outside of the specified element. We also use the `useRef` hook to create a reference to the element we want to detect clicks outside of.

Inside the `useEffect` hook, we define a `handleClickOutside` function that checks if the clicked element is outside of the specified element by using the contains method of the ref.current element. If the clicked element is outside of the specified element, we call the handler function.

We then add the `handleClickOutside` function as an event listener for the 'mousedown' event using the `document.addEventListener` method.

Finally, we return a cleanup function that removes the `handleClickOutside` function from the event listener using the `document.removeEventListener` method.

To use this hook in a component, you can import it and call it like this:

```js
import React, { useRef } from "react";
import useOnClickOutside from "./useOnClickOutside";

function MyComponent({ onClose }) {
  const ref = useRef();

  useOnClickOutside(ref, onClose);

  return (
    <div ref={ref}>
      <p>Some content here</p>
    </div>
  );
}
```

In this example, we create a reference to the element we want to detect clicks outside of using the `useRef` hook. We also call the `useOnClickOutside` hook and pass the ref and onClose function as arguments. This means that when the user clicks outside of the element, the onClose function will be called.

We then render some content inside the element and set the ref using the ref prop. This allows the `useOnClickOutside` hook to detect clicks outside of the element and call the onClose function.

## useInterval

The useInterval hook is a custom hook that allows you to create a repeating interval in React. In other words, it allows you to run a function at a specified time interval. You can use this hook to implement features like updating the time displayed in a clock or periodically fetching data from an API.

Here's an example of how to create a useInterval hook:

```js
import { useEffect, useRef } from "react";

function useInterval(callback, delay) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      const intervalId = setInterval(tick, delay);
      return () => clearInterval(intervalId);
    }
  }, [delay]);
}
```

In this hook, we use the `useRef` hook to create a reference to the callback function. We also use the `useEffect` hook to update the reference when the callback function changes.

We then use another `useEffect` hook to create and return an interval that calls the callback function every delay milliseconds. If delay is null, the interval is cleared and no function is called.

To use this hook in a component, you can import it and call it like this:

```js
import React, { useState } from "react";
import useInterval from "./useInterval";

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

  useInterval(() => {
    setCount(count + 1);
  }, 1000);

  return <p>{count}</p>;
}
```

In this example, we create a state variable called `count` and a `setCount` function to update it. We use the `useState` hook to initialize count to 0.

We then call the `useInterval` hook and pass a function that increments count by 1 every second. This means that the count value will be updated every second.

Finally, we render the count value inside a paragraph element using the JSX syntax count. This means that the count value will be displayed on the screen and updated every second.


Reactjs custom hooks by examples


# Reactjs useMemo and useCallback by examples

**ReactJS** is a popular JavaScript library used for building user interfaces. Two important hooks in ReactJS are `useMemo` and `useCallback`, which can be used to optimize the performance of your application.
`useCallback` and `useMemo` are both React hooks that are used for performance optimization, but they serve different purposes.

`useMemo` is used to memoize the result of a function call, similar to the memo higher-order component. It takes a function and a dependency array, and returns a memoized value that is recalculated only when one of the dependencies changes.

`useCallback` is used to memoize a function instance, so that the same function instance can be reused across renders, rather than creating a new function on each render. It takes a function and a dependency array, and returns a memoized function instance that is recalculated only when one of the dependencies changes.
In other words, `useMemo` is used to memoize the result of a computation, while `useCallback` is used to memoize a function itself.

## useMemo

`useMemo` is a React hook that allows you to memoize the result of a function so that it is only recomputed when one of its dependencies change. This can help to optimize the performance of your application by reducing unnecessary re-renders.

Here are two examples of using `useMemo`:

### Example 1: Memoizing Expensive Calculations

Suppose you have a component that displays a list of items. Each item has a complex calculation that needs to be performed before it can be displayed. This calculation is expensive and can take a long time to compute, especially if there are many items in the list.

```js
function Item({ data }) {
  const result = complexCalculation(data);
  return <div>{result}</div>;
}

function List({ items }) {
  return (
    <div>
      {items.map((item) => (
        <Item data={item} />
      ))}
    </div>
  );
}
```

To avoid performing this calculation unnecessarily, you can memoize the result of complexCalculation using `useMemo`. This way, the calculation will only be performed when the data prop changes.

```js
function Item({ data }) {
  const result = useMemo(() => {
    return complexCalculation(data);
  }, [data]);
  return <div>{result}</div>;
}

function List({ items }) {
  return (
    <div>
      {items.map((item) => (
        <Item data={item} />
      ))}
    </div>
  );
}
```

Now, when the data prop for an item changes, the complexCalculation function will be called again, but only for that item. The memoized result will be used for all other items that have not changed, avoiding unnecessary computation.

### Example 2: Memoizing a sorted list of items:

Suppose you have a list of items you want to sort , and this list don't change frequently

```js
function MyComponent({ items }) {
  const sortedItems = items.sort((a, b) => a.name.localeCompare(b.name));

  return (
    <ul>
      {sortedItems.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}
```

To avoid calling sortedItemsunnecessarily, you can memoize it using useMemo. This way, the function will only be executed when the itemsstate changes.

```js
function MyComponent({ items }) {
  const sortedItems = useMemo(() => {
    return items.sort((a, b) => a.name.localeCompare(b.name));
  }, [items]);

  return (
    <ul>
      {sortedItems.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}
```

In this example, `useMemo` is used to memoize a sorted list of items. The sort method is an expensive operation, so we want to avoid doing it on every render. Instead, we use `useMemo` to memoize the sorted list, and only recalculate it when the items dependency changes.

## useCallback

`useCallback` is a React hook that memoizes a function, similar to `useMemo`, but it is specifically designed for optimizing the performance of function props passed to child components. Here are two examples of using `useCallback`:

### Example 1: Memoizing a Function Prop

Suppose you have a component that takes a function as a prop. This function is expensive and takes a long time to execute. You want to avoid re-creating the function on every render, especially if the prop does not change frequently.

```js
function ExpensiveComponent({ expensiveFunction }) {
  const result = expensiveFunction();
  return <div>{result}</div>;
}

function App() {
  const [value, setValue] = useState(0);

  function expensiveFunction() {
    // Expensive calculation using `value`
  }

  return (
    <div>
      <button onClick={() => setValue(value + 1)}>Increment</button>
      <ExpensiveComponent expensiveFunction={expensiveFunction} />
    </div>
  );
}
```

To avoid re-creating expensiveFunction on every render, you can memoize it using useCallback.

```js
function ExpensiveComponent({ expensiveFunction }) {
  const result = expensiveFunction();
  return <div>{result}</div>;
}

function App() {
  const [value, setValue] = useState(0);

  const expensiveFunction = useCallback(() => {
    // Expensive calculation using `value`
  }, [value]);

  return (
    <div>
      <button onClick={() => setValue(value + 1)}>Increment</button>
      <ExpensiveComponent expensiveFunction={expensiveFunction} />
    </div>
  );
}
```

Now, expensiveFunction will only be re-created when the value state changes. Otherwise, the memoized function will be used for all subsequent renders.

### Example 2: Preventing Unnecessary Re-renders of Child Components

Suppose you have a parent component that renders several child components. Each child component takes a function as a prop, but the function does not depend on any props or state from the parent component.

```js
function Child({ handleClick }) {
  return <button onClick={handleClick}>Click me</button>;
}

function Parent() {
  const handleClick = () => {
    // Handle click event
  };

  return (
    <div>
      <Child handleClick={handleClick} />
      <Child handleClick={handleClick} />
      <Child handleClick={handleClick} />
    </div>
  );
}
```

By default, each call to handleClick will create a new function instance, which can cause unnecessary re-renders of the child components. To prevent this, you can memoize handleClick using useCallback.

```js
function Child({ handleClick }) {
  return <button onClick={handleClick}>Click me</button>;
}

function Parent() {
  const handleClick = useCallback(() => {
    // Handle click event
  }, []);

  return (
    <div>
      <Child handleClick={handleClick} />
      <Child handleClick={handleClick} />
      <Child handleClick={handleClick} />
    </div>
  );
}
```

Now, handleClick will only be created once and shared by all child components. This can improve the performance of your application by reducing unnecessary re-renders.

### Advantages of `useMemo` and `useCallback` :

1- Improved performance: `useMemo` can be used to cache the results of expensive calculations, which can improve the performance of your application. useCallback can be used to cache the function instances, which can improve the performance of your application.

2- Avoids unnecessary re-renders: By memoizing the result of a calculation using `useMemo` , useCallbackyou can prevent the component from re-rendering unnecessarily.

3- Better user experience: Improved performance means a better user experience, as your application will be more responsive and faster.

### Disadvantages of `useMemo` and `useCallback` :

1- Overuse can lead to complexity: Overusing `useMemo` and `useCallback` can lead to complex code that is difficult to maintain.

2- Can cause unnecessary re-renders: Memoized values are stored in memory, so overusing `useMemo` can lead to an increase in memory usage.

3- Can cause unnecessary re-renders: If you use `useMemo` on a value that changes frequently, it can cause unnecessary re-renders and decrease performance.

4- May not be necessary in all cases: In some cases, memoizing a function using `useCallback` may not provide any performance benefits, and may even decrease performance.


Reactjs useMemo and useCallback by examples


To choose items randomly every 2 seconds from an array of numbers using ReactJS functional component, you can use the useState hook to keep track of the current randomly selected item and useEffect hook to update it every 2 seconds.

Here is an example code snippet:

```js
import React, { useState, useEffect } from "react";

function RandomNumberSelector({ numbers }) {
  const [selectedNumber, setSelectedNumber] = useState(null);

  useEffect(() => {
    const intervalId = setInterval(() => {
      const randomIndex = Math.floor(Math.random() * numbers.length);
      setSelectedNumber(numbers[randomIndex]);
    }, 2000);
    return () => clearInterval(intervalId);
  }, [numbers]);

  return (
    <div>
      <h2>Selected number: {selectedNumber}</h2>
    </div>
  );
}

export default RandomNumberSelector;
```

In this example, we create a functional component **RandomNumberSelector** that takes an array of `numbers` as a prop. Inside the component, we use the useState hook to keep track of the current randomly selected number, which is initially set to null.

We also use the useEffect hook to set up a timer that updates the selected number every 2 seconds. Inside the useEffect hook, we use the `setInterval` function to call a callback function every 2 seconds. In the callback function, we generate a random index based on the length of the numbers array and use it to select a random number from the array. We then update the selected number using the setSelectedNumber function.

Finally, we render the selected number in a heading element in the component's JSX.

Note that we pass the numbers array as a dependency to the useEffect hook to ensure that the timer is reinitialized whenever the array changes.

## How to select many items randomly

Here is an example code snippet that demonstrates how to randomly choose 3 numbers from an array of 5 numbers every 2 seconds using ReactJS:

```js
import React, { useState, useEffect } from "react";

const RandomNumbers = () => {
  const [numbers, setNumbers] = useState([]);
  const arr = [1, 2, 3, 4, 5];

  useEffect(() => {
    const interval = setInterval(() => {
      const randomNumbers = [];
      while (randomNumbers.length < 3) {
        const index = Math.floor(Math.random() * arr.length);
        const number = arr[index];
        if (!randomNumbers.includes(number)) {
          randomNumbers.push(number);
        }
      }
      setNumbers(randomNumbers);
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <p>Random Numbers:</p>
      <ul>
        {numbers.map((number) => (
          <li key={number}>{number}</li>
        ))}
      </ul>
    </div>
  );
};

export default RandomNumbers;
```

Here, we use the useState hook to store the randomly chosen numbers and the useEffect hook to set up an interval that runs every 2 seconds. Within the interval, we use a while loop to randomly choose 3 unique numbers from the arr `array` and set them using the setNumbers function. Finally, we render the randomly chosen numbers in a list.


Select item or items from array randomly in Reactjs


To create vertical tabs in a sidebar using React functional components, you can follow these general steps:

- Define a state variable to keep track of the active tab. This will allow you to switch between tabs when the user clicks on them.

- Create a function that will be called when a tab is clicked. This function will update the state variable to reflect the currently active tab.

- Define an array of tab objects, where each object represents a tab and includes the tab's title and content. This array will be used to generate the tabs and their content.

- Use the map() function to generate the tab elements based on the array of tab objects. For each tab, create a button element that will serve as the tab's title and set its onClick property to the function created in step 2.

- Create a div element for each tab's content and conditionally render it based on the active tab state variable.

- Style the tabs and content to achieve the desired appearance and layout.

Here is some example code that demonstrates these steps:

```js
import { useState } from "react";

function VerticalTabs() {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  const tabs = [
    { title: "Tab 1", content: "Content for tab 1" },
    { title: "Tab 2", content: "Content for tab 2" },
    { title: "Tab 3", content: "Content for tab 3" },
  ];

  return (
    <div className="sidebar">
      {tabs.map((tab, index) => (
        <button
          key={index}
          className={activeTab === index ? "active" : ""}
          onClick={() => handleTabClick(index)}
        >
          {tab.title}
        </button>
      ))}
      {tabs.map((tab, index) => (
        <div
          key={index}
          className={activeTab === index ? "content active" : "content"}
        >
          {tab.content}
        </div>
      ))}
    </div>
  );
}
```

In this example, the tabs are created using a button element with the tab title as its content. The active tab is highlighted using a CSS class. The content for each tab is rendered in a div element, and the active tab's content is conditionally rendered based on the active tab state variable. Note that the CSS styles for this component are not included in this example, but they should be defined to achieve the desired appearance and layout.


Verticle tabs in Reactjs


Asynchronous programming is a way of writing code that doesn't block the execution of other code while waiting for some long-running operation to complete. JavaScript, being a single-threaded language, relies heavily on asynchronous programming techniques to provide a responsive user interface and to perform I/O operations efficiently. One of the most popular ways to write asynchronous code in JavaScript is using the `async/await` syntax.

`async/await` is a syntactic sugar built on top of Promises, which simplifies writing and handling asynchronous code. It allows you to write asynchronous code in a more synchronous-like way, making it easier to read and maintain. Here's an example:

```js
async function fetchUserData(userId) {
  const userResponse = await fetch(`https://api.example.com/users/${userId}`);
  const userData = await userResponse.json();
  return userData;
}

fetchUserData(123)
  .then((userData) => console.log(userData))
  .catch((error) => console.error(error));
```

In this example, we have an async function called fetchUserData that takes a user ID and fetches the user data from an API using the fetch function, which returns a Promise. The await keyword is used to wait for the Promise to resolve before continuing with the next line of code. The await keyword can only be used inside an async function, which is why fetchUserData is declared as async.

The benefits of using async/await over traditional Promise-based code are:

<ol>
  <li>
    **Simpler code:** async/await makes the code easier to read and write, by
    removing the need for nested callbacks or Promise chains.
  </li>
  <li>
    **Error handling:** async/await allows for more natural error handling using
    try/catch blocks, instead of handling errors through Promise rejection
    callbacks.
  </li>
  <li>
    **Debugging:** async/await provides better stack traces than Promises, which
    makes it easier to debug your code.
  </li>
  <li>
    **Sequential execution:** async/await allows for more sequential code
    execution, making it easier to reason about the flow of the code.
  </li>
</ol>

In conclusion, `async/await` is a powerful tool for writing and handling asynchronous code in JavaScript. It simplifies the syntax and makes the code more readable, while providing better error handling and debugging capabilities.


Async await in javascript


The fast and slow pointers pattern, also known as the "hare and tortoise" algorithm, is a popular technique used to solve various coding problems. In this pattern, two pointers are used to traverse a data structure, typically a linked list or an array, at different speeds. Here are three examples of how to use the fast and slow pointers pattern in JavaScript:

**Example 1:** Linked List Cycle

Given a linked list, determine whether it has a cycle or not.

```js
class ListNode {
  constructor(val) {
    this.val = val;
    this.next = null;
  }
}

function hasCycle(head) {
  let slow = head;
  let fast = head;

  while (fast && fast.next) {
    slow = slow.next;
    fast = fast.next.next;
    if (slow === fast) {
      return true;
    }
  }

  return false;
}

// Example usage
const node1 = new ListNode(1);
const node2 = new ListNode(2);
const node3 = new ListNode(3);
const node4 = new ListNode(4);
node1.next = node2;
node2.next = node3;
node3.next = node4;
node4.next = node2;

console.log(hasCycle(node1)); // true
```

In this example, we use two pointers, `slow` and `fast`, to traverse the linked list. The slow pointer moves one step at a time, while the fast pointer moves two steps at a time. If the linked list has a cycle, the fast pointer will eventually catch up to the slow pointer, and we can return true. Otherwise, we return false.

**Example 2:** Middle of the Linked List

Given a linked list, find the middle node.

```js
class ListNode {
  constructor(val) {
    this.val = val;
    this.next = null;
  }
}

function middleNode(head) {
  let slow = head;
  let fast = head;

  while (fast && fast.next) {
    slow = slow.next;
    fast = fast.next.next;
  }

  return slow;
}

// Example usage
const node1 = new ListNode(1);
const node2 = new ListNode(2);
const node3 = new ListNode(3);
const node4 = new ListNode(4);
const node5 = new ListNode(5);
node1.next = node2;
node2.next = node3;
node3.next = node4;
node4.next = node5;

console.log(middleNode(node1)); // ListNode { val: 3, next: ListNode { val: 4, next: ListNode { val: 5, next: null } } }
```

In this example, we again use two pointers, slow and fast, to traverse the linked list. The slow pointer moves one step at a time, while the fast pointer moves two steps at a time. When the fast pointer reaches the end of the linked list, the slow pointer will be at the middle node, which we can return.

**Example 3:** Nth Node from the End of a Linked List

Given a linked list, find the nth node from the end of the list.

```js
class ListNode {
  constructor(val) {
    this.val = val;
    this.next = null;
  }
}

function nthFromEnd(head, n) {
  let slow = head;
  let fast = head;

  for (let i = 0; i < n; i++) {
    fast = fast.next;
  }

  while (fast) {
    slow = slow.next;
    fast = fast.next;
  }

  return slow;
```

In the third example, we want to find the nth node from the end of a linked list. To do this, we again use two pointers, slow and fast, to traverse the linked list. However, this time we need to start the fast pointer n nodes ahead of the slow pointer.

So, we first move the fast pointer n nodes ahead of the slow pointer by iterating over the list n times. Once the fast pointer is n nodes ahead, we move both pointers forward one node at a time until the fast pointer reaches the end of the linked list. At this point, the slow pointer will be pointing to the nth node from the end of the list, which we can return.

This approach has a time complexity of O(n) because we iterate over the linked list twice, with a gap of n nodes between the two pointers.


Fast and slow pointers coding pattern


To implement pagination for a list of blog articles in a React functional component, you can follow these steps:

<ol>
<li>Define state variables to keep track of the current page and the number of items per page. You can do this using the useState hook, like so:</li>
```js
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(10);
```
<li>Calculate the total number of pages based on the number of items and the number of items per page. You can do this using the Math.ceil function, like so:</li>
```js
const totalPages = Math.ceil(items.length / itemsPerPage);
```

<li>Define a function to handle the page change. This function will update the current page in the state.</li>
```js
const handlePageChange = (pageNumber) => {
  setCurrentPage(pageNumber);
};
```
<li>Use the slice method to display only the items for the current page. You can calculate the starting and ending indexes based on the current page and the number of items per page.</li>
```js
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const displayedItems = items.slice(startIndex, endIndex);
```

<li>Render the displayed items and a pagination component that allows the user to navigate to different pages. You can use the map method to generate the pagination links.</li>
```js
return (
  <div>
    {displayedItems.map((item) => (
      // render each item here
    ))}
    <div className="pagination">
      {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNumber) => (
        <a
          key={pageNumber}
          onClick={() => handlePageChange(pageNumber)}
          className={pageNumber === currentPage ? "active" : ""}
        >
          {pageNumber}
        </a>
      ))}
    </div>
  </div>
);
```
</ol>
The pagination links are generated using the Array.from method to create an array with as many elements as the total number of pages. The map method is used to render each link as an anchor element. The className prop is used to apply the "active" class to the current page link. Finally, the onClick handler calls the handlePageChange function to update the current page in the state.


Make pagination with Reactjs


Heap algorithms are a set of algorithms that are based on the heap data structure. A heap is a binary tree where the parent node has a value greater than or equal to its children in a Max Heap, or the parent node has a value less than or equal to its children in a Min Heap. Heap algorithms can be used for sorting, searching, and data manipulation.

Here are examples of Heap algorithms implemented in JavaScript:

<ol>
<li>
**Heap Sort:** Heap Sort is a sorting algorithm that uses the heap data structure to sort an array in ascending or descending order. In a Max Heap, the largest element is always at the root of the heap, so we can repeatedly remove the root and place it at the end of the array until the heap is empty. The resulting array will be sorted in descending order. Here's an implementation of Heap Sort in JavaScript:
</li>
```js
function heapSort(array) {
  let len = array.length;

for (let i = Math.floor(len / 2); i >= 0; i--) {
heapify(array, i, len);
}

for (let i = len - 1; i > 0; i--) {
[array[0], array[i]] = [array[i], array[0]];
heapify(array, 0, i);
}

return array;
}

function heapify(array, i, len) {
let largest = i;
let left = 2 _ i + 1;
let right = 2 _ i + 2;

if (left < len && array[left] > array[largest]) {
largest = left;
}

if (right < len && array[right] > array[largest]) {
largest = right;
}

if (largest !== i) {
[array[i], array[largest]] = [array[largest], array[i]];
heapify(array, largest, len);
}
}

````
<li>
**Priority Queue:** A priority queue is a data structure that allows us to insert elements with a priority and remove the element with the highest priority. A priority queue can be implemented using a heap, where the highest priority element is always at the root of the heap. Here's an implementation of a priority queue in JavaScript:
</li>
```js
class PriorityQueue {
  constructor() {
    this.heap = [];
  }

  insert(value, priority) {
    this.heap.push({ value, priority });
    let index = this.heap.length - 1;

    while (index > 0) {
      let parentIndex = Math.floor((index - 1) / 2);

      if (this.heap[parentIndex].priority > this.heap[index].priority) {
        break;
      }

      [this.heap[parentIndex], this.heap[index]] = [this.heap[index], this.heap[parentIndex]];
      index = parentIndex;
    }
  }

  remove() {
    if (this.heap.length === 0) {
      return null;
    }

    if (this.heap.length === 1) {
      return this.heap.pop().value;
    }

    let maxValue = this.heap[0].value;
    this.heap[0] = this.heap.pop();
    let index = 0;

    while (true) {
      let leftIndex = 2 * index + 1;
      let rightIndex = 2 * index + 2;

      if (leftIndex >= this.heap.length) {
        break;
      }

      let maxChildIndex = leftIndex;

      if (rightIndex < this.heap.length && this.heap[rightIndex].priority > this.heap[leftIndex].priority) {
        maxChildIndex = rightIndex;
      }

      if (this.heap[index].priority >= this.heap[maxChildIndex].priority) {
````

</ol>


Heap Algorithm and data structure with examples


To create an accordion using ReactJS functional component, you can follow these steps:

<ol>
  <li>
    Create a new functional component for your accordion. This component will
    receive an array of items as props, and it will render each item as a
    clickable header and a collapsible content section.
  </li>
  <li>
    Add some CSS styles to your accordion component. You can style the header
    and content sections as you prefer, and I am using tailwindcss.
  </li>

```js
import React, { useState } from "react";

function Accordion({ items }) {
  const [activeIndex, setActiveIndex] = useState(null);

  const handleClick = (index) => {
    if (index === activeIndex) {
      setActiveIndex(null);
    } else {
      setActiveIndex(index);
    }
  };

  return (
    <div className="accordion">
      {items.map((item, index) => (
        <div
          key={`accordion-index-${index}`}
          className="max-w-md mx-auto transition-all ease-in-out duration-500 border-b-2"
        >
          <div
            className="header bg-[#f5f5f5] text-[#444] cursor-pointer p-4 text-left text-lg flex justify-start items-center"
            onClick={() => handleClick(index)}
          >
            <spna className="text-2xl text-blue-700">+</spna>
            <h3 className="font-extrabold text-lg ml-7">{item.title}</h3>
          </div>
          {activeIndex === index && (
            <div className="content px-0 py-5 overflow-hidden bg-[#fff] ">
              <p className="text-left text-md">{item.content}</p>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

export default Accordion;
```

{" "}
<li>
  Use the accordion component in your app by passing an array of items as props.
</li>

```js
import Accordion from "./Accordion";

function App() {
  const items = [
    {
      title: "The first item of accordion",
      content:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit.",
    },
    {
      title: "The second item of accordion",
      content:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit.",
    },
    {
      title: "The third item of accordion",
      content:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit.",
    },
  ];

  return <Accordion items={items} />;
}

export default App;
```

</ol>
That's it! You should now have a working accordion component in your ReactJS app.


Make Accordion wiht Reactjs


Solid principles are a set of five principles aimed at making software design maintainable, scalable and easy to modify. These principles can be applied to any object-oriented programming language, including ReactJS. In this blog post, we’ll discuss the importance of the SOLID principles in ReactJS and how they can improve your code.

## Single Responsibility Principle (SRP)

The SRP states that a class should have only one reason to change. In ReactJS, this means that components should have only one responsibility. For example, a component that handles both data display and data retrieval should be separated into two different components. This way, changes in one area do not affect the other, making the code more maintainable.

**Example**: Consider a component called "UserProfile" which is responsible for displaying the user's profile information as well as fetching the data from the API. This violates the SRP as the component has two responsibilities, data retrieval and display. To adhere to the SRP, we can split this component into two separate components, "UserProfileDisplay" and "UserProfileFetcher".

```js
import React, { Component } from "react";

class UserProfile extends Component {
  state = {
    user: {},
    isLoading: true,
    error: null,
  };

  componentDidMount() {
    // fetch user data from API , you can extract it as a separat function
    fetch("https://api.example.com/users/123")
      .then((response) => response.json())
      .then((data) => {
        this.setState({ user: data, isLoading: false });
      })
      .catch((error) => {
        this.setState({ error, isLoading: false });
      });
  }

  render() {
    return (
      <div>
        {this.state.isLoading ? (
          <p>Loading...</p>
        ) : this.state.error ? (
          <p>Error: {this.state.error.message}</p>
        ) : (
          <UserProfileDisplay user={this.state.user} />
        )}
      </div>
    );
  }
}

class UserProfileDisplay extends Component {
  render() {
    return (
      <div>
        <h2>User Profile</h2>
        <p>Name: {this.props.user.name}</p>
        <p>Email: {this.props.user.email}</p>
      </div>
    );
  }
}

export { UserProfile, UserProfileDisplay };
```

and the code as functionl component

```js
import React, { useState, useEffect } from "react";

const UserProfile = () => {
  const [user, setUser] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // fetch user data from API , you can also separate it as a function
    fetch("https://api.example.com/users/123")
      .then((response) => response.json())
      .then((data) => {
        setUser(data);
        setIsLoading(false);
      })
      .catch((error) => {
        setError(error);
        setIsLoading(false);
      });
  }, []);

  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error: {error.message}</p>
      ) : (
        <UserProfileDisplay user={user} />
      )}
    </div>
  );
};

const UserProfileDisplay = (props) => {
  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {props.user.name}</p>
      <p>Email: {props.user.email}</p>
    </div>
  );
};

export { UserProfile, UserProfileDisplay };
```

## Open/Closed Principle (OCP)

The OCP states that a class should be open for extension but closed for modification. In ReactJS, this means that components should be designed in such a way that they can be extended with new functionality, but the original code does not have to be modified. This is achieved by making use of inheritance and composition.

**Example**: Consider a component called "Form" that can be used to display different types of forms, such as login form or contact form. To adhere to the OCP, we can create a base "Form" component and extend it for each specific form type, such as "LoginForm" and "ContactForm". This way, the base "Form" component remains closed for modification but open for extension.

```js
import React, { Component } from "react";

class Form extends Component {
  render() {
    return (
      <div>
        {/* common form fields and logic */}
        <form onSubmit={this.props.onSubmit}>
          <input
            type="text"
            name="name"
            value={this.props.name}
            onChange={this.props.onChange}
          />
          <input
            type="text"
            name="email"
            value={this.props.email}
            onChange={this.props.onChange}
          />
          {/* specific form fields */}
          {this.props.children}
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

class LoginForm extends Form {
  render() {
    return (
      <div>
        <h2>Login Form</h2>
        {/* specific form fields */}
        <input
          type="password"
          name="password"
          value={this.props.password}
          onChange={this.props.onChange}
        />
        {/* common form fields and logic */}
        {super.render()}
      </div>
    );
  }
}

class ContactForm extends Form {
  render() {
    return (
      <div>
        <h2>Contact Form</h2>
        {/* specific form fields */}
        <input
          type="text"
          name="subject"
          value={this.props.subject}
          onChange={this.props.onChange}
        />
        <textarea
          name="message"
          value={this.props.message}
          onChange={this.props.onChange}
        ></textarea>
        {/* common form fields and logic */}
        {super.render()}
      </div>
    );
  }
}

export { LoginForm, ContactForm };
```

And the code as functional component

```js
import React from "react";

const Form = (props) => {
  return (
    <div>
      {/* common form fields and logic */}
      <form onSubmit={props.onSubmit}>
        <input
          type="text"
          name="name"
          value={props.name}
          onChange={props.onChange}
        />
        <input
          type="text"
          name="email"
          value={props.email}
          onChange={props.onChange}
        />
        {/* specific form fields */}
        {props.children}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

const LoginForm = (props) => {
  return (
    <div>
      <h2>Login Form</h2>
      {/* specific form fields */}
      <input
        type="password"
        name="password"
        value={props.password}
        onChange={props.onChange}
      />
      {/* common form fields and logic */}
      <Form {...props}>{props.children}</Form>
    </div>
  );
};

const ContactForm = (props) => {
  return (
    <div>
      <h2>Contact Form</h2>
      {/* specific form fields */}
      <input
        type="text"
        name="subject"
        value={props.subject}
        onChange={props.onChange}
      />
      <textarea
        name="message"
        value={props.message}
        onChange={props.onChange}
      ></textarea>
      {/* common form fields and logic */}
      <Form {...props}>{props.children}</Form>
    </div>
  );
};

export { LoginForm, ContactForm };
```

## Liskov Substitution Principle (LSP)

The LSP states that objects of a superclass should be replaceable with objects of a subclass. In ReactJS, this means that components should be designed in such a way that they can be swapped out with other components that provide the same functionality. This makes the code more flexible and scalable.

**Example**: Consider a component called "Button" and a subclass called "SubmitButton". Both of these components should have the same methods and properties, so that they can be used interchangeably. This way, if we have a component that uses the "Button" component, we can substitute it with the "SubmitButton" component without affecting the functionality.

```js
// Button component
class Button extends React.Component {
  handleClick = (event) => {
    // handle button click
  };

  render() {
    return <button onClick={this.handleClick}>{this.props.children}</button>;
  }
}

// SubmitButton component
class SubmitButton extends Button {
  render() {
    return (
      <button type="submit" onClick={this.handleClick}>
        {this.props.children}
      </button>
    );
  }
}
```

And the code as functionl component

```js
import React from "react";

function Button(props) {
  const handleClick = () => {
    console.log("Button clicked");
  };

  return <button onClick={handleClick}>{props.text}</button>;
}

function SubmitButton(props) {
  const handleClick = () => {
    console.log("Submit button clicked");
  };

  return <button onClick={handleClick}>{props.text}</button>;
}

function App() {
  return (
    <div>
      <Button text="Click me" />
      <SubmitButton text="Submit" />
    </div>
  );
}
```

## Interface Segregation Principle (ISP)

The ISP states that a class should not be forced to implement interfaces it does not use. In ReactJS, this means that components should only implement the methods and properties that they actually need. This makes the code more efficient and reduces the risk of bugs.

**Example**: Consider a component called "Notification" that has methods for sending emails, SMS and push notifications. However, not all implementations of this component need to send all three types of notifications. To adhere to the ISP, we can split the "Notification" component into three separate interfaces, "EmailNotification", "SMSNotification", and "PushNotification". This way, a component that only needs to send emails can implement the "EmailNotification" interface without being forced to implement the other methods.

```js
import React, { Component } from "react";

// Define the three separate interfaces as empty objects.
const EmailNotification = {};
const SMSNotification = {};
const PushNotification = {};

// Define the Notification component that implements all three interfaces.
class Notification extends Component {
  sendEmail() {
    console.log("Sending email notification");
  }

  sendSMS() {
    console.log("Sending SMS notification");
  }

  sendPush() {
    console.log("Sending push notification");
  }

  render() {
    return (
      <div>
        <h1>Notification Component</h1>
        <button onClick={() => this.sendEmail()}>Send Email</button>
        <button onClick={() => this.sendSMS()}>Send SMS</button>
        <button onClick={() => this.sendPush()}>Send Push</button>
      </div>
    );
  }
}

// Define a component that only needs to send emails and implements the EmailNotification interface.
class EmailSender extends Component {
  sendEmail() {
    console.log("Sending email notification");
  }

  render() {
    return (
      <div>
        <h1>Email Sender Component</h1>
        <button onClick={() => this.sendEmail()}>Send Email</button>
      </div>
    );
  }
}
Object.assign(EmailSender.prototype, EmailNotification);

// Define a component that only needs to send SMS notifications and implements the SMSNotification interface.
class SMSSender extends Component {
  sendSMS() {
    console.log("Sending SMS notification");
  }

  render() {
    return (
      <div>
        <h1>SMS Sender Component</h1>
        <button onClick={() => this.sendSMS()}>Send SMS</button>
      </div>
    );
  }
}
Object.assign(SMSSender.prototype, SMSNotification);

// Define a component that only needs to send push notifications and implements the PushNotification interface.
class PushSender extends Component {
  sendPush() {
    console.log("Sending push notification");
  }

  render() {
    return (
      <div>
        <h1>Push Sender Component</h1>
        <button onClick={() => this.sendPush()}>Send Push</button>
      </div>
    );
  }
}
Object.assign(PushSender.prototype, PushNotification);
```

And the code as functional component

```js
import React from "react";

// Define the three separate interfaces as empty objects.
const EmailNotification = {};
const SMSNotification = {};
const PushNotification = {};

// Define the Notification component that implements all three interfaces.
function Notification() {
  function sendEmail() {
    console.log("Sending email notification");
  }

  function sendSMS() {
    console.log("Sending SMS notification");
  }

  function sendPush() {
    console.log("Sending push notification");
  }

  return (
    <div>
      <h1>Notification Component</h1>
      <button onClick={() => sendEmail()}>Send Email</button>
      <button onClick={() => sendSMS()}>Send SMS</button>
      <button onClick={() => sendPush()}>Send Push</button>
    </div>
  );
}

// Define a component that only needs to send emails and implements the EmailNotification interface.
function EmailSender() {
  function sendEmail() {
    console.log("Sending email notification");
  }

  return (
    <div>
      <h1>Email Sender Component</h1>
      <button onClick={() => sendEmail()}>Send Email</button>
    </div>
  );
}
Object.assign(EmailSender.prototype, EmailNotification);

// Define a component that only needs to send SMS notifications and implements the SMSNotification interface.
function SMSSender() {
  function sendSMS() {
    console.log("Sending SMS notification");
  }

  return (
    <div>
      <h1>SMS Sender Component</h1>
      <button onClick={() => sendSMS()}>Send SMS</button>
    </div>
  );
}
Object.assign(SMSSender.prototype, SMSNotification);

// Define a component that only needs to send push notifications and implements the PushNotification interface.
function PushSender() {
  function sendPush() {
    console.log("Sending push notification");
  }

  return (
    <div>
      <h1>Push Sender Component</h1>
      <button onClick={() => sendPush()}>Send Push</button>
    </div>
  );
}
Object.assign(PushSender.prototype, PushNotification);
```

## Dependency Inversion Principle (DIP)

The DIP states that high-level modules should not depend on low-level modules, but both should depend on abstractions. In ReactJS, this means that components should not be tightly coupled to each other, but instead should be connected through an abstract interface. This makes the code more flexible and easier to modify.

**Example**: Consider a component called "UserList" that displays a list of users. Instead of tightly coupling this component to a specific data source, such as an API, we can create an abstract interface called "DataSource" and make "UserList" dependent on this interface. This way, we can swap out the data source for another implementation, such as a database, without affecting the "UserList" component.

```js
// High-level module
class UserList {
  constructor(dataSource) {
    this.dataSource = dataSource;
    this.users = this.dataSource.getUsers();
  }

  render() {
    return (
      <ul>
        {this.users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    );
  }
}

// Low-level module
class API {
  getUsers() {
    // get users from API
  }
}

// Low-level module
class Database {
  getUsers() {
    // get users from database
  }
}
```

And the code as functional component, where the UserList component depends on an abstract interface (dataSource), not on a concrete implementation of the low-level modules (API and Database). This allows the UserList component to be reused with different implementations of the data source without affecting its functionality.

```js
// High-level module
const UserList = ({ dataSource }) => {
  const users = dataSource.getUsers();

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

// Low-level module
const API = () => {
  const getUsers = () => {
    // get users from API
  };

  return { getUsers };
};

// Low-level module
const Database = () => {
  const getUsers = () => {
    // get users from database
  };

  return { getUsers };
};
```

In conclusion, following the SOLID principles in ReactJS can lead to better maintainable, scalable and easy to modify code. By adhering to these principles, you can ensure that your code is well-structured, making it easier for other developers to understand and work with.

### Thanks fro reading :)


solid principles in Reactjs


I am using Nestjs 13 with page , not the new App Dir , tailwindcss and mdx

### Nextjs

Next. js is a JavaScript framework that is built on top of React, a popular library for building user interfaces. This means that you can use React to build your app, and Next. js provides additional tools and features to make the process easier. One of the main benefits of Next.

### MDX :

MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast.

### TailwindCss

Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.

**And I am using some npm packages that help me in showing the data . these packages are :**

### gray-matter :

Parse front-matter from a string or file. in out case mdx file and formate it so we can get the frontMatter which is the part between --- --- , and the content which is the body of the post .

### rehype-highlight :

plugin to apply syntax highlighting to code with highlight.js. highlight.js is pretty fast, relatively small, and a quite good syntax highlighter which has support for up to 190 different languages.It looks for `<code></code>` elements (when directly in `<pre></pre>` elements) and changes them. You can specify the code language (such as JavaScript)

```js
<pre><code class="hljs language-js"><span class="hljs-comment">/** <span class="hljs-doctag">@type</span> {<span class="hljs-type">import('tailwindcss').Config</span>} */</span>
<span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
  <span class="hljs-attr">content</span>: [
    <span class="hljs-string">"./pages/**/*.{js,ts,jsx,tsx}"</span>,
    <span class="hljs-string">"./components/**/*.{js,ts,jsx,tsx}"</span>,
  ],
  <span class="hljs-attr">theme</span>: {
    <span class="hljs-attr">extend</span>: {},
  },
  <span class="hljs-attr">plugins</span>: [],
};
</code></pre>
```

### @tailwindcss/typography

The official Tailwind CSS Typography plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown

### tailwind-highlightjs

used after rehydrate the code block , to give it a style and colors depending on the theme that you will choose .

### next-mdx-remote

next-mdx-remote changes the entire pattern so that you load your MDX content not through an import, but rather through getStaticProps or getServerProps -- you know, the same way you would load any other data. The library provides the tools to serialize and hydrate the MDX content in a manner that is performant.

## Steps :

- install Nextjs 13 y :
  note that typescript and eslint are optionl but recomended, during the installation nextjs will give you some options like if you want to make app Dir ( answer yes) but I am not using it now , because it gives me many issues during deployment, ( answer no )

```js
npx create-next-app@latest my-blog --typescript --eslint
cd my-blog
```

- now install tailwind css

```js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

in **tailwind.config.js** edite the configuraiotn

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

in **app/globals.css** remove everything and add :

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Run nextjs app by the command:

```
npm run dev
```

Lets add some dummy mdx files in a new folder called **content** you can use the one in my project on github. I just add another folder in content called blog , in case you want to use your blog to show you projects for example , then you just add another folder with name projects and use it in the same way that we will continue with .

now lets fetch these files and react it , in pages make a new directory with name blog and in it make a new file index.js where we will show some posts .

Fetching out data will be using getStaticProps , note that using fs and path will be only possible in this function which conseder backend or server side function , and use it ( fs, path) is not possible in the frontend , I wil sort the results by date using sort funtion .

```js
import path from "path";
import fs from "fs";
import matter from "gray-matter";

export async function getStaticProps() {
  const postsFiles = fs.readdirSync(path.join(`content/blog`));
  const posts = postsFiles.map((fileName) => {
    const postsMarkdownWithMeta = fs.readFileSync(
      path.join(`content/blog`, fileName),
      "utf-8"
    );
    const slug = fileName.split(".")[0];
    const { data: frontMatter, content } = matter(postsMarkdownWithMeta);
    return {
      slug,
      frontMatter,
      content,
    };
  });

  return {
    props: {
      posts: posts.sort((a, b) => {
        return (
          Number(new Date(b.publishedAt)) - Number(new Date(a.publishedAt))
        );
      }),
    },
  };
}
```

Lets add the posts that we got to the frontend function Post , and use tailwind to add some style.

```js
import Link from "next/link";
import Image from "next/image";

export default function Blog({ posts }) {
  return (
    <div className="flex flex-col justify-center items-center max-w-3/4 mt-[60px] ">
      <h1 className="text-3xl font-medLarg text-primary text-center my-3 underline text-shadow-md ">
        Latest Blog Articles
      </h1>
      <div className="my-4 w-full">
        {posts.map((post) => {
          return (
            <Link
              href={`/blog/${post.slug}`}
              key={post.frontMatter.slug}
              className="flex flex-col justify-center items-center my-1 md:w-3/4 md:mx-auto"
            >
              <div className="bg-gray-50  m-1 px-3 py-2 rounded-lg shadow-md w-full hover:bg-gray-200">
                <span className="font-bold text-xl font-medLarg hover:underline mb-3 capitalize md:text-2xl">
                  {post.frontMatter.title}
                </span>
                <br />
                <span className=" text-md mb-3 capitalize md:text-2xl">
                  {post.frontMatter.excerpt}
                </span>
                <div className="flex  mt-2 gap-1 items-center">
                  <span className="rounded-lg bg-red-200 px-2 py-1 font-medLarg">
                    {post.frontMatter.publishedAt}
                  </span>
                  <div className="flex">
                    {post.frontMatter.tages.map((tag, index) => {
                      return (
                        <span
                          key={`post-tags-item-${index}`}
                          className="rounded-lg bg-gray-400 m-1 px-2 py-1 text-white"
                        >
                          {tag}
                        </span>
                      );
                    })}
                  </div>
                </div>
              </div>
            </Link>
          );
        })}
      </div>
    </div>
  );
}
```

you can see that if you click on the post , it will lead you to the post details , so we need to make the paths for all the posts that you have , because Nextjs will generate it on build time , and I will use the slug of the post ( which is in simple words the title with - between its words )

- Make a new dir in the blog dir with name [slug] , note that this name is important , because it need to match the slug that we generate , so if you want to name it project for example , then you need to change the name of the path to projct instead of slug .

now in the [slug] dir make a new file index.js , and add in it:

```js
import rehypeHighlight from "rehype-highlight";
import path from "path";
import fs from "fs";
import matter from "gray-matter";
import { MDXRemote } from "next-mdx-remote";
import { serialize } from "next-mdx-remote/serialize";

export default function BlogItem({ mdxContent, frontMatter }) {
  return (
    <div className="flex justify-center mx-auto items-center flex-col my-4  p-2 w-full px-2 overflow-hidden">
      <div className="h-48 bg-[#4a91cf] rounded-lg flex justify-center items-center flex-col px-4 py-2 shadow-md my-7 w-full">
        <h1 className="font-medLarg text-3xl font-serif text-gray-100 mt-2">
          {frontMatter.title}
        </h1>
        <div className="grid grid-cols-[auto_1fr_auto] items-center mt-4 mb-8 font-mono text-sm text-gray-900">
          <div className="bg-neutral-100 dark:bg-neutral-800 rounded-md px-2 py-1 tracking-tighter">
            {frontMatter.publishedAt}
          </div>
        </div>
      </div>

      <article className="prose prose-stone prose-headings:capitalize prose-a:text-blue-600 w-full px-3">
        <MDXRemote {...mdxContent} />
      </article>
    </div>
  );
}

export async function getStaticPaths() {
  const files = fs.readdirSync(path.join("content/blog"));
  const paths = files.map((fileName) => ({
    params: { slug: fileName.replace(".mdx", "") },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params: { slug } }) {
  const markdownWithMeta = fs.readFileSync(
    path.join("content/blog", slug + ".mdx"),
    "utf-8"
  );
  const { data: frontMatter, content } = matter(markdownWithMeta);
  const mdxContent = await serialize(content, {
    mdxOptions: {
      rehypePlugins: [
        [
          rehypeHighlight,
          {
            ignoreMissing: true,
          },
        ],
      ],
    },
  });
  return {
    props: {
      frontMatter,
      mdxContent,
    },
  };
}
```

everything is ready , we just need to syle the code block using tailwind typography and highlight , so in `tailwind.config.js` modify the code, note that I am using an adaptive fontWeight and this is optional .

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  safelist: [
    {
      pattern: /hljs+/,
    },
  ],
  theme: {
    fontWeight: {
      veryLarg: "900",
      medLarg: "700",
    },
    hljs: {
      theme: "stackoverflow-dark",
    },
    extend: {},
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("tailwind-highlightjs"),
  ],
};
```

Finaly I will just update the index.js in the page dir , by adding nav so we can navigate between the home page and the blog

```js
<nav className="w-2/3 mx-auto bg-gray-900 text-gray-100 flex justify-between ">
  <Link href={"/"}></Link>
  <Link href={"/blog"}></Link>
</nav>
```

Thanks for reading :)

<footer className="bg-gray-900 text-gray-100">
  <a
    href="https://github.com/aalhommada/nextjs-tailwindcss-mdx-blog"
    target="_blank"
  >
    Github repository for the blog code
  </a>
</footer>
