React SFC

یک تلاش برای آموزش ری‌اکتری‌ها به شیوه‌ای زیبا و درست!

💡 این پروژه ابزار ساده و جذابی برای ساخت کامپوننت‌های فانکشنال ری‌اکت با استفاده از قالب‌نویسی به روشی شبیه به Vue ارائه می‌دهد.

<template>
  <div>
    <h1>Counter</h1>
    <button onClick={() => setCount(count + 1)}>Increment</button>
    <p $if={count > 0}>Count: {count}</p>
    <p $if={count === 0}>Start counting!</p>
  </div>
</template>

<script lang="ts">
import { useState } from 'react';

const [count, setCount] = useState<number>(0);
</script>

<style>
button {
  padding: 10px 20px;
  font-size: 16px;
}
</style>

🔗https://github.com/roonie007/react-sfc?tab=readme-ov-file
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ایجاد موج
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

برگه‌های تقلب برای توسعه‌دهندگان

مجموعه‌ای گسترده از برگه‌های تقلب کاربردی برای توسعه‌دهندگان، شامل موضوعاتی مانند جاوااسکریپت، HTML و CSS، برای افزایش بهره‌وری و یادگیری سریع در حین کار.

🔗https://cheatsheets.zip/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

نکات مفید برای نوشتن "کد تمیز"

۱. از نام‌های معنادار استفاده کنید.
۲. اصل مسئولیت واحد (SRP) را رعایت کنید.
۳. از توضیحات غیرضروری اجتناب کنید.
۴. کد را خوانا و شفاف بنویسید.
۵. تست‌های واحد بنویسید.
۶. در استفاده از وابستگی‌ها محتاط باشید.
۷. ساختار پروژه را سازمان‌دهی کنید.
۸. از یک سبک قالب‌بندی یکسان استفاده کنید.
۹. از استفاده از مقادیر ثابت (هاردکد) خودداری کنید.
۱۰. اندازه توابع را محدود کنید.

با همه نکات موافقم، به‌جز مورد پنجم.

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

Web Skills

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

🔗https://andreasbm.github.io/web-skills/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ترفند جالب CSS برای تغییر خودکار رنگ متن بر اساس رنگ پس‌زمینه 🌈

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

div {
  --bg: red;
  background: var(--bg);

  /* تغییر خودکار رنگ متن بر اساس روشنایی پس‌زمینه */
  color: lch(from var(--bg) calc((50 - l) * infinity) 0 0);
}

در این ترفند، با استفاده از مدل رنگی LCH و ترکیب آن با عملکرد calc، رنگ متن بر اساس میزان روشنایی پس‌زمینه تنظیم می‌شود:

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


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

Feature Toggle 🤨

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

با Feature Toggle آشنا شوید! این رویکرد به شما امکان می‌دهد قابلیت‌ها را در هر برنامه کلاینت-سروری (از جمله وب‌سایت) فعال یا غیرفعال کنید. 😍

Feature Toggle چیست و چه کاربردی دارد؟
Feature Toggle (یا Feature Flag) یک تکنیک است که با استفاده از یک سوئیچ ساده، قابلیت فعال یا غیرفعال کردن ویژگی‌ها را در اختیار شما قرار می‌دهد. این روش به طور ویژه در سناریوهای زیر مفید است:

✅ ارائه تدریجی قابلیت‌ها: مثلاً می‌توانید یک ویژگی را ابتدا برای ده درصد کاربران فعال کنید، بازخوردها را دریافت کنید، مشکلات را برطرف کنید و سپس آن را برای همه کاربران منتشر کنید.
✅ اجرای تست‌های A/B: اگر می‌خواهید بررسی کنید کدام نسخه از یک دکمه عملکرد بهتری دارد، دو نسخه از رابط کاربری را فعال کرده و با استفاده از فلگ تعیین کنید که هر گروه از کاربران کدام نسخه را ببینند.
✅ بازگردانی سریع تغییرات: اگر مشکلی پیش بیاید، کافی است ویژگی را غیرفعال کنید؛ دیگر نیازی نیست نیمه شب از خواب بیدار شوید و به‌سرعت باگ‌های اضطراری را رفع کنید.
✅ محدود کردن دسترسی: می‌توانید قابلیتی را فقط برای تسترها یا گروه خاصی از کاربران فعال کنید.

چطور می‌توان Feature Toggle را در فرانت‌اند پیاده‌سازی کرد؟
۱️⃣ پیاده‌سازی محلی (لوکال):
این روش شامل اضافه کردن شرط‌های ساده در کد کلاینت است:

const featureFlags = {
  enableNewFeature: true,
};

if (featureFlags.enableNewFeature) {
  renderNewFeature();
} else {
  renderOldFeature();
}

➕ مزایا: پیاده‌سازی ساده و سریع.
➖ معایب: نیازمند تغییر کد کلاینت و ارائه مجدد باندل جدید است و انعطاف‌پذیری کمتری نسبت به روش‌های دیگر دارد.

۲️⃣ پیاده‌سازی سمت سرور:
در این روش از فلگ‌های دینامیک استفاده می‌شود که از طریق پنل مدیریت قابل تغییر هستند و می‌توانند دسترسی به قابلیت‌ها را برای کاربران مختلف تعیین کنند:

async function fetchFeatureFlags() {
  const response = await fetch('/api/feature-flags');
  return response.json();
}

fetchFeatureFlags().then(flags => {
  if (flags.enableNewFeature) {
    renderNewFeature();
  } else {
    renderOldFeature();
  }
});

➕ مزایا: تغییر وضعیت فلگ‌ها و کاربران هدف بدون نیاز به تغییر کد در سرور یا کلاینت امکان‌پذیر است.
➖ معایب: به درخواست‌های شبکه و پیاده‌سازی API در بک‌اند نیاز دارد.

نکات مهم در استفاده از Feature Toggle:
✅ حذف فلگ‌های قدیمی: وقتی قابلیت آزمایش شد و به بخشی از سیستم تبدیل شد، فلگ آن را حذف کنید.
✅ بهینه‌سازی عملکرد: از بارگذاری منابع مربوط به قابلیت‌های غیرفعال خودداری کنید.
✅ حذف ویژگی‌های «همیشه غیرفعال»: شرط‌هایی که همیشه غیرفعال هستند، خواندن کد را پیچیده می‌کنند و ممکن است نیاز به نگهداری دو نسخه از کد داشته باشند که تنها یکی از آن‌ها استفاده می‌شود.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

🔍 روش‌های دیباگ در DevTools مرورگر (فراتر از console.log):

۱. استفاده از دستور debugger
این دستور کد شما را دقیقاً در همان نقطه متوقف می‌کند تا بتوانید وضعیت متغیرها و فراخوانی‌ها را بررسی کنید.

۲. استفاده از debug(funcName)
زمانی که تابعی با نام مشخص اجرا شود، DevTools کد را متوقف می‌کند. برای توابع جهانی کاربرد دارد.

۳. نقاط توقف (DOM Breakpoints):
با تنظیم نقاط توقف روی یک عنصر DOM، می‌توانید تغییرات یا حذف آن را رهگیری کنید.

۴. نقاط توقف در درخواست‌های XHR:
DevTools امکان توقف کد را هنگام ارسال درخواست به URL مشخص فراهم می‌کند.

۵. شبیه‌سازی تنظیمات مرورگر:
می‌توانید User Agent، زبان یا تنظیمات منطقه‌ای (Locale) را در DevTools شبیه‌سازی کنید تا رفتار اپلیکیشن در شرایط مختلف را بررسی کنید.

✨ و اگر با Vue کار می‌کنید، متغیرهای واکنش‌پذیر را با استفاده از {{ someVar }} در قالب‌ها نظارت کنید!

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏API window.ai کروم چیست؟

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

‏API جدید window.ai مدل‌های پیش‌آموزش‌دیده و API‌های آماده را در اختیار توسعه‌دهندگان قرار می‌دهد تا آن‌ها بتوانند بر ساخت ویژگی‌های محصول تمرکز کنند و آموزش و تنظیمات مدل‌ها را به متخصصان یادگیری ماشین گوگل بسپارند. نکته جالب این API این است که برای ساخت ویژگی‌های هوش مصنوعی در اپلیکیشن‌های وب نیازی به تجربه قبلی در زمینه یادگیری ماشین نخواهید داشت.

در این مقاله، نحوه ادغام قابلیت‌های هوش مصنوعی روی دستگاه در اپلیکیشن‌های وب با استفاده از API جدید window.ai را بررسی خواهیم کرد و محدودیت‌ها و آینده این API را نیز کاوش می‌کنیم.

درک API window.ai و نحوه تعامل آن با مدل‌های هوش مصنوعی

در زمان نگارش این مقاله، بیشتر وب‌سایت‌های مبتنی بر هوش مصنوعی از خدمات هوش مصنوعی سرور-محور استفاده می‌کنند (یعنی خدمات هوش مصنوعی که روی سرورهای ابری یا سرورهای بزرگ اجرا می‌شوند). API window.ai گوگل اولین راه‌حل هوش مصنوعی روی دستگاه است که مدل‌های هوش مصنوعی را در مرورگر کروم اجرا می‌کند و حتی به‌طور آفلاین نیز کار می‌کند.

‏window.ai به‌صورت زیر با مدل‌های هوش مصنوعی تعامل می‌کند:

بارگذاری و مدیریت مدل‌ها: این معمولاً اولین مرحله است که مدل‌های پیش‌آموزش‌دیده هوش مصنوعی به‌طور مستقیم در مرورگر بارگذاری می‌شوند، خواه از سرورهای راه دور یا به‌صورت بسته‌های npm. API window.ai مدیریت چرخه حیات مدل‌ها از جمله بارگذاری، به‌روزرسانی و حذف مدل‌ها را انجام می‌دهد.

پس از بارگذاری مدل، ورودی‌های داده‌ای می‌توانند از طریق API به مدل ارسال شوند و خروجی پردازش‌شده برگشت داده می‌شود. این فرایند معمولاً به‌صورت ناهمزمان انجام می‌شود تا مرورگر همچنان پاسخگو باشد.

تنظیم دقیق درخواست‌ها: در این مرحله، درخواست‌ها به‌منظور به‌دست آوردن بهترین نتایج بهینه می‌شوند. تنظیم دقیق درخواست‌ها معمولاً توسط توسعه‌دهنده برای پیاده‌سازی ویژگی‌هایی با نیازهای خاص هوش مصنوعی انجام می‌شود.

برخی از مثال‌های کد برای تعامل با API window.ai:

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

await window.ai.canCreateTextSession();

این کد یک شیء از گزینه‌های پیش‌فرض برای ایجاد جلسه متنی باز می‌گرداند:

const options = await window.ai.defaultTextSessionOptions();

کد زیر یک جلسه با استفاده از مدل Gemini Nano ایجاد می‌کند:

const session = await window.ai.createTextSession(options);

توجه داشته باشید که آرگومان options اختیاری است.

کد زیر جلسه را از بین می‌برد:

await session.destroy();

این دستور یک درخواست را اجرا می‌کند:

await session.prompt("Who is the president of USA?");

این دستور درخواست را اجرا کرده و سپس یک شیء ReadableStream باز می‌گرداند:

await session.promptStreaming("What does NASA stand for?");

تنظیم API window.ai

برای دسترسی به API window.ai، باید نسخه 127 یا بالاتر از مرورگر کروم (Chrome Dev یا Canary) را دانلود کنید. پس از نصب مرورگر، اطمینان حاصل کنید که پرچم‌های زیر تنظیم شده باشد:
‏
‏chrome://flags/#prompt-api-for-gemini-nano: گزینه "Enabled" را انتخاب کنید.
‏chrome://flags/#optimization-guide-on-device-model: گزینه "EnabledBypassPrefRequirement" را انتخاب کنید.
‏chrome://components: گزینه "Optimization Guide On Device Model" را پیدا کرده و روی دکمه "Check for Update" کلیک کنید تا مدل دانلود شود.
نکته: اگر "Optimization Guide" را مشاهده نکردید، مطمئن شوید که پرچم‌ها را به‌درستی تنظیم کرده‌اید. اگر همچنان نتواستید "Optimization Guide" را پیدا کنید، دستور await window.ai.assistant.create(); را در کنسول مرورگر خود اجرا کرده و سپس صفحه را بازخوانی کنید.

کد زیر را در کنسول مرورگر خود اجرا کنید تا بررسی کنید که آیا می‌توانید به مدل Gemini Nano دسترسی داشته باشید:

await window.ai.canCreateTextSession();

اگر کد بالا "Readily" را بازگرداند، می‌توانید به مدل Gemini Nano در مرورگر کروم خود دسترسی داشته باشید.

حالا می‌توانید با استفاده از چند خط کد در کنسول مرورگر، یک جلسه با مدل Gemini Nano ایجاد کرده و یک درخواست را اجرا کنید:

const session = await window.ai.createTextSession();
await session.prompt("What is the capital of France?");

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

افسانه‌هایی درباره دنیای IT که باید باور کردنشان را متوقف کنیم 😅

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

۱. IT آسان است و همه فقط برای پول به این حوزه می‌آیند
🚫 افسانه: ورود به دنیای IT شبیه باز کردن صندوقچه‌ای از گنج است؛ چند ماه دوره بگذرانید و بعد میلیون‌ها تومان درآمد خواهید داشت.

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

💡 نتیجه: پول نتیجه مهارت است، نه دلیل موفقیت.

۲. متخصصان IT هیچ کاری انجام نمی‌دهند
🚫 افسانه: «آن‌ها فقط می‌نشینند و کل روز چیزی را در کامپیوتر تایپ می‌کنند!»

✔️ واقعیت: کار توسعه‌دهندگان از بیرون ساده به نظر می‌رسد، اما در واقع آن‌ها در حال حل مسائل پیچیده منطقی، طراحی معماری سیستم‌ها و یافتن روش‌های بهینه‌سازی فرآیندها هستند. این کار مانند کنار هم قرار دادن پازلی با میلیون‌ها قطعه است، در حالی که نیمی از قطعات هنوز گم شده‌اند.

💡 نتیجه: کار در IT نیازمند تمرکز، تحلیل و خلاقیت است؛ حتی اگر ظاهراً به نظر برسد که فرد فقط پشت کیبورد نشسته است. 🤪

۳. الان زمان مناسبی برای ورود به IT نیست – موقعیت‌های شغلی وجود ندارد
🚫 افسانه: بازار اشباع شده و رقابت آن‌قدر زیاد است که دیگر جایی برای تازه‌کارها وجود ندارد.

✔️ واقعیت: بله، بازار رقابتی‌تر شده است، اما IT همچنان به متخصصان نیاز دارد. فقط دوره‌ای که همه را بدون بررسی می‌پذیرفتند، گذشته است و اکنون شرکت‌ها به دنبال افرادی هستند که مشتاق یادگیری، تطبیق‌پذیری و ارائه ارزش از همان روزهای اول باشند.

💡 نتیجه: روندها تغییر می‌کنند، اما تقاضا برای متخصصان توانمند همیشه وجود دارد.

۴. برای ورود به IT باید همه چیز را بدانید
🚫 افسانه: باید تمام زبان‌های برنامه‌نویسی، تمامی فریم‌ورک‌ها و حتی مدیریت سرورها را به تنهایی یاد بگیرید.

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

💡 نتیجه: IT به معنای رشد است، نه دانستن همه چیز در یک لحظه.

۵. اگر تا سی سالگی وارد IT نشدید، دیگر دیر است
🚫 افسانه: کار در IT باید از دوران نوجوانی شروع شود و اگر این فرصت را از دست بدهید، دیگر بهتر است تلاش نکنید.

✔️ واقعیت: سن هیچ‌گاه معیار تعیین‌کننده‌ای نیست. نمونه‌هایی وجود دارد که افراد در چهل، پنجاه و حتی بعد از آن وارد دنیای IT شده‌اند، حرفه‌ای یاد گرفته و موفق شده‌اند. مهم‌ترین چیز، تمایل به یادگیری است.

💡 نتیجه: شروع هیچ‌گاه دیر نیست. آنچه اهمیت دارد، نگرش شما است، نه تاریخ تولدتان.

دنیای IT درباره رشد، تطبیق‌پذیری و عشق به کار است.
شما چه افسانه‌هایی درباره کار در IT شنیده‌اید؟ تجربیات خود را در نظرات به اشتراک بگذارید!

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

آیا تا به حال متوجه شده‌اید که در برخی وب‌سایت‌ها کلیک راست کار نمی‌کند؟ ❔
شاید برایتان پیش آمده باشد که بخواهید با کلیک راست لینکی را در تب جدید باز کنید، تصویری را ذخیره کنید یا به ابزارهای توسعه‌دهنده دسترسی پیدا کنید، اما ناگهان متوجه شده‌اید که منوی کلیک راست ظاهر نمی‌شود. این یک خطا نیست؛ بلکه تصمیمی عمدی از سوی توسعه‌دهندگان است. 😈

اما بیایید صادق باشیم، گاهی اوقات این مسئله واقعاً آزاردهنده می‌شود.

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

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

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

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

✅ "اگر بخواهم، باز هم کپی می‌کنم."
حتی با مسدود کردن منوی کلیک راست، هر کسی که با ابزارهای توسعه‌دهنده آشنایی داشته باشد، می‌تواند تصویر یا متن مورد نظر را دانلود کند یا اطلاعات لازم را بیابد.

🧑‍💻 چگونه می‌توان کلیک راست را غیرفعال کرد؟
اگر به هر دلیلی بخواهید این محدودیت را اعمال کنید، می‌توانید با استفاده از جاوااسکریپت و کنترل رویداد contextmenu این کار را انجام دهید.

کد نمونه برای مسدود کردن کامل:

document.addEventListener('contextmenu', (event) => {
  event.preventDefault(); // غیرفعال کردن منوی پیش‌فرض
  alert('کپی کردن ممنوع است!');
});

اگر فقط بخواهید تصاویر محدود شوند:

document.querySelectorAll('img').forEach((img) => {
  img.addEventListener('contextmenu', (event) => {
    event.preventDefault();
  });
});

👀 نکته مهم
این روش محافظت صددرصدی ارائه نمی‌دهد. اگر کاربر با نحوه عملکرد مرورگرها آشنا باشد، می‌تواند از طریق کد منبع صفحه یا ابزارهای توسعه‌دهنده به محتوای مورد نظر دسترسی پیدا کند.

چندین بار برای من پیش آمده که به جای مسدود کردن کلیک راست، نیاز به ایجاد یک منوی سفارشی داشتم تا به کاربران فقط به عملکردهای مشخصی دسترسی بدهم. می‌توانید نمونه‌ای از این پیاده‌سازی را اینجا مشاهده کنید. 😉
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد Git Submodules [+لینک]
زیرماژول‌ها در Git به شما این امکان را می‌دهند که یک مخزن Git را به عنوان زیرمجموعه‌ای از مخزن دیگری نگهداری کنید. این ویژگی زمانی مفید است که بخواهید یک پروژه بزرگتر (مخزن اصلی) را به بخش‌های کوچک‌تر تقسیم کنید، یا از پروژه‌های دیگر به عنوان وابستگی (dependency) در پروژه خود استفاده کنید.



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

ده نکته برای نوشتن کد تمیز در Vue.js

۱. استفاده منطقی از Composition API
کدهای بزرگ را به اجزای کوچک‌تر و قابل استفاده مجدد تقسیم کنید تا ساختار ماژولار و خوانایی حفظ شود.

۲. پیروی از قواعد نام‌گذاری در Vue
برای نام فایل‌های کامپوننت‌ها از PascalCase و در صورت نیاز برای استفاده در قالب‌ها از kebab-case استفاده کنید.

۳. اجتناب از استفاده بیش از حد از Vuex یا Pinia
وضعیت‌های موقتی رابط کاربری (مانند نمایش یا عدم نمایش پنجره‌ها) را در کامپوننت‌های محلی نگه دارید و از مدیریت وضعیت جهانی پرهیز کنید.
مثال: برای وضعیت‌های موقتی از ref یا reactive استفاده کنید.

۴. استفاده کارآمد از Slots
از اسلات‌های نام‌گذاری‌شده برای انعطاف‌پذیری بیشتر در کامپوننت‌های قابل استفاده مجدد بهره بگیرید و نحوه استفاده از آن‌ها را مستند کنید.
مثال: کامپوننتی به نام Card ایجاد کنید که شامل <slot name="header"></slot> برای سفارشی‌سازی عنوان‌ها باشد.

۵. استفاده از Scoped Styles
از سبک‌های محدوده‌دار (<style scoped>) استفاده کنید تا از تداخل CSS با سایر بخش‌های برنامه جلوگیری شود.
مثال: سبک‌های خاص کامپوننت را بدون تأثیرگذاری روی دیگر بخش‌ها اعمال کنید.

۶. نوشتن کامپوننت‌های قابل استفاده مجدد
عناصر رابط کاربری را به کامپوننت‌های خاص و قابل استفاده مجدد تقسیم کنید و از طراحی بیش از حد کلی پرهیز کنید.
مثال: به جای کدنویسی ثابت دکمه‌ها، کامپوننتی به نام Button ایجاد کنید که از Propها برای انواع سبک‌ها پشتیبانی کند.

۷. مدیریت کدهای ناهمگام
از async/await برای درخواست‌های API استفاده کنید و خطاها را با یک تابع مرکزی مدیریت کنید.

۸. مستندسازی Props و Eventها
‏Props و Eventها را به وضوح تعریف و مستند کنید. از ابزارهایی مانند defineProps و defineEmits یا TypeScript برای خوانایی و اطمینان از صحت نوع‌ها استفاده کنید.
مثال: در Vue ۳ از defineProps و defineEmits بهره بگیرید.

۹. لینت کردن کد
‏ESLint و Prettier را با تنظیمات خاص Vue پیکربندی کنید تا کیفیت و یکپارچگی کد تضمین شود.

۱۰. ساده‌سازی قالب‌ها
از منطق‌های پیچیده در قالب‌ها خودداری کنید و به جای آن از ویژگی‌های محاسبه‌شده یا متدها استفاده کنید.
مثال: به جای v-if="list.filter(item => item.active).length > 0" از ویژگی محاسبه‌شده‌ای مانند activeItems استفاده کنید.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

نمونه‌ای از "نشت" استایل‌ها در Vue 3 با استفاده از Scoped Styles

<!-- A.vue -->
<div class="a" />

<!-- B.vue -->
<div class="b">
  <div class="a">
    <A /> <!-- اوه، مشکل! -->
  </div>
</div>

در این مثال، دو کامپوننت A.vue و B.vue هر دو از کلاسی با نام مشابه a استفاده می‌کنند. این مسئله حتی با وجود استفاده از scoped styles می‌تواند منجر به نشت استایل‌ها شود.
برای مشاهده و تست این مسئله می‌توانید از لینک زیر استفاده کنید

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

🔗https://play.vuejs.org/#eNqdUj1PwzAQ/SvWzSgZYCoFKaAOMAACRi/GuQYXx7Z8Timq+t85O7S0AlWIKfH7sN7d8xqaEKrlgDCBKeloQhKEaQiX0pk++JhEI+bR90JCVTdZKeFcOumm9ShnIR8S9sGqhHyatmYptFVEFxJeJDAkxAGovkCGG1GPfM2CbN59927kI6UPi4K0D9gyUimxzjbtrY8T0UVEx6k2JVaWsgZOILHBzU1XLcg7nrB4JGjfB2Mx3odkvCMJk/G2zClr/fttwVIc8GSL61fUb7/gC1plTMJDRMK45PXsuKRih2mkZ093uOL/Hdn7drCsPkI+Ink75Iyj7GpwLcfe05W0N6Un47pnmq0SOtoOlYNm5aboJXB510dG/457Wp0VH2+Ut1ha//E+/tZ/rtoI1YuI7f+6ZeNhs7D5BMkN50M=
#️⃣#tip #vue
👥@IR_javascript_group
🆔@IR_javascript

آیا تا به حال به این فکر کرده‌اید که چرا در CSS از :hover و ::before استفاده می‌شود؟ به نظر می‌رسد تفاوت چندانی بین آن‌ها وجود ندارد، اما در واقع این تفاوت اساسی است! بیایید با هم بررسی کنیم.

✨ یک دونقطه (:) — شبه‌کلاس‌ها
شبه‌کلاس‌ها حالات یک عنصر یا ویژگی‌های آن را در ساختار DOM توصیف می‌کنند.

نمونه‌ها:
✅ :hover — عنصری که ماوس روی آن قرار گرفته است.
✅ :focus — عنصری که در حالت فوکوس است.
✅ :nth-child(۲) — دومین عنصر فرزند.

button:hover {
  background-color: lightblue; /* تغییر رنگ هنگام قرار گرفتن ماوس */
}

✨ دو دونقطه (::) — شبه‌عنصرها
شبه‌عنصرها به شما امکان می‌دهند عناصر اضافی ایجاد کنید که در HTML وجود ندارند، مثلاً افزودن متن قبل یا بعد از یک عنصر.

نمونه‌ها:
✅ ::before — عنصر مجازی قبل از عنصر اصلی.
✅ ::after — عنصر مجازی بعد از عنصر اصلی.
✅ ::placeholder — متن جای‌نگه‌دار در فیلد ورودی.

button::after {
  content: ' →'; /* افزودن فلش بعد از متن دکمه */
}

🕰 لحظه‌ای تاریخی
قبل از CSS3، همه چیز با یک دونقطه نوشته می‌شد، مثلاً :before و :after. اما بعداً تصمیم گرفته شد تا حالات (:) از عناصر (::) به صورت بصری جدا شوند.

مرورگرهای مدرن از هر دو حالت پشتیبانی می‌کنند، اما ::before و ::after به عنوان فرم صحیح‌تر در نظر گرفته می‌شوند.

💡 چگونه به خاطر بسپاریم؟
👀 اگر این یک حالت از عنصر است — از یک دونقطه (:) استفاده کنید.
👀 اگر در حال ایجاد بخش مجازی از یک عنصر هستید — از دو دونقطه (::) استفاده کنید.

یک مثال گویاتر از هزار کلمه:

/* شبه‌کلاس: حالت */
button:hover {
  background-color: lightblue;
}

/* شبه‌عنصر: ایجاد */
button::before {
  content: '🔥';
}

نتیجه: یک دکمه با یک شعله قبل از متن که هنگام قرار گرفتن ماوس روی آن، رنگش تغییر می‌کند! 👍.

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

انیمیشن‌های مبتنی بر اسکرول 🤩

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

این روش به شما امکان می‌دهد انیمیشن را به یک محدوده خاص از اسکرول با استفاده از ویژگی‌های animation-timeline و animation-range متصل کنید. به جای اینکه انیمیشن بر اساس زمان فعال شود، آن را به موقعیت صفحه گره می‌زنید.

در ادامه، ویژگی‌های اصلی و نحوه عملکرد آن‌ها را بررسی می‌کنیم:
‏✅ `animation-timeline` — این ویژگی انیمیشن شما را به یک تایم‌لاین مبتنی بر اسکرول متصل می‌کند. منبعی را مشخص می‌کند که وضعیت انیمیشن به آن وابسته است (مثلاً اسکرول یک عنصر یا صفحه).

animation-timeline: scroll(root);

‏✅ `animation-range` — محدوده‌ای از اسکرول را تعیین می‌کند که در آن انیمیشن اتفاق می‌افتد. این ویژگی برای اتصال انیمیشن به بخش‌ها یا محدوده‌های خاص صفحه مفید است.

animation-range: 0% 50%; /* انیمیشن در نیمه اول اسکرول اتفاق می‌افتد */

منابع مفید:
⛓️ انیمیشن‌های مبتنی بر اسکرول در CSS: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
⛓️ نمونه پیاده‌سازی: [CodePen](https://codepen.io/katrin_profrontend/pen/RNbgWaO)

❗️❗️❗️❗️
پشتیبانی از انیمیشن‌های مبتنی بر اسکرول در حال حاضر حدود هفتاد و سه درصد است و این فناوری هنوز در مرحله آزمایشی محسوب می‌شود. قبل از استفاده از آن، حتماً از سازگاری آن با مرورگرهای هدف خود اطمینان حاصل کنید.


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