Comprendre les polices de caractère, le line-height et pourquoi ça fait chier en CSS...
solutions :
Des transitions entre les pages en une ligne ?!
@view-transition {navigation: auto;}
Pas mal mais pas sur firefox pour le moment... https://caniuse.com/view-transitions
Un fallback que j'avais utilisé, jouer sur onload et l'opacité du body: https://snippetvamp.warriordudimanche.net/index.php?snippet=5EEB0F5F-C4F9-432E-97EE-558E4BA8E4B8
C'est loin d'être parfait mais bon...
/* Dans le Head */
<style type="text/css">body{opacity: 0;transition: opacity 1s}</style>
/* balise body */
<body onload="document.body.style.opacity=1" >WUT ?! Le tag HTML A possède un attribut «ping» qui permet de faire une requête POST vers une URL ?!
Mais à quoi ça sert à part fliquer les visiteurs ?!
En ajoutant #:~:text= à la fin d'une URL puis le texte qui apparaît quelque part sur la page, ce dernier sera surligné lorsque vous accèderez au lien, et la position de défilement placera ce texte au milieu.
Une sorte de version boostée aux hormones des classiques ancres qui ciblent les éléments avec un attribut HTML id.
Voici la syntaxe :
https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
xpath est une façon d'extraire des données d'un document xml plus logique que le parsing par une regex.
En gros, on retrouve un contenu grâce au chemin dans le DOM qui y conduit.
)Tiens, je ne savais pas ça ! On peut rendre un sélecteur insensible à la casse en rajoutant «i»
a[href="https://monsupersite.com" i] {
color: red;
}c'est beau 
Petite mise à jour pour mon script findfeed qui sert à trouver le flux RSS d'un site s'il existe...
Je le reprends de temps à autres quand je tombe sur un site qui échappe aux regex de recherche
Il y a un petit bookmarklet: un clic dessus quand on est sur un site et hop, on récup l'url du flux...
Dans cette version, j'ai également remis à jour la récup pour une chaîne youtube.
Si vous souhaitez améliorer la détection, il suffit d'ajouter ou modifier le tableau $regexes au début du script (ajouter des règles ou les modifier.)
Certains sites peuvent bloquer findfeed parce qu'il ne fait pas une requête «normale» comme celle d'un visiteur lambada C'est le cas d'OVH par exemple, qui bloque l'accès à maximevende.org alors que ce dernier a bien un flux RSS dans son header quand on y accède normalement.
En ajoutant un USER_AGENT à ma fonction CURL , ça semble avoir résolu le problème
Pub pour l'appli de mon pote Erase RSS-fusion
Fusionner, filtrer, manipuler et gérer ses flux RSS en toute simplicité
RSS Fusion est un service en ligne conçu pour simplifier votre veille d'informations. En combinant plusieurs flux RSS en un seul, vous pouvez facilement suivre l'actualité qui vous intéresse.
J'ai testé, c'est très simple, fonctionnel et joli: on peut ainsi créer facilement des flux RSS compilant le contenu de plusieurs autres flux. Par exemple, vous pouvez créer un flux «dev» regroupant tous les flux que vous suivez dans cette catégorie.
Comprendre le virtualDom en en créant un de toutes pièces ? ça a l'air intéressant...
Quelques astuces et bouts de codes CSS pour des effets sympas
Une longue liste... je m'en note quelques-unes...
.aspect-ratio-hd {
aspect-ratio: 16/9;
}
.aspect-ratio-square {
aspect-ratio: 1;
}
.image {
object-fit: cover;
aspect-ratio: 1;
/ Optional: constrain image size /
max-block-size: 250px;
}
/* Before */
margin-left: auto;
margin-right: auto;
/ After /
margin-inline: auto;
Pour styler le soulignement.
Pour styler les checkboxes etc.
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.time('etiquette') et console.timeEnd('etiquette') pour mesurer un temps d'exécution entre deux pointsconsole.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 tableauconsole.dir(array) pour présenter hiérarchiquement un tableau $(selecteur) est équivalent à document.querySelector(selecteur)$$(selecteur) est équivalent à document.querySelectorAll(selecteur)Liste complétée avec https://dev.to/alishgiri/say-no-to-consolelog-556n
Bon, vu les tournures que prennent les choses et la shitstorm qui nous attend, voici un petit plugin pour ajouter facilement un canari de censure à votre pluXML.
Pour rappel, le canari de censure est une image que l'on laisse tant qu'on n'a pas subi de pression éditoriale ou de menaces... Si c'est le cas, on retire l'image et tout le monde comprend le message sans que l'auteur n'ait besoin de courir un risque supplémentaire en publiant un billet d'explication.
Ce plugin ajoute donc une icône de canari (merci nounproject ) sur le site sans qu'il soit nécessaire d'éditer quoi que ce soit ou de s'y connaître en programmation. On active le plugin, on le configure et voilà.
La configuration permet de :
Dans les options de positionnement, on a les quatre coins, l'endroit où le hook est appelé ou le footer (dans ce cas pas besoin d'ajouter le hook dans le code.)
A propos du hook, on peut placer l'image dans les templates avec
eval($plxShow->callHook('censorshipCanary'));
c'est tout.
Je ne sais pas si ça va intéresser quelqu'un ou si ça va être utile... mais bon, c'est là: https://repo.warriordudimanche.net/ZIPFILES/canary.zip
En bossant sur l'appli que j'utilise pour mes cours, j'ai voulu ajouter un accès rapide à un document en tapant le début du nom de dossier dans un input alimenté par une datalist.
Bien entendu, je veux éviter de devoir passer du clavier à la souris plusieurs fois : tape un bout du nom, clique pour sélectionner, appuie sur entrée pour valider...
Donc, il faudrait que la sélection et l'ouverture du document se fasse:
En effet, autant on peut capturer un évènement sur un input, autant ce n'est pas possible sur les option ou le datalist
Donc, il faut gruger et agissant sur les events de l'input.
Je mets ici ma solution actuelle (c'est le code que j'utilise avec mon framework js perso parce que j'ai la flemme de changer ):
<input type="text" placeholder="accès rapide à un document" list="docs_list" id="input_docs_list">
<datalist id="docs_list">
\\ici les option qui vont bien
</datalist>
<script type="text/javascript">
on('keydown','#input_docs_list',function(e){ // ça, c'est mon VanillaJS
if(e.keyCode==13||!e.key){
// si on a appuyé sur entrée ou que l'évènement n'est pas déclenché par une touche (donc, c'est la souris)
window.location.replace("?"+e.target.value);
}
});
on('input','#input_docs_list',function(e){
// celui-ci est pour firefox
if(e.inputType=='insertReplacementText'){
window.location.replace("?"+e.data);
}
})
</script>J'ai testé sous Firefox, Chromium et Edge...
