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

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

Всем привет, друзья! Сегодня мы поговорим о новом стартере для верстки, который я подготовил для будущих уроков и проектов на CMS. В последнее время я все чаще ловлю себя на мысли, что современная коммерческая разработка стала слишком перегружена различными инструментами, сборщиками, менеджерами задач, зависимостями, пакетами и так далее. Думаю, пришло время упростить рабочий процесс. Действительно ли так важны те инструменты, к которым мы уже привыкли? Давайте разбираться.

Simple Starter - простой стартер для верстки | Материалы урока - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Материалы урока и полезные ссылки

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

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Инструменты»

  • Настройка VS Code для верстки
  • Windows 11: Делаем вкладки в проводнике. Настройка QTTabBar от А до Я
  • Хостинг от А до Я: Сайты, базы, домены, SSL, SSH, sFTP, перенос, деплой, секреты, лайфхаки
  • Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких
  • Актуальный способ установки и настройки окружения Windows WSL 2 (Windows Subsystem for Linux)

Разделы сайта:

  • Курсы
  • Инструменты
  • Веб-дизайн
  • Вёрстка
  • CMS

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
2023 © WebDesign Master