مواردی که در ادامه این مطلب مشاهده خواهید کرد، گروهی از ابزارهایی خواهد بود که شما به عنوان یک طراح یا توسعه دهنده می توانید در پروژه بعدی‌تان از آن ها استفاده نمایید. این گروه از ابزارها برطبق هیچ دسته بندی یا عبارتی مانند «۱۰ مورد برتر» عرضه نمی‌شوند، این موارد تنها برای افرادی است که می خواهند یک چیز جدید را امتحان نمایند. امیدوارم که از شناسایی این ابزارها لذت ببرید، بیایید شروع کنیم.
1. Inspect
Inspect اپلیکیشنی است که فایل‌های پروژه طراحی شما و ابزارهای‌تان را با همدیگر همگام سازی می کند. این ابزار به شما این قابلیت را می دهد که به سادگی فایل های طراحی شده با Sketch، Inspect و InVision را باهمدیگر نگه داری کنید و به سادگی تنها یک کلیک آن‌ها را با همدیگر همگام نمایید.
Inspect مانند یک پل برای پر کردن خلاء بین توسعه دهنده و طراح عمل می کند. این ابزار درحالی که شما طراحی می کنید روی کدها کار می‌کند، اندازه‌گیری ها، رنگ‌ها و دیگر المان‌ها را فراهم می‌کند و همراه با یک سیستم پیام رسان شما را از آخرین اطلاعات و یادداشت‌ها مطلع می‌نماید. میتوانید برای آشنایی کلی با این سیستم، این ویدیو را مشاهده کنید.
برای کار با این برنامه شما نیاز به یکسری موارد دیگر دارید. اول از همه شما باید Sketch را نصب کنید و بعد از آن نوبت به نصب Craft می رسد. Craft یک پلاگین است که به شما اجازه می‌دهد با داده های واقعی که در ذهن دارید طراحی کنید و دو سیستم Sketch و InVision را به عنوان دو مثال با همدیگر همگام نمایید و فایل‌های‌تان را با این دو سیستم به اشتراک بگذارید.
2. Archetype
Archetype یک ابزار طراحی تایپوگرافی دیجیتال آسان است. این سیستم کاملا با ابزارهایی مانند گوگل فونت کار می کند و به صورت زنده رویکردهای مختلفی مانند سیستم شبکه‌بندی و ماژول‌های مقیاس پذیر را در مرورگرتان نشان می‌دهد.
تمام استایل‌ها با یک سبک ساده درست شده اند و همچنین از کدهای توسعه پذیر بهره می برند. برای آشنایی کلی با این سیستم می توانید این ویدیو را مشاهده نمایید.
تغییرات و بروزرسانی ها در این سیستم سریع هستند و به آسانی می توانید با استفاده از حالت خروجی گرفتن در CSS و Sketch آن‌ها را به اشتراک بگذارید. در کنار این موارد شما قادر خواهید بود که فونت مورد نظر خود را که در طراحی استفاده کرده‌اید دانلود نمایید. می توانید پروژه ها را در اکانت گوگل خود ذخیره کنید و در نهایت هر وقتی که دوست داشتید روی آن‌ها کار کنید.
3. Probot
اگر از کنترل نسخه استفاده می کنید، ممکن است که در تیم‌تان نیز روی پروژه‌های متن باز یا مرور کدها کار کرده باشید، پس Probot برای شما مانند یک فرشته خواهد بود. Probot مجموعه ای از اپلیکیشن‌های جامعه محور است که به شما امکان خودکار سازی و بهبود روند کاری در گیت‌هاب را می‌دهد.
با استفاده از این ابزار می توانید تمام اپلیکیشن های متن باز را پیدا کنید و یا اینکه خودتان یکی از آن‌ها را بسازید. برخی از این اپلیکیشن‌ها قاعدتا نسخه پایدار هستند. برای اینکه بتوانید مشکلات دائمی و درخواست‌های تلنبار شده روی پروژه را حذف کنید و یاددآوری مسائل و مشکلات را همراه با رویداد برای اعضای تیم قرار دهید، می توانید از سیستم خودکار سازی Probot استفاده کنید.
روی چیزی که می خواهید انجام دهید تمرکز کنید. یک API درست و بی مشکل شما را در پنهان کردن جزئیاتی که شما به آن ها اهمیتی نمی‌دهید در گیت‌هاب و نودجی‌اس کمک می کند.
آیا تا به حال با یک فایل PSD برخورد کرده‌اید که دوست داشته باشید آن را به Sketch تبدیل کنید؟ خب شما خوش شانس هستید. Avocode به شما ابزاری را معرفی کرده که می تواند بدون هیچ هزینه‌ای از آن استفاده نمایید. تنها کاری که باید بکنید، آدرس را پیدا کنید و آن را آپلود نمایید. در این لینک می توانید نقشه راه و لیستی از ویژگی ها برای پشتیبانی از پروسه تبدیل کردن را مشاهده نمایید.
همچنین در نظر داشته باشید که فوتوشاپ و Sketch دو برنامه کاملا مجزا از همدیگر هستند. این برنامه تنها می تواند المان‌هایی را تبدیل کند که در هر دو برنامه وجود دارند. این برنامه نمی تواند ویژگی‌هایی که در فوتوشاپ وجود دارد اما شامل Sketch نیست را تبدیل نماید.
5. Cloudinary Website Speed Test
بهینه سازی تصاویر می تواند به صورت بسیار مؤثری سرعت بارگذاری برگه ها را افزایش دهد، جدای از این نتیجه چنین کاری باعث نگه داری کاربر و جلب رضایت آن‌هاست. Website Speed Test یک ابزار آنالیز تصاویر است که می تواند هر وبسایتی با یک آدرس زنده را در آن اسکن نماید. این ابزار همچنین اطلاعاتی راجع بهینه سازی بهتر را به شما می دهد که به عنوان مثال می تواند به اینکه چگونه اندازه تصاویر، فرمت، کیفیت و انکودر آن‌ها را بهینه سازی تغییر دهید، اشاراتی داشته باشد.
وقتی نتیجه این بررسی تمام شود شما می توانید آن را به اشتراک بگذارید، هر تصویری که بعد از بررسی به شما نمایش داده می شود، نسخه فشرده شده آن نیز آماده است که شما می توانید آن‌ها را دانلود نمایید.
برای پیدا کردن اطلاع بیشتر در رابطه با این موضوع می توانید به این صفحه مراجعه کنید. همچنین این سرویس یک CDN نیز به شما پیشنهاد می کند که می توانید از آن بهره بگیرید.
6. Animista
Animista جایی است برای اینکه بتوانید با مجموعه‌ای از انیمیشن‌های ایجاد شده با CSS کار کنید. می توانید هر کدام را که می خواهید استفاده نمایید و کدهای آن را برای پروژه خود دانلود کنید.
اگر هر زمانی چیزی را پیدا کردید که به نظرتان برای کارتان مفید است روی آیکون قلب کلیک کنید، در نهایت می توانید تمام این مجموعه دوست داشتنی‌تان را با کلیک روی دکمه funnel مشاهده نمایید. این ابزار به شما گزینه‌های سفارشی و از پیش تعیین شده‌ای را می دهد که می توانید با آن‌ها براساس سلیقه‌تان به خوبی کار کنید. کدها می توانند کوچک شوند و در Autoprefixer را قرار گیرند تا شما از پشتیبانی کامل آن‌ها توسط مرورگر‌های مختلف مطمئن شوید.
Hero Patterns مجموعه‌ای از الگو‌های پس زمینه تکرار شدنی SVG هستند که می توانید از آن‌ها در پروژه‌های‌تان استفاده نمایید. هر الگوی پس زمینه‌ای که شما انتخاب می کنید به یک پس زمینه تکرار شدنی تبدیل می شود و براساس base64 اینکودینگ می شود. در نهایت می توانید هر طور که دوست دارید در فایل سی‌اس‌اس‌تان از آن‌ها بهره بگیرید. در حالتی که مشغول طراحی هستید می توانید رنگ پس زمینه، قلم، شفافیت و دیگر المان ها را نیز تعیین نمایید.
در حال حاضر این وبسایت بیش از ۸۵ الگوی پس زمینه دارد که می توانید از آن‌ها استفاده نمایید. یک نمونه برای استفاده از SVG را می توانید در زیر مشاهده کنید:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill-rule="evenodd"><g fill="#000"><path opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z" /><path d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z" /></g></g></svg>
همچنین بجای استفاده از قطعه کد بالا می توانید SVG بدون استایل را دانلود نمایید. این حالت برای افرادی که نمی خواهند از گزینه base64 استفاده کنند و یا اینکه بعدها SVG مورد نظرشان را تغییر دهند بسیار مناسب است.
8. Cushion
Cushion یک فضای آرام را برای افرادی که فریلنسر هستند و تجارت‌شان را خودشان می‌گردانند ایجاد کرده است. این سرویس کمک می کند تا بینش بهتری ایجاد شود و یک حالت آرامش به هر نقشی که فریلنسر‌ها دارند می‌آورد.
این سیستم یک حالت trial چهارده روزه را به شما پیشنهاد می کند که بعد از آن اگر به سرویس علاقه پیدا کردید می توانید با پرداخت ماهانه ۵ دلار به کارتان ادمه دهید. این اپلیکیشن وقتی که به موارد پایه‌ای خودتان نیاز داشتید به شما کمک می کند. مواردی مانند:
- زمان‌بندی پروژه
- ردیابی هزینه‌ها
- خروجی صفحه گسترده
- صورتحساب
- ردیابی صورتحساب‌ها
- مشاهده ورودی‌های ماهانه
- و…
Cushion در حال حاضر اپلیکیشن موبایل ندارد اما در حال تهیه آن است و در ضمن قصد دارد تا اپلیکیشن مبتنی بر وب خود را بهتر و بهینه تر نماید. در این سرویس نمی توانید حساب بانکی خود را مستقیما ادغام نمایید. اما می توانید از طریق وارد کردن یک فایل csv از خروجی حساب بانکی‌تان این کار را انجام دهید. یکبار آن را امتحان کنید، چیزی برای از دست دادن وجود ندارد!
9. Launchy
Launchy یک پنجره Modal دسترسی‌پذیر است. این مورد حاوی جی‌کوئری نیست و حجمی تنها به میزان 27.7 کیلوبایت دارد.
چند ویژگی مهم در مورد این اپلیکیشن:
- متناسب با تغییرات کیبورد
- قابلیت بسته شدن با استفاده از کلید esc
- قابلیت بسته شدن با کلیک در خارج از پنجره
- اضافه کردن استایل خود به دکمه بستن
- بردرهای ترانسپارنت برای پوسته کنتراست بالا
- امکان قرار دادن اختیاری هدر برای پنجره‌ها -برای افزودن توضیح-
Launchy همچنین دارای کلاس های سی‌اس‌اس بسیاری است که به شما برای استایل دهی سفارشی کمک می کند. می توانید نگاهی به فایل style.scss بیاندازید و کلاس‌ها را مشاهده نمایید. این پکیج همچنین با استفاده از npm و دستور npm i launchy-modal-window قابل دسترس است.
10. Formcore
Formcore یک پروژه متن باز است که به عنوان مجموعه‌ای از فرم‌های اعتبارسنجی و سبک شناخته شده است. این پروژه حاوی یکسری الگو‌ها مانند نمایش و پنهان سازی فرم پسورد، شمارش کاراکتر، ورودی‌های کارت اعتباری، اعتبارسنجی، ورودی‌های چندخطه و موارد دیگر است.
اگر در پروژه بعدی‌تان با فرم‌ها سر و کار دارید پس مطمئنا این مورد می تواند برای تان بسیار مناسب باشد.
در پایان
خب حالا که به آخر لیست‌مان رسیدیم به چه چیزی فکر می کنید؟ آیا هیچ‌کدام این موارد برای اینکه بتوانند توسط شما اجرا شوند، جرقه‌ای ایجاد کردند؟ خب به نظر شما کدام مورد از همه جالب تر بود؟ به نظرم که خیلی خوب است اگر بتوانید در قسمت نظرات به ما این موضوع را بگویید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید