Mois : juin 2022

[Javascript] Utiliser reduce pour obtenir la somme de toutes les valeurs d’une clé spécifique dans un tableau (ou un objet)

Source: How to sum all of values from specific key in object?

J’ai cet objet:

…et je veux effectuer la somme de toutes les valeurs de la clé credit (ce qui me retournerait « 3 » dans le cas de mon tableau).

[Javascript] Comment appeler une fonction à partir d’une chaîne de caractères (string) sans utiliser la méthode Eval

Problème:

J’essaye de pusher une fonction dans un tableau array. Cette fonction est constituée notamment d’une partie dynamique (son argument itemValue) qui doit être interprété avant que la fonction ne soit poussée dans le tableau. J’utilise les templates literals pour ça.

Les templates literals ont bien été interprétés dans la fonction présente dans le tableau, mais cette dernière est stockée sous forme de string (chaîne de caractères – cf. les guillemets autour de la fonction dans ma capture) et ne peut donc pas être ré-exécutée!

Solution: utiliser Function à la place d’eval()

Source: N’utiliser eval() qu’en dernier recours !

Avec eval() et des template literals

Avec Function et sans template literals

Inclus dans mon push push():

Solution alternative

Source: How to Call a JavaScript Function From a String Without Using eval

Les deux exemples ci-dessous fonctionnent on their own, mais je n’ai pas réussi à adapter mon propre code pour les faire exploiter.

Fonction sans paramètre

Fonction avec trois paramètres

[Javascript] Créer des chemins dynamiques vers des données contenues dans un objet ou un tableau

Source: Accessing nested JavaScript objects and arrays by string path et la demo sur jsFiddle.net.

Utilisation:

Source: How to create a dynamic nested object from array of properties.

PDF – How to create a dynamic nested object from array of properties · GitHub

Code source (zip)

[Javascript] Déclaration de condition If dynamique

Source: Dynamic JavaScript If Statement

[Javascript] Transformer une fonction fléchée (arrow function) en fonction classique

Comment transformer une fonction fléchée en fonction de Javascript à papa. Utile, par exemple, lorsqu’on travaille avec Magento 2.

Note: la fonction d’exemple provient de ce sujet sur stack overflow: best way to filter based on dynamic condition.

Fonction fléchée (arrow function)

Fonction classique


Autre exemple:

Fonction fléchée

Fonction classique

[Google Maps] Astuces et bonnes pratiques

  • Tutoriaux Google map V3 en français: Créer un marker personnalisé, Insérer les coordonnées d’une adresse en BDD, Adresses au format JSON, Filtrer les markers par rapport à un périmètre, Récupérer le département ou le pays d’une adresse, Ajouter un type de carte – V3, Geocodage Inversé – V3, Géocoder une adresse – V3, Récupérer les limites de la carte – getBounds, Classe Map V3, Zoom automatique avec Fitbounds, classe MVCArray, classe MVCObject.
  • Des cluster makers custom: How to use CSS-only for cluster icons for Google Maps

[SASS][LESS] BEM, Block Element Modifier, astuces et bonnes pratiques

Ressources en ligne sur BEM, Block Element Modifier

Une liste de ressources qui m’ont aidé à comprendre la méthodologie BEM:

Example perso avec un store locator

Regarder notamment le principe d’imbrication de plusieurs BLOCKs et la présence de la classe helper .is-store--china (comment elle est utilisée dans le code LESS ensuite).

Code HTML

Code CSS (LESS)

Première explication sous forme de code commenté (pour comprendre)

…mais, ATTENTION: ce n’est pas comme ça que vous devez organiser votre code. Voir la section suivante.

Organisation du code LESS en composants/BLOCKs

Valable pour SASS/SCSS également.

L’organisation du code en parties représentant chacune un block/composant permet le respect du principe d’inception: pas plus de 3 niveaux d’imbrication (à l’exception de la déclaration de :pseudo-classes).

Autre exemple, avec du HTML cette fois:

Le h3 class="store__name" s’affichera:

  • en rouge si la classe store--is-boutique est présente sur l’élément parent
  • en gris si la classe store--is-retailer est présente sur l’élément parent

Les autres styles appliqués au h3 class="store__name" seront affectés aux deux.

Exploitation d’une classe helper .is-store--china

L’organisation du code en parties représentant chacune un block/composant est reprise. La classe helper s’intercale au besoin.

Pour <div class="store-locator">, toutes les bordures seront pink.

Pour <div class="store-locator is-store--china">, toutes les bordures seront red.

[Magento 2] Un widget JS toggle on/off accessible WCAG avec les attributs Hidden et Aria-Expanded

Objectif: créer un widget Toggle flexible dont le rôle sera uniquement d’affiche/masquer des éléments du DOM lorsque les utilisateurs interagissent avec un autre élément d’interface (bouton, checkbox, autre…).

Source: Marking elements expandable using aria-expanded. Exemple d’utilisation sur l’élément HTML Button. Exemple d’utilisation sur l’élément HTML Checkbox.

Exemple d’utilisation sur l’élément HTML Checkbox:

Source: https://www.accessibility-developer-guide.com/.

Fichier wcag-toggle.js:

Fichier PHTML:

Partie DOM (attention, je mets juste les grandes lignes). Se référer à l’example de code proposé par le site source.

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier requirejs-config.js: