Il n'y a rien de plus performant que d'utiliser les APIs DOM directement, sans framework.
Cet article regroupe quelques bonnes pratiques si vous avez besoin de performances optimales.
Originale cette faille de sécurité avec les emails HTML, c'est assez malin !
Une collection de 4000+ éléments HTML + CSS (boutons, checkboxes, etc.) à copier/coller dans vos projets.
Via https://korben.info/uiverse-plus-3500-elements-interface-utilisateur-copier-coller-projets-web.html
Les problèmes que posent certains composants natifs du HTML.
Les utiliser est bon pour la sémantique mais pas forcément pour l'expérience utilisateur. Il faut aussi prendre conscience que les développeurs de navigateurs web doivent prendre d'extrêmes précautions lorsqu'ils mettent à jour les composants natifs, car ils prennent le risque de causer des bugs dans les sites qui les utilisent et n'ont pas anticipé ces changements.
Très bon article en français qui explique de manière concise le fonctionnement des attributs async
, defer
, rel=preload/preconnect/dns-prefetch
, fetchpriority
et loading
.
Un outil pour transformer un HTML en PDF en utilisant Webkit.
L'élément img est bien plus complexe qu'il n'y paraît.
Un équivalent du très célèbre Can I Use? mais orienté client email.
Via https://www.alsacreations.com/outils/lire/1815-can-i-email-reference-support-clients-e-mail.html
Un polyfill pour l'attribut loading="lazy"
des éléments images et iframe.
Quelques astuces pour charger efficacement vos scripts externes.
Comment utiliser les éléments HTML <nav>
, <aside>
, <article>
correctement.
Quelques éléments HTML qu'il est bon de connaître.
Une introduction au plugin Emmet qui permet d'écrire du code HTML rapidement à l'aide d'expressions qui utilisent une syntaxe proche du CSS.
Un date picker accessible créé étape par étape.
Sur un input de type texte, l'attribut inputmode
permet de déterminer quel type de clavier s'affichera lorsqu'un utilisateur clique sur cet input depuis un navigateur web mobile.
Un outil pour tester les différents types d'input HTML. Pratique pour voir comment se comporte un type de champ spécifique sur smartphone par exemple.
Via https://stephaniewalter.design/fr/blog/la-semaine-en-pixels-7-avril-2019/