News ~ Historique du siteSite history
Page d'actualité et historique des moments clés, des nouvelles fonctionnalités, des modifications apportées au site News page and history of key milestones, new features and changes to the site
Cliquez sur les titres pour voir leur contenu. Click on the titles to view their content.
Le projet Flashcards et sa CI/CD GitLab sur 3 branches The Flashcards project and its GitLab CI/CD across three branches
Dans le cadre du développement de l'application Flashcards, j'ai rédigé une série complète d'articles afin de documenter pas à pas les différentes étapes du projet. De la conception initiale du projet Java, à la mise en place d'une chaîne CI/CD robuste avec cette fois Gitlab CI. As part of the development of the Flashcards application, I have written a comprehensive series of articles to document the various stages of the project step by step. From the initial design of the Java project to the implementation of a robust CI/CD pipeline, this time using GitLab CI.Liens externesExternal Links
- Structurer un projet Spring Boot moderne prêt pour l'écosystème GitLab.Structure a modern Spring Boot project ready for the GitLab ecosystem.
- Mettre en place une chaîne complète et progressive en exploitant la puissance de GitLab CI.Set up a comprehensive, end-to-end pipeline by harnessing the power of GitLab CI.
- Garantir un niveau de qualité de code grâce à l'intégration d'outils de sécurité et de qualité.Ensure a high standard of code quality through the integration of security and quality tools.
- Implémenter des tests robustes (unitaires, intégration, charge) exécutés automatiquement.Implement robust tests (unit, integration and load) that run automatically.
- Préparer une architecture évolutive facilitant une transition future vers des orchestrateurs de production.Prepare a scalable architecture that facilitates a future transition to production orchestrators.
Mapping des séries Mapping of the series
Volet Applicatif & Stratégie de testsApplication Development & Test Strategy
01-10-2025: Stratégie de tests unitaires
04-10-2025: Sécuriser la qualité du code (Checkstyle, SpotBugs)
10-10-2025: La couverture de code avec JaCoCo
18-10-2025: Les profils Spring: Préparation au multi-branches
02-11-2025: Les tests d'intégration
12-11-2025: Scénarios de tests (Postman local)
20-11-2025: Mise en place du test de charge (Grafana K6)
08-12-2025: Ajout d'Actuator en 3 étapes
02-06-2026: Installer et configurer un GitLab Runner local avec Docker
08-06-2026: Intégration continue: focus sur la branche develop
16-06-2026: Intégration continue: focus sur la branche staging
01-07-2026: Intégration continue: focus sur la branche Main
04-07-2026: Gouvernance GitLab : Maîtriser les labels et les Issue Templates
08-07-2026: Création automatique de Merge Requests et pipeline de promotion
25-07-2026: Refactoring CI/CD: Optimisation des pipelines avec les variables de template
02-08-2026: Sécuriser les images et automatiser leurs mises à jour avec Renovate
07-08-2026: Refactoring: Mutualiser les scripts entre GitHub Actions et GitLab CI
04-09-2026: GitHub Actions vs GitLab CI: Le comparatif pratique
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.
Résolution de l'installation et du Scan de vulnérabilité Resolution of the installation and vulnerability scan
Trivy Github Actions FIX Automate
RUN FAILED 1 - Installation impossible via l'Action Cannot be installed via the Action
Suite à une mise à jour de Dependabot sur le SHA de l'action trivy, le pipeline ne parvenait plus à faire l'installation. Following a Dependabot update to the SHA of the trivy action, the pipeline was no longer able to complete the installation.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)
Cette situation a nécessité plusieurs ajustements et à donné lieu à développer un système automatisé de vérification de l'image Docker This situation required several adjustments and led to the development of an automated system for verifying the Docker image- 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)
Le repository reste la source de vérité en cas de divergence liée aux mises à jour CI/CD.
Bien que je vais essayer de mettre à jour la doc, le code peut évoluer indépendamment du contenu publié. The repository remains the source of truth in the event of discrepancies related to CI/CD updates.
This event is now integrated into the project tracking board, which centralises issues and fixes related to CI/CD (GitHub Actions)
Cet événement est désormais intégré au This event is now included in tableau de suivi du projetproject tracking board, qui centralise les issues & fix liées au CI/CD (Github Actions) which centralises issues & fixes related to CI/CD (GitHub Actions)
Cela permet d'avoir une vue globale sur les mises à jour, résolutions et améliorations de l'application ou de ses CI. In this news item, I have compiled a list of tracking tables for the Flashcards app.
This provides an overview of the updates, fixes and improvements to the application or its CI.
Les principaux tableaux de suivi pour le projet "Flashcards app" The main tracking tables for the “Flashcards app” project
Tableau de mises à jour CI/CD - de surveillances - Liste des articles Github Update/Resolution CI/CD Table - Monitoring - List of articles and features
Tableau des mises à jour - Architecture - Liste des articles de l'application Application Updates Table - Architecture - List of app's articles
Tableau de mises à jour CI/CD - surveillances - Liste des articles GitLab Update/Resolution CI/CD Table - Monitoring - List of CI/CD articles
Liste des tableaux de suivis - ressources communes entre plateformes CI/CD List of monitoring dashboards - shared resources across CI/CD platforms
Les référentiels constituent dès lors, leur propre source de vérité. The repository the repositories therefore serve as their own source of truth. - Github - GitLab
Le projet Flashcards et sa CI/CD "Github Actions" sur 3 branches The Flashcards Project and Its CI/CD Across 3 Branches
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.Liens externesExternal Links
- Structurer un projet Spring Boot moderneStructure a modern Spring Boot project
- Mettre en place une chaîne CI/CD complète et progressiveSet up a comprehensive and progressive CI/CD pipeline
- Garantir un haut niveau de qualité de codeEnsure a high standard of code quality
- Implémenter des tests robustes (unitaires, intégration, charge)Implement robust testing (unit, integration, load)
- Préparer une architecture évolutive vers des environnements plus complexes (Kubernetes,..)Preparing an architecture that can scale to more complex environments (Kubernetes, etc.)
Mapping de la sérieMapping of the series
Les traductions sont en cours Translation in progress...
04-10-25 - Sécuriser la qualité du code (Spotless,Checkstyle & SpotBugs)
10-10-25 - La couverture de code avec JaCoCo
04-01-26 - Automatisation des PR
11-01-26 - Optimisation du Dockerfile et Dockerfile.debug
12-11-25 - Scénarios de tests (Postman local)
20-11-25 - Mise en place du test de charge (Grafana K6)
22-11-25 - Mise en place d'un pipeline CI/CD (3/4) - La branche staging
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
Ajout de la zone "Hero" sur la Home page, citations aléatoire Added a "Hero" section on the Home page, featuring random quotes
Généralisation du choix de la langue Generalised language selection (FR/EN)
Généralisation du partage d'article, intégration au "News" Generalised article sharing, integrated into the news section
L'e-shop sert uniquement de démonstration.
L'inscription étant désactivée, la démo s'arrête après le caddy The e-shop is for demonstration purposes only.
As registration is disabled, the demo ends after the shopping basket
Ajout du bouton pour les produits contenant des options
Remplacements et refontes Replacements and overhauls
Le forum est remplacé par un système d'articles, orienté Dev/Ops The forum has been replaced by an article system, focused on Dev/Ops
Les articles deviennent : Articles now consist of:Des retours d'expérience (liés aux projets) Feedback (project-related)
Ajout/Changements dans cet espace: Additions/Changes in this area:
Section Sujets à Sonder - donnez votre avis - toute catégorie Topics for Discussion section - give your opinion - all categories
Ajout de la section flashcards: Addition of the flashcards section: DevOps Snippets
Les commentaires (anonymes) restent disponibles pour les articles (anonymous) Comments remain available for articles
Améliorations Improvements
Refonte de la fonction de partage d'articles (intégration aux news) Redesigned the article sharing function (integration with news)
Refonte du routing pour améliorer le SEO (SPA avec Sammy.js > MVC) Redesigned routing to improve SEO (SPA with Sammy.js > MVC)
Suppression / Désactivation Removal / Deactivation
désactivation du "Groupe Fermé" Removal of the site registration system
Deactivation of the "Closed Group"
En coursIn progress
Amélioration de textesText improvements
DevOps Short-Lines (Snippets)
Outil d'aide et de mémorisation regroupant les commandes DevOps essentielles, organisé par catégories et sous-thèmes. Tool designed to help to learn and practice essential DevOps commands, structured by categories and subtopics.
FonctionnalitésFeatures
- Affichage interactif avec système de toggleInteractive toggle-based display
- Organisation par domaines DevOpsOrganized by DevOps domains
- Navigation par sous-catégoriesSub-category navigation
En coursIn progress
Les traduction FR/EN sont en progression Some commands are still being validated.
Exact translation is in progress
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 :
| Librairie | Ancienne version | Dernière version stable | Notes de compatibilité |
|---|---|---|---|
| Font Awesome | 5.8.1 | 7.0.1 | Tests requis. |
| normalize.css | 8.0.0 | 8.0.1 | Update mineur. |
| Bootstrap | 4.1.1 | 4.6.2 | Choix de rester sur 4.6.2 pour compatibilité jQuery. |
| Prism | 1.15.0 | 1.28.0 | Optimisations, pas de breaking change. |
| jQuery | 3.3.1 | 3.7.1 | Reste en v3 pour compatibilité Bootstrap. |
| Gritter.js | 1.7.4 | 1.7.4 | Pas de nouvelle version. |
| TinyMCE | 4.9.2 | 8.0 | Breaking changes, plugins payants → reste en 4.x self-hosted |
| Sammy.js | 0.7.6 | 0.7.5 | Dernière v. officielle = 0.7.5, faible différence. |
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.
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.
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
- Venir en aide aux personnes ayant des difficultés de langage. To help people with language difficulties.
- Vous apprendre à reconnaître les différentes figures de style utilisé dans la langue française Teach you to recognise the different figures of speech used in the French language
Fonctionnalités Features
- Reconnaissance des figures de styleRhetorical figure recognition
- Catégorisation des messagesMessage categorization
- Approche ludique et pédagogiquePlayful learning approach
Procédé: How to play:
- En cliquant sur "Lancer le jeu", vous lancez le jeu avec toutes les catégories de figures de style Click on "Start the game" to launch the game with all the figures of speech categories
- Essayez de deviner la catégorie auxquelle elle appartient Try to guess which category each one belongs to
- J'y ai ajouté quelques catégories telle que "message-Éveil", "Double-sens" ou "Vérité des mots" I've added a few categories such as "Awakening", "Double meaning" and "The truth of words"
- En cliquant sur le titre de la catégorie, à côté de l'œil, vous verrez tous les messages de cette catégorie By clicking on the category title, next to the eye, you will see all the messages in that category
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
Pour réaliser ce jeu, j'ai fait:
- La création de la table avec le titre, la citation et le contenu
- La recherche d'activités, d'images libre de droits via google
- La création et/ou modification d'images
- La rédaction des articles
Comportement & Procédé:
- Par défaut, on voit la liste de toutes les activités, lorsque l'on clique sur le titre, la fiche s'agrandie pour occupper toute la place
- Chaque article possèdes des chapitres clés: Bienfaits, ateliers, conseils ..
- Un bouton "Fermer l'article" est présent en bas de l'article pour faciliter sa fermeture
- Cliquer sur un autre article fermera celui en cours
Toutes les activités
Click sur le titre pour ouvrir l'article
Tarot des citations
Expérience interactive permettant de découvrir des citations inspirantes via un système de tirage. Interactive experience delivering inspirational quotes through a selection system.
Procédé:
- En cliquant sur "Mélangez les cartes", le carousel d'image défilera avec acteurs, artistes, chanteurs etc
- En cliquant sur "Stopper le mélange", votre message s'affichera
- En cliquant sur le bouton Previous ou Next, il choisira la carte précédente ou suivante, le carousel étant aléatoire, vous n'aurai jamais la même carte en faisant "Previous" et ensuite "Next"
Technique
- Slider CSS + jQuery
- Gestion aléatoire des cartes
- PHP backend
Flashcards — Apprentissage de l'anglais Flashcards — Learning English
Système de flashcards conçu pour accélérer la mémorisation du vocabulaire anglais. Flashcard system designed to speed up English vocabulary learning.
4 sections disponibles available sections
- Find the word(s) : En anglais et en français, avec indiceIn English and French, with a clue
- Find an expression : As .. as .. => rébus avec image picture rebus
- Find the oposites
- Learn Irregular verbs: Avec traduction FRwith French translation
Technique
- Choix de la langue (FR/EN) Language selection (FR/EN)
- Indice (dans la langue inverse) ou traductionIndex (in the other language) or translation
- Pagination dynamiqueDynamic pagination
- Flip cards CSS / jQuery
Find the word(s) (EN/FR)
Find an expression : As .. as ..(EN)
Find the oposites (EN)
Irregulars verbs (EN/FR)
Flashcards — Gestion de base
Ensemble de formules essentielles utilisées en gestion, présenté sous forme de flashcards interactives. Essential business formulas presented as interactive flashcards.
Fonctionnalités
- Affichage question/réponse
- Fenêtre modale interactive
Procédé:
- Cliquez sur la carte, une fenetre s'ouvre
- Cliquez à l'intérieur pour la fermée
Amélioration future
- Copie de la/des formule(s)
- Inverser la fonction de la fermeture de la modale
En CSS, pour encoder une formule, vous pouvez jouer avec ces class: In CSS, to style a formula, you can use these classes:
/* 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;}
Et, les utiliser comme ceci: And use them like this:
<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>résultat: result:
Les cartes "Pensées-Messages"
Système de tirage de messages inspirants basé sur des cartes interactives. Le thème abordé est: le Bonheur et la recherche de celui-ci Card-based system delivering inspirational messages. The topic covered is: Happiness and the pursuit of it
Technique
- Flip cards CSS
- Chargement dynamique (AJAX)
Procédé:
- Cliquez sur Mélanger les cartes, plusieurs fois si nécessaire
- Choisir la carte en cliquant dessus, retournez-la pour lire le message
- retournez-la à nouveau pour la fermer et éventuellement en choisir une autre
Click sur la carte pour la retourner
Lire son message
Demo Store - Fonctionnalités de baseBasic features
Implémentation d'un système e-commerce simple permettant de gérer produits et panier. Basic e-commerce system implementation with product and cart management.
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.
Évolutions techniques
- Transition du PHP procédural vers la POOTransition from procedural PHP to OOP
- Utilisation de PDO pour l'accès base de donnéesUse of PDO for database access
- Introduction des requêtes AJAX pour dynamiser l'interfaceIntroduction of AJAX for dynamic UI
- Structuration des données en JSONJSON-based data exchanges
Stack technique
- PHP 7 (POO) avec PDOPHP 7 (OOP) with PDO
- MySQLMySQL
- jQuery / AJAX / JSONjQuery / AJAX / JSON
- Bootstrap pour l'interfaceBootstrap for UI
Extensions réalisées
- Système de forum (base initiale)Forum system (initial base)
- Ajout d'un e-shopE-shop extension
- Implémentation des flashcardsFlashcards implementation
- Ajout de modules interactifs (cartes, messages, etc.)Interactive modules (cards, messages, etc.)
Notes
Cette architecture constitue une base d'apprentissage et présente certaines limites en termes de maintenabilité et de scalabilité, ce qui motive les évolutions futures vers des architectures plus modulaires (microservices, API, etc.). This architecture serves as a learning foundation and has limitations in terms of maintainability and scalability, motivating future evolution toward more modular architectures (microservices, APIs, etc.).
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.