haiku-atelier-2024/docs/JOURNAL.md

Journal de développement

2025-06-13

Informations produit sous forme de grille

• L'idée est de réimplémenter les informations essentiels du produit (nom, prix), le sélecteur de variation, les textes de détail, de conditions et d'entretien, et le bouton d'ajout au Panier.
• Plutôt qu'un encart flottant, contenant tout, il n'y aurait qu'une barre pleine longueur comprenant nom, prix et sélecteur de variation (.essentiel-produit).
• Il flotterait en bas de l'écran jusqu'à ce se poser à la fin des photos.
• Une nouvelle section, statique elle et faisant suite à la fois aux photos et à la barre, s'afficherait en pleine longueur sous forme d'accordéon, avec les anciens onglets comme sections.
• Par défaut, la section « Détails » serait développée.
• <details> et <summary> sont aujourd'hui pris en charge par les navigateurs (niveau Baseline), mais l'attribut name permettant l'ouverture exclusive d'une section par accordéon (p. ex. le développement d'une ferme toutes les autres) n'a que récemment été implémentée (2024 pour Firefox).
• Une implémentation en JavaScript est donc pour l'instant nécessaire.

Remaniement du défilement des photos de la page Produit

• Les flèches de défilement sont supprimées.
• À la place, les photos ne s'affichent plus en pleine longueur.
• Elles le sont à ~93%, pour que l'on perçoive sur les bords la photo précédente/suivante et signale à l'Utilisateur qu'il est possible de défiler.

2025-06-30

• Test de LogTape comme librairie de journalisation.

2025-07-03

• Création d'une animation SVG avec des <text> défilants sur un <path>.
  • Le redimensionnement dynamique du conteneur de l'animation se fait via JavaScript.
    • Le script récupère la longueur d'une image au redimensionnement de la vue.
    • Il injecte un attribut CSS inline-size dans le HTML de la page correspondant à cette nouvelle longueur.
  • Il n'est pas encore possible de mettre en pause l'animation au survol de la souris, qui est une bonne pratique pour ce style d'éléments visuels.
  • Le <svg> doit être d'une longueur supérieure au conteneur (ici 120%) pour que le texte disparaisse de façon progressive, qu'il ne soit pas « coupé » brutalement aux extrémités.
• Début de l'implémentation d'une classe no-js pour un affichage adapté en cas d'absence de JavaScript.
• Développement d'un script fish qui lance un onglet Cromite en mode sans-tête avec profile Invité sur le site Haiku Atelier.
  • Il est possible, en utilisant le débogueur à distance Chromium, de rafraîchir un onglet via le terminal en passant par fx et websocat pour l'interface WebSocket.
  • Cela offre une forme primitive de « hot reload » (rechargement à chaud) pour éviter d'avoir manuellement taper F5 à chaque changement.

2025-07-04

• Problème de l'animation SVG s'affichant mal sur iOS.
  • Ce serait du à un bogue de rendu du moteur WebKit.
  • Pour le contourner, appliquer un transform: translate3d ou transform: matrix sur les éléments SVG.
  • Installation d'un débogueur distant pour iOS.
    • Compilation de ios-webkit-debug-proxy.
    • Ensuite, avec un câble reliant l'iPhone à l'ordinateur :
      • S'assurer que le démon usbmuxd tourne ;
      • Ouvrir un onglet sur Safari et activer le Web Inspector dans les préférences avancées ;
      • Lancer ios_webkit_debug_proxy dans le terminal ;
      • Compiler ios-safari-remote-debug (./ios-safari-remote-debug build -t releases/Apple/Safari-17.5-macOS-14.5) ;
      • Lancer le serveur ios-safari-remote-debug (./ios-safari-remote-debug serve) ;
      • Naviguer à son adresse, ouvrir les outils de développements normalement proposés.
    • Cela devrait pouvoir faciliter la résolution du soucis de l'animation sur l'accueil pour Safari iOS.
    • Le fin de mot de l'histoire ?
      • Pour iOS, on ne peut pas (encore) spécifier de valeurs relatives en pourcentages pour les dimensions des SVG. Il faut utiliser des vw/vi.
      • Pour les <text> au sein de SVG, le rendu de font-size peut différer de celui de Chromium/FF. Question de PPI ?
      • IntersectionObserver émettait un événement où intersectionRatio n'était pas 1, mais ~0.99874784. Vu que le script utilisait une valeur de 1 pour décider qu'un élément soit caché ou non, l'animation était cachée au chargement de la page.
      • Utiliser un ratio supérieur à 0.9 corrige le soucisS.
• Journalisation avec LogTape.
  • Différenciation primaire du niveau minimum de journal en utilisant la variable d'environnement VITE_ENV.