Дмитрий Древко

Веб-разработчик

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

ISPSystem

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

Подборка редакторов кода

Создание кода начинается с редактора, в котором он пишется. Вот несколько удобных решений:

VS Code — популярный редактор от Microsoft, доступный для установки на Linux, Windows и MacOS. Поддерживает достаточно много устанавливаемых из собственного репозитория плагинов для автодополнения кода, работы с базами данных, FTP, eExcel-документами и многим другим. Имеет встроенную поддержку Emmet — инструмента, который ускоряет написание кода на различных языках программирования. Есть даже режимы отладки для проверки работоспособности кода. VS Code полностью бесплатный.

Скриншот среды разработки VS Code
Скриншот среды разработки VS Code

2. Sublime Text — не менее распространённый редактор. Он также поддерживает автодополнение кода, Emmet и всё вышеперечисленные возможности VS Code. На сайте разработчика отмечено: «Sublime Text можно загрузить и оценить бесплатно, однако для дальнейшего использования необходимо приобрести лицензию». Лицензия стоит от 99 долларов. Но в то же время срок бесплатного использования не ограничен.

Sublime Text — не менее распространённый редактор. Он также поддерживает автодополнение кода, Emmet и всё вышеперечисленные возможности VS Code. На сайте разработчика отмечено: «Sublime Text можно загрузить и оценить бесплатно, однако для дальнейшего использования необходимо приобрести лицензию». Лицензия стоит от 99 долларов. Но в то же время срок бесплатного использования не ограничен.
Скриншот среды разработки Sublime Text
Скриншот среды разработки Sublime Text

Notepad++ — минималистичный редактор кода, и это следует уже из названия: Notepad — обычный блокнот, а «++» указывает на продвинутые функции. Редактор тоже имеет автодополнение кода в зависимости от типа файла. Как и в предыдущих редакторах, есть подсветка синтаксиса. Поддерживаются плагины. Например, очень удобное дополнение для работы с FTP: можно сразу же отредактировать загруженный с FTP файл и закачивать обратно, нажав «Сохранить». Программа бесплатная и доступна только для Windows.

Скриншот редактора Notepad++
Скриншот редактора Notepad++

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

После создания веб-приложения или сайта понадобится запустить его, чтобы проверить. Если это простой HTML-файл, то достаточно просто открыть его в браузере. Но часто бывает нужно выполнить код на сервере, и тогда пригодятся эти инструменты:

1. OpenServer — среда для веб-разработки. Это локальный веб-сервер, который устанавливается как обычная программа — через инсталлятор. После установки сразу же доступны встроенные инструменты: управление базами данных через phpMyAdmin, управление версиями PHP, возможность выбирать версию Apache/NGINX, сохранять настройки в разные профили. Программа доступна только для Windows.

Запущенный и работающий сервер под управлением OpenServer
Запущенный и работающий сервер под управлением OpenServer

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

Интерфейс программы WampServer
Интерфейс программы WampServer

Веб-сервер NodeJS работает на движке V8, который компилирует JavaScript в машинный код. То есть для написания серверного кода бэкенда используется тот же язык, что и для фронтенда. Синтаксис, конечно, будет немного отличаться, но это всё тот же привычный JavaScript. NodeJS доступен для Linux, Windows и MacOS.

Страница скачивания NodeJS
Страница скачивания NodeJS

Работа с вёрсткой

Первое, что сразу приходит на ум, — это инструмент разработчика, доступный прямо в браузерах на движке Chromium (Chrome, Opera, Yandex Browser и т. д.) и в FireFox. Открывается по нажатию на F12 или с помощью комбинации клавиш ctrl + shift + j, на MacOS (Option + ⌘ + j). Здесь сразу можно увидеть всю структуру DOM-макета (проще говоря, HTML-код страницы) и CSS-стили. Можно выполнять и отлаживать JavaScript, проверять скорость загрузки элементов страницы и т. д.

Инструмент DevTools, доступный в браузере
Инструмент DevTools, доступный в браузере

2. PerfectPixel — плагин для браузеров на движке Chromium и FireFox, позволяющий накладывать изображение дизайн-макетом сайта поверх своей вёрстки. Это помогает увидеть, где вёрстка отходит от заданной. Можно скорректировать положение и вид элементов прямо в браузере.

Так работает расширение PerfectPixel. Поверх страницы наложен её макет. Легко увидеть, где вёрстка не совпадает с эталоном
Так работает расширение PerfectPixel. Поверх страницы наложен её макет. Легко увидеть, где вёрстка не совпадает с эталоном

3. PixelParallel — ещё одно полезное расширение для браузеров на движке Chromium. Оно показывает поверх страницы сайта сетку, по которой выравниваются элементы сайта. Параметры сетки настраиваются.

Демонстрация работы расширения PixelParallel
Демонстрация работы расширения PixelParallel

4. Better Ruler — расширение, которое работает как линейка, и помогает замерять расстояние между объектами на странице.

Демонстрация работы расширения Better Ruler
Демонстрация работы расширения Better Ruler

5. LambdaTest проверяет, как работает вёрстка в разных браузерах и на разных ОС. Сервис платный, но бесплатно доступен ограниченный функционал для тестирования сайта в браузерах на Windows и MacOS, в том числе на мобильных устройствах с разными разрешениями.

Демонстрация работы LambdaTest, сайт открыт в режиме Safari на MacOS
Демонстрация работы LambdaTest, сайт открыт в режиме Safari на MacOS

Инструменты для работы с графикой

1.Онлайн конвертер изображений — очень полезный сервис для конвертирования изображений в 12 различных форматов. Например, можно конвертировать изображение в формат ico, чтобы сделать фавикон для сайта. Сервис не ограничивается одним только конвертером картинок, он позволяет конвертировать довольно большой набор форматов файлов: аудио, видео, документы.

Сервис для конвертирования разных форматов файлов
Сервис для конвертирования разных форматов файлов

2. ColorZilla — расширение для браузеров, которое показывает цветовой код любого элемента на странице инструментом «Пипетка».

Демонстрация работы расширения ColorZilla
Демонстрация работы расширения ColorZilla

3. Pixlr — бесплатный онлайн-редактор изображений. Позволяет редактировать изображения, поддерживает большинство известных графический форматов, в том числе и формат файлов фотошопа PSD. Есть возможность работы со слоями.

Сервисы предоставления иконок и картинок

1. Preloaders — сервис генерации анимированных иконок загрузки. Позволяет настраивать параметры: цвет, размер, скорость анимации. В большом списке анимаций есть бесплатные и платные картинки.

Каталог бесплатных анимированных иконок сервиса Preloaders
Каталог бесплатных анимированных иконок сервиса Preloaders

2. Unsplash — каталог бесплатных изображений, можно скачивать в различных размерах.

3. Lorem Picsum подбирает случайные картинки произвольного размера, который можно задавать вручную. Например, если ссылка будет вида https://picsum.photos/500/800, то сервис случайным образом сгенерирует изображение размером 500 на 800 пикселей. Очень удобно использовать для прототипирования или просто для картинок-заглушек на сайте.

Flaticon — каталог разнообразных иконок на все случаи жизни. Присутствуют как бесплатные, так и платные иконки.

Сервисы для работы с текстом

1. Google Fonts — сервис от Google, распространяющий бесплатные шрифты. Есть возможность скачать шрифты файлом или подключить их к своему проекту по сгенерированной ссылке.

Каталог бесплатных шрифтов от Google
Каталог бесплатных шрифтов от Google

2. Бьютифаер форматирует код таким образом, чтобы его можно было легко читать и править.

Минифаер напротив, минимизирует код для оптимизации скорости загрузки страниц сайта.

Сервисы для форматирования кода: «Бьютифайер» и «Минифайер»
Сервисы для форматирования кода: «Бьютифайер» и «Минифайер»

4. Типограф подготавливает текст к вёрстке: убирает лишние пробелы, неверные кавычки и дефисы, которые стоят на месте тире, связывает короткие союзы и предлоги со следующим словом с помощью неразрывных пробелов. Сервисом можно пользоваться на сайте разработчика или скачать отдельный модуль для встраивания к себе на сайт.

Сервис «Типограф»
Сервис «Типограф»

Создали сайт — управляйте им через ISPmanager

 

ISPmanager — панель для управления сервером и сайтом. Она помогает настраивать окружение, разворачивать сайты на проде и поддерживать их. Например, через веб-интерфейс ISPmanager можно:

  • развернуть веб-сервер Apache, nginx, OpenLiteSpeed;
  • установить языки и альтернативные версии PHP;
  • создать базу данных;
  • настроить почтовый сервер;
  • установить CMS;
  • настроить бэкапы;
  • подключить защиту от DDoS.

Попробуйте ISPmanager бесплатно — выдаём триальную версию на 14 дней.