Forem: Anik Dash Akash

🔍 Learning TanStack Query — But First, Manual Caching

Anik Dash Akash — Sun, 01 Jun 2025 17:43:09 +0000

Lately, I’ve been diving into TanStack Query (formerly React Query) to learn more about its powerful data fetching and caching features. But before I start relying on tools that abstract everything for me, I wanted to understand the problem caching solves and implement a basic version myself.

This post walks through:

The problem I noticed in my app
How I came up with the idea of caching
How I built a simple in-memory cache
What I learned from the process

🧠 The Problem That Sparked the Idea

In one of my projects, I display a paginated list of users. Every time I changed the page, an API call was made—even if I had already fetched that page before. This felt inefficient.

Then I thought:

"Why not store the results of each API call in memory, and reuse them if the same request is made again within a short time?"

That's when I got the idea of building a simple in-memory cache:

✅ If I’ve already fetched page 2, don’t fetch it again within 5 minutes.

❌ Otherwise, fetch it from the API and cache it.

This idea led me to implement manual caching logic in my React hook.

🔄 First, The Hook Without Caching

Initially, my custom hook looked like this:

export const useGetAllUser = (currentPage, pageSize) => {
  const [users, setUsers] = useState([]);
  const [totalUsers, setTotalUsers] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      setLoading(true);
      setError(null);
      try {
        const res = await fetchData("/users", {
          _page: currentPage,
          _limit: pageSize,
        });
        setUsers(res.data);
        setTotalUsers(Number(res.headers["x-total-count"]));
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, [currentPage, pageSize]);

  return { users, totalUsers, loading, error };
};

It worked—but made unnecessary API calls whenever a user switched between pages.

💡 Adding Manual Caching (In-Memory)

To fix this, I added a simple cache:

const userCache = {}; // A JS object to store cached results
const CACHE_DURATION = 5 * 60 * 1000; // Cache is valid for 5 minutes

Then I modified the hook to check the cache before calling the API:

export const useGetAllUser = (currentPage, pageSize) => {
  const [users, setUsers] = useState([]);
  const [totalUsers, setTotalUsers] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const cacheKey = `page_${currentPage}_limit_${pageSize}`;
    const now = Date.now();

    const cached = userCache[cacheKey];

    if (cached && now - cached.timestamp < CACHE_DURATION) {
      // Serve from cache
      setUsers(cached.data);
      setTotalUsers(cached.total);
      setLoading(false);
      return;
    }

    // Fetch from API and store in cache
    const fetchUsers = async () => {
      setLoading(true);
      setError(null);
      try {
        const res = await fetchData("/users", {
          _page: currentPage,
          _limit: pageSize,
        });

        const data = res.data;
        const total = Number(res.headers["x-total-count"]);

        setUsers(data);
        setTotalUsers(total);

        userCache[cacheKey] = {
          data,
          total,
          timestamp: Date.now(),
        };
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();
  }, [currentPage, pageSize]);

  return { users, totalUsers, loading, error };
};

🧩 How It Works – Step by Step

Generate a unique key (page_2_limit_10) based on the page and page size.
Check the cache:
- If the key exists and the data is fresh (within 5 minutes), use it directly.
- If not, fetch new data from the API.
Update the cache with new data and a timestamp.
Avoid repeated fetches for already-viewed pages within a short time.

This was the “aha!” moment for me—simple caching reduced redundant network calls and made the app feel snappier.

💻 Example Usage in Component

Here’s how I use the hook in the UI:

const { users, totalUsers, loading, error } = useGetAllUser(currentPage, pageSize);

return (
  <>
    {loading ? <SkeletonLoader /> : (
      <UserGrid users={users} />
    )}
    <Pagination
      current={currentPage}
      total={totalUsers}
      pageSize={pageSize}
      onChange={(page) => setCurrentPage(page)}
    />
  </>
);

This is clean and declarative—the hook handles everything behind the scenes.

📘 What I Learned

From this experience, I understood:

How to think like a caching system
How to build basic memoization logic
The trade-offs of manual caching (like global memory usage and no auto-invalidations)

Most importantly, I understood why TanStack Query exists—it handles all this, and much more:

Automatic stale handling
Background refetching
DevTools for cache inspection
Garbage collection
React integration

Conventional Git Commits With Best Practices.

Anik Dash Akash — Wed, 11 Dec 2024 12:33:45 +0000

This article is not a guide on how to push your code to Git. Instead, it focuses on best practices for writing effective Git commit messages. A Git commit is a critical part of the software development process. Poorly written commit messages can lead to confusion, hinder collaboration, and negatively impact the productivity of a development team.

Learning to write clear and meaningful commit messages is essential for maintaining a high-quality codebase. In this article, I will explore some of the best practices for creating well-structured commit messages, using the Conventional Commits standard as an example. This standard provides a structured approach to writing commit messages, making them more informative and easier to understand for everyone on the team.

By following these guidelines, you can improve the readability and maintainability of your project’s history, streamline collaboration, and even simplify automation tasks like versioning and changelog generation. Let's directly dive into the main point.

The Basic Convention of a Good Git Commit

A well-structured Git commit message typically follows this format:

<type> [optional scope] : <description>

[optional body]

[optional footer(s)]

Examples of commit types

Commit messages can vary depending on the task you are working on. Here are some common conventions for different scenarios:

feat : New Features

Description: Introduces a new feature or enhancement.

Example:

feat(auth): add login functionality.
feat(ui)  : improve button desing

fix: Bug Fixes

Description: Fixe a bug in the codebase.

Example:

fix(api): resolve timeout issue
fix(ui) : correct alignment of navbar

docs: Documentation
1. Description: Updates or improvements to documents to documentation (README, code comments, etc.).
  1. Example:
```
docs: update README with installation steps
docs(api): add missing function descriptions
```
style: Code Styling
1. Description: Changes that do not affect functionality (formatting, spacing, linting).
```
style: fix ESLint warnings
style: reformat code for consistency
```
perf: Performance Improvements
1. Description: Enhances performance without changing functionality.
```
perf: optimize database queries
perf(ui): reduce image loading time
```

refactor: Code Refactoring

Description: Improves code structure or readability without changing functionality.

refactor: simplify user validation logic
refactor(api): split large functions into smaller ones

test: Tests

Description: Adds or updates test cases.

Example:

test: add unit tests for login service
test(api): update integration tests for payment gateway

chore: Maintenance

Description: Miscellaneous tasks like dependency updates or build changes.

Example:

chore: update dependencies to latest versions
chore(ci): configure GitHub Actions for CI/CD

build: Build Changes
1. Description: Changes to the build system or external dependencies.
  1. Example:
```
build: upgrade webpack to v5
build: add Babel support for modern JS features
```
ci: Continuous Integration
1. Description: Updates related to CI/CD pipelines or automation scripts.
  1. Example:
```
ci: fix Dockerfile for deployment
ci: update GitHub Actions workflow
```
revert: Reverts
1. Description: Reverts a previous commit.
  1. Example:
```
 revert: revert "feat(auth): add login functionality"
```
BREAKING CHANGE : Breaking API/Functionality
1. Description: A commit introducing a breaking change in the codebase.
2. Usage: Add ! to the type or include BREAKING CHANGE **** in the footer.
  1. Example:
```
feat(api)!: rename `getUser` to `fetchUser`

BREAKING CHANGE: `getUser` is replaced by `fetchUser` to improve naming consistency.
```

Combination commit messages

In some cases, you may combine multiple changes into one messages:

feat(auth): add forgot password feature and update login API
fix(auth): resolve token expiration issue

Multiline commit messages:

Method 1: Inline with the -m Option

You can provide multiple -m flags to add different lines to your commit message. For example:

git commit -m "feat(auth): add forgot password feature" -m "Added email verification for password resets." -m "Updated login API with enhanced security measures."

This approach is quick but not ideal for detailed or formatted commit messages since it can get cumbersome for longer descriptions.

Method 2: Use a Text Editor for the commit message

Start the commit without a message: Run the git commit command without the -m flag:

git commit

Edit the commit message in Your default text editor: Your default text editor (like vim, nano or another configured editor) will open, allowing you to write a detailed, multiline commit message. Example in the editor:

feat(auth): add forgot password feature

- Added email verification for password resets.
- Updated login API with enhanced security measures.

Save and close the editor:
After writing the message, save the file and close the editor. The commit will be created with your multiline message.

how to save and exit when writing a commit message in `vim` or `nano`:

Here’s how to save and exit when writing a commit message in vim or nano:

In vim :

Write your commit message: Type the commit message as needed in the editor.
Save and exit:
- Press Esc to exit insert mode.
- Type : wq (short for "write and quit") and press Enter.
- This saves the file and exits vim.
Alternative commands:

To save without exiting, type :w and press Enter.
To exit without saving, type :q! and press Enter.

In nano

Write Your commit Message:
Type the commit message directly into the editor.
Save and exit:
- Press Ctrl + O (Write Out) to save the file.
- Press Enter to confirm the filename (usually pre-filled).
- Then press Ctrl + X to exit nano.
Cancel without saving:
- Press Ctrl + X and when prompted to save changes, type N for "No."

Tips for writing effective commit messages

Use Imperative Tone (Present Tense) :
1. Good: fix: resolve issue with pagination.
2. Bad: fixed issues with pagination.
Be Specific:
1. Good: feat(ui): add tooltip to icons.
2. Bad: feat: update UI
Keep It Short: Aim for under 50 characters in the header.

Best Wishes.
you can find me on Github : anikakash

Interview Question on JS Variable

Anik Dash Akash — Tue, 05 Nov 2024 10:00:29 +0000

1. Basic Definitions & Differences :

Q: What are let, const, and var, and how do they differ?

var was the original way to declare variables in JavaScript. It has function-level scope and is prone to hoisting issues.
let and const were introduced in ES6 (ES2015) and have block-level scope, making them more predictable.
let allows you to declare a variable that can be reassigned, whereas const creates a constant reference.

var a = 10;
let b = 20;
const c = 30;

Q: When should you use let vs const?

Use const by default. Only use let if you know the variable needs to be reassigned later.
This improves code readability and prevents accidental reassignments.

const apiUrl = 'https://api.example.com'; // Won't change
let userScore = 0; // Will change as the user scores points

Q: Why is var generally discouraged in modern JavaScript?

var has function-level scope and gets hoisted, which can cause unexpected behavior and bugs. let and const are block-scoped and reduce these issues.

function example() {
   if (true) {
      var x = 10; // Accessible outside the if block
   }
   console.log(x); // 10
}

function exampleLet() {
   if (true) {
      let y = 20; // Block-scoped
   }
   console.log(y); // ReferenceError
}

2. Scope and Hoisting :

Q: Explain the concept of scope in JavaScript (global, function, block).

Global Scope: Variables declared outside functions are globally accessible.
Function Scope: Variables declared inside a function with var are function-scoped.
Block Scope: Variables declared inside a block (e.g., {}) with let or const are block-scoped.

var globalVar = 'I am global';

function testScope() {
   var functionVar = 'I am function-scoped';
   if (true) {
      let blockVar = 'I am block-scoped';
      console.log(blockVar); // Works fine
   }
   console.log(blockVar); // ReferenceError
}

Q: How does scope differ between var, let, and const?

var has function scope; let and const have block scope.

Q: What is hoisting, and how does it affect var, let, and const?

Hoisting is JavaScript's behavior of "moving" variable and function declarations to the top of their scope. Only var is hoisted and initialized with undefined. let and const are hoisted but not initialized, leading to the Temporal Dead Zone (TDZ).

console.log(a); // undefined due to hoisting
var a = 10;

console.log(b); // ReferenceError due to TDZ
let b = 20;

3. Temporal Dead Zone (TDZ):

What is the Temporal Dead Zone (TDZ)?

TDZ is the period between entering the scope and initializing let or const variables. Accessing them before declaration results in a ReferenceError.

Q: How does the TDZ affect the behavior of let and const?

They cannot be used until declared within their scope, preventing undefined or accidental accesses.


console.log(myVar); // ReferenceError due to TDZ
let myVar = 5;

Q: What happens if you try to access a let or const variable before it’s declared?

It throws a ReferenceError.

4. Re-declaration and Re-assignment

Q: Can you re-declare a variable declared with let, const, or var?

var allows re-declaration; let and const do not within the same scope.


var x = 1;
var x = 2; // No error

let y = 1;
// let y = 2; // SyntaxError: Identifier 'y' has already been declared

Q: What’s the difference between re-declaration and re-assignment in JavaScript?

Re-declaration: Declaring a variable again within the same scope.
Re-assignment: Changing the value of an existing variable.

Q: Can a const variable be re-assigned or mutated?

A const variable cannot be re-assigned. However, objects and arrays declared with const can be mutated.

const obj = { name: 'Alice' };
obj.name = 'Bob'; // Allowed (mutating the object)
// obj = { name: 'Charlie' }; // TypeError: Assignment to constant variable

5. Practical Scenarios & Edge Cases

Q: What happens when var, let, and const variables are declared without an initial value?

var is initialized to undefined; let and const are uninitialized.

Q: How does block scoping with let and const work within loops?

let and const are block-scoped, so each loop iteration can have a new binding.

for (let i = 0; i < 3; i++) {
   setTimeout(() => console.log(i), 100); // Outputs 0, 1, 2
}

for (var j = 0; j < 3; j++) {
   setTimeout(() => console.log(j), 100); // Outputs 3, 3, 3}

Q: What issues might arise if you use var in loops with asynchronous operations (like setTimeout)?

Using var in loops with asynchronous operations causes unexpected results due to lack of block scope.

6. Real-World Usage Questions

Q: Which keyword (let, const, or var) would you use for defining variables in a loop, and why?

Prefer let for variables that may change in each iteration to avoid scoping issues with var.

Q: It clarifies intent by ensuring values won’t change, making the code easier to follow.

It prevents re-assignment and maintains function immutability.

const greet = () => console.log('Hello!');

Q: How can const improve code readability and maintainability?

It clarifies intent by ensuring values won’t change, making the code easier to follow.

7. Behavioral Questions and Scenarios

These focus on your understanding of var, let, and const and their behaviors in different contexts.

Q: What is the output of the following code, and why?

console.log(x); // ?
var x = 10;

Answer: undefined because var is hoisted and initialized with undefined. The declaration is moved to the top, but the assignment (x = 10) occurs in its original place.

Q: What about this code?

console.log(y); // ?
let y = 20;

Answer: ReferenceError because let is hoisted but not initialized, leading to a Temporal Dead Zone (TDZ) until it is assigned a value.

Q: What happens if you declare a variable with const but don’t initialize it immediately?

const z; // ?

Answer: SyntaxError. const must be initialized at the time of declaration.

8 Scope and Hoisting

Questions about scope test your understanding of how var, let, and const variables are accessible within functions, blocks, and globally.

Q: What will be logged to the console?

function scopeTest() {
   var a = 1;
   if (true) {
      let b = 2;
      const c = 3;
      console.log(a); // ?
      console.log(b); // ?
      console.log(c); // ?
   }
   console.log(a); // ?
   console.log(b); // ?
   console.log(c); // ?
}
scopeTest();

Answer:
Inside the if block:
- console.log(a) logs 1 because a is declared in the function scope and accessible within the block.
- console.log(b) logs 2 because b is let-declared within the block.
- console.log(c) logs 3 because c is const-declared within the block.
Outside the if block:
- console.log(a) logs 1 because a is function-scoped.
- console.log(b) and console.log(c) throw ReferenceErrors because b and c are block-scoped.

Q: How does the following code behave?

for (var i = 0; i < 3; i++) {
   setTimeout(() => console.log(i), 100);
}

Answer: Logs 3 three times. Since var is function-scoped, each setTimeout refers to the same i variable, which has become 3 after the loop ends.

9 Re-assignment and Mutation

Questions related to re-assigning const and mutating objects or arrays help assess your understanding of immutability and value vs. reference.

Q: Can you re-assign a const variable? Why or why not?

Answer: No, re-assigning a const variable results in a TypeError. const variables cannot be re-assigned but can be mutated if they hold objects or arrays.

Q: What will happen in the following code?

const person = { name: 'Alice' };
person.name = 'Bob';
console.log(person); // ?

Answer: { name: 'Bob' } because person is a reference to an object. const prevents re-assignment, not mutation of properties in the object.

10 Common Mistakes & Debugging

These questions test your understanding of variable declarations and common mistakes.

Q: Why does this code throw an error, and how would you fix it?

function check() {
   console.log(a); // ?
   let a = 10;
}
check();

Answer: The code throws a ReferenceError due to the Temporal Dead Zone. To fix it, move the declaration let a = 10; above console.log(a);.

11 Practical Usage Scenarios

These questions test your ability to apply let, const, and var in real-world scenarios.

Q: When would you use let vs. const in a function or a loop?

Answer: Use const for values that don’t need to change and let for values that will change (e.g., loop counters or mutable values).

Q: Explain the output of this code:

const arr = [];
for (let i = 0; i < 3; i++) {
   arr.push(() => i);
}
console.log(arr.map(fn => fn())); // ?

Answer: [0, 1, 2]. Each push creates a new i in the block scope of let, so each function holds the correct i value.

12 Edge Cases and Special Scenarios

These focus on unusual or complex cases involving variables.
Q: What happens if you declare a var variable twice in the same scope?

var x = 5;
var x = 10;
console.log(x); // ?

Answer: 10. var allows re-declaration, so the last assignment takes effect.

Q: Explain why this code causes an error:

{
   console.log(myVar); // ?
   let myVar = 5;
}

Answer: ReferenceError due to the Temporal Dead Zone. The variable myVar exists but cannot be accessed until its initialization line.

13 Shadowing

Q: What is variable shadowing, and how does it affect variable access?

Shadowing occurs when a variable declared within a certain scope (like a block or function) has the same name as a variable in an outer scope. The inner variable "shadows" the outer one, making the outer variable inaccessible in that scope.

let x = 'outer';
function shadowExample() {
   let x = 'inner';
   console.log(x); // 'inner'
}
shadowExample();
console.log(x); // 'outer'

Q: Can you shadow a var variable with a let or const

Yes, let or const can shadow a var in a nested block.

var a = 'outer';
{
   let a = 'inner';
   console.log(a); // 'inner'
}
console.log(a); // 'outer'

14 Closures and Variable Capture

Q: How do closures interact with variables declared with var, let, and const?

Closures capture the reference of variables, not the value. For example, using let in a loop with closures captures each iteration’s distinct value, whereas var captures only one value for the entire loop.

function closureTest() {
   let funcs = [];
   for (let i = 0; i < 3; i++) {
      funcs.push(() => console.log(i));
   }
   return funcs;
}
closureTest().forEach(fn => fn()); // Logs 0, 1, 2

function closureVarTest() {
   let funcs = [];
   for (var i = 0; i < 3; i++) {
      funcs.push(() => console.log(i));
   }
   return funcs;
}
closureVarTest().forEach(fn => fn()); // Logs 3, 3, 3

In this code, we are using closures within a loop to see how let and var handle variable scope. Let’s walk through each case to understand the different outputs.
let Case: closureTest

function closureTest() {
   let funcs = [];
   for (let i = 0; i < 3; i++) {
      funcs.push(() => console.log(i));
   }
   return funcs;
}
closureTest().forEach(fn => fn()); // Logs 0, 1, 2

Explanation:

Loop Scope with let: In this loop, i is declared using let, which is block-scoped. This means that each iteration of the loop creates a new instance of i with a unique value within that block.
Closures and let: When funcs.push(() => console.log(i)) runs, each function captures the current instance of i as a closure.
- In the first iteration, i = 0, so the function captures 0.
- In the second iteration, i = 1, so the function captures 1.
- In the third iteration, i = 2, so the function captures 2.
Output: Each function, when called, has a distinct value for i (0, 1, and 2). Therefore, the output is 0, 1, and 2.

var Case: closureVarTest

function closureVarTest() {
   let funcs = [];
   for (var i = 0; i < 3; i++) {
      funcs.push(() => console.log(i));
   }
   return funcs;
}
closureVarTest().forEach(fn => fn()); // Logs 3, 3, 3

Explanation:

Function Scope with var: When var is used to declare i, it is function-scoped rather than block-scoped. This means there is only one i shared across all iterations of the loop.
Closures and var: Each time funcs.push(() => console.log(i)) is executed, the function captures the reference to the same i variable.
- After the loop completes, i has been incremented to 3 (the loop ends when i < 3 fails, so i becomes 3).
Output: Since each function in funcs holds a reference to the same i variable (now holding the value 3), each function logs 3 when called. Therefore, the output is 3, 3, 3.

Key Difference

let creates a new binding of i for each iteration due to block scoping, allowing each function to capture a unique value of i.
var only has one binding of i in the entire function scope, so all functions capture the same reference, which ends up being 3 after the loop completes.

To Summarize

Using let in the loop gives each iteration its own scoped variable, capturing the current value of i in each closure.
Using var in the loop results in all closures referencing the same variable, which has the final value after the loop (3 in this case).

15 Destructuring with `let` and `const`

Q: Can you use destructuring with let and const?

Yes. This is a common pattern, especially for working with arrays and objects. Destructuring with const works only when you don’t plan to reassign the variables.

const [a, b] = [1, 2];
console.log(a, b); // 1, 2

let { x, y } = { x: 10, y: 20 };
console.log(x, y); // 10, 20

16 Temporal Dead Zone Edge Cases

Q: How does the TDZ apply to function arguments and default parameters?

The TDZ applies to any let or const variable, even when default parameter values reference other parameters.

function testTDZ(a = b, b = 1) {
   console.log(a, b);
}
// testTDZ(); // ReferenceError because `b` is not defined when `a` is assigned

17 Global Variables and Global Scope Pollution

Q: What happens if you declare a variable without let, const, or var?

Declaring a variable without let, const, or var automatically places it in the global scope (in non-strict mode), which can lead to unintended side effects.

function globalExample() {
   someVar = 10; // Creates a global variable if in non-strict mode
}
globalExample();
console.log(someVar); // 10

18 Best Practices Questions

Q: Why is it generally best practice to avoid using var in modern JavaScript code?

Using let and const is generally safer because they are block-scoped and prevent unexpected issues with hoisting and re-declaration.

Q: Why is const considered more readable and reliable for defining functions?

const ensures the function cannot be reassigned, which makes the code more predictable.

19 Advanced Temporal Dead Zone Questions

Q: Does the TDZ apply only within functions, or does it also apply to global and block scope?

The TDZ applies to any block, function, or global scope where let or const are declared. This means even globally declared variables are within the TDZ until they are initialized.

{
   console.log(temp); // ReferenceError
   let temp = 10;
}

20 Default Parameters and const in Functions

Q: Can you use const within function parameters or with default values?

Yes, you can define function parameters with default values, but const cannot be used directly within the parameter list.

function sum(a, b = 10) {
   return a + b;
}

21 Combining let and const with Conditional Statements

Q: What is the behavior of let and const declarations within if or try-catch blocks?

let and const are block-scoped, so they exist only within the block, even in if and try-catch statements.

if (true) {
   let blockVar = 'inside if';
   console.log(blockVar); // 'inside if'
}
console.log(blockVar); // ReferenceError

you can follow me on GitHub

Understanding State and Props in React 💻🌱

Anik Dash Akash — Mon, 23 Sep 2024 00:32:23 +0000

React is a powerful JavaScript library for building user interfaces. Two core concepts that every React developer should understand are state and props. In this blog, we'll break down these concepts, show how to use them, and illustrate them with code examples. 🌱

What is State? 🤔

In React, state is a built-in object that stores property values that belong to a component. It is managed within the component and can change over time. State allows React components to respond to user input and render dynamic data.

Example: Managing State in a Counter Component

Let's create a simple counter component that increments the count when a button is clicked.

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable 'count' and a function 'setCount' to update the state
  const [count, setCount] = useState(0);

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

export default Counter;

Explanation:

useState(0) initializes the count state to 0.
setCount(count + 1) updates the count when the button is clicked.
React re-renders the component to display the updated count.

Output:

When you click the button, the count increases by 1 each time.

What are Props? 🛠️

*Props *(short for properties) allow you to pass data from a parent component to a child component. Props are read-only and cannot be modified by the child component—they’re used for rendering dynamic data passed from one component to another.

Example: Passing Props to a Child Component

Let’s create a component that takes a nameprop and displays a greeting message.

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Anik" />
      <Greeting name="React Developer" />
    </div>
  );
}

export default App;

Explanation:

The Greeting component accepts props as an argument.
{props.name} dynamically renders the name passed from the parent component.
The App component passes different names to the Greeting component.

Output:

Differences Between State and Props 📋

Feature	State	Props
Mutability	Can be changed with `setState` or `useState`	Immutable (read-only)
Scope	Local to the component (managed inside)	Passed from parent to child
Usage	Handles dynamic, interactive data	Passes data and configurations

State and Props Together 🔗

Often, you'll use state in the parent component and pass its value down as props to the child component. Let’s see how they work together.

Example: Updating State and Passing it as Props

import React, { useState } from 'react';

function DisplayCounter(props) {
  return <h1>Current Count: {props.count}</h1>;
}

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

  return (
    <div>
      <DisplayCounter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Explanation:

count is managed as a state in the Counter component.
The DisplayCounter component receives count as a prop and displays it.
When the button is clicked, the count state is updated, and the new value is passed down to DisplayCounter as a prop.

Output:

Conclusion 📝

Understanding state and props is crucial for mastering React. State is used for managing data that changes over time, while props allow data to flow between components. By using these two concepts together, you can build interactive and dynamic user interfaces with ease.

Happy coding! 🚀 Follow me on GitHub🚀

Linux - লিনাক্স

Anik Dash Akash — Fri, 06 Sep 2024 20:18:26 +0000

Take the control power of your os! Don't give your os to control to you

আমরা সবাই কম বেশি এই শব্দটার সাথে পরিচিত। শব্দটা চোখে পড়লেই ভেসে উঠে কালো একটা স্ক্রিনযেখানে হাজার হাজার লাইনের কোড স্ক্রল হতে থাকে আর একজন হুডি পরা মানুষ বসে কোড করছে! আমরা সবাই কম বেশি হ্যাকিং মুভি বা পরিচিত লোকদের মুখে এটা শুনে এসেছি যে লিনাক্স চালাতে হলে আপনাকে একজন হ্যাকার হতে হবে। কিন্তু এটি একদম ভুল ধারণা। আপনি যখন প্র্রথম কম্পিউটার চালানো শুরু করবেন তখন যদি কেউ আপনাকে Microsoft Windows এর পরিবর্তে লিনাক্স অপারেটিং সিস্টেম এর একটা কম্পিউটার ধরিয়ে দিত তবে আপনি ঠিকই সেটিতে অভ্যস্ত হয়ে উঠতেন।

লিনাক্স কি?

লিনাক্স বুঝতে হলে আপনাকে প্রথমে অপারেটিং সিস্টেম সম্পর্কে জানতে হবে। তবে একজন কম্পিউটার ব্যবহারকারী হিসাবে আপনার অপারেটিং সিস্টেম সম্পর্কে জানা দরকার। অপারেটিং সিস্টেম হলো কম্পিউটার এর এমন একটি সফটওয়্যার যেটি কম্পিউটারের হার্ডওয়্যার এবং ব্যবহারকারীর মধ্যে সম্পর্ক স্থাপন করে। অপারেটিং সিস্টেম ছাড়া যেহেতু হার্ডওয়্যার এর সাথে যোগাযোগ করা যায় না তাই এটি ছাড়া কম্পিউটার অচল। তাহলে কি লিনাক্স একটি অপারেটিং সিস্টেম? মোটেও না লিনাক্সকে পুরোপুরি অপারেটিং সিস্টেম বললে ‍ভুল হবে। লিনাক্স মূলত হল একটি কার্নেল । কার্নেল মূলত একটি অপারেটিং সিস্টেম এর প্রাণ। এর মাধ্যমেই অপারেটিং সিস্টেম হার্ডওয়্যার এবং সফটওয়্যার এর যোগাযোগ হয়।

আমাদের সবার ব্যাবহৃত Windows এরও কার্নেল আছে, এর নাম NT এবং Mac OS এর কার্নেল এর নাম XNUI. কিন্তু আপনি চাইলে কিংবা লাখ লাখ টাকা খরচ করেও এদের কার্নেল এর সোর্স কোড দেখতে পারবেন না। এদের সোর্স কোড ওপেন নয়।কিন্তুলিনাক্স এর কার্নেল কোড ওপেন সোর্স । আপনি চাইলে সম্পূর্ণ নিজের মতো করে লিনাক্স কার্নেল এর উপর ভিত্তি করে একটি অপারের্টিং সিস্টেম ডিজাইন করতে পারবেন।যার কারণে বর্তমানে লিনাক্স ভিত্তিক প্রায় এক হাজার এর মতো ডিস্ট্রো এবং সেগুলোর আবার কয়েক রকমের ফ্লেভারে ডেস্কটপ এনভায়রনমেন্ট আপনি দেখতে পাবেন। শুরুর দিকে এসব জিনিসের নাম আর পার্থক্য বুঝতে গিয়ে হয়তো আপনার মাথার চুল ছিঁড়তে হতে পারে তবে ভয়ের কিছু নেই, ধীরে ধীরে শিখে যাবেন। তাহলে এবার কার্নেল নিয়ে আরো একটু জানা যাক - কার্নেল হচ্ছে অপারেটিং সিস্টেম এর সেইঅংশটি যা হার্ডওয়্যারের সাথে সংযোগ স্থাপন করে। এটি একটি কম্পিউটারের CPU, RAM এগুলোর সাথে সরাসরি সংযোগ স্থাপন করে। কার্নেল ২ প্রকার মনোলিথিক কার্নেল আর মাইক্রো কার্নেল। লিনাক্স হচ্ছে একটি মনোলিথিক কার্নেল । লিনাক্স কার্নেল এর রিপোজিটরি GITHub Repo

লিনাক্স নামকরণ -

লিনাসের খুব শখ ছিল তার অপারেটিং সিস্টেমের নাম হবে “ফ্রিক্স” (FREAKS) যেটা কিনা “Free”, “Freak” আর “Unix” শব্দ তিনটার মিলিত একটা রূপ। কিন্তু নামটা পছন্দ হয়নি এ্যারি লেম্কের। এ্যারি লেম্কে ছিল লিনাসের বন্ধু ও সহকর্মী এবং হেলসিংকি ইউনিভার্সিটির এফটিপি সার্ভারের এডমিনিস্ট্রেটর। এফটিপি সার্ভার দিয়ে খুব সহজেই যেকোন ফাইল সবার সাথে শেয়ার করা যায়। এ্যারিই লিনাসকে বুদ্ধি দিল যে নতুন OS এর সোর্সকোডকে এফটিপি সার্ভারে শেয়ার করতে, যাতে করে পৃথিবীর সবার জন্যই এর কোডটা উন্মুক্ত থাকে আর যে কেউ সেটা ব্যবহার করতে পারে। তবে এজন্য “ফ্রিক্স” নামটা পছন্দ হলনা এ্যারির। সে “লিনাক্স” নামের এক ফোল্ডারে এফটিপি সার্ভারে সেই কোডগুলো রেখে দিলেন। সেই থেকে নাম হয়ে গেল “লিনাক্স”। ওহ, বলতে তো ভুলেই গেলাম কেন এর নাম লিনাক্স হল, সহজ ব্যাপার “Linus’s Unix” থেকেই এ্যারির মাথায় লিনাক্স নামটা চলে আসে। আসল নাম হারিয়ে লিনাক্স এখন যে নামে পরিচিত সেটা আসলে তার ডাউনলোড করার জন্য রাখা ফোল্ডারের নাম।কিন্তু লিনাস এই নামটা মানতে পারেন নি। কারণ লিনাক্স নামটা তার নামের সাথে মিলে যায় এবং তিনি ভাবেন যে এতে তার অহংকারী মনোভাব প্রকাশ পেতে পারে। কিন্তু তত সময়ে অনেক মানুষ সেটা ডাউনলোড করে নেয়। ফলে বাধ্য হয়ে নামটা মেনে নিতে হয় তাকে। এরপর থেকে লিনাক্সের যাত্রা শুরু হয়।

লিনাক্সের ম্যাস্কট-

কর্পোরেটরা যখন লিনাক্স ব্যাবহার শুরু করলেন তখন এর জন্য ম্যাস্কট এর প্রয়োজন দেখা দিল। ম্যাস্কট এর খোজ শুরু পড়লে লিনাস নিজেই পেঙ্গুইন এর কথা বলেন। তবে সাধারণ কোন পেঙ্গুইন নয়, নাদুসনুদুস পেঙ্গুইন। যেটা কিনা আবার অলস ভঙ্গিতে খাবার খাওয়ার পর ছোটখাট ভুড়ি উঁচিয়ে দু’পা ছড়িয়ে মাটিতে বসে আছে ! আসলে লিনাস অস্ট্রেলিয়ার ক্যানবেরার National Zoo & Aquarium এ অবকাশ যাপন এ গিয়ে তিনি একটা পেঙ্গুইন এর কামড় খেয়েছিলেন । তারজন্যই তার মাথায় ম্যাস্কট হিসাবে পেঙ্গুইন এর কথা আসে। তাই অফিসিয়াল মাসকট হিসেবে পেঙ্গুইনকেই পছন্দ করা হল, এর নাম দেয়া হল TUX ।এই সেই নাদুসনুদুস পেঙ্গুইন। টার্কিডো আর লিনাক্স মিলে হল টাক্স। পেঙ্গুইন লিনাসকে কামড় দিলেও একে ভয়ের কিছু নেই। যেখানেই এর ছবি দেখবেন বুঝে নিবেন সেখানেই লিনাক্স রয়েছে।

লিনাক্স নিয়ে কিছু মিথ-

লিনাক্স চালাতে হলে কমান্ড লাইনে কাজ করতে হবে। প্রোগ্রামার না হলে লিনাক্স চালানো যাবে না। এর কারণ হল প্রায় সব Windows ব্যাবহারকারীই মনে করেন যে লিনাক্স চালাতে হলে টার্মিনাল ছাড়া ব্যবহার করা যায় না। টার্মিনালে কমান্ড দিয়ে দিয়ে কম্পিউটার ব্যবহার করতে হয়। কিন্তু লিনাক্সে ইন্টারফেইস এসেছে প্রায় ১৬ বছর আগে। বর্তমানে লিনাক্সের ইন্টারফেইস কতটা উন্নত হয়েছে সেটা না দেখলে বুঝা সম্ভব না। কিন্তু আমরা অনেকেই প্রজন্ম থেকে প্রজন্ম পাইরেটেড windows ব্যবহার করে আসছি বলেই এত বড় অন্ধকারে আমরা। এছাড়া অনেকে লিনাক্স না চালানোর পিছনে যুক্তি দেন যে এটা হ্যাকারদের জন্য, আর আমি একজন সাধারন ইউজার এবং আমি তো টেকী না তাই লিনাক্স আমার জন্য না। হ্যা লিনাক্স হ্যাকারদের জন্য একটি আদর্শ অপারেটিং ‍সিস্টেম তাই বলে একজন সাধারণ ইউজার ব্যবহার করতে পারবে না এর কোন যুক্তি নেই। এছাড়া লিনাক্স সর্ম্পূর্ণ ফ্রী তাই Windows এর মতো টাকা দিয়ে ব্যবহার করতে হয় না। আপনি একজন সাধারণ ব্যবহারকারী হলেও লিনাক্সে আপনি আপনার দৈনন্দিন কাজ গুলো অনেক ক্ষেত্রে সহজে করে ফেলতে পারেন। তবে এর জন্য আপনার হালকা পাতলা কোডিংও জানতে হতে পারে। কিন্তু আপনি একজন নরমাল ইউজার হিসেবেও লিনাক্স ব্যাবহার করতে পারেন। অনেকে বলে থাকেন যে লিনাক্সে দরকারী সফটওয়্যার এবং হাডওয়্যার সাপোর্ট নেই। এটা রীতিমতো একটা মিথ্যা রটানো । আচ্ছা তাহলে একটা প্রশ্নের উত্তর করুন তো, যারা লিনাক্স চালায় তাহলে তারা কি ব্যবহার করে? লিনাক্সে কমিউনিটি কত বড় আপনি সেটা তখনভাবতেও পারবেন না। যদি কোন কোম্পানি লিনাক্সে সার্পোট না দেয় তবে লিনাক্সের স্বেচ্ছাসেবী ডেভেলপার কমিউনিটি নিজেই রিভার্স ইঞ্জিনিয়ারিং করে তৈরী করে ফেলে। তবে বর্তমানে সকল কোম্পানি ই লিনাক্স সার্পোট দেয় । তবে এদিকে Nvidia একটু ভিন্ন। তাদের লিনাক্স সার্পোট বাজে ।

ছবি: লিনাস টরভল্ডস (Linus Torvalds)

চাইলে এই ভিড়িওটা দেখে নিতে পারেন https://youtu.be/i2lhwb_OckQ

ইভেন আমি নিজেও আমার Nvidia গ্রাফিক্স কার্ডের জন্য অনেক সমস্যায় পড়েছিলাম । শুরুতে আমার পিসি বার বার Hage করত। পরে সেটা নিয়ে ঘাটাঘাটি করতে গিয়ে দেখি যে আমার পিসিতে লিনাক্স অটো গ্রাফিক্স কার্ড ড্রাইভার ইন্সটল করতে পারেন নাই যার কারণে শুরুর প্রথম সপ্তাহের অভিঙ্গতা অনেক খারাপ ছিল।পরে ম্যানুয়ালি ড্রাইভার ইন্সটল করে নিয়েছি। আপনাদেরও ভয়ের কিছু নেই। আমাদের লিনাক্স কমিউনিটি অনেক ভাল। ডেভলপারা আমাদের মতো ইউজারদের জন্য ফ্রীতেই লিনাক্সের জন্য ড্রাইভার বানিয়ে দেন। এছাড়া লিব্রা অফিস যখন MicroSoft Office এর বিকল্প এবং সমক্ষ হয়ে উঠতে শুরু করে তখন MicroSoft একটা বাজে রকমের কাজ করে বসে। তারা তাদের ফাইলের ফরম্যাট চেইঞ্জ করে যেখানে প্রথমে Doc ছিল সেটা এখন DocX করে ফেলে। এরকম আলো অনেক নোংরামি করে তারা। কিন্তু কিছু দিনের ভিতর লিনাক্সের বিশাল কমিউনিটিও সেই সমস্যার সমাধান করে ফেলে।

লিনাক্স ভিত্তিক অপারেটিং সিস্টেম -

লিনাক্স কার্নেল এর উপর ভিত্তি করে প্রায় ৭০০ এর বেশি ডিস্ট্র্রো তৈরী হয়েছে। বর্তমানে ২০০ এর বেশি সক্রিয় আছে। তবে যেগুলো বন্ধ হয়ে গেছে ঐগুলো অবশ্য বিভিন্ন কারনে বন্ধ হয়েছে। লিনাক্স কার্নেলের উপর ভিত্তি করে বাননো অপারটিং সিস্টেম গুলো কে বলা হয় Linux Distribution বা সংক্ষেপে Distro.একটা ডিস্ট্রো মূলত বেশ কিছু জিনিস নিয়ে গঠিত । এগুলো হল লিনাক্স কার্নেল, GNU টুলস এবং লাইব্রেরিজ, সিস্টেম সফটওয়্যার , উইন্ডো সিস্টেম, উইন্ডো ম্যানেজার, ডেস্কস্টপ এনভায়রনমেন্ট , প্যাকেজ ম্যানেজার, ফ্রি এবং ওপনে র্সোস সফটওয়্যার । এসব নিয়েই তৈরী একটা ডিস্ট্রে।

তাহলে এবার এই বিষয় গুলো নিয়ে জানা যাক -

সব লিনাক্স ডিস্ট্র্রো গুলোতে তো লিনাক্স কার্নেল থাকবে সেটা এতক্ষনে আমরা বুঝে গেছি। আর যা আছে সেগুলো সম্পর্কে কিছু জানা যাকঃ-

উইন্ডো সিস্টেম :

এটি মূলত কম্পিউটাররে গুই বা গ্রাফিক্যাল ইউজার ইন্টারফেইস। যেখানে আপনি মাউস ব্যাবহার করে বিভিন্ন আইকনে বা মেনুতে ক্লিক করে ব্যবহার উপযোগী পরিবেশ তৈরী করতে পারবেন। লিনাক্স ভিত্তিক অপারেটিং সিস্টেম এ X Window System ব্যাবহৃত হয়। আর Windows এ ব্যাবহৃত হয় Deskstop Window Manager .

উইন্ডো ম্যানেজার:

উইন্ডো সিস্টেম এ কিভাবে সবকিছুৃ শো করবে সেটা মূলত উইন্ডো ম্যানেজার কন্ট্রোল করে। লিনাক্স ডিস্ট্রো গুলোতে X Window Manager ব্যাবহার করা হয়।

প্যাকেজ ম্যানেজার:

এটি হল আপনার সিস্টেম এ সফটওয়্যার ইন্সটল, আপগ্রেড, কনফিগার বা রিমুভ এর কাজ করে। লিনাক্স ডিস্ট্রো গুলো একই সফটওয়্যার ব্যাবহার করে থাকে তবে তাদের এই প্যাকেজ ম্যানেজার গুলো ভিন্ন। কয়েকটি জনপ্রিয় প্যাকেজ ম্যানেজার হল RPM, DpKg, Pacman

ডেস্কটপ এনভায়রনমেন্ট

ডেস্কটপ এনভায়রনমেন্ট (DE) বা কম্পিটারের গ্রাফিক্যাল ইউজার ইন্টারফেস। সেখানে একজন ইউজারকে তার কম্পিউটার ব্যাবহার করার একটা সুন্দর এবং সহজবোধ্য পরিবেশ দেয়া হয়। সহজ কথায় বললে আপনি Windows Xp ব্যাবহার করলে যেমন ইন্টার ফেইস পাচ্ছেন সেটা ৮ বা ১০ এ এক হবে না। যদি আপনার ডেস্কটপ এনভায়রনমেন্ট পছন্দ না হয় তবেও সেটা ব্যাবহার করতেই হবে। তবে থিম দিয়ে কিছু পরিবর্তন করা যায় কিন্তু আসলে তেমন পরিবর্তন আসে না। তবে লিনাক্সে বেশ কিছু ডেস্কটপ এনভায়রনমেন্ট আছে এবং সেটা আপনি পছন্দ করে নিতে পারেন। এ রকম কিছু ডেস্কটপ এনভায়রনমেন্ট হল Cinnamon, KDE Plasma, XFCE, MATE, **Gnome **etc. এই প্রতিটা ডেস্কটপ এনভায়রনমেন্ট নিয়ে আরো অনেক শেয়ার করা য়ায় (যেগুলো আমি ব্যাবহার করেছি) আপাতত শুধু ছবি দিয়ে শেষ করলাম। ইন্টারনেট ঘেটে জেনে নিতে পারেন আরো আগ্রহ থাকলে।

Cinnamon DE

KDE Plasma

XFCE

Gnome

ডিস্ট্রো পরিচিতি -

আসলে লিনাক্সে শিফট করার সময় সব থেকে বড় সমস্যা বা কনফিউজিং বিষয় যেটা সেটা ডিস্ট্রো এবং ডেস্কটপ এনভায়রনমেন্ট। তবে উপরে ডেস্কটপ এনভায়রনমেন্ট নিয়ে আলোচনা করা হলো এবার তাহলে ডিস্ট্রোতে ডু মারা যাক। ডিস্ট্রো আসলে কি? এটা দিয়ে কি হ্যাক করে ফেলে নাকি? সহজে বললে ডিস্ট্রো হল একটি অপারেটিং সিস্টেম। কিন্তু এই ডিস্ট্রো এর উপর ভিত্তি করে আরো অনেক ডিস্ট্রো তৈরী করা হয়েছে। এই জিনিস টা এত বড় যে আমি নিজেও এখন সব জানতে পারিনি । আপনি গুগল করে দেখতে পারেন। তবে ছোট করে বলে রাখি ডেবিয়ান হল একটি স্বতন্ত্র অপারেটিং সিস্টেম । এর উপর ভিত্তি করে তৈরী শত শত ডিস্ট্রো আছে তার মাঝে একটি উবুন্টু এটির উপর ভিত্তি করে আরো অনেক অপারেটিং সিস্টেম তৈরী করা হয়েছে। আবার উবন্টুর DE এর উপর ভিত্তি করে উবন্টুর ই আরো কয়েক রকমের ফ্লেভার আছে। আবার Arch (আর্চ) একটি স্বতন্ত্র ডিস্ট্রো। এটা থেকে তৈরী Manjaro, Endeavor OS, Arch Bang ইত্যাদিএগুলোর আবার অনেক গুলো DE আছে। যেমন XFCE, KDE Plasma, GNOME

আসলে এখানে চাইলে আমি প্রতিটা DE এবং ডিস্ট্রো নিয়েই কথা বলতে পারতাম কিন্তু এতে করে এই আটিকেল আরো অনেক বড় হয়ে যাবে। তবে আপনি চাইলে সব গুলো ডিস্ট্রো এর অফিশিয়াল সাইটে ঘুরে আসতে পারেন এবং কোন কোন ডিস্ট্রোতে কি কি ডেস্কটপ এনভায়রনমেন্ট সেগুলো দেখতে পারেন। এবং ইউটিউবেও অনেক রিভিউ পাবেন সেসব এর।

ও হ্যা এখানে আমি কালি লিনাক্স নিয়ে কিছুই বলি নি কারণ আমি সেটা ব্যাবহার করিনি। এছাড়া লিনাক্স মানেই কিন্তু কালি লিনাক্স না। এই কালি লিনাক্স এর ভয় নিয়ে আরো অনেকে লিনাক্সে আসতে চায় না। সুতরাংলিনাক্স মানেই কালি লিনাক্স নয় এখানে আরো অনেক সুন্দর ডিস্ট্রো আছে। যেগুলো ব্যবহার করে আপনিও আস্তে আস্তে লিনাক্স নিয়ে অনেক কিছু শিখতে পারেন।

আরো একটা কথা এখানে বলে নেই যে লিনাক্সে টার্মিনাল নামে একটা জিনিস আছে যার মাধ্যমে আপনি অনেক কিছু করতে পারেবেন। একটা ছোট উদাহরণ দেই টার্মিনাল ব্যবহার করে আপনি আপনার কম্পিউটারে যেকোনো ডিরেক্টরিতে যেতে পারবেন এবং সেখানে ফাইল ফোল্ডার ক্রিয়েট করতে পারবেন। এছাড়া কমান্ড লাইনে আরো অনেক অপারেশনও করতে পারবেন। তবে টার্মিনাল ব্যবহার না করে আপনি লিনাক্স চালাতে পারবেন

এই লেখাটির এর উদ্দেশ্য ছিলো একজন বিগিনার এর কাছে লিনাক্স এর কনসেপ্টটা তুলে ধরা। কারন এতে করে যখন কেউ একজন লিনাক্সে আসবে সে যেন ডিস্ট্রো, প্যাকেজ ম্যানেজার , ডেস্কটপ এনভায়রনমেন্ট এসব টার্ম নিয়ে সমস্যায় না পড়ে এবং নিজে সিদ্ধান্ত নিতে পারে যে তার কেমন ডিস্ট্রো দরকার । আর সর্বোপরি ফেইসবুক + অনলাইনে অনেক লিনাক্স কমিউনিটি গ্রুপ আছে যেখানে আপনি হেল্প পেতে পারেন।

** লিনাক্স জগতে আপনাকে স্বাগতম !**

Top 10 Clean Code Rules 🎨🚀

Anik Dash Akash — Thu, 05 Sep 2024 19:34:27 +0000

When writing code, it's like writing a story. A good story is easy to read, and you understand what's happening right away. The same goes for code! Clean code is not just for computers; it’s for other developers too. Here are the top 10 rules that will help you write code like a pro!

1. Use Meaningful Names

Give your variables, functions, and classes names that clearly describe what they do. For example, instead of x or y, use totalScore or userName. It’s like naming your toys—you don’t call them just “toy 1” or “toy 2,” right?

2. Keep Functions Small

A function should do only one thing and do it well. If your function is too long, it can be confusing. Imagine trying to learn 10 magic tricks at once! It's much easier if you focus on one at a time.

3. Don’t Repeat Yourself (DRY)

If you find yourself writing the same code over and over again, try to combine it into a single function. Think about it—if you have one awesome magic trick, why not reuse it instead of making new ones every time?

4. Use Comments Wisely

Comments should explain why something is happening, not what is happening. The code itself should be clear enough. Imagine you wrote a secret message for your friend—you wouldn’t explain every single word, only the tricky parts.

5. Consistent Formatting

Keep your code looking neat. Use proper spacing, indentation, and line breaks. Just like a tidy room is easier to move around in, clean and organized code is easier to read and understand.

6. Avoid Magic Numbers

A magic number is just a random number in your code. If you use numbers, give them names or store them in variables. For example, instead of 12, use numberOfMonthsInAYear. This way, everyone knows what that number means!

7. Handle Errors Gracefully

Don’t just let your code crash if something goes wrong—write code to handle mistakes. If you’re playing a game, you don’t want it to freeze if you press the wrong button, right? Similarly, your code should know what to do when something unexpected happens.

8. Use Clear Conditions

When you write if statements or loops, make them easy to understand. Instead of doing everything in one line, break it up so others can follow along. It’s like giving directions—be clear, so no one gets lost.

9. Keep Things Simple

Don’t over-complicate things. Simple code is better because it's easier to fix and understand. Think about building a LEGO house—it’s much easier to follow the instructions than making up something overly complicated.

10. Refactor Regularly

Always look back at your code and see if you can improve it. It’s like cleaning your room—you need to tidy it up now and then to make sure everything is in the right place!

By following these 10 clean code rules, you’ll write code that’s easy for others to read and understand. It’s like telling a great story—clear, simple, and fun!

you can follow me on GitHub

How Can I Setup Sublime Text Editor For Competitive Programming

Anik Dash Akash — Fri, 30 Aug 2024 17:51:02 +0000

Coding Environment Setup

sublime is the best text editor for Competitive Programming. Also, it is a lite weight text editor and You can use file input-output so easily Handel big input-output.

So, for setup sublime before you need to prepare your computer.

Install C/C++ compiler :

windows
For linux run this command. pacman is my package manager. Here you can use your package manager command. It's for arch-based Distro. sudo pacman -Syu gcc
Mac os

Install Sublime

Now it's time to install Sublime on your Computer. Goto Sublime Offical Site and download sublime for your current Operating System.

Let's Setup Our Sublime

1 . First Do partition your sublime screen into 3 part. one is for your code and the other two is for the input and output section.

2 . Then click Tools > Build System > New Build System Now a file will be open. In that file, you need to paste the below code.

{
    "shell_cmd": "g++ \"${file}\" -o \"${file_path}/${file_base_name}\"",
    "file_regex": "^(..[^:]*):([0-9]+):?([0-9]+)?:? (.*)$",
    "working_dir": "${file_path}",
    "selector": "source.c, source.c++",
    "variants":
    [
        {
            "name": "Run",
            "shell_cmd": "g++ -O2 -static -Wno-unused-result -std=c++17 -DONLINEJUDGE \"${file}\" -o \"${file_path}/${file_base_name}\" && \"${file_path}/${file_base_name}\""
        }
    ]
}

Almost done!

3 . Now Save this file and remember the name of the file it will need in step 7 . and the file extension will be .sublime-build

4 . Now Create a Folder. And Make .cpp file and two .txt file. Make sure that those three files are in a directory.

5 . Now add your Folder in sublime. Click File > Open Folder and select your folder.

When your add a file in a section then instantly save this file in that section by clicking ctr+s

6 . Now Past this is in your .cpp file

 #include<bits/stdc++.h>
using namespace    std;

int main(){

   #ifdef ONLINEJUDGE
       clock_t tStart = clock();
       freopen("input.txt","r",stdin); //can need to change file . this one for taking input
       freopen("output.txt","w",stdout); // this one for output
  #endif

       //Your Code

  #ifdef ONLINEJUDGE
     fprintf(stderr, "\n>> Runtime: %.10fs\n", (double) (clock() - tStart) / CLOCKS_PER_SEC); // this line gives your code runtime
  #endif

   return 0;
}

7 . now click Tools > Build System > select file which is created in step 3. Now write an input and output code and save input in the input file.

8 . press ctrl + shift + B and a pop up will bring your sublime click one which has -Run part. WOW See you can successfully Generate your output.

9 . Now whenever you need to compile your code just click ctrl + B and you will compile and generate an output corresponding to your input.

Forem: Anik Dash Akash

🔍 Learning TanStack Query — But First, Manual Caching

🧠 The Problem That Sparked the Idea

🔄 First, The Hook Without Caching

💡 Adding Manual Caching (In-Memory)

🧩 How It Works – Step by Step

💻 Example Usage in Component

📘 What I Learned

Conventional Git Commits With Best Practices.

The Basic Convention of a Good Git Commit

Examples of commit types

Combination commit messages

Multiline commit messages:

how to save and exit when writing a commit message in vim or nano:

Tips for writing effective commit messages

Interview Question on JS Variable

1. Basic Definitions & Differences :

2. Scope and Hoisting :

3. Temporal Dead Zone (TDZ):

4. Re-declaration and Re-assignment

5. Practical Scenarios & Edge Cases

6. Real-World Usage Questions

7. Behavioral Questions and Scenarios

8 Scope and Hoisting

9 Re-assignment and Mutation

10 Common Mistakes & Debugging

11 Practical Usage Scenarios

12 Edge Cases and Special Scenarios

13 Shadowing

14 Closures and Variable Capture

15 Destructuring with let and const

16 Temporal Dead Zone Edge Cases

17 Global Variables and Global Scope Pollution

18 Best Practices Questions

19 Advanced Temporal Dead Zone Questions

20 Default Parameters and const in Functions

21 Combining let and const with Conditional Statements

Understanding State and Props in React 💻🌱

What is State? 🤔

Example: Managing State in a Counter Component

Explanation:

Output:

What are Props? 🛠️

Example: Passing Props to a Child Component

Explanation:

Output:

Differences Between State and Props 📋

State and Props Together 🔗

Example: Updating State and Passing it as Props

Explanation:

Output:

Conclusion 📝

Linux - লিনাক্স

লিনাক্স কি?

লিনাক্স নামকরণ -

লিনাক্সের ম্যাস্কট-

লিনাক্স নিয়ে কিছু মিথ-

লিনাক্স ভিত্তিক অপারেটিং সিস্টেম -

তাহলে এবার এই বিষয় গুলো নিয়ে জানা যাক -

উইন্ডো সিস্টেম :

উইন্ডো ম্যানেজার:

প্যাকেজ ম্যানেজার:

ডেস্কটপ এনভায়রনমেন্ট

Cinnamon DE

KDE Plasma

XFCE

Gnome

ডিস্ট্রো পরিচিতি -

Top 10 Clean Code Rules 🎨🚀

1. Use Meaningful Names

2. Keep Functions Small

3. Don’t Repeat Yourself (DRY)

4. Use Comments Wisely

5. Consistent Formatting

6. Avoid Magic Numbers

7. Handle Errors Gracefully

8. Use Clear Conditions

9. Keep Things Simple

10. Refactor Regularly

How Can I Setup Sublime Text Editor For Competitive Programming

how to save and exit when writing a commit message in `vim` or `nano`:

15 Destructuring with `let` and `const`