Dev front

Dev front

Inheritance with Twig

Ce tutoriel aborde l'utilisation de l'héritage de templates avec Twig et Doctrine dans un projet Symfony. Il démontre comment créer des templates partiels pour des composants UI réutilisables et comment utiliser l'héritage de template pour gérer les variations de contenu d'une manière élégante et efficace. L'auteur présente également une méthode pour gérer les templates dynamiques afin d'afficher des propriétés spécifiques selon les différents types de vaisseaux, en utilisant des blocs qui peuvent être remplacés par des templates hérités.

symfonycasts.com

twigsymfonydoctrine
Dev front

Sneaky Header Blocker Trick • Josh W. Comeau

Cet article présente une astuce CSS pour la création d'un effet de header sticky, donnant l'impression d'un changement de fond lors du défilement sur un blog. L'auteur explique comment utiliser des éléments 'bloqueurs' pour créer une transition entre deux couleurs de fond en scrollant sans nécessiter de JavaScript. Il aborde également les contraintes de conception liées à cette stratégie et compare cette technique à une approche plus traditionnelle utilisant du JavaScript pour modifier la couleur de fond.

www.joshwcomeau.com

css
Dev front

Announcing TypeScript 6.0 - TypeScript

L'annonce de la disponibilité de TypeScript 6.0 et ses nouvelles fonctionnalités, y compris des ajustements dans la vérification des types pour les expressions de fonction et l'alignement en préparation de TypeScript 7.0. TypeScript 6.0 sera basé sur l'ancien code JavaScript, tandis que TypeScript 7.0 sera développé sur une nouvelle base en Go pour améliorer la performance. Des mises à jour des types DOM et des imports de sous-chemins sont également introduites.

devblogs.microsoft.com

typescriptnpmjavascript
Dev front

Color Generator – Kigen

Cet article présente un plugin Figma pour générer des palettes de couleurs basées sur Tailwind CSS. Le plugin permet de choisir des nuances de couleur spécifiées par des codes HEX, RGBA, HSL, et d'autres formats. Il facilite la création de contrastes adaptés pour les designs, tout en respectant les principes d'accessibilité. Ce générateur est utile pour les développeurs et designers qui cherchent à simplifier le processus de création de palettes de couleur esthétiques et fonctionnelles.

kigen.design

tailwind csssvgfigma
Dev front

Details That Make Interfaces Feel Better

Cet article explore divers détails et techniques pour améliorer l'expérience utilisateur dans la conception d'interfaces. Il aborde des sujets tels que l'équilibrage du texte, l'utilisation de rayons de bordures concentriques, l'animation des icônes, le lissage du texte, et la subtilité des animations de sortie. La focalisation sur l'optimisation esthétique et fonctionnelle des éléments d'interface permet de guider les utilisateurs de manière intuitive sans qu'ils ne s'en rendent compte.

jakub.kr

antialiasingcssanimation
Dev front

Modern TypeScript packaging

L'article traite des mises à jour nécessaires pour le navigateur afin d'assurer une compatibilité optimale avec les plateformes modernes comme YouTube, en mettant l'accent sur l'importance de rester à jour avec les dernières fonctionnalités et normes du web, tout en citant plusieurs navigateurs populaires.

www.youtube.com

webjavascripttypescript
Dev front

Sprites on the Web • Josh W. Comeau

L'article explique comment utiliser les sprites en CSS pour créer des animations fluides sans surcharge de performances sur les appareils mobiles. Il détaille la création d'une feuille de sprites, l'utilisation de propriétés CSS comme 'object-fit' et 'object-position', et comment animer les images en utilisant des keyframes avec une fonction de timing pour obtenir des transitions par étapes. Cette méthode est inspirée de techniques de développement de jeux vidéo.

www.joshwcomeau.com

csshtmlsprites
Dev front

Modern CSS Code Snippets | modern.css

Cet article présente de nouvelles techniques CSS modernes qui remplacent d'anciennes méthodes et hacks. Il propose des extraits de code qui sont essentiels pour développer des interfaces utilisateur sans avoir besoin de JavaScript. Des astuces comme la validation des formulaires, le positionnement de texte, et l'animation de l'affichage sont mentionnées, offrant aux développeurs des moyens efficaces pour créer des designs contemporains sans complexité supplémentaire. L'accent est mis sur l'utilisation de propriétés CSS modernes pour simplifier le code et améliorer les performances des applications web.

modern-css.com

css
Dev front

L'événement scrollend

L'événement scrollend est une nouvelle API permettant de détecter la fin d’un défilement dans une page web. Contrairement aux méthodes antérieures, il offre une solution fiable et intégrée dans les navigateurs modernes pour gérer le lazy-loading et le tracking des utilisateurs, sans polysfill nécessaire. En simplifiant l'implémentation, scrollend facilite le développement d'interfaces réactives et performantes.

www.alsacreations.com

javascripthtmlcss