واحدهای 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

🔸روز عرفه، روز دعا و درخواست
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

تابع‌های random() و random-item()
در نسخه‌های پیشین CSS، نبود ابزارهای داخلی برای تولید مقادیر تصادفی به‌وضوح احساس می‌شد. اما در این ماژول جدید، دو تابع کاربردی معرفی شده‌اند:

* random-item() که یک مقدار تصادفی از میان یک فهرست برمی‌گرداند.
* random() که عددی تصادفی در بازه‌ای مشخص تولید می‌کند.

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

مثال:

.random-square-۲ {
  font-size: ۱۶px;
  width: random(۱۶۰px, ۳۲۰px);
  height: random(۱۰em, ۲۰em);
}

.random {
  /* مقدار تصادفی بین صد تا سیصد پیکسل */
  width: random(۱۰۰px, ۳۰۰px);

  /* مقدار تصادفی بین صد تا سیصد پیکسل با گام پنجاه پیکسل:
     صد پیکسل، صد و پنجاه پیکسل، ... */
  height: random(۱۰۰px, ۳۰۰px, by ۵۰px);

  /* یکی از سه رنگ تصادفی */
  background: random-item(--c, قرمز، سبز، آبی);
}

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

بر سرِ تربتِ ما چون گذری همّت خواه
که زیارتگَهِ رِندانِ جهان خواهد بود

❤️عید سعید قربان

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

چه اتفاقی می‌افتد وقتی روی یک لینک کلیک می‌کنیم؟

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

در نگاه اول، کلیک ماوس کار ساده‌ای به‌نظر می‌رسد، اما در دل مرورگر اتفاقات جالبی رخ می‌دهد...

یکم: لینک از کجا می‌آید؟
اگر روی یک لینک کلیک می‌کنید، این بدان معناست که مرورگر هم‌اکنون در حال نمایش یک صفحه‌ی وب است، حتی اگر آن صفحه، صفحه‌ی آغازین باشد و کد HTML، استایل‌های CSS و اسکریپت‌های JavaScript آن به‌صورت محلی بارگذاری شده باشند.

یادآوری: لینک در کد HTML به این شکل تعریف می‌شود:

<a href="/about">درباره‌ی ما</a>

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

وقتی نشان‌گر ماوس را روی لینک می‌بریم:

* مرورگر شکل نشان‌گر را تغییر می‌دهد (معمولاً به شکل دست)
* آدرس مقصد لینک ممکن است در گوشه‌ی پایین-چپ نمایش داده شود
* ممکن است استایل :hover از CSS فعال شود
* اگر توسعه‌دهنده آن را پیاده‌سازی کرده باشد، فرآیند «پیش‌بارگذاری» (prefetching) آغاز می‌شود.

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

کلیک! و بعد؟
مرورگر زنجیره‌ای از اقدامات را آغاز می‌کند:

۱. بررسی رفتار پیش‌فرض: مثلاً اگر لینک دارای target="_blank" باشد، مرورگر آن را در زبانه‌ای جدید باز خواهد کرد.

۲. بررسی اینکه آیا JavaScript، رخداد کلیک را لغو کرده یا نه. بسیاری از اپلیکیشن‌های تک‌صفحه‌ای (SPA) این کلیک را رهگیری می‌کنند تا از بارگذاری مجدد صفحه جلوگیری کنند.

اگر هیچ مانعی در کار نباشد، مرورگر مراحل زیر را اجرا می‌کند:

* نوار آدرس (URL) را به‌روزرسانی می‌کند
* محتوای فعلی صفحه را پاک می‌کند یا صفحه را سفید نمایش می‌دهد
* یک درخواست HTTP به سرور ارسال می‌شود. اگر آدرس IP سرور در کش DNS موجود باشد، از آن استفاده می‌شود، در غیر این صورت ابتدا یک درخواست DNS انجام می‌شود تا IP دریافت گردد، سپس درخواست HTTP ارسال می‌شود.

نکته: اگر فونت‌ها از دامنه‌ای مانند fonts.com بارگیری شوند و فایل‌های CSS از دامنه‌ای مثل `bestcss.com`، مرورگر برای هرکدام یک درخواست DNS جداگانه می‌فرستد — امری که می‌تواند بر سرعت بارگذاری سایت تأثیر منفی بگذارد.

درخواست چگونه است؟
درخواستی که به آدرسی درون ویژگی `href` ارسال می‌شود، با استفاده از پروتکل HTTP و روش GET انجام می‌شود و شامل مجموعه‌ای از هدرهاست، مانند:

Referer
Accept
User-Agent
Cookies (در صورت مجاز بودن توسط سیاست‌های امنیتی)
و سایر موارد

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

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

اما در اپلیکیشن‌های SPA، ممکن است اصلاً بارگذاری جدیدی صورت نگیرد. در عوض JavaScript محتوای صفحه را بدون اینکه کاربر متوجه شود، به‌روزرسانی می‌کند.

مثال: رهگیری کلیک با JavaScript

<a href="/about" onClick={(e) => {
  e.preventDefault(); // جلوگیری از رفتار پیش‌فرض مرورگر
  navigate('/main-about');
}}>

در این حالت:

* مرورگر درخواست پیش‌فرض را ارسال نمی‌کند (JavaScript می‌تواند خودش در صورت نیاز درخواست ارسال کند).
* تغییر URL توسط JavaScript و از طریق History API (pushState) انجام می‌شود.
* محتوا بدون بارگذاری مجدد صفحه تغییر می‌کند، در حالی که نوار آدرس مرورگر تغییر کرده است.

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


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript