News _~ Historique du siteSite history

Le pipeline Github Actions continue d'évoluer suite à 2 incidents détectés récemment The GitHub Actions pipeline continues to evolve following 2 incidents detected recently

RUN FAILED 1 - Installation impossible via l'Action Cannot be installed via the Action

La résolution à été de remplacer l'action par l'installation manuelle de Trivy, sur tous les environements. The solution was to replace the action with a manual installation of Trivy across all environments.

RUN FAILED 2 - Vulnérabilitée détectée dans l'image Docker distroless (production) Vulnerability detected in the distroless Docker image (production)

• La création d'un script bash qui vérifie si un nouveau digest est disponible The creation of a bash script that checks whether a new digest is available
• L'ajout d'un Workflow "PR Watch", avec cron pour se lancer tous les jours. Si un nouveau digest est trouvé, il envoye une PR The addition of a "PR Watch" workflow, with a cron job to run daily. If a new digest is found, it sends a PR
• La mise en place d'une gestion contrôlée des vulnérabilités The implementation of controlled vulnerability management
• L'adaptation des workflows CI/CD (staging/prod) The adaptation of CI/CD workflows (staging/prod)

En plus de mon retour d'expérience concernant le projet CI/CD "Github Actions" et l'application Flashcards, j'ai crée cette page pour me donner une ligne directrice sur les améliorations futures (CI/CD, application) et la suite logique: déploiement, projet sur d'autre plate-forme CI/CD etc In addition to my feedback on the "GitHub Actions" CI/CD project and the Flashcards app, I have created this page to give myself a roadmap for future improvements (CI/CD, application) and the next logical steps: deployment, projects on other CI/CD platforms, etc.

Voici les principaux tableaux pour ce projet Here are the main monitoring tables for this project

Cette page constitue donc, un suivi de projet visant à garder une trace des mises à jour et évolution de l'application "Flashcards" et de la série This page is therefore primarily a project log designed to keep track of updates and developments of the "Flashcards" application and the "Github Actions" series

Projet Flashcards - CI/CD sur 3 branches

Java Spring-boot Git Gitlab Flow Github Actions Postman Grafana (K6) Actuator

Dans le cadre du développement de l'application Flashcards, j'ai rédigé une série d'articles afin de documenter les différentes étapes du projet : conception, qualité du code, stratégie de tests et mise en place d'une chaîne CI/CD complète. As part of the development of the Flashcards app, I have written a series of articles to document the various stages of the project: design, code quality, testing strategy and the implementation of a complete CI/CD pipeline.

Ci-dessous l'ensemble des articles publiés: Below is a list of all published articles:

L'ordre de publication est volontairement pédagogique. The order of publication is deliberately designed to be educational. Certaines étapes techniques ont été réalisées plus tôt ou en parallèles dans le projet. Some technical steps were carried out earlier or in parallel during the project.
      Elles sont présentées ici dans un ordre facilitant la compréhension et la reproductibilité They are presented here in an order that facilitates understanding and reproducibility

Amélioration et mises à jour du site Website improvements and updates

Cette mise à jour introduit plusieurs améliorations fonctionnelles et visuelles, ainsi que de nouvelles fonctionnalités visant à améliorer l'expérience utilisateur et la cohérence globale du site. This update introduces several functional and visual improvements, as well as new features designed to enhance the user experience and the overall consistency of the website.

Nouvelles fonctionnalitésNew features

Remplacements et refontes Replacements and overhauls

DevOps Short-Lines (Snippets)

Catégories disponibles: Available categories:

• Ansible
• Cloud (AWS, Azure, GCP)
• CI/CD
• Docker
• Git
• Helm
• Kubernetes
• Terraform
• Monitoring (ELK / PromQL)
• Linux
• Vagrant

Chaque catégorie dispose de sous-thèmes pour faciliter la recherche Each category has sub-themes to make searching easier

Le format s'inspire d'un système de flashcards interactives:
Chaque commande peut être affichée/masquée via un "toggle".
Chaque commande peut être copiée.
Des commentaires sont ajoutés en complément d'information.

The format is based on an interactive flashcard system:
each command can be shown or hidden using a toggle to make reading easier.
Each command can be copied using the relevant button. Comments are included for information

Mise à jour des dépendances front-end

Mise à niveau des principales librairies front-end afin d'améliorer la sécurité, les performances et la maintenabilité du projet. Front-end dependencies upgraded to improve security, performance and maintainability.

Détails

Les mises à jour ont été réalisées en tenant compte des contraintes de compatibilité existantes. Updates performed with backward compatibility constraints.

Voici le récapitulatif :

TinyMCE toolbar admin:  

Attirée par les nouvelles technologies et animée par une réelle envie de progresser, j'ai entamé une formation de DevOps Engineer (4mois intensifs) afin de renforcer mes compétences. Résultat : j'adore ! Drawn to new technologies and driven by a desire to develop, I started a DevOps Engineer training course to build on my skills. The result: I love it!

Le DevOps est souvent représenté par le symbole de l'infini; une image qui illustre parfaitement son principe fondamental; une activité continue DevOps is often represented by the infinity symbol: an image that perfectly illustrates its fundamental principle: a continuous process

Dans son cycle de vie, on passe de la phase de développement à celle de surveillance, et dès qu'un cycle se termine, un nouveau commence. In its life cycle, we move from the development phase to the monitoring phase, and as soon as one cycle ends, a new one begins.

Mais, le DevOps ne se résume pas à une simple collection d'outils.
C'est avant tout un état d'esprit : une manière de repenser la collaboration entre les équipes de développement et d'exploitation. Casser les silos et livrer des applications plus rapidement, de manière continue et fiable. But, DevOps is not just a collection of tools.
Above all, it is a mindset: a way of rethinking collaboration between development and operations teams. Breaking down silos and delivering applications faster, continuously and reliably.

Le cycle DevOpsThe DevOps cycle:
Développement → Test → Intégration → Déploiement → Surveillance → Nouveau cycle Development → Testing → Integration → Deployment → Monitoring → New cycle

un Jeu de mots pour des figures de styles A word-game for figures of speech

Jeu complet: un mélange est appliqué au chargement Full game: a shuffle is applied upon loading

Message en Litote: exemple de catégorie sélectionnée Message using litotes: example of selected category

Activités loisirs — Expérience interactive

Toutes les activités

Click sur le titre pour ouvrir l'article

Tarot des citations

Flashcards — Apprentissage de l'anglais Flashcards — Learning English

Find the word(s) (EN/FR)

avec indice et carte retournée (réponse): with clues and the solution (answer):

Find an expression : As .. as ..(EN)

Find the oposites (EN)

Irregulars verbs (EN/FR)

Comportement normal: Normal behaviour:

En cliquant sur le bouton "Translate" et avec la carte retournée (réponse) : By clicking the "Translate" button and with the card turned over (answer):

Flashcards — Gestion de base

/* formules fraction */
.eq-c{
  display: block; margin: 0;
  font-family: -apple-system, 'Segoe UI', 
    'Open Sans', 'Helvetica Neue', sans-serif;
  font-size-adjust: 0.85em; 
  padding: 10px;
	}

.fraction {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.2em 0.4ex;
    text-align: center;
    clear: both;
}
.fraction > span {
    display: block;
    padding-top: 0.15em;
}
.fraction span.fdn {border-top: thin solid #555;}
.fraction span.bar {display: none;}

<div class="eq-c">
  <div class="fraction">
    <span class="fup">Bénéfice</span>
    <span class="bar">/</span>
    <span class="fdn">Prix d'achat</span>
  </div>
  X 100 = %
</div>

Les cartes "Pensées-Messages"

Click sur la carte pour la retourner

Lire son message

Demo Store - Fonctionnalités de baseBasic features

Fonctionnalités Features

• Gestion panier via session Shopping basket management via session
• Affichage dynamique des produits Dynamical products display
• Gestion de lots et d'options sur produits Batch and product option management
• Modal produit détaillé detail product on modal
• Gestion des quantités Quantities management
• Panier standard avec libellé produit, modifier quantité/prix et suppression de l'article Standard shopping basket with product descriptions, option to change quantity/price and remove items

Allez dans l'e-shop Go to the Demo-Store

article ajoutés visible dans le menu articles added, visible in the menu

Cliquer sur une catégorie ouvrira la catégorie Clicking on a category will open it

Produit avec options Product with options

Les prix, les quantités (lots), le choix de la couleur, sont variables pour créer une différence Prices, quantities (batches) and colour choices vary to create a distinctive look

Le caddy The shopping cart

Modification de la quantité Change in quantity

Comportement normal -après login Normal behaviour - after logging in

* n'est plus accessible * is no longer available

Fondation du projet — Architecture dynamique PHP

Première structuration du site basée sur une architecture dynamique en PHP, marquant la transition du procédural vers une approche orientée objet avec PDO. Initial project foundation based on a dynamic PHP architecture, marking the transition from procedural code to object-oriented programming with PDO.

Contexte

Suite à une montée de version de PHP (5 → 7) et à une phase de veille technologique (Symfony 3/4, tendances web), ce projet a été initié avec une approche dynamique inspirée des architectures SPA. Following a PHP upgrade (5 → 7) and a technology watch phase (Symfony 3/4, web trends), this project was initiated with a dynamic architecture inspired by SPA concepts.

L'objectif était d'améliorer la fluidité de navigation en limitant les rechargements complets de page, en s'appuyant sur AJAX, JSON et jQuery. The goal was to improve navigation fluidity by reducing full page reloads, using AJAX, JSON and jQuery.

Retour d'expérience

Cette approche dynamique a permis d'améliorer l'expérience utilisateur, mais a introduit une complexité supplémentaire côté développement, notamment avec la gestion des appels AJAX et du rendu côté client. This dynamic approach improved user experience, but introduced additional complexity on the development side, especially with AJAX handling and client-side rendering.

Par ailleurs, ce type d'architecture nécessite une attention particulière pour le référencement (SEO), ce qui a motivé des évolutions ultérieures vers des approches hybrides. Additionally, this type of architecture requires special attention for SEO, which motivated later evolution toward hybrid approaches.