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

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


🔗 [+لینک ویدیو]
#️⃣#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

چرا <button> و <button type="button"> یکسان نیستند؟

به‌طور پیش‌فرض، هر دکمه‌ای که با تگ <button> درون یک فرم قرار می‌گیرد، به‌صورت خودکار نوع submit دریافت می‌کند. این یعنی با کلیک روی آن، فرم ارسال می‌شود—حتی اگر هدف شما صرفاً اجرای یک اسکریپت ساده باشد.

برای نمونه:

<form onsubmit="alert('فرم ارسال شد!')">
  <button onclick="alert('کلیک!')">کلیک کن</button>
</form>

در این مثال، پس از کلیک ابتدا پیام «کلیک!» نمایش داده می‌شود، اما بلافاصله بعد از آن، فرم به‌صورت خودکار ارسال خواهد شد.

علاوه بر این، اگر تنها یک دکمه با نوع submit (چه به‌صورت صریح یا ضمنی) در فرم وجود داشته باشد، فشردن کلید Enter در یک فیلد متنی ممکن است باعث شود مرورگر این دکمه را به‌صورت خودکار کلیک کند — حتی بدون دخالت مستقیم کاربر.

برای جلوگیری از این رفتار و اجرای دقیق منطق دلخواه خودتان، لازم است نوع دکمه را به‌صراحت button تعیین کنید:

<button type="button" onclick="alert('کلیک!')">کلیک کن</button>

### مقادیر مجاز برای ویژگی type در تگ <button>:

* submit (پیش‌فرض): فرم را ارسال می‌کند.
* reset: تمامی فیلدهای فرم را به حالت اولیه بازمی‌گرداند.
* button: بدون JavaScript کاری انجام نمی‌دهد و صرفاً به‌عنوان ماشه‌ی اسکریپت استفاده می‌شود.

### نتیجه‌گیری:

اگر دکمه‌ی شما در فرم قرار دارد ولی وظیفه‌اش ارسال یا بازنشانی فرم نیست، همیشه به‌صورت صریح type="button" را تعیین کنید. این کار از ارسال‌های ناخواسته‌ی فرم جلوگیری کرده و منطق شما را کاملاً تحت کنترل نگه می‌دارد.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

زمانی که نیاز به استایل‌دهی عناصری دارید که به آن‌ها دسترسی مستقیم ندارید

گاهی اوقات لازم است تا عناصر داخلی مرورگر مانند نوار لغزنده <input type="range"> یا شبه‌عنصر ::placeholder را به‌صورت دقیق استایل‌دهی کنید. اما به‌محض تلاش برای بررسی این عناصر در ابزار توسعه (DevTools)، با دیواری غیرقابل نفوذ مواجه می‌شوید: ساختار داخلی و استایل‌های آن‌ها در دسترس نیستند.

در چنین مواقعی بود که برای نخستین بار متوجه گزینه‌ای با عنوان «نمایش Shadow DOM عامل کاربر» (Show user agent shadow DOM) شدم — قابلیتی که دسترسی به DOM سایه مرورگر را فراهم می‌کند و به شما اجازه می‌دهد تغییرات دلخواه خود را روی آن اعمال کنید.

### فعال‌سازی Shadow DOM در DevTools مرورگر Chrome

برای فعال کردن نمایش Shadow DOM در ابزار توسعه کروم، مراحل زیر را دنبال کنید:

۱. ابزار توسعه (DevTools) را باز کنید.
۲. وارد بخش تنظیمات شوید (با کلیک روی آیکون چرخ‌دنده).
۳. از منوی کناری، گزینه «Elements / عناصر» را انتخاب کنید.
۴. تیک گزینه «نمایش Shadow DOM عامل کاربر» (Show user agent shadow DOM) را بزنید.

با این کار، در درخت عناصر، گره‌هایی «مخفی» ظاهر می‌شوند که در واقع همان Shadow DOM هستند و حاوی ساختار بومی HTML و CSS مرورگر هستند.

برخی استایل‌ها به دلیل قرار داشتن در Shadow DOM «نابودنی» به نظر می‌رسند، اما اکنون با فعال‌سازی این گزینه، می‌توانید به آن‌ها دسترسی یافته و کنترل کامل بر جزییات رابط کاربری خود داشته باشید.

این ویژگی، ابزاری قدرتمند برای توسعه‌دهندگانی است که می‌خواهند تجربه کاربری را تا کوچک‌ترین جزئیات شخصی‌سازی کنند.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

متد navigator.sendBeacon() این امکان را فراهم می‌کند که حجم کمی از داده‌ها به‌صورت تضمینی به سرور ارسال شود، حتی در شرایطی که کاربر صفحه یا مرورگر را ببندد. برخلاف درخواست‌های سنتی AJAX که ممکن است هنگام بارگذاری یا بستن صفحه ناتمام بمانند، sendBeacon در چنین سناریوهایی ارسال داده را تضمین می‌کند.

مرورگر به درخواست sendBeacon اولویت اجرای بالا نسبت به فرآیند بسته شدن صفحه می‌دهد، که این ویژگی، این متد را برای ارسال داده‌های حیاتی، ابزاری ایده‌آل می‌سازد.

### کاربردهای عملی

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

const data = JSON.stringify({event: 'page_close', time: Date.now()});
navigator.sendBeacon("/analytics", data);

### محدودیت‌ها

* حداکثر اندازه بار داده محدود است (معمولاً تا شصت و چهار کیلوبایت)
* فقط از درخواست‌های POST پشتیبانی می‌کند
* از هدرهای سفارشی پشتیبانی نمی‌کند
* پاسخ سرور قابل پردازش نیست

این ویژگی‌ها sendBeacon را برای ارسال داده‌های ساده، سریع و قابل اعتماد، به‌ویژه هنگام بستن صفحه، به ابزاری کاربردی تبدیل کرده‌اند.



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

چگونه یک نشان (Badge) برای برنامه ایجاد کنیم


نشان‌ها (Badge) برای انتقال اطلاعات غیر اضطراری به کاربر استفاده می‌شوند. برای نمونه، می‌توان از آن‌ها برای نمایش وضعیت یک برنامه یا تعداد آیتم‌های خوانده‌نشده بهره گرفت. روش کلاسیک ایجاد نشان برای برنامه، افزودن یک عدد به فاو‌آیکن (favicon) بود. اما در مرورگرهای مدرن، پس از نصب برنامه، راهکاری داخلی برای افزودن نشان به آیکون برنامه در نوار وظیفه سیستم‌عامل وجود دارد.

روش نوین
استفاده از متد navigator.setAppBadge()
متد navigator.setAppBadge() امکان افزودن یک نشان به آیکون برنامه نصب‌شده را فراهم می‌سازد. این متد یک آرگومان اختیاری دریافت می‌کند که یک عدد صحیح است و به‌عنوان مقدار نشان استفاده می‌شود.
اگر این عدد صفر تعیین شود، نشان پاک خواهد شد. در صورتی که هیچ مقداری ارائه نشود، یک نشان عمومی (معمولاً به‌صورت نقطه‌ای رنگی) نمایش داده می‌شود.
این روش مدرن و استاندارد، تجربه کاربری بهتری را در برنامه‌های تحت وب فراهم می‌کند و به‌ویژه در برنامه‌های وب پیش‌رونده (PWA) نقش مؤثری در اطلاع‌رسانی ساده و مؤثر دارد.


روش کلاسیک: افزودن عدد به فاوآیکون
اگر برنامه هنوز نصب نشده باشد، می‌توانید عددی را به فاوآیکون اضافه کنید. راه‌های گوناگونی برای انجام این کار وجود دارد؛ برای نمونه، می‌توان فاوآیکون را به‌صورت پویا بر روی یک عنصر بوم (canvas) ترسیم کرد و اطلاعات مربوط به نشان (badge) را به آن افزود و سپس آن را به‌صورت یک نشانی «بلاب» (Blob URL) نمایش داد. یا می‌توان تصویری از نوع SVG ساخت که اطلاعات نشان را به‌صورت یک نشانی داده‌ای (data URL) در خود داشته باشد.

🔗https://web.dev/patterns/web-apps/badges
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript