در حال پیاده‌سازی بارگذاری فایل همراه با نوار پیشرفت هستیم

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

بیایید به نحوه‌ی پیاده‌سازی آن بپردازیم:

در این پیاده‌سازی، از شیء XMLHttpRequest استفاده می‌کنم؛ این شیء وظیفه‌ی ارسال فایل به‌صورت غیرهم‌زمان به سرور را بر عهده دارد و مجموعه‌ای از رویدادها را برای کنترل دقیق‌تر این فرآیند در اختیار ما می‌گذارد.

در این میان، لازم است بدانیم که کنترل‌کننده‌ی استاندارد xhr.onprogress`، پیشرفت *دریافت پاسخ از سرور* را پیگیری می‌کند؛ اما آنچه ما نیاز داریم، پیشرفت *ارسال فایل به سرور* است. از این رو، از `xhr.upload.onprogress بهره می‌گیریم تا رویدادهایی را که در طول انتقال هر بخش از داده‌ها به سرور رخ می‌دهند، دریافت کرده و وضعیت بارگذاری را با دقت به کاربر نمایش دهیم.

const xhr = new XMLHttpRequest();

این شیء دارای مجموعه‌ای از رویدادهای مفید است که در اسلاید بالا به آن‌ها اشاره کرده‌ام. با ترکیب این رویدادها و محاسبات ساده‌ای که در آن‌ها:

* lengthComputable مشخص می‌کند آیا می‌توان اندازه‌ی کل داده را محاسبه کرد،
* loaded میزان بایت‌های ارسال‌شده را نشان می‌دهد،
* total نیز نشان‌دهنده‌ی حجم کلی داده‌های ارسالی است،

می‌توان نوار پیشرفتی طراحی کرد که به‌صورت درصدی، وضعیت بارگذاری را نمایش دهد.

نمونه کد جاوااسکریپت:

if (e.lengthComputable) {
  const percent = Math.round((e.loaded / e.total) * 100);
  // به‌روزرسانی رابط کاربری
}

به این ترتیب، یک نوار پیشرفت واکنش‌گرا خواهیم داشت که وضعیت لحظه‌ای بارگذاری را به‌روشنی به کاربر نمایش می‌دهد.



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

وب کامپوننت‌ها چیستند؟
وب کامپوننت‌ها مجموعه‌ای از APIهای بومی مرورگر هستند که امکان ساخت عناصر رابط کاربری (UI) به‌صورت مستقل، قابل استفاده‌ی مجدد و به‌طور کامل کپسوله‌شده را فراهم می‌کنند — بدون نیاز به وابستگی به هیچ فریم‌ورکی.

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

* عناصر سفارشی (Custom Elements)
* دام سایه (Shadow DOM)
* قالب‌های HTML (HTML Templates)
پیش‌تر در یکی از پست‌هایم درباره‌ی آن نوشته بودم.

چرا باید از آن استفاده کنیم؟

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

وب کامپوننت‌ها در طراحی سیستم‌های طراحی (Design Systems)، رابط‌های کاربری سازمانی، معماری میکرو-فرانت‌اند و کتابخانه‌های سفارشی UI کاربرد گسترده‌ای دارند.

برای شروع، کافی‌ست تگی ساده مانند <my-alert> بسازید — به‌سرعت متوجه خواهید شد که چقدر کد شما تمیزتر، پایدارتر و ساخت‌یافته‌تر خواهد شد، زمانی که کنترل رابط کاربری را یک کامپوننت واقعی بر عهده دارد.



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

واحدهای CSS که اغلب فراموش می‌شوند — lh و rlh

هر دوی این واحدها به *ارتفاع خط* (line-height) مرتبط‌اند — یعنی ارتفاع یک سطر از متن. این واحدها به شما امکان می‌دهند که اندازه‌گیری‌ها را بر اساس ارتفاع خط تعیین کنید، نه بر پایهٔ پیکسل‌های ثابت یا درصدها.

### lh — ارتفاع خط محلی

واحد یک lh معادل ارتفاع خط عنصر جاری است.

p {
  line-height: ۲۴px;
  margin-top: ۲lh; /* معادل ۴۸px */
}

اگر عنصری دارای مقدار مشخصی برای line-height باشد، آنگاه lh معادل همان مقدار خواهد بود.
اگر line-height به‌طور مستقیم مشخص نشده باشد، مقدار به‌ارث‌رسیده استفاده می‌شود.
این واحد یک *واحد محلی* است؛ یعنی مقدار آن به عنصر فعلی بستگی دارد.

### rlh — ارتفاع خط ریشه

واحد یک rlh معادل ارتفاع خط عنصر ریشه (معمولاً html) است.

html {
  font-size: ۱۶px;
  line-height: ۱.۵; /* معادل ۲۴px */
}

.section {
  padding-top: ۲rlh; /* معادل ۴۸px */
}

این واحد یک *واحد جهانی* است، درست مانند rem که از font-size عنصر html پیروی می‌کند، اما در اینجا مبنا ارتفاع خط است، نه اندازهٔ فونت.
کاربرد آن بیشتر در ایجاد فاصله‌گذاری عمودی هماهنگ و یکپارچه در سراسر صفحه است.

### جمع‌بندی

با استفاده از lh و `rlh`، شما ابعاد و فاصله‌ها را به ارتفاع واقعی خطوط متن گره می‌زنید، نه به پیکسل‌های سخت یا درصدهای وابسته به اندازهٔ فونت.
نتیجهٔ این کار، سیستمی انعطاف‌پذیر، مقیاس‌پذیر و منسجم برای فاصله‌گذاری عمودی خواهد بود.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ویژگی‌های کد خوب
کد نرم‌افزاری خوب دارای مجموعه‌ای از ویژگی‌هاست که آن را خوانا، قابل نگهداری و توسعه‌پذیر می‌سازد. در ادامه، مهم‌ترین ویژگی‌های آن بیان شده است:

۱. خوانایی
نام‌گذاری واضح برای متغیرها، توابع و کلاس‌ها (برای نمونه، استفاده از ‎`calculateTotalPrice()`‎ به جای ‎`calc()`‎).
یکپارچگی در سبک نگارش (هماهنگی در نام‌گذاری، تورفتگی‌ها و ساختار کلی کد).
استفاده از توضیحات (کامنت‌ها) تنها در مواقعی که منطق کد نامشخص است (بدون زیاده‌روی).

۲. ماژولار بودن و ساختارمند بودن
تفکیک کد به توابع، کلاس‌ها یا مؤلفه‌ها با رعایت اصل «مسئولیت یگانه».
وابستگی کم بین اجزای مختلف (Low Coupling) – اجزای سیستم کمترین وابستگی را به یکدیگر دارند.
انسجام بالا در درون هر ماژول (High Cohesion) – هر بخش از کد وظیفه‌ای مشخص و متمرکز دارد.

۳. قابلیت تست
پوشش مناسب تست‌ها – کد باید به‌آسانی از نظر صحت عملکرد بررسی‌پذیر باشد.
قابلیت ایزوله‌سازی – امکان جایگزینی وابستگی‌ها با اشیای شبیه‌سازی‌شده (mock).

۴. کارایی و بهره‌وری
استفاده از الگوریتم‌های بهینه (توجه به پیچیدگی زمانی و فضایی – O-Notation – بدون انجام بهینه‌سازی زودهنگام).
کاهش مصرف منابع (حافظه، پردازنده، درخواست‌های شبکه و...).

۵. انعطاف‌پذیری و توسعه‌پذیری
رعایت اصل باز/بسته بودن (Open/Closed Principle) – قابلیت افزودن امکانات جدید بدون نیاز به تغییر منطق موجود.
استفاده از الگوهای طراحی (Design Patterns) مانند Factory، Strategy و Observer.

۶. قابلیت اطمینان و تحمل خطا
مدیریت صحیح خطاها (استفاده مناسب از استثناها و ثبت رویدادها – logging).
بررسی و کنترل شرایط خاص و غیرعادی (Edge Cases و ورودی‌های نامعتبر).

۷. قابلیت نگهداری
مستندسازی حداقلی (مانند فایل README یا توضیحات داخلی کد – docstrings).
امکان بازسازی و بهبود کد (Refactoring) بدون نگرانی از بروز اشکال در عملکرد کلی.

۸. امنیت
محافظت در برابر آسیب‌پذیری‌هایی مانند تزریق SQL، XSS، CSRF و دیگر تهدیدهای رایج.
اعتبارسنجی دقیق داده‌های ورودی.

۹. سازگاری و قابلیت انتقال
پشتیبانی از اجرای میان‌پلتفرمی در صورت نیاز.
تعریف دقیق وابستگی‌ها با استفاده از ابزارهای مدیریت بسته مانند pip، pnpm یا maven.

۱۰. رعایت استانداردها و بهترین شیوه‌ها
پایبندی به اصطلاحات و سبک‌های رایج زبان برنامه‌نویسی (مانند Pythonic way، قراردادهای کدنویسی جاوا، سبک کدنویسی Vue و...).
ادغام با فرآیندهای CI/CD شامل اجرای خودکار تست‌ها و عملیات استقرار (Deployment).


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

شاخص جدید Tiobe برای زبان‌های برنامه‌نویسی
این رتبه‌بندی بر اساس تعداد مهندسان متخصص در سراسر جهان، دوره‌های آموزشی موجود و ارائه‌دهندگان شخص ثالث تنظیم می‌شود.

در ابتدا تصور کردم که TypeScript را به‌عنوان یک زبان برنامه‌نویسی به رسمیت نمی‌شناسند، اما سپس متوجه شدم که در جایگاه سی‌و‌هفتم قرار دارد.

جهش زبان Python، به‌وضوح به دلیل رشد تقاضا در زمینه‌های مرتبط با هوش مصنوعی است.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

⚫️ سالروز شهادت مظلومانه حضرت جوادالائمه(ع) تسلیت باد!

🔹معتصم به شکل دیگری [غیر از روش مامون] موجبات آزار امام را فراهم کرد، تا بالاخره سبب شد که همسر امام یعنی امّ‌الفضل امام را مسموم کرد، آنهم با یک وضع خیلی ناراحت‌کننده‌ای. چون برای همه مسموم‌کننده‌ها معلوم و محرز بود که دستور خلیفه بوده، جرأت این که بدن امام را دفن کنند، نداشتند.

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

🔹حالت ایشان از این جهت، تأسّی داشت به جدّ بزرگوارشان حسین بن علی(ع) که فرمود: مُلْقیً ثَلاثآ بِلاغُسْلٍ وَ لاکفَنٍ.

📝 آشنایی با قرآن،ج۱۲، ص۳۲-۳۱

🔗 [+لینک محتوی]
🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

نسخه‌بندی معنایی (Semantic Versioning) چیست؟

نسخه‌بندی معنایی، که به اختصار SemVer نیز نامیده می‌شود، یک استاندارد برای شماره‌گذاری نسخه‌های نرم‌افزار است که اطلاعات دقیقی درباره‌ی نوع تغییرات ایجادشده در نسخه‌های مختلف ارائه می‌دهد. این استاندارد کمک می‌کند تا توسعه‌دهندگان و کاربران به‌سادگی متوجه شوند که یک به‌روزرسانی شامل چه نوع تغییراتی است.

فرمت پایه‌ی نسخه‌بندی معنایی به شکل زیر است:

نسخه: MAJOR.MINOR.PATCH
مثال: ۱.۲.۳

اجزای اصلی:
🔴 MAJOR (اصلی):
هنگامی افزایش می‌یابد که تغییری ناسازگار با نسخه‌های پیشین (Breaking API Change) در API ایجاد شود.
مثال: حذف یا بازنویسی توابع کلیدی.

🟠 MINOR (فرعی):
زمانی افزایش می‌یابد که قابلیت جدیدی افزوده شود بدون آن‌که ناسازگاری با نسخه‌های قبلی ایجاد شود.
مثال: اضافه شدن یک ویژگی جدید.

🟢 PATCH (وصله):
برای اصلاح اشکالات در نسخه‌ی موجود که به‌صورت سازگار با نسخه‌های پیشین انجام می‌شود.
مثال: رفع باگ‌های گزارش‌شده.



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد چگونه کامپوزِیبل‌های بهتری بنویسیم [+لینک]

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



🔗https://aparat.com/v/kmihlut
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

❤️‍🔥سالروز ازدواج حضرت امیرالمومنین علی علیه السلام و حضرت زهرا سلام الله علیها مبارک❤️‍🔥

👆ملاک‌های انتخاب همسر


🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

تابع attr()
بله، تابع attr در CSS به‌طور قابل‌توجهی بهبود یافته است! از این پس، تمامی ویژگی‌های HTML با پیشوند `data-`، بدون توجه به نوع داده‌ای آن‌ها، می‌توانند در هر ویژگی CSS مورد استفاده قرار گیرند. این پیشرفت، افق‌های تازه‌ای را برای استایل‌دهی پویا به عناصر گشوده و امکانات و انعطاف‌پذیری بیشتری را در اختیار توسعه‌دهندگان قرار می‌دهد.

با مشخص‌کردن نوع داده و در صورت نیاز تعیین یک مقدار پیش‌فرض، می‌توان به شکلی مؤثرتر نمایش محتوا و رفتار عناصر صفحه وب را مدیریت کرد.

مثال:

<div data-width="189"></div>
<div data-width="100"></div>

<style>
  div {
    width: attr(data-width px);
  }
</style>

در این مثال، مقدار ویژگی data-width به‌صورت مستقیم در ویژگی width هر عنصر استفاده شده و مقدار آن به پیکسل تفسیر می‌شود. این روش جدید، مسیرهای نوینی برای طراحی واکنش‌گرا و مبتنی بر داده فراهم می‌آورد.




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

تابع toggle()
درست است، تابع toggle در CSS امکان بسیار کاربردی و مناسبی را برای تغییر چرخشی مقادیر در عناصر یا فرزندان آن‌ها فراهم می‌کند؛ قابلیتی که نه‌تنها کدنویسی را ساده‌تر می‌سازد، بلکه موجب افزایش انعطاف‌پذیری در طراحی سبک‌ها نیز می‌شود.

اجازه دهید مثالی ارائه کنم: فرض کنید می‌خواهید در یک فهرست تو در تو به‌صورت ul > li > ul > li`، نوع علامت‌گذاری (`list-style-type) برای سطوح فرد به‌صورت «disc» و برای سطوح زوج به‌صورت «square» تعریف شود. به‌جای آنکه به‌صورت دستی برای هر سطح از تو در تویی استایل جداگانه تعریف کنید، می‌توانید به‌سادگی از دستور list-style-type: disc, square; استفاده نمایید. تابع toggle به‌صورت خودکار این مقادیر را به‌صورت چرخشی بین فرزندان اعمال می‌کند و از تکرار بی‌مورد کد جلوگیری کرده و مدیریت استایل‌ها را هوشمندانه‌تر و مؤثرتر می‌سازد.

مثال:

/*
اگر فهرست‌هایی به‌صورت تو در تو داشته باشیم:
- سطح نخست علامت‌گذاری به‌صورت disc خواهد بود.
- سطح دوم circle خواهد بود.
- سطح سوم square خواهد بود.
اگر تعداد سطوح بیشتر شود، این الگو به‌صورت چرخشی تکرار می‌گردد:
disc، circle، square، سپس دوباره disc، circle...
*/
ul {
  list-style-type: toggle(disc, circle, square);
}

این ویژگی جدید امکان طراحی سبک‌های منظم، خوانا و بدون تکرار اضافی را فراهم می‌کند و به بهینه‌سازی و زیبایی کد CSS کمک شایانی می‌نماید.


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

تابع‌های sibling-count() و sibling-index()
با معرفی توابع جدید در CSS که امکان کار با تعداد عناصر و ترتیب آن‌ها را فراهم می‌سازند، دیگر نیازی به تعریف استایل‌های سفارشی برای هر عنصر به‌صورت جداگانه یا استفاده از سلکتورهای پیچیده مانند nth-child نیست. این قابلیت‌ها فرایند استایل‌دهی را بسیار ساده‌تر کرده و کد را خواناتر، فشرده‌تر و نگه‌داری آن را آسان‌تر می‌سازند.

تابع sibling-count() تعداد عناصر هم‌سطح (خواهر یا برادر) را بازمی‌گرداند.
تابع sibling-index() موقعیت عنصر را در میان خواهر و برادرهایش مشخص می‌کند.

مثال:

/*
فرض کنید درون یک کانتینر، چهار عنصر div قرار دارند.
در این صورت:
- عرض هر div برابر خواهد بود با بیست و پنج درصد (یعنی صد درصد تقسیم بر چهار).
- ارتفاع آن‌ها به ترتیب برابر خواهد بود با صد، دویست، سیصد و چهارصد پیکسل.
*/

div {
  width: calc(۱۰۰% / sibling-count());
  height: calc(sibling-index() * ۱۰۰px);
}

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


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

تابع first-valid()
معرفی روش جدیدی با نام first-valid که آرگومان‌هایی را دریافت کرده و نخستین مقدار معتبر را انتخاب می‌کند، می‌تواند به‌طور قابل‌توجهی کار با متغیرهای CSS را ساده‌تر و قابل‌اعتمادتر کند. یکی از چالش‌های رایج در استفاده از متغیرها این است که حتی اگر مقدار آن‌ها نامعتبر باشد، همچنان به‌عنوان مقدار معتبر در نظر گرفته می‌شوند و در نتیجه، مقادیر پشتیبان (fallback) نادیده گرفته می‌شوند.

با بهره‌گیری از تابع `first-valid`، می‌توان مجموعه‌ای از مقادیر پشتیبان را به‌صورت زنجیره‌ای تعریف کرد. در این حالت، مرورگر نخستین مقدار معتبر را از میان آن‌ها انتخاب می‌کند و اگر مقدار اول معتبر نباشد، به ترتیب سراغ گزینه‌های بعدی می‌رود تا به یک مقدار معتبر برسد. این قابلیت باعث می‌شود کد CSS مقاوم‌تر و نگهداری آن آسان‌تر شود.

مثال:

/* بدون استفاده از مقدار پشتیبان مؤثر */
div {
  --a: ۴۰px;
  --b: red;
  background: golden;
  background: var(--a);
}

/* استفاده از مقدار معتبر با first-valid */
div {
  --a: ۵۰px;
  --b: green;
  background: red;
  background: first-valid(var(--a), var(--b));
}

در نمونه دوم، اگر مقدار نخست (مثلاً --a) به هر دلیلی نامعتبر باشد، مرورگر به‌طور خودکار از مقدار دوم (یعنی --b) استفاده خواهد کرد. این روش، رویکردی ساخت‌یافته و ایمن برای مدیریت مقادیر متغیرها فراهم می‌سازد.


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

تابع‌های *-mix()
با معرفی تابع جدید mix() در CSS، فرایند ترکیب توابع مختلفی که با *-mix() شناخته می‌شوند، بسیار ساده‌تر شده است. اکنون اگر بخواهید رنگ‌ها را با یکدیگر ترکیب کنید، می‌توانید از نگارشی مانند color(green, ۵۰٪، blue) استفاده کنید. به‌همین ترتیب، ترکیب طول‌ها نیز امکان‌پذیر است. این تابع حتی برای توابع مرتبط با تبدیل (transform) نیز کاربرد دارد که موجب افزایش انعطاف‌پذیری و سهولت در استفاده از CSS می‌شود.

با بهره‌گیری از این قابلیت، می‌توان به‌سادگی ویژگی‌های مختلف را با یکدیگر ادغام کرده و بدون پیچیدگی اضافه در کدنویسی، به نتیجه‌ی دلخواه دست یافت. در نتیجه، کد نهایی خواناتر، بهینه‌تر و نگه‌داری آن آسان‌تر خواهد بود.

از جمله توابع پشتیبانی‌شده می‌توان به موارد زیر اشاره کرد:

* calc-mix()
* color-mix()
* cross-fade()
* palette-mix()

مثال:

div {
  color: mix(۷۰٪، سبز، آبی);
}

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


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

⚫️ ولی ما اهل بیت این‌طور نیستیم

◾️ سالروز شهادت شکافنده علوم، حضرت امام محمد باقر علیه‌السلام تسلیت باد!

⭕️ کانال رسمی «بنیاد شهید مطهری» در تلگرام، ایتا و سروش👇
t.me/motahari_ir
eitaa.com/motahari_ir
sapp.ir/motahari_ir

تابع‌های *-progress()
این رویکرد، امکان محاسبه‌ی پیشرفت نسبی یک مقدار از نقطه‌ی آغازین تا نقطه‌ی پایانی را فراهم می‌سازد. خروجی این تابع، عددی بین صفر تا یک خواهد بود که می‌توان آن را در عملیات مختلف مورد استفاده قرار داد. این قابلیت به‌ویژه در ترکیب با خانواده‌ی توابع *-mix() که پیش‌تر معرفی شد، کاربردی و مؤثر است و امکان کنترل دقیق‌تر و پویاتری بر حالت‌های میانی میان مقادیر مختلف فراهم می‌کند.

در این دسته، سه تابع اصلی تعریف شده‌اند:

* progress()
* media-progress()
* content-progress()

این توابع ابزارهایی انعطاف‌پذیر برای طراحی‌های واکنش‌گرا، تعامل‌پذیر و مبتنی بر وضعیت فراهم می‌آورند.

مثال:

div {
  width: calc(۱۰۰٪ * progress(۵۰px from ۰px to ۱۰۰px));
}

در مثال بالا، مقدار عرض عنصر بر اساس درصد پیشرفت پنجاه پیکسل از صفر تا صد پیکسل محاسبه می‌شود؛ نتیجه، عددی بین صفر تا یک خواهد بود که در ضرب با صد درصد، مقدار نهایی عرض را تعیین می‌کند.

این قابلیت، طراحی‌ مبتنی بر مقادیر دینامیک را ساده‌تر، قدرتمندتر و خواناتر می‌سازد.



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

تابع calc-size()
این تابع امکان کار امن و دقیق با مقادیر درونی مانند auto`، `max-content و fit-content را فراهم می‌سازد. این قابلیت به‌ویژه هنگام طراحی گذارها (transitions) و انیمیشن‌ها که نیاز به کنترل دقیق ابعاد دارند، بسیار کارآمد و مؤثر است.

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

اگرچه تابع calc() در بسیاری از موارد به‌خوبی با مقادیر مشخص عمل می‌کند، اما توانایی پردازش مقادیر درونی مانند auto یا fit-content را ندارد. در چنین شرایطی، تابع calc-size() راه‌حلی امن و کارآمد برای مدیریت این‌گونه مقادیر ارائه می‌دهد، به‌ویژه در زمینه‌ی انیمیشن‌ها و گذارهای پویا.

مثال:

details {
  transition: height ۱s;
}

details::details-content {
  display: block;
}

details[open]::details-content {
  height: auto;
}

details:not([open])::details-content {
  height: calc-size(any, ۰px);
}

در این مثال، تابع calc-size() به‌گونه‌ای استفاده شده است که هنگام بسته بودن جزئیات (details)، مقدار ارتفاع را از حالت پویا به صفر پیکسل کاهش دهد، بدون آنکه منجر به اختلال در اجرای گذار شود. این عملکرد، گامی بزرگ در راستای ایجاد تعاملات روان، مؤثر و قابل‌پیش‌بینی در طراحی رابط کاربری محسوب می‌شود.


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