پیشنهاد 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

‏Drydock: تفاوت بسته‌های npm را پیش از انتشار بررسی کنید
ابزاری از یکی از اعضای تیم اصلی Preact که بسته‌های ساخته‌شده‌ی npm (npm tarballs) را با آخرین نسخه‌ی منتشرشده مقایسه می‌کند و مواردی مانند اسکریپت‌های نصب، دسترسی‌های شبکه و باینری‌های جدید را علامت‌گذاری می‌کند.
سپس می‌تواند انتشار در فرایند GitHub Actions را کنترل کند یا جریان جدید انتشار مرحله‌ای npm را زیر نظر بگیرد.


🔗https://drydock.org/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

‏Vanilla Disintegrate — انیمیشن‌های مدرن و چشم‌نواز برای وب
چه نوع انیمیشن‌هایی معمولاً در وب دیده می‌شوند؟ ظاهر شدن، ناپدید شدن، جابه‌جایی‌های کوچک و تغییر مقیاس. این انیمیشن‌ها لزوماً بد نیستند؛ در بیشتر مواقع، رابط کاربری واقعاً به چیزی پیچیده‌تر از این‌ها نیاز ندارد. گاهی بهترین تصمیم این است که اصلاً هیچ انیمیشنی اضافه نکنیم. به این ترتیب، رابط کاربری سریع، قابل‌درک و متمرکز بر هدف اصلی باقی می‌ماند.
اما گاهی دوست داریم یک لحظه‌ی کوچک را به‌یادماندنی کنیم. نه یک صفحه‌ی آغازین طولانی و نه یک جلوه‌ی ویژه‌ی سنگین برای تمام صفحه؛ بلکه یک واکنش کوتاه به تعامل کاربر. کمتر از یک ثانیه کافی است تا حذف یک کارت، ظاهر شدن یک عنصر یا لغو یک عملیات، کاملاً حس متفاوتی پیدا کند.


🔗https://disintegrate.uvarov.tech/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript`

کاربر اندازه‌ی فونت را در تنظیمات سیستم‌عامل افزایش می‌دهد، برنامه‌ها این ترجیح را دریافت و اعمال می‌کنند، اما مرورگرها توجهی به آن ندارند.
در اندروید، فایرفاکس مقیاس متن سیستم را در نظر می‌گیرد، اما کروم این کار را انجام نمی‌دهد؛ در iOS نیز قابلیت Dynamic Type برای صفحات معمولی وب در سافاری اعمال نمی‌شود. در نتیجه، ممکن است یک وب‌سایت با تنظیمات پیش‌فرض کاملاً مناسب به نظر برسد، اما برای کاربری که به افزایش اندازه‌ی متن سیستم متکی است، تقریباً غیرقابل‌استفاده باشد.

<meta name="text-scale" content="scale">

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

🔗https://drafts.csswg.org/css-fonts-۵/#text-scale-meta
🔗https://www.matuzo.at/blog/2026/text-scaling-meta-tag
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript`

‏CSS بالاخره امکان انیمیشن دادن به عناصر هنگام اولین نمایش آن‌ها را فراهم کرد
‏@starting-style اکنون بخشی از Baseline محسوب می‌شود و از اوت دو هزار و بیست‌وچهار در دسترس قرار گرفته است. در حال حاضر حدود نود درصد پوشش جهانی دارد!
پیش از این، transition هنگام اولین تغییر استایل یک عنصر اجرا نمی‌شد و مجبور بودیم با ترفندهای مختلف در جاوااسکریپت این مشکل را دور بزنیم.
حالا می‌توان حالت اولیه‌ی عنصر را مستقیماً با CSS خالص تعریف کرد. ساده، قدرتمند و قابلیتی که مدت‌ها جای آن خالی بود 💪‏

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

با اعمال position: sticky روی سربرگ جدول، می‌توان یک پیاده‌سازی زیبا و قابل‌فهم از هدر چسبان (Sticky Header) داشت.
اما یک مشکل وجود دارد: هنگام اسکرول، آخرین ردیف جدول زیر همین سربرگ مخفی می‌شود و ظاهر چندان خوبی ندارد؛ مخصوصاً زمانی که جدول فقط شامل متن ساده نیست و مواردی مانند شرایط مقایسه، تصاویر و موارد مشابه در آن وجود دارد.
اما راه‌حل ساده است!
کافی است به thead یک margin-bottom به اندازه‌ی ارتفاع کامل یک ردیف اضافه کنیم:

margin-bottom: calc(1lh + 20px);

توجه کنید که 1lh یک واحد اندازه‌گیری واقعی در CSS است که اجازه می‌دهد به مقدار line-height یا همان ارتفاع خط دسترسی داشته باشیم.
البته جمع کردن مار با طوطی را که همیشه بلد بودیم!
بله، شاید در نگاه اول چندان بدیهی نباشد، اما نتیجه این است که جدول حالا ظاهر فوق‌العاده‌ای پیدا می‌کند:


🔗https://codepen.io/alinaki/pen/JojeGMY?editors=0100
#️⃣#tip #css #code
👥@IR_javascript_group
🆔@IR_javascript`