اگر به دنبال یک کتابخانه UI جدید برای پروژه خود هستید، Ark گزینه ای عالی است که باید در نظر بگیرید. این کتابخانه مدرن، قدرتمند و قابل دسترس است و توسط تیمی از توسعه‌دهندگان پشتیبانی می‌شود.
‏ Ark یک کتابخانه بدون سر است، به این معنی که هیچ سبک پیش‌فرضی ندارد و به شما امکان می‌دهد تا ظاهر UI خود را با استفاده از سیستم‌های مختلف استایل مانند CSS Modules یا Emotion کاملاً سفارشی کنید.

🔗https://ark-ui.com/
#️⃣#npm_module
🆔@IR_javascript

ماشین‌ها منطق را کنترل می‌کنند، شما رابط کاربری را کنترل کنید

‏Zag، رفتار و منطق درونی کامپوننت‌های رابط کاربری شما را مدیریت می‌کند. این به شما امکان می‌دهد تا بر جنبه بصری تمرکز کنید و از راه‌حل‌های استایل‌دهی مورد علاقه خود مانند Material UI یا Tailwind CSS برای ایجاد یک رابط کاربری زیبا و سازگار با سیستم طراحی خود استفاده کنید.

<script setup>
import * as numberInput from "@zag-js/number-input";
import { normalizeProps, useMachine } from "@zag-js/vue";
import { computed } from "vue";
const [state, send] = useMachine(numberInput.machine({ id: "1" }));
const api = computed(() =>
  numberInput.connect(state.value, send, normalizeProps)
);
</script>
<template>
  <div ref="ref" v-bind="api.rootProps">
    <label v-bind="api.labelProps">Enter number</label>
    <div>
      <button v-bind="api.decrementTriggerProps">DEC</button>
      <input v-bind="api.inputProps" />
      <button v-bind="api.incrementTriggerProps">INC</button>
    </div>
  </div>
</template>

🔗https://zagjs.com/
#️⃣#npm_module
🆔@IR_javascript

Revealing Slider

🔗https://codepen.io/Prakash286/pen/RwgPPba
#️⃣#code
🆔@IR_javascript

‏WebRTC (Real-time Communication) یک API قدرتمند در مرورگر وب است که امکان ایجاد برنامه‌های ارتباطی در زمان واقعی مانند ویدئو چت، تماس صوتی و اشتراک‌گذاری صفحه را بدون نیاز به افزونه یا پلتفرم‌های شخص ثالث فراهم می‌کند.

#️⃣#tip
🆔@IR_javascript

‏InYourFace یک افزونه VSCode است که به اشتباهات کد شما واکنش نشان می دهد. اما این واکنش ها توسط هر کسی انجام نمی شوند، بلکه توسط چهره شخصیت اصلی بازی افسانه ای DOOM، که از دوران DOS و Windows 95 به یادگار مانده است، انجام می شوند!

هر بار که در کد شما خطایی پیدا می شود، این افزونه یک "Ouch Face" (صورت آخ و اوخ) مربوطه را نمایش می دهد که فرآیند اشکال زدایی را تعاملی تر و سرگرم کننده تر می کند.

#️⃣#tool
🆔@IR_javascript

Old Film Effect

🔗https://codepen.io/josetxu/pen/yLjwOwQ
#️⃣#code
🆔@IR_javascript

‏Husky یک ابزار JavaScript برای مدیریت Git-hooks است که به شما امکان می دهد اسکریپت های سفارشی را در رویدادهای خاص Git اجرا کنید. مثلا قبل از هر کامیتی تست کد به صورت خودکار اجرا شود.

‏مزایای استفاده از Husky:

خودکارسازی وظایف Git: به شما امکان می دهد وظایف Git مانند فرمت، لینت و تست کد خود را به طور خودکار انجام دهید.
افزایش کیفیت کد: Husky به شما کمک می کند تا کد با کیفیت بالاتری بنویسید.
کاهش خطا: Husky به شما کمک می کند تا از خطاهای رایج Git جلوگیری کنید.

#️⃣#npm_module
🆔@IR_javascript

‏Craftum یک ژنراتور لندینگ پیج با هوش مصنوعی است که به شما امکان می دهد با استفاده از قدرت هوش مصنوعی، در عرض 3 دقیقه یک صفحه فرود (لندینگ پیج) بر اساس درخواست خود ایجاد کنید. پس از ایجاد، می توانید سایت خود را به طور آزادانه در ویرایشگر Craftum ویرایش کنید.


🔗https://ai.craftum.com/?utm_source=telegram&utm_medium=post&utm_campaign=frontend_g&utm_content=22-05
#️⃣#tool
🆔@IR_javascript

Social share button

🔗https://codepen.io/yancy/pen/qyMdod
#️⃣#code
🆔@IR_javascript

پیش نمایش SVG
ویرایش فایل های SVG در فرآیند صفحه آرایی دشوار است؟ افزونه SVG Previewer در vscode با ارائه امکانات کاربردی کار با این فایل ها را آسان تر می کند: تغییر مقیاس، تنظیم رنگ پس زمینه و مشاهده اندازه فایل.

#️⃣#tool
🆔@IR_javascript

‏API کلیپ بورد به شما امکان می دهد تا داده ها را از کلیپ بورد بخوانید و در آن بنویسید.

در اینجا یک نمونه کد جاوا اسکریپت برای کپی کردن متن از یک عنصر با کلاس .content به کلیپ بورد با استفاده از API کلیپ بورد آورده شده است:

document.querySelector('.copy').addEventListener('click', () => {
  const txt = document.querySelector('.content').value;
  navigator.clipboard.writeText(txt);
});

#️⃣#tip
🆔@IR_javascript

تشخیص تم سیستم

‏Media Expression prefers-color-scheme می تواند برای تعیین اینکه کاربر از چه تم رنگی (روشن یا تیره) در سیستم عامل خود استفاده می کند، به کار رود.

‏window.matchMedia به شما امکان می دهد از طریق JS به Media Expressions دسترسی داشته باشید و به رویدادهای آنها گوش دهید.

‏در اینجا یک نمونه کد جاوا اسکریپت برای تشخیص تم سیستم با استفاده از Media Expression prefers-color-scheme آورده شده است:

const mediaQueryList = window.matchMedia('(prefers-color-scheme: light)');

if (mediaQueryList.matches) {
  console.log('تم سیستم روشن است');
} else {
  console.log('تم سیستم تیره است');
}

#️⃣#tip
🆔@IR_javascript

بارگذاری تصاویر با توجه به اندازه صفحه نمایش برای افزایش کارایی
برای بهبود عملکرد وب سایت خود، می توانید از ویژگی های srcset و sizes تگ <img> در HTML استفاده کنید تا تصاویر را فقط با اندازه مناسب برای دستگاه کاربر بارگیری کنید.


#️⃣#tip
🆔@IR_javascript

Preloader
🔗https://codepen.io/lexadio19/pen/vYJbmrE
#️⃣#code
🆔@IR_javascript

ویژگی inert در HTML: غیرقابل تعامل کردن عناصر
ویژگی inert در HTML به ما این امکان را می‌دهد تا یک عنصر را غیرقابل تعامل کنیم. این بدین معناست که عنصر مورد نظر دیگر قابل فوکوس، کلیک، انتخاب، ویرایش و همچنین برای ابزارهای خواندن صفحه (screen reader) غیرقابل دسترسی خواهد بود.

کاربردهای ویژگی inert:

حبس کردن فوکوس در پنجره بازشو (Modal Dialog): زمانی که یک پنجره بازشو (Modal) باز می‌شود، می‌توانیم از این ویژگی برای غیرقابل ‌دسترسی کردن تمام عناصر پس‌زمینه (Backdrop) استفاده کنیم تا فوکوس به طور کامل درون پنجره بازشو باقی بماند.
اسلایدر (Carousel): در اسلایدرها گاهی اوقات بخشی از اسلاید بعدی یا قبلی به صورت پیش‌نمایه نمایش داده می‌شود. با استفاده از ویژگی inert می‌توانیم این بخش پیش‌نمایه را برای ماوس، صفحه‌کلید و ابزار خواندن صفحه غیرقابل تعامل کنیم.
عناصر خارج از صفحه (Off-screen Elements): زمانی که یک عنصر خارج از صفحه نمایش قرار دارد (مانند منوی کشویی جانبی)، می‌توانیم با ویژگی inert آن را برای صفحه‌کلید و ابزار خواندن صفحه غیرقابل دسترسی کنیم.


#️⃣#tip
🆔@IR_javascript

‏TypeHero: پلتفرمی برای یادگیری و پیشرفت در TypeScript
‏TypeHero یک پلتفرم آنلاین است که به شما کمک می‌کند تا با دیگر توسعه‌دهندگان TypeScript ارتباط برقرار کنید، با آن‌ها تعامل داشته باشید و در کنار هم پیشرفت کنید.
طیف گسترده‌ای از چالش‌ها را در سطوح مختلف ارائه می‌دهد که به شما کمک می‌کند تا مفاهیم کلیدی TypeScript را در عمل یاد بگیرید و مهارت‌های خود را به چالش بکشید.


🔗https://typehero.dev/
#️⃣#tool
🆔@IR_javascript

‏Tabler - مجموعه ای از بیش از 5250 نماد رایگان و با کیفیت SVG که می توانید در پروژه های خود استفاده کنید

🔗https://tabler.io/icons
#️⃣#tool
🆔@IR_javascript

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

تابلو نقاشی 《مَرَجَ البحرین》  به معنی تلاقی دو دریا؛ با موضوع شب عروسی حضرت ابوتراب علی علیه اسلام و صدیقه کبری فاطمه زهرا سلام الله علیها.《حسین روح‌الامین》

#⃣#event
🆔@IR_javascript

استفاده از :focus-visible در CSS بجای :focus
در صورت استفاده از :focus-visible مرورگرها به طور پیش‌فرض، بر اساس برخی قواعد، اطراف برخی عناصر یک حاشیه (outline) نمایش می‌دهند. برای مثال، زمانی که با صفحه‌کلید روی عناصر <button> و <a> حرکت می‌کنید، مرورگر یک حاشیه دور آن‌ها نمایش می‌دهد، اما با کلیک ماوس این کار را دیگر انجام نمی‌دهد.

#️⃣#tip
🆔@IR_javascript