За эти 2 часа в сборку добавил:

1️⃣ CSS modules
2️⃣ Роутинг
3️⃣ Ленивые чанки
4️⃣ Размер бандла
5️⃣ Bundle analyzer

Сборка почти готова 🧑‍💻🚀

Добавил Алиасы для js и ts , теперь пути будут выглядеть аккуратно

Я изучаю Vue! 🥳
Настроил окружение и создал папку для нового проекта. В ближайший месяц буду пилить на нём полноценное веб-приложение — интернет-магазин кофе ☕️
Радует, что фреймворк берёт на себя всю рутину с DOM и делает разработку в разы быстрее. Дальше — больше! 🚀

Что сделано:

1️⃣ Настроил роутеры во Vue, теперь переключение между страницами происходит без перезагрузки , контент генерируется динамически.
2️⃣ Добавил роутеры только для 2-х страниц, для других добавлю позже.

Сделал то же самое с карточками товара

Разобрался с динамическим импортом компонентов для роутера! Теперь компонент будет загружаться только тогда, когда пользователь перейдёт по определённому URL-адресу.

🚀 Переношу проект на Vue 3!
Решил отрефакторить свой старый проект и переписать его на Vue.

Что уже сделал:
Разбил верстку на компоненты (TeamCard и Navbar).
Вынес данные участников в реактивный массив ref() и вывел карточки через v-for.
Передал данные через props в дочерний компонент.
Подключил Роутеры.

Пока храню данные прямо в компоненте, позже планирую вынести всё в Pinia, чтобы сделать архитектуру ещё чище.

🚀 Переписал старый Bootstrap-проект на Vue 3!

Полноценно перевёл сайт в SPA всего за 2 часа. Это моё первое самостоятельное веб-приложение на Vue!

Что сделал в процессе:
Разбил верстку на независимые компоненты.
Настроил Vue Router с динамическим импортом страниц (lazy loading).
Реализовал передачу данных через defineProps и директивы (v-for, :src, :class).

Следующий шаг вынести хранение данных из компонентов в Pinia.
Двигаемся дальше по плану! 💻🔥

🔥 Сделал документацию для своей Gulp-сборки!

Написал подробную и понятную инструкцию по использованию моей Gulp сборки прямо в README.md на GitHub.

Что умеет сборка:
⚡️ Автоматическая компиляция SCSS в CSS и автопрефиксы
🖼 Сжатие и конвертация изображений в WebP/JPG
🔤 Быстрая конвертация TTF-шрифтов в WOFF/WOFF2 в одну команду
🧩 HTML-инклюды для удобной модульной верстки
🎯 Автоматическая генерация SVG-спрайтов с визуальной шпаргалкой
🔄 Локальный сервер с автообновлением страницы (BrowserSync)

Зайти, посмотреть структуру, протестировать под свои проекты и оценить README можно по ссылке: 👉 здесь

Буду рад вашему фидбеку и звездочкам на репо! ⭐️ В скором времени сниму видеоразбор по этой сборке на YouTube.

Август всё! Вся база закрыта 💪
По планам на август закрыл вообще всё, что задумывал. Месяц выжал на максимум!

Под конец решил закрыть ещё одну мелкую, но частую рутину — написал пару лёгких .bat скриптов для автоматизации. Теперь не нужно руками прописывать одни и те же команды в консоли: запустил батник, и он сам всё делает и пушит на GitHub. Мелочь, а время и нервы экономят знатно.

Дальше — сентябрь и новые задачи. Всех с наступающим! 🔥

Официально стартуем TypeScript 👨‍💻⚡️

Учимся кастовать типы в TS и заставлять компилятор верить нам на слово!

Конструкция as unknown as Type. Она позволяет сбросить текущий тип и принудительно навязать свой.

красиво 🙂‍↔️

Когда пообещал себе за субботу переписать всё на TypeScript и реально это сделал 💻🔥

Целый день сидел в коде, переписал все компоненты и логику. Итог на скрине!
Технически JS тут еще на 4.7% остался только из-за конфига Vite, так что можно считать, что миграция завершена на 100%.

Паттерн Assert Exhaustiveness в TypeScript: заставляем TS искать баги за нас

Представь: у тебя есть union-тип статусов заказа или валют, и ты обрабатываешь их через if или switch. Что произойдет, если через полгода в проект добавят новый статус, а ты забудешь добавить его обработку в функцию? Код тихо вернет undefined и сломает интерфейс.

Чтобы этого избежать, используется паттерн Assert Exhaustiveness:

type Currency = 'RUB' | 'USD' | 'EUR' // Добавили EUR

// Вспомогательная функция для проверки исчерпываемости
// "value: never" работает в редакторе , и подсвечивает ошибку, если не обработали вариант
function assertExhaustiveness(value: never): never {
  // Работает на сервере
  throw new Error(`Необработанный вариант: ${JSON.stringify(value)}`);
}

function getCurrencyChar(currency: Currency) {  
  if (currency === 'RUB') return '₽';
  if (currency === 'USD') return '$';


  // ТУТ TS ВЫДАСТ ОШИБКУ КОМПИЛЯЦИИ:
  // Argument of type 'string' (EUR) is not assignable to parameter of type 'never'.
  // TS буквально заставляет тебя написать еще один if для 'EUR'!

  // Если все варианты обработаны, сюды доходит только 'never'
  return assertExhaustiveness(currency) 
}