Dead Zone in JavaScript
در جاوا اسکریپت، Dead Zone به مرحله ای در طول اجرای کد شما اشاره دارد که در آن متغیری وجود دارد اما قابل دسترسی نیست.
که به دلیل hoisting متغیر رخ می دهد، مکانیزمی که در آن اعلان های متغیر به بالای محدوده خود منتقل می شوند، در حالی که تخصیص آنها در جای خود باقی می ماند.

console.log(myVar); // Output: ReferenceError: Cannot access 'myVar' before initialization

let myVar = 42;

متغیر var در طول مرحله بالا بردن با undefined مقداردهی اولیه می شود.

console.log(myVar); // Output: undefined

var myVar = 42;

چگونه مناطق مرده را مدیریت کنیم:
[1] اعلام متغیرها قبل از استفاده
‏[2] متغیرهای اعلام شده با let و const فقط در بلوکی که در آن تعریف شده اند قابل دسترسی هستند.
[3] در حالی که var معمولاً به مناطق مرده منتهی نمی شود تا آنجا که میشود از let و const استفاده کنید.
[4] از Linters کدنویسی استفاده کنید
🔗https://www.freecodecamp.org/news/what-is-dead-zone-in-javascript/#what-is-a-dead-zone

#️⃣#tip
🆔@IR_javascript

تگ <optgroup> در HTML در داخل تگ <select> برای گروه بندی آیتم های لیست انتخاب شده استفاده می شود. این به شما امکان می دهد برای راحتی کاربر زیر گروه ها یا دسته ها ایجاد کنید. در یک تگ <optgroup>، می توانید یک یا چند تگ <option> را قرار دهید که نشان دهنده موارد انتخابی فردی است.

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetales">
    <option value="carrot">Carrot</option>
    <option value="potato" disabled>Potato</option>
  </optgroup>
</select>

#️⃣#tip #html
🆔@IR_javascript

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


🔗 https://github.com/metafizzy/isotope

#️⃣#npm_module
🆔@IR_javascript

‏Screen Wake Lock API برای جلوگیری از خاموش شدن صفحه نمایش دستگاه

وقتی ویدیویی را در یوتیوب تماشا می کنید، حتی پس از مدت طولانی عدم فعالیت، صفحه نمایش خاموش نمی شود. این به لطف Screen Wake Lock API امکان پذیر است
🔗https://developer.mozilla.org/en-US/docs/Web/API/WakeLock

#️⃣#tip
🆔@IR_javascript

‏UAParser.js - کتابخانه جاوا اسکریپت رایگان و منبع باز برای شناسایی مرورگر، موتور، سیستم عامل، CPU و نوع/مدل دستگاه کاربر. در مرورگر (سمت کلاینت) یا node.js (سمت سرور) اجرا می شود.

🔗 https://uaparser.js.org/

#️⃣#npm_module
🆔@IR_javascript

بهبود خوانایی کد
‏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