15 کتابخانه جالب JavaScript و CSS در ژوئيه 2018

همانطور که میدانید JavaScript دارای کتابخانه های بسیاری است در این مقاله می خواهیم 15 تا از جالب ترین کتابخانه های JavaScript و CSS را به شما معرفی کنیم.

POLLY.JS

POLLY.JS یک کتابخانه ی جاوا اسکریپت برای ضبط  ، پخش و تغییر و اصلاح تعاملات HTTP می باشد . POLLY داری یک API ساده و قدرتمند است که به شما امکان intercept ، pass-thorough یا اتچ کردن رویداد ها را می دهد . با استفاده از آن می توانید روی دیسک یا حافظه ی محلی (local storage) ضبط کنید و همچنین میتوانید سرعت زمان را کاهش یا افزایش دهید.

React-easy-crop

از این کامپوننت react میتوانید برای برش عکس ها استفاده کنید . کار با آن ساده می باشد و از قابلیت زوم کردن و drag کردن برخوردار می باشد. این کامپوننت mobile friendly (موبایل فرندلی یعنی سایت مورد نظر در دیوایس هایی مثل گوشی هوشمند به خوبی و با انداره های مناسبی باز شود (واکنشگرا باشد)) می باشد . این کامپوننت اندازه ی برش بصورت پیکسلی و درصدی را برای شما فراهم می کند و می توانید از هر نوع فرمت عکسی استفاده کنید (jpeg ، png ، gif)

Cirrus

یک فریمورک CSS برای ایجاد وبسایت های کامل واکنش گرا میباشد . Cirrus دارای همه ی کامپوننت های مورد نیاز برای ساخت طراحی های زیبا و تعاملی مثل button ها ، فرم ها ، انیمیشن ها ، جدول ها ، فوتر ها و ... می باشد. این فریمورک بسیار سبک است شما می توانید فقط فایل هایی که به آن نیاز دارید را اینکلود کنید همچنین قابلیت سفارشی سازی دارد (customizable) . همه ی کامپوننت ها میتوانند با استفاده از CSS استایل دهی شوند و بر روی همه ی مرورگر های مدرن کار کار کنند

Repaintless

این یک کتابخانه ی انیمیشن css برای ساخت انیمیشن های سریع وساده می باشد . استفاده از آن آسان می باشد و حاوی بسیاری از انیمیشن های آماده مانند fade-in ، fade-out ، rotate ، pulse ، slide و بسیاری دیگر می باشد . این انیمیشن ها با استفاده از متغیر های CSS به سادگی سفارشی (customize) می شوند.

SpriteJS

SpriteJS یک آبجکت مدل رندر دو بعدی کراس پلتفرم (روی هر پلت فرمی اجرا میشود) می باشد که اگر آبجکت ها المان های DOM باشند به شما امکان کار کردن با آن ها را در بوم نقاشی می دهد .SJS میتواند sprite ها در سمت سرور رندر کند و همچنین میتواند طراحی سریع را با کش هوشمند اجرا کند و از امکان رویداد های قابل کنترل پشتیبانی میکند.

Three Dots

یک کتابخانه ی CSS برای ایجاد انیمیشن های جالب لودینگ ساخته شده با سه نقطه . مدل های مختلفی وجود دارد که شما میتوانید از میان ان ها انتخاب کنید ، میتوانید (رنگ ، عرض ، طول ، فضای خالی و ...) آن را به گونه ای که میخواهید تغییر دهید.

RModal.js

یک کتابخانه ی ساده و سریع جاوااسکریپت برای modal dialog ها می باشد .  این کتابخانه بسیار سبک (حجمش فقط 1.2 KB) میباشد و برای استفاده از آن به هیچ چیز دیگری نیاز ندارید و به خوبی با Bootstrap و Animate.css کار میکند. این کتابخانه از ماژول های ES ، CommonJS پشتیبانی میکند و با تمام مرورگرها سازگار است از جمله IE9+

Web-Maker

یک بستری برای کارهای front-end میباشد . دارای محیط کنسول است و یک راه آسان برای اضافه کردن کتاب خانه های JS و CSS را به شما پیشنهاد می دهد و از پیش پردازنده های HTML ، CSS و JavaScript پشتیبانی میکند.

Jest

Jset یک ابزاری است که از آن برای تست کد جاوا اسکریپت استفاده میشود . استفاده از آن بسیار آسان میباشد و به هیچ کانفیگی نیاز ندارد . به منظور کارایی بالا ، تست را بصورت موازی اجرا میکند .jest دارای ویژگی coverage report code است و همچنین از TypeScript یا هر زبان دیگری که به JavaScript کامپایل میشود ، پشتیبانی میکند.

BoxIcons

یک مجموعه آیکون متن باز (open source) عالی که شامل بیش از 400 آیکون است . میتوانید استایل آیکون ها (تغییر سایز ، اضافه کردن حاشیه و انیمیشن ، چرخش و flip) را با استفاده از کلاس های سفارشی تغییردهید. در این مجموعه تعداد زیادی آیکون موجود است و به احتمال زیاد شما میتوانید ایکون مورد نظری را که برای سایت خود میخواهید را پیدا کنید.

Odometer

یک کتابخانه ی CSS و javascript است که میتوان با آن number transitioning ساخت . این کتابخانه بسیار سبک است . از فایرفاکس، سافاری، کروم و IE8+ پشتیبانی می کند و در مرورگر های قدیمی دارای fallback خودکار است.

Gatsby

یک سایت ژنراتور مدرن و استاتیک سریع میباشد . و از آخرین تکنولوژی های وب (React, Webpack, JavaScript, CSS) پشتیبانی میکند . Gatsby تقریبا به شما امکان ایمپورت کردن داده ازهرمنبعی را میدهد . تمرکز Gatsby روی سرعت و کارایی میباشد و همچنین وبسایت هایی را میسازد که آسان هستند و تقریبا هر نوع سرویسی روی آن مستقر میشود.

Anime.js

یک کتابخانه کوچک انیمیشن javascript میباشد که با همه ی ویژگی های CSS و transorm ها و اتریبیوت های SVG یا DOM کار میکند . Anime.js انواع مختلفی از سفارشی سازی را ارائه میدهد مثل زنجیره سازی و هماهنگ سازی چندین انیمیشن،play،pause،ریست کردن انیمیشن ها و بسیاری دیگر.

DataTables

یک پلاگین open-source جی کوئری برای اضافه کردن ویژگی های پیشرفته به جدول های HTML است . این پلاگین ویژگی های مثل صفحه بندی ، فیلتر کردن نتایج جست و جو ها ، مرتب کردن داده ها در چندین ستون و بسیاری دیگر را فراهم میکند. این ویژگی ها باعث میشود که کاربر بیشترین اطلاعات ممکنه را از جدول های شما بدست بیاورد . این پلاگین mobile-friendly میباشد (موبایل فرندلی یعنی سایت مورد نظر در دیوایس هایی مثل گوشی هوشمند به خوبی و با انداره های مناسبی باز شود (واکنشگرا باشد)) و همچنین این پلاگین دارای طیف گسترده ای از extension هاست وقابلیت پشتیبانی از چندین زبان را دارد.

Shave

یک کتابخانه جاوا اسکریپت که متن های چند خطی را قطع می کند ، بنابراین میتواند داخل یک المان HTML مناسب باشد . Shave رشته اصلی را دریک Span هیدن(hidden) ذخیره میکند به طوری که متن شما سالم باقی میماند . این کتابخانه بسیار سبک است و فقط 1.5K حجم دارد و برای کار کردن نیاز به هیچ dependency ندارد و با دیگر کتابخانه های جاوا اسکریپت سازگار می باشد.