DEV Community: Srijan Karki

How to Install and Use NVM Globally on Your System

Srijan Karki — Thu, 06 Mar 2025 13:06:46 +0000

Node Version Manager (NVM) allows you to install and manage multiple versions of Node.js on your system. Since NVM is installed globally, it does not depend on a specific project folder, making it easier to switch between Node.js versions across different projects.

Steps to Install and Use NVM

1️⃣ Open Your Terminal

Depending on your operating system, open the appropriate terminal:

Windows: Open Git Bash, Command Prompt, or PowerShell (if using nvm-windows, use Command Prompt instead).
Mac: Open Terminal.
Linux: Open a terminal window.

2️⃣ Run the Installation Commands

Run the following commands one by one to install NVM:

curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
source ~/.bashrc  # If using Bash shell
source ~/.zshrc   # If using Zsh shell (Mac users)

These commands will install NVM and make it available in your terminal.

3️⃣ Install and Use Node.js 20

Once NVM is installed, you can install Node.js version 20:

nvm install 20
nvm use 20

To make Node.js 20 the default version for all new terminal sessions, run:

nvm alias default 20

4️⃣ Verify the Installation

To check if Node.js 20 is active, run:

node -v

It should output something like:

v20.x.x

5️⃣ Reinstall Dependencies in Your Project

If you are working on a specific project (e.g., admin-panel), navigate to the project folder and reinstall dependencies:

cd "D:\Documents\company projects\admin-panel"
rm -rf node_modules package-lock.json pnpm-lock.yaml .next
pnpm install
pnpm dev

This should resolve any version-related issues.

Troubleshooting: Missing `.bashrc` File

If you encounter the error:

bash: /c/Users/Shishir/.bashrc: No such file or directory

Try the following solutions:

1️⃣ Use `.bash_profile` or `.zshrc`

If .bashrc is missing, try:

source ~/.bash_profile  # For Bash users
source ~/.zshrc         # For Zsh users (Mac/Linux)

2️⃣ Manually Create `.bashrc` (For Windows Git Bash)

If the issue persists, manually create the .bashrc file:

touch ~/.bashrc
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.bashrc
source ~/.bashrc

Then try installing and using Node.js again:

nvm install 20
nvm use 20

3️⃣ Restart Your Terminal

If none of the above steps work, close and reopen your terminal, then run:

nvm install 20
nvm use 20

Conclusion

By following these steps, you can successfully install and manage Node.js versions using NVM. This method ensures you have flexibility across different projects without interfering with system-wide installations. If you face any issues, feel free to restart your terminal or reinstall NVM.

🚀 Happy coding!

Master Date Input Control: Disabling Past Dates in HTML Forms

Srijan Karki — Fri, 06 Sep 2024 03:45:13 +0000

When working with forms that require users to select a date, you often need to prevent them from choosing past dates—especially for scenarios like booking appointments or making reservations. This is a common requirement in many applications, and luckily, HTML and JavaScript provide a simple way to handle this.

The HTML Date Input

The <input> element with type="date" allows users to pick a date easily. However, by default, the user can select any date, including past ones. To restrict users from selecting a date before the current day, you can use the min attribute in conjunction with JavaScript.

Example HTML Date Input

Here’s an example of a simple date input:

<input type="date" id="reservationDate" name="reservationDate" />

Disabling Past Dates

To prevent users from selecting a past date, you need to set the min attribute of the <input type="date"> field. The min attribute specifies the minimum date that can be selected.

You can dynamically set the current date using JavaScript’s Date object, format it to the required YYYY-MM-DD format, and apply it to the min attribute.

Implementation in React

For React users, here’s how you can integrate this into a TextField component:

import { TextField } from "@mui/material";
import { Field } from "formik";

const ReservationDateField = ({ touched, errors }) => {
  return (
    <Field
      as={TextField}
      label="Reservation Date"
      type="date"
      name="reservationDate"
      fullWidth
      margin="normal"
      InputLabelProps={{ shrink: true }}
      InputProps={{
        inputProps: {
          min: new Date().toISOString().split("T")[0], // Disable past dates
        },
      }}
      error={touched.reservationDate && Boolean(errors.reservationDate)}
      helperText={touched.reservationDate && errors.reservationDate}
    />
  );
};

Breakdown:

Date Formatting: new Date().toISOString().split("T")[0] gives today’s date in YYYY-MM-DD format, which is required for the min attribute.
min Attribute: This ensures users can only select dates from today onwards.

Why is This Important?

Restricting past dates is essential in forms that manage future events like:

Booking appointments.
Scheduling deliveries.
Setting future reminders.

It improves user experience by preventing invalid date selections and reduces the likelihood of user error.

Conclusion

Disabling past dates is a simple yet powerful way to improve your forms. Whether you’re a beginner or an experienced developer, applying this technique ensures your users don’t accidentally select incorrect dates. This small step can make a big difference in your application's usability.

Git Cheat Sheet: Essential Commands for Version Control

Srijan Karki — Tue, 13 Aug 2024 04:52:35 +0000

Git is a powerful version control system that allows developers to track changes, collaborate on projects, and manage their code efficiently. This cheat sheet provides a quick reference to the most commonly used Git commands, helping you navigate through your version control tasks with ease.

Getting Started

Create a New Repository

To start a new project with Git, you can initialize a new repository:

$ git init [project name]

If you want to clone an existing repository, use:

$ git clone git_url

To clone a repository into a specified directory:

$ git clone git_url my_directory

Making Changes

Check Status

To see which files have been modified and staged for your next commit:

$ git status

Stage Changes

To stage a specific file:

$ git add [file]

To stage all changed files:

$ git add .

Commit Changes

To commit all staged files with a message:

$ git commit -m "commit message"

To commit all tracked files (including those that are not staged) with a message:

$ git commit -am "commit message"

Discard Changes

If you want to discard changes in your working directory that are not staged:

$ git restore [file]

To unstage a staged file:

$ git restore --staged [file]

To unstage a file but keep the changes:

$ git reset [file]

Revert Changes

To revert everything to the last commit:

$ git reset --hard

View Differences

To see the differences between your working directory and the last commit:

$ git diff

To see the differences between staged changes and what is yet to be committed:

$ git diff --staged

Rebase

To apply any commits of the current branch ahead of a specified one:

$ git rebase [branch]

Configuration

Set User Information

To set the name that will be attached to your commits and tags:

$ git config --global user.name "name"

To set an email address for your commits:

$ git config --global user.email "email"

Customize Git Output

To enable colorization of Git output:

$ git config --global color.ui auto

To edit the global configuration file in a text editor:

$ git config --global --edit

Working with Branches

List Branches

To list all local branches:

$ git branch

To list all branches, both local and remote:

$ git branch -av

Switch Branches

To switch to a specific branch:

$ git checkout my_branch

To create and switch to a new branch:

$ git checkout -b new_branch

Delete a Branch

To delete a branch:

$ git branch -d my_branch

Merge Branches

To merge branchA into branchB:

$ git checkout branchB
$ git merge branchA

Tagging

To tag the current commit:

$ git tag my_tag

Observing Your Repository

View Commit History

To show the commit history for the currently active branch:

$ git log

To see the commits on branchA that are not on branchB:

$ git log branchB..branchA

File-Specific Logs

To show the commits that changed a specific file, even across renames:

$ git log --follow [file]

Compare Branches

To see the differences between branchA and branchB:

$ git diff branchB...branchA

Show an Object in Human-Readable Format

To display any object in Git in a human-readable format:

$ git show [SHA]

Synchronize

Fetch Changes

To fetch all branches from a remote repository:

$ git fetch [alias]

Merge Changes

To merge a remote branch into your current branch:

$ git merge [alias]/[branch]

No Fast-Forward

To prevent fast-forwarding during the merge:

$ git merge --no-ff [alias]/[branch]

Only Fast-Forward

To allow only fast-forward merges:

$ git merge --ff-only [alias]/[branch]

Push Changes

To push local branch commits to a remote repository:

$ git push [alias] [branch]

Pull Changes

To fetch and merge any commits from the remote branch you're tracking:

$ git pull

Cherry-Pick Commits

To merge just one specific commit from another branch:

$ git cherry-pick [commit_id]

Working with Remotes

Manage Remotes

To add a remote repository URL as an alias:

$ git remote add [alias] [url]

To show the names of the remote repositories you've set up:

$ git remote

To show the names and URLs of the remote repositories:

$ git remote -v

To remove a remote repository:

$ git remote rm [remote repo name]

Change Remote URL

To change the URL of the remote repository:

$ git remote set-url origin [git_url]

Temporary Commits

Stash Changes

To save modified and staged changes temporarily:

$ git stash

To list stashed changes:

$ git stash list

To apply changes from the top of the stash stack:

$ git stash pop

To discard changes from the top of the stash stack:

$ git stash drop

Tracking Path Changes

Remove Files

To delete a file from the project and stage the removal:

$ git rm [file]

Move Files

To change an existing file path and stage the move:

$ git mv [existing-path] [new-path]

View File History

To show all commit logs with an indication of any paths that moved:

$ git log --stat -M

Ignoring Files

A .gitignore file specifies intentionally untracked files that Git should ignore. Here are some examples:

/logs/*
!logs/.gitkeep
.DS_store
node_modules
.sass-cache

Git Tricks

Rename Branch

To rename the current branch:

$ git branch -m <new_name>

Push and Reset

To push and set the upstream branch:

$ git push origin -u <new_name>

Delete Remote Branch

To delete a remote branch:

$ git push origin --delete <old>

View Logs

To search for a change by content:

$ git log -S'<a term in the source>'

To show changes over time for a specific file:

$ git log -p <file_name>

To print out a visualization of your log:

$ git log --pretty=oneline --graph --decorate --all

Branch Management

To list all branches and their upstreams:

$ git branch -vv

To quickly switch to the previous branch:

$ git checkout -

To get only remote branches:

$ git branch -r

To checkout a single file from another branch:

$ git checkout <branch> -- <file>

Rewriting History

Rewrite Last Commit Message

To rewrite the last commit message:

$ git commit --amend -m "new message"

Git Aliases

To create shortcuts for commonly used Git commands:

git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.st status

Conclusion

Git is an incredibly versatile tool for version control, offering numerous commands to manage your project's history, collaborate with others, and ensure your code is always in a good state. Keep this cheat sheet handy as a quick reference to streamline your Git workflow.

A Step-by-Step Guide to LocalStorage and SessionStorage: Storing Data on the Client Side

Srijan Karki — Mon, 12 Aug 2024 03:25:04 +0000

Introduction to Web Storage

Web storage is a powerful feature in modern browsers that allows you to store data directly on the client side. This data can be retained even after the browser is closed (using LocalStorage) or only during the session (using SessionStorage). These tools are invaluable for storing user preferences, shopping cart data, and other types of information that enhance user experience.

Differences Between LocalStorage and SessionStorage

Understanding the difference between LocalStorage and SessionStorage is key to using them effectively:

LocalStorage:
- Data persists even after the browser is closed.
- It can be used to store long-term data, such as user preferences or tokens.
- The stored data has no expiration time and remains available until explicitly deleted.
SessionStorage:
- Data is only available during the session (i.e., as long as the tab or browser window is open).
- Once the session ends (the tab is closed), the data is automatically cleared.
- It's useful for temporary data, like session-specific user interactions or selections.

Storing, Retrieving, and Removing Data

Using LocalStorage and SessionStorage is straightforward. Below are examples demonstrating how to store, retrieve, and remove data.

// Storing data
localStorage.setItem('username', 'john_doe');
sessionStorage.setItem('sessionID', '123456');

// Retrieving data
const username = localStorage.getItem('username');
const sessionID = sessionStorage.getItem('sessionID');

// Removing data
localStorage.removeItem('username');
sessionStorage.removeItem('sessionID');

// Clearing all data
localStorage.clear();
sessionStorage.clear();

Real-World Example: Saving User Preferences

To put these concepts into practice, let's create a simple web application that allows users to select and save their preferred theme (light or dark). This preference will be stored using LocalStorage so that it persists even after the browser is closed.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Theme Selector</title>
  <style>
    body.light {
      background-color: white;
      color: black;
    }
    body.dark {
      background-color: black;
      color: white;
    }
  </style>
</head>
<body>
  <h1>Theme Selector</h1>
  <button id="light">Light Theme</button>
  <button id="dark">Dark Theme</button>

  <script>
    const lightButton = document.getElementById('light');
    const darkButton = document.getElementById('dark');

    // Event listeners for theme selection
    lightButton.addEventListener('click', () => {
      document.body.className = 'light';
      localStorage.setItem('theme', 'light');
    });

    darkButton.addEventListener('click', () => {
      document.body.className = 'dark';
      localStorage.setItem('theme', 'dark');
    });

    // Load saved theme on page load
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      document.body.className = savedTheme;
    }
  </script>
</body>
</html>

Explanation:

Theme Selection: The user can select between a light or dark theme by clicking the respective buttons.
Storing Preferences: When a theme is selected, it is stored in LocalStorage under the key 'theme'.
Loading Preferences: When the page loads, the script checks LocalStorage for any saved theme and applies it automatically.

Why Use Web Storage?

Web storage provides a simple and efficient way to enhance the user experience. By storing preferences, sessions, or other necessary data on the client side, you can create more personalized, responsive, and seamless web applications. Understanding and utilizing LocalStorage and SessionStorage will help you build smarter applications that cater to user needs without relying heavily on server-side storage.

Conclusion

LocalStorage and SessionStorage are essential tools for any web developer. They allow you to store data directly in the browser, offering flexibility in how and when that data is available. Whether you need to persist user preferences or maintain session-specific information, web storage gives you the power to do so with minimal effort. By mastering these tools, you can greatly enhance the functionality and user experience of your web applications.

DOM Manipulation: Selecting and Manipulating DOM Elements

Srijan Karki — Fri, 09 Aug 2024 03:50:30 +0000

Introduction to the DOM

The Document Object Model (DOM) is a crucial concept for web development. It serves as a programming interface that allows developers to interact with and modify the structure, style, and content of a web page. When a web page is loaded in the browser, the HTML document is converted into the DOM, a tree-like structure where each node represents an element, attribute, or text. This structure enables developers to access and manipulate parts of the page dynamically, making the web experience more interactive and engaging.

For beginners and those unfamiliar with the DOM, think of it as the blueprint of a house. Just as you can rearrange furniture or paint walls in a house, the DOM lets you change the content and style of a web page after it has loaded.

Selecting Elements

Before you can manipulate the DOM, you need to select the elements you wish to work with. JavaScript provides several methods for selecting elements, allowing you to interact with different parts of the web page. Here's a look at some common methods:

1. Selecting an Element by ID

The getElementById method is one of the most straightforward ways to select a single element. It returns the element that matches the specified ID.

// Selecting an element by ID
const heading = document.getElementById('heading');

In this example, heading will now reference the element with the ID of heading. You can use this reference to manipulate the element further.

2. Selecting Elements by Class Name

To select multiple elements with the same class, you can use the getElementsByClassName method. This method returns a live HTMLCollection of elements.

// Selecting elements by class name
const items = document.getElementsByClassName('item');

The items variable will now hold a collection of all elements with the class name item. This method is particularly useful when you need to apply the same action to multiple elements.

3. Selecting Elements Using a CSS Selector

The querySelector and querySelectorAll methods allow you to select elements using CSS selectors. These methods are versatile and can be used to target elements by tag name, class, ID, or any other valid CSS selector.

// Selecting a single element using a CSS selector
const button = document.querySelector('button');

// Selecting multiple elements using a CSS selector
const listItems = document.querySelectorAll('li');

querySelector selects the first element that matches the selector, while querySelectorAll selects all matching elements and returns a NodeList, which is similar to an array.

Manipulating Elements

Once you've selected an element, you can manipulate it to change its content, attributes, and styles. This allows you to create dynamic web pages that respond to user interactions or other events.

1. Changing Text Content

The textContent property allows you to change the text within an element. This is useful for updating the content dynamically based on user input or other conditions.

// Changing text content
heading.textContent = 'Hello, World!';

In this example, the text inside the element referenced by heading will be updated to "Hello, World!".

2. Changing an Attribute

The setAttribute method allows you to modify an element's attributes, such as src, href, alt, or disabled.

// Changing an attribute
button.setAttribute('disabled', true);

Here, the button is disabled by setting the disabled attribute to true. This can be used to prevent user interaction until a certain condition is met.

3. Changing Styles

The style property allows you to modify the inline CSS styles of an element. You can change properties like color, backgroundColor, fontSize, and more.

// Changing styles
heading.style.color = 'blue';

In this example, the color of the text within the heading element is changed to blue.

Creating and Removing Elements

In addition to modifying existing elements, you can create new elements and add them to the DOM, or remove elements that are no longer needed.

1. Creating a New Element

You can create a new element using the createElement method. Once created, you can set its properties and append it to an existing element in the DOM.

// Creating a new element
const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph.';
document.body.appendChild(newElement);

In this example, a new <p> element is created, its text content is set, and it is added to the end of the <body> element.

2. Removing an Element

To remove an element from the DOM, you can use the remove method. This is particularly useful for dynamically managing the content on your page.

// Removing an element
const oldElement = document.getElementById('old-element');
oldElement.remove();

Here, the element with the ID old-element is removed from the DOM, effectively deleting it from the web page.

Real-World Example: To-Do List

To see these concepts in action, let's build a simple To-Do List application. This example will demonstrate how to select and manipulate DOM elements in a real-world scenario.

HTML Structure

First, let's create the HTML structure for our To-Do List.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-Do List</title>
</head>
<body>
  <h1 id="heading">To-Do List</h1>
  <ul id="todo-list"></ul>
  <input type="text" id="new-todo" placeholder="New to-do">
  <button id="add-todo">Add To-Do</button>
</body>
</html>

In this structure:

We have a heading (<h1>) with an ID of heading.
An unordered list (<ul>) with an ID of todo-list, where our to-do items will be displayed.
An input field for adding new to-do items, with an ID of new-todo.
A button with an ID of add-todo to add new items to the list.

JavaScript for Interactivity

Next, we'll add some JavaScript to make the To-Do List interactive.

<script>
  // Selecting elements
  const todoList = document.getElementById('todo-list');
  const newTodoInput = document.getElementById('new-todo');
  const addTodoButton = document.getElementById('add-todo');

  // Adding a new to-do item
  addTodoButton.addEventListener('click', () => {
    const newTodoText = newTodoInput.value;
    if (newTodoText === '') return; // Prevent adding empty to-do items

    // Create a new list item
    const newTodoItem = document.createElement('li');
    newTodoItem.textContent = newTodoText;

    // Append the new item to the list
    todoList.appendChild(newTodoItem);

    // Clear the input field
    newTodoInput.value = '';
  });
</script>

Explanation:

Selecting Elements: We begin by selecting the necessary elements using their IDs.
Event Listener: We add a click event listener to the "Add To-Do" button. When clicked, the event listener function is triggered.
Input Validation: Inside the function, we first check if the input field is empty to prevent adding empty to-do items.
Creating a New Element: If the input is not empty, we create a new <li> element and set its text content to the value entered in the input field.
Appending the New Item: The new <li> is then appended to the existing <ul> element.
Clearing the Input Field: Finally, the input field is cleared, ready for the next to-do item.

This simple application demonstrates the power of DOM manipulation in creating interactive and dynamic web pages.

Conclusion

DOM manipulation is a fundamental skill for any web developer. By understanding how to select and manipulate DOM elements, you can create web pages that are not only static but also responsive to user interactions. The examples provided in this article serve as a foundation for more advanced topics, such as event handling, animations, and dynamic content loading.

By practicing these techniques and applying them to real-world scenarios, you'll gain a deeper understanding of how the web works and be well on your way to mastering front-end development.

Understanding State Management in Web Development: A Beginner's Guide

Srijan Karki — Wed, 31 Jul 2024 04:28:25 +0000

As a budding web developer, you might have heard the term "state management" thrown around quite often. It may sound complex, but understanding state management is crucial for building robust, dynamic web applications. This article will guide you through what state management is, why it's necessary, and how it helps make your code better and more dynamic. We'll also explore some common methods for state management and their purposes.

What is State Management?

State management refers to the way an application handles and updates its state over time. The state represents the data or the status of various elements in your application at any given moment. In a simple counter app, the state could be the current count value. In more complex applications, the state might include user information, the status of network requests, form inputs, and much more.

Why is State Management Necessary?

State management is essential for several reasons:

Consistency: Ensures that all parts of the application display the correct and synchronized data.
Scalability: Helps manage complexity as the application grows.
Separation of Concerns: Decouples the state logic from the UI, making the codebase more maintainable and easier to understand.
Performance Optimization: Efficient state management can reduce unnecessary re-renders and improve performance.
Debugging: Provides tools and methodologies for better tracking and debugging state changes.
User Experience: Enhances the user experience by ensuring that the UI accurately reflects the current state and responds appropriately to user interactions.

How State Management Improves Your Code

Better Organization: By managing state effectively, you keep your code organized and modular, which makes it easier to maintain and scale.
Predictable Behavior: State management libraries and tools enforce predictable patterns, making your application's behavior more reliable and easier to debug.
Enhanced Performance: Proper state management can lead to performance optimizations by minimizing re-renders and efficiently handling data fetching and synchronization.
Improved Developer Experience: With the right state management tools, developers can enjoy a smoother development process with features like hot reloading, time-travel debugging, and more.

Common Methods for State Management

Let's explore some common state management methods and their purposes:

Local State Management

Methods:

React useState Hook: Manages local state within a functional component.
```
 const [count, setCount] = useState(0);
```

Class Component State: Manages state within a class component in React.

 class MyComponent extends React.Component {
   state = { count: 0 };
 }

Purpose:

Suitable for simple, component-specific state.
Easy to implement and understand.

2.Lifting State Up

Methods:

Passing State via Props: Move the state to a common ancestor and pass it down via props.

 const ParentComponent = () => {
   const [value, setValue] = useState('');
   return <ChildComponent value={value} setValue={setValue} />;
 };

Purpose:

Facilitates state sharing between parent and child components.
Reduces duplication of state.

3.Context API

Methods:

React Context API: Provides a way to share state across the component tree without prop drilling.

 const MyContext = React.createContext();
 const App = () => {
   const [state, setState] = useState('value');
   return (
     <MyContext.Provider value={state}>
       <MyComponent />
     </MyContext.Provider>
   );
 };

Purpose:

Suitable for state that needs to be accessed globally within the component tree.
Reduces prop drilling.

4.State Management Libraries

Methods:

Redux: A predictable state container for JavaScript apps.

 const store = createStore(reducer);
 const App = () => (
   <Provider store={store}>
     <MyComponent />
   </Provider>
 );

MobX: A library for reactive state management.
Zustand: A small, fast, and scalable state-management solution.

Purpose:

Manages complex state and logic.
Offers powerful tools for debugging, middleware, and time-travel debugging.
Scales well for larger applications.

5.Server State Management

Methods:

React Query: A library for managing server state with data fetching, caching, synchronization, and more.
```
 const { data, error, isLoading } = useQuery('todos', fetchTodos);
```
Apollo Client: A comprehensive state management library for managing both local and remote data with GraphQL.
```
 const { loading, error, data } = useQuery(GET_TODOS);
```

Purpose:

Efficiently handles data fetching and synchronization with the server.
Reduces boilerplate code for managing server requests and responses.
Provides caching and background synchronization.

6.Local Storage and IndexedDB

Methods:

Local Storage: Stores data in the browser, persistent across sessions.

 localStorage.setItem('key', 'value');
 const value = localStorage.getItem('key');

IndexedDB: A low-level API for storing large amounts of structured data.
```
 const dbRequest = indexedDB.open('myDatabase');
```

Purpose:

Persists state across browser sessions.
Suitable for offline capabilities.

Conclusion

State management is a cornerstone of modern web development. It ensures your application remains consistent, scalable, and performant, enhancing both the developer and user experience. By understanding and implementing the appropriate state management techniques, you can build robust and dynamic applications that stand the test of time. Whether you're using local state management, lifting state, the Context API, state management libraries, server state management, or local storage, each method serves a unique purpose and is tailored to specific needs. Embrace these techniques, and you'll be well on your way to becoming a proficient web developer.

Unlocking the Power of useRef: A Comprehensive Guide for React Developers

Srijan Karki — Tue, 30 Jul 2024 03:44:07 +0000

Unfortunately, useRef is underrated. It is not among the most popular hooks, but it is beneficial. Knowing how and where to use it can achieve great results.

Let’s Start with the Basics

useRef is a React Hook that lets you reference a value not needed for rendering.

React will remember the value you create through useRef, whether you are making a JavaScript object referencing a node in the DOM or a simple value, and it will not be lost during re-renders.

What Does it Give Us?

Accessing DOM Elements:
- You can easily reach elements in the DOM. For example, you can get an input field’s value, focus on specific elements, get their height and width, scroll to a particular part of the screen, and more.
Storing Mutable Values:
- You can remember any data you need without re-rendering components. For example, if you need a counter or a timer, choose useRef over useState.

Examples

Here are some examples to illustrate the power of useRef.

Example 1: Reference to a Number

import React, { useRef } from 'react';

const Counter = () => {
  const refCount = useRef(0);
  const refInputField = useRef(null);

  const onClick = () => {
    refCount.current = refCount.current + 1;
    refInputField.current.focus();
  }

  return (
    <>
      <button onClick={onClick}>
        Click me!
      </button>
      <input ref={refInputField} />
    </>
  );
};

export default Counter;

In this example:

refCount is a mutable reference to a number.
refInputField is a reference to an input element.
When the button is clicked, the counter increments, and the input field gains focus.

Example 2: Keeping Track of Previous Values

Another common use case for useRef is keeping track of previous values.

import React, { useRef, useEffect, useState } from 'react';

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    <div>
      <h1>Current Count: {count}</h1>
      <h2>Previous Count: {prevCountRef.current}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default PreviousValue;

In this example:

prevCountRef keeps track of the previous value of count.
The useEffect hook updates prevCountRef.current whenever count changes.
This allows you to display both the current and previous counts without triggering unnecessary re-renders.

Advanced Tips and Tricks with useRef

1. Persisting Values Across Renders

useRef can be used to persist values across renders without causing a re-render, unlike useState. This is particularly useful for storing values that don't directly impact the UI but need to be remembered.

Example: Tracking the render count of a component.

import React, { useRef, useEffect } from 'react';

const RenderCounter = () => {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current += 1;
  });

  return (
    <div>
      <p>This component has rendered {renderCount.current} times</p>
    </div>
  );
};

export default RenderCounter;

2. Integrating with Third-Party Libraries

useRef is invaluable when working with third-party libraries that require direct manipulation of DOM elements, such as integrating with charting libraries, managing video players, or handling animations.

Example: Integrating a chart library.

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81],
        }],
      },
    });
  }, []);

  return <canvas ref={chartRef}></canvas>;
};

export default ChartComponent;

3. Avoiding Unnecessary Re-Renders in Complex Applications

In complex applications where performance is critical, using useRef to store mutable objects can help avoid unnecessary re-renders.

Example: Storing a mutable state object.

import React, { useRef } from 'react';

const MutableState = () => {
  const state = useRef({
    name: 'John Doe',
    age: 30,
  });

  const updateName = (newName) => {
    state.current.name = newName;
    console.log('Name updated:', state.current.name);
  };

  return (
    <div>
      <button onClick={() => updateName('Jane Doe')}>
        Update Name
      </button>
    </div>
  );
};

export default MutableState;

4. Avoiding Closure Issues

Using useRef can help avoid closure issues by providing a stable reference to a value that persists across renders.

Example: Timer with useRef to avoid stale state.

import React, { useRef, useState, useEffect } from 'react';

const Timer = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(countRef.current + 1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return <div>Count: {count}</div>;
};

export default Timer;

Conclusion

Hooks are great, and you should use them. You can achieve a lot if you understand how React works and apply hooks correctly. useRef is particularly powerful for:

Accessing and manipulating DOM elements.
Storing mutable values that do not trigger re-renders.
Persisting values across renders.
Integrating with third-party libraries.
Avoiding unnecessary re-renders in complex applications.
Mitigating closure issues.

By understanding and utilizing useRef, you can write more efficient and effective React components. The true power of hooks lies in understanding their behavior and applying them judiciously.

Do you know, useState is not always the correct answer?

The Proper Use of useEffect in React: A Comprehensive Guide

Srijan Karki — Mon, 29 Jul 2024 03:35:04 +0000

In the realm of React development, the useEffect hook is a powerful tool introduced in React 16.8. It allows functional components to perform side effects, providing a way to synchronize a component with an external system. However, due to the initial hype and the lack of comprehensive documentation when hooks were first released, many developers have misused useEffect, leading to suboptimal and sometimes problematic code. This article aims to clarify when and how to use useEffect effectively, with practical examples to aid understanding.

Understanding `useEffect`

The official React documentation defines useEffect as a hook that lets you "synchronize a component with an external system." This means it is designed to manage side effects such as fetching data, setting up subscriptions, and manually changing the DOM in React components.

However, in practice, developers often overuse useEffect, applying it in scenarios where it is not needed. This can result in unnecessarily complex code and potential performance issues.

When Not to Use `useEffect`

Before diving into examples, let's outline some common scenarios where useEffect is frequently misused:

Handling User Events (Clicks, Input Changes, etc.):
- Incorrect Approach: Using useEffect to handle user interactions.
- Correct Approach: Directly use event handlers.

   // Incorrect
   useEffect(() => {
     const handleClick = () => {
       // logic
     };
     document.addEventListener('click', handleClick);
     return () => {
       document.removeEventListener('click', handleClick);
     };
   }, []);

   // Correct
   const handleClick = () => {
     // logic
   };
   <button onClick={handleClick}>Click Me</button>

In the incorrect approach, we use useEffect to add an event listener for clicks, which is unnecessary. Instead, we can directly attach the event handler to the button.

2.Transforming Data for Rendering:

Incorrect Approach: Using useEffect to transform data before rendering.
Correct Approach: Perform transformations directly in the render method or return statement.

   // Incorrect
   useEffect(() => {
     const transformedData = data.map(item => item * 2);
     setTransformedData(transformedData);
   }, [data]);

   // Correct
   const transformedData = data.map(item => item * 2);
   return (
     <div>{transformedData}</div>
   );

In the incorrect approach, we use useEffect to transform data and store it in state. Instead, we can transform the data directly in the render method, simplifying the code.

Using useEffect in these situations can lead to excessive re-renders and even infinite loops, where the component continuously updates and rerenders without stopping.

When to Use `useEffect`

useEffect shines in scenarios where side effects need to be managed. Here are the appropriate uses of useEffect:

1.Fetching Data on Component Mount:

   useEffect(() => {
     const fetchData = async () => {
       const result = await fetch('https://api.example.com/data');
       const data = await result.json();
       setData(data);
     };
     fetchData();
   }, []); // Empty dependency array ensures this runs only once on mount

This code fetches data from an API when the component mounts and stores it in the component's state. The empty dependency array ([]) ensures the effect runs only once.

2.Setting Up Intervals or Subscriptions:

   useEffect(() => {
     const intervalId = setInterval(() => {
       console.log('Interval running');
     }, 1000);
     return () => clearInterval(intervalId); // Cleanup on unmount
   }, []);

This code sets up an interval that logs a message every second. The cleanup function (clearInterval) ensures the interval is cleared when the component unmounts.

3.Synchronizing State with External Systems:

   useEffect(() => {
     externalSystem.sync(state);
   }, [state]); // Sync whenever state changes

This code synchronizes the component's state with an external system whenever the state changes. The dependency array ([state]) ensures the effect runs whenever state changes.

Pitfalls and Best Practices

While useEffect is simple to use, it can introduce complexity if not handled properly. Here are some best practices to avoid common pitfalls:

Dependency Arrays: Always include dependencies that your effect relies on. Omitting dependencies or incorrectly specifying them can lead to bugs.

  useEffect(() => {
    // effect logic
  }, [dependency1, dependency2]); // Specify all dependencies

Ensure that all variables used inside the effect are listed in the dependency array to prevent unexpected behaviors.
- Cleanup: Always return a cleanup function if your effect involves side effects that need to be cleaned up (e.g., event listeners, intervals).

  useEffect(() => {
    const handleResize = () => {
      // handle resize
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

This code sets up an event listener for window resize events and ensures it is removed when the component unmounts, preventing memory leaks.
- Avoiding Multiple useEffect Calls: If you find yourself writing multiple useEffect hooks in a single component, consider if they can be combined or if the logic can be moved elsewhere.

  // Potentially combine related logic
  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('https://api.example.com/data');
      setData(await result.json());
    };
    fetchData();

    const handleResize = () => {
      // handle resize
    };
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

This code combines data fetching and setting up a resize event listener into a single useEffect hook, simplifying the component's structure.

Conclusion

The useEffect hook is a valuable tool in React, but its power comes with the responsibility of knowing when and how to use it properly. By understanding its intended use cases and following best practices, you can write cleaner, more efficient React components. Remember, not every side effect needs useEffect, and overusing it can lead to code that is difficult to maintain and debug. Always evaluate your use cases and choose the right tool for the job.

Why You Need to Learn React in 2024🚀

Srijan Karki — Sat, 20 Jul 2024 01:39:22 +0000

In 2024, the demand for web and mobile applications is skyrocketing, making web development skills more crucial than ever. React JS, a powerful JavaScript library for building user interfaces, has been a game-changer since Facebook introduced it in 2013. Its consistent growth and enduring popularity make it a top choice for developers worldwide. Let's dive into the ten reasons why React JS remains a must-learn technology in 2024.

1. Thriving Community and Expansive Ecosystem

Supportive Community

React’s vibrant community is one of its greatest assets. With an active presence on forums, GitHub, and user groups, developers have access to a wealth of resources. Whether you're troubleshooting or looking for advanced tutorials, the React community has got you covered.

Comprehensive Ecosystem

React’s ecosystem is vast and versatile. From state management tools like Redux and MobX to styling libraries like Styled Components and Emotion, React integrates smoothly with a plethora of tools, enhancing productivity and streamlining development processes.

2. Superior Performance

Virtual DOM Innovation

React's Virtual DOM is a game-changer, updating only the necessary parts of the DOM and significantly boosting performance compared to traditional methods. This ensures faster, more efficient updates, making your applications perform better.

Efficient Rendering Techniques

With techniques like batching updates and memoization, React ensures efficient rendering. These optimizations lead to faster load times and a smoother user experience, essential for modern web applications.

3. Reusable Components

Component-Based Architecture

React’s component-based architecture promotes modularity and reusability. Developers can create self-contained components, making it easier to maintain and scale applications. This approach reduces redundancy and improves code maintainability, driving down development costs.

Real-World Success

Companies like Netflix and Airbnb leverage React’s architecture to build robust, scalable applications, showcasing its effectiveness in real-world scenarios.

4. Strong Support from Facebook

Corporate Backing

Facebook’s continuous investment in React ensures its sustained popularity. The tech giant not only developed React but also actively supports and enhances it, keeping it at the forefront of web development technology.

Long-Term Stability

This strong corporate backing guarantees long-term stability and continuous improvement, giving developers and businesses confidence in their choice of React for projects.

5. Advanced Developer Tools

Development Environment

React Developer Tools, available as browser extensions for Chrome and Firefox, offer powerful insights into React component hierarchies, debugging, and performance profiling, enriching the development experience.

Streamlined Debugging and Testing

React’s ecosystem includes numerous libraries for debugging and testing, such as Jest for testing and Redux DevTools for state management debugging. These tools streamline the development workflow, ensuring code quality and reliability.

6. Extensive Learning Resources

Comprehensive Documentation

React’s official documentation is known for its clarity and depth, covering everything from basic concepts to advanced techniques, making it accessible for developers of all levels.

Abundant Learning Platforms

Beyond official documentation, a plethora of courses, tutorials, and guides are available online. Platforms like Udemy, Coursera, and freeCodeCamp offer extensive React courses, supplemented by community-driven resources like Stack Overflow.

7. Versatility and Flexibility

Cross-Platform Development

React’s versatility extends to mobile app development with React Native, allowing developers to build mobile apps using the same principles and components as web apps. This cross-platform capability ensures a consistent user experience across devices.

Seamless Integration

React integrates effortlessly with various libraries and frameworks. Whether you’re using GraphQL for data management, Redux for state management, or Next.js for server-side rendering, React adapts to diverse project requirements.

8. SEO Advantages

Server-Side Rendering (SSR)

React’s support for server-side rendering (SSR) enhances web page visibility to search engines by rendering content on the server, leading to faster page loads and better indexing.

Improved SEO Practices

Businesses adopting React have reported significant improvements in their search engine rankings, thanks to React’s efficient rendering and SEO-friendly practices.

9. Growing Job Market and Career Opportunities

High Demand for React Developers

In 2024, the demand for React developers remains strong. Job boards are filled with openings for React developers, reflecting its robust presence in the job market. Businesses are keen to build modern, responsive web applications, driving this demand.

Career Advancement

Specializing in React opens numerous career opportunities. Developers can advance to roles such as front-end engineers, full-stack developers, and technical leads, showcasing the career growth potential within the React ecosystem.

10. Continuous Innovation

React’s Evolution

React’s commitment to innovation is evident in its continuous updates and feature releases. The introduction of hooks, concurrent mode, and other enhancements have simplified development and improved performance.

Future Prospects

The React community eagerly anticipates new features and improvements. This continuous evolution ensures that React remains relevant and capable of meeting the demands of modern web development.

Conclusion

React JS’s enduring popularity in 2024 is no accident. Its robust community support, superior performance, component-based architecture, strong backing from Facebook, advanced developer tools, extensive learning resources, versatility, SEO advantages, growing job market, and continuous innovation make it an indispensable tool for developers. As React continues to evolve, its influence on web development is set to grow even further, solidifying its place as a premier choice for developers worldwide. Whether you're a seasoned developer or just starting, learning React in 2024 is a wise investment in your career.

useState is not always the correct answer❌

Srijan Karki — Fri, 19 Jul 2024 03:41:29 +0000

In React, we have two ways to manage the component’s state — useState and useReducer. The second is less popular because it is meant for more complex objects in the state and honestly looks too tricky at first glance for new programmers, but it is not.

However, useState looks very simple and understandable, so new programmers often use it more than is required.

Depending on user interactions, it is intended to manage the state for redrawing components. If you want to remember something without rendering it, you probably shouldn’t put it in the state. useRef would be the best option.

You don‘t need useState if:

You want to remember some values during re-renders without showing them to the user. You already have data in the state, or you receive it through props but need to transform it; you don’t need to keep that new value in the new useState object, create a new variable and operate with that without triggering useless re-renders.

You need to keep the value in a state if:

You want to redraw the component when the value changes; the most popular examples are showing/hiding panels, spinners, error messages, and modifying arrays.

Simplify your code from this:

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

const MyComponent = (props) => {
  const [name, setName] = useState('name');
  const { description, index } = props;
  const [fullName, setFullName] = useState('');

  useEffect(() => {
    setFullName(`${name} - ${description}`);
  }, [name, description]);

  return (
    <div>
      <h1>{fullName}</h1>
      <input 
        type="text" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        placeholder="Enter name" 
      />
      <p>{description}</p>
    </div>
  );
};

export default MyComponent;

This code snippet defines a React component that initializes name and fullName states, and uses the useEffect hook to update fullName whenever name or description changes. It also includes an input field to update the name state and displays the fullName and description.

This approach gives you useless re-renders and unnecessary usage of
useEffect.When the name or description changes and React re-renders the component,React will check if there is functionality that depends on these values. useEffect will be triggered when the name or description changes,creating a new re-render.

To this

import React, { useState } from 'react';

const MyComponent = (props) => {
  const [name, setName] = useState('');
  const { description, index } = props;
  const nameWithDescription = `${name} - ${description}`;

  return (
    <div>
      <h1>{nameWithDescription}</h1>
      <input 
        type="text" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        placeholder="Enter name" 
      />
      <p>{description}</p>
    </div>
  );
};

export default MyComponent;

In this code snippet, nameWithDescription is calculated directly from name and description without the need for useEffect. The name state is initialized with an empty string. The nameWithDescription is updated automatically whenever name or description changes due to React's re-rendering mechanism.

we can use React default behaviour and get the correct value when the name or descriptions are changed without triggering one more re-render.

Exploring JavaScript Console Methods: Beyond `console.log()`

Srijan Karki — Thu, 18 Jul 2024 03:33:46 +0000

When it comes to debugging and logging in JavaScript, the console object is a powerful tool that goes beyond the commonly used console.log() method. In this article, we'll delve into various console methods that can help developers debug more efficiently and manage their code better.

1. console.error()

Use console.error() to output error messages to the console. This method helps in highlighting errors distinctly.

console.error("This is an error message");

2. console.warn()

For warnings that are less severe than errors, use console.warn().

console.warn("This is a warning message");

3. console.info()

To log informational messages, console.info() is your go-to method.

console.info("This is an informational message");

4. console.debug()

For debugging purposes, console.debug() can be used. This method is often used for logging detailed information.

console.debug("This is a debug message");

5. console.table()

The console.table() method allows you to display tabular data in the console. It's particularly useful for arrays of objects.

const students = [
    { name: "Alice", age: 20 },
    { name: "Bob", age: 22 },
    { name: "Charlie", age: 23 }
];
console.table(students);

6. console.assert()

With console.assert(), you can write an error message to the console if the specified assertion is false.

console.assert(1 === 2, "This will show because the assertion is false");

7. console.clear()

To clear the console, simply use console.clear().

console.clear();

8. console.count()

The console.count() method logs the number of times it has been called with a specific label.

console.count("Count Label");
console.count("Count Label");

9. console.countReset()

Reset the count for a specific label with console.countReset().

console.countReset("Count Label");

10. console.group()

Use console.group() to create an inline group, which indents subsequent console messages until console.groupEnd() is called.

console.group("Group Label");
console.log("Message inside the group");
console.groupEnd();

11. console.groupCollapsed()

Similar to console.group(), but the group is initially collapsed.

console.groupCollapsed("Collapsed Group Label");
console.log("Message inside the collapsed group");
console.groupEnd();

12. console.groupEnd()

Exit the current inline group with console.groupEnd().

console.groupEnd();

13. console.time()

Start a timer with a specific label using console.time().

console.time("Timer Label");

14. console.timeEnd()

Stop the timer and log the elapsed time with console.timeEnd().

console.timeEnd("Timer Label");

15. console.timeLog()

Log the current value of the specified timer using console.timeLog().

console.timeLog("Timer Label");

16. console.trace()

Output a stack trace to the console with console.trace(), which helps in understanding the code execution path.

function a() { b(); }
function b() { c(); }
function c() { console.trace(); }
a();

17. console.dir()

Display an interactive list of the properties of a JavaScript object using console.dir().

const obj = { name: "Alice", age: 20 };
console.dir(obj);

18. console.dirxml()

Display an XML/HTML Element representation of the specified object using console.dirxml().

console.dirxml(document.body);

19. console.profile()

Start a JavaScript CPU profile with an optional label using console.profile().

console.profile("Profile Label");

20. console.profileEnd()

Stop the JavaScript CPU profile with an optional label using console.profileEnd().

console.profileEnd("Profile Label");

21. console.memory

Inspect memory usage with console.memory.

console.log(console.memory);

Conclusion

The console object in JavaScript offers a plethora of methods that go beyond the basic console.log(). By utilizing these methods, developers can debug their code more effectively, gain better insights into their application's performance, and enhance their overall development process. Experiment with these methods to see how they can benefit your workflow!

You can now Animate `height: auto` in CSS Without JavaScript!🚀

Srijan Karki — Wed, 17 Jul 2024 04:15:50 +0000

Introduction

Animating height: auto in CSS has been a long-standing challenge for web developers. Traditionally, CSS requires a specific height value to animate, making it impossible to transition to/from height: auto directly. This limitation forced developers to resort to JavaScript for calculating and animating element heights. But now, CSS introduces the game-changing calc-size() function, making these animations not only possible but also straightforward.

The Magic of `calc-size()`

The calc-size() function operates similarly to the calc() function but extends its capabilities to handle automatically calculated sizes by the browser, including:

auto
min-content
max-content
fit-content
stretch
contain

Essentially, calc-size() converts values like auto into specific pixel values, which can then be used in calculations with other values. This is particularly useful for animating elements with dynamic sizes.

Basic Usage

Consider this simple example:

.element {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.element.open {
  height: calc-size(auto);
}

By wrapping the auto value in the calc-size() function, we can now animate the height of an element from 0 to auto without any JavaScript. Here's how it looks in action:

Normal Expansion
Animated Expansion Using calc-size()

Limitations and Workarounds

It's important to note that you cannot animate between two automatically calculated values, such as auto and min-content. However, you can use calc-size() on non-automatic values within animations, ensuring smooth transitions:

.element {
  height: calc-size(0px);
  overflow: hidden;
  transition: height 0.3s;
}

.element.open {
  height: auto;
}

Advanced Calculations

While the primary use case for calc-size() is animations, it also supports more complex calculations:

.element {
  width: calc-size(min-content, size + 50px);
}

In this example, the width of the element is set to the minimum content size plus 50px. The syntax involves two arguments: the size to be calculated and the operation to perform. The size keyword represents the current size of the first property passed to calc-size.

You can even nest multiple calc-size() functions for more sophisticated calculations:

.element {
  width: calc-size(calc-size(min-content, size + 50px), size * 2);
}

This calculates the min-content size, adds 50px, and then doubles the result.

Browser Support

Currently, calc-size() is only supported in Chrome Canary with the #enable-experimental-web-platform-features flag enabled. As it's a progressive enhancement, using it won't break your site in unsupported browsers—it simply won't animate.

Here's how you can implement it:

.element {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.element.open {
  height: auto;
  height: calc-size(auto);
}

In supported browsers, the animation works seamlessly, while in others, the element will display without animation.

Conclusion

The calc-size() function is a fantastic addition to CSS, simplifying animations involving dynamic sizes and enabling previously impossible calculations. Although it's currently in an experimental stage, its potential to enhance web development is immense. We eagerly await full support across all browsers!

Stay tuned and start experimenting with calc-size() to elevate your CSS animations to new heights!

DEV Community: Srijan Karki

How to Install and Use NVM Globally on Your System

Steps to Install and Use NVM

1️⃣ Open Your Terminal

2️⃣ Run the Installation Commands

3️⃣ Install and Use Node.js 20

4️⃣ Verify the Installation

5️⃣ Reinstall Dependencies in Your Project

Troubleshooting: Missing .bashrc File

1️⃣ Use .bash_profile or .zshrc

2️⃣ Manually Create .bashrc (For Windows Git Bash)

3️⃣ Restart Your Terminal

Conclusion

Master Date Input Control: Disabling Past Dates in HTML Forms

The HTML Date Input

Example HTML Date Input

Disabling Past Dates

Implementation in React

Breakdown:

Why is This Important?

Conclusion

Git Cheat Sheet: Essential Commands for Version Control

Getting Started

Create a New Repository

Making Changes

Check Status

Stage Changes

Commit Changes

Discard Changes

Revert Changes

View Differences

Rebase

Configuration

Set User Information

Customize Git Output

Working with Branches

List Branches

Switch Branches

Delete a Branch

Merge Branches

Tagging

Observing Your Repository

View Commit History

File-Specific Logs

Compare Branches

Show an Object in Human-Readable Format

Synchronize

Fetch Changes

Merge Changes

No Fast-Forward

Only Fast-Forward

Push Changes

Pull Changes

Cherry-Pick Commits

Working with Remotes

Manage Remotes

Change Remote URL

Temporary Commits

Stash Changes

Tracking Path Changes

Remove Files

Move Files

View File History

Ignoring Files

Git Tricks

Rename Branch

Push and Reset

Delete Remote Branch

View Logs

Branch Management

Rewriting History

Rewrite Last Commit Message

Git Aliases

Conclusion

A Step-by-Step Guide to LocalStorage and SessionStorage: Storing Data on the Client Side

Introduction to Web Storage

Differences Between LocalStorage and SessionStorage

Storing, Retrieving, and Removing Data

Real-World Example: Saving User Preferences

HTML:

Troubleshooting: Missing `.bashrc` File

1️⃣ Use `.bash_profile` or `.zshrc`

2️⃣ Manually Create `.bashrc` (For Windows Git Bash)

Understanding `useEffect`

When Not to Use `useEffect`

When to Use `useEffect`