target vs currentTarget in js
به طور کلی:
‏target عنصری است که کاربر روی آن کلیک کرده است
‏CurrentTarget عنصری است که listener به آن اختصاص داده شده است.

مثال:

  <div id="outer">
    Outer div
    <button id="inner">Inner Button</button>
  </div>

  const outer = document.getElementById('outer');

  outer.addEventListener('click', function (event) {
    console.log('event.target:', event.target.id);
    console.log('event.currentTarget:', event.currentTarget.id);
  });

وقتی روی دکمه کلیک شود خروجی مطابق زیر است:

event.target: inner
event.currentTarget: outer

#️⃣#tip
🆔@IR_javascript

‏Quokka.js یک ابزاربرای افزایش بهره وری در حین توسعه است وکمک می کند همانطور که شما تایپ می کنید مقادیری که متغیر ها گرفته اند را نیز مشاهده کنید.

#️⃣#tool
🆔@IR_javascript

‏ Bruno یک سرویس تست API منبع باز است، جایگزینی برای ابزارهایی مانند Postman یا Insomnia که فقط آفلاین کار می کند.

🔗https://github.com/usebruno/bruno

#️⃣#tool
🆔@IR_javascript

کار با Resize Observer برای ردیابی تغییرات اندازه عنصر
‏Resize Observer به شما این امکان را می دهد که تغییرات اندازه عناصر را کنترل کنید و به آنها در کد خود واکنش نشان دهید.

const resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
console.log('ابعاد عنصر تغییر کرده است:',entry.target);
}
});
const resizableElement = document.getElementById('resizable');
resize0bserver.observe(resizableElement);

#️⃣#tip
🆔@IR_javascript

کتابخانه جاوا اسکریپت برای ایجاد فایل‌های pdf در سمت کلاینت که به تولید بلیط رویداد، گواهی‌ها یا پوستر کمک می‌کند.

توضیحات بیشتر در مورد زبان فارسی در jsPDF [+لینک]


🔗 https://github.com/parallax/jsPDF?tab=readme-ov-file

#️⃣#npm_module
🆔@IR_javascript

‏text-align-last
با خط آخر به صورت جداگانه کار می کند و به شما امکان می دهد تا انتقال متنی را انجام دهید که برای چشم دلپذیرتر است

🔗https://caniuse.com/?search=text-align-last
🔗https://www.stefanjudis.com/today-i-learned/how-to-align-the-text-of-the-last-paragraph-line/

#️⃣#tip #css
🆔@IR_javascript

‏Validate.js
کتابخانه ای که متد هایی را برای اعتبارسنجی و sanitizes رشته ها در جاوا اسکریپت ارائه می دهد. که در سمت سرور و کلاینت قابل استفاده است

🔗 https://github.com/validatorjs/validator.js

#️⃣#npm_module
🆔@IR_javascript

یکی از جالب ترین ویژگی های ECMAScript 2023 امکان تغییر یک آرایه با گرفتن یک کپی از آن است. یعنی با تغییر آرایه با این روش اول یک کپی سطحی [+لینک] از آن گرفته می شود سپس تغییرات شما بر روی نسخه کپی اعمال می شود.
‏ toReversed، toSorted، toSpliced از آن جمله اند که درECMAScript 2023 اضافه شدند

#️⃣#tip
🆔@IR_javascript

همه می دانند که نشت حافظه در جاوا اسکریپت امکان پذیر است
از متغییر های گلوبال تا listner ها و ... همه و همه در شرایطی می توانند باعث memory leak و یا نشت حافظه شوند
مخزن زیر مثال هایی را بر حل این مساله ارایه کرده است

🔗https://github.com/trekhleb/javascript-algorithms

#️⃣#learning
🆔@IR_javascript

‏cropperjs کتابخانه جاوا اسکریپت برای برش , مقیاس بندی و چرخاندن تصاویر که در مرورگرهای مختلف نیز کار می کند.

🔗 https://github.com/fengyuanchen/cropperjs

#️⃣#npm_module
🆔@IR_javascript

امام صادق(ع):«جز با ما با کسی رفاقت مکن و به کسی دل نبند
دوست می خواهی فقط ما
رفیق شفیق می خواهی فقط ما
همه تو را رها میکنند ولی ما اهل بيت (عليهم السلام) از شما در قبر و حشر غافل نیستیم.»

شهادت امام صادق علیه السلام تسلیت باد.
#️⃣#event
🆔@IR_javascript

‏Tippy.js - ‏کتابخانه ای برای ایجاد پنجره های بازشو
با استفاده از این کتابخانه می توانید به راحتی شروع به ایجاد پنجره های بازشو، لیست ها و منوهای خود کنید. بر اساس Popper.js است و پیکربندی آن بسیار آسان است. یک پنجره پاپ آپ ساده را می توان تنها پس از پنج دقیقه از خواندن اسناد ایجاد کرد.

پنجره های پاپ آپ را می توان به راحتی سفارشی کرد - اندازه رنگ را انتخاب کرد, عنصری را در آن وارد کرد، علاوه بر این، می توانید انیمیشن های مختلفی را بهجره های پاپ آپ اضافه کنید.
🔗 https://atomiks.github.io/tippyjs/

#️⃣#npm_module
🆔@IR_javascript

‏KeyUX - ‏کتابخانه ای که به شما امکان می دهد به راحتی با وب سایت خود از صفحه کلید کار کنید

برای کسانی ساخته شده که دوست دارند از صفحه کلید حداکثر استفاده را بکنند. تنها 2 کیلوبایت حجم دارد و از وابستگی های اضافی استفاده نشده است.

🔗 https://github.com/ai/keyux

#️⃣#npm_module
🆔@IR_javascript