Découvrez « le bon HTML » et économisez du JS et du CSS
Par Gaël Poupard
- Conférence (50 mn) :
Le sujet
Le bon HTML vous fait économiser du JavaScript, du CSS, et est accessible. Alors pourquoi se limiter a du mauvais HTML à base de soupe de <div>
et de diarrhée de <section>
et tartiner du .preventDefault()
sur vos écouteurs d’événements ? Voici quelques pistes pour éclairer le sujet.
Les formulaires
- La puissance des type de
<button>
; - Les attributs de
<form>
qui vous épargnent des migraines ; - Les interactions dans les formulaires : autocomplétion, suggestions, personnalisation du clavier virtuel sur smartphone… en HTML !
- Navigation au clavier gratuite, à base d’attributs standards depuis 1994 (
name
,for
/id
) ; - pattern et expressions régulières pour les contraintes sur les champs.
Simplement évoqués :
- Les APIs HTML de gestion des données :
formData
etdataSet
, notamment — vive les attributsdata-*
; - L’API Constraint pour la validation native des formulaires.
Les interactions riches
- Mettre une colonne de tableau en avant ;
- Les éléments HTML modernes :
<details>
et<summary>
,<dialog>
,<output>
… - Les attributs HTML modernes : download (import / export json en 5 lignes de JS), contenteditable (pour du live coding, par exemple !), etc.
Simplement évoqués :
- Les Web Components :
<template>
et<slot>
, Shadow DOM , registre des éléments personnalisés (CustomElementsRegistry
) — oh, et l’attributis
). - quelques autres éléments plus ou moins récents et exotiques.
Les quick-wins performances, simplement évoqué
- Préchargement avec
preload
,prefetch
,preconnect
, etc. - Gestion des thread avec
defer
,async
… mais aussidecoding
,loading
oupriority
! - Ah, et les nonces pour la sécurité — on parle toujours de HTML ;)
Présenté par
Intégrateur web à Nantes, je profite du soleil pendant les conf’ et dis des âneries régulièrement. Les jeux de mots sont notre avenir, ne nous économisons pas.