Инструменты и подходы для ускорения рабочего процесса веб-разработчика

Опубликовано: 2020-12-17

Веб-разработка объединяет в себе огромное количество стеков, инструментов, языков программирования и многого другого. Некоторые из инструментов / рабочих процессов здесь будут работать в одних случаях, другие - в других. Чтобы лучше подойти к этому, считайте, что этот пост написан с точки зрения разработчика переднего плана WordPress, хотя инструменты довольно широки и могут использоваться во многих случаях.

1 - tmux

Одно из самых больших изменений в моем рабочем процессе произошло, когда я установил tmux на моем компьютере (macOS, но, конечно, он работает и для Linux). Возможно, я не использую его в полной мере, но он отлично справляется со своей задачей и позволяет мне мгновенно переключаться между проектами, что экономит много времени.

У tmux есть длинная страница «Начало работы», написанная в репозитории GitHub проекта, чтобы проверить ее. Он также работает с клавиатурой прямо из коробки с поддержкой мыши, которую можно включить. tmux использует файлы конфигурации, которые могут использоваться в разных системах для мгновенной настройки.

Так как это изменило мой рабочий процесс?

  • tmux дает вам простой способ разделить экраны и перемещаться по проекту с помощью всего двух нажатий клавиш. Таким образом, вы можете запустить «глоток» в одном представлении, команды для выполнения в другом, SSH на сервер в третьем и некоторую статистику в четвертом.
  • Он дает вам окна для каждого проекта, похожие на «вкладки». Здесь вы можете переключаться между разными проектами с помощью двух нажатий клавиш. У меня все время открыто около 20+ проектов во вкладках, и когда мне нужно работать над новым проектом, я просто переключаю его туда, и gulp уже запущен. Я нахожусь в правильных каталогах и могу начать работу менее чем за 2 секунды.
  • Сохраняет все настройки включенными все время. Необязательно делать это каждый раз, когда вы начинаете работу, это всегда есть. Если ваша машина выключится и вы загрузите ее снова, вы можете просто «воскресить» (с помощью простого плагина) стандартные настройки, и примерно через 5 секунд он снова заработает. Забавно, что для этого требуется 100% использование I7-9900K.
  • Каждая панель в окне - это отдельный экземпляр. Таким образом, вы можете легко запускать разные версии Node для каждой панели.
tmux снимок экрана

Источник

2 - Альфред (или Альтернатива)

Alfred - это «приложение для повышения производительности» для Mac, а также его аналоги для Windows и Linux. Вот некоторые из вещей, которые делает Альфред:

  • Это дает вам быстрый доступ к открытым программам, просто набрав несколько букв
  • Быстро переходить в каталоги
  • Просматривайте, пока не найдете то, что вам нужно, прямо во всплывающем окне
  • Открывайте файлы разными программами
  • Ищите в Интернете или своих интегрированных программах и многое другое.

С его powerpack есть много других интеграций «Workflow», которые также могут автоматизировать работу.

домашняя страница альфреда

Он также работает как калькулятор быстрого доступа, управляет фрагментами в ОС (нет необходимости даже обращаться к нему, он просто автоматически расширяет их), сохраняет историю буфера обмена (спасатель), интегрируется с терминалом и т. Д. Все об этом вы можете найти на сайте приложения.

Как я его использую:

  • Во-первых, конечно, чтобы открывать приложения. Я не щелкаю курсором по иконкам, я просто набираю буквы и все готово.
  • Используйте его как калькулятор при написании CSS (часто бывает со значениями EM).
  • История буфера обмена - я иногда складываю 5-6 вещей в буфер обмена, а затем вставляю их в редактор кода, где это необходимо. Или вернитесь на несколько дней назад, чтобы найти письмо, фрагмент и т. Д. Или даже небольшую функцию, которая что-то делает в одном проекте и помогает в другом. Просмотр кода занимает 2-3 секунды вместо 10+ минут.
  • Переходите к рабочим каталогам при выполнении проектных работ или непосредственно к файлам XD без использования средства поиска. Снова занимает 2-3 секунды против минуты или около того в искателе.
  • Фрагменты - я подготовил хороший фрагмент «комментария» для Asana со скриншотами результатов, местом для добавления ссылки на фиксацию, сообщением для следующих разработчиков, статусом, находится ли он на стадии постановки или нет, и так далее. Это единообразное сообщение во всех комментариях, которым команда легко следует. Чтобы набрать и развернуть фрагмент, требуется менее 2 секунд.

3 - Терминальные инструменты / плагины

Oh My Zsh - Сделайте терминал полезным - ZSH - это сокровище. Есть 270+ плагинов на выбор. Он использует простой файл конфигурации, переход которого со старой установки на новую занял всего несколько минут. tmux делает то же самое, поэтому вся настройка dev заняла минуты. С таким огромным количеством плагинов вы обязательно найдете что-то полезное для своего рабочего процесса.

Один из наиболее часто используемых плагинов в ZSH, который я использую, - это «Z», который изучает пути, которые вы используете для доступа к вещам. Затем он доставит вас туда, куда вы хотите, используя всего несколько ключевых символов.

Пример: $z te перейдет в /folder/path/inner/more/content/testing - ярлык туда, куда вы заходили ранее. Делает переключение между каталогами безболезненным.

о мой зш

exa - Более красивый LS-вывод. Вы можете найти больше на их сайте. Короче говоря, он также обеспечивает быстрый и удобный вывод файлов и каталогов. Опять же - красиво.

exa домашняя страница

ripgrep - Сверхбыстрый поиск. Когда вам нужно найти тысячи файлов с тысячами строк кода, не стоит слишком долго ждать. Ripgrep здесь, чтобы спасти вас. И, конечно же, он имеет массу других полезных функций и значимых флагов для работы. Он также следует за файлами .gitignore, чтобы результаты были значимыми.

Источник

git-open - небольшой инструмент Пола Айриша на Github, который делает то, что он говорит - открывает репозиторий git. Что вы скажете такого? Вы помните точный URL-адрес того проекта, над которым вы работали впервые за 6 месяцев? Сколько времени нужно, чтобы перейти к нему? Эта команда откроет его для вас напрямую. И еще - он также переместит вас в нужную ветку.

Ваш CLI! В моем случае наша работа вращается вокруг WordPress. К счастью, в качестве интерфейса командной строки, через который вы можете работать с установкой WP. Простая настройка нового сайта требует таких базовых команд, как mkdir (создание папки), git clone (клонирование репозитория), загрузка ядра wp, создание wp db, импорт wp db (все из WP-CLI). Набрав все это и быстро настроив, через 1 минуту у вас будет запущена новая установка.

Не забудьте дважды проверить, есть ли другие похожие интерфейсы командной строки, которые будут работать на вас с инструментами, которые вы используете!

Источник

4 - Плагины VS Code

Мой выбор для редактора кода / IDE - VS Code. Раньше это было великолепно, но с более мощной машиной теперь я могу правильно использовать VS-код без трех кадров в секунду, которые я получал раньше при прокрутке большого документа.

Код VS

В приведенном ниже списке я не буду использовать супер-известные расширения, такие как ESLint, GitLense или пакеты тем / значков, поскольку они хорошо освещены практически в любой статье, которую вы найдете.

  • Автоматически закрывающий тег - чтобы вам не приходилось каждый раз писать закрывающие теги. Бесполезен при чистом HTML с Эмметом, но помогает, когда нужно быстро отредактировать
  • Автоматическое переименование тега - также очень полезно при редактировании. Он напрямую изменит закрывающие / открывающие теги, когда вы редактируете только один из них.
  • Проверка орфографии кода - теперь вам не нужно смущаться в PR, если вы написали что-то с опечаткой. Или просто используйте его, чтобы все было красиво и красиво для проектов с открытым исходным кодом.
  • Дублирование действий - очень полезно при создании новых файлов из существующих. Это команда для запуска с помощью Cmd + P. Отлично работает с созданием новых файлов sass / js во фронтенд-работе.
  • Jumpy - отличный инструмент! Просто нажмите на определенный вами ярлык, и рядом с каждым словом появятся два небольших буквенных поля. Введите их, и ваш курсор переместится к нему. Быстрый способ навигации по файлу без использования мыши.

И профессиональный совет / напоминание - вы можете предварительно просматривать изображения в коде VS. Когда вы разрабатываете пользовательский интерфейс и следуете изображению от дизайнера, вы можете просто перетащить его в область просмотра и посмотреть на него сбоку.

Коротко:

Там полно удивительных инструментов и инструментов. Каждый раз, когда вы замечаете какую-то повторяющуюся работу, которую делаете, или задаетесь вопросом: «А не может ли быть более простого способа сделать это», просто выполните поиск! Скорее всего, действительно есть более быстрый способ. Если вы сделаете это несколько раз в течение года, у вас получится хороший плотный рабочий процесс, который позволит вам выполнять работу в очень быстром темпе.

Если возможно, также найдите некоторые «безопасные меры» - настройте линтинг, автоматизируйте настройку сборки, создайте «стартовые шаблоны» для работы, возможно, даже напишите небольшой интерфейс командной строки для себя.