De la «coloration syntaxique» en 2ko ? je prends ! La différenciation se fait en jouant sur l'intensité et le contraste de la couleur de base.
Très joli rendu en tout cas !
via TImo : https://lehollandaisvolant.net/?id=20220226192717
Si toi aussi tu veux te faire un petit bookmarklet pour envoyer des données de la page courante vers un autre site, alors tu vas kiffer 😍 parce que ce petit bout de code te permet de le faire sans rien coder 😎.
Si on veut pouvoir:
alors ça peut se faire ici.
Voici deux exemples:
Pour faire simple,
Le bookmarklet est généré en temps réel et une fois les réglages faits, il suffit de glisser-déposer le lien du bas.
J'ai ajouté la possibilité de modifier la variable permettant de passer les données; en effet, duckduckgo utilisera q=[recherche] mais un autre site pourra demander query=[recherche]...
De plus, on peut spécifier de ne pas utiliser le format URL?variable=[donnée] mais URL/[donnée] pour les sites ayant une rewriteurl (comme wikipedia qui exige un format fr.wikipedia.org/wiki/[RECHERCHE] )
Enfin, si vous spécifiez une URL contenant déjà des paramètres GET (comme mespagesquejaime.com/ajouter.php?user=MOI&apikey=321fd5613e32), le script le prendra en compte et les nouveaux paramètres s'ajouteront correctement ( mespagesquejaime.com/ajouter.php?user=MOI&apikey=321fd5613e32&title=mon cul sur la commode&url=www.monculsurlacommode.fr )
Vous pouvez essayer de générer un bookmarklet pour rechercher directement la sélection sur youtube:
Et voilà.
Sur l'idée de DukeArt j'ai ajouté la possibilité d'éditer le code (vive contenteditable et obj.toggleAttribute 👍 ) ! Merci the Duke 🤘😎🤘
Vous pouvez utiliser librement et l'outil et le code en mode DBAD. Pour le télécharger, c'est par là
Il est possible de l'utiliser sans serveur php vu que c'est du HTML+JS vanilla (mais le script de téléchargement du script ne fonctionnera pas).
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...
Donc, pour résumer:
console.log({var})console.warn(), console.error() et console.info() pour différencier l'aspect du message.console.assert(condition,retour) pour éviter un if (condition){console.log(retour)console.trace() pour remonter la pile d'appelsconsole.group('nom'), console.groupCollapsed('nom') et console.groupEnd('nom') pour regrouper des console log() console.table(array) pour présenter les données sous forme de tableau$(selecteur) est équivalent à document.querySelector(selecteur)$$(selecteur) est équivalent à document.querySelectorAll(selecteur)Un truc que je teste sur ma page de générateur de comics pour masquer le chargement de la page...
Minimaliste...
/* Dans le Head */
<style type="text/css">body{opacity: 0;transition: opacity 1s}
/* balise body */
<body onload="document.body.style.opacity=1" >
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.
J'ai eu beau chercher, je n'ai RIEN trouvé pour le moment, car il faut dire que je cherche une bibliothèque:
)
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)
J'aime bien faire ce genre de tests 
Une lib créant une dropzone automatiquement à la place d'un input-file. Avec les explications techniques.
Grafikart <3
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.
@font-face {
font-family: 'opendyslexic';
font-style: normal;
font-weight: 400;
src: local('font/opendyslexic'), url('font/opendyslexic.woff') format('woff');
}
.dyslexic{
font-family:"opendyslexic";
line-height:1.8em;
letter-spacing: 0.12em;
word-spacing: 0.39em;
font-size:1.5em;
}ç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
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...
On pourrait croire que c'est simple, hein... ben j'ai pas trouvé, personnellement.
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...)
«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.
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 teste et... ça marche.
SUPER INTUITIF MERCI
Oufti ! Je vais parcourir tout ça DQP... Merci Seb !
Tiens, intéressant ça: utiliser console.log({ myVariable }); plutôt que console.log(myVariable); ou console.log("myVariable:", myVariable);
Tiens, ça peut être utile ça ! Bonne idée et toute simple en plus !
Merci Timo !
EDIT:
Sinon, il y a ça aussi, plus élaboré mais pas usine à gaz quand même : https://postit.ecyseo.net/
Merci JerryWham
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.
On peut le faire en dur dans le HTML:
<div ondragover="return false">
<div ondragover="event.preventDefault()">Ce qui peut même servir pour le ciblage du drop avec un sélecteur genre *[ondragover]
On peut bien entendu également le définir directement dans le js:
document.getElementById("body").addEventListener("drop",function(e){
console.log(e);
e.preventDefault();
e.stopPropagation();
})
document.getElementById("body").addEventListener("dragover",function(e){
e.preventDefault();
e.stopPropagation();
})
document.getElementById("body").addEventListener("dragenter",function(e){
e.preventDefault();
e.stopPropagation();
}).jpg)
Sources:
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 ?!
Et ben si:
