Mois : mai 2021

[Twig] Utiliser le tag Set et la fonction Include pour récupérer les informations d’un fichier JSON dans un template Twig

Source: Set twig variable to json file as an include.

Fichier _data/test.json:

Fichier template.twig:

[Webpack Encore] Générer des fichiers HTML à partir de templates Twig

Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0). Source principale: TWIG + WEBPACK sur dgrigg.com (version PDF).

Les fichiers assets source à placer à la racine de votre projet (Pimcore dans mon cas).

Exécuter les commandes de récupération et de sauvegarde des paquets twig-html-loader et html-webpack-plugin:

webpack.config.js:

Résultat:

Fichiers source:

Fichiers destination:

[JavaScript] Exécuter une fonction seulement une fois

Mise à jour: 09/12/2021

Un autre moyen suggéré dans le chapitre 15 Handling Events du livre Eloquent Javascript.


js/utils.js:

[UIkit] Exploiter le composant Toggle pour ajouter une fonctionnalité voir plus/voir moins

Testé fonctionnel UIkit v3.6.19. Documentation officielle.

L’astuce consiste à initialiser le composant toggle d’UIkit sur une classe (.is-toggle dans mon exemple) relative à un ID (#filter---CustomizationTechniques dans mon exemple) placé dans le DOM sur un élément parent/englobant:

Code complet:

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

Base de l’initialisation du helper

Utiliser la méthode listen() avec un breakpoint unique

(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.

La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.

[Webpack Encore] Optimiser vos bundles CSS avec PurgeCSS et JS et le tree shaking

Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0).

Utiliser PurgeCSS avec Webpack Encore

Source: blog de PHP Roberto – Integrating Purgecss with Symfony Encore (version PDF: phproberto.com-Integrating Purgecss with Symfony Encore).

Le tree shaking avec Webpack Encore

Quelques ressources en ligne:

Oui, le tree shaking est activé par défaut en mode « production » dans Webpack Encore. C’est juste que la documentation officielle sur symfony.com oublie de le mentionner (grrr…)!

Vous pouvez effectuer le test qui est décrit ici (aka « le tree shaking dans Webpack Encore expliqué en 30 secondes ») pour vous en assurer.

Pour exemple, si vous avez les deux fichiers suivants:

Exécuter la commande yarn encore dev devrait générer quelque chose de similaire à ceci:

Cependant, en exécutant la commande yarn encore production le commentaire /* unused harmony export testB */ présent avec la précédente commande sera pris en compte par UglifyJs qui va en conséquence supprimer l’export en relation lors de la phase de minification. Dans ce cas, on ne devrait pas retrouver la chaîne de caractère « Test B » dans le fichier généré:

Activer les commentaires /* unused harmony export */ en développement avec le paramètre config.optimization.usedExports = true;

Ceci vous permettra de vérifier avec du code humainement lisible quels sont les parties de votre code qui ne sont pas exploitées et qui seront supprimées dans le bundle minifié de production.

Tout à la fin de votre fichier webpack.config.js:

Vous pouvez tout-à-fait laisser cette config activée. Elle ne portera pas préjudice au poids final de votre build de production.