Весь HTMX с нуля! Jinja шаблоны + Flask backend на Python

HTMX с нуля. Шаблоны на Jinja, потому что шаблонизатора лучше просто не существует. Бекенд на Flask, потому что зачем платить больше. Нам нужны просто шаблоны. Все мои ссылки: Поддержать выход роликов (зарплата монтажеру) - на Boosty С вопросами по программированию приходите в чат при Телеграм канале: - Весь код со всеми ветками доступен тут: Метки: 00:00:00 0. HTMX. Зачем? 00:05:20 1. Инициализация Flask приложения 00:15:59 2. Установка HTMX 00:18:52 3. Простейшие примеры HTMX 00:29:07 Первое применение HTMX: ping 00:34:15 Обработка наведения мыши: hover event 00:41:06 Замена внешнего HTML: hx-swap outerHTM 00:43:36 Промежуточный итог быстрого знакомства с HTMX 00:45:00 Обработка сочетания клавиш 00:47:14 Подытог 00:48:40 4. Кликер на HTMX 00:52:52 Как без HTMX сделать подобное 00:54:54 Храним данные в памяти 00:56:44 Отображаем и обрабатываем форму 00:58:58 Переделываем на HTMX. Какие преимущества и какие сложности? 01:01:10 Заменять целевой тег 01:04:51 Это точно HTMX запрос? Совместимость и определение 01:08:10 Подытог 01:09:12 5. Встраивание страниц при помощи HTMX 01:11:42 Подгрузка сразу после загрузки страницы 01:12:15 Почему не подходит встраивание на уровне шаблонов 01:13:47 Встраивание 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:55:14 Добавление before end без указания oob 01:56:38 Подытог 01:57:16 Поведение указано в ответе сервера - oob update 02:00:30 Не удалять текущий элемент 02:01:30 Подытог 02:02:35 Валидация формы и отображение ошибок 02:07:09 Обработка статус кода 02:09:04 Спасибо (нет) хрому за кэширование 02:09:54 Меняем порт, чтобы хром не догадался 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:10 Валидация данных через форму 02:23:57 Отображение новой формы 02:26:15 Макросы в Jinja 02:29:35 Отображение формы и ошибок 02:31:35 CSRF и секретный ключ 02:32:10 Обязательные поля, валидация и ошибки формы 02:33:34 Очистка формы после успешной публикации 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:48:24 Удаление товара 02:51:02 Успешный статус 204 для замены (и удаления) 02:52:45 Удаление ближайшего тега на странице 02:53:34 Подытог 02:54:48 Удаление ближайшего элемента по классу 02:55:24 Подытог 02:56:34 Анимация. Статика для использования с hx-indicator 03:03:40 Отображение анимации 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:28:35 Отправка PUT запроса 03:29:35 Обработка обновления без изменения имени 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 СПАСИБО