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

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

#⃣#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

نحوه تشخیص وضعیت اتصال به شبکه در JavaScript

می‌توانیم از رویدادهای online و offline برای دریافت اطلاعیه‌ها در مورد تغییرات وضعیت اتصال به شبکه استفاده کنیم.

window.addEventListener('offline', (event) => {
  console.log('User is offline');
});

window.addEventListener('online', (event) => {
  console.log('User is online');
});

#️⃣#tip
🆔@IR_javascript

شبه‌کلاس ::firstletter

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


#️⃣#tip #css
🆔@IR_javascript

Skating bunny

🔗https://codepen.io/Yakudoo/pen/poqazQo
#️⃣#code
🆔@IR_javascript

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

راه حل:

می‌توانید از کد زیر استفاده کنید:

.box:has(> :nth-child(5):last-child) {
  background-color: green;
}

#️⃣#tip #css
🆔@IR_javascript

Draw With WebGL Flowers 2

🔗https://codepen.io/ksenia-k/pen/RwqrxBG
#️⃣#code
🆔@IR_javascript

‏Codeium یک ابزار هوش مصنوعی قدرتمند است که به برنامه‌نویسان در انجام وظایف مختلف، از جمله نوشتن کد، رفع اشکال و تست، کمک می‌کند. این ابزار با استفاده از یادگیری ماشین و پردازش زبان طبیعی، می‌تواند کد را به طور خودکار تکمیل کند، اشکالات را شناسایی کند و راه حل‌های خلاقانه ارائه دهد.
در نظرسنجی اخیر Stack Overflow، Codeium به عنوان پربازده‌ترین و کاربرپسندترین دستیار هوش مصنوعی برای برنامه‌نویسی انتخاب شد. این نظرسنجی از بیش از 10000 توسعه‌دهنده در سراسر جهان نظرسنجی کرد و نشان داد که Codeium به طور قابل توجهی به برنامه‌نویسان در انجام وظایف خود کمک می‌کند.

🔗https://stackoverflow.blog/2024/05/29/developers-get-by-with-a-little-help-from-ai-stack-overflow-knows-code-assistant-pulse-survey-results/
#️⃣#tool
🆔@IR_javascript