تشخیص تم سیستم

‏Media Expression prefers-color-scheme می تواند برای تعیین اینکه کاربر از چه تم رنگی (روشن یا تیره) در سیستم عامل خود استفاده می کند، به کار رود.

‏window.matchMedia به شما امکان می دهد از طریق JS به Media Expressions دسترسی داشته باشید و به رویدادهای آنها گوش دهید.

‏در اینجا یک نمونه کد جاوا اسکریپت برای تشخیص تم سیستم با استفاده از Media Expression prefers-color-scheme آورده شده است:

const mediaQueryList = window.matchMedia('(prefers-color-scheme: light)');

if (mediaQueryList.matches) {
  console.log('تم سیستم روشن است');
} else {
  console.log('تم سیستم تیره است');
}

#️⃣#tip
🆔@IR_javascript

بارگذاری تصاویر با توجه به اندازه صفحه نمایش برای افزایش کارایی
برای بهبود عملکرد وب سایت خود، می توانید از ویژگی های srcset و sizes تگ <img> در HTML استفاده کنید تا تصاویر را فقط با اندازه مناسب برای دستگاه کاربر بارگیری کنید.


#️⃣#tip
🆔@IR_javascript

Preloader
🔗https://codepen.io/lexadio19/pen/vYJbmrE
#️⃣#code
🆔@IR_javascript

ویژگی inert در HTML: غیرقابل تعامل کردن عناصر
ویژگی inert در HTML به ما این امکان را می‌دهد تا یک عنصر را غیرقابل تعامل کنیم. این بدین معناست که عنصر مورد نظر دیگر قابل فوکوس، کلیک، انتخاب، ویرایش و همچنین برای ابزارهای خواندن صفحه (screen reader) غیرقابل دسترسی خواهد بود.

کاربردهای ویژگی inert:

حبس کردن فوکوس در پنجره بازشو (Modal Dialog): زمانی که یک پنجره بازشو (Modal) باز می‌شود، می‌توانیم از این ویژگی برای غیرقابل ‌دسترسی کردن تمام عناصر پس‌زمینه (Backdrop) استفاده کنیم تا فوکوس به طور کامل درون پنجره بازشو باقی بماند.
اسلایدر (Carousel): در اسلایدرها گاهی اوقات بخشی از اسلاید بعدی یا قبلی به صورت پیش‌نمایه نمایش داده می‌شود. با استفاده از ویژگی inert می‌توانیم این بخش پیش‌نمایه را برای ماوس، صفحه‌کلید و ابزار خواندن صفحه غیرقابل تعامل کنیم.
عناصر خارج از صفحه (Off-screen Elements): زمانی که یک عنصر خارج از صفحه نمایش قرار دارد (مانند منوی کشویی جانبی)، می‌توانیم با ویژگی inert آن را برای صفحه‌کلید و ابزار خواندن صفحه غیرقابل دسترسی کنیم.


#️⃣#tip
🆔@IR_javascript

‏TypeHero: پلتفرمی برای یادگیری و پیشرفت در TypeScript
‏TypeHero یک پلتفرم آنلاین است که به شما کمک می‌کند تا با دیگر توسعه‌دهندگان TypeScript ارتباط برقرار کنید، با آن‌ها تعامل داشته باشید و در کنار هم پیشرفت کنید.
طیف گسترده‌ای از چالش‌ها را در سطوح مختلف ارائه می‌دهد که به شما کمک می‌کند تا مفاهیم کلیدی TypeScript را در عمل یاد بگیرید و مهارت‌های خود را به چالش بکشید.


🔗https://typehero.dev/
#️⃣#tool
🆔@IR_javascript

‏Tabler - مجموعه ای از بیش از 5250 نماد رایگان و با کیفیت SVG که می توانید در پروژه های خود استفاده کنید

🔗https://tabler.io/icons
#️⃣#tool
🆔@IR_javascript

سالروز ازدواج حضرت امیرالمومنین علی علیه السلام و حضرت صدیقه طاهره فاطمه سلام الله علیها مبارک باد

تابلو نقاشی 《مَرَجَ البحرین》  به معنی تلاقی دو دریا؛ با موضوع شب عروسی حضرت ابوتراب علی علیه اسلام و صدیقه کبری فاطمه زهرا سلام الله علیها.《حسین روح‌الامین》

#⃣#event
🆔@IR_javascript

استفاده از :focus-visible در CSS بجای :focus
در صورت استفاده از :focus-visible مرورگرها به طور پیش‌فرض، بر اساس برخی قواعد، اطراف برخی عناصر یک حاشیه (outline) نمایش می‌دهند. برای مثال، زمانی که با صفحه‌کلید روی عناصر <button> و <a> حرکت می‌کنید، مرورگر یک حاشیه دور آن‌ها نمایش می‌دهد، اما با کلیک ماوس این کار را دیگر انجام نمی‌دهد.

#️⃣#tip
🆔@IR_javascript

واحد های اندازه گیری CSS (قسمت چهارم)

‏fr (fractional unit) یا "واحد کسری" یک واحد اندازه‌گیری انعطاف‌پذیر در CSS است که برای توزیع فضا در داخل یک کانتینر (container) استفاده می‌شود. با تغییر اندازه کانتینر، واحدهای fr نیز به طور متناسب تغییر می‌کنند و نسبت‌های طرح‌بندی را حفظ می‌کنند.

این واحدها برای ایجاد طرح‌های انعطاف‌پذیر مبتنی بر grid بدون نیاز به تعیین عرض ثابت بر حسب پیکسل مفید هستند.

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    font-family: Inter,Arial,sans-serif;
  }

🔗https://www.lambdatest.com/blog/css-fr-unit/
#️⃣#tip #css #واحد_های_اندازه_گیری
🆔@IR_javascript

تگ <mark> برای برجسته‌سازی متن
از تگ <mark> در HTML برای برجسته‌سازی و جلب توجه خواننده به بخشی از متن استفاده می‌شود. این تگ باعث می‌شود متن داخل آن به صورت بصری با پس‌زمینه یا رنگ متفاوتی نمایش داده شود (معمولاً زرد روی زمینه روشن).

موارد استفاده از تگ <mark>:

برجسته‌سازی متن مرتبط بر اساس فعالیت کاربر: برای مثال، هنگام جستجو در یک وب‌سایت، می‌توانید از این تگ برای برجسته‌سازی کلمات کلیدی موجود در متن نتایج استفاده کنید و به کاربر کمک کنید تا به سرعت بخش‌های مرتبط را پیدا کند.
برجسته‌سازی نقل قول‌ها: می‌توانید از تگ <mark> برای برجسته‌سازی بخشی از متنی که از منبع دیگری نقل شده است، استفاده کنید. این کار به خواننده کمک می‌کند تا به راحتی بین متن اصلی و نقل قول تمایز قائل شود.
#️⃣#tip
🆔@IR_javascript

مفهوم "بستن" (Closure) در JavaScript
در JavaScript، بستن (Closure) ترکیبی از یک تابع و محیط واژه‌شناختی (Lexical Environment) است که در آن تابع تعریف شده است. بستن به تابع اجازه می‌دهد تا به متغیرهای موجود در محیط واژه‌شناختی بیرونی خود، حتی پس از حذف شدن آن محیط، دسترسی داشته باشد.

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

function outerFunction() {
  var outerVariable = 'Hello';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var closure = outerFunction();
closure(); // Output: Hello

در این مثال، innerFunction به outerVariable که در outerFunction تعریف شده است، دسترسی دارد. حتی زمانی که outerFunction اجرا می‌شود و از دامنه آن خارج می‌شویم، innerFunction همچنان می‌تواند به outerVariable به دلیل بستن دسترسی داشته باشد.

#️⃣#tip
🆔@IR_javascript

هدف از دستور @property
دستور @property به توسعه‌دهندگان این امکان را می‌دهد که به صورت صریح، «خصوصیات سفارشی CSS» را تعریف کنند. این کار مزایای متعددی به همراه دارد:

بررسی و محدود کردن نوع داده‌: ما می‌توانیم نوع داده‌ی یک خصوصیت سفارشی را مشخص کنیم، مانند <number> (عدد)، <color> (رنگ)، یا <length> (طول). این کار به جلوگیری از خطا کمک می‌کند و اطمینان می‌دهد که خصوصیات سفارشی به درستی استفاده می‌شوند.

تنظیم مقادیر پیش‌فرض: می‌توانیم با استفاده از خاصیت initial-value، یک مقدار پیش‌فرض برای خصوصیت سفارشی که به این روش تعریف شده است، تعیین کنیم. این کار باعث می‌شود که اگر در قسمت‌های دیگر استایل‌شیت مقدار دیگری برای این خصوصیت تنظیم نشده باشد، یک مقدار پیش‌فرض داشته باشیم.

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

html {
  --stop: 50%;
}

@property --stop {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}

در جاوااسکریپت، می‌توانیم متغیرهای CSS @property را کنترل کنیم:

//ثبت مقدار متغیر
window.CSS.registerProperty({
  name: '--foo',
  syntax: '<color>',
  initialValue: '#c0ffee',
  inherits: true,
});

//تنظیم مقدار متغیر
document.documentElement.style.setProperty("--foo", "pink");
document.querySelector(".element").style.setProperty("--foo", "red");

//دریافت مقدار متغیر
document.querySelector(".element").style.getPropertyValue("--foo");

انتخاب دقیق عناصر با استفاده از ساختار of S در CSS
یکی از مفیدترین نوآوری‌های CSS، ساختار of S است که به شما امکان می‌دهد عناصر خاصی را از یک لیست انتخابگرها انتخاب کنید.

نحوه عملکرد:

ساختار of S به دنبال عناصری می‌گردد که با همه انتخابگرهای لیست مطابقت داشته باشند و سپس فقط آنهایی را که با اولین انتخابگر لیست نیز مطابقت دارند، انتخاب می‌کند.

مثال:

فرض کنید کد HTML زیر را دارید:

<body>
  <div class="container">
    <span>1</span>
    <span class="highlight">2</span>
    <span>3</span>
    <span>4</span>
    <span class="highlight">5</span>
    <span class="highlight">6</span>
  </div>
</body>

.container :nth-child(2 of .highlight) {
  color: red;
}

در این مثال، CSS عنصری را که با همه انتخابگرهای لیست (container, :nth-child(2), و .highlight) مطابقت دارند، انتخاب می‌کند.

تنها عنصری که با همه این معیارها مطابقت دارد، span با متن "5" است، زیرا:

داخل یک div با کلاس container قرار دارد.
فرزند دوم div با کلاس container است.
دارای کلاس highlight است.
بنابراین، فقط span با متن "5" به رنگ قرمز در می‌آید.

#️⃣#tip #css
🆔@IR_javascript

انتخاب سریع عناصر با $ و $$
می‌توانیم از $ و $$ برای انتخاب سریع عناصر به ترتیب تک عنصری و چند عنصری استفاده کنیم.

$ و $$ از عبارات انتخاب‌گر استاندارد CSS به عنوان ورودی استفاده می‌کنند.

$(selector) → اولین عنصری که با selector مطابقت دارد را انتخاب می‌کند.

$$(selector) → تمام عناصر را که با selector مطابقت دارند، انتخاب می‌کند.


#️⃣#tip
🆔@IR_javascript