Обзоры

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

Сегодня поговорим о наборе из пяти интересных приложений, из которых может состоять типовая среда веб-разработчика

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

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

Я не буду настаивать на исключительности выбранных приложений: в конце концов, у каждого есть свои привычки и пожелания, а также своя трактовка понятия “удобно”. Тем не менее, в описании каждого из них я попытаюсь обосновать свой выбор.

Итак, начнем.

Pulsar: кроссплатформенный текстовый редактор кода

Кроссплатформенный редактор кода Pulsar

Разработчики Пульсара так характеризуют свое детище: 

A Community-led Hyper-Hackable Text Editor

Приложение представляет собой дальнейшее развитие своего некогда популярного предшественника Atom. Его разработчиком с 2014 по 2022 годы являлась небезызвестная компания GitHub Inc. В 2018 году ее выкупила Microsoft и четыре года спустя проект был закрыт. 16 декабря, на следующий день после перевода репозитория Atom в режим архива, вышла первая версия его преемника – Pulsar.

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

Термин Hyper-Hackable означает “гипернастраиваемый” и базируется на гибкой системе использования плагинов (packages). С их помощью можно легко расширить базовые возможности Pulsar до необходимого конкретному разработчику функционала.

Репозиторий расширений для редактора Pulsar

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

Разработка собственного расширения для Pulsar не представляет большой сложности и требует базовых знаний веб-разработчика – JavaScript / HTML / CSS3.

Еще одной интересной возможностью Pulsar является мощная система клавиш быстрого доступа (keyboard shortcuts). Причем дело не ограничивается только hotkeys. Их вообще можно и не запоминать: при нажатии Ctrl-Shift-P откроется командная строка, в которой можно вводить команды и запускать их с помощью системы подсказок. Попробуйте, например, начать вводить команду “auto indent” – вы быстро получите подсказку и сможете быстро расставить отступы в коде открытого файла.

Еще одной интересной командой является Ctrl-P, с помощью которой можно по имени открыть любой файл в текущем проекте. Проще и удобнее, чем искать его в ветвистой файловой структуре.

Важной функцией Pulsar, унаследованной от Atom, является встроенная поддержка Git. Это означает, что вы сможете без лишних движений сразу выгружать сделанные правки на удаленный сервер, а также иметь доступ к базовому функционалу по работе с удаленными репозиториями.

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

Официальный сайт Pulsar

Open Server Panel: локальный веб-сервер для Windows

Локальный веб сервер Open Server Panel (Windows)

С разрабатываемым веб-проектом можно работать по-разному. Кто-то предпочитает использовать репозиторий и выгружать коммиты, кто-то работает через FTP. Но если речь идет об относительно длительной по времени работе, требующей безопасного подхода к разработке, отладке и тестированию проекта, лучшим выбором станет использование локального веб-сервера. Для пользователей Linux и Mac это может показаться несложной задачей, но тем, кто использует Windows, необходим специализированный пакет. Одним из них является Open Server Panel.

OSPanel представляет собой пакет приложений, которые могут быть просто и быстро развернуты на локальной машине и в дальнейшем использоваться для создания любых веб-проектов. В состав Open Server Panel входит веб-сервер Apache с модулями PHP, Bind, Nginx, MySQL, PostgreSQL и другими. Кроме этого, вы можете сразу выбрать и установить набор приложений: PHPMYAdmin, PHPMemcachedAdmin и др.

В рамках данного обзора сложно перечислить все возможности пакета OSPanel и тонкости его настройки. Можем лишь посоветовать использовать выборочную установку и инсталлировать, например, PHP только актуальных версий, ограничиться необходимыми версиями модулей СУБД и исключить приложения, которые – очевидно – у вас уже установлены (к примеру, браузер Opera).

Официальный сайт Open Server Panel

Git: кроссплатформенная распределенная система управления версиями

Система управления версиями Git

Наиболее рациональным алгоритмом работы с любым веб-проектом является использование системы управления версиями. Сегодня практически единолично данную нишу занимает монополист под названием Git. Разработанный в 2005 году известным персонажем по имени Линус Торвальдс, Git был, есть и остается свободным приложением, позволяющим работать с веб-проектом посредством взаимодействия с репозиторием. Распространяется Гит по лицензии GNU GPL 2.

Мы не будем останавливаться на всех подробностях архитектуры и использования Git. Все это можно найти в разделе документации. Скажем лишь, что использование репозитория – это наиболее безопасный и рациональный вариант работы с веб-сайтом, особенно если речь идет о командной разработке. Вам больше не нужно делать резервные копии всего сайта или его части перед внесением правок и не надо разбираться в том, какую редактуру добавили ваши коллеги по команде разработчиков. Ошибочные коммиты легко откатываются, а использование веток (branches) позволяет работать над любым количеством реализаций определенного функционала, после чего применять выбранный к основной (master) ветке.

Официальный сайт Git

WinSCP: FTP/sFTP клиент и файл-менеджер для Windows

FTP-клиент WinSCP

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

За длительное время я перебрал не очень большое количество приложений данного типа. Чаще всего использовалась FileZilla или соответствующий плагин файл-менеджера, например, Total Commander. В какой-то момент перешел на WinSCP и уже больше выбор не менял.

WinSCP имеет дружественный графический интерфейс, переведен и локализован, интегрирован в Windows и поддерживает практически все протоколы, необходимые для полноценной работы с удаленно размещенными файлами.

Официальный сайт WinSCP

WinLess: графическая оболочка и компилятор LESS для Windows

LESS-компилятор WinLess (Windows)

Для верстки сайтов я использую динамический язык стилей LESS. Если коротко, то это метаязык, с помощью которого облегчается, систематизируется и ускоряется использование CSS. Это достигается благодаря использованию переменных, миксинов (mixins), операторов, функций и другого полезного функционала.

LESS предоставляет просто массу возможностей по оптимизации работы со стилями. Приведем лишь маленький пример:

@red: #fac0e2;
...
h2.mytitle { color: @red; }
...
div.myblock { border-left: 5px solid @red; }

Здесь мы определили переменную с цветом и в дальнейшем назначили ее свойствам color и border-left-color необходимых нам элементов. Благодаря этому при необходимости изменить наш исходный цвет, мы можем сделать это однократно, переопределив переменную. Все остальное возьмет на себя компилятор LESS. И это всего лишь малая толика его возможностей.

Алгоритм использования препроцессора LESS состоит в том, что написанный вами код должен быть скомпилирован в результирующий CSS-файл. Это можно сделать двумя способами:

  1. “На лету” на удаленном сервере  помощью js-компилятора.
  2. Локально с помощью Windows-компилятора.

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

Официальный сайт WinLESS

Заключение

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

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

Приятной работы!

Новый комментарий

Имя:
Для редактирования комментария осталось 10 минут
Комментарии отсутствуют