cClaude.rocks ☕ Le blog

[Nouvelles technologies, sciences et coups de gueule…]

Menu

Attention le flux RSS a changĂ© d’URL !

Cela fait un bon moment que je veux faire un billet sur les flux RSS, mais ce ne sera pas pour cette fois.

L’adresse du flux RSS est maintenant : https://blog.cclaude.rocks/feed.atom

Le format est maintenant conforme Ă  la norme ATOM dĂ©crite dans la RFC 4287. De mĂȘme, le content-type est bien celui attendu : application/atom+xml, en prime l’auto-dĂ©couverte de flux RSS est maintenant fonctionnelle.

La solution qui Ă©tait alors en place, provenait du modĂšle Groovy de jbake et n’est pas compatible avec les normes ; c’est un mĂ©lange entre la norme RSS 2.0 et Atom.

Je vous donne un lien en français vers une documentation pour s’abonner à des flux RSS dans Thunderbird.

Mais il est par exemple possible d’utiliser cela avec des outils comme Nextcloud si le lecteur de nouvelle est installĂ©. Pour ceux qui ont un compte, vous devez savoir que c’est le cas sur l’instance du domaine.

኿


sed est un Ă©diteur similaire Ă  vi mais permettant l’édition de fichier automatisĂ©e.

Comment ajouter un saut de ligne aprÚs un motif donné avec sed

Un cas d’usage typique pour cette astuce est lorsqu’on souhaite lire le contenu d’un fichier minimiser dont tout le contenu se trouve sur une seule ligne.

Si cela permet de limiter l’usage de la base passante, ce n’est pas trĂšs lisible. Si vous utiliser un Ă©diteur prenant en charge la coloration syntaxique et l’analyse du code, cela peut mĂȘme ĂȘtre un cauchemar suivant la taille du fichier, en effet certains Ă©diteurs vont utiliser beaucoup de ressources pour ce type de fichier.

Par exemple, dans le cas d’un fichier CSS on sait que chaque instruction doit se terminer par un point virgule. Il suffit dont d’ajouter un saut de ligne aprùs le caractùre ; (point virgule).

On peut rendre aisĂ©ment le fichier lisible Ă  l’aide de la commande :

sed 's/;/&\n/g' fichier.min.css >fichier.css

Cela ne donnera pas une belle indentation, comme certain IDE savent le faire, mais c’est comprĂ©hensible et vous trouverez certainement d’autre cas d’usage.

  • sed : Éditeur en ligne
  • 's/;/&\n/g' : Commande de remplacement [dĂ©tail ci-dessous]
    • s : Indique une action de recherche (search)
    • / : sĂ©parateur
    • ; : Le motif Ă  rechercher, ici c’est juste le caractĂšre ';'
    • / : sĂ©parateur
    • &\n : Par quoi sera remplacĂ© le motif [dĂ©tail ci-dessous]
      • & : Indique que le motif trouvĂ© doit ĂȘtre gardĂ© dans le rĂ©sultat Ă  cette position
      • \n : AprĂšs le motif, ici on veut un saut de ligne
  • / : sĂ©parateur
  • g : Indique une action de remplacement global
  • fichier.min.css : Le fichier initial
  • > : redirige le rĂ©sultat vers un fichier
  • fichier.css : Le nouveau fichier

Pour vous aider à comprendre voici un second exemple, ici on insÚre un saut de ligne avant le motif :

cat <<EOF | sed 's,ligne2,\n&,g'
ligne1
ligne2
ligne3
EOF

Explication en trois parties :

Partie 1 :

D’abord ce qui concerne le remplacement, puisque c’est le sujet de ce billet.

  • sed : Éditeur en ligne
  • 's,ligne2,\n&,g' : Commande de remplacement [dĂ©tail ci-dessous]
    • s : Indique une action de recherche (search)
    • , : sĂ©parateur
    • ligne2 : Le motif Ă  rechercher
    • , : sĂ©parateur
    • \n& : Par quoi sera remplacĂ© le motif [dĂ©tail ci-dessous]
      • \n : Saut de ligne
      • & : RĂ©insĂšre le motif dans le rĂ©sultat Ă  cette position
  • , : sĂ©parateur
  • g : Indique une action de remplacement global

Partie 2 :

La syntaxe de cat:

En gĂ©nĂ©ral, on utilise cat suivit d’un nom de fichier pour afficher son contenu

Mais de base la commande cat ne fait pas grand-chose, elle prend une entrĂ©e et la rĂ©Ă©crit Ă  l’identique, par exemple, les instructions :

ls -l --color=never | cat

Est identique à :

ls -l --color=never

On peut Ă  l’aide de l’opĂ©rateur << changĂ© l’entrĂ©e de la commande. Pour cela il faut faire suivre l’opĂ©rateur d’un motif qui devra ĂȘtre rĂ©pĂ©tĂ© sur la derniĂšre ligne.

cat <<MON_MOTIF
Trop cool
Je peux mĂȘme avoir une ligne avec juste EOF:
EOF
et lĂ  on est Ă  la fin
MON_MOTIF

ce qui affichera :

Trop cool
Je peux mĂȘme avoir une ligne avec juste EOF:
EOF
et lĂ  on est Ă  la fin

Partie 3 :

La redirection de cat vers une autre commande, ici sed:

La syntaxe suivante permet d’afficher le fichier et passe le rĂ©sultat Ă  la commande less qui affichera le fichier page par page :

cat fichier | less

Et dans notre cas, c’est en fait la mĂȘme chose :

cat EOF | N-IMPORTE-QUELLE-COMMANDE-QUI-TRAITE-LE-RÉSULTAT-DE-CAT | ÉVENTUELLEMENT-UNE-AUTRE-COMMANDE
ligne1
ligne2
ligne3
EOF

኿


Je fais actuellement des recherches pour mettre en place un atelier d'initiation au CSS pour les enfants. J’explore ce qu’il est possible de faire dans un temps raisonnable et en essayant d’avoir un cĂŽtĂ© ludique marquĂ©.

Je suis arrivĂ© Ă  la conviction que cela Ă©tait possible Ă  condition de prĂ©voir quelques outils, pour les tĂąches rĂ©pĂ©titives. Dans ce cadre, je viens de publier un premier jet d’une application web: un gĂ©nĂ©rateur de fond d’étoiles.

J’ai prĂ©vu quelques amĂ©liorations en particulier sur la configuration de la gĂ©nĂ©ration des couleurs, la solution actuelle est un peu trop simpliste.

Le principe de fond d'Ă©cran s’appuie sur la propriĂ©tĂ© box-shadow de CSS. Il s’agit de faire une ombre Ă  une boite.

Si on met sur une balise div le style box-shadow: 5px 10px #888888 on obtient une ombre de la mĂȘme taille que cette balise div mais dĂ©calĂ© de 5 pixels Ă  droite et 10 pixels vers le bas de couleur grise.

Essayer l’exemple de w3schools pour comprendre.

L’idĂ©e ici est de dĂ©tourner cette ombre pour faire plein d’étoiles.

Le truc à savoir c’est qu’il est possible de faire autant de boites que l’on souhaite.

Essayer de modifier la page de l’exemple avec le code suivant :

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px #000, 5px 10px #888888, 12px 15px #555, 25px 20px red ;
}
</style>
</head>
<body>

<div id="example1">
  <p>A div element with a lot of shadows.</p>
</div>

</body>
</html>

On a 3 ombres successives avec des couleurs diffĂ©rentes – et oui l’exemple est super moche !

On va donc fabriquer des boites de 1 Ă  5 pixels et on a presque l’effet souhaitĂ© – il reste juste Ă  faire plein d’ombre dĂ©calĂ©es dans tous les sens, mais il faut vraiment faire plein d’ombres (genre 2000).

Voila tout le secret de ce générateur.

Si on se rĂ©fĂšre Ă  la documentation de Mozilla sur box-shadow on peut voir qu’il est Ă©galement possible de configurer d’autres champs: offset-x | offset-y | blur-radius | spread-radius | color.

Il me semble qu'en ajoutant (dans certain cas) un blur-radius et/ou un spread-radius on devrait arriver Ă  faire des choses sympas.

Concernant le générateur :

  • Comme dis plus haut, il faudrait prĂ©voir plusieurs algorithmes de gĂ©nĂ©ration de couleurs, j’ai quelques idĂ©es pour obtenir quelques choses soit de rĂ©aliste, soit de plus fantaisiste.
  • Il y a une option pour gĂ©nĂ©rer le code pour animer tout cela, mais l’animation aussi demande Ă  ĂȘtre configurable. Actuellement, plus les Ă©toiles sont petites, moins elle vont vite – la fonction est linĂ©aire.

኿


1 ⋘ 99 / Navigation / 101 ⋙ 115

Les anciens billets sont Ă©galement disponibles dans les archives.

â„č 2006 - 2022 | 🏠 Accueil du domaine | 🏡 Accueil du blog