نکته‌ی CSS: از ارقام جدولی (tabular numbers) برای نمایش تایمرها استفاده کنید

ویژگی font-variant-numeric مشخص می‌کند که اعداد چگونه نمایش داده شوند. با تنظیم مقدار آن روی tabular-nums، تمام اعداد با پهنای یکسان نمایش داده می‌شوند، که باعث می‌شود کاملاً منظم و در یک خط قرار بگیرند.


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

شعاع حاشیه منفی

گاهی پیش می‌آید که طراحان بلوک‌هایی با بریدگی‌های خاص طراحی می‌کنند که گوشه‌های آن‌ها گرد و نرم است، مانند تصویری که در پیوست مشاهده می‌کنید. همین چند روز پیش از من پرسیدند چگونه می‌توان چنین اثری را پیاده‌سازی کرد.

روش‌های مختلفی برای این کار وجود دارد، از جمله ترفندهایی با استفاده از عناصر ماسک دارای موقعیت مطلق. در کل، پیاده‌سازی چنین بلوک‌هایی کار ساده‌ای نیست. اما تیم HTML Academy راه‌حلی ارائه داده است — کتابخانه‌ای به نام nebo.css (https://github.com/htmlacademy/nebo.css
).

Nebo مخفف negative border radius است، عبارتی که اغلب برای توصیف چنین افکت‌هایی به کار می‌رود. این کتابخانه یک فایل CSS با بیش از صد خط کد است که چند کلاس و مجموعه‌ای از ویژگی‌های سفارشی برای تنظیم دقیق در اختیار شما قرار می‌دهد.

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

افزونه‌ی Save All Resources یک ابزار برای مرورگر Google Chrome است که به شما اجازه می‌دهد تمام فایل‌های یک وب‌سایت را (تقریباً هر چیزی که مرورگر برای نمایش آن سایت دانلود می‌کند) ذخیره کنید.

به زبان ساده، وقتی شما وارد یک سایت می‌شوید، مرورگر فایل‌هایی مثل HTML، CSS، JavaScript، عکس‌ها، فونت‌ها و حتی داده‌های JSON را بارگذاری می‌کند. این افزونه همه‌ی آن منابع را یکجا جمع می‌کند و به شما امکان می‌دهد با یک کلیک آن‌ها را به‌صورت فشرده (ZIP) دانلود کنید.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

اپل سورس‌مپ‌های نسخه‌ی وب جدید App Store را مستقیماً در محیط پروداکشن منتشر کرد، و طبیعتاً این داده‌ها به بیرون درز کردند.

بدیهی است که مخزن اصلی اکنون حذف شده است. ([https://github.com/rxliuli/apps.apple.com](https://github.com/rxliuli/apps.apple.com)) اما البته من یک نسخه‌ی پشتیبان از آن دارم، و باید گفت تماشای آن واقعاً جالب است!

همچنین کلون‌های متعددی هم به‌موقع ایجاد شدند؛ برای مثال این مخزن: ([https://github.com/minhducdz99/apps.apple.com](https://github.com/minhducdz99/apps.apple.com)).

و اما برای شروع، بد نیست بدانید که کل داده‌ها با استفاده از افزونه‌ی کروم Save All Resources استخراج شده‌اند.

خب، در سورس‌کدها چه چیز جالبی وجود دارد؟

پیش از هر چیز، پروژه با Svelte ساخته شده است. غیرمنتظره بود؟ نه چندان. اپل معمولاً فریم‌ورک‌های غیرمرسوم را ترجیح می‌دهد . اپل در زمانی که همه از Angular و Backbone استفاده می‌کردند، با SproutCore آغاز کرد و سپس به سراغ Ember.js رفت. حداقل Apple Music با آن نوشته شده بود.

در مرحله‌ی دوم، نویسندگان پروژه بدون هیچ خجالتی در کد نظر (Comment) گذاشته‌اند.
در مرحله‌ی سوم، ساختار عجیب مخزن و این‌همه کامپوننت عظیم، تجربه‌ی غریبی بود. ولی خب، هر تیمی سبک خودش را دارد.

و در نهایت، به‌نظر می‌رسد آن‌ها فریم‌ورک اختصاصی خودشان را برای مدیریت وضعیت، مسیرها و درخواست‌ها دارند — فریم‌ورکی به نام Jet. هنوز زود است که درباره‌ی میزان کارایی آن قضاوت کنیم.




#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

خب، ابزاری که به خلق چنین اثری کمک کرده، TypeGPU نام دارد. و کارش چیست؟

این ابزار کد TypeScript را به GLSL تبدیل می‌کند — بله، به همان زبان توصیف شیدرها! دقیق‌تر بگوییم، آن را به WGSL (WebGPU Shading Language) تبدیل می‌کند.

یعنی چه؟ یعنی شما منطق را درست مانند نوشتن در TypeScript توصیف می‌کنید، البته با در نظر گرفتن ویژگی‌های خاص شیدرها (مثلاً موازی‌سازی شدید محاسبات)، و در خروجی کدی دریافت می‌کنید که منطق و شیدرها در آن از هم جدا شده‌اند!

می‌توانید با یک مثال ساده شروع کنید، مثلاً این نمونه‌ی گرادیان: (https://docs.swmansion.com/TypeGPU/examples/#example=simple--gradient-tiles)،
تا کمی با مفهوم آن آشنا شوید.

🔗https://docs.swmansion.com/TypeGPU/examples/#example=rendering--jelly-slider
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

چطور می‌توان یک عنصر را وادار کرد تا عرض خود را پله‌پله تغییر دهد**؟

فرض کنید می‌خواهید یک صفحه‌ی شطرنجی داشته باشید که در هر شرایطی یکپارچه باقی بماند.

امروز چند روش برای رسیدن به این هدف داریم:

**۱. از آنا تودور: ([https://twitter.com/anatudor](https://twitter.com/anatudor))
نمونه در CodePen: [https://codepen.io/thebabydino/pen/zYbZpBq](https://codepen.io/thebabydino/pen/zYbZpBq)

در این روش از تابع mod() استفاده می‌شود:

width: calc(95vmin + -1 * mod(95vmin, 15px));

اما مشکل این‌جاست که مرورگر Chrome هنوز از تابع mod پشتیبانی نمی‌کند... ولی ناامید نشوید!
دو روش دیگر هم از تمانی عفیف (Temani Afif) معروف به CSS Challenges داریم: ([https://twitter.com/ChallengesCss](https://twitter.com/ChallengesCss))

۲. روش دوم:
در واقع، نتیجه‌ی تابع بالا همان گرد کردن (rounding) است. و خوشبختانه، چنین تابعی هم در CSS وجود دارد! مثلاً:

min-width: round(95vmin, 15px);

نمونه: [https://codepen.io/alinaki/pen/VwRMpPY](https://codepen.io/alinaki/pen/VwRMpPY)

این ویژگی پیش‌تر در Chrome کار نمی‌کرد — تا نسخه‌ی صد و بیست و پنجم.
چرا؟ چون تیم Chrome تصمیم گرفت اول مثلثات را اضافه کند و ریاضیات ساده را بعداً :)

۳. و در نهایت روش سوم:
طبیعتاً با CSS Grid هم می‌شود:
[https://codepen.io/t_afif/pen/KKEXwmR](https://codepen.io/t_afif/pen/KKEXwmR)

و راز کار در این خط است:

grid-template-columns: repeat(auto-fill, 15px);

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

هفت مدیاکوئری برتر که در پروژه‌ها به کارتان می‌آیند 👍

---

✔️ width / height (ابعاد نمای دید – با سینتکس جدید بازه‌ای)

این مورد کلاسیک برای طراحی واکنش‌گراست، اما اکنون سینتکس بازه‌ای جدیدی دارد (مثل >، <، >=، <= و حتی 900px < width < 1200px) که باعث خوانایی بیشتر نسبت به حالت‌های min-/max- می‌شود.

از آن برای تنظیم شبکه (grid) یا کامپوننت‌ها در عرض‌های مختلف پنجره استفاده کنید.

@media (width > 900px) { /* دسکتاپ */ }
@media (900px < width < 1200px) { /* حالت میانی */ }

---

✔️ hover / pointer / any-hover / any-pointer (بررسی توانایی‌های ورودی دستگاه)

به جای حدس زدن اینکه کاربر با «تلفن، تبلت یا رایانه» است، مستقیماً قابلیت‌های ورودی دستگاه را بررسی کنید: آیا از اثر هاور پشتیبانی می‌کند؟ دقت اشاره‌گر چقدر است؟

/* ورودی اصلی — ماوس */
@media (hover: hover) and (pointer: fine) { ... }

/* صفحات لمسی (نقاط تماس درشت‌تر) */
@media (hover: none) and (pointer: coarse) { ... }

---

✔️ prefers-reduced-motion (کاهش یا حذف انیمیشن‌ها برای کاربران حساس به حرکت)

این ویژگی برای دسترس‌پذیری اهمیت زیادی دارد — به کمک آن می‌توان انیمیشن‌ها را برای افرادی با مشکلات تعادلی حذف یا ملایم کرد.

@media (prefers-reduced-motion: reduce) {
  .carousel { animation: none; }
}

---

✔️ prefers-color-scheme و forced-colors (حالت روشن/تاریک و حالت‌های کنتراست بالا)

⏺️ prefers-color-scheme — روش استاندارد برای هماهنگ شدن با حالت تاریک یا روشن.


⏺️ forced-colors — برای برطرف کردن مشکلات در حالت‌های کنتراست بالا (مثل Windows High Contrast) مفید است.
می‌توانید آن را با forced-color-adjust ترکیب کنید.

@media (prefers-color-scheme: dark) { ... }
@media (forced-colors: active) { /* اصلاحات برای کنتراست بالا */ }

---

✔️ resolution (برای بارگذاری تصاویر یا گرافیک با وضوح بالا)

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

background-image: url(image-1x.jpg);

@media (resolution > 1x) {
  background-image: url(image-2x.jpg);
}

---

✔️ orientation (جهت‌گیری — عمودی یا افقی)

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

@media (orientation: portrait) { ... }

---

✔️ inverted-colors (رنگ‌های معکوس) / جایگزین: prefers-contrast

inverted-colors زمانی مفید است که سیستم‌عامل یا مرورگر رنگ‌ها را معکوس می‌کند؛ این ویژگی به اصلاح نمایش سایه‌ها و رسانه‌ها کمک می‌کند.


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

احتمالاً بسیاری از شما با مشکل نوشتن و نگهداری صحیح عبارات منظم (Regular Expressions) مواجه شده‌اید.

به‌ویژه مسئله‌ی درک و خوانایی همیشه مطرح است — آیا گروه‌های گیرنده را به‌درستی در توالی شرایط قرار داده‌اید؟ خروجی مورد انتظار چیست؟ و اصلاً آیا در عبارت منظم فعلی خطایی وجود دارد یا نه؟

بله، می‌توان از سرویس‌هایی مانند regex101.com استفاده کرد، اما گاهی دوست داریم همه‌چیز را بدون ترک محیط توسعه انجام دهیم.

به‌تازگی راه‌حل بسیار خوبی برای این مشکل معرفی شده است — ArkRegex، که نوعی انتزاع (abstraction) بر پایه‌ی new RegExp() است و علاوه بر آن، اطلاعات توضیحی و اعتبارسنجی در سطح تایپ‌های TypeScript ارائه می‌دهد.

🔗https://arktype.io/docs/blog/arkregex
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

افزونه‌ی PT Application Inspector آسیب‌پذیری‌ها و ویژگی‌های مستندسازی‌نشده را در کد منبع برنامه شناسایی می‌کند. افزون بر تحلیل کد، ماژول‌های داخلی آن خطاها را در فایل‌های پیکربندی و همچنین آسیب‌پذیری‌ها را در مؤلفه‌ها و کتابخانه‌های شخص‌ ثالثی که در توسعه‌ی برنامه استفاده شده‌اند، تشخیص می‌دهند.
حالا الگوریتم هوشمند فقط فهرستی از مشکلات ارائه نمی‌دهد، بلکه پیشنهاد می‌کند از کجا بررسی را آغاز کنید: کدام آسیب‌پذیری‌ها را باید ابتدا تأیید کرد و کدام را رد نمود. علاوه‌براین، موارد مشابه را گروه‌بندی می‌کند تا بتوانید آن‌ها را به‌صورت دسته‌جمعی پردازش کنید، نه جداگانه.

● مدیریت گروهی آسیب‌پذیری‌ها. در افزونه‌ی مخصوص IntelliJ IDEA سرانجام قابلیت موردانتظار مدیریت گروهی اضافه شده است. کافی است چند آسیب‌پذیری را در زبانه‌ی Detected Vulnerabilities (آسیب‌پذیری‌های شناسایی‌شده) تیک بزنید و وضعیت همه را یک‌جا تغییر دهید. برای کاربران VSCode وعده داده‌اند که این قابلیت تا پایان سال عرضه شود.

● کوپایلت مبتنی بر LLM (مدل زبانی بزرگ) — قابلیتی آزمایشی که فعلاً فقط برای کاربران IntelliJ فعال است. در این افزونه، یک دستیار هوش مصنوعی مبتنی بر YandexGPT برای تولید اصلاحات مستقیم در محیط IDE ادغام شده است. این سیستم در رفع خودکار کد کمک می‌کند: نه‌تنها آسیب‌پذیری را پیدا می‌کند، بلکه وصله‌ای آماده با پیش‌نمایش تغییرات ارائه می‌دهد. همچنین منطق اصلاح را توضیح می‌دهد — می‌توانید از آن بپرسید چرا این تغییر به این شکل انجام شده است. همه‌ی پیشنهادهای تولیدشده نیز در زبانه‌ی جدیدی با عنوان «How to Fix» (چگونه اصلاح کنیم) ذخیره می‌شوند.

این قابلیت به‌صورت پیش‌فرض غیرفعال است (باید از بخش تنظیمات فعال شود) و برای تمام آسیب‌پذیری‌ها به‌جز موارد ردشده یا مستثناشده عمل می‌کند.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ظر شما درباره‌ی اشکال‌زدایی (Debugging) در دستگاه‌های همراه چیست؟ صادقانه بگویید. به نظر من که یک شکنجه است.

بله، می‌توانید تلفن را با کابل به کامپیوتر وصل کنید و از کنسول مرورگر دسکتاپ استفاده نمایید. یا از مرورگر کیوی (Kiwi Browser) درتلفن همراه استفاده کنیم
ولی در وب ویو ها چه کنیم

ارودا (Eruda) یک کنسول تعبیه‌شدنی (Embeddable) برای مرورگرهای موبایل: https://github.com/liriliri/eruda

نمونه‌ی نمایشی: https://eruda.liriliri.io/

در اصل، شبیه به یک کپی بسیار ساده شده از ابزارهای توسعه وب کروم به نظر می‌رسد و کاملاً می‌تواند در اشکال‌زدایی به شما کمک کند، به خصوص با توجه به تعداد افزونه‌های رسمی و غیر رسمی مختلف، از نمایش بصری لمس‌ها گرفته تا پس‌زمینه‌ی پیکسل-پرفکت.


🔗https://eruda.liriliri.io
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

اسپلاید (Splide) با تایپ‌اسکریپت (TypeScript) نوشته شده است. سبک، سریع، و دارای انبوهی از قابلیت‌های یکپارچه‌سازی است. ده‌ها مثال استفاده بلافاصله در صفحه‌ی اصلی موجود است. به سئوی صفحات آسیبی نمی‌زند. امتیاز لایت‌هاوس (Lighthouse) نیز بسیار سبز است.

هیچ وابستگی‌ای ندارد و از IEده (Internet Explorer 10) به بعد پشتیبانی می‌کند.


🔗https://splidejs.com/#example=rendering--jelly-slider
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

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

برای جلوگیری از چنین موقعیت‌هایی، پروژه‌ای وجود دارد به نام endoflife.date (https://endoflife.date/
).
این سایت نشان می‌دهد پشتیبانی از زبان‌ها، کتابخانه‌ها، فریم‌ورک‌ها و سیستم‌ها چه زمانی پایان می‌یابد. کافی است مثلاً «Node.js» یا «Ubuntu» را جست‌وجو کنید تا فوراً ببینید کدام نسخه‌ها هنوز فعال‌اند و کدام را باید به‌روزرسانی کرد. حتی یک API عمومی هم دارد (https://endoflife.date/docs/api/v1/
) تا بتوانید بررسی نسخه‌ها را مستقیماً در CI خود بگنجانید و اعلان‌های خودکار دریافت کنید.

البته باید با درایت به‌روزرسانی کرد. گاهی نسخه‌ی جدید تغییرات ناسازگار و دردسرهای زیادی به‌همراه می‌آورد. برای همین، نسخه‌های LTS ایجاد شده‌اند — شاخه‌های پایداری که مدت طولانی‌تری پشتیبانی می‌شوند و تغییراتشان تدریجی‌تر است. این نسخه‌ها برای زمانی مناسب‌اند که پایداری و پیش‌بینی‌پذیری برایتان اهمیت دارد.

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

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

نظرتون چیه

🔗https://www.incommonwith.com/collections/all-lighting
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

نکته‌ی CSS

لازم نیست برای تم روشن و تیره نسخه‌های جداگانه‌ای از لوگو در مقیاس خاکستری آماده کنید.

این کار به راحتی با استفاده از CSS Filters انجام می‌شود:

/* برای تم روشن */
.logos-container img {
  filter: brightness(0);
  opacity: 0.6;
}

/* برای تم تیره */
.logos-container img {
  filter: invert(1) saturate(0) brightness(4);
  opacity: 0.6;
}

به این ترتیب می‌توانید با یک تصویر واحد، لوگو را برای هر دو تم به درستی نمایش دهید و نیازی به فایل‌های اضافی نیست.


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

‏👀 Umami ۳.۰: جایگزین خودمیزبان گوگل آنالیتیکس

یک ابزار مشابه Plausible یا Google Analytics است، اما با Node.js ساخته شده و آماده است تا خودتان آن را روی سرور خود میزبانی کنید.

ویژگی‌ها:

جمع‌آوری آمار وب بدون ردگیری شخصی کاربران

داشبورد ساده و قابل فهم

پشتیبانی از چندین سایت و کاربر

MIT License، یعنی کاملاً متن‌باز

همچنین امکان استفاده از سرویس میزبانی‌شده پولی وجود دارد

لینک‌ها:

نسخه ۳.۰: GitHub

سرویس میزبانی‌شده: Umami.is

توسعه‌دهنده: Umami Software, Inc.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript