ساخت پیپت در 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

واحد های اندازه گیری CSS (قسمت اول)

‏px اساسی ترین واحد اندازه گیری است. تعداد پیکسل ها در تنظیمات رزولوشن صفحه نمایش تنظیم می شود، یک پیکسل دقیقاً یک پیکسل روی صفحه نمایش است. برای تعیین دقیق اندازه ها استفاده می شود.

‏mm, cm, pt و pc واحدهای اندازه گیری مشتق شده از px هستند. مرورگر این مقادیر را به پیکسل تبدیل می کند.

‏em اندازه را نسبت به فونت والد تنظیم می کند. به عنوان مثال، 1em اندازه فعلی فونت است و 1.5em 1.5 برابر بزرگتر است. می توانید هر تناسبی را از فونت فعلی بگیرید: 2em، 0.5em و غیره.

‏rem (ترکیبی از px و em) اندازه را نسبت به فونت <html> تنظیم می کند.

% - به طور کلی، درصدی از ابعاد والد خواهد بود (به طور کلی، اما همیشه نه). برای عرض ها، ارتفاعات و غیره استفاده می شود، باید بدانید که بر اساس چه چیزی درصدها را محاسبه می کند.

‏vw — یک درصد از عرض پنجره دید.

‏vh — یک درصد از ارتفاع پنجره دید.

‏vmin — کوچکترین (vw, vh).

‏vmax — بزرگترین (vw, vh).

#️⃣#tip #css #واحد_های_اندازه_گیری
🆔@IR_javascript

واحد های اندازه گیری CSS (قسمت دوم)

‏svh : کوچکترین ارتفاع ممکن برای ناحیه دید را که برای کاربر قابل مشاهده است، نشان می دهد. این واحد شامل هیچ عنصر رابط کاربری نمی شود.

‏lvh: بلندترین ارتفاع ممکن برای ناحیه دید را که برای کاربر قابل مشاهده است، نشان می دهد. این واحد شامل تمام عناصر رابط کاربری مانند نوار آدرس می شود.

‏dvh : ارتفاع فعلی ناحیه دید را نشان می دهد. این واحد بر خلاف واحد vh شامل عناصر رابط کاربری نمی شود و با تغییر ارتفاع ناحیه دید، مقدار آن نیز تغییر می کند.

‏svw : کوچکترین عرض ممکن برای ناحیه دید را که برای کاربر قابل مشاهده است، نشان می دهد. مقدار این واحد ثابت است و با تغییر عرض ناحیه دید، تغییر نمی کند.

‏lvw : بلندترین عرض ممکن برای ناحیه دید را که برای کاربر قابل مشاهده است، نشان می دهد. مقدار این واحد نیز مانند svw ثابت است.

‏dvw : عرض فعلی ناحیه دید را نشان می دهد. این واحد مقدار پویایی دارد و با تغییر عرض ناحیه دید، مقدار آن نیز تغییر می کند.
#️⃣#tip #css #واحد_های_اندازه_گیری
🆔@IR_javascript

JsBarcode ‍
‏JsBarcode یک کتابخانه JavaScript برای تولید بارکد در صفحات وب است. این کتابخانه به شما امکان می دهد انواع مختلف بارکد مانند EAN، CODE128، CODE39 و موارد دیگر را ایجاد کنید.

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

نحوه اتصال:

JsBarcode را متصل کنید:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.3/JsBarcode.all.min.js"></script>

یک بارکد ایجاد کنید:

JsBarcode("#barcode", "Katerina | PRO Frontend", {
  format: "CODE128",
  width: 2,
  height: 100,
  displayValue: true,
  font: "Arial",
  textAlign: "center",
  lineColor: "#d14bd5",
});

نکات مهم:

قابل استفاده در: svg، canvas یا img
پشتیبانی از پارامترهای مختلف: برای تنظیم ظاهر بارکد

🔗 https://github.com/lindell/JsBarcode

#️⃣#npm_module
🆔@IR_javascript

‏With یک متد جدید که در ECMAScript 2023 معرفی شده است و راهی آسان برای انجام یک کار بسیار خاص ارائه می دهد: اصلاح یک آرایه و ایجاد یک کپی از آن.

بیایید آن را با یک مثال تجزیه و تحلیل کنیم:

const nums = [1, 2, 3, 4];
const newNums = nums.with(1, 'string');

console.log(newNums); // [1, 'string', 3, 4]

روش with دو آرگومان می پذیرد: شاخصی که جایگزینی در آن رخ می دهد و مقدار جدید.


#️⃣#tip
🆔@IR_javascript

Microsoft Designer for Web

یک شبکه عصبی رایگان از مایکروسافت طرح ها و تصاویر را بر اساس توضیحات تولید می کند.

🔗https://designer.microsoft.com/

#️⃣#tool
🆔@IR_javascript

‏ is() در CSS
به شما امکان می دهد تا چندین انتخاب کننده را در یک انتخاب کننده واحد گروه بندی کنید، که این امر نوشتن CSS را آسان تر می کند.

نحوه استفاده:

CSS
.cart__number:is(:hover, :focus) {
  outline: 1px solid var(--accent);
  color: var(--accent);
}

در مثال بالا، این کد CSS هر عنصر .cart__number را که روی آن هاور شده یا روی آن ها تمرکز شده است، هدف قرار می دهد و رنگ و outline آن ها را تغییر می دهد.

مزایای استفاده از is():

[1] کد را خواناتر می کند: با گروه بندی چندین selector در یک selector واحد، می توانید کد CSS خود را خواناتر و سازمان یافته تر کنید.
[2] نگهداری را آسان تر می کند: اگر نیاز به تغییر نحوه انتخاب عناصر دارید، فقط باید یک انتخاب کننده را در is() تغییر دهید، به جای اینکه چندین انتخاب کننده را به طور جداگانه تغییر دهید.
[3] پشتیبانی مرورگر: در حال حاضر توسط 97.68٪ از مرورگرها پشتیبانی می شود.

#️⃣#tip #css
🆔@IR_javascript