SnippetVamp

Ne perds plus jamais de temps en cherchant tes snippets !

Bienvenue dans mon SnippetVamp.

1 - CSS Un effet label/input avec icĂ´ne et flexbox - Le Hollandais Volant
<div class="input-container">
    <label for="pseudo">Votre pseudo :</label>
    <input id="pseudo" />
</div>


Maintenant, il suffit d’utiliser les flex box pour les aligner côte à côte et de donner une hauteur au conteneur :

.input-container {
    display: flex;
    height: 24px;
}

input-container > input {
    flex: 1;
}

On veut une icône à la place du label. Très bien : on va placer en fond sur ce dernier.
Pour ne pas afficher le texte qu’il contient, on va également lui donner une largeur définie (celle de l’icône), masquer ce qui se dépasse (avec overflow) et faire en sorte que le texte soit entièrement sorti du champ de vision du label (avec box-sizing et padding).

Le CSS devient alors :

.input-container {
    display: flex;
}

input-container > input {
    flex: 1;
}

input-container > label {
    width: 24px;
    padding-left: 24px;
    box-sizing: border-box;
    overflow: hidden;
    background: url(icone.png);
}
			
2 - Afficher les arguments d'un script dans l'ordre inverse de leur saisie
#!/bin/bash                                                                               
                                                                                          
if [ $# -lt 1 ];                                                                          
then                                                                                      
        echo "Usage : $0 arg ..."                                                         
        exit 1                                                                            
else                                                                                      
num=$#                                                                                    
for var in "$@" ; do                                                                      
        phrase[$((num-1))]="$var"                                                         
        ((num--))                                                                         
done                                                                                      
fi                                                                                        
echo ${phrase[@]:0:$#}                                                                    
			
3 - Tests en bash
Conditions

Deux syntaxes équivalentes permettent de tester des expressions : [ expression ] et test expression. Elles renvoient toutes les deux un code de retour valant 0 si l'expression est vraie et 1 si l'expression est fausse. Attention en shell (bin bash) on ne met pas de if avec des = , on utilise les valeurs eq, lt etc...)

$ [ 2 = 2 ]
$ echo $?
0
$ [ 2 = 3 ]
$ echo $?
1

La commande test fonctionne de manière complétement équivalente :

$ test 2 = 2
$ echo $?
0
$ test 2 = 3
$ echo $?
1

Les opérateurs de tests disponibles sont, pour les chaînes :

    c1 = c2, vrai si c1 et c2 sont égales ;
    c1 != c2, vrai si c1 et c2 sont différentes ;
    -z c, vrai si c est une chaîne vide ;
    -n c, vrai si c n'est pas une chaîne vide.

Pour les nombres :

    n1 -eq n2, vrai si n1 et n2 sont égaux (equal) ;
    n1 -ne n2, vrai si n1 et n2 sont différents (non equal);
    n1 -lt n2, vrai si n1 est strictement inférieur à n2 (lower than);
    n1 -le n2, vrai si n1 est inférieur ou égal à n2 (lower or equal);
    n1 -gt n2, vrai si n1 est strictement supérieur à n2 (greater than) ;
    n1 -ge n2, vrai si n1 est supérieur ou égal à n2 (greater or equal).

Pour les expressions :

    ! e, vrai si e est fausse ;
    e1 -a e2, vrai si e1 et e2 sont vraies ;
    e1 -o e2, vrai si e1 ou e2 est vraie.

Test if

L'instruction if permet d'effectuer des opérations si une condition est réalisée.

if condition
    then instruction(s)
fi

L'instruction if peut aussi inclure une instruction else permettant d'exécuter des instructions dans le cas ou la condition n'est pas réalisée.

if condition
    then instruction(s)
else instruction(s)
fi

Il est bien sur possible d'imbriquer des if dans d'autres if et notamment des constructions telles que celle ci sont assez courantes :

if condition1
    then instruction(s)
else
    if condition2
        then instruction(s)
    else
        if condition3
            ...
        fi
    fi
fi

Pour permettre d'alléger ce type de code, ksh fournit un raccourci d'écriture : elif. Le code précédent pourrait être réécrit ainsi :

if condition1
    then instruction(s)
elif condition2
    then instruction(s)
elif condition3
    ...
fi

Test case

L'instruction case permet de comparer une valeur avec une liste d'autres valeurs et d'exécuter un bloc d'instructions lorsque une des valeurs de la liste correspond.

case valeur_testee in
valeur1) instruction(s);;
valeur2) instruction(s);;
valeur3) instruction(s);;
* ) instruction_else(s);;
...
esac

Ce code est équivalent à :

if [ valeur_teste = valeur1 ]
    then instruction(s)
elif [ valeur_testee = valeur2 ]
    then instruction(s)
elif [ valeur_testee = valeur3 ]
    then instruction(s)
...
else
    instruction_else(s)
fi



Syntaxe du test

Deux syntaxes équivalentes permettent de réaliser des tests sur des opérandes:

[ expression ]

ou

test expression


Ces deux commandes renvoient un code de retour valant 0 si l'expression est vraie et 1 si l'expression est fausse. Exemple :

$ [ "salut" = "salut" ]
$ echo $?
0
$ [ 2 -eq 3 ]
$ echo $?
1
$ [ -f /tmp/fichier ]
$ echo "file exist"

La commande test fonctionne de manière complètement équivalente :

$ test "salut" = "salut"
$ echo $?
0
$ test 2 -eq 3
$ echo $?
1

mais certains lancements peuvent être fait sous certaine condition système:

pidof api && do_some_thing || exit

Tester une variable

Il est tout à fait possible de tester le contenu d'une variable avec les commandes test ou [ :

[ $a = toto ]

la substitution de la variable par sa valeur est alors effectuée et le test est vrai si la variable contient la valeur toto et faux sinon. Par contre, si la variable a n'est pas définie lors du test, la substitution de la ligne sera :

[  = toto ]

ce qui provoquera une erreur. Il est donc préférable de toujours protéger une variable lors d'un test soit avec des guillemets :

[ "$a" = toto ]

soit avec un préfixe :

[ x$a = xtoto ]

Attention, dans ce cas un caractère espace dans $a pose quand même un problème s'il est substitué. Il faut donc préférer la solution précédente.
Tests sur les objets du système de fichiers

Les opérateurs de tests disponibles sont, pour les objets du système de fichiers :

    [ -e $FILE ]

vrai si l'objet désigné par $FILE existe dans le répertoire courant,

    [ -s $FILE ]

vrai si l'objet désigné par $FILE existe dans le répertoire courant et si sa taille est supérieure à zéro,

    [ -f $FILE ]

vrai si l'objet désigné par $FILE est un fichier dans le répertoire courant,

    [ -r $FILE ]

vrai si l'objet désigné par $FILE est un fichier lisible dans le répertoire courant,

    [ -w $FILE ]

vrai si l'objet désigné par $FILE est un fichier inscriptible dans le répertoire courant,

    [ -x $FILE ]

vrai si l'objet désigné par $FILE est un fichier exécutable dans le répertoire courant,

    [ -d $FILE ]

vrai si l'objet désigné par $FILE est un répertoire dans le répertoire courant,

    [ -L $FILE ]

vrai si l'objet désigné par $FILE est un lien.

    [ -N $FILE ]

vrai si l'objet désigné par $FILE à été modifié depuis la dernière lecture.

Tests sur les chaînes de caractères

Les opérateurs de tests disponibles sont, pour les chaînes :

    [ c1 = c2 ] vrai si c1 et c2 sont égales,
    [ c1 != c2 ] vrai si c1 et c2 sont différentes,
    [ -z c ] vrai si c est une chaîne vide (Zero),
    [ -n c ] vrai si c n'est pas une chaîne vide (Non zero).

Tests sur les nombres (entiers)

Pour les nombres :

    [ n1 -eq n2 ]

vrai si n1 et n2 sont égaux (EQual),

    [ n1 -ne n2 ]

vrai si n1 et n2 sont différents (Not Equal),

    [ n1 -lt n2 ]

vrai si n1 est strictement inférieur à n2 (Less Than),

    [ n1 -le n2 ]

vrai si n1 est inférieur ou égal à n2 (Less or Equal),

    [ n1 -gt n2 ]

vrai si n1 est strictement supérieur à n2 (Greater Than),

    [ n1 -ge n2 ]

vrai si n1 est supérieur ou égal à n2 (Greater or Equal).

Tests et logique

Ou comment introduire une alternative logique :

    [ ! e ]

vrai si e est fausse. ! est la négation.

    [ e1 -a e2 ]

vrai si e1 et e2 sont vraies. -a ou le et logique (And).

    [ e1 -o e2 ]

vrai si e1 ou e2 est vraie. -o ou le ou logique (Or).

Un exemple complet

#!/bin/bash
read -p "Si vous etes d'accord entrez o ou oui : " reponse
if [ ! "$reponse" = "o" -a ! "$reponse" = "oui" ]; then
    echo "Non, je ne suis pas d'accord !" 
else
    echo "Oui, je suis d'accord"
fi

L'exemple montre la manière dont on utilise des négations avec un et logique. En particulier, il ne faut pas utiliser de parenthèses. Le non (le point d'exclamation) s'applique à la proposition logique qui vient ensuite (seulement "$reponse" = "o"). À noter que read -p permet de poser une question et de stocker la réponse de l'utilisateur dans une variable. 
			
5 - Generating v4 UUIDs in MySQL | Christian Emmer
A custom uuid_v4() function

Here's the function, with comments explaining each group:

CREATE FUNCTION uuid_v4() RETURNS CHAR(36)
BEGIN
    -- 1st group is 8 characters = 4 bytes
    SET @g1 = HEX(RANDOM_BYTES(4));

    -- 2nd group is 4 characters = 2 bytes
    SET @g2 = HEX(RANDOM_BYTES(2));

    -- 3rd group is 4 characters = 2 bytes, starting with a: 4
    SET @g3 = CONCAT('4', SUBSTR(HEX(RANDOM_BYTES(2)), 2, 3));

    -- 4th group is 4 characters = 2 bytes, starting with a: 8, 9, A, or B
    SET @g4 = CONCAT(HEX(FLOOR(ASCII(RANDOM_BYTES(1)) / 64) + 8), SUBSTR(HEX(RANDOM_BYTES(2)), 2, 3));

    -- 1st group is 12 characters = 6 bytes
    SET @g5 = HEX(RANDOM_BYTES(6));

    RETURN LOWER(CONCAT(@g1, '-', @g2, '-', @g3, '-', @g4, '-', @g5));
END;

Here's a version without variables, to remove any overhead they might add:

CREATE FUNCTION uuid_v4() RETURNS CHAR(36)
BEGIN
    RETURN LOWER(CONCAT(
            HEX(RANDOM_BYTES(4)),
            '-', HEX(RANDOM_BYTES(2)),
            '-4', SUBSTR(HEX(RANDOM_BYTES(2)), 2, 3),
            '-', HEX(FLOOR(ASCII(RANDOM_BYTES(1)) / 64) + 8), SUBSTR(HEX(RANDOM_BYTES(2)), 2, 3),
            '-', hex(RANDOM_BYTES(6))
        ));
END;

This uses RANDOM_BYTES() instead of RAND() because the former is non-deterministic and therefore more cryptographically secure, resulting in fewer UUID collisions in the end.

RANDOM_BYTES() was introduced in MySQL v5.6.17 (2014) , and is currently not available in MariaDB.
			
6 - Arborescence en html/css
.tree {
  --spacing: 1.5rem;
  --radius: 10px;
  --marker-bg-default: #ddd;
  --marker-bg-haschild: #6b9abb;
  line-height: 2rem;
}
.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}

.tree ul li {
  border-left: 2px solid #ddd;
}
.tree ul li:last-child {
  border-color: transparent;
}

.tree ul li::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  border: solid #ddd;
  border-width: 0 0 2px 2px;
}

.tree summary {
  display: block;
  cursor: pointer;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
  display: none;
}
.tree summary:focus {
  outline: none;
}
.tree summary:focus-visible {
  outline: 1px dotted #000;
}

.tree li::after,
.tree summary::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius) + 2px);
  left: calc(var(--spacing) - var(--radius) - 2px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  border-radius: 50%;
  background: var(--marker-bg-default);
}

.tree summary::before {
  content: "+";
  z-index: 1;
  background: var(--marker-bg-haschild);
  color: #fff;
  line-height: calc(2 * var(--radius));
  text-align: center;
}
.tree details[open] > summary::before {
  content: "−";
}

<ul class="tree">
  <li>
    <details open>
      <summary>Informatique</summary>
      <ul>
        <li>
          <details>
            <summary>Périphériques</summary>
            <ul>
              <li>Clavier</li>
              <li>Souris</li>
              <li>Ecran</li>
            </ul>
          </details>
        </li>
        <li>
          <details open>
            <summary>Stockage</summary>
            <ul>
              <li>Disque dur</li>
              <li>SSD</li>
              <li>Clé USB</li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Composants</summary>
            <ul>
              <li>Processeur</li>
              <li>Carte mère</li>
              <li>Mémoire</li>
              <li>Carte graphique</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>
			
7 - ordonner un tableau en fonction de la longueur des chaines qui le composent
function order($a,$b){
    return strlen($b)-strlen($a);
}
usort($mots,'order');

			
8 - Des sous-titres qui fonctionnent avec la balise video
<video controls title="sdfgsdfg" preload="auto" crossorigin>
    <source src="Marco_Castelblanco.mp4" type="video/mp4"/>
    <!--   kind="captions" ou "subtitles" ATTENTION AU PLURIEL -->
    <track kind="captions" srclang="fr" label="sous-titre" src="Marco_Castelblanco.vtt" default="true"/>
    Sorry, your browser doesn't support embedded videos.
</video>
			
10 - trier des fichiers par date (ascendant)
$files=glob('*');

usort(
        $files,
        function($file1, $file2) {
        return filemtime($file1) <=> filemtime($file2);
    }
);

// pour descendant:
$files=array_reverse($files);