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

#️⃣#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`

واژهٔ «مدل» این روزها معمولاً چیزی با هفت تا هفتاد میلیارد پارامتر و ده‌ها گیگابایت وزن را در ذهن تداعی می‌کند. اما مدل اصلاً مجبور نیست چنین ابعادی داشته باشد.
کتابخانه‌ای به نام gpu-lexer ساخته شده است؛ یک کتابخانه برای هایلایت کردن کد که به‌جای مجموعه‌ای از گرامرها، از یک مدل آموزش‌دیده با تنها چهل‌ویک هزار و سیصد و بیست‌ویک پارامتر استفاده می‌کند.
وزن‌های مدل با دقت شش‌بیتی فشرده شده‌اند و کل بستهٔ مورد استفاده در مرورگر، در حالت فشرده، تنها بیست‌وهفت ممیز چهار کیلوبایت حجم دارد.
این کتابخانه از طریق WebGPU اجرا می‌شود.
برای مقایسه، نویسنده حجم تقریبی صد و شصت‌ودو کیلوبایت برای Prism، دویست‌وچهل کیلوبایت برای Highlight.js و نهصد و نودودو کیلوبایت برای مجموعهٔ کامل Shiki را ذکر می‌کند.
البته این رویکرد اساساً مبتنی بر یادگیری ماشین است؛ بنابراین نتیجه مانند روش‌های مبتنی بر قواعد، قطعی و تضمین‌شده نیست. خروجی آن با Shiki در حدود هشتادوهشت تا نود درصد توکن‌ها مطابقت دارد.
🔗https://gpu-lexer.vercel.app/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript`

مثلاً gitignore. که دیگر کاملاً مشخص است. اما gitattributes. چطور؟
این فایل کمک می‌کند مشخص کنیم با فایل‌های مختلف چه رفتاری داشته باشیم. مثلاً استراتژی ادغام: به Git می‌گوید اگر هنگام merge تعارضی در package-lock.json ایجاد شد، نسخهٔ شاخهٔ فعلی (ours) را نگه دار

package-lock.json merge=ours 

و تمام؛ مسئله به شکل موردنظر حل می‌شود. یا فرض کنید دارید برای چند پلتفرم مختلف توسعه می‌دهید:

*.sh text eol=lf
*.bat text eol=crlf

اهمیت خطوط بالا برای خود Git این است که Git باید بتواند تشخیص دهد تغییرات یک فایل واقعاً تغییر محتوایی بوده یا فقط به‌خاطر تفاوت سیستم‌عامل، پایان خط‌ها عوض شده است.
مثلاً فرض کن روی ویندوز فایل این‌طور باشد:

line 1\r\n
line 2\r\n
line 3\r\n

و روی Linux همان فایل:

line 1\n
line 2\n
line 3\n

از دید انسان، هیچ تفاوت محتوایی وجود ندارد؛ اما اگر Git این موضوع را درست مدیریت نکند، ممکن است تغییر پایان خط‌ها را به شکل یک تغییر بزرگ ببیند.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

فرض کن یک نفر در طول زمان با چند ایمیل مختلف commit زده:

Ali Ahmadi <ali@gmail.com>
Ali Ahmadi <ali@company.com>
A. Ahmadi <ali@old-company.com>

از نظر Git این‌ها سه هویت متفاوت به نظر می‌رسند.
اما می‌خواهی Git همه را به این هویت نسبت بدهد:

Ali Ahmadi <ali@company.com>

در .mailmap می‌توانی بنویسی:

Ali Ahmadi <ali@company.com> <ali@gmail.com>
Ali Ahmadi <ali@company.com> <ali@old-company.com>

یعنی:
هر commit قدیمی که با
ali@gmail.com
ثبت شده، در گزارش‌های Git با
Ali Ahmadi <ali@company.com>
نمایش داده شود.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

فرض کن در پروژه‌تان می‌خواهید همهٔ اعضای تیم پیام Commit را یک‌شکل بنویسند.
مثلاً به‌جای اینکه هرکس هر چیزی بنویسد:

fix login
login bug
update
تغییرات لاگین
fix stuff

می‌خواهید ساختار مشخصی داشته باشید:

نوع: عنوان کوتاه

توضیحات:
- چه چیزی تغییر کرد؟
- چرا تغییر کرد؟

اول یک فایل قالب می‌سازی
مثلاً:

.gitmessage

داخلش:

<type>: <short description>

Why:
- 

What:
- 

بعد به Git می‌گویی از این فایل به‌عنوان قالب Commit استفاده کند:

git config --global commit.template ~/.gitmessage

حالا وقتی بزنی:

git commit

ویرایشگر Git با این قالب باز می‌شود:

feat: <short description>

Why:
- 

What:
- 

مثلاً آن را کامل می‌کنی:

feat: add inactivity logout

Why:
- Automatically logout inactive users after 15 minutes.

What:
- Added inactivity monitor
- Added activity tracking to API requests
- Added automatic redirect to login

بعد فایل را ذخیره می‌کنی و Commit ساخته می‌شود.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript