Juste assez de JavaScript
Là où Feitio utilise des scripts, ce que le navigateur fait déjà tout seul, et les règles pour ne pas en faire trop.
Sur cette page
Le principe
Feitio utilise JavaScript là où cela améliore l'écran et n'a pas besoin de fonctionner sans lui. Ce qui reste à l'extérieur est l'excès : une grande bibliothèque pour un petit effet, un script sur chaque page par habitude, tout l'écran construit dans le navigateur alors que le serveur le livrerait prêt.
D'abord le navigateur
Avant d'écrire un script, vérifiez si le navigateur le fait déjà. Ce qu'il fait tout seul arrive accessible : clavier, lecteur d'écran et focus.
| Composant | Le navigateur le fait | L'ajout du script |
|---|---|---|
| Drawer | le popover du navigateur : s'ouvre, se ferme avec Esc et un clic en dehors | aucun |
| Dialog | le <dialog> du navigateur, avec showModal() | une ligne pour ouvrir |
| Details | le <details> du navigateur | l'animation d'ouverture et de fermeture |
| AppShell | — | l'en-tête qui se cache au défilement, sur mobile |
| ScrollFade, BackToTop | — | affiché lorsqu'ils sont appliqués ; défilement fluide vers le haut |
| StatusOverlay | — | les états de chargement, terminaison et erreur |
| CodeBlock | — | copie et couleurs du code |
Règles
- Aucune API de navigateur pendant que le composant est en construction. La page arrive prête depuis le serveur ; le script arrive plus tard et n'ajoute que.
- Le mouvement réduit s'applique aux scripts également : pas d'animation manuelle lorsque le système demande moins de mouvement.
- Les scripts ne retirent jamais le clavier ni le lecteur d'écran. Si l'élément du navigateur l'a fait, il le continue de faire.
- Petit et proche de son utilisateur : le script d'un composant est livré avec lui, pas dans un bundle pour tout le site.