بهبود خوانایی کد
‏Indent Rainbow یک پلاگین VSCode است که علامت های رنگی را به هر سطح تورفتگی در کد شما اضافه می کند و خوانایی را بهبود می بخشد. به لطف این افزونه، می توانید به راحتی تودرتویي موجود در بلوک های کد را ردیابی کنید و روند توسعه را راحت تر و کارآمدتر کنید.


#️⃣#tool
🆔@IR_javascript

متد toSorted() مانند متد sort() است، اما بر خلاف آن، آرایه اصلی را تغییر نمی دهد، اما یک آرایه مرتب شده جدید را برمی گرداند. تمام عناصر تعریف نشده در انتهای آرایه مرتب شده اند. بیایید آرایه را با اعداد مرتب کنیم:

 const numbers = [43, 6, 35, 1, 9, 7, 5, 75, 16];
 const sortedNumbers = numbers.toSorted((a, b) => a - b);
 console.log(numbers);
 // [43, 6, 35, 1, 9, 7, 5, 75, 16];
 console.log(sortedNumbers);
 // [1, 5, 6, 7, 9, 16, 35, 43, 75]

آرایه برگردانده شده یک کپی کم عمق است اگر به عنوان مثال المان هاي آن آرايه آبجكت باشد اگر آن آبجكت تغییر كند، تغییرات در آرایه اصلی و آرايه ايجاد شده با متد toSorted() اعمال ميشود.

const obj = {name: 'Scarlett'};
 const names = [
   obj,
   'Albert',
   undefined,
   '',
 ];
 const sortedNames = names.toSorted();

 console.log(sortedNames);
 //  ['', 'Albert', { name: 'Scarlett' }, undefined]

 obj.name = 'Dan'; 
 console.log(sortedNames)
 //  ['', 'Albert', { name: 'Dan' }, undefined]

#️⃣#tip
🆔@IR_javascript

box-shadow

#️⃣#tip #css
🆔@IR_javascript

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