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

🔗https://component-party.dev/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

جاوا اسکریپت زیبا ... .
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

Floating UI
یک کتابخانه کوچک است که به شما کمک می‌کند تا عناصر "شناور" مانند تولتیپ‌ها، پاپ‌آپ‌ها، منوهای کشویی و موارد دیگر را ایجاد کنید.

🔗https://floating-ui.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

اگر به دنبال (snippets) برای Vue در VS Code هستید، باید بدانید که میان حجم زیادی از گزینه‌های موجود، انتخاب مناسب می‌تواند چالش‌برانگیز باشد.

یک گزینه مناسب می تواند Vue 3 VS Code Snippets باشد


🔗https://marketplace.visualstudio.com/items?itemName=exer7um.vue-3-vscode-snippets
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

مرتب‌سازی: وقتی sort نتایج غیرمنتظره می‌دهد چه باید کرد؟ 😬

بیایید چند مثال را بررسی کنیم تا بهتر بفهمیم روش sort چگونه کار می‌کند و ببینیم چگونه localeCompare می‌تواند در مواقعی که مرتب‌سازی استاندارد کافی نیست، به ما کمک کند.

🧩 مثال ۱: رشته‌ها
فرض کنید آرایه زیر را داریم:

const words = ['ج', 'چ', 'خ', 'ح'];

حالا sort را اعمال می‌کنیم و نتیجه را مشاهده می‌کنیم:

console.log(words.sort());  //['ج', 'ح', 'خ', 'چ']

در نگاه اول، نتیجه ممکن است عجیب به نظر برسد. چرا «چ» در انتهای لیست قرار گرفته است؟ ❔

موضوع اینجاست که متد sort از ترتیب Unicode استفاده می‌کند، و در Unicode حروف خاص ممکن است قبل از سایر حروف قرار گیرند. اما این ترتیب همیشه با قوانین زبان فارسی (یا هر زبان دیگر) سازگار نیست.

🧩 مثال ۲: مرتب‌سازی اعداد
حالا آرایه‌ای از اعداد را در نظر بگیرید که به‌صورت رشته ذخیره شده‌اند:

const numbers = ['۱۲', '۱۱', '۲'];

sort را اعمال می‌کنیم:

console.log(numbers.sort());  // ['۱۱', '۱۲', '۲']

چرا «۲» در انتهای لیست قرار گرفته است؟ این به این دلیل است که sort عناصر را به‌عنوان رشته مقایسه می‌کند، نه عدد. در ترتیب الفبایی، «۲» پس از «۱» قرار می‌گیرد، بنابراین نتیجه برای اعداد نادرست به نظر می‌رسد.

بیایید این مشکل را با استفاده از یک تابع سفارشی مقایسه حل کنیم:

console.log(numbers.sort((a, b) => a - b));  // ['۲', '۱۱', '۱۲']

اکنون همه چیز همان‌طور که انتظار داشتیم عمل می‌کند، اما فقط برای اعداد.

اگر به بومی‌سازی نیاز داشته باشیم؟
روش‌های فوق ممکن است برای موارد ساده کافی باشند، اما اگر بخواهیم قوانین زبان خاصی را رعایت کنیم چه؟ مثلاً مرتب‌سازی بر اساس قواعد الفبای فارسی یا پردازش صحیح رشته‌هایی که شامل اعداد هستند؟

اینجاست که localeCompare وارد میدان می‌شود. این متد به شما اجازه می‌دهد تا ترتیب رشته‌ها را بر اساس قوانین زبان خاصی تعیین کنید.

🧩 استفاده از localeCompare:
با استفاده از localeCompare، می‌توانیم قوانین بومی را اعمال کنیم و مطمئن شویم که مرتب‌سازی بر اساس قواعد زبان مورد نظر انجام می‌شود.

const words = ['ج', 'چ', 'خ', 'ح'];
console.log(words.sort((a, b) => a.localeCompare(b, 'fa'))); 
// ['ج', 'چ', 'ح', 'خ']

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

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

MagicQuill

نسخه‌ای مشابه فتوشاپ که با قابلیت‌های پیشرفته هوش مصنوعی ارائه شده و رایگان به‌صورت مستقیم در مرورگر قابل استفاده است!
کافی است با ابزار مورد نظر، ناحیه‌ای را انتخاب کنید؛ سپس می‌توانید رنگ آن را تغییر دهید، اشیاء را حذف کنید یا موارد جدیدی ایجاد کنید.

🔗https://huggingface.co/spaces/AI4Editing/MagicQuill
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ویژگی‌های منطقی CSS 🤨

بین‌المللی‌سازی فقط به ترجمه رابط‌های کاربری مربوط نمی‌شود. این یعنی ایجاد سایتی که برای کاربران از هر شهری به یک اندازه راحت باشد. اما مشکل اینجاست: جهت‌های متنی (LTR و RTL) اغلب به معمایی واقعی برای توسعه‌دهندگان تبدیل می‌شوند. 🫤

برای مثال: ✅ متن‌های انگلیسی و روسی از چپ به راست (LTR) نوشته می‌شوند، بنابراین فاصله‌ها و تنظیمات پیش‌فرض به درستی عمل می‌کنند؛ ✅ اما متن‌های عربی و عبری از راست به چپ (RTL) خوانده می‌شوند و ویژگی‌هایی مانند margin-left یا text-align: left طراحی را خراب می‌کنند.

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

به جای اینکه به جهت‌های فیزیکی مانند margin-left یا padding-bottom وابسته شویم، ویژگی‌های منطقی مانند margin-inline-start و padding-block-end به ویژگی‌های زبانی و فرهنگی سازگار می‌شوند.

چطور کار می‌کند؟ ✅ inline — محور افقی. به عنوان مثال: margin-inline-start، padding-inline-end، border-inline-end؛ ✅ block — محور عمودی. به عنوان مثال: margin-block-start، padding-block-end، border-block-end.

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

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

کدام شغل سخت‌تر است: فول‌استک یا دواپس؟

👍 فول‌استک: کارهای بیشتری بر عهده دارد.
❤️ دواپس: هیچ‌کس نمی‌فهمد چه کاری انجام می‌دهی.

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

مقایسه GPU و CPU: تأثیر آن‌ها بر عملکرد صفحات وب 🚀

توسعه وب همواره با چالش‌های متعددی در زمینه عملکرد مواجه است. دو عنصر کلیدی در این فرآیند، پردازنده مرکزی (CPU) و پردازنده گرافیکی (GPU) هستند که نقشی مهم در اجرای سایت شما بر روی دستگاه‌های مختلف ایفا می‌کنند.

هر یک از این پردازنده‌ها وظایف خاص خود را دارند و درک زمان و نحوه استفاده از آن‌ها برای دستیابی به بهترین عملکرد ضروری است.

🧠 پردازنده مرکزی (CPU)
پردازنده مرکزی به‌عنوان «مغز» کامپیوتر شما شناخته می‌شود و اکثر محاسبات و عملیات مرورگر را انجام می‌دهد.

این پردازنده مسئول اجرای کد جاوااسکریپت، پردازش رویدادهای کاربر و انجام محاسباتی است که تقریباً در نود و پنج درصد صفحات وب یافت می‌شود.

کاربردهای CPU:
⏺️ اجرای کد جاوااسکریپت (منطق و پردازش رویدادها)
⏺️ پردازش درخواست‌های شبکه و داده‌ها (مانند AJAX یا Fetch)
⏺️ مدیریت فایل‌ها (بارگذاری تصاویر و منابع دیگر)
⏺️ و تقریباً همه عملیات موجود در صفحه وب

این CPU در «رشته اصلی» مرورگر فعالیت می‌کند. اگر این پردازنده بیش از حد مشغول باشد، صفحه وب ممکن است کند شود، به‌ویژه در انجام عملیات ریاضی پیچیده. 🫤

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

برای مثال، یک تصویر با وضوح یک میلیون و نود و دو هزار پیکسل شامل همین تعداد داده برای پردازش است. تصور کنید پردازنده مجبور باشد هر پیکسل را به ترتیب پردازش کند، مثلاً برای تغییر اندازه یا ایجاد انیمیشن. انجام این عملیات برای CPU بسیار زمان‌بر خواهد بود، آن‌هم در حالی که این پردازنده مشغول کارهای دیگر نیز هست. حال تصور کنید این عملیات باید در هر ثانیه شصت بار برای ایجاد انیمیشنی روان اجرا شود! 😱

🎮 پردازنده گرافیکی (GPU)
پردازنده گرافیکی متخصص در محاسبات موازی است و به همین دلیل گزینه‌ای عالی برای پردازش گرافیک، انیمیشن و ویدئو محسوب می‌شود.

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

کاربردهای GPU:
⏺️ پردازش گرافیک دو‌بعدی و سه‌بعدی (WebGL و Canvas)
⏺️ انیمیشن‌های CSS (مانند تغییرات و شفافیت)
⏺️ جلوه‌ها و فیلترهای ویدئویی (مانند تار کردن یا تغییر کنتراست)

استفاده مرورگر از GPU برای رندر صفحات می‌تواند فشار بر CPU را کاهش داده و پردازش جلوه‌های بصری را سرعت بخشد.

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

ترکیب مناسب این دو پردازنده بر اساس نیازهای پروژه، بهترین عملکرد را به ارمغان می‌آورد.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

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