ساده‌ترین روش برای غیرفعال کردن چندین عنصر فرم
می‌توانیم ویژگی disabled را روی عنصر <fieldset> قرار دهیم تا تمام عناصر فرمِ تو‌در‌توی آن به‌صورت خودکار غیرفعال شوند.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

بارگذاری تنبل ویدئوهای دارای پخش خودکار که پایین‌تر از اولین صفحه قرار دارند
ویژگی preload="none" را تنظیم کنید و ویژگی autoplay را از ویدئو حذف کنید تا ویدئو به‌صورت پیش‌فرض بارگذاری نشود. سپس با استفاده از API مربوط به Intersection Observer می‌توانیم زمانی که ویدئو در محدودهٔ قابل مشاهدهٔ صفحه قرار گرفت، پخش آن را آغاز کنیم.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

مجموعه‌ای جالب از کامپوننت‌های رابط کاربری با انیمیشن‌ها و جلوه‌های فیزیکی، با حال‌وهوای رابط‌های کاربری بازی‌ها.

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


🔗feralui.dev
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

بیش از چهارصد و نود ابزار رایگان در یک سرویس تحت‌وب
این سرویس بدون نیاز به ثبت‌نام کار می‌کند و هیچ فایلی را روی سرور بارگذاری نمی‌کند؛ تمام داده‌ها به‌صورت محلی و در مرورگر پردازش می‌شوند.
در این مجموعه ابزارهایی برای کار با تصاویر، فایل‌های PDF، متن، طراحی، تبدیل فرمت، رمزنگاری و توسعه وجود دارد.
پیدا کردن بسیار کاربردی برای کسانی که برای زمان و حفظ حریم خصوصی خود ارزش قائل‌اند ✌️

🔗brevio.pro
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

پیشنهاد Await Dictionary برای ECMAScript در TC39 به مرحلهٔ سوم (Stage 3) رسید
در حال حاضر، Promise.all نتایج را به‌صورت یک آرایه برمی‌گرداند و مقادیر بر اساس موقعیت آن‌ها مشخص می‌شوند. روش جدید Promise.allKeyed امکان دریافت نتایج نام‌گذاری‌شده در قالب یک شیء را فراهم می‌کند؛ در نتیجه، کد خواناتر شده و کار با چندین Promise ساده‌تر می‌شود.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

از کلمهٔ کلیدی unset در CSS برای بازنشانی ویژگی‌ها استفاده کنید تا هر ویژگی به مقدار ارث‌بری‌شدهٔ خود برگردد؛ در صورت ارث‌بری، مقدار والد و در غیر این صورت مقدار پیش‌فرض آن ویژگی اعمال می‌شود.
استفاده از آن به‌عنوان مقدار ویژگی all بسیار کاربردی است.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

کامپوننت‌های خلاقانه و چشم‌نواز متن‌باز برای رابط‌های کاربری که با استفاده از HTML-in-Canvas و WebGL ساخته شده‌اند.
این کامپوننت‌ها با JavaScript، React، Svelte و Vue سازگار هستند.
کافی است آن‌ها را کپی و پیست کنید و استفاده کنید:

🔗canvasui.dev
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

نکته‌ای کوچک برای بهبود UX
در نسخهٔ موبایل Chrome و Safari، حروف موجود در فیلدهای متنی به‌صورت خودکار به حروف بزرگ تبدیل می‌شوند.
این رفتار در حالت عادی مشکلی ایجاد نمی‌کند؛ اما وقتی در جایی که انتظارش را نداریم فعال شود، باعث ایجاد اصطکاک اضافی و کاهش کیفیت تجربهٔ کاربری می‌شود.
راه‌حل: برای چنین فیلدهایی autocapitalize="off" را اضافه کنید. این ویژگی مشخص می‌کند که هنگام تایپ یا ویرایش متن، حروف به‌صورت خودکار به حروف بزرگ تبدیل شوند یا خیر.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

🌺 میلاد با سعادت پیامبر اکرم(ص) و امام صادق(ع)

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

نکته‌ای دربارهٔ Chrome DevTools
دیباگ کردن عناصری که با از دست دادن فوکوس ناپدید می‌شوند دشوار است؛ زیرا وقتی می‌خواهیم آن‌ها را از طریق DevTools بررسی کنیم، صفحه فوکوس خود را از دست می‌دهد و این عناصر ناپدید می‌شوند.
برای جلوگیری از این مشکل، می‌توانیم با استفاده از گزینهٔ Emulate a focused page در پنل Styles از تب Elements، این عناصر را همچنان قابل مشاهده نگه داریم و آن‌ها را بررسی کنیم.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

اگر می‌خواهید افکت «کشسانی» اسکرول را در وب‌اپلیکیشن حذف کنید، کافی است تنها یک خط CSS اضافه کنید:

html,
body {
  overscroll-behavior-y: none;
}

ویژگی overscroll-behavior-y: none افکت bounce عمودی را هنگام رسیدن به انتهای بالا یا پایین صفحه غیرفعال می‌کند و باعث می‌شود رفتار وب‌اپلیکیشن طبیعی‌تر و قابل‌پیش‌بینی‌تر باشد؛ به‌ویژه در دستگاه‌های موبایل.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

وقتی برای دو عنصر تو‌در‌تو از border-radius استفاده می‌کنید، ممکن است وسوسه شوید که برای هر دو مقدار یکسانی قرار دهید؛ اما از نظر بصری، این همیشه بهترین نتیجه را ایجاد نمی‌کند!
به‌جای آن، از این فرمول برای محاسبهٔ شعاع بیرونی استفاده کنید:
شعاع داخلی + فاصلهٔ داخلی (padding)
می‌توانید از ویژگی‌های سفارشی CSS استفاده کنید تا شعاع عناصر تو‌در‌تو را به‌صورت هماهنگ تعریف کنید:

.parent {
  --nested-radius: calc(var(--radius) - var(--padding));
}

.nested {
  border-radius: var(--nested-radius);
}

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

روشی خشن و متفاوت برای فعال کردن حالت تاریک در سایت
با انیمیشن بومی و قابل تنظیم.
فقط با دو خط JavaScript و کمی CSS:

🔗 theme-toggle.rdsx.dev
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

دنو (deno) محیط اجرای محبوب JavaScript، حالا امکان تبدیل پروژه‌های JavaScript و TypeScript به اپلیکیشن‌های دسکتاپ برای Windows، macOS و Linux را فراهم کرده است.
می‌توانید بین استفاده از WebView سیستم‌عامل یا موتور داخلی Chromium انتخاب کنید. علاوه بر این، فریم‌ورک‌هایی مانند Next.js و SvelteKit نیز به‌صورت پیش‌فرض پشتیبانی می‌شوند.

🔗 مستندات Deno Desktop
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

قابلیت URL.canParse() — حالا بخشی از قابلیت‌های Baseline Widely Available است.
این قابلیت از دسامبر دو هزار و بیست‌وسه در تمام مرورگرهای اصلی پشتیبانی می‌شود و در بیشتر موارد می‌توان با خیال راحت از آن استفاده کرد.
اگر برای تعداد زیادی رشته که URL نیستند، تابعی مانند isValidUrl() را اجرا می‌کنید، استفاده از URL.canParse() می‌تواند عملکرد را به‌طور محسوسی بهبود دهد؛ زیرا دیگر لازم نیست برای کنترل جریان اجرای برنامه، به ایجاد و مدیریت خطاها متکی باشید.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ویژگی scroll-padding
این ویژگی به شما اجازه می‌دهد اسکرول را در فاصله‌ای مشخص از لبهٔ کانتینر متوقف کنید.
می‌توانید از ویژگی کوتاه‌شدهٔ scroll-padding یا ویژگی‌های دقیق‌تر و جایگزین آن، یعنی scroll-padding-*، استفاده کنید.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

یک کتابخانهٔ عالی JavaScript برای ساخت اسلایدر و کاروسل که شما را از پیاده‌سازی همه‌چیز از صفر بی‌نیاز می‌کند.

جایگزینی سبک و کاربردی برای Swiper 👍

🔗Splide.js
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

شاید ندانید که روشی برای جلوگیری از پردازش خودکار بک‌اسلش‌ها در رشته‌ها وجود دارد.
از String.raw استفاده کنید. این قابلیت رشته را همان‌طور که نوشته شده برمی‌گرداند و دنباله‌های escape مانند \t و \n را پردازش نمی‌کند.
به‌عبارت دیگر، \ و t را به‌عنوان دو کاراکتر مجزا در نظر می‌گیرد و بک‌اسلش را در رشتهٔ خروجی به‌صورت خودکار حفظ می‌کند.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ماژول Blossom یک سیستم متن‌باز برای ساخت کاروسل‌هاست که مجموعهٔ بزرگی از الگوهای زیبا و نمونه‌های آماده را در اختیار شما قرار می‌دهد.
همچنین مجموعه‌ای از Skillها برای عامل‌های هوش مصنوعی ارائه می‌کند و از React، Vue، Svelte و Web Components نیز پشتیبانی می‌کند.

🔗github.com/jespervos/blossom-carousel
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

درک مفاهیم گیت برای همه چندان ساده نیست. بعضی‌ها خیلی سریع آن را یاد می‌گیرند، بعضی دیگر میان شاخه‌ها و برگ‌های مستندات گم می‌شوند و با زحمت راه خود را پیدا می‌کنند. عده‌ای هم کلاً بی‌خیال همه‌چیز می‌شوند، از رابط کاربری محبوب IDE خود استفاده می‌کنند و هیچ‌چیز پیچیده‌تر از git pull origin master را مدیریت نمی‌کنند.
اما اگر یک شبیه‌ساز وجود داشت که آنچه در پشت صحنه اتفاق می‌افتد را نشان می‌داد، کار چقدر ساده‌تر می‌شد. جالب اینجاست که چنین ابزاری واقعاً وجود دارد!
نام آن git-sim است؛ دقیقاً همین‌قدر ساده و مستقیم.
می‌خواهید یک cherry-pick همراه با تداخل را مدیریت کنید؟ چند شاخه را با هم ادغام کنید؟ پیامدهای reset، stash یا rebase را ببینید؟ به‌راحتی امکان‌پذیر است! فقط کافی است به جای git دستور موردنظر را با git-sim اجرا کنید و از نتیجه لذت ببرید.
راستی، لینک نمونه‌هایی که سازندگان منتشر کرده‌اند (شامل ویدئوها و تصاویر آموزشی فراوان):

🔗https://initialcommit.com/tools/git-sim
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript