company_banner

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

Автор оригинала: 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. Еще есть время ворваться в него, и сделать максимально точный прогноз по злободневным величинам.

RUVDS.com
RUVDS – хостинг VDS/VPS серверов

Комментарии 17

    0
    Хорошие инструменты, особенно про подбор цветовой палитры. Однако, что действительно стоило бы оптимизировать, так это использование огромных гифок в таких статьях, а то даже проскроллить до конца сложно.
      +2
      Excalidraw

      Есть еще замечательный github.com/jgraph/drawio
        0
        И еще более замечательный Miro miro.com
          0
          Похоже, что у Miro не хватает для полной замечательности self-hosted, как у draw.io (или я не нашел). Ну и opensource, конечно.
          Хотя в любом случае в закладки, спасибо!
            0

            Что-то Miro для меня выглядит как песочница для коллективного набрасывания идей, но точно не как инструмент для рисования диаграмм. До этого момента даже мысли не было о том что drawio и miro вообще могут стоять рядом в каком-то ряду.

              0
              Не понимаю чего именно вам не хватает для того, чтобы рисовать диаграммы?
                0

                Да даже мысли такой не возникало, так что не знаю) Miro нас заставляют пользоваться, для коллективного взаимодействия. В возможности не углублялся, только тыкал тот интерфейс что на виду. Теперь попробую при случае посмотреть повнимательнее.

          0
          Вполне возможно, что некоторые из них пригодятся и вам


          Мне бы пригодился инструмент, позволяющий создавать тесты
          Google Формы не подходят — слишком примитивно.
          (iSpring QuizMaker -слишком дорого)

          Буду вам благодарен, если вы подскажите решение, не обязательно бесплатное.
          Спасибо!
            0
            SurveyMonkey? Typeform? Яндекс.Взгляд?)
              0
              SurveyMonkey? Typeform? Яндекс.Взгляд?)


              Яндекс сразу отпадает, по независящим от меня причинам.
              Остальное, при беглом просмотре рекламных материалов — просто усовершенствованный Гугл Форм.
              Что, собственно, нужно:

              • Одиночный выбор.
              • Множественный выбор
              • Соответствие
              • Порядок
              • Ввод числа
              • Пропуски
              • Вложенные ответы
              • Активная область


              Результаты — скрыть правильные ответы, результат — на почту.

                0
                сделай, на обычном html и css делов то
              0
              Мудл?
                +1
                Мудл?


                О нет, только не Мудл :)
                0
                Посмотрите LimeSurvey. Выглядит не слишком модно, но умеет довольно много. Можно и self-hosted. Не смотрел современные версии, но раньше точно было на yii1, так что можно допилить под себя.
                0
                Roam Research закрыл регистрацию -есть только вэйтинг лист
                  0

                  Для быстрого рисования диаграмм лично мне очень понравился yUML

                    0
                    photopea.com должен быть обязательно упомянут, имхо.
                    Эдакий фотошоп курильщика, но он буквально «без регистрации и смс», просто спасение для верстальщика.

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое