Formation Htmx : Outils de haute puissance pour le html

Programme de la formation HTMX

Introduction

• Présentation d’HTMX
• Configuration d’HTMX
• Les balises d’ancrage

Installation

• Télécharger une copie
• Via un CDN
• npm
• Webpack

AJAX

• Demandes de déclenchement
  • Modificateurs de déclenchement
  • Filtres de déclenchement
  • Évènements spéciaux
  • Vote
  • Charger l’interrogation
• Indicateurs de demande
• Cibles
• Échanges
  • Échanges de morphes
  • Échanges hors bande
  • Sélection du contenu à permuter
  • Préserver le contenu lors d’un swap
• Synchronisation
• Transitions CSS
• Paramètres
  • Téléchargement de fichier
  • Valeurs supplémentaires
• Confirmation des demandes

Héritage des attributs

• Hisser les attributs dans le DOM pour éviter la duplication de code
• hx-confirm pour appliquer l’attribut à un élément parent
• Annuler l’héritage en ajoutant une unset directive
• Désactiver l’héritage automatique avec hx-disinherit attribut

Booster

• Convertir toutes les balises d’ancrage et tous les formulaires en requêtes AJAX avec l’attribut hx-boost
• Amélioration progressive
  • Utiliser le HTML sémantique autant que possible
  • S’assurer que l’état de la mise au point est visible
  • Associer des étiquettes de texte à tous les champs de formulaire
  • Maximiser la lisibilité de votre application avec des polices

Sockets Web et SSE

• WebSocket
• Évènements envoyés par le serveur

Prise en charge de l’historique

• Spécification de l’élément instantané de l’historique
• Désactiver l’instantané de l’historique

Demandes et réponses

• CORS
• En-têtes de demande
• En-têtes de réponse
• Demander l’ordre des opérations

Animations et extensions

• Utilisation de transitions CSS
• Personnaliser le comportement des bibliothèques
• Extensions incluses

Évènements et journalisation

• Initialiser une bibliothèque tierce avec des évènements
• Configurer une requête avec des évènements
• Modification du comportement d’échange avec les évènements
• Dénomination des évènements
• Journalisation

Débogage

• Créer des démos
  • Exemple de démonstration

hyperscript

• Installation d’hyperscript
• Évènements et hyperscript
• Fonctionnalités intercooler.js et implémentations hyperscript
  • ic-remove-after
  • ic-post-errors-to
  • classe ic-switch