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

sympa, on gagne du temps... ou alors il suffit de s'en foutre en mode ça marche sur mon ordi...

Histoire de bosser un peu sur l'utilisation d'Imagick (pour lequel je m'étais fait des notes ici 12) j'ai essayé de faire une petite «api» de génération de badges simple.

Objectifs

• Un script qui permet de faire des badges à une ou plusieurs parties,
• gestion de la taille de police et de la police,
• gestion des couleurs,
• gestion d'icônes

Résultat

On peut appeler l'api directement en précisant les variables suivantes:

• txt: le texte; s'il y a plusieurs parties, on les sépare par un |. exemple ?txt=trop beau|pas vrai
• backcolor: la couleur de fond; on peut préciser la couleur de chaque partie en les séparant par | aussi. La notation se fait comme en css (sauf pour le # qu'il faut omettre) ```F00|red|rgba(255,0,0,0.5)
• textcolor: pareil pour le texte. Par défaut, badgit va choisir le blanc ou le noir afin de maintenir le meilleur contraste.
• fontsize: la taille de police
• font: une des fontes installées. Je n'en ai mis que deux pour le moment mais on peut utiliser «courier» par exemple.
• icon: le nom d'une icône de iconeleon (j'ai d'ailleurs ajouté une option pour copier le nom en question depuis l'api d'icônes.)

Exemples

api.warriordudimanche.net/badgit/?txt=Mon%20super%20badge&backcolor=red&txtcolor=&icon=&font=montserrat.ttf&fontsize=16

api.warriordudimanche.net/badgit/?txt=Mon%20super|badge&backcolor=red|pink&txtcolor=pink|red&icon=&font=montserrat.ttf&fontsize=16

api.warriordudimanche.net/badgit/?txt=Mon%20super|badge|de%20ouf&backcolor=red|pink|maroon&txtcolor=pink|red&icon=&font=montserrat.ttf&fontsize=16

api.warriordudimanche.net/badgit/?txt=Mon%20super|badge%20|de%20ouf%20&backcolor=red|pink|maroon&txtcolor=pink|red&icon=|fontawesome_solid/smile-beam.svg|fontawesome_solid/hand-back-fist.svg&font=montserrat.ttf&fontsize=16

Frontend

J'ai goupillé aussi un petit front basique, histoire de ne pas se taper tout au clavier.

Conclusion

Ça ne servira sans doute à personne mais bon, sait-on jamais

Ceci dit, il y a une classe badge qui peut faire l'affaire quelque part...

Le code est là : https://api.warriordudimanche.net/badgit/?download

Heu, sinon j'avais fait ce truc là il y a un moment... https://api.warriordudimanche.net/qr/

On peut lui passer une chaîne de caractères et il génère le Qr code, il y a un frontend (minimaliste) et il permet de faire un bookmarklet... ça utilise http://phpqrcode.sourceforge.net.

C'est en PHP, c'est auto hébergeable sans docker

Si ça intéresse quelqu'un, pour le zip, c'est par là, c'est cadeau : https://api.warriordudimanche.net/qr/?download

Je colle ici la mini doc que j'avais faite:

returns a qrcode png image
txt: the qrcode content
version: displays this api's version
download: downloads the php api file
this: returns a qrcode of the referer url
example: api.warriordudimanche.net/qr/?txt=loremipsum
uses: http://phpqrcode.sourceforge.net

Une bibliothèque de plus de 3000 éléments d'UI...

Je mettrais mon nez là-dedans un jour... il doit y avoir beaucoup à apprendre rapidement en auditant ces snippets...

Un jour...

API ouverte de traduction automatique, auto-hébergée, mode hors ligne, facile à configurer.