gcch
d30b83d093
- étoffe le fichier `JOURNAL` avec les nouveaux changements majeurs. - propose une tâche _Justfile_ pour un rechargement à chaud primitif lors de changements CSS. - ne précompresse pas et ne propose plus de versions « legacy » des scripts JS en methodes développement. - appose correctement `aria-current` sur le lien de la page courante dans les deux menus de navigation. - remplace une image statique « Scroll down » avec une animation SVG reposant sur du texte et des chemins. - renomme moultes choses.
36 lines
2.8 KiB
Markdown
36 lines
2.8 KiB
Markdown
# 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.
|