فشرده سازی کد
افزونه Better Minify در vs_code به شما امکان می دهد کدهای HTML، CSS، JS و بسیاری از زبان های دیگر را فشرده کنید.

هنگام استفاده از دستور "minify files" بر روی یک فایل انتخابی، فایلی با نام "نام فایل.min.ext" در دایرکتوری فعلی ایجاد می شود.

#️⃣#tool
🆔@IR_javascript

‏Draggabilly
‌‏Draggabilly یک کتابخانه JavaScript سبک وزن است که به شما امکان می دهد عناصر HTML را در صفحات وب قابل کشیدن و رها کردن کنید. این کتابخانه از انواع مختلف ورودی، از جمله صفحه نمایش های لمسی پشتیبانی می کند، که آن را برای استفاده در همه دستگاه های مدرن مناسب می کند.


🔗https://draggabilly.desandro.com/

#️⃣#npm_module
🆔@IR_javascript

هر آنچه برای ساخت آسان وب‌سایت‌های ریسپانسیو و بی‌نقص نیاز دارید، در این نرم افزار وجود دارد

تمامی دستگاه‌ها به طور همزمان
تمامی دستگاه‌ها را به صورت همزمان و در کنار هم مشاهده کنید. دیگر نیازی به کلنجار رفتن با ابزار تغییر سایز مرورگر نیست. همه چیز به طور همزمان در یک نگاه قابل مشاهده است.

تعاملات آینه شده
هر کلیک، اسکرول یا ناوبری که در یک دستگاه انجام می‌دهید، به صورت لحظه‌ای در تمام دستگاه‌ها تکرار می‌شود.

تعویض سریع بین محیط‌های مختلف
ترکیب‌های دستگاهی مورد علاقه خود را به عنوان «مجموعه پیش‌نمایش» ذخیره کنید و هنگام تست به سرعت بین آن‌ها جابجا شوید.

پروفایل‌های گسترده‌ی دستگاه‌ها
ابزار Responsively به صورت پیش‌فرض با مجموعه‌ای بزرگ از پروفایل‌های دستگاه‌ها عرضه می‌شود. همچنین می‌توانید دستگاه‌های دلخواه خود را نیز اضافه کنید.

🔗https://responsively.app/
#️⃣#tool
🆔@IR_javascript

‏API تمام صفحه—یک رابط کاربری است که به شما امکان می دهد عناصر صفحه HTML را در حالت تمام صفحه نمایش دهید. این رابط کاربری توسط مرورگرهای وب پشتیبانی می شود و می تواند برای ایجاد تجربیات کاربری جذاب و فراگیر مورد استفاده قرار گیرد.

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

نمایش تصاویر: می توانید از API تمام صفحه برای نمایش تصاویر در اندازه بزرگتر و با جزئیات بیشتر استفاده کنید. این می تواند برای عکاسان، هنرمندان یا هر کسی که بخواهد تصاویر خود را به روشی فراگیر به اشتراک بگذارد مفید باشد.

نمایش اسلایدها: API تمام صفحه برای نمایش اسلایدها نیز ایده آل است. این می تواند برای ارائه ها، سخنرانی ها یا هر موقعیتی که بخواهید محتوای خود را به روشی بصری و جذاب ارائه دهید، مفید باشد.

نمایش بازی ها: برخی از بازی های وب از API تمام صفحه برای ایجاد تجربه ای فراگیرتر برای بازیکنان استفاده می کنند.


نحوه استفاده از API تمام صفحه:
استفاده از API تمام صفحه نسبتاً ساده است. برای نمایش یک عنصر در حالت تمام صفحه، می توانید از روش requestFullscreen() در آن عنصر استفاده کنید. به عنوان مثال، کد زیر عنصر با شناسه target را در حالت تمام صفحه نمایش می دهد:

const element = document.getElementById('target');
element.requestFullscreen();

برای خروج از حالت تمام صفحه، می توانید از روش exitFullscreen() در شیء Document استفاده کنید. به عنوان مثال، کد زیر از حالت تمام صفحه خارج می شود:

document.exitFullscreen();

🔗https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_requestfullscreen
#️⃣#tip
🆔@IR_javascript

در دنیای وب، انیمیشن نقش مهمی در ایجاد رابط کاربری جذاب و پویا ایفا می‌کند. روش‌های مختلفی برای ایجاد انیمیشن در وب وجود دارد، از جمله CSS Animations، SVG Animations و JavaScript Animations. در میان این روش‌ها، requestAnimationFrame (rAF) به عنوان یک ابزار قدرتمند و کارآمد برای ایجاد انیمیشن‌های روان و بهینه شناخته می‌شود.

‏rAF چیست؟

‏requestAnimationFrame یک API مرورگر است که به شما امکان می‌دهد انیمیشن‌های روان و بهینه‌ را در وب ایجاد کنید. این API جایگزینی برای روش‌های سنتی مانند setInterval و setTimeout است که می‌توانند باعث ایجاد انیمیشن‌های ناهموار و ناکارآمد شوند.

نحوه عملکرد rAF:

‏rAF با هماهنگ‌سازی با نرخ تازه‌سازی صفحه‌نمایش کار می‌کند تا انیمیشن‌ها را در فواصل زمانی مناسب رندر کند. این امر باعث می‌شود انیمیشن‌ها روان‌تر و بدون لرزش یا پرش به نظر برسند. علاوه بر این، rAF فقط زمانی که مرورگر برای رندر فریم بعدی آماده است، فراخوانی می‌شود. این امر باعث می‌شود از مصرف غیرضروری منابع CPU و GPU جلوگیری شود و انیمیشن‌ها به طور کارآمدتر اجرا شوند.

#️⃣#tip
🆔@IR_javascript

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

مزایای شانس:

سادگی: شانس یک کتابخانه سبک و آسان برای استفاده است.
تنوع: شانس انواع مختلفی از داده‌های تصادفی از جمله رشته‌ها، اعداد، آرایه‌ها، اشیاء و غیره را تولید می‌کند.
کد باز: شانس یک کتابخانه متن باز است که تحت مجوز MIT منتشر شده است، به این معنی که می‌توانید به صورت رایگان از آن برای پروژه‌های شخصی و تجاری استفاده کنید.

Chance.first({ nationality: "it" });
// 'Alberto'

Chance.first({ gender: "female" });
// 'Emma'

chance.animal();
// 'Cobra'

🔗https://chancejs.com/

#️⃣#npm_module
🆔@IR_javascript

‏Photopea: جایگزینی قدرتمند برای فتوشاپ در وب

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

شباهت به فتوشاپ:

‏Photopea رابط کاربری بسیار مشابهی با فتوشاپ دارد. این شامل پنل‌های ابزار آشنا، لایه‌ها، فیلترها و تنظیمات مختلف است. اگر قبلاً از فتوشاپ استفاده کرده باشید، به سرعت می‌توانید با Photopea کار کنید.
🔗https://www.photopea.com/
#️⃣#tool
🆔@IR_javascript

یارب العالمین

عید قربان مبارک باد🌸


#⃣#event
🆔@IR_javascript

واحد ‏In ارتفاع خط محاسبه شده عنصر را نشان می دهد که می تواند در حالات زیر بسیار مفید باشد:
اندازه آیکن های درون خط را تنظیم کنید و آن را با متن تراز کنید
ارتفاع متن را بر اساس تعداد خطوط تنظیم کنید
پس‌زمینه‌ای را برای هر خط تنظیم کنید

#️⃣#tip #css
🆔@IR_javascript

‏DrawKit یک منبع ارزشمند برای طراحان و توسعه‌دهندگان است که به دنبال تصاویر، انیمیشن‌ها و موکاپ‌های باکیفیت و رایگان برای پروژه‌های خود هستند. این کتابخانه جامع شامل طیف گسترده‌ای از تصاویر وکتور دسته‌بندی‌شده در موضوعات مختلف

🔗https://www.drawkit.com/
#️⃣#tool
🆔@IR_javascript

‏CesiumJS: کتابخانه‌ای قدرتمند برای ساخت نقشه‌های سه‌بعدی
‏CesiumJS یک کتابخانه JavaScript منبع‌باز است که به شما امکان می‌دهد گوی‌ها و نقشه‌های سه‌بعدی با کیفیت بالا را به صورت آنلاین ایجاد کنید. این کتابخانه با استفاده از WebGL، گرافیک سخت‌افزاری را به کار می‌گیرد و برای ارائه عملکرد، دقت، کیفیت بصری و سهولت استفاده بهینه شده است.
🔗https://cesium.com/

#️⃣#npm_module
🆔@IR_javascript

‏PerfectPixel: پلاگینی برای پیکسل‌نویسی دقیق وب‌سایت‌ها

‏PerfectPixel یک پلاگین مرورگر است که به شما امکان می‌دهد وب‌سایت‌ها را «پیکسل به پیکسل» طراحی کنید. این ابزار به شما کمک می‌کند تا بررسی کنید که تا چه حد طراحی شما به طرح اولیه نزدیک است. برای انجام این کار، کافی است پلاگین را نصب کرده و آن را در وب‌سایتی که می‌خواهید بررسی کنید، اجرا کنید.
🔗https://www.welldonecode.com/
#️⃣#tool
🆔@IR_javascript

‏KaTeX: سریع‌ترین کتابخانه برای ریاضی در وب
این روزها، تمام مقالات و پست‌های وبلاگ پر از نمادهای ریاضی است. پس چه بهتر از رویکردی مبتنی بر TeX برای نمایش آنها استفاده کنیم که کاملا روان باشد.

🔗https://katex.org

#️⃣#npm_module
🆔@IR_javascript

ویژگی poster
ویژگی poster در تگ <video> آدرس تصویری را مشخص می‌کند که تا زمانی که ویدیو در دسترس یا در حال پخش نیست، نمایش داده می‌شود. اگر این ویژگی مشخص نشده باشد، مرورگر سعی می‌کند اولین فریم ویدیو را نمایش دهد.

مزایای استفاده از ویژگی poster:

بهبود تجربه کاربری: نمایش یک تصویر به جای یک صفحه خالی هنگام بارگیری ویدیو، تجربه کاربری را بهبود می‌بخشد.
جذب توجه مخاطب: یک تصویر جذاب می‌تواند توجه مخاطب را به ویدیو جلب کند و آنها را به تماشای آن ترغیب کند.
ارائه اطلاعات اولیه: تصویر می‌تواند اطلاعات اولیه‌ای در مورد محتوای ویدیو به مخاطب ارائه دهد.

<video src="video.mp4" poster="poster.jpg">
</video>

#️⃣#tip
🆔@IR_javascript

‏Vite: رقیب قدرتمند Webpack در دنیای بسته‌بندی جاوا اسکریپت

اخیراً شاهد رشد چشمگیر Vite بوده‌ایم، به طوری که تعداد دانلودهای آن به نصف تعداد دانلودهای Webpack رسیده است. این موضوع نشان‌دهنده‌ی محبوبیت روزافزون Vite و پتانسیل آن برای تبدیل شدن به رقیبی جدی برای Webpack در دنیای بسته‌بندی جاوا اسکریپت است.

برای درک بهتر این موضوع، بیایید به نموداری که در متن ارائه شده است نگاهی بیندازیم. این نمودار نشان می‌دهد که از بهار سال 2023، سهم Vite در میان پروژه‌های جدید به طور قابل‌توجهی افزایش یافته است. در حالی که Webpack همچنان سهم قابل‌توجهی در بازار دارد، Vite به سرعت در حال تصاحب سهم بازار از آن است.


#️⃣#tool
🆔@IR_javascript

قانون @starting-style برای انیمیشن‌های ورود
از @starting-style برای اعمال استایلی استفاده کنید که مرورگر قبل از باز شدن عنصر در صفحه باید داشته باشد. این حالت «قبل از باز شدن» است (جایی که از آن انیمیشن ورود را شروع می‌کنید).

/* 0. حالت قبل از باز شدن */
/* نقطه شروع برای انتقال */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/* 1. حالت باز بودن */
/* حالتی که عنصر باز است + منطق انتقال */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

#️⃣#tip #css
🆔@IR_javascript