تصاویر پاسخگو با srcset و `sizes`#
ویژگی `srcset` به شما اجازه می‌دهد چندین نسخه از یک تصویر تعریف کنید تا مرورگر مناسب‌ترین نسخه را بر اساس شرایط (چگالی صفحه، اندازهٔ viewport) انتخاب کند.

<!-- ❌ یک اندازه برای همه -->
<img src="hero.jpg" alt="Hero image" />

<!-- ✅ نسخه‌های مختلف برای چگالی‌ها و اندازه‌های متفاوت -->
<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  width="800"
  height="600"
  alt="Hero image"
/>

ویژگی sizes به مرورگر می‌گوید که تصویر در هر نقطهٔ شکست (breakpoint) چه مقدار فضا در طرح‌بندی اشغال خواهد کرد. بدون `sizes`، مرورگر فرض می‌کند تصویر ۱۰۰٪ عرض صفحه را اشغال می‌کند و ممکن است نسخه‌ای بزرگ‌تر از نیاز دانلود شود.


🔗https://joanleon.dev/en/guia-practica-elemento-img/
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

کوتاه‌کردن انواع شناسه‌ها، مسیرهای فایل و نام فایل‌ها در وسط با css

🔗https://joanleon.dev/en/guia-practica-elemento-img/
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

🖤 سالروز شهادت امام حسن عسکری (ع)

⚫️ امام حسن عسکری (علیه السلام):
🖌 عبادت در زیاد انجام دادن نماز و روزه نیست ، بلکه عبادت با تفکّر و اندیشه در قدرت بی منتهای خداوند در امور مختلف می باشد.

📗 مستدرک الوسائل ، ج۱۱ ، ص۱۸۳

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

ساده‌ترین روش برای غیرفعال کردن چندین عنصر فرم
می‌توانیم ویژگی 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