Автор статьи, перевод которой мы сегодня публикуем, говорит, что один из способов разумной организации труда разработчика заключается в использовании инструментов, позволяющих достигать большего, прикладывая меньше усилий. Здесь он хочет рассказать о 5 замечательных инструментах, которые позволят любому разработчику повысить производительность своего труда. Вот видео, в котором сделан обзор этих инструментов.
![](https://habrastorage.org/r/w780q1/webt/oy/y1/vw/oyy1vw4u90g1jbslp3zr-qt1m_u.jpeg)
Знаю, что у тех, кто это читает, нет лишнего времени, поэтому тут я лишь кратко опишу предлагаемые вашему вниманию инструменты. Если вам что-нибудь понравится — вы без труда интегрируете это в свой рабочий процесс. Кроме того, хочу отметить, что я никак не связан ни с одним из рассматриваемых тут проектов. Мне просто хочется поделиться со всеми желающими тем, что приносит пользу мне.
![](https://habrastorage.org/getpro/habr/post_images/07c/ec9/089/07cec9089fa64e9305de035dc99d23d5.gif)
Excalidraw
Если вы занимаетесь проектированием архитектуры ПО и при этом рисуете всяческие схемы, тогда вам вполне может понравиться проект Excalidraw. Этот инструмент позволяет заниматься командным созданием разного рода схем в браузере. Мы, в Devias, используем Excalidraw для проведения мозговых штурмов, посвящённых разным вопросам, наподобие поведения пользователей на сайте или архитектуры нашего бэкенда. Как уже было сказано, Excalidraw поддерживает совместную работу. А это, особенно теперь, во время карантина, когда многие работают на удалёнке, особенно полезно. Единственный минус этого проекта, вытекающий из его опенсорсности и бесплатности, заключается в том, что он не поддерживает облачное хранилище данных, что позволило бы, например, сохранять результаты работы в своём аккаунте. Но, честно говоря, это — не особенно большая проблема, так как результаты работы можно сохранять локально, и, при необходимости, загружать их обратно на сайт.
![](https://habrastorage.org/getpro/habr/post_images/17b/96c/775/17b96c775f556b4043aa52fac0e18c60.gif)
Nucleo Icon Transition
Теперь перейдём к более практичным вещам и поговорим о небольшом инструменте, который позволяет генерировать переходы между двумя SVG-иконками. Это — проект Nucleo Icon Transition. Тут можно настраивать эффект перехода (scale или rotate), выбирать тип события, запускающего переход (click или hover). Этот инструмент генерирует единственный SVG-файл, содержащий описания обеих иконок и JavaScript-код, ответственный за выполнение перехода. Суть работы этого средства заключается в том, что оно оснащает иконки классами, с которыми работает скрипт.
Для того чтобы добавить анимированную иконку в свой проект, достаточно загрузить получившийся SVG-файл и добавить его содержимое в свой HTML-код. Вот как может выглядеть содержимое этого файла.
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/52f/502/7fc/52f5027fcc3ddd2d4d15f8038822818b.jpg)
Содержимое автоматически сгенерированного SVG-файла
Вот что у меня получилось.
![](https://habrastorage.org/getpro/habr/post_images/9a4/ece/6e3/9a4ece6e346b23c21780a4c33c0ae8f0.gif)
Автоматически сгенерированная анимированная иконка
Если вы планируете использовать эффект перехода для множества иконок, вы можете оптимизировать код за счёт скрипта, так как везде используется один и тот же скрипт.
![](https://habrastorage.org/getpro/habr/post_images/1e2/af0/0e6/1e2af00e69aac8158fb2b83fbc6c2311.gif)
Type Scale
Если вы, как и я, часто создаёте сайты с нуля, то вам вполне может прийтись по душе проект Type Scale, который может помочь вам в деле подбора шрифтов. Он поддерживает выбор шрифта и настройку его свойств, таких, как размер и коэффициент масштабирования. Результаты настройки шрифта сразу же выводятся на странице с использованием шаблонного текста, содержащего различные элементы. Можно экспортировать CSS-код, содержащий параметры шрифта. Я обычно пользуюсь этим инструментом тогда, когда мне нужны какие-то особые шрифты, и я не хочу тратить слишком много времени на подбор их параметров.
![](https://habrastorage.org/getpro/habr/post_images/2ef/2b9/7e2/2ef2b97e261b1d647bbf346c995366f2.gif)
Roam Research
Мою продуктивность помогает поддерживать постоянное использование списков дел. Для ведения таких списков я использую приложение Roam Research, которое, кроме прочего, позволяет связывать дела. В проекте используется нечто вроде особого языка разметки. Связи между делами позволяют рассматривать списки дел в виде взаимосвязанных сущностей, что помогает, например, добраться до истоков некоей идеи и проанализировать шаги, связанные с её реализацией. На самом деле, то, как работает этот проект, довольно сложно объяснить, а может, я просто не очень хорошо умею выражать подобные идеи. Я начал пользоваться Roam Research всего несколько дней назад, но должен сказать, что мне очень понравилась идея этого проекта. Возможно, это так из-за того, что он подталкивает меня к созданию кратких заметок, выражающих самое важное, а не длинных описаний дел, которые я никогда не читаю. Сейчас Roam Research — это бесплатный проект, что объясняется его новизной. Но я совершенно уверен в том, что всегда будет существовать его бесплатный вариант.
![](https://habrastorage.org/getpro/habr/post_images/e8c/fe4/a25/e8cfe4a255c75d9ffc3994d7895b7beb.gif)
Happy Hues
Этот инструмент предназначен для разработчиков, которые немного занимаются дизайном. Речь идёт о проекте Happy Hues. Это, скорее, не приложение, а ресурс, предназначенный для тех, кто не очень хорош в подборе цветовых палитр. На этом сайте можно найти множество заранее подобранных цветовых комбинаций. Полагаю, тут просто невозможно не найти то, что соответствует вашему стилю. Я всегда держу этот ресурс под рукой, прибегая к нему, например, тогда, когда мне нужно найти хорошую комбинацию цветов, отличающуюся достойным уровнем контраста и проходящую тесты на доступность контента.
Только что я поделился с вами секретным списком инструментов, которые помогают мне продуктивно трудиться. Вполне возможно, что некоторые из них пригодятся и вам. Если вам известны какие-нибудь интересные инструменты, повышающие продуктивность труда веб разработчиков — то делитесь ими в комментах!
![](https://habrastorage.org/r/w1560/webt/a_/bs/aa/a_bsaactpbr8fltzymtkhqbw1d4.png)
![](https://habrastorage.org/webt/oy/y1/vw/oyy1vw4u90g1jbslp3zr-qt1m_u.jpeg)
Предварительные замечания
Знаю, что у тех, кто это читает, нет лишнего времени, поэтому тут я лишь кратко опишу предлагаемые вашему вниманию инструменты. Если вам что-нибудь понравится — вы без труда интегрируете это в свой рабочий процесс. Кроме того, хочу отметить, что я никак не связан ни с одним из рассматриваемых тут проектов. Мне просто хочется поделиться со всеми желающими тем, что приносит пользу мне.
1. Excalidraw
![](https://habrastorage.org/getpro/habr/post_images/07c/ec9/089/07cec9089fa64e9305de035dc99d23d5.gif)
Excalidraw
Если вы занимаетесь проектированием архитектуры ПО и при этом рисуете всяческие схемы, тогда вам вполне может понравиться проект Excalidraw. Этот инструмент позволяет заниматься командным созданием разного рода схем в браузере. Мы, в Devias, используем Excalidraw для проведения мозговых штурмов, посвящённых разным вопросам, наподобие поведения пользователей на сайте или архитектуры нашего бэкенда. Как уже было сказано, Excalidraw поддерживает совместную работу. А это, особенно теперь, во время карантина, когда многие работают на удалёнке, особенно полезно. Единственный минус этого проекта, вытекающий из его опенсорсности и бесплатности, заключается в том, что он не поддерживает облачное хранилище данных, что позволило бы, например, сохранять результаты работы в своём аккаунте. Но, честно говоря, это — не особенно большая проблема, так как результаты работы можно сохранять локально, и, при необходимости, загружать их обратно на сайт.
2. Nucleo Icon Transition
![](https://habrastorage.org/getpro/habr/post_images/17b/96c/775/17b96c775f556b4043aa52fac0e18c60.gif)
Nucleo Icon Transition
Теперь перейдём к более практичным вещам и поговорим о небольшом инструменте, который позволяет генерировать переходы между двумя SVG-иконками. Это — проект Nucleo Icon Transition. Тут можно настраивать эффект перехода (scale или rotate), выбирать тип события, запускающего переход (click или hover). Этот инструмент генерирует единственный SVG-файл, содержащий описания обеих иконок и JavaScript-код, ответственный за выполнение перехода. Суть работы этого средства заключается в том, что оно оснащает иконки классами, с которыми работает скрипт.
Для того чтобы добавить анимированную иконку в свой проект, достаточно загрузить получившийся SVG-файл и добавить его содержимое в свой HTML-код. Вот как может выглядеть содержимое этого файла.
![](https://habrastorage.org/getpro/habr/post_images/52f/502/7fc/52f5027fcc3ddd2d4d15f8038822818b.jpg)
Содержимое автоматически сгенерированного SVG-файла
Вот что у меня получилось.
![](https://habrastorage.org/getpro/habr/post_images/9a4/ece/6e3/9a4ece6e346b23c21780a4c33c0ae8f0.gif)
Автоматически сгенерированная анимированная иконка
Если вы планируете использовать эффект перехода для множества иконок, вы можете оптимизировать код за счёт скрипта, так как везде используется один и тот же скрипт.
3. Type Scale
![](https://habrastorage.org/getpro/habr/post_images/1e2/af0/0e6/1e2af00e69aac8158fb2b83fbc6c2311.gif)
Type Scale
Если вы, как и я, часто создаёте сайты с нуля, то вам вполне может прийтись по душе проект Type Scale, который может помочь вам в деле подбора шрифтов. Он поддерживает выбор шрифта и настройку его свойств, таких, как размер и коэффициент масштабирования. Результаты настройки шрифта сразу же выводятся на странице с использованием шаблонного текста, содержащего различные элементы. Можно экспортировать CSS-код, содержащий параметры шрифта. Я обычно пользуюсь этим инструментом тогда, когда мне нужны какие-то особые шрифты, и я не хочу тратить слишком много времени на подбор их параметров.
4. Roam Research
![](https://habrastorage.org/getpro/habr/post_images/2ef/2b9/7e2/2ef2b97e261b1d647bbf346c995366f2.gif)
Roam Research
Мою продуктивность помогает поддерживать постоянное использование списков дел. Для ведения таких списков я использую приложение Roam Research, которое, кроме прочего, позволяет связывать дела. В проекте используется нечто вроде особого языка разметки. Связи между делами позволяют рассматривать списки дел в виде взаимосвязанных сущностей, что помогает, например, добраться до истоков некоей идеи и проанализировать шаги, связанные с её реализацией. На самом деле, то, как работает этот проект, довольно сложно объяснить, а может, я просто не очень хорошо умею выражать подобные идеи. Я начал пользоваться Roam Research всего несколько дней назад, но должен сказать, что мне очень понравилась идея этого проекта. Возможно, это так из-за того, что он подталкивает меня к созданию кратких заметок, выражающих самое важное, а не длинных описаний дел, которые я никогда не читаю. Сейчас Roam Research — это бесплатный проект, что объясняется его новизной. Но я совершенно уверен в том, что всегда будет существовать его бесплатный вариант.
5. Happy Hues
![](https://habrastorage.org/getpro/habr/post_images/e8c/fe4/a25/e8cfe4a255c75d9ffc3994d7895b7beb.gif)
Happy Hues
Этот инструмент предназначен для разработчиков, которые немного занимаются дизайном. Речь идёт о проекте Happy Hues. Это, скорее, не приложение, а ресурс, предназначенный для тех, кто не очень хорош в подборе цветовых палитр. На этом сайте можно найти множество заранее подобранных цветовых комбинаций. Полагаю, тут просто невозможно не найти то, что соответствует вашему стилю. Я всегда держу этот ресурс под рукой, прибегая к нему, например, тогда, когда мне нужно найти хорошую комбинацию цветов, отличающуюся достойным уровнем контраста и проходящую тесты на доступность контента.
Итоги
Только что я поделился с вами секретным списком инструментов, которые помогают мне продуктивно трудиться. Вполне возможно, что некоторые из них пригодятся и вам. Если вам известны какие-нибудь интересные инструменты, повышающие продуктивность труда веб разработчиков — то делитесь ими в комментах!
Напоминаем, что у нас продолжается конкурс прогнозов, в котором можно выиграть новенький iPhone. Еще есть время ворваться в него, и сделать максимально точный прогноз по злободневным величинам.
![](https://habrastorage.org/webt/a_/bs/aa/a_bsaactpbr8fltzymtkhqbw1d4.png)