Dev front

Dev front

Modules: require() & import()

Cette vidéo explique comment utiliser Webpack Encore pour améliorer le développement frontend avec Symfony. Elle couvre les modules JavaScript, en particulier les méthodes require() et import(), montrant comment organiser le code et gérer les dépendances efficacement. Les développeurs peuvent ainsi optimiser leurs processus de développement et améliorer la structure de leurs applications web. Une attention particulière est portée sur la compatibilité avec Symfony 5 et sur les bibliothèques PHP et JavaScript associées.

Dev front

Twig Helpers, entrypoints.json & yarn Scripts

Cet article présente un tutoriel sur l'utilisation de Webpack Encore avec Symfony, mettant en lumière les Helpers Twig, le fichier entrypoints.json et les scripts Yarn. Il propose une méthode pour optimiser l'intégration des assets dans un projet Symfony, notamment en déplaçant les scripts dans la section <head> pour améliorer les performances. Le contenu inclut des conseils pratiques et des références à la documentation de Symfony.

Dev front

Hello Webpack Encore

Cette vidéo présente Webpack Encore, un outil permettant de gérer les ressources front-end de manière efficace au sein d'un projet Symfony. Elle offre un aperçu de l'installation de Webpack Encore via Yarn, ainsi que des démonstrations de la configuration de webpack.config.js. Le tutoriel est conçu pour aider les développeurs à intégrer facilement Webpack Encore dans leurs projets.

Dev front

Webpack Encore: Frontend like a Pro! Video Tutorial Screencast

Ce cours intitulé 'Webpack Encore: Frontend like a Pro!' propose un tutoriel sur Webpack Encore, une solution qui facilite l'utilisation moderne de JavaScript. Il aborde l'intégration avec Symfony, l'installation d'Encore et de yarn, et les bases de la configuration de Webpack. Les participants apprendront à gérer CSS, à optimiser le code avec des techniques comme le code splitting, ainsi qu'à utiliser des bibliothèques externes et des plugins jQuery.

Dev front

Forcer l'application de conventions CSS avec Stylelint

L'article présente l'importance de Stylelint dans le développement front-end pour maintenir une qualité optimale du code CSS. Après une période d'adoption, son utilisation a été mise de côté en raison de conflits avec Prettier et de la pertinence réduite dans les projets à classes utilitaires. Toutefois, après des mises à jour, Stylelint a été réintégré, facilitant la détection des erreurs et l'application des conventions d'équipe. Le texte détaille également l'installation et la configuration de Stylelint dans un environnement de travail avec VS Code et encourage les développeurs à l'adopter pour améliorer la cohérence et la qualité du code.

Dev front

Mastering requestAnimationFrame: Create Smooth, High-Performance Animations in JavaScript

Cet article explore l'utilisation de requestAnimationFrame en JavaScript pour créer des animations fluides et performantes. Il met en avant les avantages de cette méthode, notamment l'optimisation du rendu et l'efficacité énergétique, permettant d'améliorer l'expérience utilisateur. Les meilleures pratiques pour son utilisation sont également discutées, y compris des conseils pour gérer des scènes complexes et assurer la réactivité sur différents appareils. L'article propose également des démos interactives pour illustrer ces concepts.

Dev front

SolidJS for React Developers

SolidJS est une bibliothèque UI réactive qui partage des similitudes avec React tout en introduisant des différences fondamentales, notamment l'absence de DOM virtuel et un système de réactivité basé sur des signaux. Les développeurs React doivent s'adapter aux spécificités de SolidJS, telles que l'initialisation complète des composants et l'utilisation de getters pour les props. Cet article explore le fonctionnement interne de SolidJS et présente les meilleures pratiques pour éviter les problèmes de réactivité.

Dev front

CSS Painting API - Web APIs | MDN

L'API Painting CSS, partie des API Houdini, permet aux développeurs de créer des valeurs personnalisées pour la propriété background. Cela permet de dessiner directement dans l'arrière-plan, la bordure ou le contenu d'un élément à l'aide de fonctions JavaScript. Grâce à cette API, on peut générer un fond réactif qui change en fonction des styles calculés. Un exemple montre comment créer une image de fond dynamique qui alterne entre différentes couleurs, en utilisant un worklet de peinture externes pour accéder aux propriétés CSS.

Dev front

API Web Speech : de la reconnaissance vocale dans ton projet | studo.dev

Cet article traite de l'intégration de la reconnaissance vocale dans les applications web en utilisant l'API Web Speech. Bien que son support soit limité, cette API permet de transformer la parole en texte, ce qui ouvre des possibilités d'interactions naturelles. L'article présente des exemples d'implémentation, notamment la transcription en temps réel et le contrôle vocal pour l'exécution de commandes spécifiques. Il souligne également les limitations techniques à prendre en compte et propose des solutions pour exploiter au mieux cette fonctionnalité.