Css

"
Dev front

HakoTools — Design Tools

HakoTools est une plateforme qui centralise divers outils de design, permettant aux utilisateurs de tester et créer des typographies, palettes de couleurs et autres éléments graphiques pour leurs projets web. Elle inclut des fonctionnalités pour assurer l'accessibilité des designs, ainsi qu'une bibliothèque d'icônes et des outils pour personnaliser des arrière-plans et générer des gradients. Les utilisateurs peuvent s'inscrire pour recevoir des mises à jour sur de nouveaux outils.

adelinecourtois.fr

css
Dev front

Aligner un catalogue de produits avec CSS Subgrid

Cet article présente une méthode pour aligner harmonieusement un catalogue de produits en utilisant CSS Subgrid, permettant d’éviter un effet visuel désordonné lorsque les descriptions des produits varient en longueur. Il aborde la structure HTML sémantique et la création d'une grille parente pour assurer un alignement cohérent des éléments sur chaque carte produit, garantissant ainsi une apparence professionnelle.

www.gerits-aurelien.be

css
Dev front

Guide Complet CSS Subgrid : Maîtriser l'alignement de grille avancé.

Cet article présente le CSS Subgrid, une technique révolutionnaire pour améliorer l'alignement des éléments dans une mise en page. Le Subgrid permet à un élément enfant d'adopter la grille de son parent, facilitant ainsi l'alignement dynamique et la maintenance du design. En utilisant le Subgrid, les concepteurs peuvent éviter les calculs complexes pour aligner divers éléments sur leurs pages web tout en assurant une performance optimale grâce à la rapidité d'interprétation du CSS par les navigateurs. Des exemples et une introduction au CSS Grid Layout sont également fournis.

www.gerits-aurelien.be

css
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

css
Autre

Framadate fait peau neuve : une nouvelle version plus moderne et mobile

Framadate, un outil de sondage en ligne, a été revampé pour offrir une meilleure ergonomie et une compatibilité mobile. La nouvelle version, Pollaris, conserve les fonctionnalités appréciées tout en modernisant l'interface et le code. Le développement a été un effort d'un groupe de bénévoles, visant à intégrer des fonctionnalités d'accessibilité et à optimiser l'expérience utilisateur. Framadate d'antan reste accessible jusqu'en janvier 2026 pour la création de sondages.

framablog.org

css
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

css
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

css
Dev front

Vendor locked - stitcher.io

L'article discute des défis d'un développeur frontend face à l'utilisation de Tailwind, expliquant comment cela a affecté sa capacité à écrire du CSS de manière traditionnelle. L'auteur exprime ses inquiétudes quant à la dépendance à cet outil et souhaite un système qui allie la simplicité de Tailwind avec les propriétés CSS standardisées, tout en maintenant une approche basée sur les composants pour la conception frontend.

stitcher.io

css
Dev front

The Tab Trap: Why Forcing New Tabs Is Bad UX

Cet article explique pourquoi l'utilisation de 'target="_blank"' pour ouvrir des liens dans de nouveaux onglets peut nuire à l'expérience utilisateur, briser l'accessibilité, et introduire des risques de sécurité. Les utilisateurs s'attendent à contrôler leur navigation, et forcer l'ouverture de nouveaux onglets peut engendrer de la confusion. De plus, cette pratique expose à des vulnérabilités telles que la manipulation de la page source par des pages liées malveillantes. L'article propose des alternatives et souligne l'importance d'informer visuellement les utilisateurs sur ce comportement.

sensiolabs.com

css
"
Dev front

Convertir HEX en HSL/HSLA : Les 2 méthodes LESS pour une gestion des couleurs flexible

Cet article présente deux méthodes pour convertir des couleurs HEX en HSL et HSLA avec LESS, facilitant la gestion des couleurs en CSS. La première méthode utilise des mixins pour appliquer directement le style, idéale pour des cas simples. La seconde méthode assure plus de flexibilité en retournant une valeur de couleur pouvant être assignée à différentes propriétés CSS, recommandée pour des projets complexes afin d'améliorer la maintenabilité.

www.gerits-aurelien.be

css