Moveable

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

🔗https://github.com/daybrush/moveable?tab=readme-ov-file
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

Atropos.js

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

🔗https://atroposjs.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

Vidbg.js

کتابخانه Vidbg.js برای ایجاد پس‌زمینه‌های ویدیویی تمام‌صفحه طراحی شده است. این ابزار مشکلات مقیاس‌بندی واکنش‌گرا را حل می‌کند و دارای مکانیزم تصویر جایگزین (fallback) برای دستگاه‌های موبایل است، جایی که اغلب پخش خودکار ویدیو محدود شده است.

var instance = new vidbg(
  ".vidbg-box",
  {
    mp4: "http://example.com/video.mp4", // URL or relative path to MP4 video
    webm: "path/to/video.webm", // URL or relative path to webm video
    poster: "path/to/fallback.jpg", // URL or relative path to fallback image
    overlay: false, // Boolean to display the overlay or not
    overlayColor: "#000", // The overlay color as a HEX
    overlayAlpha: 0.3, // The overlay alpha. Think of this as the last integer in RGBA()
  },
  {
    // Attributes
  }
);

🔗https://github.com/blakewilson/vidbg?tab=readme-ov-file
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

Dragscroll

اسکرول محتوا با موس اغلب محدود به استفاده از نوارهای اسکرول استاندارد است. کتابخانه dragscroll رفتار اسکرول با کشیدن (drag) را به رابط‌های دسکتاپ اضافه می‌کند، رفتاری که کاربران در دستگاه‌های لمسی به آن عادت دارند.

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

🔗http://asvd.github.io/dragscroll/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

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

🔗cornerstonejs.org
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏**Mediabunny** یک کتابخانهٔ جاوااسکریپت برای خواندن، نوشتن و تبدیل فایل‌های رسانه‌ای مانند MP4، WebM و MP3 است، مستقیماً در مرورگر اجرا می‌شود. هدف آن ارائهٔ یک مجموعهٔ کامل برای عملیات رسانه‌ای با کارایی بالا روی وب است.

این کتابخانه از صفر و با TypeScript خالص نوشته شده، هیچ وابستگی‌ای ندارد، بسیار سریع است و از قابلیت tree-shaking پشتیبانی کامل می‌کند؛ به این معنا که فقط کدهایی که استفاده می‌کنید وارد پروژه می‌شوند. می‌توان آن را شبیه FFmpeg تصور کرد، اما به‌طور کامل برای وب از پایه ساخته شده است.


🔗https://mediabunny.dev/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‍‏**Peaks.js نسخهٔ چهار: کامپوننت رابط کاربری برای تعامل با نمودار موج صدا**

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


🔗https://codeberg.org/chrisn/peaks.js
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

خسته شدید هر بار از کنسول راحت خود بیرون بیایید و به caniuse.com بروید تا ببینید کدام مرورگرها از subgrid پشتیبانی می‌کنند؟

معرفی می‌کنم caniuse-cli

مثال استفاده:

$ caniuse "viewport units"
$ caniuse @property

برای zsh هم قابلیت autocomplete دارد.


🔗https://www.npmjs.com/package/@bramus/caniuse-cli
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

LeaderLine

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

🔗https://anseki.github.io/leader-line/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

بستهٔ @unpic/vue قابلیت‌های قدرتمند و مدرن بهینه‌سازی تصویر را با حداقل پیکربندی به برنامه‌های Vue شما می‌آورد. با پشتیبانی درونی از بارگذاری تنبل، واکنش‌گرایی و انتخاب خودکار فرمت، هم در زمان توسعه صرفه‌جویی می‌شود و هم کارایی کلی به‌طور چشمگیری بهبود پیدا می‌کند.

+پشتیبانی از تصاویر واکنش‌گرا با استفاده از srcset
+بارگذاری تنبل به‌صورت پیش‌فرض
+انتخاب خودکار فرمت (برای نمونه WebP یا AVIF)
+سازگاری با سرویس‌هایی مانند Cloudinary، Imgix، Vercel، Sanity و بسیاری دیگر

🔗https://unpic.pics/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript