استایل‌های پرینت با @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

‏Locomotive Scroll — یک پلاگین جذاب و آسان برای استفاده برای ایجاد جلوه‌های اسکرول

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

🔗https://github.com/locomotivemtl/locomotive-scroll
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏Google Web Toolkit مخفف GWT یک فریم ورک به زبان جاوا است برای برنامه نویسانی که میخواهد براحتی برنامه هایی بر پایه تکنولوژی آجاکس بوجود آورند.این تولکیت محصول گوگل است و نمونه های برنامه های آجاکس معروف در وب Gmail و Google Maps می باشند.

امروزه یکی از مشکلات برنامه نویسان که وقت بسیاری از آنها در حین نوشتن یک پروژه تلف میکند ، نبود یک استاندارد کامل در زبان جاوا-اسکریپت است که تمام مرورگر ها آن را پشتیبانی کنند. این کمبود باعث میشود برنامه نویس مجبور به تست برنامه تحت وب خود در مرورگرهای مختلف باشد. Google web toolkit شمارا از این مشکل نجات میدهد.

با کمک GWT کافیست برنامه خود را در زبان برنامه نویسی Java بنویسید و از کامپایلر GWT برای تبدیل کلاس های جاوای خود به کدهای html و javaScript استفاده کنید.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

آنلاین یا آفلاین

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

این رفتار را می‌توان با استفاده از دو رویداد که به شما امکان می‌دهد تغییرات در وضعیت شبکه را ردیابی کنید، پیاده‌سازی کرد: online و offline. این رویدادها زمانی رخ می‌دهند که دستگاه کاربر به ترتیب آنلاین یا آفلاین می‌شود. مثالی از کد در تصویر بالا آمده است

علاوه بر گوش دادن به رویدادها، می‌توانید وضعیت فعلی شبکه را هنگام بارگذاری صفحه یا هر زمان دیگری بررسی کنید. این کار با استفاده از ویژگی navigator.onLine انجام می‌شود.

if (navigator.onLine) {
    console.log('شما آنلاین هستید');
} else {
    console.log('شما آفلاین هستید');
}

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

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏CSS @property
قاعده ای که به شما اجازه می‌دهد خصوصیات سفارشی یا به عبارت دیگر متغیرهای CSS را تعریف کنید.

ساختار:

@property <نام_خاصیت> {
  syntax: <نوع_داده>;
  inherits: <درست | نادرست>;
  initial-value: <مقدار_اولیه>;
}

<نام_خاصیت>: نام خاصیت سفارشی که می‌خواهید تعریف کنید (مثلاً، --my-color).

‏syntax: نوع داده‌هایی که برای این خاصیت مجاز هستند. این می‌تواند یک نوع داده مانند <color>، <length>، <number> و غیره باشد.

‏inherits: مشخص می‌کند که آیا این خاصیت از عناصر والد به ارث می‌رسد یا خیر. مقادیر می‌تواند true (به ارث می‌رسد) یا false (به ارث نمی‌رسد) باشد.

‏initial-value: مقدار پیش‌فرض برای خاصیت، در صورتی که مقدار دیگری مشخص نشده باشد.
چرا باید از CSS @property استفاده کنیم؟

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

با استفاده از @property می‌توانید از تعریف متغیرها داخل :root اجتناب کنید و ساختار CSS خود را منظم‌تر کنید.

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

‏Glider.js به عنوان یک جایگزین سبک و سریع برای کاروسل‌های سنتی ارائه شده است که به ویژه برای دستگاه‌های موبایل مناسب است. این کتابخانه با حفظ قابلیت اسکرول طبیعی، تجربه کاربری بهتری را ارائه می‌دهد. نکته مهم حجم آن است که < 2.8kb میباشد

🔗https://nickpiscitelli.github.io/Glider.js/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏Particles.js

‏Particles.js یک کتابخانه سبک‌وزن جاوا اسکریپت است که به شما امکان می‌دهد ذرات را در یک صفحه وب ایجاد و انیمیت کنید. این کتابخانه اغلب برای ایجاد پس‌زمینه‌های متحرک از ذرات استفاده می‌شود که می‌توانند تعاملی باشند و به اقدامات کاربر مانند حرکت ماوس واکنش نشان دهند.


🔗https://github.com/VincentGarreau/particles.js
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏Clusterize.js

‏Clusterize.js یک کتابخانه سبک‌وزن جاوا اسکریپت است که برای نمایش کارآمد لیست‌های بزرگ داده در برنامه‌های وب استفاده می‌شود. این کتابخانه با رندر کردن فقط بخش قابل مشاهده از لیست و به‌روزرسانی آن هنگام اسکرول، عملکرد را بهبود می‌بخشد.

🔗https://clusterize.js.org/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript