‏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

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

‏fr (fractional unit) یا "واحد کسری" یک واحد اندازه‌گیری انعطاف‌پذیر در CSS است که برای توزیع فضا در داخل یک کانتینر (container) استفاده می‌شود. با تغییر اندازه کانتینر، واحدهای fr نیز به طور متناسب تغییر می‌کنند و نسبت‌های طرح‌بندی را حفظ می‌کنند.

این واحدها برای ایجاد طرح‌های انعطاف‌پذیر مبتنی بر grid بدون نیاز به تعیین عرض ثابت بر حسب پیکسل مفید هستند.

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    font-family: Inter,Arial,sans-serif;
  }

🔗https://www.lambdatest.com/blog/css-fr-unit/
#️⃣#tip #css #واحد_های_اندازه_گیری
🆔@IR_javascript

تگ <mark> برای برجسته‌سازی متن
از تگ <mark> در HTML برای برجسته‌سازی و جلب توجه خواننده به بخشی از متن استفاده می‌شود. این تگ باعث می‌شود متن داخل آن به صورت بصری با پس‌زمینه یا رنگ متفاوتی نمایش داده شود (معمولاً زرد روی زمینه روشن).

موارد استفاده از تگ <mark>:

برجسته‌سازی متن مرتبط بر اساس فعالیت کاربر: برای مثال، هنگام جستجو در یک وب‌سایت، می‌توانید از این تگ برای برجسته‌سازی کلمات کلیدی موجود در متن نتایج استفاده کنید و به کاربر کمک کنید تا به سرعت بخش‌های مرتبط را پیدا کند.
برجسته‌سازی نقل قول‌ها: می‌توانید از تگ <mark> برای برجسته‌سازی بخشی از متنی که از منبع دیگری نقل شده است، استفاده کنید. این کار به خواننده کمک می‌کند تا به راحتی بین متن اصلی و نقل قول تمایز قائل شود.
#️⃣#tip
🆔@IR_javascript