Навіщо потрібні «Чертоги Фрілансера» v3? Презентація шаблону та його можливості
Категорії: Документація «Чертоги Фрілансера» v3.0.0
Привіт! Це Фрілансер по життю і я радий представити вам свій стартовий шаблон для комфортної розробки сайтів «Чертоги Фрілансера» v3.0.0 (далі ЧФ)
Слово «чертоги» означає палац, замок, хороми. Назва походить від стійкого виразу «Чортоги розуму», як місце для зберігання чогось важливого.
Що таке стартовий шаблон і для чого він потрібний?
Давайте уявімо звичайний процес підготовки до верстки/розробці сайту. Ми створюємо ієрархію папок та файлів, налаштовуємо той чи інший збирач проекту, підключаємо основні JS-доповнення для роботи тощо.
А під час розробки, щоразу виконуємо одні й ті самі дії: конвертуємо шрифти, оптимізуємо картинки, пишемо один і той же код для вирішення стандартних завдань. Адже меню-бургер, слайдери, попапи, таби, валідація та відправлення форм, спойлери, галереї тощо давно стали невід’ємними частинами будь-якого сучасного сайту.
Крім стандартного функціоналу, нам час від часу необхідно вирішувати як складніші завдання пов’язані з хотелками дизайнера/замовника, так і допрацьовувати стандартні модулі під конкретні потреби.
Так ось, я більше 10 років розробляю сайти на фрілансі і встиг попрацювати з найрізноманітнішими дазайн-макетами, а також з багатьма замовниками та їхніми хотелками.
У міру вирішення завдань я всіляко намагався оптимізувати і автоматизувати рутинні процеси. А найпотрібніші та вдалі HTML/CSS/JS рішення складати у свої чертоги.
Поряд із стандартним функціоналом стали з’являтися і власні розробки та рішення. Наприклад чуйна властивість, динамічний адаптив и т.п.
В результаті, за стільки років добра накопичилося достатньо для того, щоб розробка з використанням ЧФ перетворилася на суцільне задоволення.
Зручна архітектура папок та файлів, автоматизація всіх рутинних процесів, не лише стандартний JS-функціонал, а й рішення, що дозволяють задовольнити кастомні, унікальні запити. При цьому, ніякого зайвого коду, підключається тільки потрібний функціонал для конкретного проекту, що робить результат розробки з ЧФ максимально оптимізованим і швидким.
Відповідаючи на запитання, що таке стартовий шаблон і навіщо він потрібен, я наведу три основні пункти:
- Стартовий шаблон «Чертоги Фрілансера» v3.0.0 — це сукупність оптимізації та автоматизації рутинних процесів під час розробки сайтів. База великої кількості як стандартних так і унікальних рішень, які допоможуть вирішити безліч завдань, що виникають за лічені секунди.
- ЧФ розроблений так, щоб не притупляти ваші навички у розробці. Знайдено баланс між готовими рішеннями та повним розумінням користувачем шаблону того, як усе влаштовано «під капотом». Також вкрай докладне коментування коду робить із ЧФ навчальний інструмент для розвитку вас як спеціалістів.
- Шаблон «Чортоги Фрілансера» – працює з розробником, а не замість нього!
Можливості «Чертогов Фрілансера» v3.0.0
Тут зібрані всі можливості стартового шаблону, включаючи можливості інструменту для збірки проєкту. Дані оновлюватимуться в міру додавання функціоналу.
Інструменти для збірки проєкту та їх режими роботи
У шаблоні працюють два інструменти GULP і WEBPACK, кожен робить те, в чому він хороший. Є можливість працювати в режимах розробки та продакшену. Режим розробки виконує лише необхідні роботи, а продакшн забезпечує оптимізацію файлів, конвертацію та інші необхідні дії. Таким чином, підвищується швидкість роботи інструментів. Додам, що тип роботи вказаний у package.json дорівнює module
Інструмент GULP
GULP відіграє роль допоміжного інструменту і виконує такі завдання:
- Очищає папку з результатом [всі режими]
- Створює файл .gitignore із зазначеним вмістом [всі режими]
- Конвертує шрифти з .OTF та .TTF у .WOFF та .WOFF2. Записує дані у файл стилів, зокрема формує font-weight на основі імені файлу. [всі режими]
- Обробляє HTML файли: додає конструкцію із зображенням у .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 формату
- Допоміжні, загальні для багатьох модулів, функції блокування прокручування з компенсацією скроллбара, плавного розкриття блоку, збір та унікальність медіа-запитів, форматування чисел, виправлення помилки повноекранного блоку на мобільних та багато іншого.
Модулі роботи з формами
- Робота з полями введення, додавання класів, робота з placeholder
- Валідація полів, можливість моментальної валідації
- Функціонал показу пароля
- Надсилання форм у різних режимах: звичайний, AJAX, режим розробника. Можливість виведення попапа після надсилання форми.
- Модуль кастомізації елемента SELECT з великим набором можливостей
- Модуль роботи з масками полів вводу
- Модуль повзунка (range) для вказівки значень поля
- Модуль зіркового рейтингу
- Модуль вказівки кількості кнопками + та —
Модулі роботи з прокручуванням сторінки
- Зміна дизайну скроллбару
- Ледаче (відкладене) завантаження даних (lazyload): зображення, відео, iframe і т.д. при прокручуванні сторінки
- Спостерігач за появою елементів. Дозволяє створювати анімацію та багато іншого в момент появи/догляду елемента з видимої області екрана (блоку)
- Навігація по сторінці (прокручування до потрібного елемента). Також є можливість додавання класу до активного пункту навігації.
- Робота з шапкою сайту при прокручуванні сторінки з додатковими можливостями
- «Липкий» блок. Можливість закріплювати елемент при прокручуванні з гнучкими налаштуваннями
Модулі для створення паралакс-ефекту
Модуль паралаксу мишею. Елементи плавно реагують на рух мишею
Система глобального логінгу (Full Logging System или FLS)
Я подумав, чому б не навчити функціонал ЧФ спілкуватися (звітувати) про свою роботу користувачеві в консолі? Це дуже зручно в процесі розробки та має навчальний ефект. Докладніше
Список постійно поповнюватиметься новими можливостями. Слідкуйте за оновленнями.
Навчися розвивайся та пам’ятай — живи, а працюй у вільний час!
Дякую за підтримку каналу «Фрілансер по життю» та безкоштовного навчального контенту!