Как я ускоряю работу

Николай Громов

Как я ускоряю свою работу

Сеанс автоматической магии, делающей работу более быстрой, приятной и слегка опасной.
Николай Громов. Внутренняя Монголия. Вечность, лето.

Задачи

Поделиться опытом и ошибками.
Вдохновить на изучение технологий.

О какой работе речь?

Вёрстка и модификация страниц.

БЭМ. 50-150 блоков.
5-50 страниц.

Результат: HTML, CSS, JS, изображения, шрифты.

Как вообще ускорить работу?

Знание типовых решений типовых задач.
Быстрый набор, Emmet, горячие кнопки.
Обработка разметки и стилей.
Автоматизация рутинных действий.
Знакомое предсказуемое окружение проекта. Стартовый репозиторий.

Стартовый репозиторий NTH-start-project

      NTH-start-project/
        build/ # результат сборки (редактировать файлы бессмысленно)
        src/   # исходные файлы

Обработка разметки и стилей.
Автообновление страницы по изменению.
Стартовый набор блоков.
Проверка кода перед коммитом.
...

Стартовый репозиторий NTH-start-project

      src/
        blocks/  # БЭМ блоки (каждый блок в своей подпапке)
        favicon/ # иконки сайта (на вкладке браузера, для мобильных...)
        fonts/   # шрифты
        img/     # общие картинки (не завязанные на к-л БЭМ-блок)
        js/      # общий javascript, не завязанный на к-л БЭМ-блок
        pages/   # все страницы сайта
        pug/     # доп. pug-файлы: раскладки, диспетчер примесей
        scss/    # доп. стилевые файлы: переменные, диспетчер подключений

Мой стек

Git, терминал.
БЭМ, все технологии блока в директории блока.
Pug для разметки.
Sass & PostCSS для стилей.
Обработка javascript.

Git — система контроля версий

«Сохранения» (коммиты) как в играх.
«Машина времени».
Логическое ветвление разработки и лёгкое слияние веток.
Параллельная работа в команде и/или с разных компьютеров.
Удобные код-ревью на внешних сервисах.
Резервная копия у каждого участника проекта и «в облаке».

БЭМ

БЭМ как универсальная методология

Разделение интерфейса на блоки, блоков на элементы.

Применима на любом проекте.
Реализует компонентный подход.
Самодокументируется.

      <header class="page-header">
        <div class="page-header__inner">
          <a href="/" class="logo">
            <svg class="logo__img">...</svg>
          </a>
        </div>
      </header>
       
      <div class="promo">
        <div class="promo__inner  slider">
          <section class="slider__item">...</section>
          <section class="slider__item">...</section>
          <section class="slider__item">...</section>
        </div>
      </div>

      <div class="catalog">
        <div class="catalog__item">...<div>
        <div class="catalog__item">
          <article class="card">
            <a class="card__wrap" href="...">
              <img class="card__img" src="..." alt="Путеводитель по лжи">
              <h2 class="card__title">Путеводитель по лжи</h2>
            </a>
            <p class="card__descr">Критическое мышление в эпоху постправды.</p>
            <p class="card__price">630 ₽</p>
          </article>
        </div>
        <div class="catalog__item">...<div>
        ...
      </div>

Ближе к делу

Рутина

Добавил БЭМ-блок в разметку — нужно добавить его стили, JS.
Сборка/пересборка спрайтов.
Изменение разметки общих частей страницы.
Изменение разметки многократно использованных блоков.
Обновление страницы при изменении файлов.
Перенос файлов между устройствами для тестирования.

Как я работаю

Перехожу в директорию проекта: cd /d/projects/SomeName.
Стартую сервер разработки: npm start (алиас s).
Редактирую файлы, вижу изменения в браузере.

Пока сервер работает, проект можно просматривать с любого устройства в рамках локальной сети.

Как это работает: `npm start`

Очищается папка build/
Собирается разметка страниц из src/pages/ в build/
По разметке составляется плоский список использованных БЭМ-блоки (ясно какие стилевые файлы, js-файлы, картинки должны попасть в сборку).
Автоматически собирается src/scss/style.scss.
Автоматически собирается src/js/entry.js.
Компилируются/собираются/минифицируются стили и js, копируются дополнительные файлы.
Запускается слежение за сохранением файлов и автообновление.

Один конфиг, чтобы править всеми

      let config = {
        'notGetBlocks': [],    // Список файлов разметки, из которых не собирать блоки
        'ignoredBlocks': [],   // Список Блоков, которые никогда не брать в сборку
        'alwaysAddBlocks': [], // Список блоков, которые всегда брать в сборку
        'addStyleBefore': [],  // Доп. стилевые файлы (брать в сборку до файлов блоков)
        'addStyleAfter': [],   // Доп. стилевые файлы (брать в сборку после файлов блоков)
        'addJsBefore': [],     // Доп. js-файлы (брать в сборку до файлов блоков)
        'addJsAfter': [],      // Доп. js-файлы (брать в сборку до файлов блоков)
        'addAssets': {},       // Любые файлы и куда их копировать
        'dir': {},             // Имена папок
      };

Один конфиг, чтобы править всеми

      let config = {
        ...
        'addStyleBefore': [
          'src/scss/variables.scss',
          'src/scss/mixins.scss',
          'somePackage/somePackage.css', // для 'node_modules/somePackage/somePackage.css'
        ],
        ...
      };

Блоки

Все технологии блока — в папке блока

      src/
        blocks/
          btn/            # Папка блока
            btn.pug
            btn.scss
            readme.md
          burger/         # Папка блока
            burger.js
            burger.pug
            burger.scss
            readme.md
          ...

Создавать это вручную? Нет

        node createBlock.js new-block          # создать папки, .scss, .md
        node createBlock.js new-block pug      # тоже, но ещё .pug
        node createBlock.js new-block pug js   # тоже, но ещё .pug и .js

Создает директорию блока, scss-файл, папки картинок
(можно указать несколько дополнительных расширений).
Пишет в созданные файлы заготовки их содержимого (только для scss и pug).
Наливает кофе.

Разметка

Pug для разметки

      // Файл src/blocks/card/card.pug
      
      article.card
        a.card__wrap(href='...')
          img.card__img(src='...', alt='...')
          h2.card__title Название книги
        p.card__descr Описание книги
        p.card__price 630 ₽

См. реальный пример

      article.card(class=allMods)&attributes(attributes)
        != newLabel
        if (data.url !== 'undefined' && data.url)
          .card__inner
            a.card__img-wrap(href=data.url)
              img.card__img(src=data.img, alt=data.name)
            h3.card__title
              a(href=data.url)!= data.name
            if (data.descr !== 'undefined' && data.descr)
              p.card__descr!= data.descr
            p.card__price!= price
        else
          .card__inner
            span.card__img-wrap
              img.card__img(src=data.img, alt=data.name)
            h3.card__title!= data.name
            if (data.descr !== 'undefined' && data.descr)
              p.card__descr!= data.descr
            p.card__price!= price
        +btn('Купить', '')(class='card__buy')

Стили

Sass и PostCSS для обработки стилей

Разделение на небольшие файлы.
Вложения с &
Переменные.
Автоматический инлайн SVG.
Автоматическое добавление вендорных префиксов.
Мат. операции.
Примеси.

Sass и PostCSS для обработки стилей

      // Файл src/blocks/promo/promo.scss
       
      .promo {
        padding: 0 1rem;
        background-color: $gray-lighter;
      
        &__inner {
          max-width: $content-max-width;
          margin: auto;
        }
      }

Sass и PostCSS для обработки стилей

      // Файл src/scss/style.scss
      
      @import "src/scss/variables.scss";
      @import "src/scss/mixins.scss";
       
      @import "src/blocks/burger/burger.scss";
      @import "src/blocks/logo/logo.scss";
      @import "src/blocks/main-nav/main-nav.scss";
      @import "src/blocks/page/page.scss";
      @import "src/blocks/page-footer/page-footer.scss";
      @import "src/blocks/page-header/page-header.scss";

Javascript

Обработка javascript

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

Linting

Единообразие кода = быстрое чтение

Быстрая модификация.
Лучше видно ошибки.
Нет холивара при совместной работе.

Проверка eslint и stylelint по командам и по прекоммит-хуку.

Вопросы?

Бонус
скидка 10% на любой курс в EpicSkills по промо-коду GROMOV10

Как я ускоряю свою работу

Задачи

О какой работе речь?

Как вообще ускорить работу?

Стартовый репозиторий NTH-start-project

Стартовый репозиторий NTH-start-project

Мой стек

Git — система контроля версий

БЭМ

БЭМ как универсальная методология

Ближе к делу

Рутина

Как я работаю

Как это работает: npm start

Один конфиг, чтобы править всеми

Один конфиг, чтобы править всеми

Блоки

Все технологии блока — в папке блока

Создавать это вручную? Нет

Разметка

Pug для разметки

Стили

Sass и PostCSS для обработки стилей

Sass и PostCSS для обработки стилей

Sass и PostCSS для обработки стилей

Javascript

Обработка javascript

Linting

Единообразие кода = быстрое чтение

Вопросы?

Как это работает: `npm start`