Dev front

Dev front

Tuto CSS : Contour de Texte avec text-stroke & text-shadow

Cet article présente un tutoriel sur la création de contours de texte en CSS. Il explore deux méthodes principales : l'utilisation de la propriété text-stroke pour ajouter directement des contours aux textes, et l'utilisation de text-shadow, qui permet de simuler un contour sans les problèmes de compatibilité. Des recommandations de polices Google Fonts adaptées pour ces techniques sont également fournies, ainsi que des exemples de code.

www.gerits-aurelien.be

cssgoogle fonts
Dev front

Stop Wasting API Calls: Learn API Request Cancellation in Modern JavaScript

Cet article explore comment gérer l'annulation des appels d'API en JavaScript moderne, y compris la manière dont les navigateurs interagissent avec les serveurs pour optimiser les performances, réduire la charge serveur et éviter des conditions de concurrence dans les interfaces utilisateur. Il fournit également des exemples de code réels pour illustrer les meilleures pratiques.

medium.com

javascriptangularreact
Dev front

browserslist: What Browsers do you need to Support?

Cet article propose une vidéo tutorielle sur l'utilisation de browserslist pour déterminer les navigateurs à supporter dans une application JavaScript, notamment en contexte avec Webpack et Symfony. Il aborde les éléments de configuration essentiels pour la compatibilité des navigateurs et les librairies PHP et JavaScript utilisées dans le cadre de ce tutoriel. À travers des extraits du script de la vidéo, il guide sur la configuration de Babel et l'utilisation de Webpack Encore pour un développement frontend efficace.

symfonycasts.com

webpacksymfonyjavascript
Dev front

Support any Browser with PostCSS & Babel

Cette vidéo présente comment utiliser PostCSS avec Babel pour assurer la compatibilité des styles CSS sur les anciens navigateurs. Elle aborde également la configuration de Webpack Encore dans un projet Symfony pour une intégration fluide. Des astuces sont partagées pour éviter les erreurs courantes liées à l'utilisation d'autoprefixer avec différentes versions de PostCSS.

symfonycasts.com

webpackbabelpostcss
Dev front

Refactoring Autocomplete JS & CSS

Cet article traite de la refactorisation de l'autocomplétion en JavaScript et CSS, en utilisant des outils comme Symfony et Webpack. Il explique comment organiser et utiliser la bibliothèque 'autocomplete.js' en tant que composant et comment trouver et appliquer le plugin jQuery correspondant. Les étapes de l'installation et de l'intégration sont détaillées, ce qui rend le contenu utile pour les développeurs cherchant à améliorer leur utilisation des bibliothèques d'autocomplétion dans des projets Symfony.

symfonycasts.com

webpackjavascriptsymfony
Dev front

Page-Specific JS: Multiple Entries

Cet article fournit un guide sur l'utilisation de Webpack Encore avec Symfony pour gérer des fichiers JavaScript spécifiques à une page. Il explique comment configurer plusieurs entrées JavaScript pour améliorer la gestion des scripts dans les applications Symfony, en mettant l'accent sur des exemples pratiques et des bonnes pratiques.

symfonycasts.com

symfonywebpackjavascript
Dev front

Sass & Overriding Bootstrap Variables

Cet article présente une vidéo tutorielle sur l'utilisation de Sass pour personnaliser et remplacer les variables de Bootstrap. Il couvre la configuration de Webpack Encore et montre comment organiser les fichiers Sass en parties (partials) tout en permettant une meilleure gestion des styles CSS. Les exemples de code et de structure de fichiers sont également fournis pour aider à la compréhension et à la mise en œuvre des concepts abordés.

symfonycasts.com

sasswebpackbootstrap
Dev front

Importing 3rd Party CSS + Image Paths

Cet article traite de l'importation de CSS de tiers et de la gestion des chemins d'images dans un projet utilisant Webpack et Symfony. Il aborde les méthodes pour intégrer des fichiers CSS depuis node_modules, ainsi que l'installation et l'importation de bibliothèques comme Font Awesome. Les démonstrations incluent des exemples de code pour améliorer la gestion des styles et des ressources visuelles au sein d'une application. C'est une ressource utile pour les développeurs cherchant à optimiser leurs workflows avec Webpack et à gérer des intégrations front-end efficacement.

symfonycasts.com

symfonyjavascriptwebpack
Dev front

The Magic of Split Chunks

Cette vidéo se concentre sur l'utilisation de Webpack Encore pour optimiser le développement frontend, en particulier à travers la technique de 'split chunks'. Elle explicite le fonctionnement de la configuration Webpack, notamment avec le plugin SplitChunks, pour améliorer la performance des applications web en minimisant le poids des fichiers chargés. La vidéo inclut également un script détaillé et des commentaires pour une meilleure compréhension des différentes étapes du processus d'optimisation.

symfonycasts.com

javascriptsymfonywebpack