# 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](https://git.gay/besties/ios-safari-remote-debug).
    - Compilation de [ios-webkit-debug-proxy](https://github.com/google/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`.