هدف ما این است که شما را با آخرین و جالبترین گرایشهای توسعهی وب به روز نگاه داریم. به همین دلیل ما به صورت ماهانه مجموعهای دستچین شده از تعدادی از بهترین منابعی که با آنها برخورد کردهایم و فکر میکنیم مورد توجه شما باشد، منتشر میکنیم.
Polly.js
این یک کتابخانه جاوا اسکریپت برای ضبط، پخش و اصلاح تعاملات HTTP است. دارای یک API قدرتمند و آسان برای راه اندازی است که به شما اجازه می دهد تا رویدادها را متوقف کنید، از آنها عبور کنید و یا آنها را پیوست کنید. شما همچنین می توانید ضبط را روی دیسک و یا حافظه محلی انجام دهید، و زمان را سریع یا کند کنید.
react-easy-crop
این مولفه React را می توان برای برش تصاویر با چند حرکت ساده استفاده کرد. استفاده از آن واقعا آسان است، و از تعاملات کشیدن (drag) و زوم پشتیبانی میکند. برای استفاده در تلفن همراه سازگار است (mobile friendly) و ابعاد برش را در مقیاس پیکسل و درصد ارائه می دهد. شما می توانید از هر فرمت تصویر نظیر jpeg ،png و gif استفاده کنید.
Cirrus
یک چارچوب کاری CSS برای ایجاد وب سایتهای شگفتانگیز و کاملا واکنشگرا است. همه اجزای مورد نیاز برای ایجاد طرحهای زیبا و تعاملی – دکمهها، فرمها، انیمیشنها، جداول، هدرها، پاورقیها و خیلی بیشتر را داراست. این چارچوب واقعا سبک است – شما میتوانید تنها فایلهایی را که نیاز دارید شامل کنید و کاملا قابل تنظیم است – تمام اجزای سازنده را میتوان با CSS طراحی کرد و در تمام مرورگرهای مدرن کار میکند.
Repaintless
این یک کتابخانه انیمیشن CSS برای ایجاد انیمیشنهای سریع و نرم (smooth) است. استفاده از آن واقعا آسان است و تعداد زیادی انیمیشن از پیش ساخته شده مانند محو شدن در، محو کردن، چرخش، پالس، اسلاید و بسیاری دیگر دارد. انیمیشنها را میتوان به راحتی از طریق متغیرهای scss سفارشی کرد.
SpriteJS
SpriteJS یک مدل شیء رندر ۲D چند سکویی (cross-platform) است که به شما امکان میدهد که اشیا را در بوم (canvas) دستکاری کنید، به همان صورت که اگر عناصر DOM بودند. عملیات رندر میتواند سمت سرور انجام شود، ترسیم با بهرهگیری از حافظه cache هوشمند سریع اجرا میشود، و از ارسال رویداد قابل کنترل پشتیبانی میکند.
Three Dots
سه نقطه یک کتابخانه CSS برای ایجاد انیمیشنهای جالب بارگذاری با ترکیبی از سه نقطه است. طیف گستردهای از انیمیشنها را میتوانید انتخاب کنید که از طریق متغیرهای scss به راحتی سفارشی (رنگ، عرض، ارتفاع، فاصله، و غیره) میشوند.
RModal.js
این یک کتابخانه ساده و سریع جاوا اسکریپت برای پیغامهای modal است. بسیار سبک (فقط ۱٫۲ کیلوبایت) است، هیچگونه وابستگی ندارد و با Bootstrap و Animate.css عالی کار میکند. از ماژول های ES و CommonJS پشتیبانی میکند و سازگار با تمام مرورگرها از جمله +IE9 است.
Web-Maker
وب ساز یک زمین بازی آفلاین برای تجربههای front-end است. یک کنسول داخلی دارد، راهی آسان برای اضافه کردن کتابخانههای JS و CSS و پشتیبانی از پیش پردازندههای HTML، CSS و جاوا اسکریپت را ارائه میدهد. به شما این امکان را میدهد که پروژههای خود را وارد (Import) و یا خارج (Export) نمایید. همچنین میتوانید پروژه خود را در CodePen با یک کلیک به اشتراک بگذارید.
Jest
این یک ابزار است که میتوانید از آن برای تست کد جاوااسکریپت خود استفاده کنید. استفاده از آن واقعا آسان است، نیاز به هیچ پیکربندی ندارد. از تست های موازی برای به حداکثر رساندن عملکرد استفاده میکند. گزارشهای پوشش کد (code coverage) را به صورت داخلی دارد و از TypeScript یا هر زبان کامپایل به جاوااسکریپت (compile-to-JavaScript) پشتیبانی میکند.
BoxIcons
یک مجموعه آیکون عالی به صورت متنباز که شامل بیش از ۴۰۰ آیکون است. با استفاده از کلاسهای سفارشی میتوانید آیکونها را به سبک دلخواه خود درآورید ( تغییر اندازه، حاشیه و انیمیشن، چرخاندن و پشت و رو کردن). طیف وسیعی از آیکونها در این مجموعه وجود دارد و شما احتمالا آنهایی که نیاز دارید را پیدا خواهید کرد.
Odometer
Odometer یک کتابخانه جاوا اسكریپت و CSS است كه انتقال اعداد را به نرمی انجام میدهد. این کتابخانه بسیار سبک و کارآمد است زیرا تمام انیمیشن ها در CSS با transorms کنترل میشوند. از فایرفاکس، سافاری، کروم و +IE8 پشتیبانی می کند و برای مرورگرهای قدیمی دارای بازگشت خودکار (automatic fallback) است.
Gatsby
این یک سازنده سایت مدرن و سریع به صورت ایستا (static) است. از آخرین فن آوریهای وب – React، Webpack، جاوا اسکریپت، و CSS پشتیبانی میکند. پشتیبانی غنی از پلاگینها میکند و اجازه میدهد از تقریبا هر منبعی دادهها را وارد نمایید. Gatsby بر سرعت و عملکرد تمرکز میکند و وبسایتهایی را ایجاد میکند که ساده و آسان برای تقریبا تمام خدمات استفاده میشود.
Anime.js
Anime.js یک کتابخانه انیمیشن کوچک است که با هر ویژگی و ترانزیت CSS و ویژگی های SVG یا DOM کار میکند. انواع مختلفی از سفارشیسازی را ارائه میدهد. به عنوان مثال زنجیره و هماهنگسازی انیمیشنهای متعدد، شروع، مکث و راه اندازی مجدد انیمیشن و خیلی بیشتر.
DataTables
یک پلاگین جی کوئری متنباز برای اضافه کردن ویژگیهای پیشرفته به جداول HTML است. ویژگیهای متعددی مانند صفحهبندی، فیلتر کردن نتایج جستجو، مرتبسازی دادهها در چند ستون و بسیاری موارد دیگر را ارائه میدهد که به کاربر اجازه میدهد اطلاعات بیشتری را از جداول خود دریافت کند. با تلفن همراه سازگار است (mobile-friendly)، طیف گستردهای از توسعهها دارد و از چند زبانی پشتیبانی میکند.
Shave
یک کتابخانه جاوا اسکریپت که متن چند خطی را قطع میکند، بنابراین میتواند در داخل یک عنصر HTML متناسب باشد. رشته اصلی را در یک span
پنهان ذخیره میکند، بنابراین متن شما دست نخورده باقی میماند. بسیار سبک است، در حالت کوچک شده فقط ۱٫۵ کیلوبایت حجم دارد. دارای وابستگی نیست و سازگار با دیگر کتابخانههای جاوا اسکریپت است.
منبع: ۱۵Interesting JavaScript and CSS Libraries for July 2018
ترجمه: سیدمحمدحسین طباطبایی بالا