Разумный вайб / Дмитрий Лаврик - кодинг

• Понимание клиент-серверного взаимодействия
  Курс именно по веб-разработке. Не так важно, заходите вы со стороны бэкенда или фронтенда, главное, чтобы было понимание общих принципов и терминологии этой сферы.
• Умение писать работающий код, решающий задачи
  Конкретный стек технологий не важен. Node или PHP, Vue или React — не принципиально. Главное, уже быть адекватным программистом, а необходимый минимум знаний по конкретным стекам дадут дополнительные видео.
• Любовь к строгому порядку в коде
  Прежде всего — строгая типизация: Type Hinting в PHP или TypeScript вместо JS. Один лишь TypeScript убирает добрую половину проблем нейросетей.
• Реалистичные ожидания от ИИ
  Мы не мечтаем, что нейросетка напишет за нас весь код, мы просто получаем помощника — сообразительного и неутомимого джуна, которому можно делегировать массу задач.

• Грамотно работать с Claude Code
  Сессии, контекстное окно, постоянная память и Claude.md, субагенты, хуки и навыки — всё это перестанет быть абстрактными словами.
• Создавать архитектуру, которая не позволяет ИИ тупить
  Бэкенд, фронтенд или монолит — нужны точные инструкции и ограничения. Если у нейросети будет возможность сделать лишний шаг в сторону, то она найдёт, где ошибиться. Вопросам архитектуры мы посвятим очень много времени.
• Эффективно организовывать рабочий процесс
  Claude это джун, а мы наставники. Его вход в проект должен быть плавным. Задача, ошибки, обратная связь, исправление инструкций — только так можно обучить нашего джуна.
• Правильно относиться к месту ИИ в разработке
  Как бы ни был хорош Claude, ответственность за код остаётся на программисте. Сбросить рутину на помощника и забить на ревью — большой соблазн, которого мы не допустим.

• Создание аккаунта Anthropic и выбор тарифного плана
• Установка Claude Code CLI
• Рабочий процесс только через CLI, минусы GUI
• Плагин VS Code: установка и подключение

• Что такое сессия и как она работает
• Очистка сессии: когда и зачем
• Возврат к предыдущей сессии
• Просмотр истории и статистики сессий

• Что такое контекстное окно и почему оно важно
• Как контекст заполняется во время сессии
• Стратегии контроля размера контекстного окна

• claude/settings.json - настройки проекта
• claudeignore - убираем ненужные файлы из контекста
• Claude.md - стабильные инструкции для Claude

• Как работают ограничения на тарифах
• Примеры задач, которые быстро съедают лимиты
• Как формулировать задачи, чтобы оставаться в рамках

• Opus, Sonnet, Haiku — обзор возможностей и стоимости
• Изменение модели в Claude Code
• Мощь или скорость — выбор модели в зависимости от задач

• Как Claude читает и объединяет инструкции
• Инструкции на уровне проекта и на уровне подкаталога
• Общие правила и переопределения на основе контекста

• Как работает система постоянной памяти Claude
• Явная инструкция Claude.md vs накопленный контекст / память
• Практические правила: что кладём в память, а что в Claude.md

• Что такое субагенты и когда Claude их запускает
• Субагенты и контекстное окно
• Обзор популярных готовых субагентов

• Управление поведением и областью видимости субагентов
• Принципы создания пользовательских субагентов
• Написание эффективных промптов для субагентов

• Что такое навыки (skills) и как Claude их применяет
• Встроенные и кастомные слэш-команды
• Компоновка субагентов и навыков в воркфлоу

• Что такое MCP и как он расширяет возможности Claude
• Подключение MCP-сервера через settings.json
• Популярные MCP-серверы для веб-разработки

• Что такое хуки и когда они срабатывают
• Практические сценарии: автоформатирование, логирование
• Написание и регистрация собственных хуков

• Внутренний цикл рассуждений Claude: планирование → вызовы инструментов → синтез
• Структурирование запросов для минимизации расхода токенов

• Раздельная разработка фронтенда и бэкенда
• Что такое монорепозиторий и когда это имеет смысл
• Как этот выбор влияет на разработку с ИИ

• Валидация: проверка и очистка входных данных
• Сериализация: фильтрация и проверка ответа
• Документация: понятное описание API для клиента

• Что такое DTO: request DTO vs response DTO
• Почему важно разделять схемы запроса и ответа
• Виды документирования: DTO, OpenAPI, типы TypeScript

• Почему типизированный код резко улучшает результаты ИИ
• Как Claude читает типы для определения интерфейса
• Правильные привычки: строгий режим, явные типы, ноль any

• Ручная сборка и автотрансформеры
• Типизированные fetch-клиенты
• Выбор подхода в зависимости от архитектуры

• ENV в клиентских бандлах и публичных репозиториях
• SQL-инъекции и подводные камни ORM
• Claude как ассистент при аудите безопасности

• Организуем жёсткие архитектурные рамки
• Объясняем структуру проекта, описываем ключевые сущности
• Пишем инструкции так, чтобы у типичных задач был ровно один стиль решения

• Сами строим скелет приложения, затем призываем Claude
• Показываем на одной доменной сущности, как кодим сами
• Для любых велосипедов (например, свои хуки / композаблы) создаём примеры использования

• Определяем механику взаимодействия клиента и сервера
• Создаём абстракцию, отвечающую только за взаимодействие
• Изменение API начинается с контракта, а не с кода

• Описание результата, а не процесса проще для ИИ
• Предпочитаем схемы, конфиги, декораторы и т.п.
• Декларативные фреймворки (Vue / React) — короли фронтенда

• С увеличением контекста нейросетки теряют точность
• Разбиваем задачу на шаги, затем делегируем
• Каждый шаг должен иметь понятный и проверяемый результат

• Просим нейросетку составить план
• Изучаем, редактируем, обсуждаем с Claude
• Выполняем шаг за шагом, оценивая промежуточные результаты

• Нативная валидация и сериализация по JSON Schema
• Синтаксис JSON-схем и неудобства их ручного описания
• JSON Schema vs OpenApi: небольшие различия

• Что такое TypeSpec и какие выгоды он нам приносит
• Определение моделей, создание общих типов
• Описание маршрутов и схем для запросов и ответов

• Компиляция TypeSpec в спецификацию OpenAPI
• Автоматический вывод интерактивной документации
• Компиляция и доработка JSON-схем из лаконичного описания

• Как Drizzle вписывается в философию ограничений
• Schema First без генерации тонны типов (привет Prisma)
• Как Claude работает с Drizzle — схема как достаточный контекст

• Реализация ключевых плагинов
• Контроллеры и сервисный слой
• Создание инструкций для Claude под стек

• TypeSpec как полная замена главной серверной триады
• Сравнение размеров TypeSpec и файла OpenAPI
• Как производные TypeSpec сокращают контекст каждой задачи

• Структура папок, выделение ключевых частей приложения
• Стартовый код для router и store
• Продумывание системы работы с авторизацией пользователей
• Выбор и подключение инструментов для UI

• OpenAPI-спецификация бэкенда как источник истины
• Генерация полностью типизированного fetch-клиента
• Паттерн репозиторий как обёртка над fetch-клиентом
• Создание модулей для каждой доменной сущности

• Создание хуков для DI ключевых сервисов через контекст
• Создание хука для получения данных — useAsyncData
• Создание хука для контроля форм — useForm
• Документирование всех велосипедов для Claude

• Правила по именованию компонентов и их props
• Правила использования хуков внутри компонентов
• Реализация помощника для хука useAsyncData
• Создание AuthGuard компонентов

• Описание паттернов применения хуков и компонентов
• Явные запреты на прямое использование fetch
• Предотвращение типичных ошибок Claude: избыточный useEffect, создание компонентов во время рендеринга и др.

• Реализация UI для одной доменной сущности вручную
• Создание хуков на стыке сложного UI и API
• Пробный запуск Claude, оценка результатов
• Доработка инструкций до приемлемого результата

• Почему монолиты сложнее для Claude
• Больший контекст и тесная связанность частей системы
• Примерная оценка количества файлов и объёма кода для типичной CRUD-операции

• Специальный выбор наиболее громоздкого стека технологий
• Разные языки в одном проекте: PHP и JavaScript
• Inertia вместо API, сервер напрямую передаёт props страницам
• Vue с тяжёлой библиотекой компонентов Vuetify

• Laravel Data: типизированные DTO для запросов и ответов
• Валидация и сериализация на основе единого инструмента
• Правила для полей DTO через декларативные атрибуты
• Автоматическая конвертация DTO в TypeScript-типы

• Почему корневой Claude.md должен быть особенно точным
• Вложенные Claude.md по модулям и сущностям
• Реализация навыков (skills) для решения точечных задач
• Как не дать Claude перепутать слои бэкенда и фронтенда

• Генерация TypeScript-хелперов из роутов Laravel
• Устранение захардкоженных адресов на стороне Vue
• Инструкции по своевременному перезапуску генераторов

• Усиление Laravel: Spatie Query Builder и Spatie Permission
• Создание хелперов и инструкций на стыке бэкенда и фронтенда
• Генерация более 2000 строк рутинного кода за 10 минут

• Claude изначально ничего не знает о наших предпочтениях
• Роль программиста на старте: наставник, а не босс
• Без образца от нас Claude не угадает стиль и требования — скелет и примеры реализуем сами

• Рабочий режим: задача → ошибка → обратная связь → результат → новое правило в CLAUDE.md
• Когда цикл правильный, Claude делает всё меньше ошибок
• Инструкции накапливаются, образуя полноценный гайд

• Что происходит, когда Claude становится достаточно хорош, чтобы ревью казалось ненужным
• Незаметная деградация разработчика: от доверия Claude к лени проверять его результат
• На дистанции нейросетка ошибётся. Не если, а когда.

• Claude может писать код, а уволить могут только программиста
• Относимся к результату ИИ как к PR джуниора — всегда стоит окинуть критическим взглядом
• Как оставаться искренне вовлечённым в процесс, даже если Claude не ошибался давным-давно

• Траектория развития возможностей моделей
• Оценка риска полной замены программистов
• Глубокое понимание инструмента по мере роста его мощи

• Математика ИИ-компаний: пузырь или путь к AGI
• Что может произойти с воркфлоу, полностью построенными вокруг дорогой модели

Дмитрий Лаврик - Современная вёрстка (2023)

Продвинутая программа по HTML и CSS

Изучаем безальтернативные темы Flexbox и Grid Layout, осваиваем прикладные инструменты, а затем разбираемся в битве различных подходов к организации кода.

Программа курса:

21.02 – урок 1

• Хитрости и нюансы Flexbox
• Фокусы flex-grow
• Идеальные выравнивания
• Код без media-запросов: за и против
• Эмуляция сетки на flex

24.02 – урок 2

• CSS Grid Layout - основы
• Grid Layout vs Flexbox
• Контрейнер, строки и столбцы
• Управление размерами элементов
• Создание именованных зон

28.02 – урок 3

• CSS Grid Layout - практика
• Вёрстка внешнего каркаса
• Примеры сложных элементов
• Магия minmax, auto-fill и fr
• Сочетание Grid Layout и Flexbox

03.03 – урок 4

• Сборка проекта с Vite
• Основы работы с npm
• Организация структуры проекта
• Основные плагины для Vite
• Настройка Postcss

07.03 – урок 5

• Концепция чистой вёрстки
• Семантические классы
• Архитектурные слои кода
• Выделение общих классов
• BEM vs модульный CSS

10.03 – урок 6

• Борьба с дублирующимся кодом
• Vite + препроцессоры
• Простое использование less ( scss etc )
• Mixins vs Extends
• Smartgrid для быстрой сетки

14.03 – урок 7

• Переход на тёмную сторону
• Концепция атомарных классов
• Подключение и настройка Tailwind
• Шаблонизация html – pug
• Вёрстка с Tailwind

17.03 – урок 8

• Tailwind и адаптивная вёрстка
• Как выбирать подход для проекта
• Подведение итогов
• Разбор финальных ДЗ
• Темы для дальнейшего развития

Дмитрий Лаврик - JavaScript для верстальщиков (2020)

Цель курса:
Научить верстальщика спокойно и без лишней нервотрёпки решать типичные jаvascript-овые задачи, необходимые при вёрстке странички.

При этом особое внимание уделяется пониманию процессов. Например, мы не просто изучаем возможности библиотеки jQuery, мы сначала делаем на неё пародию, чтобы понять, как вся эта магия работает изнутри, и только потом переходим к самой библиотеке.

Программа курса
Принципиально новая, обновлена в августе 2020

Урок 1. Основы языка.
Способы подписки на события
On vs addEventListener
Области видимости переменных
Замыкания, работа с контекстом
События для группы элементов
Работа с data-атрибутами

Урок 2. Работа с событиями.
Атрибуты vs свойства
Работа с событиями
Изучение event-объекта
Отмена стандартной реакции
Всплытие событий
this, target и currentTarget

Урок 3. Решение типовых задач.
Валидация формы
Создание ЧАВО
Создание слайдера фотографий
Меню и плавная прокрутка страницы
jаvascript и CSS-анимации

Урок 4. Оптимизация решения задач.
Throttling и debouncing
Функции-помощники для работы с DOM
Основы ООП в ES6+
Классы и объекты
Свойства и методы

Урок 5. Практика и нюансы ООП.
Пример таймера обратного отсчёта
Фокусы с потерей контекста
Контекст и стрелочные функции
Наследование классов
Объекты и прототипы

Урок 6. Работа с библиотеками.
Велосипеды vs поиск готовых решений
Изучение типичной документации
Параметры, события и коллбэки
Примеры популярных инструментов
Чистый js vs экосистема jQuery

Урок 7. Сборка проекта.
Node.js, gulp и webpack
Работа с npm
Удобная сборка проекта
Настройка gulp + webpack + babel
Основы работы с ES-модулями

Урок 8. Пути развития в javacript.
Подведение итогов курса
Траектории дальнейшего развития
JS для вёрстки vs frontend-разработка
Простой js и jQuery, примеры кода
Vue.js как первый фреймворк, примеры кода

Дмитрий Лаврик - Javascript Интенсивный базовый курс

Цель курса:

Научить спокойно и без лишней нервотрёпки решать типичные jаvascript-овые задачи.
Полученные навыки можно использовать как для решения задач при вёрстке страницы, так и в качестве опоры для перехода к frontend-разработке и миру современных jаvascript-фреймворков.

Дмитрий Лаврик / Vue 3, 2021 - Vue Advanced продвинутый курс по разработке SPA (2021)

NEW! Продвинутый курс по разработке SPA от Дмитрия Лаврика

Цель курса
Рассмотреть решение главных задач, возникающих при создании Single Page Application, таких как построение архитектуры приложения, работа с пользователями и авторизационными токенами, server side rendering и т.п.

Для продуктивного участия желательно прохождение базового курса по Vue. Однако, если вы уже знакомы с основами работы с vuex, vue-router, axios или fetch, можно начинать с текущей ступени.

За новшествами следуем аккуратно – в курсе используется Vue 3, но с классическим options api.

Урок 1
Анализ SPA после vue level 1
Улучшение архитектуры приложения
Адекватная работа с axios
Обработка и красивый показ ошибок
Нюансы работы с Vue Router
Дочерние маршруты, хуки и события

Урок 2
Работа с авторизацией в SPA
Создание модуля vuex/user
Взаимодействие с серверным API
Создание закрытых страниц
Meta-данные маршрутов
Проверка прав доступа

Урок 3
Улучшение тренировочного SPA
Изучение серверного API
Авторизация и JWT-токены
Личный кабинет пользователя
Модуль рейтинга товаров
SPA и проблемы с SEO. Пререндеринг

Урок 4
Идеи server side rendering
Сервер на node.js + express
SSR шаг за шагом на простом примере
Vue Server Renderer
Client и server entries
Настройка vue-cli и webpack

Урок 5
SSR в более сложном SPA
Проблемы синглтонов из es-модулей
Работа с роутером и хранилищем
Настройка axios
Модуль vuex для head-раздела
Наполнение базового шаблона

Урок 6
Схемы дополнительной оптимизации
Настройка кода ответа сервера
Предзагрузка данных и состояния
Кэширование запросов
Кэширование страниц
Разделение CSS (file, head style)

Урок 7
Доработка тренировочного SPA
Гидратация клиентской части
Альтернативная сборка проекта
SSR и WebpackManifestPlugin

Урок 8
Подведение итогов
Перевод проекта на Vue 2
Выборочный SSR для страниц
Идеи SSR в не node-окружениях

Дмитрий Лаврик - Классическая вёрстка (2021)

Классическая вёрстка - Дмитрий Лаврик.
Базовая программа по HTML и CSS.
Новый курс!

На курсе изучаются ключевые и нестареющие темы вёрстки, которые помогают новичкам создавать адекватную разметку.

Курс предназначен для тех, кто:
Уже познакомился с простейшими основами HTML и CSS
Не понимает, как расставлять элементы на нужные места
Хочет освоить главные темы и приёмы языков HTML и CSS

ПРОГРАММА КУРСА:
22.01 – урок 1

• 
  Теги оформления текста
  • Заголовки и их грамотное использование
  • Списки, формы, ссылки
  • Абсолютные и относительные пути
  • Правила вложенности тегов

26.01 – урок 2

• 
  Разнообразные CSS-селекторы
  • Псевдоэлементы и псевдоклассы
  • Приоритеты применения стилей
  • Популярные CSS-свойства
  • Основные единицы измерения

29.01 – урок 3

• 
  Классическая блочная модель
  • display: block, inline, inline-block
  • Внутренние и внешние отступы
  • Нюансы вертикальных отступов
  • Определение размеров элементов
  • Размеры и свойство box-sizing

02.02 – урок 4

• 
  Создание базовой разметки
  • Стартовый сброс стилей
  • Макет: фиксированный, резиновый, адаптивный
  • Структура внешних контейнеров
  • Обтекаемые элементы
  • Простейшие media-запросы

5.02 – урок 5

• • Основы применения Flexbox
  • Размеры и выравнивания элементов
  • Эффективная стратегия вёрстки
  • Контейнер, строка и столбец
  • Положительные и отрицательные отступы
  • Расположение элементов по сетке

09.02 – урок 6

• 
  Адаптивная вёрстка
  • Классический подход vs MobileFirst
  • Работа с макетом
  • Взаимодействие дизайнера и верстальщика
  • Нарезка в avocode
  • Подключение шрифтов

12.02 – урок 7

• 
  Примеры решения популярных проблем
  • Фиксированные и резиновые элементы
  • Позиционирование и адаптивное меню
  • Фоновые картинки у секций

16.02 – урок 8

• 
  Разбор финальных ДЗ
  • Готовая сборка проекта с Gulp
  • Список тем для изучения CSS
  • Направления дальнейшего развития