یادآوری درباره‌ی ‎`.setProperty()` و متغیرهای CSS 😉

همه‌ی ما متد ‎`.setProperty()` می‌شناسیم و معمولاً زمانی به یادش می‌افتیم که لازم باشد یک ویژگی CSS را مستقیماً از طریق JavaScript تغییر دهیم.
اما به‌راحتی می‌توان فراموش کرد که با همین متد می‌توان متغیرهای CSS را نیز تغییر داد — و این در بسیاری موارد بسیار کارآمدتر است.

برای نمونه، یک متغیر سراسری در ‎`:root`‎:

:root {
  --main-color: #333;
}

و در JavaScript:

// تغییر خود متغیر، نه ویژگی مستقیم
document.documentElement.style.setProperty('--main-color', '#ff6600');

اکنون تمام عناصری که مقدار color: var(--main-color) دارند، به‌طور خودکار مقدار جدید را دریافت می‌کنند. 👍

کجا استفاده از متغیرها از طریق ‎`.setProperty()`‎ بیش‌تر به چشم می‌آید؟

✔️ انیمیشن‌ها — تنها با تغییر یک متغیر، تمام استایل‌های مرتبط به‌صورت روان و از طریق CSS transition به‌روز می‌شوند.
✔️ استفاده در content — می‌توان متن یا نمادی را در یک متغیر ذخیره کرد و آن را به‌صورت پویا تغییر داد.

.btn::after {
  content: var(--btn-label);
}

btn.style.setProperty('--btn-label', '"✓"');

در نتیجه، ‎`.setProperty()`‎ تنها برای تغییر ویژگی‌ها نیست، بلکه ابزاری قدرتمند برای مدیریت متغیرهای CSS نیز به‌شمار می‌رود ⚡️

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

من همیشه فکر می‌کردم توسعه‌ی فرانت‌اند به‌مراتب دشوارتر از بک‌اند است، اما توضیح این موضوع برای سایر توسعه‌دهندگان همیشه سخت بود. امروز خواستم نظر یک مدل زبانی (که به‌نوعی نماینده‌ی «نظر کلی کارشناسان» است) را بررسی کنم.

نتیجه جالب بود:
توسعه‌ی فرانت‌اند برای انسان‌ها سخت‌تر است، زیرا بک‌اند بیشتر ماهیتی ریاضی و مبتنی بر قواعد دارد و درک آن چندان دشوار نیست؛ همه‌چیز با فرمول‌ها و الگوهای قابل پیش‌بینی پیش می‌رود.

اما فرانت‌اند؟ اینجا قیاس بی‌نظیری مطرح شد: زیست‌شناسی!

🔹 مقیاس‌پذیری بک‌اند: شبیه ریاضیات؛ با افزودن نودهای بیشتر، شارد کردن پایگاه داده یا بهینه‌سازی کوئری‌ها، سیستم طبق فرمول‌ها و قوانین قابل‌پیش‌بینی رشد می‌کند.

🔹 تغییرات فرانت‌اند: شبیه زیست‌شناسی؛ جهش‌های کوچک (مثل دستگاه جدید، ویژگی تازه‌ی مرورگر یا نیاز متفاوت در تجربه‌ی کاربری) رفتاری نوظهور، اغلب آشفته و موردی ایجاد می‌کنند که باید تک‌به‌تک با آن‌ها سازگار شد.

زیست‌شناسی بسیار پیچیده‌تر از ریاضیات است — زیرا ریاضیات قانون‌مند و قطعی است، اما زیست‌شناسی پدیده‌ای نوظهور، پر از استثنا، وابسته به زمینه و همواره در حال تغییر.

به همین دلیل است که فرانت‌اند (شبیه زیست‌شناسی) برای انسان‌ها به‌مراتب شلوغ‌تر و دشوارتر به نظر می‌رسد، حتی اگر بک‌اند (شبیه ریاضیات) از نظر انتزاعی ژرف‌تر باشد.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

اوایل همین ماه، شرکت ByteDance — خالق TikTok و CapCut — از Lynx.js رونمایی کرد. این خبر می‌تواند برای جامعه‌ی Vue بسیار مهم باشد، چراکه احتمالاً امکان توسعه‌ی اپلیکیشن‌های بومی با Vue را فراهم خواهد کرد!

یک فریم‌ورک رابط کاربری مبتنی بر جاوااسکریپت است که به توسعه‌دهندگان اجازه می‌دهد اپلیکیشن‌های وب و موبایل را به‌گونه‌ای بسازند که احساس بومی (Native) داشته باشند؛ به این ترتیب رویای قدیمی فرانت‌اندکاران و توسعه‌دهندگان UI یعنی «یک بار بنویس، همه‌جا اجرا کن» را محقق می‌کند.
با این حال، ترکیب Vue و Lynx یک فرصت هیجان‌انگیز است:

اپلیکیشن‌های واقعاً بومی

با استفاده از همان دانش وب

و منحنی یادگیری ساده‌ی Vue

با رشد این اکوسیستم، انتظار می‌رود ابزارها، کامپوننت‌ها و الگوهای بهتری شکل بگیرند و Vue Lynx به گزینه‌ای جدی برای توسعه‌ی کراس‌پلتفرم تبدیل شود.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

استفاده از `distinctUntilChanged` و `debounceTime`: بهینه‌سازی جستجو 👩‍💻

وقتی فرم ایجاد می‌کنیم، مهم است که از ارسال درخواست‌های غیرضروری به سرور جلوگیری کنیم. دو اپراتور RxJS به نام‌های `debounceTime` و `distinctUntilChanged` در این زمینه به ما کمک می‌کنند:

* ✔️ debounceTime اجرای عملیات را با تأخیر انجام می‌دهد.
* ✔️ distinctUntilChanged مقادیر تکراری را نادیده می‌گیرد.

### مثال:

this.searchForm.controls.searchField.valueChanges
  .pipe(
    debounceTime(300),        // صبر می‌کنیم ۳۰۰ میلی‌ثانیه بعد از آخرین ورودی
    distinctUntilChanged()    // مقادیر تکراری را نادیده می‌گیریم
  )
  .subscribe(searchTerm => {
    console.log('درخواست به سرور:', searchTerm);
    this.searchData(searchTerm);  // ارسال درخواست
  });

### عملکرد هر اپراتور:

⭐️ debounceTime(300) — ارسال درخواست را ۳۰۰ میلی‌ثانیه بعد از آخرین ورودی به تأخیر می‌اندازد. این کار باعث می‌شود برای هر کاراکتر یک درخواست ارسال نشود، که مخصوصاً هنگام تایپ سریع بسیار مفید است.

⭐️ distinctUntilChanged() — تضمین می‌کند که درخواست تنها وقتی مقدار تغییر کند ارسال شود. اگر کاربر همان عبارت جستجو را دوباره وارد کند، درخواست تکراری ارسال نخواهد شد.

---

✅ نتیجه: ترکیب این دو اپراتور به شما کمک می‌کند کنترل بهتری روی درخواست‌ها در فرم‌های جستجو داشته باشید، عملکرد را بهبود بخشید و بار روی سرور را کاهش دهید. 😉


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

نحوه تنظیم Autocomplete با گزینه‌های محدود، ولی با امکان وارد کردن مقادیر دلخواه در TypeScript ❓

اخیراً با یک چالش جالب مواجه شدم: می‌خواستم یک نوع (Type) بسازم که هم بتواند هر رشته‌ای را بپذیرد، و هم برای چند مقدار از پیش تعریف‌شده رفتاری خاص داشته باشد.

معمولاً این کار با enum یا اشیاء حل می‌شد، اما یک روش شیک‌تر هم وجود دارد! ❔

### راهکار: استفاده از string & {} در انتهای Union

این تکنیک اجازه می‌دهد نوعی تعریف کنیم که انعطاف‌پذیر باشد و همزمان در Autocomplete گزینه‌های مشخص را پیشنهاد دهد.

#### مثال:

type MyType = 'Option1' | 'Option2' | string & {};

### توضیح:

* MyType می‌تواند هر رشته‌ای را بپذیرد.
* با این حال، Autocomplete تنها 'Option1' و 'Option2' را پیشنهاد می‌دهد.
* دلیلش این است که ترکیب string & {} امکان استفاده از رشته‌ها را حفظ می‌کند ولی پیشنهادها محدود به مقادیر مشخص شده در Union می‌ماند.

---

✅ نتیجه: این روش برای مواقعی مناسب است که می‌خواهید انعطاف نوع را حفظ کنید و همزمان به راحتی بتوانید گزینه‌های از پیش تعریف‌شده را در Autocomplete نمایش دهید. 👍


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

اختصارات منطقی در انتساب‌ها در JavaScript 🤔

ECMAScript ۲۰۲۱ سه اپراتور مفید را اضافه کرده است:
‏
✔️ انتساب x ||= y — اگر x مقدار «فالس» داشته باشد → `x = y`؛
✔️ انتساب x ??= y — اگر x مقدار null یا undefined داشته باشد → x = y (صفر، رشته خالی و false حفظ می‌شوند)؛
✔️ انتساب x &&= y — اگر x مقدار «ترو» داشته باشد → x = y.

‼️ نکته مهم: چرا x ||= y و x = x || y همیشه معادل هم نیستند

به طور خلاصه: اپراتورهای اختصاری مقدار سمت چپ انتساب (LHS) را فقط یک بار محاسبه می‌کنند، در حالی که حالت x = x || y ممکن است LHS را دو بار محاسبه کند. این مسئله زمانی مشکل‌ساز می‌شود که LHS فقط یک متغیر ساده نباشد، بلکه یک عبارت شامل فراخوانی‌ها، getterها یا کلیدهای محاسبه‌شده باشد.

👩‍💻 مثال کمینه و قابل بازتولید:

let i = 0;
function getKey() { console.log('getKey'); return 'k' + (++i); }

const a = {};
a[getKey()] ||= 1;   // getKey یک بار فراخوانی می‌شود — ایمن

i = 0;
const b = {};
b[getKey()] = b[getKey()] || 1; // getKey دو بار فراخوانی می‌شود — اثر جانبی!

➡️ در عبارت b[...] = b[...] || 1`، `getKey() ممکن است در فراخوانی‌های مختلف کلیدهای متفاوت تولید کند یا اثرات جانبی دیگری داشته باشد — در نتیجه منطق برنامه خراب می‌شود. اما ||= چنین خطری ندارد، چون ارجاع به b[getKey()] فقط یک بار گرفته می‌شود.

نتیجه:
اپراتورهای ||=, ??= و &&= تنها «شیرینی سینتکسی» نیستند؛ بلکه روشی برای جلوگیری از باگ‌های پنهان هستند، به خصوص زمانی که LHS شامل عبارات با اثر جانبی است.

پیشنهاد استفاده:
⏺️ ??= برای مقداردهی پیش‌فرض واقعی،
⏺️ ||= برای زمانی که هر مقدار فالس مدنظر است،
⏺️ &&= برای به‌روزرسانی شرطی. 👍




#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

🖤شهادت امام حسن عسکری علیه السلام

💎 امام عسكرى عليه‌السلام در بیانی به احمد بن اسحاق فرمود: ... اى احمد‌بن‌اسحاق! مَثَل او در اين امت مثل خضر و مثل ذى القرنين است.
◼️به خدا سوگند هر آينه غيبتى خواهد نمود كه تنها كسانى كه خداوند آنان را بر قول به امامت او ثابت كرده و به دعا بر تعجيل فرجش موفق ساخته، هلاک نخواهند شد ...

🔗https://t.me/sadeghiyemohebbi/42863
🔗https://www.aparat.com/v/f275f0g
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

Vidbg.js

کتابخانه Vidbg.js برای ایجاد پس‌زمینه‌های ویدیویی تمام‌صفحه طراحی شده است. این ابزار مشکلات مقیاس‌بندی واکنش‌گرا را حل می‌کند و دارای مکانیزم تصویر جایگزین (fallback) برای دستگاه‌های موبایل است، جایی که اغلب پخش خودکار ویدیو محدود شده است.

var instance = new vidbg(
  ".vidbg-box",
  {
    mp4: "http://example.com/video.mp4", // URL or relative path to MP4 video
    webm: "path/to/video.webm", // URL or relative path to webm video
    poster: "path/to/fallback.jpg", // URL or relative path to fallback image
    overlay: false, // Boolean to display the overlay or not
    overlayColor: "#000", // The overlay color as a HEX
    overlayAlpha: 0.3, // The overlay alpha. Think of this as the last integer in RGBA()
  },
  {
    // Attributes
  }
);

🔗https://github.com/blakewilson/vidbg?tab=readme-ov-file
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

چه‌کار کنیم وقتی خطاها به هم مرتبط هستند؟ 🤨

ما اغلب با خطاهایی در کد مواجه می‌شویم. اما اگر خطا تنها خود خطا نباشد و نتیجه خطای دیگری باشد، چه باید کرد؟

در JavaScript از سپتامبر سال دو هزار و بیست و یک، ابزاری برای مدیریت چنین مواردی معرفی شده است: `cause`. بیایید ببینیم چگونه می‌توان با آن کار کرد. 😁

📚 \`cause\`\` چیست؟

‏cause یک پارامتر است که به شما اجازه می‌دهد مشخص کنید کدام خطا منجر به خطای فعلی شده است. این کار اشکال‌زدایی و تشخیص مشکل را ساده‌تر می‌کند و یک زنجیره واضح از خطاها ایجاد می‌کند.

مثال استفاده:

try {
  throw new Error("بارگذاری فایل موفق نبود");
} catch (err) {
  throw new Error("خطا در پردازش درخواست", { cause: err });
}

در اینجا ما یک خطای جدید ایجاد می‌کنیم و خطای اولیه را در `cause` قرار می‌دهیم. این کمک می‌کند بفهمیم چه چیزی منجر به مشکل جدید شده است.

چه زمانی مفید است؟ 🤔

✔️ برای پاکیزگی کد: به جای دستکاری‌های پیچیده در stack، یک راه ساده و قابل فهم.

✔️ برای اشکال‌زدایی: مشخص می‌شود که یک خطا چگونه به خطای دیگر منجر شده است و این کار باعث سرعت یافتن علت مشکل می‌شود.

نمونه خروجی:

Error: خطا در پردازش درخواست
    at <anonymous>:4:9
Caused by: Error: بارگذاری فایل موفق نبود
    at <anonymous>:2:9

در نهایت، پارامتر `cause` به مرتبط کردن خطاها کمک می‌کند**، که باعث کاهش «سر و صدای اضافی» در کد و **سرعت بخشیدن به فرآیند شناسایی و رفع مشکلات می‌شود. 👍



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

نحو تعریف ویژگی caret-shape بسیار ساده است:

caret-shape: auto | bar | block | underscore;


مقدار اولیه auto است، که به مرورگر اجازه می‌دهد شکل نشانگر را بر اساس استانداردهای پلتفرم در موقعیت‌های مختلف تعیین کند. اما تا کنون همیشه از نشانگر خط عمودی (|) استفاده شده است.

شما می‌توانید نشانگر بلوک (█) یا زیرخط (_)‌ را انتخاب کنید، که برای برخی اپلیکیشن‌ها مانند ویرایشگر کد کاربردی و جلوه‌ای جذاب دارد.

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

Dragscroll

اسکرول محتوا با موس اغلب محدود به استفاده از نوارهای اسکرول استاندارد است. کتابخانه dragscroll رفتار اسکرول با کشیدن (drag) را به رابط‌های دسکتاپ اضافه می‌کند، رفتاری که کاربران در دستگاه‌های لمسی به آن عادت دارند.

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

🔗http://asvd.github.io/dragscroll/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

آیا می‌دانستید که واژه‌ی روزمره‌ی «جاوااسکریپت» در واقع به‌عنوان یک علامت تجاری در مالکیت شرکت Oracle است؟

این یعنی استفاده از واژه‌ی «جاوااسکریپت» برای توصیف کارتان، محصولتان یا حتی یک کنفرانس می‌تواند ریسک حقوقی به همراه داشته باشد. به همین دلیل گاهی اصطلاح ثقیل «ECMAScript» را می‌بینیم؛ چون یک شرکت انحصار حقوقی بر زبانی را ادعا می‌کند که میلیاردها نفر هر روز به آن متکی هستند.

اوراکل این علامت تجاری را از شرکت Sun Microsystems به ارث برد؛ یادگاری از یک تلاش شکست‌خورده برای هم‌برندسازی با «جاوا». اما اکنون، پس از گذشت بیست‌وپنج سال، «جاوااسکریپت» دیگر یک برند نیست، بلکه نام عمومی محبوب‌ترین زبان برنامه‌نویسی جهان است که در سراسر وب استفاده می‌شود. اوراکل نه آن را ساخته، نه نگهداری می‌کند و نه حتی از آن استفاده دارد، اما همچنان نامش را تصاحب کرده، گویی محصول خود اوست.
🔗https://javascript.tm/
👥@IR_javascript_group
🆔@IR_javascript