Основные инструменты для веб-разработки – подборка от практика

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

Локальный сервер

По сути, это начало начал веб-разработки. Говоря простыми словами, локальный сервер позволяет запускать и тестировать веб-сайты на своём компьютере, без необходимости покупать для этих целей хостинг.

Я использую WampServer – бесплатную сборку, которая включает собственно веб-сервер Apache, а также интерпретатор PHP и phpMyAdmin — веб-интерфейс для управления базами данных MySQL и MariaDB. На локальном сервере я устанавливаю и тестирую различные CMS («движки» сайтов): OpenCart, Joomla и другие. Но главным образом использую WampServer для создания сайтов на базе WordPress. Пробую различные варианты интернет-магазина, сайта-визитки или блога. Устанавливаю различные темы и плагины, осуществляю «натяжку» вёрстки на WordPress. А когда сайт готов, протестирован и минимально наполнен, переношу его к реальному хостинг-провайдеру. Например, мой сайт, на котором вы сейчас находитесь, также был поначалу развёрнут на локальном сервере.

Редакторы кода

В наше время вряд ли найдутся «смельчаки», готовые писать код в Блокноте Windows. Так как на написание кода уходит львиная доля времени – а, стало быть, необходим инструмент, по максимуму облегчающий эту задачу. Редакторов кода существует великое множество (Sublime Text, Atom и другие), а по поводу какой из них лучше ведутся нескончаемые «холивары». Я же, в своё время, остановил свой выбор на бесплатном редакторе Visual Studio Code (VS Code) и пока что не жалею.

Эта программа уже «из коробки» имеет множество функций, упрощающих работу: например, подсветку синтаксиса, а главное – плагин Emmet. Если вы только начинаете свой путь в веб-разработке, то обязательно познакомьтесь с Emmet, изучите его сокращения – и, уверяю вас, код будет писаться в разы быстрее!

Также к VS Code можно подключить множество других расширений, которые делают работу над проектами удобнее. Сейчас не буду заострять на них внимание, ибо их невозможно перечислить все в рамках этого небольшого обзора. Но скажу лишь об одном, особо важном – Live Server. Это плагин позволяет посмотреть результаты вашей вёрстки в браузере.

И, конечно же, нельзя не упомянуть интеграцию редактора с Git. Многие операции с этой системой контроля версий можно делать прямо в Visual Studio Code, поэтому разберётся даже новичок. Важно лишь предварительно установить Git на компьютер.

Резюме: VS Code – основной редактор, который я использую в разработке, когда нужно одновременно, в одном окне работать со всеми файлами проекта: HTML, CSS, скриптами JavaScript, и просматривать сайт в браузере. Ну а если нужно быстро изучить или отредактировать какой-нибудь файл (например, wp-config.php, настройки которого крайне важны для любого сайта WordPress), тогда я обращаюсь к старому доброму Notepad++.

Chrome DevTools (Инструменты разработчика)

Практически в каждом популярном браузере есть так называемые Инструменты разработчика (DevTools) – но в браузере Chrome они самые лучшие. Вызываются они с помощью «горячей» клавиши F12 (либо посредством сочетания Ctrl+Shift+I), а используются практически для всего, что нужно в базовой фронтенд-разработке.

Вкладка «Элементы» — основная, с которой чаще всего работают верстальщики. Здесь вы можете не только просматривать исходный код страницы, но и изменять его в реальном времени. Например, на скриншоте ниже видно, как я всего в два клика изменил акцентный цвет, то есть цвет кнопок. А все изменения, которые вы произведёте на странице будут действовать до её перезагрузки. Но именно изменения в реальном времени отличают DevTools от редактирования кода в VS Code – во втором вы сначала должны сохранить изменения (нажав Ctrl+S) и только затем сможете увидеть их результат в браузере.

Ещё с помощью DevTools можно проверить качество доступности веб-сайта (accessibility или иначе a11y). Для этого здесь есть два инструмента: Lighthouse и вкладка «Специальные возможности». Также можно быстро определить коэффициент контрастности шрифта. А так как доступность (инклюзивность) является частью юзабилити-стратегии, то я использую данные возможности Инструментов разработчика во время UI/UX-аудита сайтов.

Figma

С макета сайта, нарисованного дизайнером в популярном графическом онлайн-редакторе Figma, начинается работа любого верстальщика. В своё время я уделил достаточно много времени изучению этого редактора, так как не зная принципов его работы, сложно «снимать» все параметры макета: отступы, цвета, размеры шрифтов и многое другое. Сейчас я использую Фигму не только для вёрстки сайта по дизайн-макету, но и в своей ежедневной работе контент-менеджера.

Три года назад, на радость разработчикам, в Figma появился режим Dev Mode, позволяющий легко «переносить» макет в код – но уже спустя год после запуска Dev Mode стал платным. И тогда я перешёл на Pixso – клон Фигмы, но, в отличие от именитого сервиса, имеющий (изначально!) бесплатный Dev Mode.

Однако недавно я обнаружил, что и Pixso также сделал режим разработки платным – и теперь он доступен только на PRO-тарифах для типов мест «Участник», «Креатор» и «Разработчик». Отныне, хочешь, разработчик, иметь доступ к необходимому для тебя инструменту? – выкладывай минимум 500 рублей в месяц! Немного, конечно, но и наша «голь на выдумку хитра»: будем «снимать мерки» с макета либо по старинке, либо вернёмся к Фигме, где можно получить доступ к коду с помощью некоторых плагинов.

Кстати, в рунете весь Топ поиска пока что упорно хвалит Pixso именно за его бесплатный режим разработчика. Однако правда тут в том, что большинство этих статей датируются началом 2024 года, то есть были написаны до изменения политики ценообразования. Pixso же, судя по всему, тихо изменил условия, без громких анонсов, в отличие от Figma, которая вызвала бурную дискуссию при введении платы за Dev Mode два года назад.

Плагин PerfectPixel

Умение верстать сайты точно «пиксель в пиксель» с утверждённым макетом – полезный навык веб-разработчика. Концепция Perfect Pixel как раз и подразумевает вёрстку, при которой все отступы и размеры в коде совпадают с таковыми в макете – с точностью до нескольких пикселей. И тут на помощь приходит браузерный плагин PerfectPixel, с помощью которого в браузере накладывают скриншот макета веб-страницы на вёрстку.

Новичкам поначалу принцип работы этого плагина может показаться сложным – но эта видимая сложность. На самом деле устроено всё очень просто, и после нескольких тренировок любой может разобраться. Другое дело, что усердствовать не стоит, ибо вёрстка «пиксель в пиксель» с макетом невозможна – да и не нужна. Причин тому много – например, одни и те же элементы могут по разному отображаться в разных браузерах. Ну а если вдруг дизайнер «накосячил», допустил множество ошибок – да к тому же и след его простыл? Тогда мысль о «совершенной вёрстке» разработчику лучше отложить и руководствоваться принципами грамотного дизайна.

ResponsivelyApp

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

Кстати, DevTools также встроены в данную утилиту – притом для каждого preview в отдельности.

Ну а количество встроенных профилей устройств поражает воображение – а вдобавок к ним вы можете создавать свои (нажав на кнопку «+ Add suite»).

И это ещё далеко не все возможности ResponsivelyApp, подробное описание которых выходит за рамки моего обзора.

Google Fonts

Эта бесплатная библиотека шрифтов необходима фронтенд-разработчику. Устроен данный сервис просто: вы находите нужный вам шрифт, выбираете конкретные начертания и вставляете код шрифта в свой HTML-файл веб-страницы.

Интерфейс сервиса интуитивно понятен, но время от времени меняется. Однако если вы поработали с ним некоторое время, то быстро привыкните и ко всем изменениям.

Несмотря на то, что сервис содержит большое количество популярных гарнитур, иногда дизайнеры применяют в своих макетах не совсем стандартные шрифты, которых нет в Google Fonts. И тогда приходится искать их в других онлайн-библиотеках. Например, так однажды случилось со шрифтом Gilroy, который был найден на сайте BestFonts.pro.

Различные онлайн-сервисы и утилиты для веб-разработки

Перечислять все онлайн-инструменты разработки – как «комбайны», так и узконаправленные утилиты – нет смысла. К тому же их так много, что каждый отдаёт предпочтение «своим». Это и различные CSS-генераторы, и «чистильщики» HTML-кода, и конвертеры цветов (HEX -> RGB -> HSL и т.д.). Например, я часто обращаюсь к одной онлайн-утилите, которая переводит пиксели (px) в vw (viewport width), что необходимо для вёрстки адаптивных веб-сайтов.