🔍 روش‌های دیباگ در 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

اصول اصلی توسعه مبتنی بر رویکرد محلی (Local-First)

توسعه مبتنی بر رویکرد محلی شباهت‌هایی با روش‌های offline-first دارد، اما فراتر رفته و توجه بیشتری به کنترل کاربر و مالکیت داده‌ها می‌کند. در ادامه، اصول کلیدی که یک برنامه وب واقعاً مبتنی بر رویکرد محلی را تعریف می‌کنند، آورده شده‌اند:

- دسترسی فوری: کاربران می‌توانند بدون نیاز به انتظار برای بارگیری یا همگام‌سازی داده‌ها، بلافاصله به کار خود دسترسی داشته باشند (بدون نمایش اسپینرهای انتظار).

- استقلال از دستگاه: داده‌ها به‌راحتی در دستگاه‌های مختلف در دسترس هستند.

- استقلال از شبکه: وظایف اصلی بدون نیاز به اتصال به اینترنت قابل انجام هستند.

- سهولت در همکاری: برنامه از همکاری آسان پشتیبانی می‌کند، حتی در سناریوهای آفلاین.

- داده‌های پایدار (Future-Proof): داده‌های کاربران در طول زمان قابل دسترسی و استفاده باقی می‌مانند، بدون توجه به تغییرات در نرم‌افزار.

- امنیت داخلی: امنیت و حریم خصوصی از جنبه‌های اساسی طراحی هستند.

- کنترل کاربر: کاربران مالکیت کامل داده‌های خود را دارند و آن‌ها را کنترل می‌کنند.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

آیا ارزش دارد که یادگیری فرانت‌اند را آغاز کنیم، در حالی که هوش مصنوعی تقریباً به "سنیور" تبدیل شده است؟ 🙁

هر بار که فناوری‌ها جهش می‌کنند، سوال نگران‌کننده‌ای مطرح می‌شود: «آیا حالا دیگر به انسان‌ها نیازی نیست؟» در حال حاضر، هوش مصنوعی واقعاً شگفت‌انگیز است: کد می‌نویسد، باگ‌ها را پیدا می‌کند و راه‌حل‌ها را بهینه می‌کند. اما بیایید بررسی کنیم که آیا او می‌تواند توسعه‌دهندگان را جایگزین کند یا فقط نقش آن‌ها را تغییر خواهد داد؟

🤖 هوش مصنوعی چه کارهایی می‌تواند انجام دهد و چه کارهایی نمی‌تواند؟

🔢 هوش مصنوعی در حال حاضر می‌تواند:
✅ کدهای الگو را تولید کند؛
✅ راه‌حل‌هایی بر اساس داده‌های موجود پیشنهاد دهد؛
✅ بهینه‌سازی‌ها را انجام دهد.

🔢 اما هنوز درک نمی‌کند:
✅ زمینه‌های کسب‌وکار. او نمی‌داند که چرا یک محصول باید این مشکل خاص را حل کند و نه مشکل دیگری؛
✅ نیازهای کاربران. هوش مصنوعی احساس نمی‌کند که چه چیزی رابط کاربری را راحت می‌کند و چه چیزی آزاردهنده است؛
✅ راه‌حل‌های خلاقانه. او در چارچوب داده‌ها و الگوریتم‌های شناخته شده عمل می‌کند و چیزی جدید نمی‌سازد.

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

🤖 هوش مصنوعی ≠ چوب جادو

به نظر می‌رسد که هوش مصنوعی به زودی به یک توسعه‌دهنده کامل تبدیل خواهد شد، اما در واقعیت همه چیز بسیار پیچیده‌تر است.

برای مثال:
✅ او تنها بر اساس آنچه که قبلاً وجود دارد، آموزش می‌بیند. اگر یک وظیفه منحصر به فرد باشد یا نیاز به رویکرد غیرمعمولی داشته باشد، هوش مصنوعی غالباً نمی‌تواند آن را انجام دهد؛
✅ بسیاری از نمونه‌های کدی که او تولید می‌کند، از ایده‌آل فاصله دارند. اغلب نیاز به دست یک متخصص با تجربه است تا همه چیز را به حالت عملی درآورد.

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

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

⚡️ چه مهارت‌هایی را باید توسعه دهیم؟
✅ یادگیری فناوری‌های پایه؛
✅ یادگیری تفکر سیستمی. طراحی معماری، درک تعامل بین بک‌اند و فرانت‌اند؛
✅ توسعه مهارت‌های نرم. توانایی توضیح ایده، کار با افراد و حل تعارضات به طور فزاینده‌ای مهم‌تر می‌شود؛
✅ استفاده از هوش مصنوعی. یاد بگیرید که چگونه به درستی پرامپت‌ها را بنویسید و در صورت نیاز آن‌ها را اصلاح کنید.

🚀 آیا هوش مصنوعی توسعه‌دهندگان را جایگزین خواهد کرد؟
چند سال پیش گفته می‌شد که React و Angular همه طراحان را جایگزین خواهند کرد: "چرا باید HTML بنویسیم، وقتی که همه چیز را می‌توان در کامپوننت‌ها جمع کرد؟" سال‌ها گذشت و چه چیزی می‌بینیم؟ طراحان نه تنها ناپدید نشده‌اند، بلکه سازگار شده و به مهندسان فرانت‌اند تبدیل شده‌اند که با کامپوننت‌ها، استایل‌ها و معماری کار می‌کنند. علاوه بر این، هنوز هم تقاضا برای طراحان واقعی و باکیفیت وجود دارد!

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

دنیا در حال پیشرفت است و این فوق‌العاده است. بنابراین لپ‌تاپ خود را بردارید، ویرایشگر کد را باز کنید و به یاد داشته باشید: هوش مصنوعی در خدمت شماست، نه جایگزین شما. 💻
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

### رازهای DevTools در Chrome: چگونه $ و $$ کار با DOM را سرعت می‌بخشند؟

اگر هنوز برای جستجوی عناصر DOM در کنسول، از دستورات طولانی مانند document.querySelector و document.querySelectorAll استفاده می‌کنید، وقت آن است که با ابرقهرمانان DevTools یعنی $ و $$ آشنا شوید! 🚀

✅ $ – جستجوی سریع یک عنصر
برای یافتن اولین عنصر با کلاس خاص، کافی است بنویسید:

$('.my-class')

این دستور معادل کوتاه شده‌ی زیر است:

document.querySelector('.my-class')

خواناتر و جمع‌وجورتر، این‌طور نیست؟

✅ $$ – جستجوی تمامی عناصر
اگر به تمام عناصر با یک کلاس نیاز دارید، این دستور به کار می‌آید:

$$('.my-class')

نتیجه یک آرایه شامل تمام عناصری است که دارای این کلاس هستند. معادل آن در حالت معمولی به شکل زیر است:

document.querySelectorAll('.my-class')

علاوه بر این، می‌توانید مستقیماً از متدهایی مانند .forEach() یا .map() استفاده کنید:

$$('.my-class').forEach(el => el.style.color = 'red');

### چرا این روش مفید است؟
✅ صرفه‌جویی در زمان – دستورات کوتاه‌تر، سرعت بیشتر.
✅ دسترسی مستقیم به DOM در کنسول – برای بررسی یا ویرایش سریع.
✅ اشکال‌زدایی مؤثرتر – به‌راحتی متن، استایل یا انتخابگرها را تغییر دهید:

$('.my-button').textContent = 'روی من کلیک کن!';
$$('img').forEach(img => img.style.border = '۲px solid blue');

💟💟 شما از چه ترفندهای دیگری در DevTools استفاده می‌کنید؟ تجربیات خود را در نظرات به اشتراک بگذارید! 👇

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

توسعه‌دهنده جدید و «سندرم ارثیه» 🌀

یک توسعه‌دهنده جدید وارد شرکتی می‌شود. اولین چیزی که با آن مواجه می‌شود، احتمالاً کد پروژه‌ای است که قبلاً نوشته شده و در حال اجراست. او شروع به بررسی کد می‌کند و با تعجب می‌پرسد: «این چطور کار می‌کند؟». سپس قانع می‌شود و، همان‌طور که می‌دانیم، «با اصول خود وارد قلمروی دیگران نمی‌شوند»، بنابراین او شروع به پیروی از سبک و روش‌هایی می‌کند که در نوشتن کد پیش از او استفاده شده‌اند. اگر هم توسعه‌دهنده قبلی به مقامی بالاتر ارتقا یافته باشد یا مسئول هدایت این تازه‌وارد باشد، این موضوع انگیزه او را برای ادامه همان سبک تقویت می‌کند.

اما در اینجا یک دام پنهان وجود دارد. اغلب توسعه‌دهندگان قبلی (یا حتی یک تیم کامل!) از یک اصل ساده پیروی کرده‌اند: «این یک راه‌حل موقتی است، و نفر بعدی که مسئول این کار شود، آن را بازنویسی خواهد کرد». 😈 اکنون همان «توسعه‌دهنده جدید» که قرار بود همه‌چیز را درست کند، همان مسیر شیب‌دار را ادامه می‌دهد، مسیری که به کدی نامناسب و بدهی فنی بسیار سنگین منجر می‌شود. 😒

چرا این اتفاق می‌افتد؟

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

✅ کمبود زمان برای تحلیل
بررسی و بازسازی کد قدیمی نیاز به زمان دارد، در حالی که ضرب‌الاجل‌های وظایف جاری فشار می‌آورند. تطبیق با منطق موجود بسیار آسان‌تر از درک و بهبود آن است.

✅ ذهنیت «من اینجا موقتی هستم»
گاهی توسعه‌دهندگان با این طرز فکر وارد شرکت می‌شوند: «من یک یا دو سال اینجا کار می‌کنم و بعد به پروژه دیگری می‌روم». چرا باید انرژی خود را برای بهبود معماری صرف کرد وقتی که به نظر می‌رسد این مسئولیت من نیست؟!

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

آیا می‌توان این مسئله را حل کرد؟
بله، می‌توان و باید آن را برطرف کرد! درمان سندرم ارثیه شامل چند گام ساده است:

1️⃣ ایجاد فرهنگ تغییرات. به تیم توضیح دهید که بهبود کد نه‌تنها مجاز، بلکه مطلوب است.

2️⃣ ثبت بدهی فنی. مفهوم بدهی فنی را تعریف کنید و آن را مستند سازید: کجا نیاز به بهبود است، کدام بخش‌ها باید بازنگری شوند و چگونه.

3️⃣ اختصاص زمان برای بازبینی. حداقل بخشی از اسپرینت را به کار بر روی بهبود کد قدیمی اختصاص دهید.

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

هر توسعه‌دهنده‌ای با چنین وضعیتی مواجه می‌شود که تطبیق با شرایط موجود آسان‌تر از مبارزه با جریان است. اما همین سازش‌های کوچک است که به مشکلات ارثیه‌ای منجر می‌شود.

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

آیا شما هم در چنین موقعیتی قرار گرفته‌اید؟ یا شاید خودتان آغازگر چنین زنجیره‌ای بوده‌اید؟ تجربه‌ها و دیدگاه‌های خود را در نظرات به اشتراک بگذارید! 😊

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

چرا جدول‌ها فقط چند دیو در کنار هم نیستند؟ 🤨
هنگام طراحی جدول‌ها در وب، بسیاری از توسعه‌دهندگان یک اشتباه کلاسیک مرتکب می‌شوند: به جای استفاده از تگ‌های <table>، از تگ‌های عادی مثل <div> یا حتی <span> بهره می‌برند. شاید این کار به نظر «انعطاف‌پذیرتر» یا «ساده‌تر» برسد، اما در واقع، این راهی به سوی مشکلات پیچیده است. چرا استفاده از جدول‌های معنایی این‌قدر اهمیت دارد؟

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

➡️ معنای «معنایی» در HTML چیست؟
تگ‌های HTML فقط برای «محصور کردن محتوا» نیستند. هر تگ معنای خاص و وظیفه‌ای مشخص دارد. تگ‌های جدول (<table>, <tr>, <th>, <td>) فقط روشی برای زیبا نمایش دادن داده‌ها نیستند، بلکه ابزاری برای انتقال این مفهوم‌اند که «این داده‌ها در یک ساختار جدولی قرار دارند، که در آن ردیف‌ها، ستون‌ها و سرستون‌ها اهمیت دارند».

برای مرورگرها، موتورهای جستجو، اسکرین‌ریدرها و حتی خود شما در آینده، تگ‌های معنایی پیام می‌دهند: «این یک جدول است، مانند جدول با آن رفتار کن!»

🚨 چرا استفاده از دیو برای جدول‌ها اشتباه است؟
✅ فاقد ساختار مشخص
در جدول‌هایی که با <div> ساخته شده‌اند، همه‌چیز پیچیده می‌شود. ردیف‌ها کجا هستند؟ سلول‌ها چطور؟ چنین جدولی معنای ساختاری «ردیف‌ها و ستون‌های مرتبط» را منتقل نمی‌کند.

✅ اسکرین‌ریدرها را گیج می‌کند
افرادی با توانایی‌های محدود، مثل نابینایان، نمی‌توانند داده‌ها را درک کنند. تگ‌های <table> به‌صورت پیش‌فرض از دسترس‌پذیری (Accessibility) پشتیبانی می‌کنند.

✅ زحمت اضافی برای شما
اگر بخواهید رفتار و استایل جدول را با استفاده از <div> پیاده‌سازی کنید، باید خودتان دستی ستون‌ها و ردیف‌ها را مدیریت کنید و به سازگاری واکنش‌گرا (Responsive) هم فکر کنید. این در حالی است که تگ‌های جدول در اکثر موارد رفتار مناسب را از پیش می‌دانند.

📊 چه زمانی از جدول استفاده کنیم؟
✅ برای داده‌های جدولی
نمونه: جدول زمان‌بندی، لیست قیمت، گزارش‌ها، یا جداول مقایسه‌ای.

✅ برای نمایش ارتباط‌ها
جدول فقط شامل ردیف‌ها و ستون‌ها نیست؛ بلکه ابزاری برای نشان دادن روابط بین داده‌هاست.

✅ وقتی دسترس‌پذیری مهم است
جدول‌های معنایی به‌صورت خودکار با فناوری‌های دسترس‌پذیری سازگارند.

❌ چه زمانی از جدول استفاده نکنیم؟
✅ برای طراحی صفحه‌ها
طراحی صفحات با جدول‌ها یک روش منسوخ‌شده از دهه‌ی ۲۰۰۰ است؛ از آن صرف‌نظر کنید.

✅ برای لیست‌ها یا کارت‌ها
وقتی داده‌ها به هم مرتبط نیستند، از جدول استفاده نکنید.

استفاده از <div> برای ساخت جدول مثل ساخت دوچرخه‌ای است که شما باید خودتان چرخ، ترمز و پدال‌هایش را هم طراحی کنید. اما جدول‌های معنایی مثل یک پورشه هستند که آماده‌ی حرکت است، زمان شما را صرفه‌جویی می‌کند و احترام کاربران را حفظ می‌کند.

جدول‌ها طراحی شده‌اند تا زندگی را ساده‌تر کنند – از آن‌ها هوشمندانه و درست استفاده کنید! 🚀

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

### چند نقل‌قول درباره TypeScript

‏«TypeScript مجموعه‌ای از کارهای اضافی است برای حل مسائلی که من ندارم، به روش‌هایی که دوست ندارم.»
*کایل سیمپسون*، نویسنده مجموعه کتاب‌های بسیار تأثیرگذار «شما JS را نمی‌شناسید».

«ما کدهای خود را به TypeScript بازنویسی کردیم و سی درصد بیشتر باگ دریافت کردیم.»

«اگر از قبل سیستم بسیار سخت‌گیرانه‌ای برای لینتینگ دارید و پوشش تست‌های بالایی نیز وجود دارد، زمانی که برای تلاش برای کارکرد صحیح TypeScript صرف می‌کنید، تنها ضرر به همراه خواهد داشت. این مسیر را تنها زمانی دنبال کنید که سبک کدنویسی آن برای تیم جذاب باشد.»

«نود و پنج درصد امکاناتی که TypeScript ارائه می‌دهد، با تلاش کمتر و ابزارهای دیگر مانند لینتینگ سخت‌گیرانه و JSDocs قابل دستیابی است.»

«من حدود ده پروژه‌ی کدنویسی TypeScript را بررسی کرده‌ام، اما در هیچ‌کدام واقعاً نتوانستم کد را بخوانم. آن‌قدر زشت و بدساختار است که تعجب می‌کنم چه کسی این هیولا را طراحی کرده است؟»

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

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


🔗https://dev.to/thejaredwilcurt/quotes-about-typescript-2ohf
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

پیشنهاد می‌کنم در نظرات، سه موردی را به اشتراک بگذارید که کار شما را راحت‌تر و مؤثرتر می‌کند. چیزهایی که خلاقانه و غیرمعمول هستند، نه صرفاً موارد بدیهی و ضروری مانند Vite.

برای شروع:

1. ویرایشگر IDE Cursor (دستیار مبتنی بر هوش مصنوعی)
2. پیکربندی @sxzz/eslint-config ([لینک](https://github.com/sxzz/eslint-config))

شما چه ابزارها و راهکارهای خاصی دارید؟ 🌟

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

در همین حال، نتایج نظرسنجی State of JS 2024 منتشر شد! (لینک: stateofjs.com)

Vite و Vue همچنان موقعیت‌های پیشرو خود را تقویت کرده‌اند و نشان دادند که چرا انتخاب اول بسیاری از توسعه‌دهندگان هستند.

و اما ایوان یو، بی‌شک یکی از برجسته‌ترین و تأثیرگذارترین شخصیت‌های دنیای فرانت‌اند در سال‌های اخیر است.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript