Dev front

Dev front

Convertir HEX en RGBA avec un mixin LESS pour la transparence

Ce tutoriel explique comment convertir des codes hexadécimaux en format RGBA à l'aide d'un mixin LESS. Le mixin accepte un code couleur hexadécimal et une valeur d'opacité, facilitant la gestion des couleurs dans les projets. Il est intégré par défaut dans Magix CMS 3.7.8, mais peut également être utilisé dans d'autres projets. La compatibilité avec les formats courts est également mentionnée.

Dev front

Les sélecteurs CSS :is, :not, :where et :has : Explications et exemples par la pratique.

Cet article présente les sélecteurs CSS modernes tels que :is, :not, :where et :has, en expliquant leur importance pour cibler des éléments de manière efficace. Il aborde comment ces nouveaux sélecteurs simplifient le code en permettant de définir des règles communes et d'exclure certains éléments. Des exemples pratiques illustrent leur utilisation, mettant en avant la lisibilité et la maintenance du code en CSS.

"
Dev front

Build a Drag-and-Drop Scheduler in React with Bryntum

Cet article décrit comment intégrer un composant de planification glissé-déposé, le Bryntum Scheduler, dans une application React à l'aide de react-admin. Il aborde l'installation des dépendances, la configuration d'un fournisseur de données simulé pour interagir avec une API REST, et la personnalisation des événements et formulaires pour s'adapter à la structure attendue par le composant. L'article met en avant les fonctionnalités de Bryntum Scheduler telles que le défilement infini, le zoom, et la possibilité d'éditer les événements.

"
Dev front

Contrôleurs Stimulus pour vos app Rails et Symfony

Cet article présente comment utiliser des contrôleurs Stimulus dans des applications Ruby on Rails et Symfony, deux frameworks qui partagent une même approche front-end avec la stack 'Hotwired'. Il détaille des pratiques pour charger ces contrôleurs de manière asynchrone afin de réduire le poids de JavaScript chargé au démarrage, offrant ainsi une amélioration de la performance de l'application. De plus, l'auteur partage ses expériences de développement et propose des liens vers des contrôleurs prêts à l'emploi, facilitant l'intégration dans les projets. En conclusion, l'article encourage à garder un code JavaScript ouvert pour favoriser l'apprentissage et l'adoption de bonnes pratiques par d'autres développeurs.

"
Dev front

React-Admin: September 2025 Update

Cet article présente les mises à jour de React-Admin, y compris de nouvelles fonctionnalités et des améliorations dans les versions 5.9 à 5.11. Parmi les nouveautés, on trouve le support de 'render props' pour des personnalisations faciles, de nouveaux providers d'authentification et des améliorations pour la gestion des références et de l'interface utilisateur. Un cadre pour intégrer React-Admin avec Shadcn UI a également été introduit.

Dev front

L'attribut contenteditable plaintext-only

L'article présente l'attribut HTML 'contenteditable', qui permet de rendre les éléments éditables dans le navigateur, et discute de ses risques en matière de sécurité, notamment les failles XSS. Il propose l'utilisation de valeurs alternatives pour éviter l'insertion de code HTML indésirable, en assurant une meilleure sécurité et prévisibilité. L'article aborde également des cas d'usage pratiques comme les champs de saisie dans un CMS et la gestion des contenus avec JavaScript.

Dev front

My Path to Scalable Frontend Engineering

Cet article retrace le parcours d'un développeur qui est passé de l'écriture de scripts JavaScript basiques à la construction d'applications front-end et back-end évolutives. L'auteur partage les étapes clés de son apprentissage, y compris la manipulation du DOM, l'utilisation d'async/await pour gérer les promesses, la modularisation avec les imports ES6, et la création d'API REST avec Express.js. Il aborde également l'architecture événementielle avec Node.js et l'utilisation de Socket.IO pour la communication en temps réel, soulignant finalement l'importance de frameworks comme React et Vue pour gérer des interfaces utilisateur complexes.

Dev front

Refactoring a 12,000-Line jQuery Monster in One Weekend

Cet article décrit le processus de refactorisation d'une application front-end contenant 12 000 lignes de code jQuery en un week-end. L'auteur utilise le modèle de strangulation pour transformer le code vieillissant en modules JavaScript modernes et testables tout en maintenant la production en fonctionnement. Les étapes incluent l'extraction de fonctions pures, la centralisation des événements, la création d'un magasin d'état et la mise en place de tests pour assurer la stabilité. L'article souligne que les réécritures complètes sont des échecs fréquents et encourage à aborder les refactorisations de manière itérative et contrôlée.

Dev front

Top 5 Frontend Masters Courses to Learn TypeScript in 2025

L'article présente les cinq meilleurs cours de Frontend Masters pour apprendre TypeScript en 2025. TypeScript est devenu essentiel pour les développeurs front-end et full-stack en raison de sa capacité à réduire les bogues et à améliorer la maintenabilité. Les cours recommandés incluent 'TypeScript 5+ Fundamentals' pour les débutants, 'Fullstack TypeScript' pour des projets complets et 'React and TypeScript' pour des composants robustes. D'autres cours abordent la conception de compilateurs et le design de systèmes front-end, reliant TypeScript à des applications pratiques.

Dev front

What are OKLCH colors?

OKLCH est un modèle de couleur récent offrant une uniformité perceptuelle, facilitant la manipulation des couleurs. Contrairement à d'autres modèles comme sRGB ou HSL, OKLCH permet de créer des palettes de couleurs cohérentes où la luminosité et la saturation demeurent constantes, même lors de variations de teinte. Cela est particulièrement avantageux pour créer des boutons ou des dégradés avec des couleurs attrayantes et uniformes. Bien que soutenu par la norme CSS Color Module Level 4, OKLCH nécessite des navigateurs modernes, mais des solutions de repli peuvent être mises en place. Un outil en ligne, oklch.fyi, facilite la création de palettes OKLCH et la conversion de variables CSS.