Eric Meyer propose une méthode pour transformer des notes parenthétiques en "asidenotes" (notes latérales) en utilisant une combinaison de JavaScript et de CSS moderne. Il introduit un custom element <aside-note> qui encapsule le texte de la note, puis utilise JavaScript pour supprimer les parenthèses et ajouter un marqueur en exposant. Le positionnement des notes est géré via CSS et la propriété anchor-name, permettant d'afficher les notes en marge du texte principal. La solution est conçue pour être robuste : elle ne s'applique que si le navigateur supporte le positionnement par ancrage et si la largeur de l'écran est suffisante, évitant ainsi les problèmes d'affichage sur mobile. Meyer envisage d'adopter cette technique pour son blog, car elle offre une meilleure expérience utilisateur et un code plus propre que sa précédente approche.

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

I had to build a UI recently and (for the first time in a long while) I didn't have the option of using React.js, which is my preferred solution for UI

Making sure frameworks and custom elements can be BFFs 🍻