مقادیر جدید برای text-wrap
یک رویکرد جدید برای قالب‌بندی متن! این مقادیر جدید برای بهبود خوانایی و زیبایی بصری متن شما طراحی شده‌اند.


‏⏺ pretty: توزیع متنی زیباتر و متعادل‌تر در بین خطوط را ارائه می‌دهد.
‏⏺ balance: تعداد کاراکترها را در هر سطر متعادل می‌کند و به مرورگر اجازه می‌دهد تا کلمات را به طور یکنواخت بین خطوط توزیع کند و یک بلوک متنی هماهنگ‌تر ایجاد کند.

نمونه:

.balance {
  text-wrap: balance;
}

.pretty {
  text-wrap: pretty;
}

کاربرد:

از balance برای عناوین و بلوک‌های متنی کوچک که در آنها حفظ تعادل مهم است، استفاده کنید.
از pretty برای پاراگراف‌ها استفاده کنید تا به متنی زیبا و خوانا دست پیدا کنید.

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

استایل‌های پرینت با @media print

توی این مدت متوجه شدید که یه صفحه وب تو نمایشگر و روی کاغذ چه‌قدر فرق داره؟ این همه به خاطر مدیا کویری تو CSS هست! چند روز پیش من خودم با این مشکل برخورد کردم که باید یه صفحه رو برای پرینت آماده می‌کردم، اونم وقتی که کاربر Ctrl + P رو میزنه.
‏
‏@media print یه ابزار خیلی خوب تو CSS هست که بهمون اجازه میده استایل‌های مخصوص چاپ رو تعریف کنیم. یعنی وقتی کسی میخواد صفحه‌مون رو پرینت بگیره، مرورگر این استایل‌ها رو اجرا میکنه.

✔️ چطوری ازش استفاده کنیم؟

@media print {
  /* مثلا همه دکمه‌ها رو مخفی می‌کنیم */
  button {
    display: none;
  }
}

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

0 == "0"
// true

0 == []
// true

"0" == []
// false

جاوااسکریپت زیباست ... .

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

شبه کلاس‌های فوکوس اصلی: :focus، :focus-within و :focus-visible ‍

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

1️⃣ :focus
وقتی یک عنصر در حال حاضر فوکوس دارد، این شبه کلاس‌ به آن اعمال می‌شود.

input:focus {
  border-color: blue;
}

✨ با هر روشی که فوکوس به دست آید، مثل کلیک ماوس، پیمایش با کیبورد و روش‌های دیگر، فعال می‌شود.
✨ برای برجسته‌سازی بصری عناصر فعال مفید است.

2️⃣ :focus-within
اگر یک عنصر یا هر یک از فرزندان آن در حال حاضر فوکوس داشته باشد، این شبه کلاس‌ به آن اعمال می‌شود. برای استایل‌دهی به عناصر والد زمانی که یکی از فرزندان آن‌ها فعال است، مفید است. توضیح مفصل‌تر را اینجا می‌توانید بخوانید:

.form-group:focus-within {
  background-color: lightyellow;
}

✨ زمانی که هر یک از فرزندان یک عنصر والد در فوکوس باشد، به آن والد اعمال می‌شود.

3️⃣ :focus-visible
زمانی که یک عنصر با کیبورد فوکوس بگیرد فعال می‌شود، اما زمانی که فوکوس با کلیک ماوس یا لمس صفحه ایجاد شود، استایل‌ها را اعمال نمی‌کند.

button:focus-visible {
  outline: none;
}

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


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

Promise.withResolvers()

(قابلیت‌های ECMAScript 2024)

‏در بسیاری از مواقع در توسعه، نیاز داریم که یک Promise ایجاد کنیم و بتوانیم مدیریت آن را از خارج کنترل کنیم. مثلاً، بخواهیم از بخش‌های دیگری از کد کنترل کنیم که این Promise چه زمانی حل شود یا رد شود.

‏Promise.withResolvers() روشی است که یک شیء Promise جدید ایجاد می‌کند و همچنین یک شیء دیگر را با دو متد resolve و reject برمی‌گرداند. این دو متد را می‌توان برای کنترل این Promise استفاده کرد.

قبل از معرفی این متد، برای ایجاد چنین Promise‌ای، مجبور بودیم از سازنده Promise استفاده کنیم و به صورت دستی توابع resolve و reject را به تابع پردازشگر منتقل کنیم. این کار به کد اضافی نیاز داشت و ممکن بود باعث سردرگمی در مدیریت وضعیت Promise شود.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

دو رویکرد اصلی برای احراز هویت کاربر

احراز هویت مبتنی بر نشست (Session)

در این روش، اطلاعات مربوط به نشست کاربر در یک پایگاه داده یا مخزن نشست ذخیره می‌شود و یک شناسه نشست به کاربر داده می‌شود.

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

این روش به شرح زیر کار می‌کند:

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

در این روش، اطلاعات نشست در مخزن نشست ذخیره نمی‌شود.

تمام اطلاعات در توکن (JWT) موجود است.

فرض کنید شما یک بلیت هواپیما همراه با تمام جزئیات موجود در بلیت، اما به صورت رمزگذاری شده، دریافت می‌کنید.

این روش به شرح زیر کار می‌کند:

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

اطلاعات کاربر در یک مکان جداگانه (مثل یک پایگاه داده) ذخیره می‌شود.
به کاربر یک شناسه (مثل شماره بلیت) داده می‌شود که به این اطلاعات اشاره می‌کند.
هر بار که کاربر درخواست می‌دهد، این شناسه را ارائه می‌دهد تا سرور اطلاعات او را پیدا کند.
احراز هویت مبتنی بر JWT:

تمام اطلاعات کاربر در یک توکن رمزگذاری شده (JWT) قرار دارد.
این توکن مانند یک بلیت است که تمام اطلاعات سفر را در خود دارد.
هر بار که کاربر درخواست می‌دهد، این توکن را ارائه می‌دهد و سرور اطلاعات را از خود توکن استخراج می‌کند.
کدام روش بهتر است؟

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

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript