یکی از جالب ترین ویژگی های 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

ویژگی CSS mix-blend-mode
حالت ترکیب رنگ عنصر انتخاب شده با لایه های زیرین را تعیین می کند

<div> 
    <h1>&#1025;</h1> 
    <img src="https://pablogs.io/images/posts/spritekit/backgroundscroll/background.gif" /> 
</div>

div { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background-color: white;
}
h1 { 
    font-size: 8vw;
}
img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: inherit;
}
img { 
    mix-blend-mode: lighten;
}

🔗https://blog.suprabha.me/30-css-blend-mode

#️⃣#tip
🆔@IR_javascript

انعکاس تصاویر با استفاده از ویژگی CSS Box-Reflect

به شما امکان می دهد محتویات یک عنصر را در یک جهت خاص (بالا، پایین، راست، چپ) منعکس کنید. پارامتر دوم مسئول آفست است. و جالب‌تر این است که می‌توانیم با استفاده از پارامتر سوم، یک گرادیان را به عنوان افکت محو اضافه کنیم.

-webkit-box-reflect: below 0px offset  linear-gradient(180deg , rgba(#fff, 0 ) 0%  , rgba(#fff, 0 ) 100%  );

🔗https://www.google.com/url?sa=i&url=https%3A%2F%2Fcss-tricks.com%2Fstate-css-reflections%2F&psig=AOvVaw1mUQg23EOfZ6Dss-OZIPqc&ust=1713088061556000&source=images&cd=vfe&opi=89978449&ved=0CBIQjhxqFwoTCMCZiZTnvoUDFQAAAAAdAAAAABAT

#️⃣#tip #css
🆔@IR_javascript

متعادل کردن متن با استفاده از text-wrap: balance
تعداد کاراکترهای هر خط را به بهترین نحو متعادل می کند و کیفیت طرح و خوانایی را بهبود بخشد
فقط برای بلوک‌های متنی حاوی تعداد محدودی خط پشتیبانی می‌شود (در Chromium از حداکثر شش خط) یعنی. برای مواردی مانند سرفصل ها یا نقل قول ها مفید است

 h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}

🔗https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

#️⃣#tip
🆔@IR_javascript

‏Error Lens یک افزونه قدرتمند برای VSCode است که با شناسایی خطاها و هشدارها در کد شما به بهبود بهره وری توسعه کمک می کند.

فورا خطاها، هشدارها و انواع دیگر پیام های خطا را مستقیماً در ویرایشگر نشان میدهد و آنها را بیشتر قابل مشاهده می کند علاوه بر این دسترسی سریع به اطلاعات مربوط به آنها را فراهم می کند.
#️⃣#tool
🆔@IR_javascript

Selectext: Copy Text from Videos

افزونه ای که به شما امکان می دهد متن و یا کد را مستقیماً از ویدیوها در یوتیوب و هر سایت دیگری کپی کنید

🔗https://chromewebstore.google.com/detail/selectext-copy-text-from/gkkdmjjodidppndkbkhhknakbeflbomf

#️⃣#tool
🆔@IR_javascript

ساخت پیپت در JS

‏EyeDropper API مکانیزمی را برای ایجاد ابزار Eyedropper فراهم می کند. با استفاده از این ابزار، کاربران می توانند رنگ ها را از صفحه نمایش خود، از جمله خارج از پنجره مرورگر، نمونه برداری کنند

const button = document.querySelector('.btn');
const result = document.querySelector('.result');

const colorPicker = async () => {
  const eyeDropper = new EyeDropper();
  const {sRGBHex} = await eyeDropper.open();
  
  result.innerHTML = sRGBHex;
}

button.addEventListener('click', colorPicker);

این ویژگی فقط در محیط‌های ایمن (HTTPS)، در برخی از مرورگرهای پشتیبانی شده قابل دسترسی است.

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

#️⃣#tip
🆔@IR_javascript