⚫️ Gridstack.js

یک کتابخانه‌ی جاوا اسکریپت برای ایجاد چیدمان‌های شبکه‌ای پویا و قابل تنظیم با قابلیت کشیدن و رها کردن (drag-and-drop). با استفاده از آن، می‌توان به‌راحتی عناصر صفحه را سازمان‌دهی کرده و آن‌ها را به موقعیت‌های دلخواه منتقل کرد. Gridstack.js برای طراحی پنل‌های تعاملی، داشبوردها و سایر رابط‌های کاربری انعطاف‌پذیر و پویا ایده‌آل است.

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

Gremlins.js
ابزاری برای آزمایش رابط‌های کاربری است که اقدامات تصادفی کاربر، مانند کلیک‌ها، سوایپ‌ها و ورود متن را شبیه‌سازی می‌کند. این ابزار با تقلید از رفتار نامنظم کاربران، به شناسایی باگ‌های غیرمنتظره و مشکلات عملکردی در برنامه‌های وب کمک می‌کند.

🔗https://marmelab.com/blog/2020/06/02/gremlins-2.html
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

noUiSlider

یک اسلایدر سبک و در دسترس برای جاوا اسکریپت، با پشتیبانی از چند لمسی (Multi-touch) و کنترل از طریق صفحه‌کلید. این اسلایدر به‌طور کامل با استفاده از GPU انیمیشن‌سازی شده است، که حتی در دستگاه‌های قدیمی نیز عملکردی روان و سریع ارائه می‌دهد. بدون وابستگی به کتابخانه‌های خارجی بوده و برای طراحی‌های ریسپانسیو کاملاً ایده‌آل است.

🔗https://github.com/leongersen/noUiSlider
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

ایجاد اپلیکیشن‌های وب دسترس‌پذیر با Vue

یک کتابخانه متن‌باز شامل کامپوننت‌های خام و بدون استایل که همراه با نمونه‌های متنوع و کاربردهای آماده ارائه می‌شود و می‌توان آن را مستقیماً در پروژه‌های شما ادغام کرد.

🔗https://reka-ui.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

معرفی Motion برای Vue

‏Motion یک کتابخانه‌ی محبوب و قدرتمند برای انیمیشن است که بیشتر با React شناخته می‌شود، اما اکنون نسخه‌ی Vue آن نیز عرضه شده و کاملاً مجهز به تمام ویژگی‌ها است.

🔗https://motion.dev/docs/vue
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

بیشتر خطاهای نرم‌افزاری ناشی از فرضیاتی هستند که متوجه نبودیم آن‌ها را پذیرفته‌ایم.

من اغلب نیاز دارم به‌سرعت نسخهٔ ماژول‌های نصب‌شده در پوشهٔ node_modules را بررسی کنم. راهکارهای فعلی مانند اجرای دستور npm list هم کند هستند و هم خروجی پراکنده و غیرمتمرکزی ارائه می‌دهند. بررسی نسخهٔ ماژول در فایل package.json آن ماژول نیز وقت‌گیر است و اطلاعاتی دربارهٔ سایر نسخه‌های همان ماژول در پروژه نمی‌دهد.

ابزار qnm این مشکل را حل کرده است. این ابزار، اطلاعاتی سریع و دقیق دربارهٔ ماژول‌های نصب‌شده ارائه می‌دهد. qnm از هر دو ابزار npm و yarn پشتیبانی می‌کند و به شما امکان می‌دهد نسخه‌های ماژول‌های مورد نظر خود را به‌راحتی و با سرعت شناسایی کنید.

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏php-node یک ماژول بومی برای Node است که امکان اجرای برنامه‌های PHP را در محیط Node فراهم می‌کند.

چرا باید چنین کاری کرد؟
برای مهاجرت دادن برنامه‌های قدیمی، ساخت اپلیکیشن‌های ترکیبی PHP و JavaScript، یا حتی اپلیکیشن‌های Node‌ای که به هر دلیلی نیاز دارند بخش‌هایی از منطق خود را از طریق PHP اجرا کنند—مثلاً در ارتباط با وردپرس، همان‌طور که در این مطلب مشاهده می‌کنیم.php-node یک ماژول بومی برای Node است که امکان اجرای برنامه‌های PHP را در محیط Node فراهم می‌کند.

چرا باید چنین کاری کرد؟
برای مهاجرت دادن برنامه‌های قدیمی، ساخت اپلیکیشن‌های ترکیبی PHP و JavaScript، یا حتی اپلیکیشن‌های Node‌ای که به هر دلیلی نیاز دارند بخش‌هایی از منطق خود را از طریق PHP اجرا کنند—مثلاً در ارتباط با وردپرس، همان‌طور که در این مطلب مشاهده می‌کنیم.

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

Slideout.js

یک کتابخانهٔ سبک برای ایجاد منوهای کشویی جانبی است. این ابزار از حرکات لمسی (سوايپ) پشتیبانی می‌کند، به هیچ‌گونه چارچوب خارجی وابسته نیست و برای طراحی رابط‌های کاربری واکنش‌گرا در دستگاه‌های موبایل و دسکتاپ کاملاً مناسب است.

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

‏**PDFSlick نسخهٔ سه: مشاهده و تعامل با اسناد PDF در اپلیکیشن‌های JavaScript**

یک نمایشگر کامل و قدرتمند PDF برای اپلیکیشن‌های React، Solid، Svelte و JavaScript خالص است. این ابزار که بر پایهٔ PDF.js توسعه یافته، مجموعه‌ای گسترده از قابلیت‌ها را ارائه می‌دهد—از مشاهدهٔ سادهٔ فایل‌های PDF گرفته تا کار با اسناد متعدد و حجیم همراه با امکان افزودن یادداشت.

نسخهٔ سه این ابزار به PDF.js نسخهٔ پنج ارتقا یافته و اکنون از پروفایل‌های ICC پشتیبانی می‌کند، عملکرد بهتری در نمایش فرمت JPEG 2000 دارد و رندر صفحات بزرگ نیز به‌طور چشمگیری بهبود یافته است.

دمو:
https://pdfslick.dev/examples/pdf-viewer-app




#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏HelloCSV: یک راهکار آماده برای وارد کردن فایل‌های CSV در اپلیکیشن‌های JavaScript


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

مستندات پایه در دسترس هستند:
https://hellocsv.mintlify.app/common/get-started/introduction


#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

NProgress

‌‌‏ یک کتابخانهٔ بسیار سبک و مینیمال برای افزودن نوار نمایش پیشرفت (progress bar) در بالای صفحهٔ وب است. این ابزار به شما امکان می‌دهد تا روند بارگذاری یا اجرای عملیات را به‌صورت بصری و جذاب به کاربران نمایش دهید.

🔗https://rstacruz.github.io/nprogress/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

Lingui.js

یک کتابخانه برای بین‌المللی‌سازی (i18n) در برنامه‌های جاوااسکریپت است. این کتابخانه از استاندارد ICU MessageFormat برای مدیریت قواعد پیچیده‌ی استفاده می‌کند. همچنین ابزارهایی برای استخراج پیام‌ها از درون کد در اختیار توسعه‌دهنده قرار می‌دهد

این ابزار انتخاب مناسبی برای پروژه‌هایی است که به یک سیستم بومی‌سازی (localization) انعطاف‌پذیر نیاز دارند.

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

Dockview
Dockview یک کتابخانهٔ جاوااسکریپت است که برای ساخت رابط‌های کاربری پنلی پیشرفته، مشابه آن‌چه در محیط‌های توسعهٔ یکپارچه (IDE) مدرن دیده می‌شود، طراحی شده است. این کتابخانه از پنل‌هایی که قابل جابجایی**، **چسباندن (Docking) و تغییر اندازه هستند پشتیبانی می‌کند.

گزینه‌ای مناسب برای توسعهٔ وب‌اپلیکیشن‌هایی است که نیاز به یک فضای کاری منعطف و قابل تنظیم دارند.


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

‏✌️ Driver.js: تورها، نکات برجسته، راهنمایی‌های زمینه‌ای و موارد بیشتر

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


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

در این‌جا مجموعه‌ای از برترین آیکون‌های متحرک آورده شده است که هر طراح رابط کاربری و تجربه کاربری (UI/UX) باید برای پروژه‌های طراحی آتی خود مد نظر قرار دهد:

یک. LottieFiles
ارائه‌دهنده مجموعه‌ای حرفه‌ای از آیکون‌های متحرک مبتنی بر فرمت Lottie
🔗 [lottiefiles.com/animation/icon](https://lottiefiles.com/animation/icon)

دو. Lordicon
کتابخانه‌ای غنی از آیکون‌های تعاملی و انیمیشنی با قابلیت سفارشی‌سازی
🔗 [lordicon.com](https://lordicon.com)

سه. IconScout
منبعی گسترده برای آیکون‌های متحرک، Lottie، SVG و سایر فرمت‌ها
🔗 [iconscout.com/icons/animation](https://iconscout.com/icons/animation)

چهار. Icons8
مجموعه‌ای متنوع از آیکون‌های متحرک، استاتیک و چندفرمت برای استفاده در انواع پروژه‌ها
🔗 [icons8.com/animated-icons](https://icons8.com/animated-icons)

پنج. UseAnimations
آیکون‌هایی با طراحی مینیمال و انیمیشن‌های سبک برای رابط‌های مدرن
🔗 [useanimations.com](https://useanimations.com)

شش. Flaticon
یکی از بزرگ‌ترین منابع جهانی برای آیکون‌های گرافیکی، اکنون با پشتیبانی از آیکون‌های متحرک
🔗 [flaticon.com/animated-icons](https://flaticon.com/animated-icons)

این ابزارها می‌توانند به طرز چشمگیری جذابیت بصری و تعامل‌پذیری طراحی‌های شما را افزایش دهند.


#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏👀 npq: نصب ایمن بسته‌ها از طریق بررسی پیش از نصب
[مشاهده در GitHub](https://github.com/lirantal/npq)

‏ابزار npq نسبت به npm چند مرحله‌ی اضافی برای اطمینان از سلامت و امنیت بسته‌ها انجام می‌دهد. این ابزار:

* با پایگاه داده‌ی آسیب‌پذیری‌های امنیتی Snyk مشورت می‌کند،
* سن بسته (مدت‌زمانی که از انتشار آن گذشته)،
* تعداد دفعات دانلود،
* و مستندات آن را بررسی می‌کند،

و تلاش می‌کند تصویری دقیق‌تر و شفاف‌تر از آنچه واقعاً در حال نصب هستید ارائه دهد.

این رویکرد باعث افزایش امنیت در زنجیره‌ی تأمین نرم‌افزار شده و به توسعه‌دهندگان کمک می‌کند با اطمینان بیشتری بسته‌ها را انتخاب و نصب کنند.


#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

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