💠 نسخه جدید محیط توسعه Webstorm منتشر شده است

🔸 ارتقا از نسخه 2026.1.4 به 2026.2

🔖 #webstorm, #web, #react, #vue, #js, #release

💎 @DevelopixWeb

با Migration Boost هاست‌ایران، برای مهاجرت به سرور ابری دوباره هزینه ترافیک نده! 🚀

با خرید اولین سرور ابری غیرساعتی از **هاست‌ایران**، بسته ترافیک هدیه مهاجرت به‌صورت خودکار برای سرویس شما فعال می‌شود:

✅ حداقل ۱۰۰ گیگابایت ترافیک هدیه مهاجرت
✅ افزایش حجم هدیه متناسب با ظرفیت دیسک اولیه
✅ ترافیک آپلود رایگان
✅ بدون محدودیت زمانی

سرور ابری هاست‌ایران را راه‌اندازی کنید و بکاپ‌ها، فایل‌ها و پایگاه داده خود را بدون دغدغه هزینه‌های پنهان ترافیک منتقل کنید.

👇 مشاهده پلن‌های سرور ابری هاست‌ایران
hostiran.club/Migration
hostiran.club/Migration

🎨 تم روشن/تاریک فقط با CSS Variables

خیلی وقت‌ها برای پیاده‌سازی dark mode سریع می‌شه از CSS Custom Properties (همون CSS variables) استفاده کرد و بدون دست زدن به کلی selector، رنگ کل UI رو عوض کرد. ✨

ایده اینه که همه رنگ‌ها رو روی :root تعریف بشه و بعد با اضافه کردن یک class به <html> یا <body>، تم عوض بشه. فقط یک‌بار style می‌نویسی و هرجا لازم بود از var(--color-name) استفاده می‌کنی. 🔁

:root {
  --bg: #ffffff;
  --text: #111111;
}

html.dark {
  --bg: #111827;
  --text: #f9fafb;
}

body {
  background-color: var(--bg);
  color: var(--text);
}

// JavaScript
const html = document.documentElement;
const toggleTheme = () => {
  html.classList.toggle('dark');
};

با این روش، اضافه‌کردن stateهای جدید (مثل high-contrast) هم فقط یعنی تعریف چند متغیر جدید، نه refactor بزرگ روی کل CSS. 🔧

مرجع بیشتر در MDN 👇
Using CSS custom properties - MDN

🔖 #Web #وب #Frontend #Backend #CSS #dark_mode #CSS_variables #frontend #web

👤 Developix

💎 Channel: @DevelopixWeb

در اپ‌های وب مدرن، مخصوصاً فرم‌های سرچ زنده، گاهی چندین درخواست fetch پشت‌سرهم ارسال می‌شود و پاسخ‌های قدیمی‌تر، نتیجه جدید را خراب می‌کند. راه‌حل تمیز و امروزی: استفاده از AbortController ✨

با این کار می‌توان درخواست قبلی را قبل از کامل شدن، لغو کرد تا هم UI تمیز بماند، هم پهنای‌باند و منابع سرور هدر نرود.

const controller = new AbortController();
const { signal } = controller;

fetch("/api/search?q=test", { signal })
  .then(res => res.json())
  .then(data => {
    console.log("result", data);
  })
  .catch(err => {
    if (err.name === "AbortError") {
      console.log("request cancelled");
    } else {
      console.error(err);
    }
  });

// هر وقت لازم بود:
controller.abort();

برای سرچ‌های لحظه‌ای، می‌توان در هر ورودی جدید، controller.abort() قبلی را صدا زد و بعد یک AbortController جدید ساخت.

این تکنیک کمک می‌کند Race Condition در پاسخ‌ها کمتر شود و تجربه کاربری سریع‌تر و قابل‌اعتمادتر به نظر برسد 🚀

مرجع: MDN - AbortController

🔖 #Web #وب #Frontend #Backend #AbortController #fetch #JavaScript #Web_API #frontend

👤 Developix

💎 Channel: @DevelopixWeb

🔥 پروژه: ‏Angular برای وب اپ‌های مقیاس‌پذیر

فریمورک Angular برای تیم‌هایی که روی وب‌اپ‌های بزرگ و جدی کار می‌کنند هنوز یکی از امن‌ترین انتخاب‌هاست 🚀

ساختار opinionated، TypeScript پیش‌فرض، DI قوی، routing و فرم‌ها، تست‌نویسی و ابزارهای CLI یکپارچه باعث می‌شود از روز اول روی معماری و DX تمرکز کنی، نه سیم‌کشی دستی.

با قابلیت‌هایی مثل standalone components و SSR، هم performance و هم SEO پوشش داده می‌شود. اگر پروژه بعدی‌تان جدی است، حتما سری به ریپو Angular بزنید.

⭐️ 101,003 ستاره

🔖 #Web #وب #Frontend #Backend #Angular

💎 @DevelopixWeb

کتابخانه Zod برای TypeScript/JavaScript کمک می‌کند اسکیماهای داده را یک‌بار تعریف کنی و هم‌زمان هم type بگیری، هم validation در زمان اجرا ✨

مشکل کلاسیک فرم‌ها و APIها این است که typeها فقط در زمان کامپایل چک می‌شوند، ولی دیتای واقعی کاربر یا کلاینت ناشناخته است. Zod این فاصله بین TypeScript و دنیای واقعی را پر می‌کند.

چند نکته مهم:

• تعریف اسکیما و type از یک منبع واحد ➜ بدون دوباره‌کاری 🧠
• مناسب برای APIها، فرم‌های React، و Validation سمت سرور در Node.js
• ادغام عالی با کتابخانه‌هایی مثل React Hook Form و tRPC

نمونه استفاده ساده:

npm install zod

import { z } from "zod";

const userSchema = z.object({
  name: z.string().min(3),
  age: z.number().int().nonnegative(),
});

const result = userSchema.safeParse({
  name: "Ali",
  age: 28,
});

if (!result.success) {
  console.log(result.error.format());
}

مستندات رسمی:
GitHub
Docs

برای هر پروژه وب که ورودی کاربر یا JSON از بیرون می‌گیرد، امتحان Zod کلی خطای Runtime را کم می‌کند و کد را تمیزتر نگه می‌دارد 🚀

🔖 #Web #وب #Frontend #Backend #Zod #TypeScript #Validation #Web #Node_js

👤 Developix

💎 Channel: @DevelopixWeb

🍋 چرا برای پیامک سایتت هزینه اضافه بدی؟!
با لیمو اس ام اس شروع کار کاملاً رایگانه 👇
✅ ثبت‌نام رایگان و بدون پرداخت هزینه
🎁 شارژ اولیه رایگان بعد از ثبت‌نام
💚 پنل پیامکی رایگان
🔥 تعرفه پیامک از فقط ۱۰۶ تومان
🧩 افزونه‌های وردپرس کاملاً رایگان برای:
• دیجیتس
• پیامک ووکامرس
• پیامک دکان
• پیامک بوکلی
• پیامک گرویتی فرم
یعنی می‌تونی بدون پرداخت هزینه برای پنل و افزونه، پیامک‌های سایتت رو راه‌اندازی کنی و فقط هزینه پیامک مصرفی رو پرداخت کنی.
🚀 مناسب برنامه‌نویس‌ها، سایت‌های وردپرسی و کسب‌وکارهای آنلاین
👉 همین الان رایگان ثبت‌نام کن:
https://panel.limosms.com
📞 اطلاعات بیشتر:
09108303821 | 09001200800
https://limosms.com

برای پروژه‌هایی که Redux برایشان زیادی سنگین است، کتابخانهٔ Zustand گزینهٔ خیلی تمیزی برای مدیریت state در React است ⚡️

ایده‌اش ساده است: یک global store سبک، بدون Providerهای تو در تو، با API خیلی سرراست.

چند مزیت مهم:

✅ بدون boilerplate؛ فقط یک تابع برای ساختن store
✅ پشتیبانی عالی از TypeScript
✅ بدون re-render اضافی؛ فقط کامپوننت‌های وابسته رندر می‌شوند
✅ سازگار با Server Components در پروژه‌های مدرن React / Next.js

نمونه استفاده ساده:

npm install zustand

import create from 'zustand'

const useStore = create((set) => ({
  count: 0,
  inc: () => set((s) => ({ count: s.count + 1 }))
}))

function Counter() {
  const { count, inc } = useStore()
  return <button onClick={inc}>Count: {count}</button>
}

برای پروژه‌هایی که فقط یک state مدیریت‌پذیر، تمیز و قابل تست می‌خواهند، Zustand معمولا اندازه‌اش دقیقا همان چیزی است که نیاز می‌شود 🙂

لینک‌ها:
GitHub
Docs

🔖 #Web #وب #Frontend #Backend #Zustand #React #State_Management #JavaScript #TypeScript #Frontend

👤 Developix

💎 Channel: @DevelopixWeb

پیکربندی وب‌سرور آپاچی و مدیریت فایل htaccess.

در این مطلب به نحوه پیکربندی وب‌سرور Apache، مدیریت خطاهای HTTP، ماژول mod_rewrite و کاربردهای عملی بازنویسی آدرس‌ها (URL Rewriting) پرداخته شده است.

برای مطالعه کامل این مطلب می‌توانید به لینک زیر مراجعه کنید:
https://gnutec.net/apache-http-web-server-htaccess/

🔖 #Web #وب #Frontend #Backend

👤 ابوالفضل

💎 Channel: @DevelopixWeb

🔥 پروژه: ریمیکس؛ فریم‌ورک فول‌استک وب

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

تمرکز روی درخواست و پاسخ HTTP، فرم‌ها و کار با داده در سمت سرور، آن را برای توسعه‌دهنده‌هایی جذاب می‌کند که می‌خواهند به‌جای چسباندن چند ابزار جدا، مسیر یکپارچه‌تری داشته باشند.

برای آشنایی با مسیر فعلی توسعه و نمونه‌های پروژه، مخزن ریمیکس را ببین؛ ارزش بررسی دارد.

⭐️ 33,405 ستاره

🔖 #Web #وب #Frontend #Backend #Remix

💎 @DevelopixWeb