‏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

به نویسندگان محتوای وب اجازه می‌دهد تا بدون اتکا به وجود idها به محتوای متنی پیوند ایجاد کنند. علاوه بر این، می‌توان از آن برای ایجاد لینک‌های اشتراک‌گذاری محتوا بطور مؤثرتری استفاده کرد.

<a href="#:~:text=Frontend Portal">
   پیوند برای برجسته کردن "Frontend Portal"
</a>

شبه عنصر ::target-text به شما امکان می دهد سبک های خود را برای متن انتخاب شده مشخص کنید:

::target-text {
  color: white;
  background-color: blueviolet;
}

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

#️⃣#tip
🆔@IR_javascript

استفاده از MutationObserver برای ردیابی تغییرات عنصر DOM

‏MutationObserver به شما اجازه می دهد تا تغییرات در ساختار DOM را نظارت کنید و در کد خود به آنها واکنش نشان دهید.

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

#️⃣#tip
🆔@IR_javascript

madge
ابزاری برای ایجاد نمودار بصری از وابستگی‌های ماژول، یافتن وابستگی‌های حلقوی و کشف سایر اطلاعات مفید.
🔗https://github.com/pahen/madge?tab=readme-ov-file

#️⃣#npm_module
🆔@IR_javascript

امام صادق(ع) :
همہ شيعيان من با شفاعت او ؛(فاطمه معصومه س)وارد بهشت خواهند شد.

🌸ولادت با سعادت حضرت فاطمه معصومه (سلام الله علیها) و روز دختر مبارک باد...

#️⃣#event
🆔@IR_javascript

ایجاد فاوآیکون با توجه به تم مرورگر

فاوآیکون یک آیکون کوچک است که در برگه مرورگر در کنار عنوان وب سایت شما نمایش داده می شود.

 <link
        href="/favicon.ico"
        rel="shortcut icon"
        type="image/x-icon"
        media="(prefers-color-scheme: light)"
      />
      <link
        href="/static/images/icon.png"
        rel="icon"
        type="image/png"
        sizes="32x32"
        media="(prefers-color-scheme: dark)"
      />

عبارت « prefers-color-scheme » در CSS یک ویژگی تشخیصی است که برای بررسی تمایل کاربر به رنگ روشن یا تیره رابط کاربری به کار می‌رود. این ترجیح می‌تواند از طریق تنظیمات سیستم عامل (مانند حالت روشن یا تاریک) یا تنظیمات مرورگر کاربر تعیین شود.

🔗https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme


#️⃣#tip
🆔@IR_javascript

prefers-color-scheme

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


می‌توانید از prefers-color-scheme در پرس‌وجوهای رسانه‌ای CSS برای اعمال سبک‌های مختلف بر اساس ترجیح تم کاربر استفاده کنید. به عنوان مثال:

CSS
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff;
    color: #000;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

🔗https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

#️⃣#tip
🆔@IR_javascript

‏kaboom—یک کتابخانه جاوا اسکریپت است که به شما کمک می‌کند تا به سرعت و به راحتی بازی بسازید. این کتابخانه با رابط کاربری ساده و مستندات جامع خود، ساخت بازی‌های دو بعدی را برای توسعه‌دهندگان در هر سطحی آسان می‌کند.

🔗https://kaboomjs.com/

#️⃣#npm_module
🆔@IR_javascript

‏WYSIWYG (از انگلیسی "What You See Is What You Get") اصطلاحی در رابط کاربری گرافیکی تعاملی است که به کاربران امکان می دهد نتایج اعمال خود را به طور مستقیم در حین انجام آنها مشاهده کنند.

به عبارت ساده، آنچه روی صفحه می بینید همان چیزی است که بعد از ذخیره شدن دریافت می کنید.

دو ویرایشگر برتر WYSIWYG که به راحتی قابل ادغام هستند:

‏CKEditor — به شما امکان می دهد متن را قالب بندی کنید، تصاویر، جداول را وارد کنید، به PDF و Word صادر کنید و کارهای زیادی را انجام دهید. تنظیمات و گزینه های زیادی برای تغییر رفتار و ظاهر وجود دارد. یک نسخه رایگان و همچنین یک نسخه پولی با ویژگی های اضافی در دسترس است.

‏Quill — دسترسی دقیق به محتوای ویرایشگر. API ساده و در دسترس، منبع باز. رایگان، سبک وزن، با پشتیبانی از تم های سفارشی.

سایر گزینه های جالب: Slate، Draft.js، TipTap.


#️⃣#npm_module
🆔@IR_javascript