HTMX с нуля. Шаблоны на Jinja, потому что шаблонизатора лучше просто не существует. Бекенд на Flask, потому что зачем платить больше. Нам нужны просто шаблоны.

Все мои ссылки: https://taplink.cc/mahenzon

Поддержать выход роликов (зарплата монтажеру)
- единоразово без комиссии https://tinkoff.ru/cf/6kbKWtKhapM
- на Boosty https://boosty.to/mahenzon

С вопросами по программированию приходите в чат при Телеграм канале:
- https://t.me/Khorenyan

Весь код со всеми ветками доступен тут:
https://github.com/mahenzon/flask-and...

Метки:
00:00 0. HTMX. Зачем?
05:20 1. Инициализация Flask приложения
15:59 2. Установка HTMX
18:52 3. Простейшие примеры HTMX
29:07 Первое применение HTMX: ping
34:15 Обработка наведения мыши: hover event
41:06 Замена внешнего HTML: hx-swap outerHTM
43:36 Промежуточный итог быстрого знакомства с HTMX
45:00 Обработка сочетания клавиш
47:14 Подытог
48:40 4. Кликер на HTMX
52:52 Как без HTMX сделать подобное
54:54 Храним данные в памяти
56:44 Отображаем и обрабатываем форму
58:58 Переделываем на HTMX. Какие преимущества и какие сложности?
01:04:51 Это точно HTMX запрос? Совместимость и определение
01:08:10 Подытог
01:09:12 5. Встраивание страниц при помощи HTMX
01:11:42 Подгрузка сразу после загрузки страницы
01:12:15 Почему не подходит встраивание на уровне шаблонов
01:17:13 Подытог
01:18:09 6. HTMX boosts
01:22:30 Почему надо учитывать Hx-Boosted
01:24:26 Подытог
01:24:58 7. Получение списка товаров
01:26:00 Базовые шаблоны и представления. Blueprint для products
01:30:56 Простейшее хранилище данных
01:35:09 Отображение списка товаров
01:35:40 Добавление товаров: обычная форма
01:39:46 Сложности с обычной формой
01:42:32 Подытог
01:42:55 8. Добавление товара
01:44:08 Обновление формы под HTMX и подгрузка списка
01:47:47 Очистка формы после успеха: hx-on::
01:51:38 Подытог
01:52:55 Сервер диктует поведение клиенту
01:53:49 HTMX swap out of band
01:56:38 Подытог
01:57:16 Поведение указано в ответе сервера - oob update
02:00:30 Не удалять текущий элемент
02:01:30 Подытог
02:02:35 Валидация формы и отображение ошибок
02:07:09 Обработка статус кода
02:09:04 Спасибо (нет) хрому за кэширование
02:10:25 Наш первый джаваскрипт (просто копипастим)
02:11:02 Отображение ошибки
02:13:05 Подытог
02:14:03 Новый подход к работе с формой
02:16:40 Подытог
02:17:50 9. Flask-WTF (What The Forms)
02:20:20 Проверка на уникальность имени
02:23:57 Отображение новой формы
02:26:15 Макросы в Jinja
02:29:35 Отображение формы и ошибок
02:31:35 CSRF и секретный ключ
02:32:10 Обязательные поля, валидация, ошибки формы, очистка после успешной публикации
02:34:55 Подытог по Flask-WTF
02:37:26 10. HTMX Headers
02:38:28 Отключение проверки CSRF токена
02:39:25 Отправка заголовков авторизации в HTMX запросе
02:43:10 Подытог
02:44:20 11. Удаление и анимации
02:45:36 Кнопка для удаления товара
02:51:02 Успешный статус 204 для замены (и удаления)
02:52:45 Удаление ближайшего тега на странице
02:53:34 Подытог
02:54:48 Удаление ближайшего элемента по классу
02:55:24 Подытог
02:56:34 Анимация. Статика для использования с hx-indicator
03:05:36 Smart move программиста чтобы не уволили
03:08:08 htmx-swapping: анимация пропадания / появления
03:11:54 Подытог по анимации удаления (загрузка и растворение)
03:13:25 12. HTMX Update - обновление товара
03:13:55 Представление деталей товара
03:19:00 Подытог
03:19:20 Шаблон страницы обновления товара
03:21:30 Обработка обновления товара
03:31:29 Подытог
03:32:32 13. Удаление товара со страницы деталей и возвращение к списку товаров
03:37:10 Сервер решает, перенаправлять ли клиент
03:39:20 Вспоминаем статус коды перенаправления
03:40:50 Замена адреса через hx-push-url и замена всего тела страницы
03:44:02 Подытог
03:45:00 Подтверждение удаления (диалоговое окно)
03:46:46 14. Пагинация reveal: load + paginate
03:48:00 Заполняем хранилище случайными данными
03:50:40 Подытог
03:51:06 Пагинация page + per_page
03:54:10 Подгрузка новых элементов при прокрутке
04:00:50 Анимация при ожидании загрузки новой порции
04:02:35 Подытог
04:04:18 15. Пагинация кнопками
04:04:54 Шаблоны для постраничной пагинации с кнопками
04:11:26 Отображение страницы и кнопок
04:12:58 Анимация загрузки страницы
04:14:48 Неправильная загрузка при "перенаправлении"
04:16:23 Подытог
04:18:00 Итоги
04:19:46 СПАСИБО