Навіщо потрібні «Чертоги Фрілансера» 4? Презентація шаблону та його можливості

Категорії: Документація «Чертоги Фрілансера» 4

Привіт! Це Фрілансер по життю і я радий представити вам свій стартовий шаблон для комфортної розробки сайтів «Чертоги Фрілансера» 4 (далі ЧФ4)

Завантажити «Чертоги Фрілансера» 4

Слово “чертоги” означає палац, замок, хороми. Назва походить від стійкого виразу “Чортоги розуму”, як місце для зберігання чогось важливого.

Зміст:

Що таке стартовий шаблон (збірка) і для чого він потрібний?

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

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

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

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

У міру вирішення завдань я всіляко намагався оптимізувати і автоматизувати рутинні процеси. А найпотрібніші та вдалі HTML/CSS/JS рішення складати у свої чертоги.

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

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

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

Відповідаючи на запитання, що таке стартовий шаблон і навіщо він потрібен, я наведу три основні пункти:

  1. Стартовий шаблон “Чертоги Фрілансера” 4 – це сукупність оптимізації та автоматизації рутинних процесів під час розробки сайтів. База великої кількості як стандартних так і унікальних рішень, які допоможуть вирішити безліч завдань, що виникають за лічені секунди.
  2. ЧФ розроблений так, щоб не притупляти ваші навички у розробці. Знайдено баланс між готовими рішеннями та повним розумінням користувачем шаблону того, як усе влаштовано “під капотом”. Також вкрай докладне коментування коду робить із ЧФ навчальний інструмент для розвитку вас як спеціалістів.
  3. Шаблон “Чортоги Фрілансера” – працює з розробником, а не замість нього!

Загальні можливості “Чертогов Фрілансера” 4

Основна концепція ЧФ4 – це максимум функціоналу при якомога меньших діях зі сторони користувача. В новій версії я намагався автоматизувати все що тільки можна, щоб дати можливість розробнику(ці) зусередитись на самій розробці. При цьому з можливістю налаштування збірки під конкретні потреби.

ЧФ4 вміє сам налаштовувати редактор коду VS Code додаючи спіпети та налаштування псевдонімів, конвертує та підключає шрифти, конвертує та оптимізує зображення, створює іконковий шрифт та SVG-спрайт, встановлює та налаштовує CMS WordPress та дає можливість розробляти на реальній системі використовуючи усі можливості збірки.

В ЧФ4 інтегрована “горяча” підключка HTML/SCSS/JS компонентів, обробка препроцесорів SASS/SCSS та PUG, широкі можливості роботи з HTML, оптимізація та розділення фінальних JS/CSS файлів по сторінкам та створення їх нестиснутих версій, а також можливість вбудовувати критичні CSS-стилі для найкращої оптимізації.

Можливість роботи з React, Vue, Tailwindcss

Після розробки є можливість створити сторінку проєкту з посиланнями на усі сторінки, зробити ZIP-архів результату, відправити його на віддалений сервер по FTP.

ЧФ4 навіть може нагадувати, що пора зробити перерву і відпочити ❤️

Детальний опис кожного функціоналу, його налаштування та інструкції з використання ви знайдете на окремих сторінках документації ЧФ4

Інструмент для збірки проєкту

“Чертоги Фрілансера” 4 побудовані на основі сучасної системи для збірки проєктів Vite (віт), яка забеспечує неймовірну швидкість враховуючи кількість функционалу.

Компонентний підхід до усього

Кожна частина інтерфейсу, кожен окремий ефект, кожен окремий функціонал структурно відокремлений в папку з власними HTML/SCSS/JS файлами, та за потреби міттєво підключається в проєкт при використанні.

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

Я подумав, чому б не навчити функціонал ЧФ4 “спілкуватися” (звітувати) про свою роботу користувачеві в консолі? Це дуже зручно в процесі розробки та має навчальний ефект. Звісно, цього помічника можна вимкнути як в режимі розробки так і в режимі продакшн.

Список постійно поповнюватиметься новими можливостями. Слідкуйте за оновленнями.
Дякую за підтримку каналу “Фрілансер по життю” та безкоштовного навчального контенту!

🤟 Навчайся розвивайся та пам’ятай – живи, а працюй у вільний час!