بازسازی (Reflow) و تجدید نقاشی (Repaint) در مرورگر [+لینک]
بازسازی (Reflow) و تجدید نقاشی (Repaint) مفاهیم اساسی در نحوه رندر شدن صفحات وب توسط مرورگرها هستند. این دو فرآیند بخش‌های مختلفی از روند به‌روزرسانی و رندر کردن محتوای صفحه در مرورگر را تشکیل می‌دهند. درک نحوه عملکرد این دو و تأثیر آن‌ها بر عملکرد بسیار مهم است تا بتوان بهینه‌سازی‌های لازم را در وب‌سایت‌ها انجام داد.

🔗https://aparat.com/v/rxr7h3h
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

🧑‍💻 چگونه در انتخاب ابزارها غرق نشویم؟

اکوسیستم ها با سرعتی سرسام‌آور در حال پیشرفت است، به‌طوری‌که توسعه‌دهندگان اغلب دچار فلج انتخاب می‌شوند. به جای تمرکز بر نوشتن کد، آن‌ها ساعت‌ها در انتخاب ابزارهای مناسب گرفتار می‌شوند.

امروزه دیگر یک مسیر "درست" و واحد وجود ندارد؛ بلکه ابزارهای مختلفی برای سناریوهای گوناگون در دسترس‌اند. برای سایت‌های استاتیک یک مجموعه فناوری مناسب است، برای وب‌اپلیکیشن‌های پیچیده مجموعه‌ای دیگر، و برای پروژه‌های کوچک گزینه‌های متفاوتی وجود دارد. این تنوع، باعث سردرگمی و ترس از انتخاب نادرست می‌شود.

🔄 چگونه از این چرخه خارج شویم؟
1️⃣ مقیاس پروژه را مشخص کنید.

2️⃣ از ابزارهای اثبات‌شده استفاده کنید، نه کتابخانه‌های کمتر شناخته‌شده.

3️⃣ فراموش نکنید که انتخاب ایدئال وجود ندارد—مهم این است که ابزار، نیاز شما را برطرف کند.

4️⃣ اگر مطمئن نیستید از کجا شروع کنید، سراغ فناوری‌های محبوب و دارای مستندات قوی بروید.

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

‏🆚 Vite در برابر Webpack

در دنیای توسعه فرانت‌اند، اولویت‌ها در حال تغییر هستند: Vite به‌سرعت در حال محبوب شدن است و به نظر می‌رسد که آماده است تا جایگاه رهبر دیرینه، یعنی Webpack را به چالش بکشد.

### چرا Vite تا این حد مورد توجه توسعه‌دهندگان قرار گرفته است؟

۱️⃣ سرعت اجرا و بیلد
Vite به دلیل سرعت خارق‌العاده‌اش به‌سرعت محبوب شد. این ابزار با بهره‌گیری از قابلیت‌های بومی ماژول‌های ES در مرورگرها**، نیاز به مرحله **بیلد اولیه که در Webpack وجود دارد را حذف می‌کند.

۲️⃣ پیکربندی ساده
‏Webpack به انعطاف‌پذیری‌اش مشهور است، اما تنظیمات آن اغلب پیچیده و زمان‌بر است. در مقابل، Vite رویکردی مینیمالیستی دارد و پیکربندی اولیه آن برای اکثر پروژه‌ها کافی است. در صورت نیاز به تغییرات خاص، رابط‌های تنظیمات آن کاملاً شفاف و ساده هستند.

۳️⃣ بارگذاری سریع و به‌روزرسانی آنی (HMR)
برای توسعه‌دهندگان، مشاهده تغییرات کد در لحظه اهمیت زیادی دارد. Vite در این زمینه بسیار سریع عمل می‌کند، درحالی‌که Webpack، به‌ویژه در پروژه‌های بزرگ، عملکرد ضعیف‌تری دارد.

۴️⃣ جامعه و روندهای توسعه
هرچند Webpack همچنان از نظر تعداد نصب پیشتاز است، اما Vite به‌سرعت در حال کم کردن این فاصله است. با رشد جامعه کاربران و حمایت شرکت‌های مطرح، این روند همچنان ادامه دارد.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

🚀 حذف آسان مقادیر خالی از آرایه در جاوااسکریپت
اگر تا به حال نیاز داشته‌اید که یک آرایه را از مقادیر خالی مانند null، undefined، false، صفر، NaN و رشته‌های خالی پاک کنید، احتمالاً به دنبال روشی ساده و کارآمد بوده‌اید.

اینجاست که .filter(Boolean) به کمک شما می‌آید!

‏✨ .filter(Boolean) چگونه کار می‌کند؟
این یک روش مختصر و قدرتمند برای حذف تمام مقادیر نادرست (Falsy) در یک آرایه و نگه داشتن فقط مقادیر درست (Truthy) است.

🔍 مکانیزم عملکرد:
‏✅ Boolean یک تابع داخلی جاوااسکریپت است که هر مقدار را به مقدار منطقی (true یا false) تبدیل می‌کند.
‏✅ .filter() یک متد استاندارد برای آرایه‌ها است که یک آرایه جدید ایجاد می‌کند و فقط عناصری را نگه می‌دارد که تابع فیلتر مقدار true برگرداند.

وقتی از .filter(Boolean) استفاده می‌کنید:

🔹 جاوااسکریپت برای هر مقدار آرایه، تابع Boolean() را اجرا می‌کند.
🔹 مقادیری مانند null، undefined، 0، false، NaN و "" که مقدار false دارند، حذف می‌شوند.
🔹 بقیه مقادیر که مقدار true دارند، در آرایه باقی می‌مانند.

❗️ چه زمانی نباید از .filter(Boolean) استفاده کرد؟
اگر صفر (۰) یا رشته خالی ("") در داده‌های شما معنا و اهمیت دارد، این روش می‌تواند اطلاعات ارزشمند را حذف کند. در این صورت، بهتر است فیلترینگ را به صورت دستی انجام دهید.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

💚 ولادت یگانه منجی عالم بشریت حضرت مهدی (عج) مبارک باد

🔻امام سجاد علیه‌السلام: إنَّ أَهْلَ زَمَـانِ غَيْبَتِهِ اَلْقَائِلُونَ بِإِمَامَتِـهِ اَلْمُنْتَظِـرُونَ لِظُهُـورِهِ أَفْضَلُ أَهْلِ كُلِّ زَمَانٍ
🔻همانا مردم زمان غيبت او «حضرت مهدی(عج)» که امامتش را باور دارند و در انتظار ظهورش به سر برند، از مردم تمام زمان ها بهترند.

📚 بحار الأنوار، ج ۵۲، ص ۱۲۲
🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد Storybook در Vue.js [+لینک]
‏Storybook، یک محیط توسعه و فضای آزمایشی قدرتمند برای کامپوننت‌های رابط کاربری (UI) است. با این ابزار می‌توان کامپوننت‌های رابط کاربری را به‌صورت مستقل از اپلیکیشن اصلی طراحی، توسعه، مستندسازی و در یک محیط ایزوله تست کرد. Storybook با فراهم کردن بستری برای نمایش تعاملی کامپوننت‌ها، فرایند توسعه رابط کاربری را ساده‌تر و موثرتر می‌کند و امکان همکاری بهتر بین توسعه‌دهندگان و طراحان را فراهم می‌آورد.


🔗https://www.aparat.com/playlist/14302971
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

### ویژگی animation-timeline: view() در CSS 🚀

این ویژگی امکان اجرای انیمیشن‌های CSS را بر اساس میزان قابل‌مشاهده بودن یک عنصر در صفحه (Viewport) فراهم می‌کند.

#### 🔹 نحوه عملکرد:

✅ تابع view() اجازه می‌دهد که انیمیشن‌ها متناسب با میزان مشاهده شدن عنصر در صفحه تغییر کنند؛

✅ در واقع، این ویژگی یک مکانیزم داخلی برای ایجاد انیمیشن‌های وابسته به اسکرول است!

---

### 👩‍💻 نحوه استفاده

فرض کنید می‌خواهیم یک تصویر را هنگام اسکرول صفحه به‌تدریج بزرگ‌تر کنیم:

.image-container {
    width: 100%;
    height: 400px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    animation: zoom linear;
    animation-timeline: view();
}

@keyframes zoom {
    from {
        background-size: 100%;
    }
    to {
        background-size: 120%;
    }
}

☝️ در این مثال، با اسکرول صفحه، مقدار background-size به‌تدریج افزایش می‌یابد و یک افکت بزرگ‌نمایی ایجاد می‌شود.

---

### 🔍 پشتیبانی مرورگرها

👀 در حال حاضر، این ویژگی در مرحله آزمایشی قرار دارد و توسط تمامی مرورگرهای مدرن پشتیبانی نمی‌شود (حدود هفتاد و چهار درصد)
[بررسی پشتیبانی در Can I Use](https://caniuse.com/?search=animation-timeline)

اما این یک گام رو به جلو در دنیای CSS است! 🎉 اکنون می‌توان انیمیشن‌های وابسته به اسکرول را بدون نیاز به JavaScript و تنها با استفاده از CSS خالص پیاده‌سازی کرد! 👍

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

فهرست گسترده‌ای از افزونه‌های Vite 🚀
📌 مشاهده فهرست در GitHub

یک افزونه Vite می‌تواند یک ابزار کاربردی باشد که در زمان بیلد پروژه، وظیفه‌ای مفید را انجام می‌دهد.

✅ نوشتن یک افزونه برای Vite بسیار ساده است و نیازی نیست حتماً آن را در NPM منتشر کنید.
✅ می‌توانید مستقیماً آن را در پروژه خود تعریف کرده و استفاده کنید، بدون نیاز به انتشار عمومی.

به‌طور خلاصه، افزونه‌های Vite انعطاف‌پذیر هستند و به‌راحتی می‌توان آن‌ها را متناسب با نیازهای هر پروژه توسعه داد. 🚀

🔗https://github.com/vitejs/awesome-vite
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

### فعال‌سازی بارگذاری مجدد کامل در Vite برای تغییرات فایل‌های خاص

گاهی اوقات، برای اطمینان از اینکه HMR در Vite هنگام تغییر فایل‌های مشخصی به‌درستی عمل کند، ممکن است به افزونه‌ای مانند نمونه زیر نیاز داشته باشید:

// vite.config.ts

const fullReloadJson5 = {
  name: "full-reload-json5",
  handleHotUpdate({ file, server }) {
    if (file.endsWith(".json5")) {
      server.ws.send({ type: "full-reload" });
    }
    return [];
  },
};

// ...
plugins: [
    vue(),
    json5Plugin(),
    fullReloadJson5,
  ],

🔹 این افزونه بررسی می‌کند که آیا فایلی با پسوند `.json5` تغییر کرده است یا خیر.
🔹 در صورت تغییر، به سرور Vite سیگنال بارگذاری مجدد کامل (Full Reload) ارسال می‌کند.
🔹 این روش به‌ویژه زمانی مفید است که HMR به‌صورت پیش‌فرض به‌روزرسانی فایل‌های خاصی را تشخیص نمی‌دهد. ✅
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

محبوبیت برخی کتابخانه‌های UI بر اساس دانلودها برای vue



#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد Web Worker در جاوااسکریپت [+لینک]

یک Web Worker اسکریپتی است که در رشته‌های پس‌زمینه اجرا می‌شود و از رشته اصلی جدا است. Web Workerها این امکان را به مرورگر می‌دهند که چندین رشته جاوااسکریپت را به طور همزمان اجرا کند. رشته کارگر (worker) می‌تواند وظایف را بدون دخالت در رابط کاربری انجام دهد. پس از ایجاد شدن، یک worker می‌تواند با ارسال پیام‌ها به هندلر رویداد مشخص‌شده توسط کد جاوااسکریپت که آن را ایجاد کرده، به آن کد پیام ارسال کند (و بالعکس).

🔗https://aparat.com/v/qjhaemp
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

‏### Promise.try(): یک ترفند کاربردی برای مدیریت کدهای ناهمزمان 😍

‏**Promise.try() یک متد استاتیک است که یک تابع (چه همزمان و چه ناهمزمان) را دریافت کرده و یک **Promise بازمی‌گرداند که نتیجه اجرای آن تابع را در بر دارد. اگر تابع موردنظر خطا ایجاد کند، Promise.try() یک Promise ردشده (Rejected) با همان خطا برمی‌گرداند.

### با استفاده از این متد می‌توانید:
✅ از بروز خطا هنگام اجرای کد جلوگیری کنید.
✅ هر نوع کد را به فرمت Promise تبدیل کنید.

### یک مثال کاربردی:
تصور کنید تابعی را فراخوانی می‌کنید که ممکن است یک خطا ایجاد کند (مثلاً به‌صورت همزمان) یا یک Promise بازگرداند. معمولاً برای مدیریت این وضعیت، باید از try/catch استفاده کرده یا به‌صورت دستی Promise ایجاد کنید.

❌ روش قدیمی:

try {
  const result = myFunction();
  Promise.resolve(result).then(console.log);
} catch (error) {
  console.error(error);
}

✔️ روش بهینه با Promise.try():

Promise.try(() => myFunction())
  .then(console.log)
  .catch(console.error);

✅ ساده، خوانا و بدون پیچیدگی اضافه! 👍

### چرا Promise.try() مفید است؟
این متد فرآیند کار با توابعی که ممکن است همزمان یا ناهمزمان باشند را ساده‌تر کرده و یک روش یکپارچه و استاندارد برای مدیریت نتایج و خطاهای آن‌ها ارائه می‌دهد.

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

👀 از دی‌ماه سال هزار و چهارصد و سه**، این قابلیت در جدیدترین نسخه‌های مرورگرها و دستگاه‌ها پشتیبانی می‌شود (**حدود هفتاد درصد سازگاری: [Can I use?](https://caniuse.com/?search=Promise.try)).

⛓️ برای اطلاعات بیشتر، می‌توانید مستندات رسمی را در MDN Web Docs مطالعه کنید:
[MDN WEB DOCS](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/try)

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

متن MDN اشتباهی نخواهد گفت

جایگزینی یعنی جایگزینی.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

امروز یک ویژگی جالب در جاوااسکریپت به من نشان دادند که تا حالا نمی‌دانستم و جالب‌تر اینکه از سال ۲۰۲۰ پشتیبانی می‌شود! 🤨

این ویژگی مربوط به رشته‌های قالبی تگ‌شده است. قبل از این اصلاً نمی‌دانستم چنین چیزی وجود دارد. اگر مثل من برای اولین بار از این موضوع می‌شنوید، بگذارید ساده‌تر توضیح بدهم.

➡️ چیست؟

ما همه با رشته‌های قالبی در جاوااسکریپت آشنا هستیم. این رشته‌ها همان‌هایی هستند که می‌توانیم متغیرها را با استفاده از ${} داخل آنها قرار دهیم. مثل این مثال:

const name = "John";
console.log(`Hello, ${name}!`); // خروجی: Hello, John!

خیلی ساده است، درست؟ حالا جالب‌ترین بخش اینجاست که نسخه پیچیده‌تری از این رشته‌ها هم داریم به نام رشته‌های قالبی تگ‌شده. این ویژگی به شما این امکان را می‌دهد که قبل از قرار گرفتن متغیرها در رشته، آنها را پردازش کنید.

➡️ چطور کار می‌کند؟

رشته‌های قالبی تگ‌شده شبیه رشته‌های معمولی هستند، اما فرقش این است که به جای اینکه فقط متغیر را داخل رشته بگذارید، یک تابع خاص (به نام تگ) داریم که می‌تواند با متغیرها و بخش‌های رشته کاری انجام دهد.

این تابع تگ دو نوع اطلاعات دریافت می‌کند:
✅ یک آرایه از رشته‌ها: آنچه که قبل و بعد از هر متغیر باقی می‌ماند.
✅ مقادیر متغیرها: همان‌هایی که داخل ${} قرار می‌دهیم.

نکته جالب اینجاست که این تابع می‌تواند این مقادیر را تغییر دهد و چیزی متفاوت از رشته به شما برگرداند.

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

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

✅ قبل از قرار گرفتن متغیرها در رشته، آنها را پردازش کنید.
✅ نیاز به ساخت رشته‌های پیچیده با منطق خاص داشته باشید.
✅ بخواهید عملیات خاصی روی متنی انجام دهید، مثل ساخت رشته‌هایی که شرایط خاصی دارند، مثل در SQL.

⛓️ بیشتر بخوانید: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates)

به طور کلی، این ویژگی ابزاری جالب برای کار با رشته‌هاست که کنترل بیشتری به شما می‌دهد و می‌توانید به کمک آن رشته‌ها را به شکل بهتری پردازش کنید. به نظر من، رشته‌های قالبی تگ‌شده ابزاری هستند که باید در کدتان از آنها استفاده کنید. شما تا به حال از این ویژگی استفاده کرده‌اید؟ ☺️
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

در نسخه‌های آزمایشی مرورگرها، پیاده‌سازی Temporal - جایگزین رسمی Date در جاوااسکریپت، شروع به ظهور کرده است.

const dateTime = Temporal.Now.plainDateTimeISO();
console.log(dateTime); // مثلاً: 2025-01-22T11:46:36.144

// 1851222399924، زمان‌سنج ما است
const launch = Temporal.Instant.fromEpochMilliseconds(1851222399924);
const now = Temporal.Now.instant();
const duration = now.until(launch, { smallestUnit: "hour" });
console.log(`It will be ${duration.toLocaleString("en-US")} until the launch`);
// "It will be 31,600 hr until the launch" <- @js-temporal/polyfill
// "It will be PT31600H until the launch" <- Firefox Nightly

همچنین، یک پلیفیل به نام @js-temporal/polyfill برای استفاده از این ویژگی در مرورگرهای قدیمی‌تر در دسترس است. [پلیفیل Temporal در NPM](https://www.npmjs.com/package/@js-temporal/polyfill)

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript