پانزده کتابخانه‌ی JAVASCRIPT و CSS جذاب برای خرداد ماه ۱۳۹۷

پانزده کتابخانه‌ی JAVASCRIPT و CSS جذاب برای خرداد ماه ۱۳۹۷

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


LayerJS

LayerJS

این یک چارچوب کاری ساده و متن‌باز برای ایجاد الگوهای UI همچون منوها، اسلایدرها، Lightbox ها و غیره است. در حالت کوچک و فشرده شده تنها ۳۰ کیلوبایت حجم دارد. هیچگونه وابستگی ندارد و کاملا واکنشگرا است. علاوه بر این‌ها، این کتابخانه از directional touch و touchpad gestures برای فعال کردن گذارها و انتقال‌ها پشتیبانی می‌کند.


Wired Elements

Wired Elements

با استفاده از این کتابخانه شما می‌توانید برخی از اجزای پایه‌ای UI را به شکلی درست کنید که شبیه به طراحی با دست به نظر برسد. تمام اجزا به صورت تصادفی ایجاد می‌شوند، پس به این معناست که دو نمونه از یک اِلِمان نمی‌توانند دقیقا یکسان باشند.


Embetty

Embetty

Embetty این امکان را به شما می‌دهد که محتوای راه دور همچون توئیت‌ها و ویدئوها را نمایش دهید، بدون آنکه حریم خصوصی شما نادیده گرفته شود. برای توییت‌ها از تگ embetty-tweet و برای ویدئوها از تگ embetty-video استفاده کنید. در حال حاضر سه نوع از ویدئو شامل facebook، vimeo و youtube را پشتیبانی می‌کند، که باید ویژگی type را به تگ خود اضافه نمایید.


PaperCSS

PaperCSS

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


Signale

Signale

Signale یک لاگ‌کننده‌ی کنسول کاملا قابل تنظیم است که برای نمایش گزارش وضعیت، اهداف و سایر پیغام‌ها کاربرد دارد. برخی از ویژگی‌های برجسته‌ی آن عبارتند از:

  • ۱۶ out-of-the-box loggers
  • Hackable to the core
  • Clean and beautiful output
  • Integrated timers
  • Custom pluggable loggers
  • Filename, date and timestamp support
  • Scoped loggers and timers
  • Configurable writable streams
  • Simple and minimal syntax
  • Globally configurable through package.json
  • Overridable configuration per file and logger

Hybrids

Hybrids

یک کتابخانه‌ی ساده و با کاربری آسان برای ایجاد اجزای وب است. از اشیاء ساده با توصیفگرهای ویژگی و توابع صرف برای تعریف المان‌های شخصی استفاده می‌کند. علاوه بر این، Hybrids از Hot Module Replacement (تغییر، افزودن و حذف کردن ماژول‌های یک برنامه که در حال اجراست بدون آنکه نیاز به به روز رسانی کامل صفحه باشد) و همچنین تغییر المان‌های شخصی که به صورت مداوم به روز می‌شوند، پشتیبانی می‌کند، بدون آنکه لازم باشد صفحه را تازه‌سازی کنید.


Smooth UI

Smooth UI

این یک کتابخانه‌ی متن‌باز است که با React و Styled Components ساخته شده است. این کتابخانه تجربه و دسترسی‌پذیری توسعه‌دهنده را اولویت‌بندی می‌کند و راهی آسان برای طراحی وب‌سایت‌ها و برنامه‌های زیبا ارائه می‌کند. می‌توان آن را توسعه داد و یا با قالب‌های دلخواه شخصی‌سازی کرد.


Curtains.jS

Curtains.jS

یک کتابخانه WebGL برای متحرک کردن تصاویر و ویدئوهاست. این کتابخانه المان‌های HTML که شامل تصاویر و ویدئوها هستند را به بافت‌های سه بعدی (۳D) از WebGL تبدیل می‌کند و این امکان را فراهم می‌کند که آنها را با استفاده از shaders متحرک کنید. استفاده از آن آسان است اما باید دانش خوبی از HTML، CSS و JavaScript داشته باشید.


X-Chart

X-Chart

X-Chart یک سیستم مصورسازی داده‌ها با قابلیت تغییر اندازه و drag کردن است. به شما امکان می‌دهد که نمودارهایی واکنشگرا و زیبا ایجاد نمایید. تعداد زیادی از انواع نمودارهای مختلف دارد که می‌توانید از آن‌ها انتخاب نمایید. از جمله  bar chart, line chart, pie chart, doughnut chart و خیلی انواع دیگر.


Math.js

Math.js

یک کتابخانه‌ی ریاضی گسترده برای JavaScript و Node.js است. دارای تجزیه‌کننده (parser) انعطاف‌پذیر عبارات است. مجموعه‌ای بزرگ از توابع و ثابت‌ها را به صورت پیش‌ساخته دارد. از انواع داده‌های مختلف از قبیل اعداد مختلط، اعداد کسری، واحدها، ماتریس‌ها و غیره پشتیبانی می‌کند.


Kepler.gl

Kepler.gl

Kepler.gl یک برنامه تحت وبِ قدرتمندِ متن‌باز است که می‌تواند مجموعه داده‌های جغرافیای در مقیاس بزرگ (large-scale) را به صورت بصری نمایش دهد. به شما امکان می‌دهد که مجموعه داده‌ها را با drag و drop اضافه کنید، فیلترها و مقیاس ها را اضافه کنید. برای ارائه (render) موثر و بهینه‌ی مجموعه داده‌های بزرگ از WebGL استفاده می‌کند. بر مبنای React و Redux ساخته شده است و به راحتی می‌توانید آن را در برنامه‌های نقشه‌برداری خود جاسازی کنید.


Jest

Jest

این یک ابزار شگفت‌انگیز برای تست کدهای JavaScript شماست که هیچ تنظیماتی نیاز ندارد. اطلاعات پوشش کد (code coverage) از کل پروژه را جمع‌آوری می‌کند و پیغام‌های کنسول بافر می‌شوند و همراه با نتایج تست چاپ می‌شوند. برای رسیدن به حداکثر بازدهی، تست‌ها را به صورت موازی اجرا می‌کند.


Box-shadows.css

Box-shadows.css

این کتابخانه یک راه ساده و سریع برای اضافه کردن سایه به المان‌های وب‌سایت شما ارائه می‌کند. برای جدول‌ها، محتوای homepage ها، هدایت‌گرها و سایر بلاک‌ها بسیار مناسب است. حتی اگر می‌خواهید طراحی جذاب‌تری داشته باشید، افکت‌های تغییر سایه و hover را اضافه کنید.


Choices.js

Choices.js

با Choices.js شما می‌توانید فرم فیلدهایی درست کنید که خیلی خوب به نظر برسند. بهبودهای زیادی را روی المان‌های input پیش‌فرض ارائه می‌کند. از جمله آن‌ها می‌توان به فیلدهای چند مقداری، فیلدهای لینک شده و باکس‌های انتخاب بهتر اشاره کرد. این کتابخانه واقعا سبک است و در حالت فشرده تنها ۱۸ کیلوبایت حجم دارد. هیچگونه وابستگی ندارد و API تمیز و شفافی دارد.


ContentTools

ContentTools

ContentTools یک کتابخانه قدرتمند JavaScript است که می‌تواند هر صفحه HTML را به یک ویرایشگر WYSIWYG تبدیل کند. یک مستند API کامل دارد که با مثال‌های جزئی و راهنمایی‌های گام به گام برای راه‌اندازی اولیه به شما کمک می‌کند. رایگان و متن‌باز است. از مرورگرهای +IE 9 و Chrome و Firefox پشتیبانی می‌کند.


منبع: ۱۵Interesting JavaScript and CSS Libraries for June 2018
ترجمه: سیدمحمدحسین طباطبایی بالا

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *