J'adore Mastodon : tu suis quelqu'un parce que tu l'as trouvé drôle et tu apprends qu'il a un blog sur le javascript qu'il partage parce que « il se dit qu'il ne doit pas être le seul javascripteur sur la planète.»
Si vous vous dites, mouais encore un blog sur JS, gardez à l'esprit que voilà un bloggueur qui intitule un billet «jQuery doit mourir», qui écrit qu'XMLHttpRequest est «inutilement compliqué» mais que dieu merci on a créé fetch, même si on ne comprend pas toujours bien ce qu'il renvoie...
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.
OMAGAD j'adore ce genre de sites d'astuces et de snippets ultra condensés !
MERCI COPAIN ! o/
[EDIT]
La vache ! Pour certaines astuces, l'auteur propose plusieurs possibilités. En bon nerd, je me dis que j'aimerais bien savoir s'il y a des différences de perfs... Spoiler: y'en a.
Pour la deuxième astuce, le clonage de tableaux, le site propose:
// `arr` is an array
const clone = arr => arr.slice(0);
// Or
const clone = arr => [...arr];
// Or
const clone = arr => Array.from(arr);
// Or
const clone = arr => arr.map(x => x);
// Or
const clone = arr => JSON.parse(JSON.stringify(arr));
// Or
const clone = arr => arr.concat([]);
Du coup, je bricole un petit test vite fait, genre ça:
function repeat(funct,nb){
let t=Date.now();
let arr=[1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9];
for (let i=0;i<=nb;i++){
let a=funct(arr);
}
return Date.now()-t;
}
let nb=100000;
console.log("arr.slice(0) x "+nb+": "+repeat(function(arr){return arr.slice(0);},nb) );
console.log("[...arr] x "+nb+": "+repeat(function(arr){return [...arr];},nb) );
console.log("Array.from(arr) x "+nb+": "+repeat(function(arr){return Array.from(arr);},nb) );
console.log("arr.map(x => x) x "+nb+": "+repeat(function(arr){return arr.map(x => x);},nb) );
console.log("JSON.parse(JSON.stringify(arr)) x "+nb+": "+repeat(function(arr){return JSON.parse(JSON.stringify(arr));},nb) );
Histoire de voir ce que chaque méthode donne en vitesse ...
Le résultat est sans appel...
BIM!
Donc arr.slice(0) est 10x plus rapide que [...arr] et carrément 33 fois plus rapide que le recours à JSON (la non surprise est totale)
Dans mes applis destinées aux élèves, je mets toujours un bouton permettant de passer à une fonte pour dyslexiques, la très célèbre opendyslexic et j'ai souvent de bons retours.
Toutefois, je me suis dit que ce serait bien d'améliorer un peu le truc et d'en faire une classe que je puisse réutiliser plus ou moins telle quelle.
En gros, je force la police en opendyslexic, j'augmente un peu l'espacement entre les lettres ainsi que celui entre les mots et la taille de la police.
ça sous entend que vous avez la police opendyslexic dans un dossier font, comme dans le zip que voici, prêt à l'usage : Dislexic_css.zip
En bonus,
Je vous file un petit (!) bookmarklet qui fait ce qu'il peut pour passer le site courant en version dys. (Vu que le chargement de fontes distantes est bloqué pour des raisons de sécurité, j'ai directement inclus la fonte en base64 dans le css)
Comme toujours, ça peut sans aucun doute s'améliorer: j'ai fait ça entre les devoirs des enfants, les corrections de copies et le repas à préparer. Toutefois, ça fonctionne plutôt bien sur tous les sites que j'ai testés, même les sites de warez
Bon, on ne m'enlèvera pas de la tête que c'est pas super intuitif, ni super simple, mais bon, je n'ai trouvé que ça qui fonctionne...
Mon souci
Je crée une image côté navigateur avec canvas
je veux l'envoyer à mon serveur pour stockage
On pourrait croire que c'est simple, hein... ben j'ai pas trouvé, personnellement.
J'ai essayé
de transformer le canvas en blob et de l'envoyer via un formdata
de transformer le canvas en blob et de l'envoyer comme un objet simple
de transformer le canvas en DataURL et de l'envoyer via un formdata
de transformer le canvas en DataURL et de l'envoyer comme un objet simple
Mais à chaque fois, j'ai pas été foutu de récupérer les données côté PHP (bon, je me doute qu'il doit y avoir un pacson de trucs que j'ignore encore, hein...)
Ensuite, j'ai pensé
«et si je passais les données au format base64, je devrais pouvoir les récupérer facilement...» car je pratique couramment un optimisme ridicule au sujet duquel il m'arrive encore de sombrer dans la stupéfaction à grand fracas...
Dont acte: je recommence à farfouiller avec des fetch, des posts pis tout mais sans succès: les données décodées font une image invalide.
en désespoir de cause
Je décide de procéder moins élégamment: je copie les données vers un formulaire caché que je poste en target blank pour pas perdre ma page de travail... Oui, je sais, c'est sale, c'est moche, c'est pas secure, j'en ai conscience, c'est pas la peine de m'enfoncer, j'ai déjà assez honte comme ça...
Je reçois bien de la base 64, je décode... Et l'image n'est toujours pas valide. Puis une recherche m'apprend qu'il faut virer l'en-tête base64 côté serveur avant de décoder pour que ça fonctionne...
Note pour la prochaine fois que je voudrai faire un drag & drop de fichiers sur Firefox
Comme découvert grâce à ArthurHoaro, pour obliger le navigateur à gérer le drop de fichier sur une dropzone, il faut d'abord faire un preventDefault() sur les événements dragover et/ou dragenter.
Se fabriquer des outils Dev avec des bookmarklets... moui, mais la politique CORS va bloquer tout chargement de script extérieur à celui sur lequel on déclenche le bookmarklet, non ?!
Je partage une petit truc vraiment tout con que je viens de tester pour une de mes applis de boulot.
J'avais besoin de confirmer vite fait et sans prise de tête le clic sur un lien «supprimer»: j'ai opté pour l'utilisation d'un attribut «confirm» et d'un bout de JS qui va bien.
Le code ci-dessous utilise ma petite betalib VanillaJS perso (http://cdn.warriordudimanche.net/VanillaJS.js) parce que j'avais la flemme de récrire la partie ciblage et foreach, mais vous aurez pigé le concept (c'est vraiment tout con)
on('click','a[confirm]',function(e){
// La partie à mettre dans un évènement click
e.stopPropagation();
if (!confirm("Etes-vous certain ?")){
e.preventDefault();
return false;
}
});
L'avantage, c'est qu'il suffit de coller l'attribut «confirm» sur un lien pour qu'il ne soit activé qu'en cas de confirmation.
)
BIM!
.jpg)
