جاوااسکریپت | JavaScript

‏Idle Detection API زمانی که کاربرفعالیتی ندارد و مواردی مانند عدم تعامل با صفحه کلید، ماوس، صفحه نمایش، فعال شدن محافظ صفحه نمایش، قفل شدن صفحه، یا حرکت به صفحه دیگری را اطلاع می دهد.

try {
  const controller = new AbortController();
  const signal = controller.signal;

  const idleDetector = new IdleDetector();
  idleDetector.addEventListener('change', () => {
    const userState = idleDetector.userState;
    const screenState = idleDetector.screenState;
    console.log(`Idle change: ${userState}, ${screenState}.`);
  });

  await idleDetector.start({
    threshold: 60000,
    signal,
  });
  console.log('IdleDetector is active.');
} catch (err) {
  // Deal with initialization errors like permission denied,
  // running outside of top-level frame, etc.
  console.error(err.name, err.message);
}

🔗https://developer.mozilla.org/en-US/docs/Web/API/Idle_Detection_API

#️⃣#tip
🆔@IR_javascript

👍2

351 views_, 00:30

استفاده از AbortController برای لغو درخواست‌ها، رویدادهای DOM و وعده‌ها

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

const controller = new AbortController();

document.getElementById("cancel").onclick = () => {
  controller.abort();
}

(async function () {
  const res  = await fetch('/upload', {
    // ...
    signal: controller.signal,
  });

  const data = await res.json();

  return data;
})();

🔗https://developer.mozilla.org/en-US/docs/Web/API/AbortController

🔗https://ditty.ir/posts/javascript-abortcontroller/nBwbX

#️⃣#tip
🆔@IR_javascript

👍2

296 views_, 08:30

2:20

اگه آهنگی مدام توی مغزتون play میشه، برای شما پیشنهاد ویژه‌ای برای جایگزینی دارم.

برگرفته از: @gizmiztel

#️⃣#comic
🆔@IR_javascript

147 views_, edited 15:58

نمونه ای از پیاده سازی تم های روشن و تاریک با استفاده از CSS خالص

<body>
  <label>
    <input id="dark" type="checkbox">
    Dark mode
  </label>
</body>

body {
  --fg: black;
  --bg: white;
  color: var(--fg);
  background-color: var(--bg);
}

body:has(#dark:checked) {
  --fg: white;
  --bg: black;
}

#️⃣#tip #css
🆔@IR_javascript

👍2

289 views_, 16:30

#️⃣#challenge
🆔@IR_javascript

243 views_, 00:30

در خروجی چه خواهد بود

Anonymous Quiz

60 voters242 views_, 00:30

استفاده از JavaScript Intl API برای قالب‌بندی اعداد، تاریخ‌ها و رشته‌ها با توجه به موقعیت مکانی کاربر

‏Intl API قابلیتی برای قالب بندی اعداد، تاریخ ها و رشته ها با توجه به موقعیت مکانی کاربر که اپ را برای کاربران بین المللی قابل دسترسی تر می کند.

#️⃣#tip
🆔@IR_javascript

👍2

190 views_, 08:31

1:42

لحظه تحویل سال در حرم امام رضا (ع)

🔹لحظاتی زیبا از نواختن اولین نقاره در سال ۱۴۰۳ از نقاره‌خانه حرم مطهر رضوی

سال نو تون مبارک 💚💚💚

#️⃣#event
🆔@IR_javascript

❤8👎4

171 views_, edited 11:29

با استفاده از دستور supports@ می توان پشتیبانی مرورگر را در مورد یک ویژگی بررسی کرد. یعنی آن ویژگی در مرورگر منظور کار می کند یا نه.

معمولا این کار توسط کتابخانه های جاوااسکریپت نظیر Modernizr انجام می شود اما این دستور این امکان را می دهد تا بتوان این آزمایش را در فایل CSS بدون نوشتن کد جاوااسکریپت انجام داد.

به عنوان مثال فرض کنید می خواهید از ماژول فلکس باکس استفاده کنید اما در عین حال می خواهید مراقب مرورگرهایی که این ماژول را پشتیبانی نمی کنند نیز باشید و برای آنها استایل مجزا بنویسید و راه حل دیگری برای آنها داشته باشید
🔗https://css-tricks.ir/reference/supports/

🔗https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports_static

#️⃣#tip #css
🆔@IR_javascript

👍2

307 views_, 16:30

ایجاد انیمیشن در svg با استفاده از تگ های animateTransform و animate

در انیمیشن بالا از css , js استفاده نشده و با استفاده از المان های animateTransform و animate متحرک شده اند

🔗https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform

🔗https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

#️⃣#tip #html
🆔@IR_javascript

👍1

236 views_, 23:30

استفاده از AbortController برای لغو رویدادهای DOM

در مورد این روش چندین رویداد listener به طور همزمان با استفاده از AbortController حذف می شود.

🔗https://developer.mozilla.org/en-US/docs/Web/API/AbortController

🔗https://ditty.ir/posts/javascript-abortcontroller/nBwbX

#️⃣#tip
🆔@IR_javascript

254 views_, 07:31

‏border-image-source -- استفاده از تصویر و یا گرادیان برای border یک عنصر

🔗https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source

#️⃣#tip #css
🆔@IR_javascript

259 views_, 15:30

‏beforeunload

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

const beforeUnloadHandler = (event) => {
  // Recommended
  event.preventDefault();

  // Included for legacy support, e.g. Chrome/Edge < 119
  event.returnValue = true;
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    window.addEventListener("beforeunload", beforeUnloadHandler);
  } else {
    window.removeEventListener("beforeunload", beforeUnloadHandler);
  }
});

🔗https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

#️⃣#tip
🆔@IR_javascript

👍2

320 views_, 23:30

0:06

‏login‏
یک فرم لاگین متفاوت و زیبا

🔗https://codepen.io/Anna_Batura/pen/ExKBXdd

#️⃣#code
🆔@IR_javascript

👍1

393 views_, 07:31

ایجاد متن گرادیان دار

ویژگی webkit-text-stroke به طور همزمان رنگ و ضخامت طرح را در اطراف حروف و نمادهای متن تنظیم می کند.اما همچنین برای ایجاد یک گرادیان باید 2 ویژگی دیگر اضافه کنید:
background-clip: text
background-image: linear-gradient

<h1>Stroke</h1>

body {
    background-color: #000119;
    display: grid;
    font-family: sans-serif;
    place-items: center;
  }
  h1 {
    background-clip: text;
    background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
    font-size: 100px;
    -webkit-text-stroke: transparent 6px;
  }

#️⃣#tip #css
🆔@IR_javascript

👍2

369 views_, 15:30

‏htmx به شما این امکان را می دهد که به AJAX، CSS Transitions، WebSockets و Server Sent Events به طور مستقیم در HTML با استفاده از attribute ها دسترسی داشته باشید، بنابراین می توانید رابط های کاربری مدرن را با سادگی و قدرت hypertext بسازید.
به طور مثال برای بروز رسانی محتوای عنصر بدون بارگیری مجدد صفحه

HTML:

 <button hx-get="/api/data" hx-target="#result">
دانلود داده ها
</button>
<div id="result"></div>

جاوا اسکریپت:

 // کنترل کننده رویداد که
// هنگامی که درخواست موفقیت آمیز بود، فراخوانی می شود
function updateResult(response) {
  document.querySelector('#result').innerHTML = response.text;
}

//  کنترل کننده رویداد را ثبت کنید
document.addEventListener('htmx:afterSwap', function(event) {
  if (event.detail.elt.id === 'result') {
    updateResult(event.detail.xhr);
  }
});

در این مثال، با کلیک بر روی دکمه "بارگیری داده ها" یک درخواست GET به /api/data ارسال می شود و نتیجه بدون بارگیری مجدد کل صفحه در داخل عنصر با id= result به روز می شود.

🔗https://htmx.org/

#️⃣#npm_module
🆔@IR_javascript

🔥1🤔1

329 views_, 23:31

0:04

Glowy hover effect

🔗https://codepen.io/inescodes/pen/PoxMyvX

#️⃣#code
🆔@IR_javascript

229 views_, 07:30