Всем привет, друзья! Сегодня мы поговорим о новом стартере для верстки, который я подготовил для будущих уроков и проектов на CMS. В последнее время я все чаще ловлю себя на мысли, что современная коммерческая разработка стала слишком перегружена различными инструментами, сборщиками, менеджерами задач, зависимостями, пакетами и так далее. Думаю, пришло время упростить рабочий процесс. Действительно ли так важны те инструменты, к которым мы уже привыкли? Давайте разбираться.
Материалы урока и полезные ссылки
- Стартер на GitHub: Скачать
- Урок по настройке окружения WSL: Ознакомиться
- Редактор кода: Visual Studio Code
Настройка Visual Studio Code
Файл > Настройки > Параметры. В правом верхнем углу окна редактора нажимаем иконку «Открыть параметры (JSON)». Мои настройки settings.json:
// Required VSC Plugins: eCSStractor, Live Server, One Dark Pro, Path Intellisense
{
"emmet.extensionsPath": [ "~\\AppData\\Roaming\\Code\\User\\emmet" ], // Emmet Extension Path
"terminal.integrated.defaultProfile.windows": "Ubuntu (WSL)", // Windows WSL by Default
"workbench.startupEditor": "newUntitledFile",
"editor.smoothScrolling": true,
"editor.fontSize": 15,
"editor.minimap.enabled": false,
"breadcrumbs.enabled": false,
"editor.renderControlCharacters": true,
"editor.tabSize": 2,
"workbench.activityBar.visible": false,
"files.defaultLanguage": "html",
"git.ignoreMissingGitWarning": true,
"editor.detectIndentation": false,
"editor.folding": false,
"editor.glyphMargin": false,
"editor.parameterHints.enabled": false,
"editor.hover.enabled": false,
"terminal.integrated.fontSize": 15,
"editor.renderWhitespace": "boundary",
"editor.lineHeight": 23,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true,
"ecsstractor_port.add_comment": false,
"ecsstractor_port.empty_line_before_nested_selector": false,
"explorer.confirmDelete": false,
"security.workspace.trust.enabled": false,
"workbench.colorTheme": "One Dark Pro",
"editor.insertSpaces": false
}
Обратите внимание, что у вас должны быть установлены следующие расширения VSCode:eCSStractor,Live Server,One Dark Pro,Path Intellisense. В этом видеоуроке были продемонстрированы именно эти плагины и настройки.
Небольшая предыстория
Когда эра браузеров активно развивалась, не было каких-то общих стандартов, не было удобных универсальных возможностей, которые поддерживались бы всеми браузерами одинаково хорошо, стали появляться различные сборщики, бандлеры, препроцессоры, таск-раннеры. По большому счету, если посмотреть в саму суть всех этих инструментов – их задача состояла в том, чтобы расширить стандартные возможности и автоматизировать рутину по обеспечению кроссбраузерности. Например, CSS-препроцессоры дали возможность использовать переменные, создавать миксины (блоки часто используемого кода), импортировать стили, раздавать префиксы для устаревших браузеров и и.д.
Сейчас же огромное количество крутых фич поддерживаются браузерами нативно. По сути, в настоящее время абсолютно все браузеры работают на одном движке и отличаются разве что исполнением интерфейса и наличием дополнительных фич. Наступает эпоха нативной поддержки крутых технологий всеми браузерами в плюс-минус одинаковой степени. Этакая глобальная стандартизация. И это круто!
Следующий момент. Веб-разработку сейчас можно условно разделить на 2 категории – разработка SPA (Single Page Applications и подобных сервисов) и коммерческая разработка, где основной акцент делается на дизайн-решения, затем следует элементарная верстка и посадка на какую-либо CMS. И если мы говорим о коммерческой разработке (не о создании приложений, это важно), CMS сейчас имеют все необходимые возможности для оптимизации кода, изображений и прочих эссетов из коробки или посредством плагинов и дополнений. Кроме того, большинство CMS используют jQuery, и в какой-либо типизации JS-кода нет вообще никакого смысла. Конечно, можно адаптировать сложный стартер вроде OptimizedHTML 5 для той-же WordPress, переработав всю логику работы, которую предлагает CMS из коробки и даже прикрутить Vue.js и использовать CMS как headless, однако, смысла в этом нет, это попытка залезть на другую территорию. Кроме того, оптимизация должна происходить на стороне самой CMS и никак иначе. Плюс после передачи проекта, как показывает практика, поддержка работы Node.js-окружения после вас прекращается. Перекомпилировать тот-же Sass или JS никто не будет, проект просто будет обрастать костылями и переопределениями. Основной упор при использовании любой CMS должен быть на нативную реализацию возможностей по документации, что обеспечит долгую жизнь и безболезненное развитие коммерческого сайта.
