| کانال توسعه‌دهندگان وب

| کانال توسعه‌دهندگان وب |

🌙 Dark Mode با یک کلاس روی <html>

خیلی وقت‌ها برای پیاده‌سازی Dark Mode کلی if/else توی JS و کلی selector توی CSS می‌نویسیم، درحالی‌که می‌شه همه‌چیز رو تمیز و مقیاس‌پذیر با یک کلاس روی ریشه‌ی سند مدیریت کرد.

✅ ایده:
فقط روی تگ <html> یک کلاس مثل .dark ست می‌شه و بقیه‌ی استایل‌ها بر اساس همون کلاس عوض می‌شن. این الگو توی خیلی از Design Systemها و کتابخونه‌ها استفاده می‌شه.

🔧 نمونه‌ی ساده:

/* حالت پیش‌فرض (Light) */
:root {
  --bg: #ffffff;
  --fg: #111827;
}

/* وقتی Dark Mode فعاله */
html.dark {
  --bg: #0f172a;
  --fg: #e5e7eb;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  transition: background-color 150ms ease, color 150ms ease;
}

و در JS فقط یک بار toggle انجام می‌شه:

const root = document.documentElement;

function toggleTheme() {
  root.classList.toggle('dark');
}

✨ نکات کاربردی:
• با CSS Variable فقط یک‌بار رنگ‌ها رو تعریف می‌کنی و هرجا لازم بود از var(--bg) و var(--fg) استفاده می‌کنی.
• اگر تعداد رنگ‌ها زیاد شد، هنوز هم فقط در دو بلاک :root و html.dark ویرایش می‌شن و باقی کامپوننت‌ها دست نمی‌خورن.
• می‌شه این الگو رو با prefers-color-scheme هم ترکیب کرد تا بر اساس تم سیستم‌عامل، کلاس dark رو ست کنی.

📚 برای جزئیات بیشتر درباره CSS Custom Properties:
MDN - Using CSS custom properties

امتحان این الگو روی یک صفحه‌ی ساده، سریع‌ترین راه برای مرتب کردن تم پروژه‌های بعدی است و جلو کلی refactor دردناک رو می‌گیره.

🔖 #Web #وب #Frontend #Backend #CSS #Dark_Mode #Frontend #Best_Practices #Web

👤 Developix

💎 Channel: @DevelopixWeb

❤5

919 views17:00

| کانال توسعه‌دهندگان وب |

Forwarded from ابر ویراک

⭕️ ویراک کلود
زیرساختی مطمئن برای کسب و کارهای آنلاین
🎁 20% شارژ بیشتر روی اولین واریزی
⚡️با کد معرف: 10% شارژ برای شما و 10% برای دوستتان!

🔘با IPv6 رایگان
🔘با IP مازاد
🔘تست رایگان 2 روزه
🔘فایروال اختصاصی
🔘با API برای حرفه‌ای ها
🔘پشتیبانی 24 ساعته
🔘آپلود رایگان

📞 همین حالا با ما تماس بگیرید و این فرصت فوق‌العاده رو از دست ندید!
🔻02191555530

🌐

Virakcloud.com

Please open Telegram to view this post

VIEW IN TELEGRAM

👍1

430 views16:30

| کانال توسعه‌دهندگان وب |

👨‍💻 سوال کد برای توسعه‌دهندگان وب (JavaScript)

خروجی نهایی اجرای کد زیر در console چیست؟

به تفاوت execution context در arrow function و تابع معمولی، و همین‌طور رفتار this و arguments دقت کنید.

function outer() {
  const result = [];

  const obj = {
    value: 10,
    normal: function (x) {
      result.push("normal:" + this.value + "," + arguments.length);
      (function () {
        result.push("iife:" + (this.value ?? "undefined"));
      })();
    },
    arrow: (y) => {
      result.push("arrow:" + (this.value ?? "undefined") + "," + (typeof arguments));
    }
  };

  obj.normal(1, 2);
  obj.arrow(3);

  return result.join(" | ");
}

console.log(outer());

خروجی دقیق console.log(outer()) را بنویسید (همان رشته کامل، با همان ترتیب و کاراکترها).

🔖 #Web #وب #Frontend #Backend

👤 Developix

💎 Channel: @DevelopixWeb

👍2👎2

710 views18:00

| کانال توسعه‌دهندگان وب |

Forwarded from کانال رسمی تک نت | Taknet

🚀 سرور اختصاصی با تنوع منابع برای هر نوع نیاز
⏺پورت اختصاصی
⏺آپلود رایگان
⏺تخفیف پلکانی ترافیک
⏺آپتایم 99.99%
⏺24 ساعت تست رایگان
⏺رائه IP مازاد
⏺پشتیبانی 24/7
⏺تحویل فوری
⏺ارائه سرویس Colocation
⏺بدون قطعی
⏺پرداخت ماهیانه

⏰ تعداد محدود – برای استفاده از این تخفیف ویژه سریع اقدام کن!
برای اطلاعات بیشتر و سفارش، تماس بگیر:
🔺 02191555530

💻

خرید سرور اختصاصی

Please open Telegram to view this post

VIEW IN TELEGRAM

👍2

413 views16:30

| کانال توسعه‌دهندگان وب |

‏Clean Architecture در یک سرویس ساده Node.js 🧱

یکی از مشکل‌های همیشگی پروژه‌های وب این است که بعد از چند ماه، همه‌چیز توی یک فایل یا یک لایه قاطی می‌شود: route منطق بیزینسی دارد، مستقیم به DB وصل می‌شود و تست‌ گرفتن هم کابوس می‌شود.

اینجا جایی است که ایدهٔ Clean Architecture به‌درد می‌خورد: جداکردن منطق بیزینسی از زیرساخت (مثل Express، DB، HTTP، و غیره) تا کد قابل‌تست و قابل‌توسعه بماند. 🎯

در ساده‌ترین حالت، فقط همین اصل را رعایت کنید:
Use Case / Domain لایهٔ مرکزی ➜ Framework و DB در لبه‌ها

یعنی:
• Route فقط ورودی/خروجی HTTP را مدیریت کند ✅
• منطق اصلی در یک Service یا Use Case مستقل باشد ✅
• Service هیچ وابستگی مستقیم به Express یا driver خاص DB نداشته باشد ✅

یک نمونهٔ خیلی ساده در Node.js + Express:

// userService.js (لایه Domain / Use Case)
class UserService {
  constructor(userRepo) {
    this.userRepo = userRepo; // وابستگی به interface، نه به Express
  }

  async registerUser(data) {
    const { email, password } = data;

    if (!email || !password) {
      throw new Error("Invalid data");
    }

    const exists = await this.userRepo.findByEmail(email);
    if (exists) {
      throw new Error("Email already used");
    }

    // اینجا می‌توانید hashing، ruleها و ... را قرار دهید
    return this.userRepo.create({ email, password });
  }
}

module.exports = UserService;

حالا لایهٔ زیرساخت (Express + یک repo ساده):

// userRepo.js (لایه Infrastructure)
const users = [];

module.exports = {
  async findByEmail(email) {
    return users.find(u => u.email === email) || null;
  },
  async create(user) {
    users.push(user);
    return user;
  }
};

// routes.js
const express = require("express");
const UserService = require("./userService");
const userRepo = require("./userRepo");

const router = express.Router();
const userService = new UserService(userRepo);

router.post("/register", async (req, res) => {
  try {
    const user = await userService.registerUser(req.body);
    res.status(201).json(user);
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

module.exports = router;

چند نکتهٔ عملی از تجربهٔ پروژه‌های واقعی 🌱

• منطق اصلی را همیشه در Service / Use Case نگه دارید، نه داخل controller / route.
• وابستگی‌ها را به‌سمت لبه‌ها ببرید؛ Domain نباید Express، HTTP status code یا driver خاص DB را بشناسد.
• این ساختار روی Next.js API Routes، Nest.js، Laravel و Django هم کاملاً قابل‌پیاده‌سازی است.

برای مطالعهٔ عمیق‌تر ایده‌ها:
Layered Architecture - Martin Fowler
Refactoring.Guru - Design Patterns

همان‌قدر که پروژه بزرگ‌تر می‌شود، همین جداسازی ساده بین Domain و Infrastructure می‌تواند نجات‌دهنده باشد. دفعهٔ بعدی که یک feature جدید می‌نویسید، از همین الگوی کوچک شروع کنید و قدم‌به‌قدم کد را تمیزتر نگه دارید. 🚀

🔖 #Web #وب #Frontend #Backend #Clean_Architecture #Node_js #Express #Design_Patterns #Web_Development #Backend #Refactoring

👤 Developix

💎 Channel: @DevelopixWeb

❤1

748 views17:00

| کانال توسعه‌دهندگان وب |

تو خیلی از پروژه‌های وب، مخصوصاً وقتی React / Vue / Angular کار می‌کنی، نیاز به یک backend ساده برای تست و توسعه داری؛ چیزی که سریع بالا بیاد، JSON برگردونه و دردسر config زیاد هم نداشته باشه. اینجا Express دقیقاً همون چیزیه که لازم داری. 😎

این مطلب بر پایه داکیومنت رسمی Express نوشته شده:
Express Hello World

✅ ایده کلی
یک REST API خیلی مینیمال می‌سازیم که:

• با Node.js + Express راه می‌افته.
• یک endpoint مثل /api/users برمی‌گردونه.
• آماده است که از frontend (مثلاً با fetch در React) صداش بزنی.

۱) نصب اولیه پروژه
داخل یک فولدر خالی این دستورها رو اجرا کن:

npm init -y
npm install express cors

۲) ساخت سرور ساده Express
فایلی به اسم server.js بساز و این کد رو داخلش بذار:

const express = require('express');
const cors = require('cors');

const app = express();
const PORT = 4000;

app.use(cors());
app.use(express.json());

// GET /api/users
app.get('/api/users', (req, res) => {
  const users = [
    { id: 1, name: 'Ali', role: 'admin' },
    { id: 2, name: 'Sara', role: 'user' },
  ];

  res.json(users);
});

// POST /api/users
app.post('/api/users', (req, res) => {
  const newUser = req.body;

  if (!newUser.name) {
    return res.status(400).json({ message: 'name لازم است' });
  }

  newUser.id = Date.now();
  res.status(201).json(newUser);
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

۳) اجرای سرور
داخل ترمینال:

node server.js

حالا روی آدرس:

http://localhost:4000/api/users

یک آرایه از userها می‌بینی.

برای تست سریع می‌تونی از Postman یا Insomnia استفاده کنی، یا حتی با fetch از سمت frontend صداش بزنی.

چرا این کار عملی و مهمه؟
• موقع توسعه frontend لازم نیست صبر کنی backend اصلی تیم آماده بشه.
• می‌تونی شکل دقیق JSON رو خودت کنترل کنی.
• برای تمرین مفاهیم REST (GET/POST، status codeها، error handling) عالیه.

کد رو بردار، روی سیستم خودت اجراش کن و کم‌کم endpointهای جدید مثل /api/products یا /api/auth/login اضافه کن. هرچی زودتر یک API واقعی زیر دستت داشته باشی، سرعت رشدت در web dev چند برابر می‌شه. 🚀

🔖 #Web #وب #Frontend #Backend #Node_js #Express #API #Backend #Frontend #JavaScript #Web_Dev

👤 Developix

💎 Channel: @DevelopixWeb

960 views18:01

| کانال توسعه‌دهندگان وب |

ساختن یک API کوچک و تمیز با Node.js و Express از اون کارهاییه که مستقیم توی پروژه‌های واقعی به کار میاد؛ از اتصال React/Vue گرفته تا ساخت پنل ادمین یا حتی یه سرویس موبایل.

این مدل API رو می‌شه دقیقاً بر اساس داک رسمی Express جلو برد:
https://expressjs.com/en/starter/hello-world.html

ایده‌مون 👇
یه REST API خیلی ساده برای مدیریت tasks می‌سازیم که از سمت Frontend (مثلاً React) قابل مصرف باشه:

• گرفتن لیست tasks
• اضافه کردن task جدید

نکته خوبش اینه که هم با ساختار یک Express app آشنا می‌شی، هم می‌فهمی چطور JSON رو هندل کنی و پاسخ استاندارد بدی.

اول باید Node.js نصب باشه. بعد توی یه فولدر خالی این کامندها رو بزن:

npm init -y
npm install express cors

حالا فایل index.js رو بساز و این کد رو بذار داخلش:

const express = require("express");
const cors = require("cors");

const app = express();
const PORT = 3000;

app.use(cors());
app.use(express.json());

let tasks = [
  { id: 1, title: "Learn Express", done: false },
  { id: 2, title: "Build a simple API", done: false }
];

// GET /api/tasks
app.get("/api/tasks", (req, res) => {
  res.json(tasks);
});

// POST /api/tasks
app.post("/api/tasks", (req, res) => {
  const { title } = req.body;
  if (!title) {
    return res.status(400).json({ error: "title is required" });
  }

  const newTask = {
    id: tasks.length + 1,
    title,
    done: false
  };

  tasks.push(newTask);
  res.status(201).json(newTask);
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

حالا:

• با node index.js سرور رو بالا بیار.
• توی مرورگر برو به http://localhost:3000/api/tasks، باید یه آرایه JSON ببینی.
• برای تست POST از Postman یا افزونه REST Client یا حتی fetch در Frontend استفاده کن.

این ساختار کوچیک، پایه خیلی از پروژه‌های جدی‌تره:

• می‌تونی بعداً auth اضافه کنی.
• می‌تونی به جای آرایه، از MongoDB یا PostgreSQL استفاده کنی.
• می‌تونی همین API رو به یه React یا Vue app وصل کنی و یه Todo ساده ولی تمیز بسازی.

امتحانش کن، سرور رو بالا بیار و یه بار واقعی باهاش دیتا رد و بدل کن؛ از اون چیزهایی‌ست که بعدش کار با Backend خیلی طبیعی‌تر به نظر می‌رسه. اگر مفید بود، برای بقیه هم‌تیمی‌ها هم بفرست تا همه روی یک استک مشترک تمرین کنید.

🔖 #Web #وب #Frontend #Backend #Node_js #Express #REST_API #Backend #Frontend #JavaScript #Web_Development #Tutorial

👤 Developix

💎 Channel: @DevelopixWeb

❤3

1.17K views17:00

| کانال توسعه‌دهندگان وب |

در نمونه‌کد بالا در نسخه‌ی اول هر درخواست HTTP یک connection جدید به دیتابیس باز می‌کند و با هر کوئری یک round-trip اضافه به MySQL می‌زند. این الگو هم روی Performance (به‌خصوص در ترافیک بالا) اثر منفی دارد، هم ریسک Connection Exhaustion را بالا می‌برد. در نسخه‌ی بهینه با استفاده از Connection Pooling و اجرای کوئری‌های وابسته در قالب یک Transaction، هم تعداد round-tripها کم شده، هم ثبات داده‌ها حفظ می‌شود.

اگر در یک Web API Node.js با mysql2 یا هر Driver مشابه کار می‌کنید، بهتر است به جای باز کردن connection در هر handler، در لایه‌ی Infrastructure یک pool مشترک بسازید و در handlerها فقط از آن pool borrow کنید؛ این کار هم مقیاس‌پذیری سرویس را بهتر می‌کند، هم در شرایط ترافیک سنگین فشار روی دیتابیس و OS را کاهش می‌دهد.

برای مطالعه‌ی بیشتر درباره‌ی Connection Pooling در Node.js می‌توانید مستندات رسمی mysql2 را ببینید.

🔖 #Web #وب #Frontend #Backend

👤 Developix

💎 Channel: @DevelopixWeb

👍4❤1

863 views18:00

| کانال توسعه‌دهندگان وب |

Forwarded from BehinSMS (Taknet support)

💚دریافت پنل پیامک تجاری
💚شماره اختصاصی
💚12,000 پیامک رایگان

📣تبلیغاتت رو با بهین متحول کن

🌐 وب سرویس رایگان
📊جذب هزاران مشتری جدید
💬 ارسال پیام تبلیغاتی به سراسر کشور
🔛 پشتیبانی لحظه‌ای ۲۴/۷
🌐 دیتابیس به‌روز از حوزه های کاری مختلف

⭕️ فرصت محدوده! همین الان ثبت‌نام کن و تبلیغاتتو حرفه‌ای کن

✅

behinsms.com

⭐

مشاوره آنلاین

🔸🔸🔸

📱 Telegram
📱 instagram
🤙 02191555199

Please open Telegram to view this post

VIEW IN TELEGRAM

382 views16:30

| کانال توسعه‌دهندگان وب |

وقتی روی فرم جستجو هر keypress مستقیماً درخواست به سرور بفرستد، هم backend تحت فشار می‌رود هم UI کند می‌شود. یک الگوی ساده با debounce کمک می‌کند فقط وقتی کاربر چند لحظه تایپ را متوقف کرد، درخواست زده شود. 🔎

ایده این است: هر بار کاربر تایپ می‌کند، یک timeout قبلی لغو می‌شود و یک جدید تنظیم می‌شود. اگر تا مثلاً ۴۰۰ms چیزی تایپ نشد، تابع واقعی اجرا می‌شود (فراخوانی API، فیلتر لیست و ...).

✅ نتیجه:
- درخواست‌های کمتر به سرور
- UI روان‌تر
- کد تمیزتر نسبت به if/elseهای تکراری روی eventها

یک پیاده‌سازی ساده و عمومی در JS:

function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const searchInput = document.querySelector('#search');

function handleSearch(e) {
  const q = e.target.value.trim();
  if (!q) return;
  // call API, fetch data, etc.
  console.log('Searching for:', q);
}

const debouncedSearch = debounce(handleSearch, 400);

searchInput.addEventListener('input', debouncedSearch);

بهتر است delay را بر اساس نوع ورودی تنظیم شود؛ برای جستجوی live معمولاً بین ۳۰۰ تا ۵۰۰ms معقول است. در UIهای سنگین (لیست‌های بزرگ، نمودارها و ...) debounce می‌تواند تفاوت محسوسی در performance ایجاد کند. 🚀

برای مطالعه بیشتر درباره الگوهای بهینه‌سازی eventها و performance در مرورگر:
MDN - Debouncing events

امتحان روی یک input ساده در پروژه فعلی کافی است تا تاثیرش روی روان بودن تجربه کاربری دیده شود. 😉

🔖 #Web #وب #Frontend #Backend #debounce #javascript #frontend #performance #web_dev

👤 Developix

💎 Channel: @DevelopixWeb

👍3❤1

559 views17:00

| کانال توسعه‌دهندگان وب |

Forwarded from کانال رسمی تک نت | Taknet

سرور اختصاصی تک‌نت؛ تحویل فوری، بدون قطعی ✅

🔹 پورت اختصاصی واقعی
🔹 آپلود رایگان
🔹 آپتایم 99.99% تضمینی
🔹 ارائه IP مازاد
🔹 پشتیبانی 24/7 (تیکت + آنلاین)
🔹 نصب سریع
🔹 پرداخت ماهیانه

⏳ ظرفیت محدود — همین الان تماس بگیر و سرویس رو رزرو کن:

📞 02191555530
🔗 https://taknet.ir/services/dedicated-server

164 views16:30

| کانال توسعه‌دهندگان وب |

Forwarded from ابر ویراک

ویراک کلود | تجربه‌ی ابری بدون محدودیت ☁️🚀

🎁 ۲۰٪ شارژ هدیه روی اولین واریزی

مزیت‌هایی که واقعاً فرق می‌سازن:
⚡️ پهنای باند 980 مگ
🌐با IP مازاد
⏱️ راه‌اندازی فوری
💳 پرداخت ساعتی
🛡 پشتیبانی ۲۴/۷

💬 هر سوالی داشتی، تیم ما کنارتـه
✅ مناسب استارتاپ‌ها، تیم‌های فنی، تا سازمان‌های بزرگ

همین الان شروع کن و با حداکثر منابع، سریع‌تر رشد کن 👇🏻

📞 تماس سریع: 02191555530
🔗 https://virakcloud.com

108 views16:45

About

Blog

Apps

Platform