Обмежений доступ для гостей

Вам доступно 3 уроки з цього курсу безкоштовно.

  • Коментарі доступні тільки авторизованим користувачам
  • Прогрес зберігається тільки 0:00
🔒
КурсиFrontend / Astro + HTMX: Сучасний Веб Без Зайвого

Astro + HTMX: Сучасний Веб Без Зайвого

Вигляд:

Модуль 1. Знайомство з Astro

1

Чому Astro змінює все

Переваги Astro підходу

2

Створюємо проект DocuFlow

Ініціалізація проекту

3

Структура проекту

Файли та папки Astro

4

Перший Astro компонент

Створення компонентів

5

Сторінки та маршрутизація

Файловий роутинг

6

Layouts та Slots

Шаблони сторінок

Модуль 2. Глибше в компоненти

7

Props компонентів

Передача даних

8

Стилізація компонентів

CSS в Astro

9

Scoped vs Global CSS

Область видимості стилів

10

Композиція компонентів

Вкладені компоненти

11

Динамічний контент

Вирази та логіка

12

Layout для документації

Будуємо основний шаблон

Модуль 3. Content Collections

13

Що таке Content Collections?

Керування контентом

14

Колекція документації

Налаштування колекції

15

Frontmatter та схеми

Типізація контенту

16

Запити до колекцій

Отримання та сортування

17

Рендеринг Markdown/MDX

Відображення контенту

18

Шаблон сторінки документації

Сторінка для статей

19

Бічна навігація

Sidebar для DocuFlow

Модуль 4. Знайомство з HTMX

20

Чому HTMX? HTML-First підхід

Філософія HTMX

21

Додаємо HTMX до Astro

Інтеграція бібліотеки

22

Перший hx-get запит

Завантаження контенту

23

hx-target та hx-swap

Куди вставляти відповідь

24

Індикатори завантаження

hx-indicator

25

Живий пошук

Пошук без перезавантаження

26

Випадаючий список результатів

Search dropdown

Модуль 5. Інтерактивність з HTMX

27

hx-trigger події

Коли відправляти запити

28

hx-post для форм

Відправка даних

29

Перемикач версій

Version selector

30

Кнопка копіювання коду

Copy code button

31

Це було корисно?

Feedback компонент

32

API для фідбеку

Feedback endpoint

33

Стани успіху та помилки

Обробка відповідей

34

hx-boost для навігації

SPA-подібна навігація

Модуль 6. Astro Islands

35

Архітектура Islands

Часткова гідратація

36

Коли потрібен клієнтський JS

Вибір підходу

37

Директива client:load

Негайна гідратація

38

client:visible для продуктивності

Ліниве завантаження

39

client:idle та client:media

Інші директиви

40

Перемикач теми

Dark/Light mode

41

Зміст з відстеженням скролу

Table of Contents

42

Мобільне меню

Mobile menu toggle

Модуль 7. API та Backend

43

API Routes в Astro

Серверні ендпоінти

44

Search API Endpoint

Пошуковий API

45

Робота з версіями

Мультиверсійна документація

46

Хлібні крихти

Breadcrumb навігація

47

Попередня/Наступна сторінка

Навігація між статтями

48

Редагувати на GitHub

Edit on GitHub посилання

Модуль 8. Просунутий HTMX

49

Polling з hx-trigger

Періодичні запити

50

Валідація форм

Form validation

51

Нескінченний скрол

Infinite scroll

52

Out-of-Band Swaps

hx-swap-oob

Модуль 9. Розширені можливості Astro

53

View Transitions API

Анімації переходів

54

Оптимізація зображень

Image optimization

55

Мультимовна документація

i18n підтримка

56

Генерація Sitemap

SEO sitemap

57

RSS стрічка для Changelog

RSS feed

Модуль 10. Production Ready

58

SEO найкращі практики

Оптимізація для пошуку

59

Аудит продуктивності

Performance та Accessibility

60

Деплой DocuFlow!

Публікація проекту

Коментарі

💬

Коментарі доступні тільки для авторизованих користувачів