خب دوستان بنا بر نظرسنجی، دوره tailwind دوره بعدی خواهد بود😍

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

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

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

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

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

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

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

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



#tip
@IQ_Sourcecode

چرا <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
@IQ_Sourcecode

کوئری‌های کانتینری (Container Queries) ابزاری در CSS هستند که این امکان را فراهم می‌کنند تا عناصر بر اساس ابعاد کانتینر والد خود استایل‌دهی شوند، نه صرفاً بر اساس اندازه‌ی کل پنجره‌ی مرورگر.

در نسخه‌ی کروم صد و سی و سه، قابلیت جدیدی با عنوان وضعیت‌های اسکرول (Scroll States) برای کوئری‌های کانتینری معرفی شده است که کنترل بیشتری بر رفتار عناصر در هنگام اسکرول فراهم می‌کند.

---

### وضعیت‌های اسکرول (Scroll States) چیست؟

سه وضعیت جدید برای ویژگی scroll-state تعریف شده‌اند:
scrollable، stuck و snapped
این وضعیت‌ها می‌توانند در داخل قانون @container مورد استفاده قرار گیرند تا بسته به وضعیت اسکرول کانتینر، استایل‌های خاصی اعمال شوند.

---

### نمونه‌ کد:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

---

### موارد کاربرد:

- نمایش وضعیت اسکرول
به‌صورت بصری به کاربر نشان دهید که هنوز محتوای بیشتری در پایین وجود دارد.

- تیترهای چسبنده (Sticky Headers)
به‌طور خودکار، تیترها هنگام اسکرول در جای خود ثابت شوند.

- تغییر رفتار ناوبری
مثلاً نمایش دکمه‌ی «بازگشت به بالا» تنها در صورتی که کاربر اسکرول کرده باشد.

- بهینه‌سازی رابط کاربری
پنهان‌سازی عناصر کم‌اهمیت هنگام اسکرول برای افزایش تمرکز و فضای قابل مشاهده.

---

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

#tip
@IQ_Sourcecode

💢دوره آموزش جامع تلویند💢

مدرس: حمیدرضا عبادی👨‍🏫
مدت دوره: 21 ساعت🕰
منبع: سبزلرن 🌱

دانلود دوره

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

@IQ_Sourcecode

✅ یک روش درست و اصولی برای نام گذاری کامپوننت ها 👌🏻

@IQ_Sourcecode

💢دوره آموزش جامع Html💢

مدرس: حمیدرضا عبادی 👨‍🏫
مدت زمان:---🕰
منبع: سبزلرن 🌱

دانلود دوره

با یادگیری html ساختار اسکلت بندی کد و سایتتو رو ارتقا بده💪
همچنین یادمیگیری که چطور این ساختار رو به یک ساختار استاندارد تبدیل کنی.

@IQ_Sourcecode

📣لیست دوره ها آپدیت شد.

💢دوره آموزش جامع Css3💢

مدرس: حمیدرضا عبادی 👨‍🏫
مدت زمان: ---🕰
منبع:سبزلرن 🌱

دانلود دوره

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

@IQ_Sourcecode

آقا این سایت Alison رو الان اولین باره دیدمش و خیلی چیز خفنی به نظر میاد! کلی کورس رایگان تو حوزه‌های مختلف داره
و اونایی که بهشون یه نگاه انداختم مطالبشون خیلی طبقه‌بندی تمیزی داشت🤌🏻
پیشنهاد می‌کنم حتما یه نگاه بهش بندازید
@IQ_Sourcecode

Slideout.js

یک کتابخانهٔ سبک برای ایجاد منوهای کشویی جانبی است. این ابزار از حرکات لمسی (سوايپ) پشتیبانی می‌کند، به هیچ‌گونه چارچوب خارجی وابسته نیست و برای طراحی رابط‌های کاربری واکنش‌گرا در دستگاه‌های موبایل و دسکتاپ کاملاً مناسب است.
🔗https://slideout.js.org/

@IQ_Sourcecode