Simple Starter - простой стартер для верстки | Материалы урока

Всем привет, друзья! Сегодня мы поговорим о новом стартере для верстки, который я подготовил для будущих уроков и проектов на 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 должен быть на нативную реализацию возможностей по документации, что обеспечит долгую жизнь и безболезненное развитие коммерческого сайта.