Mois : août 2020

[Ligne de commande] Utiliser grep pour manipuler des données

30/08/2020 / admin

Rassembler les résultats d’une rechercher `grep` dans un nouveau fichier

Source: Output grep results to text file, need cleaner output

$ grep -n "YOUR SEARCH STRING" * > output-file

1	$ grep -n "YOUR SEARCH STRING" * > output-file

Compter le nombre de mots de x lettres dans un fichier TXT

Source: How can I count the amount of five letter words in a txt file using grep?

$ grep -o -w "\w\{5\}" your_file

1	$ grep -o -w "\w\{5\}" your_file

Remplacement des diacritiques (les accents, cédilles, etc… sur les lettres)

# Remplacement des diacritiques 
# https://fr.wikipedia.org/wiki/Diacritiques_utilis%C3%A9s_en_fran%C3%A7ais#Combinaisons

sed -e "s/à/a/g" \
    -e "s/â/a/g" \
    -e "s/ç/c/g" \
    -e "s/é/e/g" \
    -e "s/è/e/g" \
    -e "s/ê/e/g" \
    -e "s/ë/e/g" \
    -e "s/ô/o/g" \
    -e "s/ù/u/g" \
    -e "s/û/u/g" \
    -e "s/ü/u/g" \
    input-file.txt > output-file.txt

# Remplacement des diacritiques

# https://fr.wikipedia.org/wiki/Diacritiques_utilis%C3%A9s_en_fran%C3%A7ais#Combinaisons

sed -e "s/à/a/g" \

-e "s/â/a/g" \

-e "s/ç/c/g" \

-e "s/é/e/g" \

-e "s/è/e/g" \

-e "s/ê/e/g" \

-e "s/ë/e/g" \

-e "s/ô/o/g" \

-e "s/ù/u/g" \

-e "s/û/u/g" \

-e "s/ü/u/g" \

input-file.txt > output-file.txt

[javascript] L’équivalent ES6/vanilla JS de la méthode .eq() de jQuery

28/08/2020 / admin

Source: Pure JS equivalent of Jquery eq().

La méthode .eq() de jQuery

$(".class1.class2").eq(0).text(1254);

1	$(".class1.class2").eq(0).text(1254);

La même chose en ES6/vanilla JS

document.querySelectorAll('.class1.class2')[0].textContent = 1254;
// ou
document.querySelectorAll('.class1.class2')[0].innerHTML = 1254;

document.querySelectorAll('.class1.class2')[0].textContent = 1254;

// ou

document.querySelectorAll('.class1.class2')[0].innerHTML = 1254;

[javascript] Corriger l’erreur « Uncaught TypeError: Cannot read property ‘getData’ of undefined » (ou ‘setData’) en déclarant un addEventListener correctement

26/08/2020 / admin

Source: Ondragstart Attribute doesn’t appear when created dynamically.

En essayant de convertir la génération d’un élément TD dans le DOM avec jQuery en code vanilla JS, je me suis heurté aux erreurs suivantes:

Uncaught TypeError: Cannot read property ‘getData’ of undefined
Uncaught TypeError: Cannot read property ‘setData’ of undefined

Le code jquery de départ:

$('<td id="' + i + '" title="' + i + '" class="is-cell" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"></td>').appendTo('#row_' + x);

1	$('<td id="' + i + '" title="' + i + '" class="is-cell" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"></td>').appendTo('#row_' + x);

Version vanilla JS/ES6

On commence par créer l’élément TD:

let $cell = document.createElement('td');

1	let $cell = document.createElement('td');

Puis on lui assigne de multiples attributs (id, title, class) (source: Setting multiple attributes for an element at once with JavaScript):

Object.assign($cell, {
    id: i,
    title: i,
    className: "is-cell"
});

Object.assign($cell, {

id: i,

title: i,

className: "is-cell"

});

(pour n’ajouter qu’un seul attribut: $row.setAttribute("class", "is-row");)

Mais pour ajouter des attributs relatifs à des événements (ondrop, ondragover, …), il faut utiliser la méthode addEventListener:

// Ne fonctionne pas
$cell.addEventListener("drop", dragndrop.drop_handler(event));
$cell.addEventListener("dragover", dragndrop.dragover_handler(event));

// Ne fonctionne pas
$cell.ondrop = "drop_handler(event)";
$cell.ondragover = "dragover_handler(event)";

// Fonctionne
$cell.ondrop = dragndrop.drop_handler;
$cell.ondragover = dragndrop.dragover_handler;

// Fonctionne (et c'est une meilleure façon de déclarer)
$cell.addEventListener("drop", dragndrop.drop_handler);
$cell.addEventListener("dragover", dragndrop.dragover_handler);

// Ne fonctionne pas

$cell.addEventListener("drop", dragndrop.drop_handler(event));

$cell.addEventListener("dragover", dragndrop.dragover_handler(event));

// Ne fonctionne pas

$cell.ondrop = "drop_handler(event)";

$cell.ondragover = "dragover_handler(event)";

// Fonctionne

$cell.ondrop = dragndrop.drop_handler;

$cell.ondragover = dragndrop.dragover_handler;

// Fonctionne (et c'est une meilleure façon de déclarer)

$cell.addEventListener("drop", dragndrop.drop_handler);

$cell.addEventListener("dragover", dragndrop.dragover_handler);

[Magento 2] Utiliser les Mutation Observers de javascript pour détecter les changement dans le DOM suite à une action utilisateur

25/08/2020 / admin

Attention: Ces sources concernent l’observation de modifications dans le DOM une fois que la page est chargée et/ou qu’un utilisateur effectue des actions. Voir aussi l’article qui consiste à tester la présence de certains éléments dans le DOM au chargement de la page.

Attention #2: bien que préfixé Magento 2, cette astuce fonctionnera également en dehors de la solution e-commerce d’Adobe. Dans mon cas, c’est de cette manière que j’ai dû la mettre en place donc c’est comme ça que je la documente. Donc lisez le billet, car vous êtres peut-être quand même au bon endroit 🙂

Source: https://developer.mozilla.org/fr/docs/Web/API/MutationObserver.

La problématique:

Au chargement de la fiche produit d’un produit configurable dans Magento 2, la référence par défaut s’affiche sous le libellé produit alors qu’aucune option n’a encore été sélectionnée par l’utilisateur.

Ce dernier à la possibilité de changer (la couleur du produit dans notre exemple ci dessous) via une liste de sélection <select>.

Nous cherchons à masquer l’affichage de la référence jusqu’à ce qu’une option ait été sélectionnée par l’utilisateur.

La solution:

Surcharge d’un fichier PHTML pour y ajouter un `observer` via les Mutation Observers de Javascript

Nous allons surcharger, dans notre thème custom, le fichier vendor/magento/module-catalog/view/frontend/templates/product/view/attribute.phtml qui contient le markup permettant l’affichage de la référence dans la fiche produit.

Exemple de chemin vers le fichier surchargé: app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/view/attribute.phtml.

Rajout d’une classe CSS et d’un ID

Par rapport au fichier original, nous rajoutons la classe CSS is-hidden-if-product-is-configurable à la ligne <div class="product attribute <?= $block->escapeHtmlAttr($_className) ?>"> et un ID productRef à la ligne <div class="value" <?= /* @noEscape */ $_attributeAddAttribute ?>><?= /* @noEscape */ $_attributeValue ?></div>.

<?php if ($_attributeValue) :?>
<div class="product attribute <?= $block->escapeHtmlAttr($_className) ?> is-hidden-if-product-is-configurable">
    <?php if ($renderLabel) :?>
        <strong class="type"><?= $block->escapeHtml($_attributeLabel) ?></strong>
    <?php endif; ?>
    <div id="productRef" class="value" <?= /* @noEscape */ $_attributeAddAttribute ?>><?= /* @noEscape */ $_attributeValue ?></div>
</div>
<?php endif; ?>

<?php if ($_attributeValue) :?>

<div class="product attribute <?= $block->escapeHtmlAttr($_className) ?> is-hidden-if-product-is-configurable">

<?php if ($renderLabel) :?>

<strong class="type"><?= $block->escapeHtml($_attributeLabel) ?></strong>

<?php endif; ?>

</div>

<?php endif; ?>

Rajout de l’observer JS

En toute fin de fichier:

<script>
    require([
        'jquery'
    ], function($){
        'use strict';

        // https://developer.mozilla.org/fr/docs/Web/API/MutationObserver

        // Selectionne le noeud dont les mutations seront observées (#productRef pour nous)
        var targetNode = document.getElementById('productRef');

        // Options de l'observateur (quelles sont les mutations à observer)
        // Il y a tout un tas de propriétés possibles ici; voir la documentation pour adapter ce code à votre besoin.
        // Pour ma part, je devais observer les changements de texte dans un noeud précis.
        // https://developer.mozilla.org/fr/docs/Web/API/MutationObserver#MutationObserverInit
        var config = { childList: true };

        // Fonction callback à éxécuter quand une mutation est observée
        var callback = function(mutationsList) {
            for(var mutation of mutationsList) {
                if (mutation.type == 'childList') {
                    // console.log('L_utilisateur a switché sur une autre référence produit.');
                    // Si changement sur le noeud #productRef, alors on supprime la classe .is-hidden-if-product-is-configurable du DOM!
                    $('#productRef').closest('.is-hidden-if-product-is-configurable').removeClass('is-hidden-if-product-is-configurable');
                }
            }
        };

        // Créé une instance de l'observateur lié à la fonction de callback
        var observer = new MutationObserver(callback);

        // Commence à observer le noeud cible pour les mutations précédemment configurées
        observer.observe(targetNode, config);

        // L'observation peut être arrêtée par la suite
        // observer.disconnect();

    });
</script>

require([

'jquery'

], function($){

'use strict';

// https://developer.mozilla.org/fr/docs/Web/API/MutationObserver

// Selectionne le noeud dont les mutations seront observées (#productRef pour nous)

var targetNode = document.getElementById('productRef');

// Options de l'observateur (quelles sont les mutations à observer)

// Il y a tout un tas de propriétés possibles ici; voir la documentation pour adapter ce code à votre besoin.

// Pour ma part, je devais observer les changements de texte dans un noeud précis.

// https://developer.mozilla.org/fr/docs/Web/API/MutationObserver#MutationObserverInit

var config = { childList: true };

// Fonction callback à éxécuter quand une mutation est observée

var callback = function(mutationsList) {

for(var mutation of mutationsList) {

if (mutation.type == 'childList') {

// console.log('L_utilisateur a switché sur une autre référence produit.');

// Si changement sur le noeud #productRef, alors on supprime la classe .is-hidden-if-product-is-configurable du DOM!

$('#productRef').closest('.is-hidden-if-product-is-configurable').removeClass('is-hidden-if-product-is-configurable');

}

};

// Créé une instance de l'observateur lié à la fonction de callback

var observer = new MutationObserver(callback);

// Commence à observer le noeud cible pour les mutations précédemment configurées

observer.observe(targetNode, config);

// L'observation peut être arrêtée par la suite

// observer.disconnect();

});

</script>

Le reste du fichier demeure inchangé.

Le style qui va venir masquer la référence au chargement de la page

.page-product-configurable {
    .is-hidden-if-product-is-configurable {
        visibility: hidden;
    }
}

.page-product-configurable {

.is-hidden-if-product-is-configurable {

visibility: hidden;

}

[Magento 2] Corriger l’erreur 1227 (42000) à l’import d’un dump SQL avec la commande db:import

24/08/2020 / admin

Attention: remplacer rc-11.sql.gz et rc-11.sql dans mon exemple par le libellé de votre propre base de données.

Problème:

Lorsque je tente d’importer un dump de base de données:

$ n98-magerun2 db:import --compression=gz dumps/rc-11.sql.gz

1	$ n98-magerun2 db:import --compression=gz dumps/rc-11.sql.gz

…j’obtiens le message d’erreur suivant:

Import MySQL Database

Importing SQL dump dumps/rc-11.sql.gz to database magento
ERROR 1227 (42000) at line 1388: Access denied; you need (at least one of) the SUPER privilege(s) for this operation

gzip: stdout: Broken pipe

Finished

Description du problème:

MySQL Error 1227 Access denied; you need (at least one of) the SUPER privilege(s) for this operation.

Solution:

Attention: toujours penser à remplacer rc-11.sql.gz et rc-11.sql dans mon exemple par le libellé de votre propre base de données.

$ gunzip rc-11.sql.gz

1	$ gunzip rc-11.sql.gz

Dégage tous les trucs comme ça : /*!50017 DEFINER=<code>magentoppr@%*/:

$ sed -i 's/\/\*!50017 DEFINER=`magentoppr`@`%`\*\//   /g' rc-11.sql

1	$ sed -i 's/\/\!50017 DEFINER=`magentoppr`@`%`\\// /g' rc-11.sql

Si ça ne fonctionne pas, élargir en ne discriminant plus sur le début (juste /*! suivi de chiffres puis de DEFINER= jusqu’au premier */):

$ sed -i 's/\/\*![0-9]* DEFINER=[^\*]* \*\//    /g' rc-11.sql

1	$ sed -i 's/\/\![0-9] DEFINER=[^\] \*\// /g' rc-11.sql

Puis relancer la commande d’import légèrement modifiée:

$ n98-magerun2 db:import dumps/rc-11.sql

1	$ n98-magerun2 db:import dumps/rc-11.sql

[Javascript] Une alternative ES6+ à la méthode .remove() de jQuery avec querySelectorAll et parentNode.removeChild

23/08/2020 / admin

Source: Pure JavaScript alternative to jQuery’s .remove()

Instruction initiale (en jQuery):

$stock.find('.is-cell:empty').remove();

1	$stock.find('.is-cell:empty').remove();

Boucle for:

// use querySelectorAll to return all matching DOM elements
let $stockEmptyCell = $stock.querySelectorAll('.is-cell:empty');

for ( let i=0; i < $stockEmptyCell.length; i++ )
    if ( $stockEmptyCell[i].innerHTML.length === 0 )
        // use parentNode.removeChild to remove elements
        $stockEmptyCell[i].parentNode.removeChild( $stockEmptyCell[i] );

// use querySelectorAll to return all matching DOM elements

let $stockEmptyCell = $stock.querySelectorAll('.is-cell:empty');

for ( let i=0; i < $stockEmptyCell.length; i++ )

if ( $stockEmptyCell[i].innerHTML.length === 0 )

// use parentNode.removeChild to remove elements

$stockEmptyCell[i].parentNode.removeChild( $stockEmptyCell[i] );

Sous forme de fonction

function removeStockEmptyCells( childrenElement, parentElement ) {
    let $childrenElement = parentElement.querySelectorAll(childrenElement);
    for ( let i = 0; i < $childrenElement.length; i++ )
        if ( $childrenElement[i].innerHTML.length === 0 )
            $childrenElement[i].parentNode.removeChild( $childrenElement[i] );
}

function removeStockEmptyCells( childrenElement, parentElement ) {

let $childrenElement = parentElement.querySelectorAll(childrenElement);

for ( let i = 0; i < $childrenElement.length; i++ )

if ( $childrenElement[i].innerHTML.length === 0 )

$childrenElement[i].parentNode.removeChild( $childrenElement[i] );

}

removeStockEmptyCells( '.is-cell:empty', $stock );

1	removeStockEmptyCells( '.is-cell:empty', $stock );

[javaScript] Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel

21/08/2020 / admin

    // https://stackoverflow.com/questions/24943200/javascript-2d-array-indexof
    // https://stackoverflow.com/a/24943461
    // Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel
    function wasLetterAlreadyPushedInArray(array, value) {
        for (var i = 0; i < array.length; i++) {
            // This if statement depends on the format of your array
            for (var j = 0; j < array[i].length; j++) {
                if (array[i][j] === value) {
                    return true;   // Found it
                }
            }
        }
        return false;   // Not found
    }

// https://stackoverflow.com/questions/24943200/javascript-2d-array-indexof

// https://stackoverflow.com/a/24943461

// Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel

function wasLetterAlreadyPushedInArray(array, value) {

for (var i = 0; i < array.length; i++) {

// This if statement depends on the format of your array

for (var j = 0; j < array[i].length; j++) {

if (array[i][j] === value) {

return true; // Found it

}

return false; // Not found

}

if ( wasLetterAlreadyPushedInArray(arr_words, index) === false ) {
    inGameLetterCount = inGameLetterCount -1;
}

if ( wasLetterAlreadyPushedInArray(arr_words, index) === false ) {

inGameLetterCount = inGameLetterCount -1;

}

[Adobe Audition] Couper un fichier long en de multiples pistes

16/08/2020 / admin

Testé fonctionnel Adobe Audition 2020.

Cliquer sur l’onde, à l’endroit précis où vous souhaitez ajouter une marque (pensez à toujours ajouter une première marque au timestamp 0:00.000).
Appuyez F8 pour ajouter une marque.
Répétez l’opération pour chaque début d’une nouvelle piste.

Une fois toutes vos marques placées, allez dans le panneau des marques et double cliquez sur votre première marque. L’onde va se recentrer à l’endroit où cette dernière à été définie.
Clic droit sur la marque (juste au-dessus de l’onde), puis sélectionnez « Convertir en plage ».
Dans le panneau des marques, vous avez une colonne début et une colonne fin.
Editez la valeur dans la colonne fin pour y mettre le timestamp correspondant au début de la piste suivante.
Répétez l’opération pour chaque piste précédemment définies.

Dans le panneau des marques, Ctrl + a pour sélectionner toutes les marques.
Un bouton « Exporter l’audio des marques de plages sélectionnées dans des fichiers distincts » devrait apparaître. Cliquer dessus.

Articles récents

Catégories

Archives

Méta

Mois : août 2020

[Ligne de commande] Utiliser grep pour manipuler des données

Rassembler les résultats d’une rechercher `grep` dans un nouveau fichier

Compter le nombre de mots de x lettres dans un fichier TXT

Remplacement des diacritiques (les accents, cédilles, etc… sur les lettres)

[javascript] L’équivalent ES6/vanilla JS de la méthode .eq() de jQuery

La méthode .eq() de jQuery

La même chose en ES6/vanilla JS

[javascript] Corriger l’erreur « Uncaught TypeError: Cannot read property ‘getData’ of undefined » (ou ‘setData’) en déclarant un addEventListener correctement

Version vanilla JS/ES6

[Magento 2] Utiliser les Mutation Observers de javascript pour détecter les changement dans le DOM suite à une action utilisateur

La problématique:

La solution:

Surcharge d’un fichier PHTML pour y ajouter un `observer` via les Mutation Observers de Javascript

Rajout d’une classe CSS et d’un ID

Rajout de l’observer JS

Le style qui va venir masquer la référence au chargement de la page

[Magento 2] Corriger l’erreur 1227 (42000) à l’import d’un dump SQL avec la commande db:import

Problème:

Description du problème:

Solution:

[Javascript] Une alternative ES6+ à la méthode .remove() de jQuery avec querySelectorAll et parentNode.removeChild

Sous forme de fonction

[javaScript] Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel

[Adobe Audition] Couper un fichier long en de multiples pistes

Rassembler les résultats d’une rechercher grep dans un nouveau fichier

Compter le nombre de mots de x lettres dans un fichier TXT

Remplacement des diacritiques (les accents, cédilles, etc… sur les lettres)

La méthode .eq() de jQuery

La même chose en ES6/vanilla JS

Version vanilla JS/ES6

La problématique:

La solution:

Surcharge d’un fichier PHTML pour y ajouter un observer via les Mutation Observers de Javascript

Rajout d’une classe CSS et d’un ID

Rajout de l’observer JS

Le style qui va venir masquer la référence au chargement de la page

Problème:

Description du problème:

Solution:

Sous forme de fonction

Rassembler les résultats d’une rechercher `grep` dans un nouveau fichier

Surcharge d’un fichier PHTML pour y ajouter un `observer` via les Mutation Observers de Javascript