cClaude.rocks ☕ Le blog

[Nouvelles technologies, sciences et coups de gueule…]

Menu

Reprise du design du blog afin de l'adapter Ă  Foundation 6.

JBake avec la couche Groovy fait assez bien le travail donc j’ai poussĂ© un peu plus loin mes investigations, et il s’avĂšre que Foundation 5 n’est plus supportĂ©. Il fallait donc migrĂ©.

Logo Linux Mint

Un gros travail est la migration de Foundation 5 Ă  Foundation 6, d’ailleurs nombre de dĂ©veloppeurs web se plainent dans les forums du fait que la compatibilitĂ© entre les versions n’est pas Ă©tĂ© maintenue. Suite Ă  cette migration, je ne suis pas complĂštement convaincu par ce framework, sans doute Ă  cause de la documentation qui est essentiellement basĂ©e sur des vidĂ©os et donc extrĂȘmement ⏳chronophage ⌛ mais aussi Ă  cause du kit de dĂ©veloppement dont le packaging n’est pas trĂšs prĂ©dictif.

Au passage, j’ai :

  • fait une revue du design ⏿ (qui reste Ă  complĂ©ter),
  • corrigĂ© l’affichage pour les codes sources larges,
  • corrigĂ© des problĂšmes de saut de lignes inattendu,
  • fait grosse rĂ©Ă©criture des « templates » groovy,
  • amĂ©liorĂ© le support flex,
  • amĂ©liorĂ© le support des l’affichage sur mobile (avec quelques rĂ©gressions cependant).

Il reste pas mal de chose à faire :

  • extraire un « template » rĂ©utilisable pour d’autre blogs avec une documentation,

  • mettre en place des proxies Groovy pour amĂ©liorer le rendu depuis du markdown pur (afin de permettre de limiter le code HTML dans les fichiers sources / le palliatif actuel Ă©tant une rĂ©Ă©criture Ă  la volĂ©e en JavaScript),

  • quelques petits problĂšmes au niveau du support mobile sont Ă  traiter,

  • amĂ©liorer le support de JBake (il s’agit en fait d’un problĂšme du modĂšle Groovy d’origine qui ne supporte pas complĂštement les fonctionnalitĂ©s de JBake)

኿


Ce billet a été édité le : 2019-07-17

Un attribut CSS rigolo : clip-path

L’attribut clip-path permet d’appliquer un dĂ©tourage Ă  un Ă©lĂ©ment.

Typiquement cela permet d’avoir un masque sur une image et donc de lui appliquer un contour irrĂ©gulier.

Cependant la syntaxe de cet attribut CSS clip-path utilise une description de chemin similaire au chemin du format SVG et donc pas nĂ©cessairement simple Ă  apprĂ©hender lorsque l’on est pas un champion du dessin vectoriel.

Voici un éditeur de clip-path en ligne qui peut vous rendre service lors de la création de vos CSS.

Exemple

On part d’une image avec le code simpliste suivant.

<img src="image.png" />
Exemple clip-path attribute

Code enligne dans le HTML

<img src="image.png" alt="Exemple clip-path attribute" style="
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 75%, 53% 76%, 59% 100%, 26% 75%, 0% 75%);
clip-path: polygon(0 10%, 100% 10%, 100% 75%, 53% 76%, 59% 100%, 26% 75%, 0% 75%);
width: 300px;
height: 200px;"/>

Code dans le CSS

img {
  -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 75%, 53% 76%, 59% 100%, 26% 75%, 0% 75%);
  clip-path: polygon(0 10%, 100% 10%, 100% 75%, 53% 76%, 59% 100%, 26% 75%, 0% 75%);
}

La propriété clip-path vous permet de créer des formes complexes en CSS en découpant un élément en une forme de base (cercle, ellipse, polygone ou encadré) ou en une source SVG.

Les animations et transitions CSS sont possibles entre deux formes ou plus. Cependant ces formes doivent avoir des chemins avec le mĂȘme nombre de sommets.

Documentation

኿



par exemple un smartphone.

Ce billet a été édité le : 2021-05-18

Les périphériques modernes contenant des médias utilisent les protocoles MTP (Media Transfer Protocol) pour échanger les fichiers en USB. Ces périphériques tournent sous Android (téléphones, tablette, lecteur audio
) ou Linux (Drones, Appareils photos
) principalement.

En gĂ©nĂ©ral lors de l’établissement de la connexion USB, une nouvelle entrĂ©e apparaĂźt dans l’interface graphique avec un chemin du type mtp://%5Busb%3A003,003%5D/.

Cependant ce type de chemin n’est pas exploitable depuis un terminal, ni mĂȘme depuis la plupart des logiciels, alors comment trouver le chemin rĂ©el ?

Pour accĂ©der aux fichiers, Linux utilise GVfs «GNOME Virtual file system», comme son nom l’indique il s’agit d’un systĂšme de fichier virtuel.

Pour accĂ©der aux fichiers MTP en dehors de l’interface graphique, il faut trouver le point de montage derriĂšre cette URL. La solution est simple depuis un terminal surtout si, vous n’avez qu’un seul pĂ©riphĂ©rique de connectĂ© et utilisant le protocole MTP.

ls /run/user/$UID/gvfs/mtp*

Si la commande Ă©choue c’est qu’aucun pĂ©riphĂ©rique USB utilisant le protocole MTP n’est connectĂ©. Pensez Ă  vĂ©rifier que vous avez autorisĂ© votre tĂ©lĂ©phone Ă  Ă©changer des fichiers.


Mais vous pouvez utiliser directement le répertoire en question, par exemple :

cd /run/user/$UID/gvfs/mtp*


Si vous avez plusieurs pĂ©riphĂ©riques utilisant MTP en mĂȘme temps, la commande ls /run/user/$UID/gvfs/mtp* vous donnera la liste des dossiers possibles. Il vous restera regarder le contenu de ces dossiers pour identifier celui qui vous intĂ©resse.

Le tableau ci-dessus montre que le nom du périphérique est au final assez prédictible.

URL encodée URL décodée Nom du dossier encodé Nom du dossier décodé
mtp://%5Busb%3A003,003%5D/ mtp://[usb:003,003]/ mtp:host=%5Busb%3A003%2C003%5D mtp:host=[usb:003,003]
mtp://%5Busb%3A003,006%5D/ mtp://[usb:003,006]/ mtp:host=%5Busb%3A003%2C006%5D mtp:host=[usb:003,006]
  • URL encodĂ©e – URL sans caractĂšre spĂ©cial, tel qu’elle apparaĂźt dans l’interface graphique.
  • URL encodĂ©e – URL dĂ©codĂ©e en utilisant l’algorithme pour les URLs: URLDecode
  • Nom du dossier encodĂ© – Nom du dossier sans caractĂšre spĂ©cial, tel qu’il apparaĂźt dans le terminal.
  • URL du dossier dĂ©codĂ© – Nom du dossier dĂ©codĂ© en utilisant l’algorithme pour les URLs : URLDecode

Aide Ă  l’encodage et au dĂ©codage

Ce formulaire est traitĂ© sur votre machine. Aucune information n’est stockĂ©e en locale ni mĂȘme envoyĂ©e sur le serveur.

Attention aux espaces qui ne sont généralement pas souhaités


đŸ–©

኿


1 ⋘ 100 / Navigation / 102 ⋙ 108

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

â„č 2006 - 2021 | 🏠 Retour Ă  l'accueil du domaine | 🏡 Retour Ă  l'accueil du blog