11 рекомендуемых инструментов для Frontend-разработчиков

Список моих любимых инструментов интерфейса.

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

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

1. Текстовый редактор: возвышенный текст

Разработчики интерфейсов тратят значительное количество времени на кодирование, которое обычно выполняется в текстовом редакторе или IDE. Если вы используете текстовый редактор, вам необходимо убедиться, что он повышает вашу продуктивность, выполняя за вас повторяющиеся и рутинные задачи. Некоторые из этих задач включают автозаполнение, выделение текста, расширенные операции поиска и замены, а также преобразование между табуляциями и пробелами.

Популярным выбором для текстового редактора является Sublime Text, кроссплатформенный текстовый редактор на основе графического интерфейса. Sublime Text позволяет плавно переходить между файлами и проектами, позволяя вам сосредоточиться на коде перед вами. Несмотря на то, что он обладает значительной долей функциональности, популярность Sublime Text резко возросла из-за его расширяемости. Вот лучшие пакеты Sublime Text для разработчика полного стека.

Одноразовая лицензия для Sublime Text стоит 80 долларов, хотя доступна полнофункциональная бессрочная пробная версия.

Хорошей альтернативой Sublime Text является Atom, бесплатный текстовый редактор с открытым исходным кодом, созданный GitHub. Он предоставляет широкий спектр функций, которые вы получите с Sublime Text, с дополнительной интеграцией с Git и GitHub Desktop. Кроме того, Atom предоставляет функцию телетайпа, которая позволяет сотрудникам совместно работать над одним и тем же документом.

Хотя Sublime Text и Atom - отличный выбор для работы в вашей локальной системе, вы можете почувствовать необходимость работать с текстовым редактором на базе терминала без графического интерфейса. Вам может потребоваться использовать такой инструмент, когда вы удаленно входите на сервер и обновляете файлы на сервере напрямую. Популярные текстовые редакторы на базе терминала - VIM и Emacs.

2. Совместное использование компонентов: бит

Bit (Github) позволяет легко собирать компоненты из любой кодовой базы и делиться ими с коллекцией (модульной библиотекой) в bit.dev.

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

Вы и ваша команда можете просматривать свою коллекцию, используя инструменты поиска Bit и игровую площадку, npm install общий компонент, как и любой другой пакет, или bit import его, чтобы изменить его в своей локальной среде разработки (и даже отправить измененную версию обратно в общую коллекцию. ).

Это отличный способ постепенно создавать модульную библиотеку компонентов. Всякий раз, когда вы создаете повторно используемый компонент, которым стоит поделиться - просто поместите его в общую коллекцию Bit.

Используйте его для улучшения сотрудничества с вашей командой, максимального повторного использования кода, создания более масштабируемого и поддерживаемого кода и сохранения согласованного пользовательского интерфейса.

Bit поддерживает React, React with TypeScript, Vue, Angular и многие другие.

3. Отладка в реальном времени: Chrome DevTools.

Когда вы тестируете свой конечный продукт в браузере, инструменты отладки в реальном времени помогают вам изменять веб-страницу в реальном времени. Вы можете управлять DOM, редактировать CSS и запускать собственный JavaScript для отладки кода на различных уровнях.

Chrome DevTools, который входит в состав встроенного Google Chrome и других браузеров на основе Chromium, помогает выполнять отладку на лету. Google Chrome составляет почти две трети рынка, и браузеры на основе Chromium также составляют значительную долю. Все эти браузеры оснащены версией Chrome DevTools, что делает его одним из наиболее доступных инструментов для отладки в реальном времени.

Хотя Chrome DevTools существует с момента запуска Google Chrome, особого упоминания в этой категории следует уделить Firebug, который был запущен в 2006 году. Поддержка Firebug прекращена, но Инструменты разработчика Firefox были разработаны на основе Firebug. код.

4. Графический интерфейс для управления версиями исходного кода: GitHub Desktop

Независимо от вашего опыта, обычно рекомендуется использовать систему контроля версий для управления исходным кодом. Если вы работаете в команде, контроль версий помогает управлять кодом между коллегами. В последние десять лет наблюдается рост распределенных систем контроля версий, и двумя наиболее популярными вариантами являются Git и Mercurial. Хотя их легко установить на ваш локальный компьютер, в этом посте мы поговорим о двух инструментах с графическим интерфейсом.

GitHub Desktop - это графический интерфейс пользователя GitHub для управления репозиториями Git. Он поддерживает только операционные системы Windows и Mac. GitHub Desktop предоставляет вам графическую альтернативу обычно используемым архитектурам Git. Если вы используете Atom, он довольно хорошо интегрируется с GitHub Desktop. GitHub Desktop легко интегрируется с вашими репозиториями GitHub, что позволяет вам управлять ими, не переходя на веб-сайт. Инструмент с графическим интерфейсом особенно полезен при проверке кода и навигации по истории проекта.

Если вы используете Mercurial вместо Git, вы можете попробовать SourceTree by BitBucket. SourceTree также поддерживает только операционные системы Windows и Mac. Если вы используете операционную систему на базе Linux, лучше всего попробовать GitKraken, хотя его бесплатная версия имеет ограниченные возможности.

5. Инструменты визуализации данных: D3.js

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

D3.js - популярная библиотека визуализации данных на JavaScript. Он позволяет вам считывать данные из нескольких источников, манипулировать ими в соответствии с вашими потребностями и быстро создавать визуальные эффекты. При необходимости он обеспечивает большую гибкость при работе с векторной графикой. Расширенные функции в D3.js также позволяют добавлять в диаграммы анимацию и интерактивность. Ему почти десять лет, и в нем сформировалось довольно большое сообщество. В то время как более ранние версии D3.js были трудны для понимания новичками, новые версии более удобны для пользователя.

D3.js предоставляет широкий спектр функций на выбор. Если вам нужен более простой интерфейс для создания диаграмм, попробуйте ямочку. Dimple - это оболочка, разработанная над D3.js, чтобы вы могли быстрее создавать диаграммы.

6. Площадка для кода: Codepen

Хотя показывать завершенный проект - это хорошая идея, иногда вы можете почувствовать необходимость поделиться фрагментом кода интерфейса с полностью интерактивным предварительным просмотром коллеге для обратной связи. В такой ситуации площадка для кода представляет собой облачную IDE, которая позволяет писать и предварительно просматривать фрагменты в HTML, CSS и JavaScript. Вы можете поделиться этими фрагментами со своими коллегами или встроить их в сообщения. Они отлично подходят для написания документации, руководств и руководств.

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

Альтернатива CodePen, JSFiddle - одна из старейших игровых площадок для кода, которая послужила источником вдохновения для ряда последующих инструментов.

7. Вдохновение дизайнера: Adobe Color

Прежде чем создавать эти потрясающие дизайны на этом блокноте, вы можете поискать вдохновение. Adobe Color (ранее Kuler) - это приложение цветовых тем, которое позволяет создавать, просматривать и обмениваться цветовыми темами, которые затем можно синхронизировать с другими приложениями Adobe. Использование цвета - важная часть дизайна. Если вы хотите найти цвета, которые хорошо сочетаются друг с другом, вам обязательно стоит попробовать этот инструмент.

Dribbble - это сообщество дизайнеров, в котором они продвигают свои работы и встречаются с единомышленниками. Dribbble позволяет выборочно делиться своими проектами (кадрами), делиться своей работой и получать отзывы.

8. Инструменты доступности: JAWS

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

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

WAVE - это инструмент, который оценивает статус веб-доступности любого веб-сайта, размещенного в Интернете. Он суммирует свои выводы по трем категориям - ошибки (красный), предупреждения (желтый) и другие.

Некоторые пользователи, склонные к эпилепсии, могут быть чувствительны к мерцанию содержимого на экране. Photosensitive Epileptic Analysis Tool (PEAT) - это инструмент в Windows, который позволяет вам проверить, есть ли на вашем веб-сайте какие-либо подобные уязвимости.

Вот полный контрольный список для соблюдения правил доступности в Интернете.

9. Инструменты мониторинга скорости загрузки сайта: PageSpeed ​​Insights

Скорость сайта - важный фактор, определяющий ваш рейтинг в поиске. Помимо SEO-оптимизации, скорость сайта также играет важную роль в удержании пользователей во время загрузки страницы. PageSpeed ​​Insights - это собственный инструмент Google для мониторинга скорости сайта. Его можно использовать бесплатно, и вам просто нужно ввести URL-адрес страницы, чтобы выполнить тест. Вы можете выбрать, как тест будет работать на мобильном устройстве или компьютере, но вы не можете изменить место проведения теста. Этот инструмент предоставляет вам определенные действия, которые помогут вам улучшить скорость вашего сайта.

Хотя PageSpeed ​​Insights - отличный инструмент для оценки скорости вашего сайта, вам следует попробовать WebPageTest, бесплатный инструмент с открытым исходным кодом для проверки скорости вашего сайта. Это позволяет вам изменять устройство, браузер, тестовое местоположение и регулирование соединения. Более того, вы также можете написать подробные тесты в пакете WebPageTest.

10. Коммуникационные инструменты: слабина

В прошлом электронная почта часто была единственным средством общения для разработчиков. Такие задачи, как проверка кода и обмен файлами по электронной почте, потенциально может стать трудным для отслеживания. Slack - это облачная платформа для обмена мгновенными сообщениями, которая интегрируется с рядом соответствующих сервисов, чтобы обеспечить общение на одном носителе. Например, вы можете интегрировать Slack с GitHub, чтобы держать вас в курсе последних версий репозитория. Вы также можете интегрировать его со своим трекером кода, чтобы предупреждать конкретного члена команды в случае сообщения о новой ошибке. Вы даже можете создать и настроить своего собственного чат-бота, чтобы он отвечал на пользовательские команды!

После интеграции с Atlassian Hipchat Slack укрепил свои позиции лидера рынка. Если вы ищете альтернативу Slack, вы можете попробовать Yammer от Microsoft, который хорошо интегрируется с приложениями в Microsoft Suite.

11. Инструменты кроссбраузерного тестирования

Кроссбраузерное тестирование - это процесс оценки вашего веб-приложения на широком спектре устройств и браузеров. Вероятно, вам следует выбрать комбинации браузера и устройства для проверки использования вашей пользовательской статистики. Лучшим инструментом для выполнения такого теста является BrowserStack, который предоставляет вам доступ к большому количеству реальных устройств для тестирования вашего веб-приложения.

BrowserStack использует Selenium Server для автоматизации ваших тестов на реальных устройствах, хранящихся в удаленных местах. При развертывании вашего приложения вы можете запустить ряд тестов на заранее определенном списке устройств. Когда тесты закончены, вы получаете доступ к скриншотам и видео тестов, выполненных через вашу личную панель.

Цены на BrowserStack основаны на использовании, хотя вам предоставляется бесплатная пробная версия. Это может быть дорого для небольшого разработчика, и в этом случае им следует попробовать Selenium, инструмент для автоматизации кроссбраузерности через ваш браузер. Обратной стороной использования только Selenium является то, что вы ограничены вашим собственным устройством для тестирования.

Заключительные мысли о лучших инструментах для Frontend-разработчиков

В этом посте мы рассмотрели различные инструменты, которые помогут вам сделать ваш рабочий процесс более эффективным. Вы согласны с нашим списком? Какие еще инструменты вы используете в своем цикле разработки? Дайте нам знать в комментариях ниже.

Учить больше