Comme mon cerveau ne cesse jamais vraiment d'avoir des idées et que le confinement est propice aux réflexions, à la créativité et aux projets, j'ai à l'idée de nouvelles applis de travail pour mes élèves.

Hélas, il me faudrait une bibliothèque JS qui me permette de faire de la synthèse vocale.

Mais attention, hein: je suis prof de langue, il me faut donc une synthèse vocale CORRECTE.

A la recherche de la bibliothèque perdue

J'ai eu beau chercher, je n'ai RIEN trouvé pour le moment, car il faut dire que je cherche une bibliothèque:

• qui fasse bien son boulot: oui parce que la synthèse vocale de l'API native, pardon... je me croirais revenu à mon adolescence quand on faisait mumuse avec la synthèse vocale de l'atariST en écrivant «beesoo» pour obtenir un semblant de trucs vaguement compréhensible bien que particulièrement offensant à toute oreille humaine... Merci de ne pas plaisanter: nous sommes en 2021, j'estime pouvoir compter sur un minimum phonétique.
• qui n'ait pas besoin d'un framework délirant pour fonctionner (genre REAC, Node.js etc). Si le projet doit embarquer plus de framework que de code natif et qu'il faut passer les six prochains mois à se former, je vois pas l'intérêt: une lib est censée FACILITER de travail.
• qui n'utilise pas google: je chie à longueur d'année sur le G du gafam, c'est pas pour me précipiter dessus à la moindre déconvenue... ou alors en leur piquant une lib que j'hébergerais par la suite et qui ne fasse AUCUN appel à leurs serveurs.
• qui soit gratuite: parce que. (oui, j'ai pas d'argument particulier mais j'aime pas payer des entreprises )
• qui soit pérenne s'il s'agit d'un service tiers, je risque un beau matin d'en être privé sans prévenir et de me retrouver grosjean comme devant.

  

  

Un article très intéressant sur l'utilisation des variables en css. Je note ici quelques aspects qui ont attiré mon attention.

Définir des valeurs par défaut

var() permet de spécifier des valeurs si la variable css n'en a pas, par exemple:

.message {
  background-color: var(--student-background, #fff);
  color: var(--student-color, #000);
  font-family: var(--student-font, "Times New Roman", serif);
  margin-bottom: 10px;
  padding: 10px;
}

Ainsi, on peut adapter finement le contenu des variables en fonction de sélecteurs un peu custom tout en gardant un aspect par défaut:

[data-student-theme="rachel"] {
  --student-background: rgb(43, 25, 61);
  --student-color: rgb(252, 249, 249);
  --student-font: Arial, sans-serif;
}

Ce qui permet par exemple d'avoir un style à fort contraste pour un profil particulier sans redéfinir toutes les balises, simplement en affectant de nouvelles valeurs aux variables.

Définir des valeurs spécifiques à une classe

On peut également, dans le même esprit, définir les valeurs au sein d'une classe toujours dans l'idée d'éviter une réécriture et de rendre la feuille de style plus lisible et claire.

les variables inline

Un autre truc auquel je n'aurais pas pensé, c'est de redéfinir les variables css inline ! (attention, idée de génie, je trouve):

1- on définit la classe grid avec une variable par défaut.

.grid {
  --columns: auto-fit;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}

2. on change la valeur de cette variable de façon ponctuelle et contextuelle via l'attribut style de la balise:

<div class="grid" style="--columns: 3;">
  ...
</div>

c'est juste beau

Grâce à CSS3, c'est super simple, il suffit d'utiliser l'unité vh: 100vh = la hauteur du viewport (la zone visible de l'écran)

Du coup, on peut même avoir une barre de menu et d'icônes puis en-dessous une div qui occupe tout le reste du viewport en recourant à calc():

#mon_wrapper{
     height: calc(100vh - 64px); /* 64px = la hauteur du menu+ celle de la barre d'icônes */
}

(...)

Sur une page HTML, j'avais besoin de filtrer en temps réel un grand nombre de photos... ben c'est vraiment simple.

Tu mets un input texte avec un onkeyup qui récupère sa valeur et tu utilises le sélecteur

"img[src*='"+filter+"']" 

pour récupérer toutes les images qui correspondent (celles qui contiennent le filtre).

c'est tout.

En gros et avec mon VanillaJS:

on("keyup","#filter",function(){
        filter=this.value;
        if (filter){
            hide("#images img");
            show("#images img[src*='"+filter+"']")
        }else{
            show("#images img");
        }       
    })

(...)

OMAGAD Il existe une fonction comme explode mais qui utilise les regex : preg_split !

// scinde la phrase grâce aux virgules et espacements
// ce qui inclus les " ", \r, \t, \n et \f
$keywords = preg_split("/[\s,]+/", "langage hypertexte, programmation");
print_r($keywords);
// retour:
Array
(
    [0] => langage
    [1] => hypertexte
    [2] => programmation
)

et peut même renvoyer la position de chaque morceau dans la chaîne d'origine:

$str = 'langage hypertexte, programmation';
$chars = preg_split('/ /', $str, -1, PREG_SPLIT_OFFSET_CAPTURE);
// retour:
Array
(
    [0] => Array
        (
            [0] => langage
            [1] => 0
        )
[1] => Array
    (
        [0] => hypertexte,
        [1] => 8
    )

[2] => Array
    (
        [0] => programmation
        [1] => 20
    )
)

... voire même virer automatiquement les chaînes vides avec le flag PREG_SPLIT_NO_EMPTY

Reste plus qu'à benchmarquer pour voir si c'est pas trop gourmand par rapport à explode.