5 безкоштовних інструментів, що полегшують роботу веб-розробника
03.06.20. Час прочитання - 5 хв
Один зі способів розумної організації праці розробника полягає в використанні інструментів, що дозволяють досягати більшого, докладаючи менших зусиль. Тут ми розповідаємо про 5 чудових інструментів, які дозволять Вам підвищити продуктивність своєї праці.
Попередні зауваження
Часу не буває забагато, тому тут ми коротко опишемо найкращі інструменти. Якщо Вам щось з цього списку сподобається, Ви без проблем можете інтегрувати це у свій робочий процес.
1. Excalidraw
Якщо Ви займаєтесь проєктуванням архітектури ПЗ і при цьому малюєте всілякі схеми, тоді Вам мав би сподобатись проєкт Excalidraw. Цей інструмент дозволяє займатися командним створенням різного роду схем в браузері. Його можна використовувати для проведення мозкових штурмів, присвячених різним питанням, на зразок поведінки користувачів на сайті або архітектури бекенду. Excalidraw підтримує спільну роботу. А під час карантину, коли багато хто працює віддалено, це особливо корисно. Єдиний мінус цього проєкту випливає з його безкоштовності та полягає в тому, що він не підтримує хмарне сховище даних, що дозволило б зберігати результати роботи у своєму обліковому записі. Але, чесно кажучи, це — не така вже й велика проблема, оскільки результати роботи можна зберігати локально, і, при необхідності, завантажувати їх назад на сайт.
2. Nucleo Icon Transition
Тепер перейдемо до більш практичних речей і поговоримо про інструмент, який дозволяє генерувати переходи між двома SVG-іконками. Йдеться про Nucleo Icon Transition. Тут можна налаштовувати ефект переходу (scale або rotate), вибирати тип події, що запускає перехід (click або hover). Цей інструмент генерує єдиний SVG-файл, який містить описи обох іконок і JavaScript-код, відповідальний за виконання переходу. Суть роботи цього засобу полягає в тому, що воно оснащує іконки класами, з якими працює скрипт.
Для того щоб додати анімовану іконку у свій проєкт, достатньо просто завантажити SVG-файл і додати його вміст у свій HTML-код. Ось як може виглядати вміст цього файлу.
І ось що має вийти👇🏻 .
Якщо Ви плануєте використовувати ефект переходу для безлічі іконок, то можете оптимізувати код шляхом скрипту, оскільки він всюди використовується однаковий.
3. Type Scale
Якщо Ви часто створюєте сайти з нуля, то Вам припаде до душі проєкт Type Scale, який допоможе у підборі шрифтів. Він підтримує вибір шрифту і налаштування його властивостей, таких, як розмір і коефіцієнт масштабування. Результати настройки шрифту відразу ж виводяться на сторінці з використанням шаблонного тексту, що містить різні елементи. Можна експортувати CSS-код, що містить параметри шрифту.
4. Roam Research
Допомагає покращити продуктивність розробника постійне використання списків справ. Для їх ведення Ви можете використовувати додаток Roam Research, який дозволяє пов'язувати справи. У ньому використовується щось на зразок особливої мови розмітки. Зв'язки між справами дозволяють розглядати списки справ у вигляді взаємопов'язаних сутностей, що допомагає дістатися до джерела якоїсь ідеї та проаналізувати кроки, пов'язані з її реалізацією. Насправді, те, як працює цей проєкт, досить складно пояснити. Зараз Roam Research безкоштовний, що пояснюється його новизною.
5. Happy Hues
Інструмент Happy Hues призначений для розробників, які трохи займаються дизайном. Це, скорше ресурс, а не додаток, і призначений для тих, хто не дуже добре знається в підборі кольорової палітри. На цьому сайті можна знайти безліч заздалегідь підібраних колірних комбінацій. Тут просто неможливо не знайти те, що відповідає Вашому стилю.
Підсумки
Ми поділились з Вами секретним списком інструментів, які допомагають розробникам продуктивно працювати. Цілком можливо, що деякі з них стануть в пригоді й Вам. Якщо Вам відомі ще якісь цікаві інструменти, що будуть корисні для веб-розробників, діліться ними в коментарях під статтею!