Dev front

Dev front

Prendre en compte les Web Components dans vos scripts - 24 jours de web

Cet article traite de l'utilisation des Web Components dans le développement d'interfaces. Il explique comment accéder à leur contenu encapsulé par des scripts, en se concentrant sur la structure des éléments et leur mode de création. Il est essentiel d'utiliser des sélecteurs adéquats pour interagir avec ces composants, notamment à travers des fonctions spécifiques qui permettent de naviguer dans les éventuels niveaux d'imbrication. Finalement, l'article fournit des conseils pratiques pour mettre à jour les scripts afin d'interagir efficacement avec les Web Components tout en respectant leur encapsulation.

www.24joursdeweb.fr

javascriptdomweb components
Dev front

Title, ce faux ami de l’accessibilité - 24 jours de web

L'utilisation de l'attribut sur les éléments web pose problèmes d'accessibilité même après des années. Ce texte explique ses usages, notamment pour les infobulles et les noms accessibles, tout en soulignant ses limites : non instantanées, inaccessibles sur mobiles et non adaptables aux besoins spécifiques des utilisateurs. Les bonnes pratiques en accessibilité doivent être mieux respectées pour garantir une expérience utilisateur équitable.

www.24joursdeweb.fr

accessibilitéhtml
Dev front

Thèmes sombres et clairs avec TailwindCSS : pièges courants et implémentation

Cet article aborde l'implémentation des thèmes sombres et clairs avec TailwindCSS, en soulignant les pièges courants auxquels les développeurs peuvent être confrontés. Il propose des conseils pour éviter ces erreurs et pour tirer le meilleur parti des capacités de personnalisation offertes par TailwindCSS, assurant ainsi une expérience utilisateur optimale sur les sites web modernes.

www.youtube.com

tailwindcss
"
Dev front

Symfony UX : Révolutionnez facilement votre front-end !

Cet article présente Symfony UX, une suite d'outils pour simplifier le développement front-end avec Symfony. Il met en lumière AssetMapper, qui permet de simplifier la gestion des assets sans étape de build, ainsi que Turbo, qui offre une expérience d'application à page unique (SPA) sans complexité JavaScript. L'utilisation de Stimulus permet d'ajouter de l'interactivité tout en gardant HTML comme base. L'article encourage l'intégration de ces outils pour moderniser le développement dans l'écosystème Symfony.

www.axopen.com

stimulustwigsymfony
Dev front

Exploring Large HTML Documents On The Web

Cet article explore la problématique des documents HTML volumineux sur le web, expliquant pourquoi certains sites chargent de grandes quantités de code HTML, souvent à cause d'images intégrées, de CSS en ligne et de l'état d'hydratation des applications JavaScript. Il met en lumière des pratiques comme l'encodage Base64 pour les images et les polices, qui, bien que pratiques, peuvent nuire à la performance en augmentant la taille de chargement des pages. Des exemples et des statistiques sur la compression et l'optimisation de ces tailles sont également fournis, soulignant l'importance d'une gestion efficace du contenu embarqué.

calendar.perfplanet.com

htmljavascriptcss
Dev front

Vignettes carrées responsives avec CSS Grid et aspect-ratio

Cet article présente une méthode moderne pour créer une galerie de vignettes carrées et responsives à l'aide de CSS Grid, sans nécessiter de longues Media Queries. Il aborde la structure HTML simple, la mise en place de la grille avec une règle unique, et la solution pour centrer le contenu, garantissant ainsi une présentation impeccable sur toutes les tailles d'écran. Cette approche assure une mise en page adaptative, performante et facile à maintenir.

www.gerits-aurelien.be

flexboxaspect-ratiocss grid
Dev front

An Interactive Guide to SVG Paths • Josh W. Comeau

Cet article propose un guide interactif sur l'utilisation des chemins SVG, en expliquant comment dessiner des formes en utilisant des commandes spécifiques comme 'M' pour déplacer le 'stylo' et des courbes Bézier. Il aborde la syntaxe des chemins SVG et donne des conseils pour rendre cette syntaxe plus compréhensible. En plus de sa structure de base, l'article décrit comment utiliser des courbes quadratiques et cubiques, ainsi que les subtilités de l'utilisation de commandes en minuscules et en majuscules.

www.joshwcomeau.com

svgcsshtml
Dev front

A Friendly Introduction to SVG • Josh W. Comeau

Cet article présente une introduction amicale aux SVG (Scalable Vector Graphics), une technologie d'illustration puissante et dynamique intégrable dans le développement web. L'auteur explique les fondamentaux des SVG, leur intégration dans des documents HTML, et la façon d'utiliser CSS et JavaScript pour manipuler et animer des éléments SVG. Des exemples de formes basiques (lignes, rectangles, cercles, ellipses et polygones) sont fournis pour illustrer comment créer et styliser des graphiques vectoriels.

www.joshwcomeau.com

htmlcsssvg
Dev front

Un site anniversaire pour célébrer les 20 ans de Symfony ! | Les-Tilleuls.coop

Pour fêter les 20 ans de Symfony, un site immersif a été développé avec une timeline interactive et des animations adaptées. La technologie GSAP, avec son plugin ScrollTrigger, a permis de synchroniser le défilement avec les animations. Des optimisations ont été faites pour améliorer les performances, comme la conversion d'images au format WebP ou la méthode transform: translate pour les animations. Ce projet a aussi mis en lumière certains comportements spécifiques de Firefox par rapport au scroll. L'ensemble vise à célébrer l'évolution de Symfony tout en offrant une expérience utilisateur fluide et engageante.

les-tilleuls.coop

gsaptailwindcsssymfony