- PVSM.RU - https://www.pvsm.ru -

5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика

Автор статьи, перевод которой мы сегодня публикуем, говорит, что один из способов разумной организации труда разработчика заключается в использовании инструментов, позволяющих достигать большего, прикладывая меньше усилий. Здесь он хочет рассказать о 5 замечательных инструментах, которые позволят любому разработчику повысить производительность своего труда. Вот [1] видео, в котором сделан обзор этих инструментов.

5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика - 1 [2]

Предварительные замечания

Знаю, что у тех, кто это читает, нет лишнего времени, поэтому тут я лишь кратко опишу предлагаемые вашему вниманию инструменты. Если вам что-нибудь понравится — вы без труда интегрируете это в свой рабочий процесс. Кроме того, хочу отметить, что я никак не связан ни с одним из рассматриваемых тут проектов. Мне просто хочется поделиться со всеми желающими тем, что приносит пользу мне.

1. Excalidraw

5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика - 2

Excalidraw

Если вы занимаетесь проектированием архитектуры ПО и при этом рисуете всяческие схемы, тогда вам вполне может понравиться проект Excalidraw [3]. Этот инструмент позволяет заниматься командным созданием разного рода схем в браузере. Мы, в Devias [4], используем Excalidraw для проведения мозговых штурмов, посвящённых разным вопросам, наподобие поведения пользователей на сайте или архитектуры нашего бэкенда. Как уже было сказано, Excalidraw поддерживает совместную работу. А это, особенно теперь, во время карантина, когда многие работают на удалёнке, особенно полезно. Единственный минус этого проекта, вытекающий из его опенсорсности и бесплатности, заключается в том, что он не поддерживает облачное хранилище данных, что позволило бы, например, сохранять результаты работы в своём аккаунте. Но, честно говоря, это — не особенно большая проблема, так как результаты работы можно сохранять локально, и, при необходимости, загружать их обратно на сайт.

2. Nucleo Icon Transition

5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика - 3

Nucleo Icon Transition

Теперь перейдём к более практичным вещам и поговорим о небольшом инструменте, который позволяет генерировать переходы между двумя SVG-иконками. Это — проект Nucleo Icon Transition [5]. Тут можно настраивать эффект перехода (scale или rotate), выбирать тип события, запускающего переход (click или hover). Этот инструмент генерирует единственный SVG-файл, содержащий описания обеих иконок и JavaScript-код, ответственный за выполнение перехода. Суть работы этого средства заключается в том, что оно оснащает иконки классами, с которыми работает скрипт.

Для того чтобы добавить анимированную иконку в свой проект, достаточно загрузить получившийся SVG-файл и добавить его содержимое в свой HTML-код. Вот как может выглядеть содержимое этого файла.

5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика - 4

Содержимое автоматически сгенерированного SVG-файла

Вот что у меня получилось.

5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика - 5

Автоматически сгенерированная анимированная иконка

Если вы планируете использовать эффект перехода для множества иконок, вы можете оптимизировать код за счёт скрипта, так как везде используется один и тот же скрипт.

3. Type Scale

5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика - 6

Type Scale

Если вы, как и я, часто создаёте сайты с нуля, то вам вполне может прийтись по душе проект Type Scale [6], который может помочь вам в деле подбора шрифтов. Он поддерживает выбор шрифта и настройку его свойств, таких, как размер и коэффициент масштабирования. Результаты настройки шрифта сразу же выводятся на странице с использованием шаблонного текста, содержащего различные элементы. Можно экспортировать CSS-код, содержащий параметры шрифта. Я обычно пользуюсь этим инструментом тогда, когда мне нужны какие-то особые шрифты, и я не хочу тратить слишком много времени на подбор их параметров.

4. Roam Research

5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика - 7

Roam Research

Мою продуктивность помогает поддерживать постоянное использование списков дел. Для ведения таких списков я использую приложение Roam Research [7], которое, кроме прочего, позволяет связывать дела. В проекте используется нечто вроде особого языка разметки. Связи между делами позволяют рассматривать списки дел в виде взаимосвязанных сущностей, что помогает, например, добраться до истоков некоей идеи и проанализировать шаги, связанные с её реализацией. На самом деле, то, как работает этот проект, довольно сложно объяснить, а может, я просто не очень хорошо умею выражать подобные идеи. Я начал пользоваться Roam Research всего несколько дней назад, но должен сказать, что мне очень понравилась идея этого проекта. Возможно, это так из-за того, что он подталкивает меня к созданию кратких заметок, выражающих самое важное, а не длинных описаний дел, которые я никогда не читаю. Сейчас Roam Research — это бесплатный проект, что объясняется его новизной. Но я совершенно уверен в том, что всегда будет существовать его бесплатный вариант.

5. Happy Hues

5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика - 8

Happy Hues

Этот инструмент предназначен для разработчиков, которые немного занимаются дизайном. Речь идёт о проекте Happy Hues [8]. Это, скорее, не приложение, а ресурс, предназначенный для тех, кто не очень хорош в подборе цветовых палитр. На этом сайте можно найти множество заранее подобранных цветовых комбинаций. Полагаю, тут просто невозможно не найти то, что соответствует вашему стилю. Я всегда держу этот ресурс под рукой, прибегая к нему, например, тогда, когда мне нужно найти хорошую комбинацию цветов, отличающуюся достойным уровнем контраста и проходящую тесты на доступность контента.

Итоги

Только что я поделился с вами секретным списком инструментов, которые помогают мне продуктивно трудиться. Вполне возможно, что некоторые из них пригодятся и вам. Если вам известны какие-нибудь интересные инструменты, повышающие продуктивность труда веб разработчиков — то делитесь ими в комментах!

Напоминаем, что у нас продолжается конкурс прогнозов [9], в котором можно выиграть новенький iPhone. Еще есть время ворваться в него, и сделать максимально точный прогноз по злободневным величинам.

5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика - 9 [10]

Автор: ru_vds

Источник [11]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/razrabotka/352848

Ссылки в тексте:

[1] Вот: https://youtu.be/L-wt5TAoDjw

[2] Image: https://habr.com/ru/company/ruvds/blog/500294/

[3] Excalidraw: https://excalidraw.com/

[4] Devias: https://devias.io/

[5] Nucleo Icon Transition: https://nucleoapp.com/tool/icon-transition

[6] Type Scale: https://type-scale.com

[7] Roam Research: https://roamresearch.com

[8] Happy Hues: https://www.happyhues.co

[9] конкурс прогнозов: https://habr.com/ru/company/ruvds/blog/500508/

[10] Image: https://ruvds.com/ru-rub/?utm_source=habr&utm_medium=perevod&utm_campaign=5-besplatnyh-instrumentov-dlya-razrabotchika#order

[11] Источник: https://habr.com/ru/post/500294/?utm_source=habrahabr&utm_medium=rss&utm_campaign=500294