gcch/haiku-atelier-2024
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
haiku-atelier-2024/docs/JOURNAL.md
gcch d30b83d093 2025-07-03 
- é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.
2025-07-03 20:28:03 +02:00

2.8 KiB
Raw Blame History

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.