Je n'ai pas forcément compris toutes les explications mais l'article est vraiment intéressant.

J'imagine qu'il me faudrait réfléchir pour remplacer mon usage des media queries façon patch à la pelle de chantier des trucs qui foirent quand on change la taille du viewport... si je pouvais me passer des breakpoints...

Mais bon, j'ai déjà bossé à un refacto du css de mon appli de documents/exercices pour les élèves en modernisant le code à coups de nesting et de variables pour les couleurs... résultat, certains navigateurs au collège affichent de la merde parce qu'ils ne sont pas mis à jour

Je ne sais pas pour vous amis codeurs, mais de mon côté, si je n'ai pas un problème concret pour intégrer des nouveautés,impossible de les comprendre vraiment...

Je me note quelques astuces intéressantes. Toutefois, une remarque en passant... ARRÊTEZ DE FAIRE DES VIDÉOS DE PROGRAMMATION... à quoi ça rime ? on ne peut pas faire de copier coller, pas de récup auto de snippets, pas de tests... à part faire grimper votre popularité sur les raizosocio... pfff.

Oui, je sais qu'en description il a mis les snippets : mais il pouvait les inclures dans une page de blog, non ? Ou alors plus personne ne sait lire à part moi et on ne m'a rien dit ?!

un effet glow ou une ombre qui suit le background de la div.

L'astuce consiste à utiliser des pseudo éléments héritant du background de la div et à les blur.

.gradient-shadow {
  background: linear-gradient(
    45deg,
    hsl(var(--clr-orange)),
    hsl(var(--clr-blue))
  );
  position: relative;
  isolation: isolate;
}

.gradient-shadow::before,
.gradient-shadow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  /*   border: 10px dotted white; */
}

.gradient-shadow::before {
  filter: blur(0.75em);
}

.gradient-shadow::after {
  opacity: 0.5;
  filter: blur(2em);
}

Faire en sorte que la répartition du texte sur plusieurs lignes soit meilleure

En gros, le navigateur essaie de couper le texte de façon plus homogène

// pour les titres (peu de lignes) 
h1{ text-wrap: balance;}
// pour les paragraphes etc (beaucoup de lignes): pas d'orphelin sur la dernière ligne
p{text-wrap:pretty;}

Je me note quelques astuces à tester ou retenir :

/* empêcher les navigateurs mobiles d'ajuster la taille du texte */
-webkit-text-size-adjust: none;
text-size-adjust: none;

/* le body prend tout le viewport */
html{ block-size: 100%; }
body{ min-block-size: 100%; }

/* empêcher les medias de déborder */
img,
iframe,
audio,
video,
canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

svg {
    max-inline-size: 100%;
}

/* overflow horizontal */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* rendre le disabled plus visible */
:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

Donc on PEUT styler les boutons radio sans casser l'accessibilité ni recourir à des libs ou frameworks hippopotamesques.

Hop, dans mon snippetvamp.

La lecture de l'article est intéressante.

input[type="radio"] {
  /* Disable the browser's default radio button styles */
  appearance: none;
  margin: 0;
/ Recreate the circle container /
border: 1px solid black;
background: white;
border-radius: 50%;
/ Center our dot in the container /
display: inline-grid;
place-content: center;
/ Use a pseudo-element to display our "dot" /
&::before {
content: "";
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
}
/ And display it when the radio button is checked /
&:checked::before {
background: black;
}
}

via https://www.devenet.eu/links/?_X-l9g

Résume :

Amen.

• On définit le but : est-ce que c'est pour expliquer, guider, ou juste faire plaisir ?
• On pense à la fréquence : plus c'est utilisé, moins ça doit bouger
• On reste rapide, toujours sous les 300 ms
• On donne le contrôle, en respectant toujours les préférences de la personne qui utilise l'interface.

(oui, l'image de titre est bien un troll )

Pour toute personne voulant faire des plugins pour pluXML, j'ai mis à jour mon générateur de plugin: pour rappel, il sert à créer tous les fichiers et sous-dossiers préconfigurés selon vos choix.

• J'ai mis à jour les hooks,
• j'ai ajouté la gestion du scope (admin/site)
• j'ai ajouté la possibilité de traduire les textes du frontend
• j'ai changé un détail assez chiant: il ne plaçait pas les fichiers du zip dans le dossier du plugin...
• J'ai amélioré la lisibilité du code... (un peu)

Je ne m'étends pas plus, vu que je dois être le seul à utiliser ça, mais bon.

Au cas où,

• vous pouvez récupérer le code là : http://outils.warriordudimanche.net/outils/pluxml_plugin_starter.php?download
• et tester ici: http://outils.warriordudimanche.net/outils/pluxml_plugin_starter.php

🥇 Plugin N°1 : uniquePagePreview

Si toi aussi t'en as marre que le bouton Aperçu de la page article t'ouvre à chaque fois un nouvel onglet aboutissant rapidement à une accumulation visuellement insupportable du nombre d'échecs qu'il te faut avant de parvenir à un billet un tant soit peu abouti ? Alors ce ... «plugin» est pour toi: il se contente de changer le «_blank» de l'attribut onclick du bouton en «article_preview»... et ça, tu vois, ça change tout...

Désormais, la visualisation de l'article se fera toujours dans le même onglet (ouvert lors de la première visualisation)

⚡ Téléchargement direct du ZIP: https://repo.warriordudimanche.net/ZIPFILES/uniquePagePreview.zip

🥈 plugin N°2 : resizeArticleTextarea

Un truc qui me chiffonnait dans la rédaction d'articles un peu longs, c'était:

1. de ne jamais voir l'article en entier pendant la rédaction
2. de passer mon temps à défiler DANS le textarea en plus de défiler DANS la page...

Grâce à ce plugin, on ne passe plus son temps à défiler QUE dans la page

En effet, il redimensionne les textareas de la page article en fonction de leur contenu. La zone de texte grandit avec le volume de texte tapé dedans.

⚡ Téléchargement direct du ZIP: https://repo.warriordudimanche.net/ZIPFILES/resizeArticleTextarea.zip

🥉 plugin N°3 : adminPanel

Un plugin dérivé d'un de mes anciens qui s'avérait obsolète avec la nouvelle maquette. Il permet d'afficher un menu visible uniquement quand l'admin est connecté. Ce menu regroupe plusieurs icônes:

• un lien vers l'espace admin
• un lien vers un tag particulier: je m'en sers pour accéder aux articles publiés pour lecture ultérieure sous le tag «riditleteur»
• un lien vers la page commentaires avec un décompte des commentaires non lus
• un bouton de déconnexion

Il affiche de plus un lien sur chaque article pour éditer directement ce dernier (pratique pour corriger ou mettre à jour un article)

Ces deux fonctions sont accessibles via deux hooks, «editArticleIcon» et «adminPanel», dont il faut placer l'appel dans les pages header.php et articles.php du thème

Une page de config permet de redéfinir les icônes et texte des boutons ainsi que le tag du raccourci.

⚡ Téléchargement direct du ZIP: https://repo.warriordudimanche.net/ZIPFILES/AdminPanel.zip

Si ça peut vous servir, c'est cadeau !

Tester des langages de programmation en direct: une alternative. Je mets de côté (wink Erase )

Je viens de procéder à une mise à jour de pluXml plugin starter:

1. ajout des hooks des dernières versions de pluXML
2. ajout d'une fonction permettant de filter les hooks afin de les retrouver plus facilement
3. ajout d'icônes unicode sur les boutons de sélection des hooks (plus faciles à identifier
4. dans l'optique d'en finir avec github, j'ai changé le lien de github en lien de téléchargement direct de la version courante, comme j'avais fait avec googol.

Quand STARTPAGE se met à utiliser un content-encoding en gzip sans prévenir, ça fait cafouiller Googol qui n'y retrouve plus ses petits regexes.

Heureusement, en ajoutant

curl_setopt($ch,CURLOPT_ENCODING , "gzip");

dans la méthode de curl, on répare tout...

ouf.

Styler les inputs radio/checkboxes de façon sémantique, accessible, moderne, customisable et vanilla, c'est possible !

Avec un mélange de variables css et appearance.

Superbe travail en effet: concevoir un shader pour compenser les irrégularités de luminosité d'une télé vieillissante. Je suis fan du principe et pour une fois que le fait que les télés soient devenus des ordinateurs peut-être utile au lieu d'emmerdant...

Trop beau ! Je vais m'en faire un ! [EDIT]

les voilà en SVG, un en noir et blanc et un en couleurs, pour pouvoir les éditer facilement.

(...)

Tiens, pas con: une regex qui sélectionne tous les caractères imprimables de la table ascii [ -~] (de 32-125)

Très intéressant ça ! Riditléteur... Merci Seb ! (et bonne année ! )