پلاگین vite-plugin-json-md

این پلاگین در فایل‌های JSON/JSON5 مارک‌داون را با HTML تبدیل‌شده جایگزین می‌کند.

این ابزار به خصوص برای i18n (بین‌المللی‌سازی) مفید است، زمانی که متن ترجمه در فایل‌های JSON قرار دارد، اما گاهی اوقات فرمت‌بندی پیچیده‌ای در صفحه وجود دارد و تقسیم‌بندی متن به صورت کلید-مقدار خیلی شلوغ می‌شود. در چنین مواقعی می‌توان متن را از طریق مارک‌داون نوشت.

این پلاگین هم پشتیبانی از گنجاندن مارک‌داون به صورت این‌لاین و هم لینک به فایل‌های مارک‌داون خارجی را ارائه می‌دهد.

🔗 https://www.npmjs.com/package/vite-plugin-json-md
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

ولادت امام حسین(ع) مبارک!
💠 امام حسین عليه السلام فرمودند:
إنَّ شِيعَتَنَا مَنْ سَلِمَتْ قُلُوبُهُمْ مِنْ كُلِّ غِشٍّ وَ غِلٍّ وَ دَغَلٍ

💫 بی گمان شیعیان ما، دلهایشان از هر خیانت، کینه و فریبکاری پاک است.
📚 بحار الأنوار، ج۵۶، ص۱۵۴

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

پاک‌سازی آرایه در جاوا اسکریپت: کدام روش را انتخاب کنیم — arr.length = 0 یا arr = []؟ 🗑

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

🧩 arr.length = 0

این روش ویژگی length آرایه را تغییر می‌دهد که به صورت آنی تمام عناصر را حذف می‌کند.

✔️ آرایه به‌صورت درجا پاک می‌شود و ارجاع جاری حفظ می‌شود؛
✔️ اگر سایر متغیرها به این آرایه ارجاع دارند، تغییرات در همه جا اعمال می‌شود.

🧩 arr = []

این روش به متغیر یک آرایه خالی جدید اختصاص می‌دهد.

✔️ آرایه جدیدی ایجاد می‌شود؛
✔️ ارجاع قبلی به آرایه حفظ می‌شود، بنابراین سایر متغیرهایی که به آرایه اصلی اشاره می‌کنند تحت تأثیر قرار نمی‌گیرند.

💡 کدام روش را باید انتخاب کنید؟
✅ از arr.length = 0 استفاده کنید اگر می‌خواهید آرایه را درجا پاک کنید و مهم است که تمام ارجاع‌ها به آن به‌روز بمانند؛
✅ از arr = [] استفاده کنید اگر می‌خواهید آرایه جدیدی بسازید و ارتباط با آرایه قبلی را قطع کنید.

حالا می‌دانید که بسته به موقعیت، چگونه باید آرایه را به‌درستی پاک کنید! 👍

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

برای لینوکس:

"count:sfc": "find . -type f -name '*.vue' ! -path '*/node_modules/*' | wc -l"

برای ویندوز:

"count:sfc": "Get-ChildItem -Recurse -Include *.vue -Exclude '*/node_modules/*' | Measure-Object -Line"

این دستورات را به اسکریپت‌های فایل package.json خود اضافه کنید.

این اسکریپت تعداد کامپوننت‌ها در پروژه vue را می‌شمارد.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ولادت امام سجاد(ع) مبارک!
💠 امام زین العابدین علیه السلام:
از شاد شدن به گناه بپرهیز ،که شاد شدن به گناه از ارتکاب آن بدتر است.

[+لینک ویدیو]


#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

‏**SSE چیست؟**

‏SSE (Server-Sent Events) یک فناوری برای ایجاد ارتباط یک‌طرفه بین سرور و کلاینت است که به سرور این امکان را می‌دهد تا به‌روزرسانی‌های داده را به‌صورت آنی ارسال کند.

اغلب SSE می‌تواند یک جایگزین عالی برای WebSocket باشد. این فناوری به‌ویژه برای مواردی مناسب است که:
1. نیاز به دریافت مداوم به‌روزرسانی‌ها از سرور داریم.
2. نیازی به ارسال مداوم داده‌ها از سمت کلاینت نیست.

این نوع ارتباط یک‌طرفه در موارد زیر مفید است:
- ارسال اعلان‌ها
- به‌روزرسانی داده‌ها به‌صورت آنی (مانند قیمت‌ها، بارگذاری CPU و ...)
- نشانگر پیشرفت در هنگام بارگذاری فایل‌های حجیم
- حتی در بازی‌ها

و بسیاری موارد دیگر.

مزیت SSE این است که نگهداری آن بسیار ساده‌تر و ارزان‌تر از WebSocket است، هم از لحاظ کد و هم از نظر عملکرد.

برای پیاده‌سازی آن، تنها به یک endpoint ساده در سرور نیاز داریم. فرآیند آن به این صورت است:
1. کلاینت یک درخواست GET به endpoint آماده‌شده از طریق EventStream ارسال می‌کند.
2. سرور یک event-stream ایجاد می‌کند با تنظیم هدر مناسب. ارتباط قطع نمی‌شود و از این لحظه به بعد، سرور می‌تواند هر داده متنی را به استریم ارسال کند.
3. کلاینت به‌روزرسانی‌های جدید در استریم را دریافت می‌کند.

در سرور، این کد به شکل زیر خواهد بود:

const http = require('http');

http.createServer((req, res) => {
  if (req.url === '/stream') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    });

    setInterval(() => {
      res.write('data:  سلام!\n\n');
    }, 1000);
  }
}).listen(3000);

در کلاینت، اینطور خواهد بود:

const source = new EventSource('/stream');

source.addEventListener('message', (message) => {
  console.log(message.data);
});

با این کد، کلاینت هر ثانیه پیامی به نام "سلام!" دریافت می‌کند.

البته، هیچ مانعی برای پیچیده‌تر کردن منطق در سمت سرور وجود ندارد. سرور می‌تواند فقط در صورت تغییر داده‌ها، پیام‌های جدید را به استریم ارسال کند، نه هر ثانیه.

همچنین، هیچ مشکلی برای قرار دادن استریم در یک هُک React و ساخت یک راه‌حل عمومی برای پروژه‌ها وجود ندارد.

اگر تا به حال با SSE کار نکرده‌اید، حتماً توصیه می‌کنم حداقل یک بار در یک محیط آزمایشی امتحان کنید — واقعا تکنولوژی جالبی است!

به طور خلاصه:
‏SSE یک فناوری ارتباط یک‌طرفه از سرور به کلاینت است. با استفاده از SSE می‌توان داده‌ها را در کلاینت در یک اتصال ثابت و در زمان واقعی به‌روز کرد.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد Material UI با Vuetify و Vue.js [+لینک] از vue school
با استفاده از Vuetify، به راحتی و در کمترین زمان یک اپلیکیشن Vue.js با رابط کاربری زیبا و کاربردی ایجاد کنید! این کتابخانه رابط کاربری شامل بیش از هشتاد کامپوننت آماده است که طبق مشخصات زیبا و کاربردی Material Design طراحی شده‌اند. همچنین، این کتابخانه پرکاربردترین کتابخانه رابط کاربری برای Vue.j
است که بیش از نیم میلیون دانلود هفتگی دارد!

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

چگونه انیمیشن‌ها را نرم‌تر کنیم: نکات مهم و بهینه‌سازی 🧐

زمانی که صحبت از ایجاد انیمیشن‌های نرم در صفحات وب می‌شود، باید به نحوه پردازش انیمیشن‌ها توسط مرورگر و منابعی که برای اجرای آن‌ها استفاده می‌شود توجه کرد. در این پست، بنحوه بهینه‌سازی انیمیشن‌ها برای عملکرد نرم و مؤثر آن‌ها، به ویژه در زمینه شتاب‌دهی GPU و محاسبات مجدد طرح (reflow)، را بررسی می‌کنیم.

محاسبه مجدد طرح (Reflow) چیست و کی اتفاق می‌افتد؟
محاسبه مجدد طرح (یا reflow) زمانی رخ می‌دهد که تغییراتی در یک عنصر باعث شود مرورگر موقعیت و اندازه آن را نسبت به سایر عناصر صفحه وب مجدداً محاسبه کند.

این تغییرات می‌توانند شامل موارد زیر باشند:
✅ اندازه عناصر: عرض (width)، ارتفاع (height)
✅ موقعیت عناصر: بالا (top)، چپ (left)، راست (right)، پایین (bottom) (فقط زمانی که position: absolute/fixed/relative باشد)
✅ موقعیت در جریان سند: به عنوان مثال، تغییراتی که بر نمایش یک بلوک درون ظرف والد تأثیر می‌گذارد (display، position)
✅ فاصله‌ها و حاشیه‌ها: هرگونه تغییر در margin، padding، border-width
✅ تغییرات در متن داخل بلوک، فونت، اندازه و سبک آن: font-size و غیره

زمانی که چنین ویژگی‌هایی را انیمیت می‌کنید، مرورگر باید طرح (layout) عناصر و فرزندان آن‌ها را دوباره محاسبه کند که باعث کندی در رندر فریم‌های انیمیشن می‌شود.

یک مثال بد (از تجربه شخصی):
زمانی که اولین بار با انیمیشن‌ها کار می‌کردم، سعی داشتم با استفاده از ویژگی CSS top عناصر را جابه‌جا کنم:

.box {
  position: absolute;
  transition: top 0.3s ease-in-out;
}

.box:hover {
  top: 100px;
}

مشکل این است که انیمیشن با استفاده از top باعث محاسبه مجدد طرح (reflow) می‌شود، چرا که مرورگر باید موقعیت عنصر را نسبت به دیگر اشیاء در صفحه دوباره محاسبه کند. این باعث کندی انیمیشن می‌شود، به‌ویژه اگر چندین عنصر در صفحه وجود داشته باشد.

چگونه سرعت انیمیشن را افزایش دهیم:
برای افزایش سرعت انیمیشن، می‌توان از ویژگی CSS transform به جای top استفاده کرد. زمانی که با transform انیمیت می‌کنید، مرورگر از شتاب‌دهی GPU استفاده می‌کند که باعث می‌شود فریم‌های انیمیشن سریع‌تر رندر شوند نسبت به زمانی که از CPU استفاده شود.

.box {
  transition: transform 0.3s ease-in-out;
}

.box:hover {
  transform: translateY(100px);
}

در این حالت، مرورگر عنصر را در یک لایه ترکیب جداگانه (compositing layer) با استفاده از GPU جابه‌جا می‌کند، که باعث جلوگیری از محاسبه مجدد طرح (reflow) غیرضروری و بهبود نرمی انیمیشن می‌شود.

### چگونه انیمیشن‌ها را با GPU اجرا کنیم؟
برای تسریع انیمیشن‌ها، مرورگرها از شتاب‌دهی GPU استفاده می‌کنند. ویژگی‌های CSS مانند transform`، `opacity و filter با استفاده از GPU پردازش می‌شوند، که به مرورگر این امکان را می‌دهد که انیمیشن‌ها را نرم‌تر و سریع‌تر رندر کند، بدون اینکه محتوای دیگر صفحه تحت تأثیر قرار گیرد. بنابراین، برای اینکه مرورگر بتواند رندر فریم‌های انیمیشن شما را به GPU محول کرده و انیمیشن شما نرم‌تر به نظر برسد، باید از ویژگی‌های CSS مانند transform`، `opacity و filter استفاده کنید.


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

اگر صفحه‌ای را از طریق <router-view> نمایش می‌دهید که شامل پارامترهای مسیری (مانند محصولات، کاتالوگ‌ها یا کاربران از طریق شناسه) است و باید در صورت تغییر پارامتر، اطلاعات جدیدی بارگذاری کنید، یعنی باید تغییرات پارامتر را پیگیری کنید، این کار را می‌توان به دو روش انجام داد.

از طریق watch:

watch(
  () => route.params.id,
  async () => {
    userData.value = await fetchUser(to.params.id);
  },
  { immediate: true }
);

از طریق هوک روتر onBeforeRouteUpdate:

import { onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteUpdate(async (to, from) => {
  if (to.params.id !== from.params.id) {
    userData.value = await fetchUser(to.params.id);
  }
})

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

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

چگونه اسکرول صفحه را زمانی که یک دیالوگ مدال نمایش داده می‌شود، غیرفعال کنیم؟

body:has(dialog[open]) {
  overflow: hidden;
}

چگونه پس‌زمینه یا اورلی را محو کنیم؟

dialog::backdrop {
  backdrop-filter: blur(2px);
}

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

چری‌پیک گیت 🆚 مرج 🆚 ری‌بیس

راهنمای بصری برای توسعه‌دهندگان

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

اَلسّلامُ عَلَیکَ یَا اَباعَبدِالله
🌸 سالروز میلاد حضرت علی اکبر (ع) و روز جوان

🔅 وقتي كه به ميدان كارزار قدم نهادند اينچنين رجز خواندند:
من علي پسر حسين پسر علي (ع)هستم ،به خانه خدا سوگند،كه ما به نبّي(ص) نزديكتر و اولي هستيم، تا شبث و شمر فرومايه ،آنقدر با شمشير به شما مي زنم تا شمشير تاب بردارد،شمشير زدن جوان هاشمي علوي.بخدا قسم پيوسته امروز از پدرم حمايت ميكنم.تا فرزند زنا زاده در ميان ما حكومت نكند.


🔗https://www.valiasr-aj.com/persian/mobile_shownews.php?idnews=5985
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

بازسازی (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