Итоги вчерашнего заплыва в код 💻
Перевел проект на SCSS, раскидал общие стили, настроил шапку, карточки услуг и сверстал несколько секций. Две из них — чисто своими силами, без подсказок из видео.
Приятно видеть, как проект растёт не только в браузере, но и в истории Git-коммитов. Работаем дальше!
Перевел проект на SCSS, раскидал общие стили, настроил шапку, карточки услуг и сверстал несколько секций. Две из них — чисто своими силами, без подсказок из видео.
Приятно видеть, как проект растёт не только в браузере, но и в истории Git-коммитов. Работаем дальше!
Проект готов, код написан, коммит отправлен! 😎
Финальная статистика репозитория выглядит вот так (смотрите скрин). На удивленивам
SCSS перевесил HTML (50,6% против 44,6%). Стилизация сожрала кучу времени, но оно того стоило.
Первые шаги в JavaScript (4,8%) тоже сделаны — база положена, дальше этот процент будет только расти.
Двигаемся дальше, этот этап официально закрыт! Как вам статистика?
Финальная статистика репозитория выглядит вот так (смотрите скрин). На удивленивам
SCSS перевесил HTML (50,6% против 44,6%). Стилизация сожрала кучу времени, но оно того стоило.
Первые шаги в JavaScript (4,8%) тоже сделаны — база положена, дальше этот процент будет только расти.
Двигаемся дальше, этот этап официально закрыт! Как вам статистика?
Начал собирать свою универсальную сборку на Gulp
Решил автоматизировать всю рутину. Пишу таски, чтобы автоматически сжимались картинки, компилировались стили, объединялись скрипты и обновлялась страница прямо в браузере во время верстки.
На фото — текущая структура
Решил автоматизировать всю рутину. Пишу таски, чтобы автоматически сжимались картинки, компилировались стили, объединялись скрипты и обновлялась страница прямо в браузере во время верстки.
На фото — текущая структура
gulpfile.js. Настраиваю автоматический деплой и слежку за файлами через watch. Как допишу — залью репозиторий на гитхаб.🚀 Gulp-сборка официально готова и запушена на GitHub!
Сегодня плотно посидел и докрутил до идеала свой стартовый шаблон для фронтенд-верстки. Пришлось немного повозиться с версиями плагинов (классика Node.js), но в итоге всё завелось как надо.
Что умеет сборка на данный момент:
* Компилирует SCSS/SASS в чистый и сжатый CSS.
* Сама расставляет вендорные префиксы для старых браузеров (Autoprefixer).
* Склеивает и минифицирует JS-файлы (Concat + Uglify).
* Из коробки поддерживает адаптивный слайдер Swiper.
* Автоматически обновляет страницу в браузере при любом изменении кода через BrowserSync.
Планирую добавить оптимизацию картинок и шрифтов, но база уже полностью рабочая. Буду использовать её как донора для всех своих будущих сайтов.
Чекайте репозиторий, зацените README и код: 👉 https://github.com/xycu2/gulp-assembly
(сборку буду дополнять)
Сегодня плотно посидел и докрутил до идеала свой стартовый шаблон для фронтенд-верстки. Пришлось немного повозиться с версиями плагинов (классика Node.js), но в итоге всё завелось как надо.
Что умеет сборка на данный момент:
* Компилирует SCSS/SASS в чистый и сжатый CSS.
* Сама расставляет вендорные префиксы для старых браузеров (Autoprefixer).
* Склеивает и минифицирует JS-файлы (Concat + Uglify).
* Из коробки поддерживает адаптивный слайдер Swiper.
* Автоматически обновляет страницу в браузере при любом изменении кода через BrowserSync.
Планирую добавить оптимизацию картинок и шрифтов, но база уже полностью рабочая. Буду использовать её как донора для всех своих будущих сайтов.
Чекайте репозиторий, зацените README и код: 👉 https://github.com/xycu2/gulp-assembly
(сборку буду дополнять)
GitHub
GitHub - xycu2/gulp-assembly
Contribute to xycu2/gulp-assembly development by creating an account on GitHub.
This media is not supported in your browser
VIEW IN TELEGRAM
🕹 Time to play! Запустил свою мини-игру в ТГ
Пока все только говорят о разработке, я взял React + JS и собрал полноценное веб-приложение прямо внутри мессенджера.
Хостинг заряжен на 2 года вперёд, так что сервак точно выдержит любой наплыв! 😎
🚀 Сыграть прямо сейчас: @VinGed_bot
📁 Посмотреть open-source код: здесь
сможете побить мой личный рекорд? Заходите в бота, тестируйте геймплей и кидайте свои скрины с результатами в комменты. Если вдруг найдёте баги — пишите, буду фиксить! 👇
Пока все только говорят о разработке, я взял React + JS и собрал полноценное веб-приложение прямо внутри мессенджера.
Хостинг заряжен на 2 года вперёд, так что сервак точно выдержит любой наплыв! 😎
🚀 Сыграть прямо сейчас: @VinGed_bot
📁 Посмотреть open-source код: здесь
Challenge:
сможете побить мой личный рекорд? Заходите в бота, тестируйте геймплей и кидайте свои скрины с результатами в комменты. Если вдруг найдёте баги — пишите, буду фиксить! 👇
🚀 Планы на прокачку моей Gulp-сборки: avif, svg sprite и полная автоматизация!
Всем привет! Неделю назад я закончил базовую версию своей Gulp-сборки, но и не думал её забрасывать. Проект живет! Сейчас я набрасываю план крупного обновления, которое полностью автоматизирует всю рутину по максимуму.
Вот что я планирую добавить в ближайшее время и залить на GitHub:
📸 Продвинутая работа с графикой: Хочу уйти от тяжелых .png и .jpg. В планах настроить автоматизацию картинок и их конвертацию не только в .webp, но и в ультра-современный формат .avif для максимального сжатия без потери качества.
🦄 Автоматические SVG-спрайты: Хочу сделать так, чтобы все векторные иконки автоматически собирались в один оптимизированный svg sprite. Это супер-полезно для ускорения загрузки сайтов и удобства в верстке.
⚡️ Полная автоматизация шрифтов: Больше никакого ручного конвертирования через сторонние сайты. Сборка будет сама брать исходники .ttf/.otf, переводить их в веб-форматы .woff и .woff2 и автоматически подключать в стили.
🪵 Компонентный подход (include файлов): Настрою сборку HTML так, чтобы можно было разбивать код на отдельные кусочки (шапка, подвал, блоки) и легко инклудить их в нужные страницы.
Скоро засяду за код, реализую всё это и обновлю репозиторий. Как вам такой набор фич? Что бы вы еще добавили в идеальную сборку? 👇
Всем привет! Неделю назад я закончил базовую версию своей Gulp-сборки, но и не думал её забрасывать. Проект живет! Сейчас я набрасываю план крупного обновления, которое полностью автоматизирует всю рутину по максимуму.
Вот что я планирую добавить в ближайшее время и залить на GitHub:
📸 Продвинутая работа с графикой: Хочу уйти от тяжелых .png и .jpg. В планах настроить автоматизацию картинок и их конвертацию не только в .webp, но и в ультра-современный формат .avif для максимального сжатия без потери качества.
🦄 Автоматические SVG-спрайты: Хочу сделать так, чтобы все векторные иконки автоматически собирались в один оптимизированный svg sprite. Это супер-полезно для ускорения загрузки сайтов и удобства в верстке.
⚡️ Полная автоматизация шрифтов: Больше никакого ручного конвертирования через сторонние сайты. Сборка будет сама брать исходники .ttf/.otf, переводить их в веб-форматы .woff и .woff2 и автоматически подключать в стили.
🪵 Компонентный подход (include файлов): Настрою сборку HTML так, чтобы можно было разбивать код на отдельные кусочки (шапка, подвал, блоки) и легко инклудить их в нужные страницы.
Скоро засяду за код, реализую всё это и обновлю репозиторий. Как вам такой набор фич? Что бы вы еще добавили в идеальную сборку? 👇
xycu2.rar
Photo
Логи за день: победил капризный Gulp и настроил сжатие картинок 🛠🧑💻
Сегодня был плотный бой со сборщиком. Задача минимум выполнена — настроил автоматическую оптимизацию графики для будущих проектов, но не обошлось без приключений.
Что сделано:
✅ Полностью победил проблему с импортами старых и новых ES-модулей в Node.js (привет [Module: null prototype] и костылям с .default).
✅ Разбил единый тяжелый таск обработки изображений на независимые потоки — код теперь чистый, логичный и масштабируемый.
✅ Настроил автоматическую генерацию современных WebP картинок и жесткое сжатие оригиналов (PNG/JPG) через gulp-imagemin. Всё летает и компилируется за пару секунд!
Стена, в которую уперся: Связка с gulp-avif наотрез отказалась заводиться. Постоянно сыпалась системная ошибка Input buffer contains unsupported image format. Опытным путем проверено: переименование файлов, очистка метаданных и фильтрация скрытого мусора через фигурные скобки {png,jpg,jpeg} не помогли.
Судя по всему, баг сидит глубоко внутри самого плагина или его бинарника avifenc, который конфликтует с моим окружением Node.js.
План действий: Пока что просто исключил AVIF из параллельного таска. Связки WebP + сжатый PNG/JPG для современных сайтов сейчас хватает с головой. Чуть позже, на свежую голову, попробую докопаться до этой проблемы (может, через откат версий или пересборку нативных модулей), а пока — сборка работает без ошибок, файлы жмутся, и это победа! 🚀
Сегодня был плотный бой со сборщиком. Задача минимум выполнена — настроил автоматическую оптимизацию графики для будущих проектов, но не обошлось без приключений.
Что сделано:
✅ Полностью победил проблему с импортами старых и новых ES-модулей в Node.js (привет [Module: null prototype] и костылям с .default).
✅ Разбил единый тяжелый таск обработки изображений на независимые потоки — код теперь чистый, логичный и масштабируемый.
✅ Настроил автоматическую генерацию современных WebP картинок и жесткое сжатие оригиналов (PNG/JPG) через gulp-imagemin. Всё летает и компилируется за пару секунд!
Стена, в которую уперся: Связка с gulp-avif наотрез отказалась заводиться. Постоянно сыпалась системная ошибка Input buffer contains unsupported image format. Опытным путем проверено: переименование файлов, очистка метаданных и фильтрация скрытого мусора через фигурные скобки {png,jpg,jpeg} не помогли.
Судя по всему, баг сидит глубоко внутри самого плагина или его бинарника avifenc, который конфликтует с моим окружением Node.js.
План действий: Пока что просто исключил AVIF из параллельного таска. Связки WebP + сжатый PNG/JPG для современных сайтов сейчас хватает с головой. Чуть позже, на свежую голову, попробую докопаться до этой проблемы (может, через откат версий или пересборку нативных модулей), а пока — сборка работает без ошибок, файлы жмутся, и это победа! 🚀
Победа над Gulp 🛠
Сегодня ночью случился настоящий баттл с кодом. Решил оптимизировать картинки в проекте, чтобы всё летало, но что-то пошло не так: после сжатия через Gulp файлы стали весить больше, чем оригиналы. Сказать, что я был в шоке — ничего не сказать. 🤯
Полдня ушло на то, чтобы понять, в чём прикол. Пришлось откатывать коммиты, пришлось зайти на Хабр и шаманить с кодировкой и версиями плагинов. Но я докопался до истины, настроил таски как надо и полностью закрыл эту проблему.
Все пруфы и историю этой эпичной борьбы уже запушил на Гитхаб теперь там идеальный рабочий код. 🦾
Сегодня ночью случился настоящий баттл с кодом. Решил оптимизировать картинки в проекте, чтобы всё летало, но что-то пошло не так: после сжатия через Gulp файлы стали весить больше, чем оригиналы. Сказать, что я был в шоке — ничего не сказать. 🤯
Полдня ушло на то, чтобы понять, в чём прикол. Пришлось откатывать коммиты, пришлось зайти на Хабр и шаманить с кодировкой и версиями плагинов. Но я докопался до истины, настроил таски как надо и полностью закрыл эту проблему.
Все пруфы и историю этой эпичной борьбы уже запушил на Гитхаб теперь там идеальный рабочий код. 🦾
Прокачал сборку Gulp до космических скоростей: как экономить время на сжатии картинок ⚡️
Помните мой недавний пост про боль со сжатием картинок? Так вот, я пошел дальше.
Раньше при каждом запуске таска gulp images сборщик послушно шуршал по всей папке src и заново пережимал ВСЕ картинки. Когда их две-три — пофиг. Но когда проект разрастается, сидеть и ждать по 15–20 секунд на каждый чих — это непозволительная роскошь для нервной системы.
Поэтому я внедрил в сборку плагин gulp-newer.
В чём фишка: Он сравнивает файлы в исходниках (src) и в готовой папке (dist). Если картинка уже была сжата и не менялась, Gulp её просто пропускает. На обработку отправляются только новые или измененные файлы.
Результаты теста (закинул 1 новую картинку):
Было: ~13 секунд (Gulp пересжимал вообще всё)
Стало: 876 миллисекунд! 🚀 (меньше секунды!)
Таск convertWebp теперь пролетает за 213 мс, а imagemin обрабатывает ровно 1 новый файл, экономя кучу времени.
Сборка официально стала летать, а я сэкономил себе часы ожидания в будущем. Юзайте gulp-newer, берегите свои нервы! 😎
Помните мой недавний пост про боль со сжатием картинок? Так вот, я пошел дальше.
Раньше при каждом запуске таска gulp images сборщик послушно шуршал по всей папке src и заново пережимал ВСЕ картинки. Когда их две-три — пофиг. Но когда проект разрастается, сидеть и ждать по 15–20 секунд на каждый чих — это непозволительная роскошь для нервной системы.
Поэтому я внедрил в сборку плагин gulp-newer.
В чём фишка: Он сравнивает файлы в исходниках (src) и в готовой папке (dist). Если картинка уже была сжата и не менялась, Gulp её просто пропускает. На обработку отправляются только новые или измененные файлы.
Результаты теста (закинул 1 новую картинку):
Было: ~13 секунд (Gulp пересжимал вообще всё)
Стало: 876 миллисекунд! 🚀 (меньше секунды!)
Таск convertWebp теперь пролетает за 213 мс, а imagemin обрабатывает ровно 1 новый файл, экономя кучу времени.
Сборка официально стала летать, а я сэкономил себе часы ожидания в будущем. Юзайте gulp-newer, берегите свои нервы! 😎