Tiens ? Je découvre l'attribut sandbox pour les iframe. C'est pas que j'en fasse usage en général mais bon...

Pour écouter un click hors d'un élément, on utilise l'event delegation: on vérifie si la target de l'event correspond ou pas à l'objet qu'on veut.

  document.addEventListener('click', e => {
    if (!element.contains(e.target)) callback();
  });
};
onClickOutside('#my-element', () => console.log('Hello'));
// Will log 'Hello' whenever the user clicks outside of #my-element

Tiens, je ne savais pas qu'addEventListener acceptait des paramètres en option, en particulier un { once : true} qui permet de n'exécuter la fonction attachée à l'évènement qu'une seule fois...

const listenOnce = (el, evt, fn) =>
  el.addEventListener(evt, fn, { once: true });

listenOnce(
  document.getElementById('my-btn'),
  'click',
  () => console.log('Hello!')
); // 'Hello!' will only be logged on the first click

Deuxième épisode de mes notes perso sur la bibliothèque Image magic pour évoquer la classe ImagickDraw qui, comme son nom l'indique, permet de dessiner avec Imagick. ( 1er épisode )

On va se limiter à des usages basiques parce que la lecture du sommaire suffit à imaginer des possibilités certes alléchantes mais totalement hors de propos en ce qui me concerne (courbes de bézier etc)

Spoiler: c'est nettement moins intuitif et simple que pour le traitement d'image... l'écart entre Imagick et GD dans le domaine du tracé n'est plus si évident: ça mériterait de faire un classe pour simplifier tout ça... ( /me se jette sur son bujo pour griffonner spasmodiquement)

Préambule

Cette classe crée un objet servant d'instructions à appliquer ensuite à un objet Imagick.

On partira du principe que vous avez fait des instances des classes comme suit:

$im=new Imagick(); # l'image dans laquelle vous allez appliquer l'objet ImagickDraw
$draw=new ImagikDraw();

Ajouter un texte

Fixer les caractéristiques

• $draw->setFont(fonte); : sélectionne la fonte à utiliser
• $draw->setFontSize(taille); : définit la taille en pixels
• $draw->setFillColor(couleur);: définit la couleur de fond (normalement, couleur est un objet ImagickPixel, voir 1er épisode mais on peut passer une chaîne au format de couleur CSS )
• $draw->setTextAlignment(alignement); : une des constantes d'alignement imagick::ALIGN_LEFT imagick::ALIGN_CENTER Imagick::ALIGN_RIGHT
• $draw->setTextDecoration(decoration): une des constantes de décoration imagick::DECORATION_UNDERLINE imagick::DECORATION_OVERLINE imagick::DECORATION_LINETROUGH et bien d'autres (comme du... bruit ?!).
• $draw->setTextAntialias(true);: ajouter de l'antialias
• l'espacement :
  • entre les mots : $draw->setTextInterwordSpacing(taille)
  • entre les lignes : $draw->setTextInterlineSpacing(taille)

Tracer le texte

• $draw->annotation(x,y,texte) : trace un texte dans la police sélectionnée
• $im->annotateImage( $draw, 0, 0, 0, $fontName ); : ajoute le texte à l'image.

Obtenir des infos utiles

obtenir la liste des polices disponibles: $im->queryFonts($pattern = "*") 🆒 on peut filtrer avec une pattern à la façon de glob().

obtenir les infos fixées par setXXX : getXXX ... ainsi on a getFont(), getFontSize() etc...

obtenir les dimensions de la boîte de texte: $im->queryFontMetrics($draw, text); on récupère un tableau comme ci-dessous

Array
(
    [characterWidth] => 9
    [characterHeight] => 9
    [ascender] => 9 # la taille au-dessus de la baseline
    [descender] => -2 # la taille sous la baseline
    [textWidth] => 71
    [textHeight] => 10
    [maxHorizontalAdvance] => 12
    [boundingBox] => Array
        (
            [x1] => 0
            [y1] => -2
            [x2] => 6.890625
            [y2] => 7
        )
    [originX] => 70
    [originY] => 0
)

Dessiner des formes

Fixer les caractéristiques

• opacité du trait : $draw->setStrokeOpacity(0-1);
• couleur du trait : $draw->setStrokeColor(couleur);
• épaisseur du trait : $draw->setStrokewidth(nb);
• type de trait : $draw->setStrokeDashArray() Le motif semble être plein de possibilités car on peut le définir très spécifiquement et même utiliser une image comme motif (->setStrokePatternURL)
• couleur de remplissage : $draw->setFillColor(couleur);

Formes

• cercle : $draw->circle ($x, $y, $x + $r, $y);
• ellipse : $draw->ellipse($ox,$oy,$rx,$ry,$start,$end);
• point : $draw->point ($x, $y);
• polygone : $draw->polygon ($tableau_de_coordonnées); : array( 'x' => 3, 'y' => 4 ), array( 'x' => 2, 'y' => 6 )
• ligne brisée : $draw->polyline ($tableau_de_coordonnées); : array( 'x' => 3, 'y' => 4 ), array( 'x' => 2, 'y' => 6 )
• rectangle : $draw->rectangle ($x, $y, $x2, $y2); )
• rectangle arrondi: $draw->roundRectangle ($x, $y, $x2, $y2,$rayonx,$rayony);

Exemple

Pour écrire un texte dans une image:

$text='pipo et mollo';
$im=new Imagick();
$draw=new ImagickDraw();
//var_dump($im->queryFonts('*'));exit;
$draw->setFont( 'Courier' );
$draw->setFontSize( 20 );
$draw->setFillColor( 'black' );
$draw->setTextAntialias(true);
$metrics = $im->queryFontMetrics($draw, $text);
$draw->annotation(0,$metrics['ascender'],$text);
$im->newImage( 300, 20, 'lightblue');
$im->drawImage($draw);
$im->setImageFormat( 'png' );
header('Content-type: image/jpeg');
exit($im);  

ce qui donne cette image

Il serait intéressant de pousser les tests mais là, j'ai pas le temps...

Peut-être reprendrais-je des trucs existant avec tout ça ( scriptopic, RoR, Stamp mematic etc etc.)

Allez, pour une fois, j'ai un peu de temps devant moi, je vais éplucher un peu la lib Image magick dont je parlais il n'y a guère...

La base

charger UNE image

Simple: pas besoin de plusieurs fonctions selon le format, il suffit de $images = new Imagick('image.jpg');

charger DES images (et là c'est fort)

Même pas nécessaire de passer par un foreach, on fournit le tableau des fichiers voire directement un glob: $images = new Imagick(glob('images/*.JPG'));

Sauver une image

$im->writeImage('image.jpg');

Faire une miniature

Si on laisse une dimension à 0, les proportions sont conservées (quand tu vois la merde que c'est avec GD !) $image->thumbnailImage(100, 0);

Output une image

header('Content-type: image/jpeg');
$image = new Imagick('image.jpg');
# ici on effectue un traitement puis on sort le résultat
echo $image;

Récupération d'infos sur les images

• taille $im->getImageWidth() $im->getImageHeight()
• format $im->getImageFormat()
  • 🆒 ⮕ pour fixer le format de l'image, c'est juste $im->setImageFormat('png'); ! 😍
  • 📘 on peut fixer le type de compression et l'intensité de celle-ci avec ->setCompression() et ->setCompressionQuality()

création d'une nouvelle image

$im->NewImage(largeur,hauteur,couleur de fond);

création d'une couleur

Comme pour GD, il faut créer un objet couleur dans les traitements d'image, mais c'est plus simple qu'avec GD (et plus complet): il suffit de passer une couleur selon les normes CSS. Du coup, la transparence n'est pas gérée par une connerie de paramètre «alpha» mais simplement par ... rgba()... 💖

$couleur=new ImagickPixel("white");
$couleur=new ImagickPixel("#FFF");
$couleur=new ImagickPixel('rgb(255,255,200)');
$couleur=new ImagickPixel('rgba(255,255,200,0.5)');

🆒 ⮕ Ça peut paraître compliqué, mais en fait, dans les fonctions où on est sensé utiliser ImagickPixel, je me suis aperçu qu'on pouvait tout simplement passer une string contenant la couleur css... elles se démerdent seules. 😍

Traitements

Ajouts

• de bordure ->borderImage(couleur,largeur bords verticaux, largeur bords horizontaux): $im->borderImage(new ImagickPixel("white"), 5, 5);
• de texte :
  • ->setFont() : $im->setFont("example.ttf");
  • ->annotateImage(objet ImagiDraw,x,y,angle,texte) : là il faut utiliser un objet ImagiDraw, que je n'ai pas encore regardé: https://www.php.net/manual/fr/class.imagickdraw.php
• de stéganographie (cacher un filigrane dans une image) ->steganoImage():

Modification de couleurs

• sepia ->sepiaToneImage(force) : une valeur raisonnable est 80 (sic)
• solarisation ->solarizeImage(force)
• négatif ->negateImage(gris): $im->negateImage(0);
• niveaux
  • $im->normalizeImage();
  • $im->autoLevelImage();
• gamma ->gammaImage(niveau) : $im->gammaImage(5);
• contraste $im->contrastImage(niveau)
• luminosité et contraste $im->brightnessContrastImage(niveau luminosite, niveau contraste);
• égalisation $im->equalizeImage()
• coloriser ->colorizeImage(couleur,opacite) : $im->colorizeImage("red",0.5); 🤬 pas réussi à l'utiliser pour ce test...

Modification de taille et d'orientation

• redimensionner :
  • ->resizeImage(largeur,hauteur, filtre, flou) : $i->resizeImage(250,0,Imagick::FILTER_POINT,0);
    • ⭐ note 1: le filtre influe sur la qualité et sur la vitesse: voir https://www.php.net/manual/fr/imagick.resizeimage.php#94493
    • 🆒 note 2 : si on laisse une des dimensions à 0, les proportions sont conservées
  • ->scaleImage(largeur,hauteur): pas encore compris la différence avec la précédente
  • recadrer ->cropImage(largeur,hauteur,x,y): $im->cropImage(200,200,50,50);
  • 💖 créer une miniature à la taille donnée en recadrant l'image autour du centre ->cropThumbnailImage(largeur,hauteur)
• retourner :
  • $im->flipImage() pour retourner horizontalement
  • $im->flopImage() pour retourner verticalement
• pivoter ->rotateimage(color, $angle): $im->rotateImage(new ImagickPixel('#00000000'), 75);

Modifications de qualité

• modification d'opacité ->setImageOpacity(0-1) : $im->->setImageOpacity(0.3);
• netteté ->sharpenImage(rayon, deviation,canal):
• amélioration ->enhanceImage()
• flou :
  • flou tout court ->blurImage(rayon, décalage): $im->blurImage(5,2);
  • gaussien ->gaussianBlurImage(rayon, deviation) : $im->gaussianBlurImage(5,2);
  • de mouvement ->motionBlurImage(rayon,deviation,angle) : $im->motionBlurImage(5,5,45);
• réduction du nombre de couleurs ->posterizeImage(nb de couleurs, 0/1) :$im->posterizeImage(5,0);
• ajout de bruit ->addNoiseImage(type) : `$im->addNoiseImage(imagick::NOISE_GAUSSIAN ); voir les constantes de type de bruit

Modification d'aspect et déformations

• aspect crayon $im->sketchImage(rayon, deviation, angle);
• aspect fusain $im ->charcoalImage(rayon, deviation);
• aspect emboss ->shadeImage(gris, angle, hauteur):
  • $im->->shadeImage(1, 90, 2); # emboss + image grisée
  • $im->shadeImage(0, 90,2) # emboss sur l'image d'origine (couleur)
• peinture à l'huile ->oilPaintImage(rayon) : $im->oilPaintImage(5);
• détection de bords ->edgeImage(rayon) : $im->edgeImage(5);
• vagues ->waves(amplitude,longueur): $im->waveImage( 10, 10);
• déformation ->distortImage(methode, arguments[],0) : voir les constantes de déformation

interactions d'images

• clonage d'une image ->clone(): $imageclonee=$image->clone();
• mélange d'images ->compositeImage($image,composition,x,y,[canal]): $im->compositeImage($autreimage, imagick::COMPOSITE_OVER, 0, 0); (la composition, la façon de mélanger les images, peut être une de celles-ci https://www.php.net/manual/fr/imagick.constants.php#imagick.constants.compositeop)

Conclusion

Image Magick me semble particulièrement bien nommée tant les possibilités sont énormes et la simplicité d'utilisation étonnante: on sent une volonté de se simplifier la vie lors de l'utilisation... c'est juste beau.

Je voulais mettre une image de chaque effet dans les descriptions mais:

1. ça prenait une place de ouf
2. je préfère reprendre certaines de mes applis/api avec imagick
3. j'ai plus le temps, les autres arrivent
4. j'ai la flemme.

[EDIT] En fait, j'ai fait une page de test même si tout n'est pas concluant : http://test.warriordudimanche.net/imagick/

Tout le monde connaît les licences libres habituelles mais il y en a de moins connues et - souvent - moins compliquées à comprendre : petit florilège...

Les licences les plus libres

---

Les licences les plus WTF

---

Les plus utilisables en vrai

Sources :

• Merci à Bendia qui m'a fourni les deux dernières sur le mammouth
• https://javascript.plainenglish.io/11-funny-software-licenses-you-might-have-never-heard-before-87e702d31388 (article ouvert aux seuls abonnés, je copie ici gratos )
• https://github.com/benlk/misc-licenses

(...)

Ouate ?

Après avoir fait goofi puis Getlib j'ai codé vite fait une petite «api» destinée à ramener en local n'importe quelle ressource distante... «quelle différence avec getlib ?» allez-vous me demander sur un ton narquois à propos de la cruauté duquel je tairais scrupuleusement tout commentaire.

J'ai eu envie de faire ça car j'en avais assez de passer par le combo

bouton droit sur une ressource ➜ télécharger ➜ envoyer sur mon site ➜ faire un lien ou une img

Du coup, il suffit d'ajouter l'adresse de l'api à l'url vers la ressource distante... Donc http://insta.com/image.jpg devient par exemple http://api.warriordudimanche.net/fetchit?url=http://insta.com/image.jpg

Fetchit va récupérer la ressource en local et vous servir cette version au lieu de la distante. Comme d'hab' si cette ressource a déjà été récupérée elle n'est pas re téléchargée.

Le deuxième effet kiskool (paye ta réf de vieux) c'est que du coup, comme getlib, ça permet de récupérer toute lib en local et être plus RGPD friendly.

Examples:

utiliser directement une image distante : <img src="http:www.distantserver.com/pic.png"/> ➜ <img src="http://api.url.com?url=http:www.distantserver.com/pic.png"/>

lien vers une ressource distante : <a href="http:www.distantserver.com/file.pdf"> Link to distant file</a> ➜ <a href="http://api.url.com?url=http:www.distantserver.com/pic.png"> Link to distant file</a>

utiliser une lib hébergée sur un CDN distant : <script src="http:www.distantnastyserver.com/lib.js"></script> ➜ <script src="http://api.url.com?url=http:www.distantnastyserver.com/lib.js"></script>

Con figue ?

Afin d'éviter que votre server ne se retrouve floodé par des fichiers vidéos 8K à 60 gigots l'unité, il y a une limite de taille configurée dans la constante SIZE_LIMIT, fixée par défaut à 10 Mo.

Le code ?! c'est... le code.

Ceux qui aiment farfouiller verront que cette fois, j'ai fait une classe fetchit_class.php qui se charge de tout. Son fonctionnement est tellement simple que je me fissure même pas le joufflu à vous le détailler, démerdez-vous.

License

Comme d'hab', c'est cadeau... Utilisez, partagez, modifiez... juste respectez la Dont be a dick licence

donne le ouade

Comme tout ça n'a de sens que si on héberge soi-même, vous pouvez récup' le zip qui va bien ici : https://api.warriordudimanche.net/fetchit/?download

Le mot final

Mes chers cons-patriotes, non aux fuites de données, vive le oueb libre et participatif et vive la france et bisou !

https://antoineboursin.fr/courses/creez-un-editeur-de-texte-wysiwyg

La vie est mal faite: je découvre document.execCommand() permettant de faire du richtext dans un élément contentEditable juste quand il est officiellement déclaré obsolète...

Bon, en même temps, sur stackoverflow, the holy baïbol, certains affirment que:

1. oui, il est obsolète mais n'a pas d'alternative
2. execCommand semble requis pour tout navigateur prétendant sortir sur le marché,
3. son implémentation semble sujette à variations selon le navigateur (le fameux internet explorer syndrome de triste mémoire)

A l'occasion d'un ménage dans les brouillons de billets, je compile les trucs DEV qui trainaient par là

Ressources CSS

• https://webcode.tools/generators/css/keyframe-animation
• https://animista.net/play/text
• https://www.theappguruz.com/tag-tools/web/CSSAnimations/
• https://wweb.dev/resources/animated-css-background-generator/ pour animer des backgrounds
• http://tridiv.com/ : créer des objets en 3D et des animations EN CSS
• https://www.transition.style/ : des transitions CSS
• https://css-tricks.com/complete-guide-to-css-functions/ : A Complete Guide to CSS Functions

Ressources JS

• https://github.com/nextapps-de/mikado : Mikado JS - Un micro framework de template HTML côté client
• https://github.com/Bernardo-Castilho/dragdroptouch : drag et drop sur portable avec un polyfill
• https://constantin-boulanger.fr/en-faire-plus-avec-la-console-javascript-console-log/ : En faire plus avec la Console Javascript - Il n'y a pas que le console.log() !

Ressources PHP

• https://github.com/jcampbell1/simple-file-manager : GitHub - jcampbell1/simple-file-manager: A Simple PHP file manager. The code is a single php file.
• https://grafikart.fr/tutoriels/authentification-2-facteurs-totp-630 : Tutoriel vidéo PHP : Authentification 2 facteurs, TOTP | Grafikart
• https://phpbestpractices.org/ : A short, practical guide for common and confusing PHP tasks (Storing passwords, PHP and MySQL, PHP tags, Auto-loading classes, Single vs. double quotes, define() vs. const, Caching PHP opcode, PHP and Memcached, PHP and regex, Serving PHP, Sending email, Validating email addresses, Sanitizing HTML, PHP and UTF-8, Working with dates and times, Checking null and false values, Removing accent marks (diacritics) )

poe.com, un [bon?!] moyen de tester ChatGPT sans numéro de téléphone, en ne donnant qu'une adresse email, éventuellement jetable.

Je me suis dit, tiens, si je testais avec la génération d'un bout de code ?

Par manque de temps comme par curiosité, je lui ai soumis un truc qui me trotte dans la tête : la séparation des mots espagnols en syllabes (beaucoup moins simple qu'il n'y paraît à priori )

Ben je crois que j'ai cassé chatGPT... Je lui prompte:

crée une fonction php efficace permettant de séparer les mots espagnols en syllabes

Après quelques bouts de code qui pouvait sembler fonctionnels, la découpe ne se faisait jamais correctement.

Je lui fournis un mot ne fonctionnant pas, une explication du problème et lui demande de corriger:

cette fonction a des problèmes de caractères unicode, teste-le avec le mot español et recommence

En affinant et en redemandant de tester avec certains mots, l'appli me propose de nouvelles modifs mais aucune n'est fonctionnelle, contrairement à ce qu'affirme le chatbot: il me dit que la fonction découpe correctement les mots demandés... Donc soit elle ment soit elle ne teste pas le code (LOL)

Je lui demande donc de recommencer et c'est là qu'on rigole:

ça ne fonctionne toujours pas: ton code ne sépare pas bien les syllabes et il le fait dans le désordre (les syllabes ne sont pas dans l'ordre du mot) recommence

On voit que le bouzin part dans une sorte de boucle générative assez drôle, mélangeant les portions de code avec ses propres commentaires, répétés et entrecoupés...

function syllabifier($word) {
  $syllable_patterns = array(
    '/(qui|gue|gui|[aeiouáéíóúü])[aeiouáéíóúü]*|[bcdfghjklmnpqrstvwxyzñ]+/i',
    '/(que|qe|qui|qüe)[aeiouáéíóúü]*/i',
    '/(gui|güi)[aeiouáéíóúü]*/i'
  );

  $syllables = array();
  preg_match_all('/./u', $word, $matches);
  $characters = $matches[0];

  while (!empty($characters)) {
    $matched = false;
    foreach ($syllable_patterns as $pattern) {
      $syllable = '';
      foreach ($characters as $key => $char) {
        $syllable .= $char;
        if (preg_match($pattern, $syllable)) {
          $syllables[] = $syllable;
          $matched = true;
          $charactersJe suis désolé que la fonction ne fonctionne toujours pas pour vous. Je vais essayer de proposer une nouvelle version de la fonction qui prend en compte les cas particuliers de la langue espagnole et qui retourne les syllabes dans l'ordre du mot. Voici la fonction modifiée :

```php
function syllabifier($word) {
  $syllable_patterns = array(
    '/(qui|gue|gui|[aeiouáéíóúü])[aeiouáéíóúü]*|[bcdfghjklmnpqrstvwxyzñ]+/i',
    '/(que|qe|qui|qüe)[aeiouáéíóúü]*/i',
    '/(gui|güi)[aeiouáéíóúü]*/i'
  );

  $syllables = array();
  preg_match_all('/./u', $word, $matches);
  $characters = $matches[0];

  while (!empty($characters)) {
    $matched = false;
    foreach ($syllable_patterns as $pattern) {
      $syllable = '';
      foreach ($characters as $key => $char) {
        $syllable .= $char;
        if (preg_match($pattern, $syllable)) {
          $syllables[] = $syllable;
          $matched = true;
          $charactersJe m'excuse pour cette erreur dans ma réponse précédente. Voici la version corrigée de la fonction :

```php
function syllabifier($word) {
  $syllable_patterns = array(
    '/(ll|[aeiouáéíóúü])[aeiouáéíóúü]*|[bcdfghjklmnpqrstvwxyzñ]+/i',
    '/(que|qe|qui|qüe)[aeiouáéíóúü]*/i',
    '/(gui|güi)[aeiouáéíóúü]*/i'
  );

  $syllables = array();
  preg_match_all('/./u', $word, $matches);
  $characters = $matches[0];

  while (!empty($characters)) {
    $matched = false;
    foreach ($syllable_patterns as $pattern) {
      $syllable = '';
      foreach ($characters as $key => $char) {
        $syllable .= $char;
        if (preg_match($pattern, $syllable)) {
          $syllables[] = $syllable;
          $matched = true;
          $characters = array_slice($characters, $key + 1);
          break;
        }
      }
      if ($matched) {
        break;
      }
    }
    if (!$matched) {
      $syllables[] = $charactersJe m'excuse pour cette erreur dans ma réponse précédente. Voici la version corrigée de la fonction :

```php
function syllabifier($word) {
  $syllable_patterns = array(
    '/(ll|[aeiouáéíóúü])[aeiouáéíóúü]*|[bcdfghjklmnpqrstvwxyzñ]+/i',
    '/(que|qe|qui|qüe)[aeiouáéíóúü]*/i',
    '/(gui|güi)[aeiouáéíóúü]*/i'
  );

  $syllables = array();
  preg_match_all('/./u', $word, $matches);
  $characters = $matches[0];

  while (!empty($characters)) {
    $matched = false;
    foreach ($syllable_patterns as $pattern) {
      $syllable = '';
      foreach ($characters as $key => $char) {
        $syllable .= $char;
        if (preg_match($pattern, $syllable)) {
          $syllables[] = $syllable;
          $matched = true;
          $characters = array_slice($characters, $key + 1);
          break;
        }
      }
      if ($matched) {
        break;
      }
    }
    if (!$matched) {
      $syllables[] = $charactersJe suis désolé pour cette confusion. Voici une nouvelle version de la fonction qui devrait fonctionner correctement pour le mot "español" et qui retourne les syllabes dans l'ordre du mot :

```php
function syllabifier($word) {
  $syllable_patterns = array(
    '/(que|qui|gue|gui|güe|güi|[aeiouáéíóúü])[aeiouáéíóúü]*|[bcdfghjklmnpqrstvwxyzñ]+/i',
    '/(que|qe|qui|qüe)[aeiouáééóúí]+/i',
    '/(gui|güi)[aeiouáéíóúü]+/i'
  );

  $syllables = array();
  preg_match_all('/./u', $word, $matches);
  $characters = $matches[0];

  while (!empty($characters)) {
    $matched = false;
    foreach ($syllable_patterns as $pattern) {
      $syllable = '';
      foreach ($characters as $key => $char) {
        $

Il y a quelques jours, j'ai vu passer un article sur le contenu idéal d'un Readme ( https://warriordudimanche.net/article1840/6448d4a15a710 ) et en partageant le lien sur mastodon, on a émis l'idée de coder un assistant de génération qui permette de faire ça simplement...

Nicolas Delsaux* m'a alors passé quelques exemples d'applis déjà réalisées et - pour autant que j'ai pu en juger avec un test rapide - très bien foutues et très complètes:

• https://www.npmjs.com/package/readme-md-generator réalisé par quelques uns de ses collègues
• https://readme.so/fr

Hélas... vous me connaissez...

le malheur était déjà en train de se produire: impossible d'empêcher mon cerveau de travailler en background façon «à la volette»

Du coup, si je voulais pouvoir faire autre chose, il fallait d'abord vider ma tête de ce «projet» LOL.

Voici donc ReadmeToaster

L'objectif est de pouvoir faire un readme rapidement, de pouvoir modifier «simplement» les éléments du contenu (ordre ou items), de pouvoir ajouter des captures d'écran, sélectionner une license...

La capture d'écran parle d'elle-même: on peut même choisir de générer des fichiers séparés pour certaines parties (Roadmap, Changelog...)

Configuration

La configuration des items se fait via le fichier config/patrs.json qui contient les objets, leur type (select/text/textarea etc), leur titre/label, leur placeholder, leur attribut name etc.

    "Name":{
        "type":"text",
        "title":"The project name",
        "name":"name",
        "placeholder":"ReadmeToaster",
        "class":"name",
        "required":"required"
    },
    "Description":{
        "type":"textarea",
        "title":"A short description (what's the project's purpose ?)",
        "name":"description",
        "placeholder":"A tiny webapp to create normalised readme files",
        "class":"description"
    },
    "Installation":{
        "type":"textarea",
        "title":"How to install or deploy ?",
        "name":"installation",
        "placeholder":"Just copy the folder onto your server and that's it... Noooo, I'm kidding !",
        "class":"install"
    },
    "Contribute":{
        "type":"textarea",
        "name":"contribute",
        "placeholder":"* translations,n* bug finding",
        "class":"text",
        "title":"Explain how to contribute"
    },
    "Contribute in a separated file":{
        "type":"checkbox",
        "name":"contribute_separate",
        "title":"Put contribute in a separate file",
        "placeholder":"",
        "class":"",
        "value":"contribute_text"
    },

On peut ainsi facilement ajouter, modifier ou déplacer des items dans le frontend sans mettre les doigts dans le code. Si on peut pouvoir séparer un contenu dans un fichier à part, on colle un item checkbox dont le nom est ITEM_separate.

Le fichier généré sera un zip contenant tous les fichiers, y compris les éventuelles captures d'écran fournies.

Conclusion

Pas sûr que ça serve à quelqu'un vu que c'est plus un amusement qu'autre chose (ne me jugez pas), mais bon: si jamais quelqu'un le veut... c'est par là : https://outils.warriordudimanche.net/outils/readmetoaster/ et pour le télécharger: http://outils.warriordudimanche.net/outils/readmetoaster/?download

ET EN TOUT CAS, C'EST PLUS DANS MA TÊTE !

[*] Pub gratuite pour Nicolas

• https://framapiaf.org/@Riduidel
• https://nicolas-delsaux.hd.free.fr/Shaarli
• https://riduidel.wordpress.com/

En résumé, pour un bon .README, il faut les paragraphes:

• Nom et description
• Installation
• Configuration et usage
• Déploiement
• Testing (tests unitaires ? Lol)
• Comment contribuer
• Licence
• Roadmap (modifs à venir)
• Changelog (liste des versions et des apports de chacune)
• Author(s) / Contributeurs.trices
• ajouter un lien de démo
• ET UNE FUCKING CAPTURE D'ÉCRAN !

Pour ma part, et comme un des commentateurs, je pense qu'il faudrait mettre le changelog dans un fichier séparé.

On en apprend tous les jours...

<?php
dirname(__DIR__).'../a/b/c';

peut-être fait avec

dirname(__DIR__, 3).'a/b/c';

Merci TImo ! (merci Timoooo)

Une API de text to speech qui comble les attentes que j'avais:

• un service gratuit suffisant
• une bonne prononciation espagnole
• une intonation correcte lors de la lecture
• pas de GAFAM dedans
• appelable simplement, en particulier en PHP

Au départ, je cherchais une lib me permettant de faire la même chose sans dépendre d'un service tiers (autonomie, disparition du service, passage au tout payant toussa).

Hélas, aucune lib gratuite n'a le niveau de qualité nécessaire, l'indépendance aux gafams et la simplicité d'installation/utilisation pour mes projets et applis en cours (si quelqu'un connaît une lib PHP ou JS pour faire ça, je prends avec enthousiasme)... Je me suis donc rabattu vers un microservice externe.

Ce qui m'embêtait, c'était que mes élèves se retrouvent sur mes pages - dans lesquelles je fais en sorte qu'aucune donnée ne sorte vers des tiers - avec un appel direct à une API extérieure, donc avec un problème RGPD éventuel.

Du coup, j'ai fait un wrapper de cette API que je peux moi-même appeler comme une API: ainsi, l'appel côté client se fait toujours vers mon serveur qui répercute la requête vers VoiceRSS, récupère le retour et renvoie sous forme de fichier mp3. De plus, si une requête a déjà été faite, elle a été mise en cache par le wrapper, ce qui diminue la charge serveur et le nombre d'appels vers l'API.

Si ça intéresse quelqu'un, je pourrais développer et filer le code...

Petit bout de code fait à la va-vite dans le but de vérifier la validité des liens d'une page. Mon objectif est de pouvoir à terme montrer automatiquement les liens ne répondant plus sur la page où je regroupe les liens de téléchargement illégal

Le bout de code actuel

Dans le code ci-dessous, j'utilise fetch et les promesses pour lancer des requêtes afin de styler les liens testés:

function checkLinks(nodelist){
    function checkUrl(link){
        return fetch(link).then(function(response){     
            return response.status;
        }).catch(function(error){
            return error.status;
        });
    }
    if (!nodelist){
        checkLinks(document.querySelectorAll('.checkLink'));
        return;
    }
    for (let obj of nodelist){
        if (obj.tagName=="A"){
            checkUrl(obj.href).then(function(response){obj.classList.add("status"+response);});
        }else if (obj.hasAttribute("src")){
            checkUrl(obj.src).then(function(response){obj.classList.add("status"+response);});
        }else{
            checkLinks(obj.querySelectorAll("*[href],*[src]"));
        }
    }
}
checkLinks();

Explication rapide

Étape 1

J'ai d'abord fait une fonction qui appelle une URL et renvoie une promesse qui, une fois résolue, renverra le statut de la requête. On y retrouve .then qui renvoie le statut d'une requête qui aboutit et .catch qui renvoie celui d'une requête se soldant par une erreur.

function checkUrl(link){
        return fetch(link).then(function(response){     
            return response.status;
        }).catch(function(error){
            return error.status;
        });
    }

Les plus coquinous d'entre-vous me feront remarquer à juste titre que, vu ce que je renvoie, je pouvais me contenter de

function checkUrl(link){
        return fetch(link).then(function(response){     
            return response.status;
        });
    }

Ceci dit, en prévoyant les deux cas, je m'autorise à gérer le retour différemment selon si ça aboutit ou pas (par exemple retourner «ok200» ou «error404»

Étape 2:

Ce block n'est là que pour simplifier la vie de l'utilisateur en lui évitant de procéder lui-même au querySelectorAll()

if (!nodelist){
        checkLinks(document.querySelectorAll('.checkLink'));
        return;
    }

Étape 3:

Je parcours la nodeList en vérifiant l'URL passée en href (pour les A) ou en src (pour les img par exemple).

Le dernier cas est celui où l'on souhaite vérifier les liens contenus dans un div portant la classe .checkLink : il suffit d'appeler la même fonction de façon récursive en lui fournissant le nodeList des liens contenus das le DIV en question. (ça permet de vérifier un grand nombre de liens sans avoir à leur ajouter individuellement la classe .checkLink, ce qui est particulièrement utile quand on publie des articles en utilisant markdown )

for (let obj of nodelist){
        if (obj.tagName=="A"){
            checkUrl(obj.href).then(function(response){obj.classList.add("status"+response);});
        }else if (obj.hasAttribute("src")){
            checkUrl(obj.src).then(function(response){obj.classList.add("status"+response);});
        }else{
            checkLinks(obj.querySelectorAll("a,img"));
        }
    }

Comment on l'utilise ?

Il suffit de mettre la classe .checkLink à tout objet dont on veut tester les liens et de coller la fonction dans la page puis de l'appeler via un checkLinks(); de bon aloi.

En l'état, la fonction ajoutera une classe .status200 pour les liens ok ou .status404 pour les URL qui ne répondent plus.

Il ne reste plus qu'à styler ces classes en changeant la couleur, le fond ou en ajoutant des emoji avec un petit content. On peut même éventuellement masquer un objet dont l'URL ne répond pas...

Limites

Le script étant en JS, il se heurte évidemment aux règles de la politique CORS: toute requête hors du domaine en cours va échouer à moins de redéfinir le CORS dans le Head de la page via

<meta http-equiv="Content-Security-Policy" content="Content-Security-Policy:..."/>

Licence

Comme d'habitude, il s'agit autant d'un proof of concept que d'une truc utile... en tout cas, n'hésitez pas à en faire rigoureusement ce que vous voulez: c'est cadeau...