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.

📘 Ressources

• cheatsheet xpath :https://devhints.io/xpath
• explications : https://blog.hubspot.fr/website/xpath
• doc PHP : https://www.php.net/manual/en/simplexmlelement.xpath.php
• appli de test : http://xpather.com/ (merci dudu )

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.)

Note au passage

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

• Findfeed: https://api.warriordudimanche.net/findFeed/
• Télécharger le script : https://api.warriordudimanche.net/findFeed/?download

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.

Fonctionnalités Principales:

• Fusion de flux : Ajoutez tous vos flux RSS préférés en quelques clics.
• Filtres personnalisés : Affinez votre veille avec des mots-clés.
• Import OPML : Importez vos flux RSS d'autres applications supportant ce format
• Interface intuitive : Profitez d'une navigation fluide et agréable.

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

• taille de police responsive, trois méthodes : https://codyhouse.co/nuggets/responsive-typography
• le scroll-snap pour fixer des étapes au défilement ( bien supporté selon caniuse.com ): https://codyhouse.co/nuggets/scroll-snap

Une longue liste... je m'en note quelques-unes...

Géolocalisation

• https://api.techniknews.net/ipgeo/88.179.39.76
• https://ipapi.co/api/#introduction
• carte https://www.openstreetmap.org/about/api/ https://wiki.openstreetmap.org/wiki/API

Données

• https://www.data.gouv.fr/fr/

a copier

• https://shields.io/badges

aspect-ratio

.aspect-ratio-hd {
  aspect-ratio: 16/9;
}
.aspect-ratio-square {
  aspect-ratio: 1;
}

object-fit

.image {
  object-fit: cover;
  aspect-ratio: 1;
/ Optional: constrain image size /
max-block-size: 250px;
}

margin-inline

/* Before */
margin-left: auto;
margin-right: auto;
/ After /
margin-inline: auto;

text-underline-offset

+ text-decoration-color & text-decoration-thickness

Pour styler le soulignement.

accent-color

Pour styler les checkboxes etc.

Via https://links.kalvn.net/shaare/271jWw

Donc, pour résumer:

• pour avoir le nom des variables avec leur valeur, utiliser { }: 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'appels
• console.time('etiquette') et console.timeEnd('etiquette') pour mesurer un temps d'exécution entre deux points
• console.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
• console.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.

Donc: canary

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 :

• choisir la taille et le positionnement de l'icône,
• choisir le texte de la balise title,
• afficher ou ne pas afficher le canari.

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:

• quand je tape un bout de nom et que j'appuie sur entrée (il ira chercher le premier de la liste)
• quand je tape le début, que j'utilise les flèches pour aller chercher celui que je veux et que j'appuie sur entrée,
• quand je tape le début et que je clique sur le nom du document qui m'intéresse.

Et là, c'est le drame

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...

Après avoir commis BadGit, j'ai récidivé cet aprème avec Avatrine... qui génère un avatar sous forme de lettrine à fond de couleur.

Mais pourquoi me direz-vous ?

Parce que :

1. j'ai trouvé ça joli quand je l'ai vu je ne sais plus où
2. j'aime bien faire joujou avec Imagick
3. je fais ce que je veux

Les paramètres

• str: la chaîne
• [color]: la couleur de fond (calculée par défaut avec un hash de la chaîne)
• [sz]: la taille, 128 par défaut

Pour faire simple

En gros, vous lui passez une chaîne de caractères, genre un pseudo par exemple, et il crée une image avec la première lettre du pseudo sur un fond dont la couleur dépend de la chaîne. Et il fait une rotation de 30° (valeur totalement empirique trouvée au doigt mouillé) sur la lettre pour que ce soit plus joli.

Des exemples

?str=Bronco

?str=Bronco&color=red

?str=Bronco&color=blue&sz=256

?str=Jerrywham&sz=256

?str=Sammyfisher&sz=256

Conclusion

Je sais que j'ai déjà fait des générateurs d'avatars... ( voir sur la page d'API https://api.warriordudimanche.net ROR et Avatomic )

avatar (Ror)

avatomic et que celui-ci ne servira probablement pas plus que les autres mais bon... c'est cadeau quand même !

Comme je ne suis pas chez moi, je profite du fait d'avoir plus de temps pour picorer les videos de Grafikart, toujours aussi pertinentes et compréhensibles. Je me note donc ici quelques astuces intéressantes...

Les fonctions anonymes : https://www.youtube.com/watch?v=xJLwegBM64k

Je connaissais sans tellement les utiliser en PHP à cause du point suivant

utiliser une variable hors scope à l'intérieur de la closure...

où comment Bronco a découvert «use»

$closure=function ($arg1,$arg2) use ($var_exterieure){
    #come on, do something
};

Le routeur : https://www.youtube.com/watch?v=tbYa0rJQyoM

La base : une seule variable $_GET

Comme l'URI ne sera pas complexe, on utilise $_SERVER['REQUEST_URI'] pour déterminer une page à charger à la place d'une variable $_GET un peu moche et sans passer par de l'URLrewriting...

On passerait de ça serveur.com/index.php.p=contact

if ($_GET['p']==='contact'){
    require('contact.php');
}

à server.com/contact

if ($_SERVER['REQUEST_URI']==='/contact'){
    require('contact.php');
}

A intégrer dans mon Helium pour la récup de la page demandée ?

Plus complexe : plusieurs variables $_GET

Il utilise une classe routeur ce qui me donne envie d'essayer d'en faire une simplifiée moi-même afin de pouvoir faire par exemple:

$routeur->toGet('page/user'); pour récupérer dans la variable $_GET les infos de l'URI serveur.com/contact/bronco

👍 glopglop : c'est élégant et propre, on peut injecter les données extraites de l'URI dans la variable $_GET afin d'éviter de modifier trop profondément la logique d'une appli existante.

👎 pasgloppasglop : avec ce système, les infos doivent absolument être dans l'ordre attendu ce que n'impose pas l'usage de $_GET