Forwarded from Developix Support
با Migration Boost هاست‌ایران، برای مهاجرت به سرور ابری دوباره هزینه ترافیک نده! 🚀
با خرید اولین سرور ابری غیرساعتی از **هاست‌ایران**، بسته ترافیک هدیه مهاجرت به‌صورت خودکار برای سرویس شما فعال می‌شود:
✅ حداقل ۱۰۰ گیگابایت ترافیک هدیه مهاجرت
✅ افزایش حجم هدیه متناسب با ظرفیت دیسک اولیه
✅ ترافیک آپلود رایگان
✅ بدون محدودیت زمانی
سرور ابری هاست‌ایران را راه‌اندازی کنید و بکاپ‌ها، فایل‌ها و پایگاه داده خود را بدون دغدغه هزینه‌های پنهان ترافیک منتقل کنید.
👇 مشاهده پلن‌های سرور ابری هاست‌ایران
hostiran.club/Migration
hostiran.club/Migration
با خرید اولین سرور ابری غیرساعتی از **هاست‌ایران**، بسته ترافیک هدیه مهاجرت به‌صورت خودکار برای سرویس شما فعال می‌شود:
✅ حداقل ۱۰۰ گیگابایت ترافیک هدیه مهاجرت
✅ افزایش حجم هدیه متناسب با ظرفیت دیسک اولیه
✅ ترافیک آپلود رایگان
✅ بدون محدودیت زمانی
سرور ابری هاست‌ایران را راه‌اندازی کنید و بکاپ‌ها، فایل‌ها و پایگاه داده خود را بدون دغدغه هزینه‌های پنهان ترافیک منتقل کنید.
👇 مشاهده پلن‌های سرور ابری هاست‌ایران
hostiran.club/Migration
hostiran.club/Migration
❤1
🎨 تم روشن/تاریک فقط با CSS Variables
خیلی وقت‌ها برای پیاده‌سازی dark mode سریع می‌شه از CSS Custom Properties (همون CSS variables) استفاده کرد و بدون دست زدن به کلی selector، رنگ کل UI رو عوض کرد. ✨
ایده اینه که همه رنگ‌ها رو روی
با این روش، اضافه‌کردن stateهای جدید (مثل high-contrast) هم فقط یعنی تعریف چند متغیر جدید، نه refactor بزرگ روی کل CSS. 🔧
مرجع بیشتر در MDN 👇
Using CSS custom properties - MDN
🔖 #Web #وب #Frontend #Backend #CSS #dark_mode #CSS_variables #frontend #web
👤 Developix
💎 Channel: @DevelopixWeb
خیلی وقت‌ها برای پیاده‌سازی 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
👍4❤2
در اپ‌های وب مدرن، مخصوصاً فرم‌های سرچ زنده، گاهی چندین درخواست fetch پشت‌سرهم ارسال می‌شود و پاسخ‌های قدیمی‌تر، نتیجه جدید را خراب می‌کند. راه‌حل تمیز و امروزی: استفاده از AbortController ✨
با این کار می‌توان درخواست قبلی را قبل از کامل شدن، لغو کرد تا هم UI تمیز بماند، هم پهنای‌باند و منابع سرور هدر نرود.
برای سرچ‌های لحظه‌ای، می‌توان در هر ورودی جدید،
این تکنیک کمک می‌کند Race Condition در پاسخ‌ها کمتر شود و تجربه کاربری سریع‌تر و قابل‌اعتمادتر به نظر برسد 🚀
مرجع: MDN - AbortController
🔖 #Web #وب #Frontend #Backend #AbortController #fetch #JavaScript #Web_API #frontend
👤 Developix
💎 Channel: @DevelopixWeb
با این کار می‌توان درخواست قبلی را قبل از کامل شدن، لغو کرد تا هم 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
👍2❤1
🔥 پروژه: Angular برای وب اپ‌های مقیاس‌پذیر
فریمورک Angular برای تیم‌هایی که روی وب‌اپ‌های بزرگ و جدی کار می‌کنند هنوز یکی از امن‌ترین انتخاب‌هاست 🚀
ساختار opinionated، TypeScript پیش‌فرض، DI قوی، routing و فرم‌ها، تست‌نویسی و ابزارهای CLI یکپارچه باعث می‌شود از روز اول روی معماری و DX تمرکز کنی، نه سیم‌کشی دستی.
با قابلیت‌هایی مثل standalone components و SSR، هم performance و هم SEO پوشش داده می‌شود. اگر پروژه بعدی‌تان جدی است، حتما سری به ریپو Angular بزنید.
⭐️ 101,003 ستاره
🔖 #Web #وب #Frontend #Backend #Angular
💎 @DevelopixWeb
فریمورک Angular برای تیم‌هایی که روی وب‌اپ‌های بزرگ و جدی کار می‌کنند هنوز یکی از امن‌ترین انتخاب‌هاست 🚀
ساختار opinionated، TypeScript پیش‌فرض، DI قوی، routing و فرم‌ها، تست‌نویسی و ابزارهای CLI یکپارچه باعث می‌شود از روز اول روی معماری و DX تمرکز کنی، نه سیم‌کشی دستی.
با قابلیت‌هایی مثل standalone components و SSR، هم performance و هم SEO پوشش داده می‌شود. اگر پروژه بعدی‌تان جدی است، حتما سری به ریپو Angular بزنید.
⭐️ 101,003 ستاره
🔖 #Web #وب #Frontend #Backend #Angular
💎 @DevelopixWeb
❤2👍1