Полезные инструменты для веб-разработки
Расскажу об инструментах, которые помогают в создании сайта, — от общепринятых, таких как редакторы кода, до небольших, но полезных. Какие-то из них окажутся знакомыми, а про некоторые можно подумать: «А что, так можно было?» Но все они пригодятся в работе и сэкономят уйму времени.
Содержание
Инструменты для запуска локального веб-сервера
Инструменты для работы с графикой
Сервисы предоставления иконок и картинок
Подборка редакторов кода
Создание кода начинается с редактора, в котором он пишется. Вот несколько удобных решений:
VS Code — популярный редактор от Microsoft, доступный для установки на Linux, Windows и MacOS. Поддерживает достаточно много устанавливаемых из собственного репозитория плагинов для автодополнения кода, работы с базами данных, FTP, eExcel-документами и многим другим. Имеет встроенную поддержку Emmet — инструмента, который ускоряет написание кода на различных языках программирования. Есть даже режимы отладки для проверки работоспособности кода. VS Code полностью бесплатный.
2. Sublime Text — не менее распространённый редактор. Он также поддерживает автодополнение кода, Emmet и всё вышеперечисленные возможности VS Code. На сайте разработчика отмечено: «Sublime Text можно загрузить и оценить бесплатно, однако для дальнейшего использования необходимо приобрести лицензию». Лицензия стоит от 99 долларов. Но в то же время срок бесплатного использования не ограничен.
Sublime Text — не менее распространённый редактор. Он также поддерживает автодополнение кода, Emmet и всё вышеперечисленные возможности VS Code. На сайте разработчика отмечено: «Sublime Text можно загрузить и оценить бесплатно, однако для дальнейшего использования необходимо приобрести лицензию». Лицензия стоит от 99 долларов. Но в то же время срок бесплатного использования не ограничен.
Notepad++ — минималистичный редактор кода, и это следует уже из названия: Notepad — обычный блокнот, а «++» указывает на продвинутые функции. Редактор тоже имеет автодополнение кода в зависимости от типа файла. Как и в предыдущих редакторах, есть подсветка синтаксиса. Поддерживаются плагины. Например, очень удобное дополнение для работы с FTP: можно сразу же отредактировать загруженный с FTP файл и закачивать обратно, нажав «Сохранить». Программа бесплатная и доступна только для Windows.
Инструменты для запуска локального веб-сервера
После создания веб-приложения или сайта понадобится запустить его, чтобы проверить. Если это простой HTML-файл, то достаточно просто открыть его в браузере. Но часто бывает нужно выполнить код на сервере, и тогда пригодятся эти инструменты:
1. OpenServer — среда для веб-разработки. Это локальный веб-сервер, который устанавливается как обычная программа — через инсталлятор. После установки сразу же доступны встроенные инструменты: управление базами данных через phpMyAdmin, управление версиями PHP, возможность выбирать версию Apache/NGINX, сохранять настройки в разные профили. Программа доступна только для Windows.
2. WampServer — тоже довольно популярный веб-сервер. Прост в установке и нетребователен к системе, а значит, может работать даже на слабом компьютере. Поддерживает все необходимые для работы веб-сервера компоненты. Позволяет устанавливать, удалять, включать и выключать расширения для PHP непосредственно из интерфейса программы, не прописывая нужный текст в конфигурационных файлах.
Веб-сервер NodeJS работает на движке V8, который компилирует JavaScript в машинный код. То есть для написания серверного кода бэкенда используется тот же язык, что и для фронтенда. Синтаксис, конечно, будет немного отличаться, но это всё тот же привычный JavaScript. NodeJS доступен для Linux, Windows и MacOS.
Работа с вёрсткой
Первое, что сразу приходит на ум, — это инструмент разработчика, доступный прямо в браузерах на движке Chromium (Chrome, Opera, Yandex Browser и т. д.) и в FireFox. Открывается по нажатию на F12 или с помощью комбинации клавиш ctrl + shift + j, на MacOS (Option + ⌘ + j). Здесь сразу можно увидеть всю структуру DOM-макета (проще говоря, HTML-код страницы) и CSS-стили. Можно выполнять и отлаживать JavaScript, проверять скорость загрузки элементов страницы и т. д.
2. PerfectPixel — плагин для браузеров на движке Chromium и FireFox, позволяющий накладывать изображение дизайн-макетом сайта поверх своей вёрстки. Это помогает увидеть, где вёрстка отходит от заданной. Можно скорректировать положение и вид элементов прямо в браузере.
3. PixelParallel — ещё одно полезное расширение для браузеров на движке Chromium. Оно показывает поверх страницы сайта сетку, по которой выравниваются элементы сайта. Параметры сетки настраиваются.
4. Better Ruler — расширение, которое работает как линейка, и помогает замерять расстояние между объектами на странице.
5. LambdaTest проверяет, как работает вёрстка в разных браузерах и на разных ОС. Сервис платный, но бесплатно доступен ограниченный функционал для тестирования сайта в браузерах на Windows и MacOS, в том числе на мобильных устройствах с разными разрешениями.
Инструменты для работы с графикой
1.Онлайн конвертер изображений — очень полезный сервис для конвертирования изображений в 12 различных форматов. Например, можно конвертировать изображение в формат ico, чтобы сделать фавикон для сайта. Сервис не ограничивается одним только конвертером картинок, он позволяет конвертировать довольно большой набор форматов файлов: аудио, видео, документы.
2. ColorZilla — расширение для браузеров, которое показывает цветовой код любого элемента на странице инструментом «Пипетка».
3. Pixlr — бесплатный онлайн-редактор изображений. Позволяет редактировать изображения, поддерживает большинство известных графический форматов, в том числе и формат файлов фотошопа PSD. Есть возможность работы со слоями.
Сервисы предоставления иконок и картинок
1. Preloaders — сервис генерации анимированных иконок загрузки. Позволяет настраивать параметры: цвет, размер, скорость анимации. В большом списке анимаций есть бесплатные и платные картинки.
2. Unsplash — каталог бесплатных изображений, можно скачивать в различных размерах.
3. Lorem Picsum подбирает случайные картинки произвольного размера, который можно задавать вручную. Например, если ссылка будет вида https://picsum.photos/500/800, то сервис случайным образом сгенерирует изображение размером 500 на 800 пикселей. Очень удобно использовать для прототипирования или просто для картинок-заглушек на сайте.
Flaticon — каталог разнообразных иконок на все случаи жизни. Присутствуют как бесплатные, так и платные иконки.
Сервисы для работы с текстом
1. Google Fonts — сервис от Google, распространяющий бесплатные шрифты. Есть возможность скачать шрифты файлом или подключить их к своему проекту по сгенерированной ссылке.
2. Бьютифаер форматирует код таким образом, чтобы его можно было легко читать и править.
Минифаер напротив, минимизирует код для оптимизации скорости загрузки страниц сайта.
4. Типограф подготавливает текст к вёрстке: убирает лишние пробелы, неверные кавычки и дефисы, которые стоят на месте тире, связывает короткие союзы и предлоги со следующим словом с помощью неразрывных пробелов. Сервисом можно пользоваться на сайте разработчика или скачать отдельный модуль для встраивания к себе на сайт.
