Для чего нужны «Чертоги Фрилансера» v3? Презентация шаблона и его возможностей

Привет! Это Фрилансер по жизни и я рад представить вам свой стартовый шаблон для комфортной разработки сайтов «Чертоги Фрилансера» v3.0.0 (далее ЧФ)

Слово «чертоги» означает дворец, замок, хоромы. Название происходит от устойчивого выражения «Чертоги разума», как место для хранения чего-то важного.

Что такое стартовый шаблон и для чего он нужен?

Давайте представим себе обычный процесс подготовки к верстке/разработке сайта. Мы создаем иерархию папок и файлов, настраиваем тот или иной сборщик проекта, подключаем основные JS-дополнения для работы и т.п.

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

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

Так вот, я более 10 лет разрабатываю сайты на фрилансе и успел поработать с самыми разнообразными дазайн-макетами, а также с очень многими заказчиками и их хотелками.

По мере решения возникающих задач я всячески старался оптимизировать и автоматизировать рутинные процессы. А самые нужные и удачные HTML/CSS/JS решения складывать в свои чертоги.

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

В результате, за столько лет добра накопилось достаточно для того чтобы разработка с использованием ЧФ превратилась в сплошное удовольствие.

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

Отвечая на вопрос что такое стартовый шаблон и зачем он нужен, я приведу три основных пункта:

  1. Стартовый шаблон «Чертоги Фрилансера» v3.0.0 — это совокупность оптимизации и автоматизации рутинных процессов во время разработки сайтов. База большого количества как стандартных так и уникальных решений которые помогут решить множество возникающих задач за считанные секунды.
  2. ЧФ разработан так, чтобы не притуплять ваши навыки в разработке. Найден баланс между готовыми решениями и полным пониманием пользователем шаблона того как все устроено «под капотом». Также крайне подробное комментирование кода делает из ЧФ обучающий инструмент для развития вас как специалистов.
  3. Шаблон «Чертоги Фрилансера» — работает с разработчиком, а не вместо него!

Возможности «Чертогов Фрилансера» v3.0.0

Тут собраны все возможности стартового шаблона включая возможности сборщика. Данные будут обновляться по мере добавления функционала.

Сборщики и их режимы работы

В шаблоне работают два сброщика GULP и WEBPACK, каждый делает то в чем он хорош. Есть возможность работать в режимах разработки и продакшена. Режим разработки выполняет только необходимые для работы задачи, а продакшн обеспечивает оптимизацию файлов, конвертацию и прочие необходимые действия. Таким образом повышается скорость работы сборщиков. Добавлю что тип работы указанный в package.json равен module

Сборщик GULP

GULP играет роль вспомогательного сборщика и выполняет следующие задачи:

  • Очищает папку с результатом [все режимы]
  • Создает файл .gitignore с указанным содержимым [все режимы]
  • Конвертирует шрифты из .OTF и .TTF в .WOFF и .WOFF2. Записывает данные в файл стилей, в том числе формирует font-weight на основе имени файла. [все режимы]
  • Обрабатывает HTML файлы: добавляет конструкцию <picture> с изображением в .WEBP фармате, добавляет к подключенным JS CSS файлам версию, что позволяет избежать проблем с кэшированием при демонстрации работы. [режим продакшена]
  • Обрабатывает CSS файлы: группирует медиа-запросы, добавляет вендорные префиксы для обеспечения кроссбраузерности, добавляет подключение .WEBP изображения, оптимизирует и сжимает файл. [режим продакшена]
  • Обрабатывает JS файлы: только передает информацию сборщику WEBPACK [режим продакшена]
  • Обрабатывает файлы изображений: сжимает и оптимизирует форматы .JPG, .PNG, .SVG. На основе .JPG/.PNG файлов формируется .WEBP изображение. [режим продакшена]
  • Создает SVG-спрайт
  • Отправляет файлы с результатом на сервер по FTP [режим продакшена]
  • Создает ZIP архив с результатом [режим продакшена]

Сборщик WEBPACK

WEBPACK играет основную роль сборщика HTML/SCSS/JS файлов и выполняет следующие задачи:

  • Запускает локальный сервер и открывает HTML страницы результата в браузере. При внесении изменений, сам обновляет страницу. Подключен модуль горячей замены, что увеличивает скорость обновления. Также, созданные файлы не пишутся на диск, а находятся в памяти. [режим разработчика]
  • Обрабатывает SCSS файлы: производится преобразование в CSS файлы, переименовываются псевдонимы [все режимы]
  • Обрабатывает HTML файлы: производится сборка файлов из подключаемых частей, переименовываются псевдонимы [все режимы]
  • Обрабатывает PUG файлы: производится сборка файлов из подключаемых частей, переименовываются псевдонимы, производится преобразование в HTML файлы [все режимы]
  • Обрабатывает JS файлы: производится грамотная сборка подключенных модулей, таким образом в файл с результатом попадает только задействованный в проекте код [все режимы], файл сжимается и оптимизируется [режим продакшена]
  • Копирует файлы из папки files в папку с результатом [все режимы]

Возможности работы с HTML файлами

HTML файлы можно собирать из частей благодаря шаблонизатору FileInclude. Тоесть мы можем вынести отдельные части кода, например header и footer, в отдельные файлы и подключать их для всех страниц сайта. Таким образом, при необходимости внести изменения, нам достаточно редактировать только один подключаемый файл. FileInclude позволяет передавать переменные со значением в подключаемый файл. Например мы можем передать свой заголовок (title) для каждой страницы.

Шаблонизатор PUG

Если вам не хватает возможностей FileInclude вы можете использовать шаблонизатор PUG и все его возможности. Сборка сама обработает PUG-файлы и преобразует в HTML. Подробнее…

Использование препроцессора SASS/SCSS, возможности при работе со стилями

В шаблоне используется препроцессор SASS в синтаксисе SCSS. Благодаря этому, есть возможность порадовать вас отличными наработками:

  • Отзывчивое свойство. Миксин, позволяет задать значение для того или иного свойства которое будет зависеть от ширины экрана (вьюпорта), что в свою очередь открывает колоссальные возможности для адаптивной (отзывчивой) верстки.
  • Архитектура подключаемых файлов позволяет использовать только то что нужно для конкретного проекта.
  • Готовые базовые стили для различных JS модулей

JavaScript возможности, использование модулей

Отмечу, что поскольку JS файлы собирает WEBPACK, то у нас появляется возможность использовать подключение ES6 модулей. Таким образом в результат попадает только используемый функционал. Для добавления той или иной возможности, как правило, достаточно раскоментировать строку. Также каждый модуль удобно управляется и настраивается с помощью дата атрибутов в HTML/PUG файлах, а сам код подробно прокомментирован.

Вот перечень готового JS функционала «Чертогов Фрилансера» (для подробностей кликайте на название модуля):

Общие модули

  • Табы с возможностью превращения в спойлеры на указанной ширине экрана и прочими настройками
  • Спойлеры с возможностью включения на указанной ширине экрана и прочими настройками
  • Модуль «Показать еще» с возможностью включения на указанной ширине экрана и прочими настройками
  • Попапы (всплавающие/модальные окна) с переключением фокуса, открытием по хешу и прочим
  • Галарея (куплена лицензия галереи lightgallery js)
  • Слайдер Swiper и дополнительные возможности для интеграции с другими модулями
  • Подсказки (tippy.js)
  • Функционал меню «бургер»
  • Функционал определения поддержки WEBP формата
  • Вспомогательные, общие для многих модулей, функции блокировки прокрутки с компенсацией скроллбара, плавного раскрытия блока, сбор и уникализация медиа-запросов, форматирования чисел, исправление ошибки полноэкранного блока на мобильных и многое другое.

Модули работы с формами

Модули работы с прокруткой страницы

  • Изменение дизайна скроллбара
  • Ленивая (отложенная) загрузка данных (lazyload): картинки видео iframe и т.д. при прокрутке страницы
  • Наблюдатель за появлением элементов. Позволяет создавать анимацию и многое другое в момент появления/ухода элемента с видимой области экрана (блока)
  • Навигация по странице (прокрутка к нужному элементу). Также есть возможность добавления класса активному пункту навигации
  • Работа с шапкой сайта при прокрутке страницы с дополнительными возможностями
  • «Липкий» блок. Возможность закреплять элемент при прокрутке с гибкими настройками

Модули для создания параллакс-эффекта

Модуль параллакса мышью. Элементы плавно реагируют на движение мышью

Система глобального логгинга (Full Logging System или FLS)

Я подумал, почему бы не научить функционал ЧФ общаться (отчитываться) о своей работе пользователю в консоли?! Это очень удобно в процессе разработки и имеет обучающий эффект. Подробнее

Список будет постоянно пополняться новыми возможностями. Следите за обновлениями.
Спасибо за поддержку канала «Фрилансер по жизни» и бесплатного обучающего контента!

Обучайся развивайся и помни — живи, а работай в свободное время!

Лишити коментар