Как стать автором
Обновить
2658.05
RUVDS.com
VDS/VPS-хостинг. Скидка 15% по коду HABR15

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

Время на прочтение 4 мин
Количество просмотров 34K
Автор оригинала: Manea Adrian
Автор статьи, перевод которой мы сегодня публикуем, говорит, что один из способов разумной организации труда разработчика заключается в использовании инструментов, позволяющих достигать большего, прикладывая меньше усилий. Здесь он хочет рассказать о 5 замечательных инструментах, которые позволят любому разработчику повысить производительность своего труда. Вот видео, в котором сделан обзор этих инструментов.



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


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

1. Excalidraw



Excalidraw

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

2. Nucleo Icon Transition



Nucleo Icon Transition

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

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


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

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


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

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

3. Type Scale



Type Scale

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

4. Roam Research



Roam Research

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

5. Happy Hues



Happy Hues

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

Итоги


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

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

Теги:
Хабы:
+32
Комментарии 17
Комментарии Комментарии 17

Публикации

Информация

Сайт
ruvds.com
Дата регистрации
Дата основания
Численность
11–30 человек
Местоположение
Россия
Представитель
ruvds