DEV Community: khaled-17

Swap Variable Values in One Line Using Destructuring — JavaScript Trick

khaled-17 — Sun, 20 Jul 2025 07:54:26 +0000

One of the most common tasks in programming is swapping the values of two variables. Traditionally, this requires using a temporary variable like this:

let a = 1;
let b = 2;

let temp = a;
a = b;
b = temp;

console.log(a, b); // 2 1

While this works just fine, JavaScript (ES6 and later) offers a much cleaner and more concise solution using array destructuring.

✅ The One-Liner Swap

With destructuring, you can swap two variables in just one elegant line:

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a, b); // 2 1

💡 How Does It Work?

On the right side, [b, a] creates a new array with the values in reversed order.
On the left side, [a, b] destructures that array and assigns the values back to the original variables.

This means the value of a becomes the old b, and the value of b becomes the old a.

🚀 Why Is This Useful?

No need for a temporary variable → cleaner memory usage.
More readable and concise → easier for other developers to understand your code.
Great for real-time logic like sorting, toggling, or UI logic (e.g., flipping values in animations).

🧠 Real-World Use Case

Let’s say you're implementing a basic sorting algorithm and you want to swap two items in an array:

if (arr[i] > arr[i + 1]) {
  [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
}

Simple, readable, and highly effective.

📝 Summary

Using array destructuring to swap variable values is a smart JavaScript trick that every modern developer should have in their toolkit. It’s clean, fast, and makes your code much more elegant.

Stay tuned for more powerful tricks like this in our JavaScript Tips & Tricks series!

Swap Variable Values in One Line Using Destructuring — JavaScript Trick

khaled-17 — Sun, 20 Jul 2025 07:54:26 +0000

One of the most common tasks in programming is swapping the values of two variables. Traditionally, this requires using a temporary variable like this:

let a = 1;
let b = 2;

let temp = a;
a = b;
b = temp;

console.log(a, b); // 2 1

While this works just fine, JavaScript (ES6 and later) offers a much cleaner and more concise solution using array destructuring.

✅ The One-Liner Swap

With destructuring, you can swap two variables in just one elegant line:

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a, b); // 2 1

💡 How Does It Work?

On the right side, [b, a] creates a new array with the values in reversed order.
On the left side, [a, b] destructures that array and assigns the values back to the original variables.

This means the value of a becomes the old b, and the value of b becomes the old a.

🚀 Why Is This Useful?

No need for a temporary variable → cleaner memory usage.
More readable and concise → easier for other developers to understand your code.
Great for real-time logic like sorting, toggling, or UI logic (e.g., flipping values in animations).

🧠 Real-World Use Case

Let’s say you're implementing a basic sorting algorithm and you want to swap two items in an array:

if (arr[i] > arr[i + 1]) {
  [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
}

Simple, readable, and highly effective.

📝 Summary

Using array destructuring to swap variable values is a smart JavaScript trick that every modern developer should have in their toolkit. It’s clean, fast, and makes your code much more elegant.

Stay tuned for more powerful tricks like this in our JavaScript Tips & Tricks series!

Stop Unnecessary Re-Renders in React: The Real Cost of Inline Arrow Functions Inside JSX

khaled-17 — Wed, 16 Jul 2025 15:35:21 +0000

🧠 “My component re-renders even though nothing has changed... WHY?”

If you've asked this question while working with React, you’re not alone.

In this article, we’ll walk through a real performance issue caused by using arrow functions inside JSX. You’ll learn:

✅ Why it's a bad practice
✅ How it affects React.memo, useCallback, and re-renders
✅ A working demo that proves the impact
✅ Clean code patterns that make you look like a React pro

🔍 The Problem: New Function on Every Render

When you define an arrow function directly inside JSX, like this:

<button onClick={() => console.log("Clicked")}>Click</button>

You're actually creating a brand new function every time the component re-renders.

Even if the logic inside is exactly the same — the function identity is different.
That means React.memo can’t help you.
That means your child components might re-render unnecessarily.
That means your app is doing more work than it should.

🔬 The Test Case: Counter + Child Component

Let’s build a small project to visualize this problem.

👇 The Setup:

A parent with a counter (useState)
A child that receives a handleClick function
We'll test with React.memo to see if the child re-renders

💣 Problematic Code:

import React, { useState, memo } from "react";

const Child = memo(({ onClick }) => {
  console.log("🔄 Child rendered");
  return <button onClick={onClick}>Click Me</button>;
});

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>

      <button onClick={() => setCount(count + 1)}>Increase</button>

      {/* ❌ This function is re-created on every render */}
      <Child onClick={() => console.log("Child Clicked")} />
    </div>
  );
}

🧨 Every time the "Increase" button is clicked, the Child component re-renders... even though its content didn’t change.

✅ The Clean Fix: Define Handlers Outside JSX

Here’s the correct pattern:

import React, { useState, memo } from "react";

const Child = memo(({ onClick }) => {
  console.log("🔄 Child rendered");
  return <button onClick={onClick}>Click Me</button>;
});

export default function App() {
  const [count, setCount] = useState(0);

  // ✅ Defined outside JSX → Stable function reference
  const handleChildClick = () => {
    console.log("Child Clicked");
  };

  return (
    <div>
      <h1>Count: {count}</h1>

      <button onClick={() => setCount(count + 1)}>Increase</button>

      {/* ✅ Now Child won't re-render unnecessarily */}
      <Child onClick={handleChildClick} />
    </div>
  );
}

🎯 Console Output:

Now, when clicking “Increase”, the child does not re-render ✅

🧠 What’s Actually Happening?

Pattern	Function Identity	React.memo Impact	Performance
`() => console.log()` inside JSX	🆕 New every time	❌ Breaks memo	🔻 Bad
`const fn = () => {}` outside JSX	✅ Stable	✅ Memo works	🚀 Good

🛡️ Bonus: `useCallback` for Dynamic Handlers

Sometimes you can't avoid inline functions (e.g., if the handler depends on props).
Use useCallback to keep the reference stable:

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

This helps avoid unnecessary renders when passing handlers to deeply nested children.

🔥 Final Thoughts

React is fast — but it can’t optimize what you write inefficiently.

Defining arrow functions inside JSX might look clean, but behind the scenes, it’s causing:

🌀 New functions every render
📉 React.memo being bypassed
⚠️ Performance loss in large trees

✅ The fix is simple: move the function outside JSX, or use useCallback when necessary.

Learn this now, and your future React self will thank you.

⚡ "ليه الـ Component بتاعي بيعمل Re-render رغم إن مفيش حاجة اتغيرت؟"

🧠 "My component re-renders even though nothing has changed... WHY?"

لو سألت نفسك السؤال ده وأنت شغال بـ React، فأنت مش لوحدك 👀

في المقال ده، هنتكلم عن مشكلة أداء حقيقية بتحصل بسبب إنك بتستخدم arrow function جوه JSX.
وهنعرف:

✅ ليه دي ممارسة سيئة
✅ إزاي بتأثر على React.memo، و useCallback، والـ re-renders
✅ مثال عملي يوضح المشكلة
✅ أنماط كتابة أنضف (Clean Patterns) هتخليك تكتب زي المحترفين

🔍 المشكلة: كل Render بيولد Function جديدة

لما تكتب arrow function مباشرة داخل JSX، زي كده:

<button onClick={() => console.log("Clicked")}>Click</button>

ده معناه إنك بتولد function جديدة كل مرة الـ component بيعمل render.

حتى لو نفس الكود بالضبط – الـ identity بتاع الـ function مختلفة.
وده معناه إن React.memo مش هيقدر يمنع إعادة الرسم.
وده معناه إن ممكن مكونات الأبناء تعمل re-render من غير سبب.
وده معناه إن الأبليكيشن بيعمل شغل أكتر من اللازم.

🔬 الحالة التجريبية: Counter + Child Component

تعالى نعمل مشروع صغير يوضح المشكلة بشكل عملي.

👇 مكونات التجربة:

مكون أب (Parent) فيه عداد (باستخدام useState)
مكون طفل (Child) بياخد منه دالة handleClick
هنختبر باستخدام React.memo هل الطفل فعلاً بيعيد الرسم ولا لأ

💣 كود فيه مشكلة:

import React, { useState, memo } from "react";

const Child = memo(({ onClick }) => {
  console.log("🔄 Child rendered");
  return <button onClick={onClick}>Click Me</button>;
});

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>

      <button onClick={() => setCount(count + 1)}>Increase</button>

      {/* ❌ الـ function دي بتتولد جديدة في كل render */}
      <Child onClick={() => console.log("Child Clicked")} />
    </div>
  );
}

🧨 كل مرة تدوس على زر "Increase"، المكون الطفل بيعمل re-render… رغم إن مفيش أي تغيير فعلي في الـ props.

✅ الحل النظيف: عرف الدوال خارج JSX

وده الشكل الصح للكود:

import React, { useState, memo } from "react";

const Child = memo(({ onClick }) => {
  console.log("🔄 Child rendered");
  return <button onClick={onClick}>Click Me</button>;
});

export default function App() {
  const [count, setCount] = useState(0);

  // ✅ معرف بره JSX → ثابت في كل render
  const handleChildClick = () => {
    console.log("Child Clicked");
  };

  return (
    <div>
      <h1>Count: {count}</h1>

      <button onClick={() => setCount(count + 1)}>Increase</button>

      {/* ✅ كده Child مش هيعمل re-render من غير داعي */}
      <Child onClick={handleChildClick} />
    </div>
  );
}

🎯 النتيجة في الـ Console:

لما تدوس "Increase"، الطفل مش هيعمل re-render ✅

🧠 إيه اللي بيحصل فعليًا؟

الحالة	هوية الـ Function	تأثيرها على `React.memo`	الأداء
`() => console.log()` جوه JSX	🆕 جديدة كل مرة	❌ بتكسر memo	🔻 ضعيف
`const fn = () => {}` بره JSX	✅ ثابتة	✅ memo بيشتغل	🚀 ممتاز

🛡️ مكافأة: استخدام `useCallback` مع دوال ديناميكية

في بعض الحالات، بتضطر تستخدم دالة جوه JSX (مثلاً لو بتعتمد على props).
هنا تقدر تستخدم useCallback عشان تحافظ على ثبات الـ reference:

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

وده بيمنع إعادة الرسم غير الضرورية لما تبعت الدالة لأطفال بعيدين في الشجرة (deep children).

🔥 خلاصة

React سريع، لكن مش هيقدر يعمل Optimizations لو الكود نفسه مش مكتوب بكفاءة.

كتابة arrow functions داخل JSX شكلها نظيف، لكن بتسبب:

🌀 دوال جديدة في كل render
📉 تعطيل React.memo
⚠️ مشاكل أداء حقيقية في المشاريع الكبيرة

✅ الحل بسيط: حط الدالة خارج JSX، أو استخدم useCallback لما يكون ضروري.

اتعلم النقطة دي دلوقتي، ومستقبلك في React هيشكرك عليها 🙌

⚠️ The Hidden Cost of Overengineering: A Smarter Way to Use React in Traditional HTML Pages

khaled-17 — Wed, 16 Jul 2025 13:23:02 +0000

🧩 The Problem: Your Website Needs Interactivity, But Rewriting Everything in React Is Overkill

You're working on a website built with plain HTML, Laravel, or even WordPress. Suddenly, there's a new requirement:

"Can we make this part more dynamic? Maybe a comment section, a like button, or a modal?"

Your developer instincts kick in:

“Let’s migrate the whole thing to React!”

But hold on. That “small improvement” just opened the floodgates to:

Complex build tools like Webpack or Vite
Routing systems you don't need
Code splitting, SSR, hydration issues
A full rewrite of your working HTML pages

You’ve just used a rocket to swat a fly.

💡 The Smarter Solution: Use React Partially — Not as a Full App

What if you could get the power of React without rebuilding your whole frontend?

That's exactly what many modern websites are doing:

Injecting small, interactive React components into existing HTML pages.

Instead of using one big App component, you can embed React in multiple places on the same page like so:

<div id="comments-root"></div>
<div id="chat-root"></div>
<div id="like-button-root"></div>

Each of these div elements becomes a “mini” React root, powering just one feature — no overkill, no rewrites.

🧪 Real-World Case: A Marketing Site Needs a “Like” Button

Imagine you're working on a marketing website with mostly static content. Suddenly, your client asks:

"We want users to ‘like’ sections of content — can you make that interactive?"

You have 3 options:

Option	Cost	Complexity	Performance
Rewrite the whole page in React	🔴 High	🔴 High	⚠️ Potentially bloated
Use jQuery or Vanilla JS	🟡 Low	🟠 Messy & hard to scale	✅ Fast
✅ Inject a small React component only where needed	✅ Low	✅ Simple	✅ Fast & Scalable

The third option wins.
Here’s why:

You reuse your React skills
You keep the rest of your site untouched
You only load what’s needed
You don’t waste time on unnecessary setup

🔧 How It Works: React in Plain HTML

Here's how to make it happen without any build tools:

1. Load React and Babel via CDN

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2. Create Your Component in JSX

<script type="text/babel">
  function LikeButton() {
    const [liked, setLiked] = React.useState(false);
    return (
      <button onClick={() => setLiked(!liked)}>
        {liked ? "You liked this 👍" : "Like"}
      </button>
    );
  }

  const root = ReactDOM.createRoot(document.getElementById('like-button-root'));
  root.render(<LikeButton />);
</script>

3. Add the Component to Your HTML Page

<div id="like-button-root"></div>

That’s it! No npm, no create-react-app, no complexity.

📌 Why Alternative Solutions Cost More

Rewriting the entire frontend in React just for one or two dynamic features is expensive in time, energy, and complexity:

✅ You’ll need a deployment pipeline
✅ You’ll need to retrain non-JS teammates (designers, content editors)
✅ Your site will likely load slower unless carefully optimized

Using partial React injection is lean, flexible, and scalable.

🧠 Key Takeaways

You don’t need to rebuild your whole site to benefit from React.
React supports multi-root rendering — you can embed it into existing pages wherever you need interactivity.
This approach keeps your tech stack light and your code maintainable.
It’s perfect for adding dynamic features to WordPress, Laravel, or legacy HTML sites.

🧪 Try It Yourself: Download the Example

🎯 Final Thought

Modern problems don’t always need modern rewrites.
Sometimes, the smartest solution is blending the old with the new — and React is flexible enough to meet you halfway.

🤔 Why Not Always Put "Relationships" in the Table? The Secret of the Join Table!

khaled-17 — Tue, 15 Apr 2025 11:05:01 +0000

🤔 Why Not Always Put "Relationships" in the Table? The Secret of the Join Table!

Have you ever found yourself struggling to link two tables in a clean way when designing a database?

For example, you have Dishes and Categories, and each dish can belong to multiple categories, and each category can include multiple dishes.

At this point, you might ask yourself:

Should I put the category ID in the dishes table? Or should I put the dish ID in the categories table? Or what exactly should I do? 🤯

This is where the hero comes in: The Join Table!

Let’s explain why it’s the ideal solution, and we’ll provide clear examples and tables to support the idea.

💡 What Does a Many-to-Many Relationship Mean?

A many-to-many relationship means that both sides can have multiple connections.

A simple example:

🥘 Dishes	📂 Categories
Pizza	Italian
Sushi	Japanese
Pizza	Snack
Sushi	Healthy

Pizza appears in multiple categories, and the "Snack" category contains multiple dishes.

❌ Why Can't We Just Put It in One Column?

If you tried storing category IDs as a list in the dishes table like this:

id	Dish Name	category_ids
1	Pizza	1,3
2	Sushi	2,4

It breaks the normalization rules and makes searching and querying incredibly difficult.

SQL doesn’t work well with string arrays.

✅ The Ideal Solution: The Join Table

The Join Table is a third table that only contains the relationships between two tables.

Imagine this structure:

Dishes Table `dishes`

id	Name
1	Pizza
2	Sushi

Categories Table `categories`

id	Name
1	Italian
2	Japanese
3	Snack
4	Healthy

Join Table `dish_categories`

dish_id	category_id
1	1
1	3
2	2
2	4

🚀 Why is the Join Table Better?

1. Data Organization and Cleanliness

No duplication or mixing of data within cells.
Each value is in its own cell, as the rules suggest.

2. Stronger and Simpler Queries

You can easily perform a simple JOIN to get:

All categories linked to a specific dish.
All dishes within a specific category.

SELECT dishes.name
FROM dishes
JOIN dish_categories ON dishes.id = dish_categories.dish_id
JOIN categories ON categories.id = dish_categories.category_id
WHERE categories.name = 'Healthy';

3. Flexibility for Future Expansion

If you want to add additional information to the relationship (not to the dish or category itself), like:

Display order within a category.
Whether the relationship is active.
Admin notes.

It’s easy to add columns to the dish_categories table.

🧱 SQL to Create the Tables:

CREATE TABLE dishes (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255) NOT NULL
);

CREATE TABLE categories (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255) NOT NULL
);

CREATE TABLE dish_categories (
  dish_id INT,
  category_id INT,
  PRIMARY KEY (dish_id, category_id),
  FOREIGN KEY (dish_id) REFERENCES dishes(id),
  FOREIGN KEY (category_id) REFERENCES categories(id)
);

🎯 Conclusion:

The Join Table is not just a "technical fix," it’s an essential part of designing databases in a clean, flexible, and scalable way.

Whenever you encounter complex relationships, always remember that the right solution isn’t always adding a new column… sometimes the right solution is adding a new table 😉

Methodical Naming in React: How It Improves Code Organization

khaled-17 — Wed, 06 Nov 2024 09:58:36 +0000

Methodical Naming in React: How It Improves Code Organization

In programming, especially when working with React, following a methodical naming convention is crucial for keeping the code organized and easy to understand. In this article, we'll show you the difference between bad naming and good naming practices using practical examples.

Why Do We Use a Naming Convention?

Clarity and Organization:

By following a methodical naming convention, it becomes easier for other developers to understand the code quickly. If you see onClick, you know it represents a click event. If you see handleClick, you know it’s a function that handles that event.

Standardization:

Adhering to these commonly accepted naming conventions makes the code more organized and easier to maintain. It allows everyone to work on the same project without having to think about unconventional names.

Future Scalability:

If you want to add more events or handlers such as onDoubleClick or onHover, you can simply follow the same naming system, making the code easily scalable.

Bad Practice - Example of Code Not Following the Naming Convention:

function CustomButton({ action }) {
    return (
        <button onClick={action}>Click me</button>
    );
}

function App() {
    const logAction = () => {
        console.log('Button was clicked!');
    };

    return <CustomButton action={logAction} />;
}

Issues with This Code:

Unclear Naming: The prop action is used instead of onClick or another name that clearly indicates this is a function handling a click event.
Inconsistent with Standards: It may be difficult for other developers to understand the purpose of action just by looking at the code.

Good Practice - Example of Code Following the Naming Convention:

function CustomButton({ onButtonClick }) {
    return (
        <button onClick={onButtonClick}>Click me</button>
    );
}

function App() {
    const handleButtonClick = () => {
        console.log('Button was clicked!');
    };

    return <CustomButton onButtonClick={handleButtonClick} />;
}

Benefits of This Code:

Methodical Naming: onButtonClick is used as a prop to represent the event, and handleButtonClick is the function that handles this event.
Clarity: When you see onButtonClick, you immediately know it’s related to the button's click event, and when you see handleButtonClick, you know it’s the function handling that event.
Scalability: If you want to add other events like onDoubleClick or onMouseEnter, it's easy to follow the same methodology by using onDoubleClick and handleDoubleClick.

Differences Between Bad and Good Code:

Clarity: In the good code, the naming convention makes the code much clearer. When you see onButtonClick and handleButtonClick, you immediately understand that it's related to the click event.
Organization: The good code is more organized. You can add new events without needing to reorganize the whole code.
Scalability: In the good code, you can easily add new events like onDoubleClick or onFocus without affecting other parts of the application.

Problems You Will Face If You Don’t Follow This Naming Convention:

Reduced Clarity: If you don’t follow consistent naming practices, other developers may struggle to understand the purpose of your props and functions. It will take more time to understand what action refers to or what functionality is attached to it.
Increased Confusion: Without standard naming conventions, new developers working on the codebase may get confused when dealing with events and event handlers. This can lead to misunderstandings, bugs, and slower development.
Harder Maintenance: If the project grows, maintaining the code without a standard naming system becomes challenging. You may forget the purpose of certain functions or props, especially if they don’t follow the conventional naming patterns.
Scalability Issues: As your project expands, not using consistent naming conventions for events and handlers can make it more difficult to add new features or refactor the code.

Conclusion:

Adopting a methodical naming convention in React, such as using onSomething for events and handleSomething for the functions that handle those events, helps make the code more organized, clear, and maintainable. These practices are not just about names; they are about establishing a working style that helps you and your team develop scalable, easy-to-understand applications.

Building a Reusable Progress Bar Component in React with Tailwind CSS

khaled-17 — Sun, 01 Sep 2024 13:48:54 +0000

Introduction:

Every project needs a visually appealing way to display progress. Whether it's tracking task completion or visualizing data, a well-designed progress bar can make a significant impact. Instead of creating new ones from scratch each time, why not build a reusable, customizable component? In this article, we'll show you how to create a versatile Progress Bar component in React using Tailwind CSS. By the end, you'll have a flexible tool ready for use across different projects.

Why You Should Care:

Reusability in code is key to efficiency. Imagine you have multiple projects that need progress bars with different styles. Instead of rewriting the same component over and over, you can use a single, customizable component, allowing you to tweak styles and behaviors easily through props. This approach saves time and ensures consistent design throughout your applications.

Step-by-Step Guide: Building the Reusable Progress Bar

Step 1: Set Up the ProgressBar Component

We'll start by creating a new React component named ProgressBar. This component will accept several props, allowing you to customize the progress percentage, colors, and height.

import React from "react";

// ProgressBar component that accepts custom props
const ProgressBar = ({ completedProgress, totalProgress, barColor = "#FF6347", backgroundColor = "#F0E68C", height = "6" }) => {
    // Calculate the progress percentage based on the props
    const progressPercentage = (completedProgress / totalProgress) * 100;

    return (
        <div className={`w-full bg-[${backgroundColor}] rounded-full h-${height}`}>
            <div
                className={`bg-[${barColor}] h-${height} rounded-full`}
                style={{ width: `${progressPercentage}%` }}
            ></div>
        </div>
    );
};

export default ProgressBar;

Step 2: Understanding the Props

completedProgress: The amount of progress completed, passed as a number.
totalProgress: The total amount of progress possible, also passed as a number.
barColor: The color of the progress bar itself, with a default value of #FF6347 (Tomato).
backgroundColor: The background color of the progress bar, with a default value of #F0E68C (Khaki).
height: The height of the progress bar, with a default value of 6 (in Tailwind CSS units).

These props provide flexibility and allow you to easily customize the component to fit different designs.

Step 3: Using the ProgressBar Component

Now that we have our component, let's see how it can be used in various scenarios:

import React from "react";
import ProgressBar from "./ProgressBar";

const App = () => {
    return (
        <div className="p-4 space-y-4">
            {/* Example 1: Using default values */}
            <ProgressBar completedProgress={50} totalProgress={100} />

            {/* Example 2: Customizing colors and height */}
            <ProgressBar
                completedProgress={30}
                totalProgress={100}
                barColor="#4682B4" // Steel Blue color
                backgroundColor="#FFD700" // Gold color
                height="8"
            />

            {/* Example 3: Customizing progress percentage */}
            <ProgressBar completedProgress={75} totalProgress={100} barColor="#32CD32" />  // Lime Green color
        </div>
    );
};

export default App;

Step 4: Integrating with Redux (Optional)

If your application uses Redux for state management, you can easily integrate this ProgressBar component by connecting it to the Redux store:

import React from "react";
import { useSelector } from "react-redux";

// Redux-connected ProgressBar component
const ProgressBar = ({ barColor = "#FF6347", backgroundColor = "#F0E68C", height = "6" }) => {
    const { completedProgress, totalProgress } = useSelector((state) => state.progress);

    // Calculate progress percentage
    const progressPercentage = (completedProgress / totalProgress) * 100;

    return (
        <div className={`w-full bg-[${backgroundColor}] rounded-full h-${height}`}>
            <div
                className={`bg-[${barColor}] h-${height} rounded-full`}
                style={{ width: `${progressPercentage}%` }}
            ></div>
        </div>
    );
};

export default ProgressBar;

Conclusion: Achieve Consistency and Efficiency with Reusable Components

Creating reusable components like this ProgressBar not only streamlines your workflow but also promotes consistency across your projects. With a few simple tweaks, you can adapt the component to match various design requirements, ensuring your applications look polished and professional. By incorporating reusable components into your toolkit, you’ll save time and enhance the scalability of your codebase. Start building your reusable components today, and experience the benefits of efficient and consistent UI development!

How to prevent pull-down-to-refresh of mobile browser

khaled-17 — Wed, 14 Aug 2024 13:04:25 +0000

// PreventPullToRefresh.js
import React, { useEffect } from 'react';

const PreventPullToRefresh = ({ children }) => {
  useEffect(() => {
    const disablePullToRefresh = (e) => {
      // Prevent default action if the touch move is vertical
      if (e.touches.length > 1 || e.touches[0].clientY > 0) {
        e.preventDefault();
      }
    };

    // Add event listener to the document
    document.addEventListener("touchmove", disablePullToRefresh, { passive: false });

    // Clean up the event listener on unmount
    return () => {
      document.removeEventListener("touchmove", disablePullToRefresh);
    };
  }, []);

  return (
    <div style={{ touchAction: 'pan-x' }}>
      {children}
    </div>
  );
};

export default PreventPullToRefresh;

// App.js
import React from 'react';
import PreventPullToRefresh from './PreventPullToRefresh'; // Adjust import path as necessary

const App = () => {
  return (
    <PreventPullToRefresh>
      <div>
        {/* Rest of the app components */}
        <h1>Welcome to My App</h1>
        <p>This content is within a component that disables the pull-to-refresh feature.</p>
      </div>
    </PreventPullToRefresh>
  );
};

export default App;

Disabling Pull-to-Refresh in Android Chrome

The Problem:

When developing web applications, especially for mobile, you may encounter an unintended behavior in Android's Chrome browser: the pull-to-refresh feature. This feature, while useful in general browsing, can interfere with the functionality of web apps, particularly those with vertical scrolling or drag-and-drop interfaces. When a user scrolls down rapidly, the page can unintentionally refresh, disrupting the user experience.

Assumptions:

To solve this issue, the following assumptions are made:

The application uses React.
You want to prevent the pull-to-refresh action globally or within specific components.
The solution should be clean and not interfere with the regular functioning of other touch events.

Solution:

To address this issue, I referred to a Stack Overflow discussion. The accepted answer suggests disabling the pull-to-refresh feature by listening to the touchmove event and preventing the default action if a vertical scroll is detected.

In the provided solution, we create a React component named PreventPullToRefresh that applies this behavior. By wrapping your application or specific parts of it with this component, you effectively disable the pull-to-refresh feature in those areas.

This approach ensures that your app maintains its intended behavior without unwanted page refreshes, providing a smoother user experience on Android devices.

Code Explanation:

The useEffect hook is used to add an event listener to the document for the touchmove event.
Inside the event handler, we check if the touch movement is vertical (clientY > 0). If it is, we prevent the default action, which in this case would be refreshing the page.
The touchAction: 'pan-x' style is applied to ensure that horizontal scrolling is still allowed.

This simple yet effective solution can be implemented in any React application where you need to prevent the pull-to-refresh behavior.

What If You Need to Use useSelector Outside of React Components?

khaled-17 — Mon, 29 Jul 2024 10:32:27 +0000

What If You Need to Use `useSelector` Outside of React Components?

useSelector is a popular hook from the react-redux library used within React components to access the Redux store state. However, there may be situations where you need to access Redux store state from outside of React components, such as in plain JavaScript files or when performing asynchronous operations. In this article, we’ll explore why you might need to access Redux state outside of React components and how to achieve that effectively.

Why Might You Need to Use `useSelector` Outside of React Components?

Interacting with Redux Store from Non-Component JavaScript Files:
There may be instances where you need to access the Redux store state from files or functions that are not part of the React component tree, such as during asynchronous operations or custom utility functions.
Performing Logic Based on Redux State:
Sometimes, you might need to execute specific logic based on the Redux state, such as checking the current language or user settings before performing certain actions.

How to Handle Accessing Redux State Outside of React Components

1. Using `store.getState()`

You can directly access the Redux state using store.getState() if you have access to the Redux store.

Example:

import store from './path/to/your/store';

const getLang = () => {
    const state = store.getState();
    return state.userAppReducer.lang;
};

const getScoreDB = async (id, type, QuesRightAns) => {
    const lang = getLang(); // Use the language here

    // send lang  to db to get data by lang 
};

Note: Ensure that you import the store correctly and update it as needed.

2. Using Context API

If you need to share state across various parts of your application that might not be part of the React component tree, you can use the Context API to provide the state.

Example:

import React, { createContext, useContext } from 'react';
import { useSelector } from 'react-redux';

const LangContext = createContext();

export const LangProvider = ({ children }) => {
    const lang = useSelector((state) => state.userAppReducer.lang);
    return (
        <LangContext.Provider value={lang}>
            {children}
        </LangContext.Provider>
    );
};

export const useLang = () => useContext(LangContext);

Using Context in Non-Component Files:

import { useLang } from './LangContext';

const someFunction = () => {
    const lang = useLang();
    // Use the language here
};

3. Using `redux-thunk` or `redux-saga`

You can use middleware such as redux-thunk or redux-saga to handle asynchronous operations and access state within the middleware.

Example Using redux-thunk:

// actions.js
export const fetchScoreDB = (id, type, QuesRightAns) => async (dispatch, getState) => {
    const lang = getState().userAppReducer.lang;
    const data = await getScoreDB(id, type, QuesRightAns);
    // Continue with the rest of the operations here
};

Conclusion

In most cases, useSelector is used within React components to access state. However, if you need to access state from outside React components, you can use store.getState(), Context API, or middleware like redux-thunk or redux-saga to effectively access state and manage asynchronous operations. Make sure to choose the method that best fits the design and requirements of your application.

How to make js built-in function

khaled-17 — Mon, 29 Jul 2024 08:28:57 +0000

We will explain a function to which we send the array and convert all its contents to lowercase letters

 const toLowerCaseArray = (array) => {
  if (!Array.isArray(array)) {
    throw new Error('Input must be an array');
  }

  return array.map(item => {
    if (typeof item === 'string') {
      return item.toLowerCase();
    }
    return item; // Return the item unchanged if it's not a string
  });
};

 var array1 = ['Hello', 'WORLD', 'JavaScript'];

 var lowerCaseArray1 = toLowerCaseArray(array1);

 console.log(lowerCaseArray1);

Yes, as you can see, it is just a function. Send in the array parameter. Then the function converts all its elements into to Lower Case for words.

But we hope we don't build something much stronger

*We want to build something that uses JavaScript connectivity
*

var array1 = ['Hello', 'WORLD', 'JavaScript'];

 var lowerCaseArray1 = array1.toLowerCaseArray();

 console.log(lowerCaseArray1);

NOT

 var array1 = ['Hello', 'WORLD', 'JavaScript'];

 var lowerCaseArray1 = toLowerCaseArray(array1);

 console.log(lowerCaseArray1);

Our code will be

 Array.prototype.toLowerCaseArray = function() {
  if (!this.every(item => typeof item === 'string')) {
    throw new Error('All elements in the array must be strings');
  }

  return this.map(item => item.toLowerCase());
};

 var array1 = ['Hello', 'WORLD', 'JavaScript'];

 var lowerCaseArray1 = array1.toLowerCaseArray();

 console.log(lowerCaseArray1);

in 3 minutes Adding Dark/Light Mode Switch to a React App and tailwindcss

khaled-17 — Mon, 19 Feb 2024 17:41:52 +0000

Did you know that all people in the world disagreed on their love for movie villains?
But everyone agreed that dark mode is always better 🌓🌑🌒🌗🌘🌚

One of the quickest ways to create an application that react to the tailwindcss
This is the article

Install Tailwind CSS with Vite

But what if you want to control the style of your site?

Step 1: Install Packages

Before implementing the Dark/Light mode switch, make sure you have the required packages installed. In your React project, install the following packages:

Animated dark mode toggle as seen in blogs!



npm install react-toggle-dark-mode

Step 2: Create Modeswitcher Component

Create a new file named Modeswitcher.js in the Components folder of your project. This component will handle the dark/light mode switching.



import { useState } from "react";

import { DarkModeSwitch } from "react-toggle-dark-mode";

export default function Modeswitcher() {

  // State to track the current theme

  const [isDarkMode, setDarkMode] = useState(() => localStorage.getItem('theme') || 'light');

// Add default theme to local storage if not set

  localStorage.theme ? null : localStorage.setItem('theme', 'light');

// Function to toggle dark mode

  const toggleDarkMode = (checked) => {

    const newTheme = isDarkMode === 'light' ? 'dark' : 'light';

    setDarkMode(newTheme);

    localStorage.setItem('theme', newTheme);

  };

// Apply dark mode styles based on local storage or system preference

  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {

    document.documentElement.classList.add('dark');

  } else {

    document.documentElement.classList.remove('dark');

  }

// Return the DarkModeSwitch component

  return (

    <DarkModeSwitch

      style={{ marginBottom: '2rem' }}

      checked={isDarkMode === 'dark'}

      onChange={toggleDarkMode}

      size={120}

    />

  );

}

step 3: GO to tailwind.config.js



tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {

  darkMode: 'class',

  // ...

}

Step 3: Integrate Modeswitcher in App Component

Now, use the Modeswitcher component in your main application file (App.js or similar).



// File - App.js

import Modeswitcher from "./Components/Modeswitcher";

function App() {

  return (

    <div>

    <div className='text-center pt-10'>

        <h1 className="text-green text-3xl font-bold">

        Dark Mode +  ReactJS + Tailwind CSS

    <span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h3</span> <span class="na">className</span><span class="p">=</span><span class="s">"text-black dark:text-white text-2xl"</span><span class="p">&gt;</span>

    <span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">center</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span>
        <span class="na">className</span><span class="p">=</span><span class="err">"</span><span class="na">w-80</span> <span class="na">rounded-lg</span> <span class="na">border</span> <span class="na">p-10</span>
                  <span class="na">bg-white</span> <span class="na">border-gray-800</span>  
        <span class="na">shadow-md</span> <span class="na">dark</span><span class="err">:</span><span class="na">bg-gray-800</span> <span class="na">dark</span><span class="err">:</span><span class="na">border-gray-100</span> <span class="err">"</span>
    <span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nc">Modeswitcher</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">className</span><span class="p">=</span><span class="s">"p-3"</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="p">=</span><span class="s">"##"</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">className</span><span class="p">=</span><span class="s">"  font-bold  text-gray-900 dark:text-white"</span> <span class="p">&gt;</span>
                    hello in  
                <span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">p</span> <span class="na">className</span><span class="p">=</span><span class="s">"mb-3  text-gray-900  dark:text-gray-300"</span> <span class="p">&gt;</span>

                how are you to day 
            <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">center</span><span class="p">&gt;</span>



</div>

)

}

export default App

Step 4: Run Your React App

After completing the above steps, save your files and run your React app:

Elevate Your Website's Look: Dynamic Favicon with React

khaled-17 — Sat, 17 Feb 2024 22:32:37 +0000

Elevate Your Website's Look: Dynamic Favicon with JavaScript
"Revamp Your Website with Dynamic Favicon in JavaScript"

Problem: 🔕🧾
A client requested that the favicon be changed depending on whether the user opened the tap
To set a specific icon
Or open a different tap
Another icon appears

In the end, the icon will look like this

*When the user is in the tap
*

*When the user is in the different tap
*

Unlock the potential of your website's visual appeal by adding a dynamic touch to its favicon. In this tutorial, you'll discover how to seamlessly change your site's favicon based on the time of day using JavaScript. Elevate your web development skills and give your users a personalized and engaging experience.

It's all about
is Document: visibilitychange event

Article:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Ret</title>
    <script type="module" src="/src/main.jsx"></script>
  </head>
  <body>
    <div id="root"></div>

    <script>
      // Get the current hour
      var currentHour = new Date().getHours();

      // Define the day and night icons
      var dayIcon = "/day-icon.svg";
      var nightIcon = "/night-icon.svg";

      // Choose the appropriate icon based on the current hour
      var iconPath = currentHour >= 6 && currentHour < 18 ? dayIcon : nightIcon;

      // Set the favicon dynamically
      var linkElement = document.querySelector("link[rel='icon']");
      linkElement.href = iconPath;
    </script>
  </body>
</html>

The icon changes depending on whether the user has opened the page or not



<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/onpage.svg" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my stite </title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
    <script >
var linkElement = document.querySelector("link[rel='icon']");
  window.addEventListener('visibilitychange', () => {
    linkElement.href = document.hidden ? "start.png":"onpage.svg";
});
    </script>
  </body>
</html>

Pausing music on transitioning to hidden



document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

for icons https://icons8.com/icons

Upgrade your website's user experience by implementing this simple JavaScript trick. Learn the step-by-step process and make your site more professional and visually appealing. Don't miss out on this opportunity to stand out in the competitive world of web development! 🌐✨ #javascript #webdevelopment #favicon #programmingtips

DEV Community: khaled-17

Swap Variable Values in One Line Using Destructuring — JavaScript Trick

✅ The One-Liner Swap

💡 How Does It Work?

🚀 Why Is This Useful?

🧠 Real-World Use Case

📝 Summary

Swap Variable Values in One Line Using Destructuring — JavaScript Trick

✅ The One-Liner Swap

💡 How Does It Work?

🚀 Why Is This Useful?

🧠 Real-World Use Case

📝 Summary

Stop Unnecessary Re-Renders in React: The Real Cost of Inline Arrow Functions Inside JSX

🧠 “My component re-renders even though nothing has changed... WHY?”

🔍 The Problem: New Function on Every Render

🔬 The Test Case: Counter + Child Component

👇 The Setup:

💣 Problematic Code:

✅ The Clean Fix: Define Handlers Outside JSX

🎯 Console Output:

🧠 What’s Actually Happening?

🛡️ Bonus: useCallback for Dynamic Handlers

🔥 Final Thoughts

⚡ "ليه الـ Component بتاعي بيعمل Re-render رغم إن مفيش حاجة اتغيرت؟"

🧠 "My component re-renders even though nothing has changed... WHY?"

🔍 المشكلة: كل Render بيولد Function جديدة

🔬 الحالة التجريبية: Counter + Child Component

👇 مكونات التجربة:

💣 كود فيه مشكلة:

✅ الحل النظيف: عرف الدوال خارج JSX

🎯 النتيجة في الـ Console:

🧠 إيه اللي بيحصل فعليًا؟

🛡️ مكافأة: استخدام useCallback مع دوال ديناميكية

🔥 خلاصة

⚠️ The Hidden Cost of Overengineering: A Smarter Way to Use React in Traditional HTML Pages

🧩 The Problem: Your Website Needs Interactivity, But Rewriting Everything in React Is Overkill

💡 The Smarter Solution: Use React Partially — Not as a Full App

🧪 Real-World Case: A Marketing Site Needs a “Like” Button

🔧 How It Works: React in Plain HTML

1. Load React and Babel via CDN

2. Create Your Component in JSX

3. Add the Component to Your HTML Page

📌 Why Alternative Solutions Cost More

🧠 Key Takeaways

🧪 Try It Yourself: Download the Example

🎯 Final Thought

🤔 Why Not Always Put "Relationships" in the Table? The Secret of the Join Table!

🤔 Why Not Always Put "Relationships" in the Table? The Secret of the Join Table!

💡 What Does a Many-to-Many Relationship Mean?

❌ Why Can't We Just Put It in One Column?

✅ The Ideal Solution: The Join Table

Imagine this structure:

Dishes Table dishes

Categories Table categories

Join Table dish_categories

🚀 Why is the Join Table Better?

1. Data Organization and Cleanliness

2. Stronger and Simpler Queries

3. Flexibility for Future Expansion

🧱 SQL to Create the Tables:

🎯 Conclusion:

Methodical Naming in React: How It Improves Code Organization

Methodical Naming in React: How It Improves Code Organization

Why Do We Use a Naming Convention?

Bad Practice - Example of Code Not Following the Naming Convention:

Issues with This Code:

Good Practice - Example of Code Following the Naming Convention:

Benefits of This Code:

Differences Between Bad and Good Code:

Problems You Will Face If You Don’t Follow This Naming Convention:

Conclusion:

Building a Reusable Progress Bar Component in React with Tailwind CSS

Introduction:

Why You Should Care:

Step-by-Step Guide: Building the Reusable Progress Bar

Step 1: Set Up the ProgressBar Component

Step 2: Understanding the Props

Step 3: Using the ProgressBar Component

Step 4: Integrating with Redux (Optional)

🛡️ Bonus: `useCallback` for Dynamic Handlers

🛡️ مكافأة: استخدام `useCallback` مع دوال ديناميكية

Dishes Table `dishes`

Categories Table `categories`

Join Table `dish_categories`

What If You Need to Use `useSelector` Outside of React Components?

Why Might You Need to Use `useSelector` Outside of React Components?

1. Using `store.getState()`

3. Using `redux-thunk` or `redux-saga`