passeport.dev
Open in
urlscan Pro
13.38.36.44
Public Scan
URL:
https://passeport.dev/fr/p/a23d3417-e109-4054-b5b4-4e8ade7789bd
Submission: On March 05 via api from DE — Scanned from FR
Submission: On March 05 via api from DE — Scanned from FR
Form analysis 11 forms found in the DOM
<form class="relative w-full mb-12"><input type="text" id="addPasseportInput" class="w-full outline-none border px-2 py-4 rounded-lg placeholder:text-blue-400 focus-within:ring-0" placeholder="Adresse(s) mail (séparées par une virgule)"
value=""><button class="absolute top-4 -translate-y-2 right-2 text-sm px-6 py-2.5 font-medium bg-black-200 text-white-100 rounded-md" type="submit">Ajouter</button></form><form>
<div class="flex flex-col py-8 gap-8">
<div id="Continuous_Integration" data-step="2">
<div class="mb-5 px-2">
<div class="flex gap-1 items-center mb-2"><span><img alt="category-icon" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" src="/icons/skill_icon_fill.svg" style="color: transparent; width: auto;"></span>
<h3 class="text-base text-black-300 font-graphikSemibold">Continuous Integration</h3>
</div>
<p class="text-[12px] leading-5 text-blue-400 font-graphikRegular">L'intégration continue est une pratique qui consiste à fusionner régulièrement les modifications du code réalisées par plusieurs développeurs au sein d'un projet, afin de
détecter rapidement les éventuels problèmes d'incompatibilité et de garantir une qualité constante du logiciel.</p>
</div><span class="flex justify-end gap-3 mb-4"><span class="flex"><img alt="never practiced radio button" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" class="pr-1" src="/icons/red-radio.svg"
style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Jamais pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy" width="16" height="16" decoding="async"
data-nimg="1" src="/icons/yellow-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Déjà pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy"
width="16" height="16" decoding="async" data-nimg="1" src="/icons/green-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Maîtrise</span></span></span>
<div class="flex flex-col w-full bg-gray-200 rounded-md py-4 pl-4 pr-5">
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Continuous Integration.Basic git commands.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Continuous Integration.Basic git commands.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Continuous Integration.Basic git commands.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Basic git commands</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Basic git commands" type="checkbox" class="hidden" name="Continuous Integration.Basic git commands.canMentor" disabled="" value="true" checked=""><label for="Basic git commands"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto bg-green-100 !text-neutral-50 border-green-100"><img
alt="can-mentor-icon" loading="lazy" width="20" height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les commandes Git de base sont des instructions utilisées pour gérer un référentiel Git. Elles incluent "git init" pour initialiser un nouveau référentiel, "git
add" pour ajouter des fichiers à l'index de suivi, "git commit" pour créer un instantané des modifications, "git branch" pour créer une nouvelle branche, "git push" pour envoyer les modifications vers un référentiel distant, "git pull"
pour récupérer et fusionner les modifications d'un référentiel distant vers le référentiel local, et git merge pour fusionner les modifications d'une branche vers une autre branche.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://dev.to/ruppysuppy/git-cheat-sheet-with-40-commands-concepts-1m26" target="_blank">Git cheat sheet - 40 commands</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://education.github.com/git-cheat-sheet-education.pdf" target="_blank">Git cheat sheet education</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.freecodecamp.org/news/git-cheat-sheet/" target="_blank">Freecodecamp Git cheat sheet</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Continuous Integration.Advanced git commands.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Continuous Integration.Advanced git commands.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Continuous Integration.Advanced git commands.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Advanced git commands</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les commandes avancées de git offrent des fonctionnalités plus fines pour manipuler l'historique des commits, effectuer des recherches de bugs et gérer finement
les modifications dans un référentiel Git.: interactive rebase, bisect, squash, fixup, cherry pick etc...</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=ecK3EnyGD8o&ab_channel=Fireship" target="_blank">13 advanced Git Techniques and shortcuts</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.gitkraken.com/learn/git/commands" target="_blank">Gitkraken - Advanced Git techniques</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Continuous Integration.Trunk based development.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Continuous Integration.Trunk based development.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Continuous Integration.Trunk based development.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Trunk based development</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Méthode de développement logiciels où tous les devs travaillent sur une seule branche principale, appelée "trunk" ou "main", en effectuant des commits très
fréquents et en évitant les longues branches de fonctionnalités pour minimiser les conflits de merge.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://trunkbaseddevelopment.com/" target="_blank">Trunk Based Development - Official doc</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://cloud.google.com/architecture/devops/devops-tech-trunk-based-development" target="_blank">Google Cloud - Trunk Based Development</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Continuous Integration.Feature based branching (gitflow).proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Continuous Integration.Feature based branching (gitflow).proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Continuous Integration.Feature based branching (gitflow).proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Feature based branching (gitflow)</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Feature based branching (gitflow) est une stratégie de gestion de branches dans Git qui définit un modèle de flux de travail plutôt rigide, conçu autour des
versions de projet, en utilisant des branches spécifiques pour les fonctionnalités, les versions, les correctifs de bugs et la maintenance.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=U_IFGpJDbeU&pp=ygUXdHJ1bmsgYmFzZWQgZGV2ZWxvcG1lbnQ%3D" target="_blank">Branching Strategies Explained</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.atlassian.com/fr/git/tutorials/comparing-workflows/gitflow-workflow" target="_blank">Workflow Gitflow</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Continuous Integration.Clean commit.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Continuous Integration.Clean commit.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Continuous Integration.Clean commit.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Clean commit</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Un "clean commit" fait référence à une pratique de développement de logiciels consistant à effectuer un commit qui est clair, concis et ne contient que des
modifications liées à une fonctionnalité ou à une tâche spécifique, sans inclure de modifications inutiles ou non liées. Cela contribue à maintenir la propreté et la traçabilité du code source, facilitant ainsi la collaboration et la
gestion du projet. L'utilisation d'outils comme husky ou commitizen permettent de créer un format type clair de commit</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.conventionalcommits.org/en/v1.0.0/" target="_blank">Conventional Commits</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.freecodecamp.org/news/writing-good-commit-messages-a-practical-guide/" target="_blank">How To Write Good Commit Messages</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://levelup.gitconnected.com/4-tips-to-write-clean-commit-history-51155f7f23b9" target="_blank">4 Tips To Write Clean Commits History</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Continuous Integration.Clean PR.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Continuous Integration.Clean PR.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Continuous Integration.Clean PR.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Clean PR</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Une "clean PR" est une demande de fusion qui est claire, bien organisée et qui contient uniquement les modifications nécessaires pour résoudre un problème ou
implémenter une fonctionnalité spécifique. Cela facilite la révision et la compréhension du code par les pairs, en maintenant un niveau élevé de lisibilité, de qualité et de cohérence dans le processus de collaboration du développement
logiciel.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://hackernoon.com/make-clean-pull-requests-version-control-and-collaboration-420ecff2e7b5" target="_blank">Make Clean Pull Requests</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://embeddedartistry.com/blog/2017/08/04/a-github-pull-request-template-for-your-projects/" target="_blank">A Github Pull Request Template For Your Projects</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.pullrequest.com/blog/writing-a-great-pull-request-description/" target="_blank">Writing A Great Pull Request Description</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Continuous Integration.CI servers.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Continuous Integration.CI servers.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Continuous Integration.CI servers.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">CI servers</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Un serveur d'intégration continue (CI server) est un outil logiciel utilisé dans le développement de logiciels pour automatiser le processus d'intégration du
code. Il permet de compiler, tester et déployer automatiquement le code source à chaque modification, assurant ainsi une intégration régulière et une détection précoce des erreurs. Les plus populaires sont Github Actions, Gitlab CI,
Jenkins, Travis ou encore Azure Devops.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=5PDm7AY_-FA&pp=ygUbcXUnZXN0IGNlIHF1J3VuIGNkIHBpcGVsaW5l" target="_blank">Comment mettre en place une CI/CD ?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://about.gitlab.com/topics/ci-cd/continuous-integration-server/" target="_blank">CI Server: How It Works</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://codefresh.io/learn/continuous-integration/ci-server-how-it-works/" target="_blank">Github Actions Step By Step Guide</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Continuous Integration.Linter.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Continuous Integration.Linter.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Continuous Integration.Linter.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Linter</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Outil utilisé dans le développement de logiciels pour analyser le code source et signaler les erreurs, les problèmes de style et les violations des conventions
de programmation. Il applique un ensemble de règles prédéfinies ou personnalisables pour détecter les erreurs courantes, les pratiques non recommandées et les incohérences dans le code. Les linters aident à améliorer la qualité du code,
à renforcer la cohérence du style de programmation et à identifier les problèmes potentiels avant l'exécution du code.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=HDQXWr5TOnI&pp=ygUQd2hhdCBpcyBhIGxpbnRlcg%3D%3D" target="_blank">What is a Linter and Why you should use one</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/" target="_blank">What is a Linter ? Quick start guide</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=fL8de_m8imY&pp=ygUQd2hhdCBpcyBhIGxpbnRlcg%3D%3D" target="_blank">Github Super Linter in 5 minutes</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Continuous Integration.Test coverage.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Continuous Integration.Test coverage.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Continuous Integration.Test coverage.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Test coverage</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le "test coverage" (ou couverture de test) fait référence à la mesure de la proportion du code source d'un programme qui est exercée par les tests automatisés.
Il indique le pourcentage de lignes de code, de branches conditionnelles ou d'autres éléments couverts par les tests par rapport à l'ensemble du code source. Attention à ne pas considérer que le test coverage est suffisant pour garantir
la qualité d'écriture des tests!</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.lambdatest.com/learning-hub/test-coverage" target="_blank">Test Coverage - Comprehensive Guid with Best Practices</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.testim.io/blog/test-coverage-techniques/" target="_blank">Test Coverage Techniques - The Ones You Need</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.testim.io/blog/how-to-ensure-test-coverage/" target="_blank">How To Ensure Test Coverage</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Continuous Integration.Semantic versionning.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Continuous Integration.Semantic versionning.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Continuous Integration.Semantic versionning.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Semantic versionning</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le versionnage sémantique est un système de versionnage qui associe un sens spécifique à différentes parties du numéro de version, généralement structuré comme
MAJEUR.MINEUR.CORRECTIF. Le changement du numéro de version MAJEUR indique des modifications incompatibles, un changement du numéro MINEUR indique l'ajout de fonctionnalités compatibles avec les versions antérieures, et un changement de
CORRECTIF indique des corrections de bugs compatibles avec les versions antérieures.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://semver.org/" target="_blank">SemVer Official Specs</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.howtogeek.com/devops/what-is-semantic-versioning" target="_blank">What Is Semantic Versioning</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=1zBzkT7QCmA&pp=ygUZcHJhY3RpY2FsIGd1aWRlIHRvIHNlbXZlcg%3D%3D" target="_blank">Undertsanding Semantic Versioning (real world examples)</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Continuous Integration.Code Reviews.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Continuous Integration.Code Reviews.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Continuous Integration.Code Reviews.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Code Reviews</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">processus par lequel un ou plusieurs développeurs vérifient le code écrit par un autre développeur afin de s'assurer qu'il respecte les meilleures pratiques de
programmation, qu'il est exempt d'erreurs et qu'il répond aux exigences du projet.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="" target="_blank">How to make a great code reviews</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="" target="_blank">You don't need code reviews</a>
</div>
</div>
</div><br><label class="pb-4">Tu vois d'autres skills à rajouter dans la catégorie Continuous Integration ?</label><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input type="hidden"
name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Continuous Integration"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button>
</div>
</div>
<div id="Programming" data-step="3">
<div class="mb-5 px-2">
<div class="flex gap-1 items-center mb-2"><span><img alt="category-icon" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" src="/icons/skill_icon_fill.svg" style="color: transparent; width: auto;"></span>
<h3 class="text-base text-black-300 font-graphikSemibold">Programming</h3>
</div>
<p class="text-[12px] leading-5 text-blue-400 font-graphikRegular">Les patterns de programmation sont des solutions éprouvées à des problèmes de conception courants dans le développement de logiciels. Ils fournissent des approches structurées
et réutilisables pour résoudre des problèmes spécifiques et améliorer la qualité, la maintenabilité et l'extensibilité du code.</p>
</div><span class="flex justify-end gap-3 mb-4"><span class="flex"><img alt="never practiced radio button" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" class="pr-1" src="/icons/red-radio.svg"
style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Jamais pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy" width="16" height="16" decoding="async"
data-nimg="1" src="/icons/yellow-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Déjà pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy"
width="16" height="16" decoding="async" data-nimg="1" src="/icons/green-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Maîtrise</span></span></span>
<div class="flex flex-col w-full bg-gray-200 rounded-md py-4 pl-4 pr-5">
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Programming.OOP.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Programming.OOP.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input name="Programming.OOP.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">OOP</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'OOP (Object-Oriented Programming) est un paradigme de programmation qui se concentre sur la modélisation des problèmes du monde réel en utilisant des objets,
qui sont des instances de classes. Il favorise l'encapsulation, l'abstraction, l'héritage et le polymorphisme pour organiser et structurer le code, facilitant ainsi la réutilisation, la maintenabilité et la modularité des logiciels.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.freecodecamp.org/news/object-oriented-programming-concepts-21bb035f7260/" target="_blank">Object Oriented Concepts Explained</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.indeed.com/career-advice/career-development/what-is-object-oriented-programming" target="_blank">What is Object Oriented Programming</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=pTB0EiLXUC8&pp=ygUWcHJhY3RpY2FsIGd1aWRlIHRvIG9vcA%3D%3D" target="_blank">OOP in 7 mn</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Programming.FP.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Programming.FP.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input name="Programming.FP.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">FP</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le "functional programming" (programmation fonctionnelle) est un paradigme de programmation qui met l'accent sur l'utilisation de fonctions pures, sans état et
immuables, en évitant les effets de bord. Il favorise la composition de fonctions, la manipulation de données immuables et l'utilisation d'expressions déclaratives pour résoudre les problèmes de programmation, en mettant l'accent sur la
clarté, la prévisibilité et la facilité de test du code.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.codingdojo.com/blog/what-is-functional-programming" target="_blank">What Is Functional Programming</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=8z_bUIl_uPo&pp=ygUpcHJhY3RpY2FsIGd1aWRlIHRvIGZ1bmN0aW9uYWwgcHJvZ3JhbW1pbmc%3D" target="_blank">Functional Programming - A General Introduction</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.codingame.com/playgrounds/270/functional-programming-explained-to-my-grandma/what-you-will-learn" target="_blank">Functional Programming Explained To My Grandma</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Programming.Static typing.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Programming.Static typing.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Programming.Static typing.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Static typing</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le "static typing" (typage statique) est un concept en programmation où les types des variables et des expressions sont vérifiés à la compilation plutôt qu'à
l'exécution. Les langages de programmation avec un typage statique requièrent que les types soient déclarés explicitement et vérifiés avant l'exécution, ce qui permet une détection précoce des erreurs de type et une meilleure
compréhension du code par les développeurs.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.baeldung.com/cs/statically-vs-dynamically-typed-languages" target="_blank">Statically vs Dynamically Typed Languages</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=d56mG7DezGs&pp=ygUTdHlwZXNjcmlwdCB0dXRvcmlhbA%3D%3D" target="_blank">TypeScript in 1 hour</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://medium.com/free-code-camp/typescript-curry-ramda-types-f747e99744ab" target="_blank">Learn Advanced TypeScript</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Programming.SOLID principles.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Programming.SOLID principles.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Programming.SOLID principles.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">SOLID principles</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les principes SOLID sont un ensemble de principes de conception logicielle qui favorisent la modularité, l'extensibilité et la maintenabilité des systèmes
logiciels. Ils incluent le Single Responsibility Principle (SRP), l'Open/Closed Principle (OCP), le Liskov Substitution Principle (LSP), l'Interface Segregation Principle (ISP) et le Dependency Inversion Principle (DIP), qui encouragent
la séparation des préoccupations, l'encapsulation, l'abstraction et la gestion des dépendances pour produire un code souple et évolutif.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://medium.com/mindorks/solid-principles-explained-with-examples-79d1ce114ace" target="_blank">A Solid Guide to SOLID Principles</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=TMuno5RZNeE&ab_channel=Peoplecareer" target="_blank">Bob 'Uncle Bob' Martin Masterclass on SOLID Principles</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="http://blog.cleancoder.com/uncle-bob/2020/10/18/Solid-Relevance.html" target="_blank">SOLID Relevance</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Programming.Design patterns.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Programming.Design patterns.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Programming.Design patterns.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Design patterns</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les design patterns en code sont des solutions éprouvées et réutilisables pour résoudre des problèmes courants de conception logicielle. Ils fournissent des
modèles et des structures de conception bien documentés qui facilitent la résolution de problèmes spécifiques, améliorent la maintenabilité du code et favorisent les bonnes pratiques de développement : Factory, Observatory, Singleton,
Decorator, Adaptor, Repository, etc...</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://refactoring.guru/fr/design-patterns" target="_blank">Patrons de conception / Design Pattern</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="http://blog.cleancoder.com/uncle-bob/2014/06/30/ALittleAboutPatterns.html" target="_blank">A Litlle About Pattern</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=NU_1StN5Tkk&pp=ygUnZGVzaWduIHBhdHRlcm5zIGluIHNvZnR3YXJlIGVuZ2luZWVyaW5n" target="_blank">10 Design Patterns Explained</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Programming.Algorithms.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Programming.Algorithms.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Programming.Algorithms.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Algorithms</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">En informatique, les algorithmes peuvent être classés en plusieurs catégories, dont les plus courantes sont les algorithmes de tri, utilisés pour réorganiser les
données dans un certain ordre, et les algorithmes de recherche, utilisés pour trouver des données spécifiques au sein d'un ensemble de données. D'autres catégories comprennent les algorithmes de parcours de graphes, de programmation
dynamique, de récursion, de hachage, de backtracking, et bien d'autres, chacun étant adapté à la résolution de types spécifiques de problèmes.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=RfXt_qHDEPw&ab_channel=BeyondFireship" target="_blank">Sorting Algorithms Explained Visually</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://cheatography.com/dmytronoks/cheat-sheets/algorithms-cs50/" target="_blank">Algorithms CS 50 Cheat Sheet</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.freecodecamp.org/news/what-is-an-algorithm-definition-for-beginners/" target="_blank">Algorithm Definitions for Computer Science</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Programming.BigO complexity.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Programming.BigO complexity.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Programming.BigO complexity.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">BigO complexity</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le 'Big O complexity' est une mesure qui évalue l'efficacité et la performance d'un algorithme en fonction de la croissance de la taille de l'entrée. Il exprime
la relation asymptotique entre la taille de l'entrée et le temps d'exécution (complexité temporelle) ou l'espace mémoire requis (complexité spatiale) par l'algorithme, permettant ainsi de comprendre comment l'algorithme évolue lorsque
la taille des données augmente.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.bigocheatsheet.com/" target="_blank">BigO Cheat Sheet</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=D6xkbGLQesk&pp=ygUaYmlnIG8gY29tcGxleGl0eSBleHBsYWluZWQ%3D" target="_blank">Intro to BigO Notation & Time Complexity</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=g2o22C3CRfU&pp=ygUaYmlnIG8gY29tcGxleGl0eSBleHBsYWluZWQ%3D" target="_blank">BigO Notation in 100 secondes</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Programming.Asynchronous programming.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Programming.Asynchronous programming.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Programming.Asynchronous programming.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Asynchronous programming</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La programmation asynchrone est un modèle de programmation qui permet d'exécuter des tâches de manière non bloquante et parallèle. Elle utilise des callbacks,
des promesses ou des async/await pour gérer les opérations longues ou lentes, permettant ainsi au programme de continuer son exécution sans attendre la fin de ces opérations. Cela améliore la réactivité, les performances et l'efficacité
globale des applications qui doivent gérer des opérations intensives en termes de temps.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=Kpn2ajSa92c&pp=ygUZYXN5bmNyaG9uZW91cyBwcm9ncmFtbWluZw%3D%3D" target="_blank">Asynchronous vs Syncronous Programming</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=vn3tm0quoqE&pp=ygUZYXN5bmNyaG9uZW91cyBwcm9ncmFtbWluZw%3D%3D" target="_blank">The Async / Await Episode - Promised</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.bmc.com/blogs/asynchronous-programming/" target="_blank">Asynchronous Programming - A Beginner's Guide</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Programming.Multithreading.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Programming.Multithreading.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Programming.Multithreading.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Multithreading</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le multithreading est une technique de programmation permettant l'exécution simultanée de plusieurs fils d'exécution (threads) au sein d'un programme. Chaque
thread représente une séquence d'instructions indépendante et peut être utilisé pour effectuer des tâches en parallèle, améliorant ainsi l'efficacité et la capacité de réponse des programmes en exploitant les ressources du processeur de
manière optimale.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.internalpointers.com/post/gentle-introduction-multithreading" target="_blank">A Gentle Introduction To Multithreading</a></div>
</div>
</div><br><label class="pb-4">Tu vois d'autres skills à rajouter dans la catégorie Programming ?</label>
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input
type="hidden" name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Programming"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>
</div>
</div>
<div id="Software_Documentation" data-step="4">
<div class="mb-5 px-2">
<div class="flex gap-1 items-center mb-2"><span><img alt="category-icon" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" src="/icons/skill_icon_fill.svg" style="color: transparent; width: auto;"></span>
<h3 class="text-base text-black-300 font-graphikSemibold">Software Documentation</h3>
</div>
<p class="text-[12px] leading-5 text-blue-400 font-graphikRegular">Il s’agit de l’ensemble des techniques de visualisation et de modelisation du logiciel qui aide les développeurs à comprendre le code, à faciliter la maintenance, et à
permettre à d'autres personnes de collaborer et d'utiliser le code de manière efficace.</p>
</div><span class="flex justify-end gap-3 mb-4"><span class="flex"><img alt="never practiced radio button" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" class="pr-1" src="/icons/red-radio.svg"
style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Jamais pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy" width="16" height="16" decoding="async"
data-nimg="1" src="/icons/yellow-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Déjà pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy"
width="16" height="16" decoding="async" data-nimg="1" src="/icons/green-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Maîtrise</span></span></span>
<div class="flex flex-col w-full bg-gray-200 rounded-md py-4 pl-4 pr-5">
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Software Documentation.Readme.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Software Documentation.Readme.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Software Documentation.Readme.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Readme</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Readme" type="checkbox" class="hidden" name="Software Documentation.Readme.canMentor" disabled="" value="false"><label for="Readme"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto false"><img alt="can-mentor-icon" loading="lazy" width="20"
height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-gray-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Un 'README' est un fichier texte généralement présent à la racine d'un projet logiciel ou d'un référentiel de code source. Il sert à fournir des informations
essentielles sur le projet, telles que la description, les instructions d'installation, d'utilisation et de contribution, ainsi que toute autre documentation pertinente, afin d'aider les utilisateurs et les contributeurs à comprendre
rapidement le projet et à commencer à l'utiliser.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.makeareadme.com/" target="_blank">Readme 101 - Template & Suggestions</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/%20https://dev.to/merlos/how-to-write-a-good-readme-bog" target="_blank">Guide To Writing A good Readme</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=a8CwpGARAsQ&pp=ygUocHJhY3RpY2FsIGd1aWRlIHRvIHdyaXRpbmcgYSBnb29kIHJlYWRtZQ%3D%3D" target="_blank">How To Create Beautiful and Useful ReadMe Documents For GitHub</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Software Documentation.Contributing Principles.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Software Documentation.Contributing Principles.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Software Documentation.Contributing Principles.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Contributing Principles</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Informations spécifiques sur les lignes directrices, les processus et les attentes pour les contributeurs potentiels souhaitant participer au développement du
projet. Le fichier 'CONTRIBUTING.md' décrit les étapes à suivre pour soumettre des problèmes, proposer des modifications, fournir des rétroactions ou contribuer de manière générale au projet, afin de faciliter une collaboration efficace
et cohérente entre les contributeurs et les mainteneurs du projet.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="http://mozillascience.github.io/working-open-workshop/contributing/" target="_blank">How to Build a CONTRIBUTING.md - Mozilla Sicence Lab</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://contributing.md/how-to-build-contributing-md/" target="_blank">Best Practices on Making a contributing.md file</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://gist.github.com/PurpleBooth/b24679402957c63ec426" target="_blank">Contributing.md Gist Template</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Software Documentation.UML.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Software Documentation.UML.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Software Documentation.UML.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">UML</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="UML" type="checkbox" class="hidden" name="Software Documentation.UML.canMentor" disabled="" value="true" checked=""><label for="UML"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto bg-green-100 !text-neutral-50 border-green-100"><img
alt="can-mentor-icon" loading="lazy" width="20" height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'UML diagram est un type de diagramme utilisé dans l'ingénierie logicielle pour représenter graphiquement différents aspects d'un système logiciel. UML fournit
un ensemble de notations standardisées pour représenter visuellement des concepts tels que les classes, les objets, les relations, les comportements, les structures et les interactions entre les composants d'un système.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=zid-MVo7M-E&ab_channel=LucidSoftwarehttps://youtu.be/JiQmpA474BY" target="_blank">UML Usecase Diagram</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.lucidchart.com/pages/uml-class-diagram" target="_blank">UML Class Diagram Tutorial</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://creately.com/blog/software-teams/class-diagram-tutorial/" target="_blank">The Easy Guide To UML Class Diagram</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Software Documentation.C4 Model.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Software Documentation.C4 Model.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Software Documentation.C4 Model.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">C4 Model</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Approche de modélisation architecturale qui utilise quatre couches pour représenter l'architecture d'un système logiciel, allant du contexte global aux détails
des composants internes. Il facilite la compréhension et la communication de l'architecture en fournissant une vue hiérarchique claire et concise du système.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://c4model.com/" target="_blank">Official Website</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=x2-rSnhpw0g&ab_channel=AgileontheBeach" target="_blank">Visualising software architecture with the C4 model</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://medium.com/news-uk-technology/c4-model-a-better-way-to-visualise-software-architecture-df41e5ac57b8" target="_blank">C4 Model a Better Way To Visualise Software Architecture</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Software Documentation.Open API / Swagger.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Software Documentation.Open API / Swagger.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Software Documentation.Open API / Swagger.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Open API / Swagger</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Open API / Swagger" type="checkbox" class="hidden" name="Software Documentation.Open API / Swagger.canMentor" disabled="" value="false"><label for="Open API / Swagger"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto false"><img alt="can-mentor-icon" loading="lazy" width="20"
height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-gray-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Format de description d'API qui fournit une spécification standardisée, basée sur le format JSON ou YAML, pour décrire les endpoints, les paramètres, les types
de données, les méthodes d'appel, les exemples d'utilisation et d'autres informations liées à une API. Il permet de créer une documentation interactive, de générer du code client/serveur et de faciliter l'intégration et
l'interopérabilité entre les différentes plateformes et outils.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=rkk2h6Tra9A&ab_channel=Learn21Academy" target="_blank">Open API 3.0 - Swagger Tutorial</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=0vqgWQIVfMI&ab_channel=OneOOneCode" target="_blank">Open API Specifications Crash Course</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://support.smartbear.com/swaggerhub/docs/tutorials/openapi-3-tutorial.html" target="_blank">Open API 3.0 Tutorial</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Software Documentation.Storybook.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Software Documentation.Storybook.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Software Documentation.Storybook.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Storybook</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Storybook est un outil de développement frontend qui permet de créer et de visualiser des composants d'interface utilisateur (UI) de manière isolée et
interactive. Il offre un environnement de développement où les développeurs peuvent explorer, tester et documenter les composants frontend de manière indépendante, favorisant ainsi le développement modulaire et la réutilisabilité des
UI.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/" target="_blank">Official Documentation - Getting Started</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://youtu.be/FUKpWgRyPlU" target="_blank">Learn Storybook Crash Course</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.freecodecamp.org/news/what-is-storybook-and-how-can-i-use-it-to-create-a-component-libary-in-react/" target="_blank">What Is Storybook and How To Use It</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Software Documentation.ADR.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Software Documentation.ADR.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Software Documentation.ADR.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">ADR</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Un ADR (Architectural Decision Record) est un document qui enregistre une décision architecturale prise au cours du développement d'un logiciel. Il fournit une
description concise de la décision, les raisons qui l'ont motivée, les alternatives envisagées et les implications attendues, facilitant ainsi la compréhension et la traçabilité des décisions prises dans le processus de conception et
d'évolution d'un système logiciel.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://github.com/joelparkerhenderson/architecture-decision-record" target="_blank">Architecture decision record (ADR) - By Joel Parker Henderson</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://adr.github.io/" target="_blank">Homepage of the ADR GitHub organization</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://betterprogramming.pub/the-ultimate-guide-to-architectural-decision-records-6d74fd3850ee" target="_blank">The Ultimate Guide To Architectural Decision Records</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Software Documentation.Release Notes.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Software Documentation.Release Notes.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Software Documentation.Release Notes.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Release Notes</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Release Notes" type="checkbox" class="hidden" name="Software Documentation.Release Notes.canMentor" disabled="" value="false"><label for="Release Notes"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto false"><img alt="can-mentor-icon" loading="lazy" width="20"
height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-gray-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Une "release note" est un document ou une note qui accompagne une version logicielle publiée et qui fournit des informations sur les nouveautés, les
améliorations, les correctifs de bugs et les modifications apportées à cette version spécifique du logiciel. Elle sert à informer les utilisateurs et les parties prenantes des changements apportés, des fonctionnalités ajoutées et des
problèmes résolus dans la version du logiciel mise à disposition.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://theproductmanager.com/topics/software-release-notes/" target="_blank">How To Write Effective Software Release Notes</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://blog.bit.ai/writing-release-notes/" target="_blank">Writing Release Notes</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Software Documentation.Dependency Graph.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Software Documentation.Dependency Graph.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Software Documentation.Dependency Graph.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Dependency Graph</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Un graphe de dépendances est une représentation visuelle montrant comment différents modules, fonctions, ou composants d'un système logiciel interagissent et
dépendent les uns des autres. Il aide les développeurs à comprendre et gérer les complexités du code, en facilitant notamment la détection des cycles de dépendance, l'optimisation du couplage et de la cohésion, et l'organisation de
l'ordre d'exécution ou de compilation.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.baeldung.com/cs/generating-dependency-graphs" target="_blank">Generating Dependency Graph With Text</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://learn.microsoft.com/en-us/visualstudio/modeling/create-layer-diagrams-from-your-code?view=vs-2022" target="_blank">Create Dependency Diagram From Your Code</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.lucidchart.com/pages/templates/dependency-graph" target="_blank">Dependency Graph Template</a>
</div>
</div>
</div><br><label class="pb-4">Tu vois d'autres skills à rajouter dans la catégorie Software Documentation ?</label>
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input
type="hidden" name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Software Documentation"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>
</div>
</div>
<div id="Application_Testing" data-step="5">
<div class="mb-5 px-2">
<div class="flex gap-1 items-center mb-2"><span><img alt="category-icon" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" src="/icons/skill_icon_fill.svg" style="color: transparent; width: auto;"></span>
<h3 class="text-base text-black-300 font-graphikSemibold">Application Testing</h3>
</div>
<p class="text-[12px] leading-5 text-blue-400 font-graphikRegular">Une grande partie de la qualité logicielle passe par l’écriture de tests à différents niveaux de ce qu’on appelle la pyramide de tests. Mais les tests servent aussi à aider le
développeur à mieux concevoir la logique de son code, de manière incrémentale et itérative.</p>
</div><span class="flex justify-end gap-3 mb-4"><span class="flex"><img alt="never practiced radio button" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" class="pr-1" src="/icons/red-radio.svg"
style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Jamais pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy" width="16" height="16" decoding="async"
data-nimg="1" src="/icons/yellow-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Déjà pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy"
width="16" height="16" decoding="async" data-nimg="1" src="/icons/green-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Maîtrise</span></span></span>
<div class="flex flex-col w-full bg-gray-200 rounded-md py-4 pl-4 pr-5">
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Application Testing.Testing Objects.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Application Testing.Testing Objects.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Application Testing.Testing Objects.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Testing Objects</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les objets de tests, également appelés objets de test doubles, sont des implémentations substituées des dépendances réelles utilisées lors des tests unitaires.
Ces objets sont créés dans le but de fournir des comportements prévisibles et contrôlés pour isoler le code testé et faciliter les tests en permettant la simulation de certaines interactions ou valeurs de retour spécifiques : mock, spy,
double, fixtures.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://blog.pragmatists.com/test-doubles-fakes-mocks-and-stubs-1a7491dfa3da" target="_blank">Test Doubles — Fakes, Mocks and Stubs</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://martinfowler.com/bliki/TestDouble.html" target="_blank">Test Doubles - Martin Fowler</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://womanonrails.com/test-doubles" target="_blank">Test Doubles - The difference between stubs and mocks</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Application Testing.Unit Tests.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Application Testing.Unit Tests.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Application Testing.Unit Tests.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Unit Tests</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les tests unitaires sont des tests automatisés effectués sur des composants individuels d'un logiciel pour vérifier leur bon fonctionnement de manière isolée.
Ils consistent à valider les entrées, les sorties et les comportements attendus de ces composants, permettant de détecter rapidement les erreurs et de s'assurer de la qualité du code à un niveau granulaire.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.guru99.com/unit-testing-guide.html" target="_blank">Unit Testing Guide</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://robertmarshall.dev/blog/arrange-act-and-assert-pattern-the-three-as-of-unit-testing/" target="_blank">Arrange, Act and Assert Pattern: The Three A’s of Unit Testing</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.stevefenton.co.uk/2013/05/my-unit-testing-epiphany/" target="_blank">My Unit Testing Epiphany</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Application Testing.TDD.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Application Testing.TDD.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Application Testing.TDD.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">TDD</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le TDD (Test-Driven Development) est une approche de développement logiciel où l'on commence par réfléchir au dénouement souhaité afin de faire ressortir
l'algorithme ou la logique que l'on souhaite construire. Cela implique de définir les exigences sous forme de tests, puis de développer le code qui répond à ces tests, favorisant ainsi la qualité, la modularité et la réflexion sur la
conception du code dès le début du processus de développement.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=nbSaq_ykOl4&t=18s&pp=ygUXYWxnb3JpdGhtZSBpbmZvcm1hdGlxdWU%3D" target="_blank">TDD par l'exemple</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://blog.cleancoder.com/uncle-bob/2016/11/10/TDD-Doesnt-work.html" target="_blank">TDD Doesn't Work</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=EZ05e7EMOLM&ab_channel=DevTernityConference" target="_blank">TDD, Where Did It All Go Wrong</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Application Testing.BDD.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Application Testing.BDD.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Application Testing.BDD.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">BDD</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le BDD (Behavior-Driven Development) est une méthodologie de développement logiciel qui met l'accent sur la collaboration entre les développeurs, les testeurs et
les parties prenantes pour définir le comportement attendu du logiciel à l'aide de scénarios rédigés dans un langage naturel. Il vise à aligner les objectifs métier et les exigences fonctionnelles en encourageant des spécifications plus
compréhensibles et une communication claire entre les différentes parties prenantes du projet.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.browserstack.com/guide/what-is-bdd-testing" target="_blank">What is BDD testing?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=3mSajdqhitQ" target="_blank">Le BDD ce n'est pas ce que vous croyez</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://medium.com/wealcomecompany/d%C3%A9monstration-de-bdd-et-tdd-en-live-bbc3329b39e" target="_blank">Demonstration de BDD et TDD en live</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Application Testing.Integration tests.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Application Testing.Integration tests.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Application Testing.Integration tests.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Integration tests</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Integration tests" type="checkbox" class="hidden" name="Application Testing.Integration tests.canMentor" disabled="" value="false"><label for="Integration tests"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto false"><img alt="can-mentor-icon" loading="lazy" width="20"
height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-gray-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les tests d'intégration sont des tests qui vérifient le bon fonctionnement des interactions et des intégrations entre plusieurs composants ou modules d'un
système logiciel. Ils permettent de détecter les erreurs potentielles lors de l'assemblage des différentes parties du système, en s'assurant que les composants fonctionnent ensemble de manière cohérente et conforme aux spécifications.
</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.guru99.com/integration-testing.html" target="_blank">Integration Testing: What is, Types with Example</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://blog.cleancoder.com/uncle-bob/2017/05/05/TestDefinitions.html" target="_blank">First Class Tests</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://research.aimultiple.com/integration-testing-best-practices/" target="_blank">7 Integration Testing Best Practices</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Application Testing.End-to-end tests.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Application Testing.End-to-end tests.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Application Testing.End-to-end tests.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">End-to-end tests</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les tests end-to-end (E2E) sont des tests qui simulent des scénarios d'utilisation réels et couvrent l'ensemble du flux de travail d'une application, du début à
la fin. Ils vérifient la fonctionnalité, la performance et l'interopérabilité du système dans son ensemble, en reproduisant les interactions utilisateur réelles pour s'assurer que tous les composants et systèmes interagissent
correctement. Ces tests sont plus longs à executer et en général sont plutôt à réaliser sur les absolument parcours critiques d'une application.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.browserstack.com/guide/end-to-end-testing" target="_blank">What Is End-to-End Testing?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.browserstack.com/guide/end-to-end-testing" target="_blank">What Is End-to-End Testing?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=wycIcpuLkzU&pp=ygUSZW5kIHRvIGVuZCB0ZXN0aW5n" target="_blank">End-to-End Testing</a>
</div>
</div>
</div><br><label class="pb-4">Tu vois d'autres skills à rajouter dans la catégorie Application Testing ?</label>
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input
type="hidden" name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Application Testing"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>
</div>
</div>
<div id="Frontend" data-step="6">
<div class="mb-5 px-2">
<div class="flex gap-1 items-center mb-2"><span><img alt="category-icon" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" src="/icons/skill_icon_fill.svg" style="color: transparent; width: auto;"></span>
<h3 class="text-base text-black-300 font-graphikSemibold">Frontend</h3>
</div>
<p class="text-[12px] leading-5 text-blue-400 font-graphikRegular">Partie visible et interactive d'une application ou d'un site web, directement accessible par les utilisateurs. Cela implique la conception, le développement et l'optimisation
de l'interface utilisateur, ainsi que la gestion des interactions utilisateur, des affichages de données et des fonctionnalités.</p>
</div><span class="flex justify-end gap-3 mb-4"><span class="flex"><img alt="never practiced radio button" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" class="pr-1" src="/icons/red-radio.svg"
style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Jamais pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy" width="16" height="16" decoding="async"
data-nimg="1" src="/icons/yellow-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Déjà pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy"
width="16" height="16" decoding="async" data-nimg="1" src="/icons/green-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Maîtrise</span></span></span>
<div class="flex flex-col w-full bg-gray-200 rounded-md py-4 pl-4 pr-5">
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Frontend.Framework/lib front.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Frontend.Framework/lib front.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Frontend.Framework/lib front.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Framework/lib front</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Framework/lib front" type="checkbox" class="hidden" name="Frontend.Framework/lib front.canMentor" disabled="" value="true" checked=""><label for="Framework/lib front"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto bg-green-100 !text-neutral-50 border-green-100"><img
alt="can-mentor-icon" loading="lazy" width="20" height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Un framework ou une bibliothèque frontend est un ensemble d'outils, de composants et de fonctionnalités préconçus qui facilitent le développement d'applications
web du côté client. Ils fournissent une structure et des fonctionnalités communes pour gérer l'interface utilisateur, les interactions, la gestion de l'état et d'autres aspects du développement web, permettant ainsi aux développeurs de
gagner du temps et de maintenir une cohérence dans leur code.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5"></div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Frontend.State Management.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Frontend.State Management.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Frontend.State Management.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">State Management</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La gestion de l'état en frontend fait référence à la façon dont les données sont stockées, mises à jour et synchronisées dans une application web côté client.
Elle permet de gérer les changements d'état de l'interface utilisateur, de maintenir la cohérence des données et de gérer les interactions dynamiques, en utilisant des techniques telles que les états locaux, les états globaux et les
flux de données unidirectionnels pour assurer une expérience utilisateur fluide et réactive.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5"></div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Frontend.Frontend build configuration.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Frontend.Frontend build configuration.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Frontend.Frontend build configuration.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Frontend build configuration</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Frontend build configuration" type="checkbox" class="hidden" name="Frontend.Frontend build configuration.canMentor" disabled="" value="true" checked=""><label for="Frontend build configuration"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto bg-green-100 !text-neutral-50 border-green-100"><img
alt="can-mentor-icon" loading="lazy" width="20" height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La configuration de build frontend (frontend build config) fait référence à la manière dont un projet frontend est configuré et construit. Cela comprend la
définition des outils, des paramètres et des processus nécessaires pour compiler, optimiser et préparer les fichiers frontend (tels que les fichiers HTML, CSS, JavaScript) en vue de les déployer et de les exécuter dans un environnement
de production.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5"></div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Frontend.Web performance.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Frontend.Web performance.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Frontend.Web performance.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Web performance</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Web performance" type="checkbox" class="hidden" name="Frontend.Web performance.canMentor" disabled="" value="true" checked=""><label for="Web performance"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto bg-green-100 !text-neutral-50 border-green-100"><img
alt="can-mentor-icon" loading="lazy" width="20" height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La web performance fait référence à la vitesse, à la réactivité et à l'efficacité d'un site web ou d'une application web. Elle englobe des aspects tels que le
temps de chargement des pages, la fluidité des interactions, l'utilisation optimisée des ressources et l'expérience utilisateur globale, avec pour objectif d'offrir une expérience rapide, fluide et engageante aux utilisateurs.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5"></div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Frontend.Lazy Loading.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Frontend.Lazy Loading.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Frontend.Lazy Loading.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Lazy Loading</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Lazy Loading" type="checkbox" class="hidden" name="Frontend.Lazy Loading.canMentor" disabled="" value="true" checked=""><label for="Lazy Loading"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto bg-green-100 !text-neutral-50 border-green-100"><img
alt="can-mentor-icon" loading="lazy" width="20" height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le lazy loading est une technique de chargement différé des ressources d'une page web. Il permet de charger uniquement les éléments visibles à l'écran au
chargement initial, puis de charger les autres éléments au fur et à mesure de leur nécessité, réduisant ainsi le temps de chargement initial et améliorant la performance globale de la page.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5"></div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Frontend.Micro-frontend architecture.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Frontend.Micro-frontend architecture.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Frontend.Micro-frontend architecture.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Micro-frontend architecture</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Micro-frontend architecture" type="checkbox" class="hidden" name="Frontend.Micro-frontend architecture.canMentor" disabled="" value="true" checked=""><label for="Micro-frontend architecture"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto bg-green-100 !text-neutral-50 border-green-100"><img
alt="can-mentor-icon" loading="lazy" width="20" height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les micro frontends sont une approche architecturale où une application web est décomposée en modules autonomes, chaque module étant développé, déployé et
maintenu indépendamment. Ils permettent d'intégrer et de gérer plusieurs équipes et technologies frontend distinctes au sein d'une même application, offrant ainsi une scalabilité, une flexibilité et une autonomie accrues.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5"></div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Frontend.CSS Techniques.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Frontend.CSS Techniques.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Frontend.CSS Techniques.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">CSS Techniques</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le style est un concept souvent sous-estimé mais pourtant indispensable. Les principales techniques qu'on dénombre sont: le box model, flexbox, grid, le
positionnement et les media queries.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5"></div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Frontend.Advanced CSS Animations.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Frontend.Advanced CSS Animations.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Frontend.Advanced CSS Animations.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Advanced CSS Animations</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les animations avancées CSS offrent la possibilité de créer des mouvements et des transitions complexes sans avoir recours à JavaScript, en utilisant des
concepts tels que les keyframes, les transformations et les transitions. Elles permettent une interactivité élégante sur le web, avec des effets comme le déplacement, la rotation, le redimensionnement, et le changement graduel des
couleurs, rendant les sites web plus vivants et interactifs.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5"></div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Frontend.SSR.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Frontend.SSR.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input name="Frontend.SSR.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">SSR</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le SSR (Server-Side Rendering) est une technique de rendu où le serveur génère le contenu HTML complet de chaque page en réponse à une demande du navigateur.
Cela permet d'envoyer une page prérendue au navigateur, facilitant ainsi un chargement initial plus rapide et une meilleure indexation par les moteurs de recherche. Si les SPA ont largement dominé, les frameworks poussent aujorud'hui à
choisir une granularité fine entre ce qui est rendu côté client et ce qui est rendu côté serveur, pour une meilleure optimisation des performances.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5"></div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Frontend.Accessibility.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Frontend.Accessibility.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Frontend.Accessibility.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Accessibility</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'accessibilité fait référence à la conception et à la mise en œuvre de sites web, d'applications et d'autres contenus numériques de manière à les rendre
utilisables par tous, y compris les personnes ayant des capacités différentes. Cela implique d'assurer l'accès équitable à l'information, à la fonctionnalité et à l'interaction, en tenant compte des besoins des utilisateurs ayant des
limitations visuelles, auditives, motrices ou cognitives.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5"></div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Frontend.Offline.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Frontend.Offline.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input name="Frontend.Offline.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Offline</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Offline" type="checkbox" class="hidden" name="Frontend.Offline.canMentor" disabled="" value="false"><label for="Offline"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto false"><img alt="can-mentor-icon" loading="lazy" width="20"
height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-gray-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La gestion du mode hors ligne dans le développement frontend web ou mobile se réfère à la conception et à la mise en œuvre de stratégies permettant à une
application de fonctionner même lorsque l'utilisateur n'a pas de connexion internet, en stockant des données localement et en synchronisant les changements lorsqu'une connexion est à nouveau disponible. Cela implique souvent
l'utilisation de technologies comme les Service Workers, les IndexedDB ou le LocalStorage pour le cache des ressources et la gestion des données en mode déconnecté.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5"></div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Frontend.Responsive.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Frontend.Responsive.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Frontend.Responsive.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Responsive</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Responsive" type="checkbox" class="hidden" name="Frontend.Responsive.canMentor" disabled="" value="true" checked=""><label for="Responsive"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto bg-green-100 !text-neutral-50 border-green-100"><img
alt="can-mentor-icon" loading="lazy" width="20" height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le responsive design se réfère à la conception de sites web de manière à ce qu'ils s'affichent correctement sur une variété d'appareils et de tailles d'écran, de
grands moniteurs d'ordinateurs de bureau aux petits écrans de smartphones.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5"></div>
</div>
</div><br><label class="pb-4">Tu vois d'autres skills à rajouter dans la catégorie Frontend ?</label>
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input
type="hidden" name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Frontend"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>
</div>
</div>
<div id="API_Design" data-step="7">
<div class="mb-5 px-2">
<div class="flex gap-1 items-center mb-2"><span><img alt="category-icon" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" src="/icons/skill_icon_fill.svg" style="color: transparent; width: auto;"></span>
<h3 class="text-base text-black-300 font-graphikSemibold">API Design</h3>
</div>
<p class="text-[12px] leading-5 text-blue-400 font-graphikRegular">La conception d'API (Application Programming Interface) fait référence à la création et à la définition des interfaces et des contrats d'une API pour faciliter l'interaction
entre différentes parties logicielles. Cela implique la conception de points d'entrée, de structures de données, de méthodes et de comportements cohérents, intuitifs et bien documentés afin de fournir une expérience utilisateur optimale et
une intégration facile pour les développeurs utilisant l'API.</p>
</div><span class="flex justify-end gap-3 mb-4"><span class="flex"><img alt="never practiced radio button" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" class="pr-1" src="/icons/red-radio.svg"
style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Jamais pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy" width="16" height="16" decoding="async"
data-nimg="1" src="/icons/yellow-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Déjà pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy"
width="16" height="16" decoding="async" data-nimg="1" src="/icons/green-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Maîtrise</span></span></span>
<div class="flex flex-col w-full bg-gray-200 rounded-md py-4 pl-4 pr-5">
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="API Design.REST API.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="API Design.REST API.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="API Design.REST API.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">REST API</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Une API REST (Representational State Transfer) est un style d'architecture de services web qui utilise les principes et les protocoles du web pour créer des
interfaces d'API. Elle utilise des méthodes HTTP standard telles que GET, POST, PUT, DELETE pour permettre aux clients de communiquer avec les ressources d'une application, en utilisant des représentations de données basées sur des
formats tels que JSON ou XML pour transférer les données. On préfère aujourd'hui le format JSON au XML.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://stackoverflow.blog/2020/03/02/best-practices-for-rest-api-design/" target="_blank">Best Practice for REST API Design</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.freecodecamp.org/news/how-to-use-rest-api/" target="_blank">How to use REST API</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://learn.microsoft.com/en-us/azure/architecture/best-practices/api-design" target="_blank">RESTful Web API Design</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="API Design.GraphQL APIs.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="API Design.GraphQL APIs.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="API Design.GraphQL APIs.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">GraphQL APIs</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">GraphQL est une alternative aux API REST qui offre des capacités plus flexibles et efficaces pour interroger et manipuler les données. Avec GraphQL, les clients
peuvent spécifier exactement quels champs ils veulent dans une seule requête, plutôt que de devoir faire plusieurs appels d'API pour obtenir toutes les informations requises. Cela peut aider à minimiser la quantité de données
transférées et à améliorer les performances.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.apollographql.com/blog/graphql/basics/graphql-vs-rest/" target="_blank">GraphQL vs REST</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.howtographql.com/" target="_blank">How to GraphQL</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://graphql.org/learn/" target="_blank">Introduction to GraphQL</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="API Design.Handling Errors.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="API Design.Handling Errors.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="API Design.Handling Errors.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Handling Errors</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La gestion des erreurs est une partie cruciale de la conception de l'API. Les erreurs peuvent se produire pour diverses raisons, telles que des erreurs de côté
client (par exemple, une requête mal formée), des erreurs de côté serveur (par exemple, une base de données en panne), ou des conditions d'erreur inattendues. Une bonne API devrait être conçue pour gérer ces erreurs de manière gracieuse
et informative, en fournissant suffisamment d'informations pour que le client puisse comprendre ce qui a mal tourné et comment résoudre le problème.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://nordicapis.com/best-practices-api-error-handling/" target="_blank">REST API Error Handling</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.apollographql.com/docs/apollo-server/data/errors/" target="_blank">Error Handling in GraphQL</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.toptal.com/rest/integration-guide-to-zen-api#heading-5" target="_blank">Effective API Error Handling</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="API Design.Authentication strategies.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="API Design.Authentication strategies.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="API Design.Authentication strategies.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Authentication strategies</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'authentification est un aspect essentiel de la sécurité des API. Il existe différentes stratégies d'authentification qui peuvent être utilisées dans la
conception des API, notamment l'authentification de base, l'authentification par jeton, l'authentification OAuth, et plus encore. Chacune a ses propres avantages et inconvénients, et le choix de la stratégie à utiliser dépend des
exigences spécifiques de l'application.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://auth0.com/blog/authenticating-and-authorizing-rest-apis/" target="_blank">Authentication and Authorization for RESTful APIs</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://dev.to/medaymentnai/understanding-the-basics-of-token-based-authentication-55a8" target="_blank">Understanding the basics of token-based authentication</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=996OiexHze0" target="_blank">OAuth 2.0 and OpenID Connect (in plain English)</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="API Design.Authorization strategy.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="API Design.Authorization strategy.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="API Design.Authorization strategy.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Authorization strategy</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Une stratégie d'autorisation d'API est une approche basée sur les ACL (Access Control Lists) qui définit les autorisations d'accès pour contrôler les actions des
utilisateurs ou des clients sur une API. Elle spécifie les règles et les restrictions d'accès attribuées à des utilisateurs ou à des groupes spécifiques, permettant ainsi de déterminer qui est autorisé à accéder à quelles ressources et
quelles actions sont autorisées pour chaque entité.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://auth0.com/intro-to-iam/what-is-authorization" target="_blank">What Is Authorization?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.sailpoint.com/identity-library/difference-between-authentication-and-authorization/" target="_blank">Differences between Authorization & Authentication</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=BQMp-HjAyCk&pp=ygUbYXV0aG9yaXphdGlvbiBhY2wgZXhwbGFpbmVk" target="_blank">AAA explained</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="API Design.API Gateway.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="API Design.API Gateway.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="API Design.API Gateway.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">API Gateway</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="API Gateway" type="checkbox" class="hidden" name="API Design.API Gateway.canMentor" disabled="" value="false"><label for="API Gateway"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto false"><img alt="can-mentor-icon" loading="lazy" width="20"
height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-gray-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Une API gateway est un composant centralisé qui agit comme point d'entrée unique pour les requêtes provenant de clients externes. Elle permet de gérer
l'authentification, l'autorisation, la transformation des données, la mise en cache et d'autres fonctionnalités communes liées aux API, facilitant ainsi la création, la gestion et la sécurisation des services API.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://grpc.io/" target="_blank">Official Docs</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=gnchfOojMk4&pp=ygUYZ3JwYyBleHBsYWluZWQgZXhwbGFpbmVk" target="_blank">gRPC introduction</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=u4LWEXDP7_M&pp=ygUYZ3JwYyBleHBsYWluZWQgZXhwbGFpbmVk" target="_blank">Why gRPC was invented</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="API Design.Handling CORS.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="API Design.Handling CORS.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="API Design.Handling CORS.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Handling CORS</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La gestion des CORS (Cross-Origin Resource Sharing) est un mécanisme de sécurité dans les navigateurs web qui contrôle les requêtes HTTP entre des origines
différentes. Elle permet aux ressources d'être partagées de manière contrôlée entre des domaines différents, en définissant les autorisations d'accès via les en-têtes HTTP, afin de prévenir les attaques d'injection de scripts et de
protéger la confidentialité des utilisateurs.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=4KHiSt0oLJ0&pp=ugMICgJmchABGAHKBRNjb21wcmVuZHJlIGxlcyBjb3Jz" target="_blank">CORS en 100 secondes</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=UjozQOaGt1k&pp=ygUddW5kZXJzdGFuZGluZyBjb3JzIHByaW5jaXBsZXM%3D" target="_blank">What is CORS ?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=t5FBwq-kudw&pp=ygUddW5kZXJzdGFuZGluZyBjb3JzIHByaW5jaXBsZXM%3D" target="_blank">Cross-Origin Resource Sharing (CORS) | Complete Guide</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="API Design.Idempotency.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="API Design.Idempotency.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="API Design.Idempotency.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Idempotency</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'idempotence est une propriété d'opérations dans les mathématiques et l'informatique où l'application multiple d'une opération ne change pas le résultat après
la première application. Par exemple, dans une requête HTTP, une opération est dite idempotente si envoyer la même requête plusieurs fois produit le même effet que l'envoyer une fois.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=I08syTslan8&pp=ugMICgJmchABGAHKBQtpZGVtcG90ZW5jeQ%3D%3D" target="_blank">What is API Idempotency and Why Is It Important?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=4OuaONkZw1I&pp=ugMICgJmchABGAHKBRhpZGVtcG90ZW50IG1pY3Jvc2VydmljZXM%3D" target="_blank">How Important Is Idempotency</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=J2IcD9FZvZU&pp=ygULaWRlbXBvdGVuY3k%3D" target="_blank">Idempotent API for Payments</a>
</div>
</div>
</div><br><label class="pb-4">Tu vois d'autres skills à rajouter dans la catégorie API Design ?</label>
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input
type="hidden" name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="API Design"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>
</div>
</div>
<div id="Data_Modeling" data-step="8">
<div class="mb-5 px-2">
<div class="flex gap-1 items-center mb-2"><span><img alt="category-icon" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" src="/icons/skill_icon_fill.svg" style="color: transparent; width: auto;"></span>
<h3 class="text-base text-black-300 font-graphikSemibold">Data Modeling</h3>
</div>
<p class="text-[12px] leading-5 text-blue-400 font-graphikRegular">La modélisation des données englobe différents aspects, de la conception du bon schéma de données au choix de la bonne base de données, en passant par des techniques
d'optimisation des performances.</p>
</div><span class="flex justify-end gap-3 mb-4"><span class="flex"><img alt="never practiced radio button" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" class="pr-1" src="/icons/red-radio.svg"
style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Jamais pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy" width="16" height="16" decoding="async"
data-nimg="1" src="/icons/yellow-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Déjà pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy"
width="16" height="16" decoding="async" data-nimg="1" src="/icons/green-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Maîtrise</span></span></span>
<div class="flex flex-col w-full bg-gray-200 rounded-md py-4 pl-4 pr-5">
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Data Modeling.Indexing.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Data Modeling.Indexing.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Data Modeling.Indexing.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Indexing</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'indexation consiste à créer des structures de données supplémentaires pour accélérer la recherche de données en créant des références rapides vers les
enregistrements correspondants, ce qui permet d'optimiser les opérations de recherche et de filtrage dans une base de données.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://dev.to/vishnuchilamakuru/mastering-database-indexing-a-comprehensive-guide-43p7" target="_blank">Mastering Database Indexing: A Comprehensive Guide</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://blog.bytebytego.com/p/database-indexing-strategies" target="_blank">Database Indexing Strategies Part I (ByteByteGo)</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://blog.bytebytego.com/p/database-indexing-strategies-part" target="_blank">Database Indexing Strategies Part II (ByteByteGo)</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Data Modeling.Normalization.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Data Modeling.Normalization.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Data Modeling.Normalization.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Normalization</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La normalisation est un processus de conception de bases de données qui vise à minimiser la redondance des données en les organisant en tables bien structurées,
ce qui améliore l'intégrité, la cohérence et l'efficacité des opérations de lecture et d'écriture.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=GFQaEYEc8_8" target="_blank">Learn Database Normalization</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.studytonight.com/dbms/database-normalization.php" target="_blank">Database Normalization</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=xoTyrdT9SZI&t=1s" target="_blank">Basic Concept of Database Normalization</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Data Modeling.Partitioning.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Data Modeling.Partitioning.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Data Modeling.Partitioning.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Partitioning</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le partitionnement consiste à diviser une table en sous-ensembles plus petits (partitions) pour répartir les données sur plusieurs disques ou serveurs, ce qui
améliore les performances en réduisant les temps d'accès aux données et en augmentant la capacité de traitement parallèle.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.cockroachlabs.com/blog/what-is-data-partitioning-and-how-to-do-it-right/#:~:text=Database%20partitioning%20(also%20called%20data,%2C%20accessed%2C%20and%20managed%20separately." target="_blank">What is data partitioning, and how to do it right</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://questdb.io/glossary/database-partitioning/" target="_blank">What Is Database Partitioning?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=wXvljefXyEo" target="_blank">Database Sharding and Partitioning</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Data Modeling.Query Optimization.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Data Modeling.Query Optimization.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Data Modeling.Query Optimization.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Query Optimization</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'optimisation des requêtes implique l'analyse et l'ajustement des requêtes SQL pour améliorer leur performance en choisissant les bons index, en évitant les
opérations coûteuses, en utilisant les meilleures pratiques de formulation de requêtes et en optimisant les plans d'exécution.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://sql.sh/optimisation" target="_blank">SQL Optimisation</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.thoughtspot.com/data-trends/data-modeling/optimizing-sql-queries" target="_blank">12 ways to optimize SQL queries for cloud databases</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=BHwzDmr6d7s" target="_blank">Secret To Optimizing SQL Queries - Understand The SQL Execution Order</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Data Modeling.Cache.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Data Modeling.Cache.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Data Modeling.Cache.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Cache</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'utilisation d'un cache de données en mémoire permet de stocker les résultats de requêtes fréquemment utilisées, ce qui réduit les accès à la base de données et
améliore les temps de réponse en fournissant des données précalculées et rapidement accessibles.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=dGAgxozNWFE" target="_blank">Cache Systems Every Developer Should Know</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=bP4BeUjNkXc" target="_blank">How does Caching on the Backend work?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://medium.com/@mmoshikoo/cache-strategies-996e91c80303" target="_blank">Cache Strategies</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Data Modeling.SQL.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Data Modeling.SQL.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Data Modeling.SQL.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">SQL</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="SQL" type="checkbox" class="hidden" name="Data Modeling.SQL.canMentor" disabled="" value="false"><label for="SQL"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto false"><img alt="can-mentor-icon" loading="lazy" width="20"
height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-gray-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le SQL est un langage de programmation utilisé pour interagir avec les bases de données relationnelles. Il permet d'effectuer des opérations telles que la
création, la modification et la récupération de données en utilisant des commandes telles que SELECT, INSERT, UPDATE et DELETE, facilitant ainsi la gestion et la manipulation des données dans les systèmes de bases de données, ainsi que
le filtre précis des données grâce aux commandes de type WHERE, LIMIT, HAVING, GROUP BY, ORDER.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.sqlzoo.net/wiki/SQL_Tutorial" target="_blank">SQL Zoo</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://medium.com/dp6-us-blog/7-advanced-sql-concepts-you-need-to-know-45fa149ba0b0" target="_blank">7 Advanced SQL Concepts You Need to Know</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=_BvLk3J8nkY" target="_blank">Advanced SQL Tutorial</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Data Modeling.Document based DB.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Data Modeling.Document based DB.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Data Modeling.Document based DB.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Document based DB</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Une base de données basée sur des documents, ou Document based Database, est un type de base de données non relationnelle conçue pour stocker, récupérer et gérer
des informations orientées document, généralement structurées en format JSON, BSON, XML, etc. Ces bases de données offrent une grande flexibilité en permettant de stocker des données qui ont des structures différentes et en facilitant
le stockage et la récupération de données semi-structurées.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=nigPkP6QeTk" target="_blank">NoSQL Document Database Explained</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=-bt_y4Loofg" target="_blank">MongoDB in 100 Seconds</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.predictiveanalyticstoday.com/top-nosql-document-databases/" target="_blank">Top 12 NoSQL Document Database</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Data Modeling.Graph DB.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Data Modeling.Graph DB.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Data Modeling.Graph DB.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Graph DB</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Une base de données orientée graphe, ou GraphDB, est un type de base de données NoSQL qui utilise la théorie des graphes pour stocker, mapper et interroger les
relations. Les données sont stockées sous forme de nœuds (les entités) et d'arêtes (les relations), ce qui permet des requêtes complexes sur les relations profondes entre les données de manière performante.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.datacamp.com/blog/what-is-a-graph-database" target="_blank">What is a Graph Database ? A Beginner's Guide</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=OzDG68VvPxY" target="_blank">Graph Database in 100 Seconds</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.predictiveanalyticstoday.com/top-graph-databases/" target="_blank">Top Graph Databases</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Data Modeling.Key-value store.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Data Modeling.Key-value store.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Data Modeling.Key-value store.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Key-value store</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Un 'Key-Value Store' est un type de base de données non-relationnelle qui stocke les données sous forme de paires clé-valeur, où la clé est unique et permet
d'accéder rapidement à la valeur associée. Ces systèmes sont souvent utilisés pour des applications nécessitant de hautes performances ou des volumes de données importants en raison de leur simplicité et de leur capacité à gérer
efficacement des opérations de lecture et d'écriture.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=qyP7fZgdnwY&list=PL1MM4yIzUdPm2L_Lz8gRa_q6ZElgNoArH" target="_blank">Design a Key Value Store (playlist)</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.educative.io/courses/grokking-modern-system-design-interview-for-engineers-managers/system-design-the-key-value-store" target="_blank">The Key-value Store</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://thectoclub.com/tools/best-key-value-database/" target="_blank">The 27 Best Key Value Database of 2024</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Data Modeling.Relational DB.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Data Modeling.Relational DB.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Data Modeling.Relational DB.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Relational DB</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Une base de données relationnelle (Relational Database) est un type de base de données qui organise les données en tables interconnectées, où chaque ligne
représente un enregistrement unique et chaque colonne représente un champ de cet enregistrement. Les relations entre les tables sont définies par des clés primaires et étrangères, permettant des requêtes complexes et garantissant
l'intégrité des données grâce à des contraintes et des règles définies.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=OqjJjpjDRLc" target="_blank">What is a Relational Database?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.reddit.com/r/dotnet/comments/v3w49x/what_relational_db_to_use/" target="_blank">What relational DB to use? (Reddit Thread)</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://thectoclub.com/tools/best-relational-database-software/" target="_blank">Exploring the 28 Best Relational Database Software of 2024</a>
</div>
</div>
</div><br><label class="pb-4">Tu vois d'autres skills à rajouter dans la catégorie Data Modeling ?</label>
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input
type="hidden" name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Data Modeling"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>
</div>
</div>
<div id="System_Design_&_Architecture" data-step="9">
<div class="mb-5 px-2">
<div class="flex gap-1 items-center mb-2"><span><img alt="category-icon" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" src="/icons/skill_icon_fill.svg" style="color: transparent; width: auto;"></span>
<h3 class="text-base text-black-300 font-graphikSemibold">System Design & Architecture</h3>
</div>
<p class="text-[12px] leading-5 text-blue-400 font-graphikRegular">Processus de création d'une structure efficace pour un système logiciel, en définissant les composants, les interactions et les choix de conception. L'objectif est de créer un
système robuste, évolutif et performant, répondant aux besoins spécifiés et favorisant la maintenabilité.</p>
</div><span class="flex justify-end gap-3 mb-4"><span class="flex"><img alt="never practiced radio button" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" class="pr-1" src="/icons/red-radio.svg"
style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Jamais pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy" width="16" height="16" decoding="async"
data-nimg="1" src="/icons/yellow-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Déjà pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy"
width="16" height="16" decoding="async" data-nimg="1" src="/icons/green-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Maîtrise</span></span></span>
<div class="flex flex-col w-full bg-gray-200 rounded-md py-4 pl-4 pr-5">
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="System Design & Architecture.Clean Architecture.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="System Design & Architecture.Clean Architecture.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="System Design & Architecture.Clean Architecture.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Clean Architecture</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La Clean Architecture est un style d'architecture logicielle qui favorise la séparation des préoccupations en organisant le code en couches concentriques, avec
le domaine métier au centre et des couches externes indépendantes des détails techniques. Elle vise à obtenir une conception modulaire, testable et maintenable en appliquant des principes tels que la dépendance inversée et
l'indépendance des frameworks.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html" target="_blank">L'article original de Uncle Bob</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=ecIWPzGEbFc&ab_channel=PaulStringer%27sMobileTech" target="_blank">The Future of Programming</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=CnailTcJV_U&ab_channel=DevMastery" target="_blank">Using Clean Architecture for Microservice APIs</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="System Design & Architecture.Architecture Hexagonale.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="System Design & Architecture.Architecture Hexagonale.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="System Design & Architecture.Architecture Hexagonale.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Architecture Hexagonale</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'Architecture Hexagonale, également connue sous le nom de Ports and Adapters (Ports et Adaptateurs), met l'accent sur la découpe des applications en domaines et
en couches distinctes. Elle promeut l'idée que le cœur de l'application, le domaine métier, doit être isolé et indépendant des détails techniques tels que les frameworks et les technologies externes. Les adaptateurs sont utilisés pour
connecter le cœur de l'application avec les éléments externes, tels que les interfaces utilisateurs ou les bases de données.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://thetribe.io/glossaire-architecture-hexagonale-clean-architecture/" target="_blank">Glossaire Architecture Hexagonale</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://blog.octo.com/architecture-hexagonale-trois-principes-et-un-exemple-dimplementation/" target="_blank">Architecture Hexagonale : 3 principes et un exemple d’implémentation</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://medium.com/ssense-tech/hexagonal-architecture-there-are-always-two-sides-to-every-story-bc0780ed7d9c" target="_blank">There Are Always Two Sides To Every Story</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="System Design & Architecture.DDD.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="System Design & Architecture.DDD.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="System Design & Architecture.DDD.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">DDD</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le DDD (Domain-Driven Design) est une approche de conception logicielle qui met l'accent sur la modélisation du domaine métier au cœur du développement. Il
encourage une compréhension approfondie du domaine, une collaboration étroite entre experts du domaine et développeurs, et la création de modèles riches et expressifs pour résoudre les problèmes complexes liés au domaine.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=pMuiVlnGqjk&pp=ygUNZGRkIGV4cGxhaW5lZA%3D%3D" target="_blank">What Is DDD by Eric Evans</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://learn.microsoft.com/en-us/archive/msdn-magazine/2009/february/best-practice-an-introduction-to-domain-driven-design" target="_blank">An Introduction to DDD</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://medium.com/microtica/the-concept-of-domain-driven-design-explained-3184c0fd7c3f" target="_blank">Concepts of Domain Driven Design</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="System Design & Architecture.CQRS.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="System Design & Architecture.CQRS.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="System Design & Architecture.CQRS.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">CQRS</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">CQRS (Command Query Responsibility Segregation) est un modèle architectural qui préconise la séparation des opérations de lecture (queries) et d'écriture
(commands) dans les systèmes logiciels. Il propose d'avoir des modèles de conception distincts pour la modification des données et la récupération des données, permettant une meilleure évolutivité, une optimisation des performances et
une conception plus claire des systèmes.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=EkEz3pcLdgY&ab_channel=UPM" target="_blank">CQRS Global Introduction by Udi Dahan</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://udidahan.com/2009/12/09/clarified-cqrs/" target="_blank">Clarified CQRS</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=Lw04HRF8ies" target="_blank">CQRS Pitfalls and Patterns</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="System Design & Architecture.Microservices.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="System Design & Architecture.Microservices.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="System Design & Architecture.Microservices.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Microservices</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'architecture en microservices est un style d'architecture logicielle dans lequel une application est décomposée en plusieurs services autonomes et
indépendants, appelés microservices. Chaque microservice est conçu pour effectuer une fonction spécifique, communique généralement via des API et peut être déployé et mis à l'échelle de manière indépendante, favorisant ainsi la
flexibilité, la scalabilité et la résilience des applications distribuées.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://microservices.io/" target="_blank">What are Microservices</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://aws.amazon.com/microservices/" target="_blank">Microservices by AWS</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=lTAcCNbJ7KE" target="_blank">What Are Microservices Really All About</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="System Design & Architecture.Modular Monolith.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="System Design & Architecture.Modular Monolith.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="System Design & Architecture.Modular Monolith.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Modular Monolith</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Un monolithe modulaire fait référence à une architecture monolithique où le code est organisé de manière modulaire pour faciliter la maintenance, la
compréhension et la réutilisation du code. Bien que le monolithe lui-même ne soit pas divisé en services distincts, les modules internes sont conçus pour être indépendants et interagissent à travers des interfaces claires, permettant
une certaine séparation des préoccupations et une meilleure gestion du code à l'intérieur du monolithe.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=5OjqD-ow8GE&ab_channel=GOTOConferences" target="_blank">Modular Monolith by Simon Brown</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://m.signalvnoise.com/the-majestic-monolith/" target="_blank">The Majestic Monolith by DHH</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://world.hey.com/dhh/how-to-recover-from-microservices-ce3803cc" target="_blank">How To Recover From Microservices</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="System Design & Architecture.Caching strategies.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="System Design & Architecture.Caching strategies.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="System Design & Architecture.Caching strategies.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Caching strategies</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Une stratégie de mise en cache (caching) est une approche pour améliorer les performances et réduire la charge d'un système en stockant temporairement les
résultats de certaines opérations coûteuses. Elle consiste à enregistrer les données ou les résultats calculés dans un cache, généralement basé sur la mémoire, afin de les récupérer plus rapidement lors de demandes ultérieures. Les
stratégies de mise en cache incluent la gestion du cycle de vie du cache, l'invalidation des données obsolètes, la détermination de la durée de conservation des données en cache, ainsi que la gestion des politiques d'éviction pour
garantir une utilisation efficace et pertinente du cache.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://blog.bytebytego.com/p/top-caching-strategies" target="_blank">Top Caching Strategies</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://medium.com/outbrain-engineering/caching-strategies-in-high-throughput-systems-733189e62a4d" target="_blank">Caching Strategies in High Throughput Systems</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=ZCVgDKjtgl0&pp=ygUSY2FjaGluZyBzdHJhdGVnaWVz" target="_blank">Choosing The Right Caching Strategies</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="System Design & Architecture.Event Driven Architecture.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="System Design & Architecture.Event Driven Architecture.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="System Design & Architecture.Event Driven Architecture.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Event Driven Architecture</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'architecture orientée événements (Event-Driven Architecture) est un style d'architecture logicielle dans lequel les composants communiquent entre eux par le
biais d'événements. Les événements, qui peuvent être des actions, des notifications ou des changements de statut, sont émis par les producteurs et consommés par les récepteurs de manière asynchrone. Cela permet un découplage des
composants, une extensibilité et une réactivité accrues, ainsi qu'une meilleure gestion des flux de données et des interactions entre les différentes parties du système.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=STKCRSUsyP0&pp=ygUUcHViIHN1YiBhcmNoaXRlY3R1cmU%3D" target="_blank">The Many Meanings Of Event Driven Architecture by M.Fowler</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://herbertograca.com/2017/10/05/event-driven-architecture/" target="_blank">Event Driven Architecture</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=LHgCA3XVNkw&ab_channel=ExecuteAutomation" target="_blank">Understanding The Basics</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="System Design & Architecture.Pub/sub architecture.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="System Design & Architecture.Pub/sub architecture.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="System Design & Architecture.Pub/sub architecture.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Pub/sub architecture</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La pub/sub (publication/abonnement) est un modèle d'architecture où les producteurs publient des messages ou des événements sur un canal central, et les
consommateurs s'abonnent à ces canaux pour recevoir les messages pertinents. Cela permet une communication décentralisée et asynchrone, où les producteurs et les consommateurs ne sont pas directement couplés, offrant ainsi une grande
extensibilité et une meilleure scalabilité.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=O1PgqUqZKTA&pp=ugMICgJmchABGAHKBRRwdWIgc3ViIGFyY2hpdGVjdHVyZQ%3D%3D" target="_blank">Architecture Pub/Sub par l'exemple</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.redhat.com/architect/pub-sub-pros-and-cons" target="_blank">The Pros & Cons of the Pub/Sub Architecture</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://cloud.google.com/pubsub/architecture" target="_blank">Architectural Overview of Pub/Sub</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="System Design & Architecture.Messaging Queues.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="System Design & Architecture.Messaging Queues.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="System Design & Architecture.Messaging Queues.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Messaging Queues</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les files d'attente de messages sont des structures de données qui permettent la communication asynchrone entre les composants d'un système distribué en stockant
temporairement les messages émis par les producteurs jusqu'à ce qu'ils soient consommés par les destinataires. Cela permet une déconnexion temporelle entre les producteurs et les consommateurs, favorisant ainsi une meilleure gestion des
charges, une résilience accrue et une évolutivité du système.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=5-Rq4-PZlew" target="_blank">Message Queue Explained</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.freecodecamp.org/news/message-queues-in-distributed-systesms/" target="_blank">How Message Queues Work In Distributed Systems</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=r5byURobuaQ&pp=ugMICgJmchABGAHKBRltZXNzYWdlIHF1ZXVlcyBleHBsYWluZWQg" target="_blank">Microservices & Message Queues</a>
</div>
</div>
</div><br><label class="pb-4">Tu vois d'autres skills à rajouter dans la catégorie System Design & Architecture ?</label>
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input
type="hidden" name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="System Design & Architecture"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>
</div>
</div>
<div id="Cloud_Infrastructure_&_Network" data-step="10">
<div class="mb-5 px-2">
<div class="flex gap-1 items-center mb-2"><span><img alt="category-icon" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" src="/icons/skill_icon_fill.svg" style="color: transparent; width: auto;"></span>
<h3 class="text-base text-black-300 font-graphikSemibold">Cloud Infrastructure & Network</h3>
</div>
<p class="text-[12px] leading-5 text-blue-400 font-graphikRegular">L'infrastructure cloud désigne l'ensemble des ressources informatiques et des services mis à disposition via Internet pour permettre l'hébergement, le stockage et l'exécution
d'applications et de services. Elle offre une flexibilité, une évolutivité et une accessibilité accrues par rapport à l'infrastructure traditionnelle sur site, permettant aux utilisateurs de provisionner et de gérer des ressources à la
demande.</p>
</div><span class="flex justify-end gap-3 mb-4"><span class="flex"><img alt="never practiced radio button" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" class="pr-1" src="/icons/red-radio.svg"
style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Jamais pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy" width="16" height="16" decoding="async"
data-nimg="1" src="/icons/yellow-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Déjà pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy"
width="16" height="16" decoding="async" data-nimg="1" src="/icons/green-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Maîtrise</span></span></span>
<div class="flex flex-col w-full bg-gray-200 rounded-md py-4 pl-4 pr-5">
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Cloud Infrastructure & Network.Docker.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Cloud Infrastructure & Network.Docker.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Cloud Infrastructure & Network.Docker.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Docker</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Docker est une plateforme open-source qui facilite la création, le déploiement et l'exécution d'applications dans des conteneurs légers et isolés. Ses principaux
concepts comprennent les images, qui sont des modèles de conteneurs préconfigurés, et les conteneurs, qui sont des instances exécutables d'images, offrant une portabilité, une flexibilité et une efficacité dans le déploiement
d'applications.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://docs.docker.com/get-started/overview/" target="_blank">Official Documentation & Getting Started</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.freecodecamp.org/news/docker-simplified-96639a35ff36/" target="_blank">Docker Simplified</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=3N3n9FzebAA&ab_channel=dotconferences" target="_blank">Why We Build Docker - Solomon Hykes</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Cloud Infrastructure & Network.Infrastructure as Code.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Cloud Infrastructure & Network.Infrastructure as Code.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Cloud Infrastructure & Network.Infrastructure as Code.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Infrastructure as Code</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'infrastructure as code (IaC) est une pratique de gestion de l'infrastructure informatique en utilisant des fichiers de configuration et de scripts en YAML le
plus souvent, pour décrire et provisionner les ressources d'infrastructure de manière automatisée. Cela permet de traiter l'infrastructure comme du code, facilitant la gestion, la reproductibilité et l'évolutivité de l'infrastructure,
tout en réduisant les erreurs humaines et en favorisant la collaboration.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.digitalocean.com/community/conceptual-articles/infrastructure-as-code-explained" target="_blank">Infrastructure As Code Explained</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.atlassian.com/microservices/cloud-computing/infrastructure-as-code" target="_blank">IaC</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=EtEb40LE5zQ&t=45s&pp=ygUWaW5mcmFzdHJ1Y3R1cmUgYXMgY29kZQ%3D%3D" target="_blank">Infrastructure As Code Crash Course</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Cloud Infrastructure & Network.Orchestration.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Cloud Infrastructure & Network.Orchestration.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Cloud Infrastructure & Network.Orchestration.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Orchestration</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">L'orchestration de conteneurs est le processus de gestion automatisée et de coordination des conteneurs au sein d'un environnement informatique, en veillant à ce
que les conteneurs soient déployés, équilibrés, échelonnés et connectés de manière efficace et cohérente. Cela permet une gestion simplifiée des applications conteneurisées, en maximisant la disponibilité, la résilience et les
performances du système.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=kBF6Bvth0zw&pp=ygUhY29udGFpbmVyIG9yY2hlc3RyYXRpb24gZXhwbGFpbmVk" target="_blank">Container Orchestration Explained</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://hackernoon.com/kubernetes-vs-docker-swarm-a-comprehensive-comparison-73058543771e" target="_blank">Kubernetes vs Docker Swarm — A Comprehensive Comparison</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=9_s3h_GVzZc&pp=ygUhY29udGFpbmVyIG9yY2hlc3RyYXRpb24gZXhwbGFpbmVk" target="_blank">Docker vs Kubernetes vs Docker Swarm</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Cloud Infrastructure & Network.Public cloud provider management.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Cloud Infrastructure & Network.Public cloud provider management.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Cloud Infrastructure & Network.Public cloud provider management.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Public cloud provider management</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La gestion des fournisseurs de cloud public (public cloud provider management) fait référence à l'ensemble des activités et des processus liés à la gestion et à
l'utilisation efficace des services et des ressources fournis par un prestataire de services de cloud public, tels que Amazon Web Services (AWS), Microsoft Azure, Google Cloud Platform (GCP) ou d'autres. Cela implique la configuration,
la surveillance, l'optimisation des coûts, la sécurité et la gouvernance des services cloud pour répondre aux besoins de l'entreprise.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=KaCyfQ7luVY&pp=ygUhcHVibGljIGNsb3VkIG1hbmFnZW1lbnQgZXhwbGFpbmVk" target="_blank">Public Cloud Explained</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=ax509cOCKfs&pp=ygUhcHVibGljIGNsb3VkIG1hbmFnZW1lbnQgZXhwbGFpbmVk" target="_blank">Cloud Management Explained</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=AjtdZ3gFRjU&pp=ygUhcHVibGljIGNsb3VkIG1hbmFnZW1lbnQgZXhwbGFpbmVk" target="_blank">What Is Multicloud ?</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Cloud Infrastructure & Network.CD Pipelines.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Cloud Infrastructure & Network.CD Pipelines.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Cloud Infrastructure & Network.CD Pipelines.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">CD Pipelines</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Une pipeline de déploiement continu (CD pipeline) est un ensemble d'étapes automatisées qui permettent de livrer, tester et déployer de manière continue des
applications logicielles. Elle comprend généralement des phases telles que la compilation, les tests automatisés, la construction des artefacts, le déploiement sur des environnements de test et de production, ainsi que la gestion des
versions et des configurations, offrant ainsi une approche automatisée et cohérente pour livrer rapidement et de manière fiable des logiciels.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.atlassian.com/continuous-delivery/principles/pipeline" target="_blank">Continuous Delivery Pipeline 101</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://circleci.com/blog/what-is-a-ci-cd-pipeline/" target="_blank">What is A CI/CD Pipeline ?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://gcloud.devoteam.com/blog/setting-up-a-ci-cd-pipeline-from-scratch/" target="_blank">Setting up a CI/CD Pipeline from scratch</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Cloud Infrastructure & Network.Terminal / Shell.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Cloud Infrastructure & Network.Terminal / Shell.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Cloud Infrastructure & Network.Terminal / Shell.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Terminal / Shell</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Terminal / Shell" type="checkbox" class="hidden" name="Cloud Infrastructure & Network.Terminal / Shell.canMentor" disabled="" value="false"><label for="Terminal / Shell"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto false"><img alt="can-mentor-icon" loading="lazy" width="20"
height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-gray-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Bash (Bourne Again Shell) est un interpréteur de commandes en ligne de commande, ou shell, populaire sur les systèmes d'exploitation Unix et Linux, qui permet
aux utilisateurs de donner des instructions à leur système d'exploitation par le biais de commandes textuelles. Le terminal, parfois aussi appelé console ou interface en ligne de commande, est l'outil qui permet aux utilisateurs
d'interagir avec le shell, généralement en tapant des commandes et en recevant des réponses sous forme de texte.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.learnshell.org/" target="_blank">Learn Shell</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.freecodecamp.org/news/command-line-for-beginners/" target="_blank">Command Line For Beginners</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.learnenough.com/command-line-tutorial" target="_blank">Learn Enough Command Line To Be Dangerous (Ch.1)</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Cloud Infrastructure & Network.SSH.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Cloud Infrastructure & Network.SSH.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Cloud Infrastructure & Network.SSH.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">SSH</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="SSH" type="checkbox" class="hidden" name="Cloud Infrastructure & Network.SSH.canMentor" disabled="" value="false"><label for="SSH"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto false"><img alt="can-mentor-icon" loading="lazy" width="20"
height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-gray-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">SSH (Secure Shell) est un protocole de réseau cryptographique qui permet aux utilisateurs de se connecter de manière sécurisée à un ordinateur distant,
généralement sur un réseau non sécurisé, en fournissant une méthode d'authentification forte et en chiffrant les données échangées. Il est couramment utilisé pour l'administration à distance de systèmes, le transfert de fichiers et
l'exécution de commandes sur des machines distantes.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=hQWRp-FdTpc&ab_channel=TraversyMedia" target="_blank">SSH Crash Course</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.digitalocean.com/community/tutorials/how-to-use-ssh-to-connect-to-a-remote-server-fr" target="_blank">Utiliser SSH pour se connecter à un serveur distant</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.hostinger.com/tutorials/ssh-tutorial-how-does-ssh-work" target="_blank">Understanding Encryption, Ports and Connection</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Cloud Infrastructure & Network.Server Configuration.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input
name="Cloud Infrastructure & Network.Server Configuration.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Cloud Infrastructure & Network.Server Configuration.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Server Configuration</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La configuration de serveur est le processus qui consiste à définir et à ajuster les paramètres et les options d'un serveur afin de l'optimiser pour des
performances, une sécurité, ou une fonctionnalité spécifique. Cela peut impliquer la gestion des logiciels serveur, l'installation et la mise à jour des systèmes d'exploitation, le paramétrage du réseau, la gestion des utilisateurs et
des permissions, ainsi que l'implémentation de protocoles de sécurité.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.microfocus.com/documentation/starteam/163/en/Help/SvrAdmin/STARTEAM-B7878496-GSSERVERCONFIGOV-CON.html" target="_blank">Server Configuration Overview</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=mhTeIt8lZGw&pp=ygUec2VydmVyIGNvbmZpZ3VyYXRpb24gZXhwbGFpbmVk" target="_blank">Top 20 Server Types & Functions</a>
</div>
</div>
</div><br><label class="pb-4">Tu vois d'autres skills à rajouter dans la catégorie Cloud Infrastructure & Network ?</label>
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input
type="hidden" name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Cloud Infrastructure & Network"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>
</div>
</div>
<div id="Observability" data-step="11">
<div class="mb-5 px-2">
<div class="flex gap-1 items-center mb-2"><span><img alt="category-icon" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" src="/icons/skill_icon_fill.svg" style="color: transparent; width: auto;"></span>
<h3 class="text-base text-black-300 font-graphikSemibold">Observability</h3>
</div>
<p class="text-[12px] leading-5 text-blue-400 font-graphikRegular">L'observabilité est une pratique de développement logiciel qui vise à rendre un système compréhensible et diagnostiquable en temps réel. Cela implique la collecte, la
surveillance et l'analyse des données liées aux performances, à l'état et au comportement du système. L'objectif de l'observabilité est de permettre aux développeurs et aux équipes opérationnelles d'identifier rapidement les problèmes, de
déboguer les erreurs et d'améliorer les performances du système.</p>
</div><span class="flex justify-end gap-3 mb-4"><span class="flex"><img alt="never practiced radio button" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" class="pr-1" src="/icons/red-radio.svg"
style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Jamais pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy" width="16" height="16" decoding="async"
data-nimg="1" src="/icons/yellow-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Déjà pratiqué</span></span><span class="flex"><img alt="already practiced radio button" loading="lazy"
width="16" height="16" decoding="async" data-nimg="1" src="/icons/green-radio.svg" style="color: transparent;"><span class="font-graphikLightMedium text-[10px] font-light">Maîtrise</span></span></span>
<div class="flex flex-col w-full bg-gray-200 rounded-md py-4 pl-4 pr-5">
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Observability.RUM.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Observability.RUM.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Observability.RUM.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">RUM</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">RUM (Real User Monitoring) est une méthode de surveillance qui collecte et analyse des données en temps réel sur les interactions des utilisateurs avec une
application web ou un site web. Il fournit des informations précieuses sur les performances, la convivialité et l'expérience utilisateur réelle, permettant ainsi d'optimiser et d'améliorer la qualité de l'application ou du site.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://habr.com/en/articles/737508/" target="_blank">Real User Metrics - Mozilla</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.uptrends.fr/qu-est-ce-que/real-user-monitoring" target="_blank">Qu'est ce que le RUM ?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://github.com/open-telemetry/oteps/issues/169" target="_blank">Supporting RUM In OpenTelemetry (Proposal)</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Observability.Disk Memory / RAM.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Observability.Disk Memory / RAM.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Observability.Disk Memory / RAM.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Disk Memory / RAM</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">La gestion de la mémoire disque et de la mémoire vive (RAM) en observabilité consiste à surveiller et analyser les métriques relatives à l'utilisation de
l'espace disque et de la mémoire par un système informatique. Cela permet de détecter les problèmes de saturation, de planifier les besoins en ressources et de prendre des mesures pour optimiser l'efficacité et la stabilité du système.
</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://habr.com/en/articles/737508/" target="_blank">Monitoring CPU/RAM/disk metrics with OpenTelemetry</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://sematext.com/glossary/memory-bottleneck/" target="_blank">What is a Memory Bottleneck ?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://raygun.com/blog/memory-leak-detection/" target="_blank">Memory Leak Detection</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Observability.Logging.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Observability.Logging.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Observability.Logging.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Logging</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les logs sont des enregistrements chronologiques des événements et des actions se produisant dans un système. Ils fournissent des informations détaillées sur
l'état et le comportement du système, et sont utilisés pour le débogage, la surveillance et l'analyse des problèmes.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://medium.com/@surfd1001/things-to-know-about-observability-mechanisms-a52876e421c7" target="_blank">Observability : Logs vs Traces vs Metrics!</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://devcenter.heroku.com/articles/writing-best-practices-for-application-logs" target="_blank">Writing Best Practices For Application Logs</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://medium.com/israeli-tech-radar/logging-best-practices-e26d0a3e2697" target="_blank">Logging Best Practices</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Observability.Tracing.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Observability.Tracing.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Observability.Tracing.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Tracing</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le tracing (ou suivi) est une technique qui permet de suivre le parcours d'une requête ou d'une transaction à travers un système distribué. Il permet de
visualiser et d'analyser les temps de traitement, les délais et les interactions entre les différents composants du système.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://coralogix.com/blog/what-is-tracing-everything-to-know/" target="_blank">Distributed Tracing: Everything You Need To Know</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.sumologic.com/blog/the-role-of-apm-and-distributed-tracing-in-observability/" target="_blank">The role of APM and distributed tracing in observability</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=idDu_jXqf4E&pp=ygUTZGlzdHJpYnV0ZWQgdHJhY2luZw%3D%3D" target="_blank">Intro To Tracing: OpenTelemetry & Opentracing</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Observability.Monitoring.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Observability.Monitoring.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Observability.Monitoring.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Monitoring</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Monitoring" type="checkbox" class="hidden" name="Observability.Monitoring.canMentor" disabled="" value="false"><label for="Monitoring"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto false"><img alt="can-mentor-icon" loading="lazy" width="20"
height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-gray-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Le monitoring est le processus de collecte, de surveillance et d'analyse continue des métriques et des données relatives à un système ou à une application, afin
de détecter les anomalies, de surveiller les performances, d'identifier les problèmes potentiels et de prendre des mesures pour assurer le bon fonctionnement et l'optimisation du système.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=rL33J-X9_u0&pp=ygUYb2JzZXJ2YWJpbGl0eSBtb25pdG9yaW5n" target="_blank">How is monitoring different than observability?</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://signoz.io/blog/observability-vs-monitoring/" target="_blank">Observability vs Monitoring - The difference explained with an example</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://newrelic.com/resources/ebooks/3-phased-approach-to-observability" target="_blank">A Three-Phased Approach to Observability</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Observability.Alerting.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Observability.Alerting.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Observability.Alerting.proficiencyLevel" type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100"
value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Alerting</h6>
<div class="mr-8">
<div class="flex flex-col"><input id="Alerting" type="checkbox" class="hidden" name="Observability.Alerting.canMentor" disabled="" value="false"><label for="Alerting"
class="cursor-pointer px-5 py-1 gap-2 border border-gray-100 text-gray-100 flex justify-center items-center font-graphikMedium rounded-lg text-xs md:text-sm mx-auto false"><img alt="can-mentor-icon" loading="lazy" width="20"
height="16" decoding="async" data-nimg="1" src="/icons/graduation-hat-gray-02.svg" style="color: transparent;">
<div class="hidden md:block">Peut Mentorer</div>
<div class="block md:hidden">Mentor</div>
</label></div>
</div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les alertes sont des notifications déclenchées lorsqu'un événement ou une condition prédéfinie se produit dans le système. Elles permettent de détecter et de
réagir rapidement à des problèmes potentiels, en envoyant des avertissements aux équipes d'exploitation ou aux administrateurs système.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://newrelic.com/resources/ebooks/effective-alerting-guide" target="_blank">Effective Alerting in Practice</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=FfpBGATG_6c&ab_channel=LogicMonitor%2CInc." target="_blank">9 Steps to Prevent Alert Storms</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Observability.Web Vitals.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Observability.Web Vitals.proficiencyLevel" type="radio"
disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Observability.Web Vitals.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">Web Vitals</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les Web Vitals sont un ensemble de métriques de performance clés qui mesurent l'expérience utilisateur sur le web, notamment la vitesse de chargement, la
réactivité et la stabilité visuelle. Ils fournissent des indications sur la qualité de l'expérience utilisateur, permettant aux développeurs de détecter les problèmes de performance et d'optimiser leurs sites web en conséquence.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://developers.google.com/search/docs/appearance/core-web-vitals#:~:text=Core%20Web%20Vitals%20is%20a,a%20great%20user%20experience%20generally." target="_blank">Understanding Core Web Vitals</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://web.dev/vitals/" target="_blank">Web Vitals</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://techbeacon.com/app-dev-testing/how-do-web-performance-testing-google-lighthouse-cypress" target="_blank">Performance testing with Google Lighthouse and Cypress</a>
</div>
</div>
</div>
<div>
<div class="flex items-center relative my-2 justify-center">
<div class="absolute left-0">
<div class="flex flex-wrap gap-2"><input name="Observability.DORA Metrics.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-red-600 text-red-600 checked:ring-offset-2 checked:ring-red-600" value="1"><input name="Observability.DORA Metrics.proficiencyLevel"
type="radio" disabled="" class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-yellow-600 text-yellow-100 checked:ring-offset-2 checked:ring-yellow-100" value="3"><input
name="Observability.DORA Metrics.proficiencyLevel" type="radio" disabled=""
class="cursor-pointer w-2.5 h-2.5 bg-white-100 border-gray-400 checked:ring-2 focus:ring-green-600 text-green-100 checked:ring-offset-2 checked:ring-green-100" value="5"></div>
</div>
<div class="flex items-center justify-between w-full ml-[58px] cursor-pointer h-[20px]">
<div class="flex justify-between w-full items-center">
<h6 class="text-[13px] leading-4 text-black-200 font-graphikMedium text-base ml-1">DORA Metrics</h6>
<div class="mr-8"></div>
</div><button type="button" class="rotate-0 transition-all duration-300"><img alt="down-arrow" loading="lazy" width="12" height="12" decoding="async" data-nimg="1" src="/icons/down_arrow.svg"
style="color: transparent; width: auto;"></button>
</div>
</div>
<div class="overflow-hidden border-b border-gray-500 transition-height duration-300 max-h-0 my-0 ml-[59px] mr-[1.4rem] opacity-0" style="height: 0px;">
<p class="__className_0d74e0 text-[10px] leading-[18px] text-black-300 mb-3">Les DORA Metrics (DevOps Research and Assessment Metrics) sont un ensemble de métriques utilisées pour évaluer et mesurer les pratiques et la performance des
équipes de développement et d'exploitation dans le cadre de l'adoption des pratiques DevOps. Elles incluent des mesures telles que le délai de déploiement, la fréquence des déploiements, le temps de rétablissement en cas d'incident et
le taux de changement échoué, fournissant ainsi des indicateurs clés pour évaluer l'efficacité des pratiques DevOps et l'agilité de l'équipe.</p>
<div class="flex flex-col items-start pb-4 space-y-1.5">
<a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.leanix.net/fr/wiki/vsm/dora-metrics" target="_blank">DORA Metrics</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://www.youtube.com/watch?v=lM_FbVYuN8s&ab_channel=GitLab" target="_blank">DORA Metrics - User Analytics</a><a class="text-[10px] leading-[18px] text-black-400 underline font-semibold" href="https://devcycle.com/blog/the-ultimate-guide-to-dora-metrics" target="_blank">The Ultimate Guide to DORA Metrics</a>
</div>
</div>
</div><br><label class="pb-4">Tu vois d'autres skills à rajouter dans la catégorie Observability ?</label>
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input
type="hidden" name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Observability"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>
</div>
</div>
</div>
</form>POST https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input type="hidden"
name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Programming"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>POST https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input type="hidden"
name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Software Documentation"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>POST https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input type="hidden"
name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Application Testing"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>POST https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input type="hidden"
name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Frontend"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>POST https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input type="hidden"
name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="API Design"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>POST https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input type="hidden"
name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Data Modeling"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>POST https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input type="hidden"
name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="System Design & Architecture"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>POST https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input type="hidden"
name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Cloud Infrastructure & Network"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>POST https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr
<form action="https://api.sheetmonkey.io/form/4cymv9PU2Q6ceS2aovybjr" method="post" class="flex flex-col md:flex-row"><input class="md:w-64 w-80 mr-4" type="text" name="skills_added" placeholder="Sépare-les par une virgule"><input type="hidden"
name="Created" value="x-sheetmonkey-current-date-time"><input type="hidden" name="user_id" value="a23d3417-e109-4054-b5b4-4e8ade7789bd"><input type="hidden" name="category" value="Observability"><button
class="mt-4 md:mt-0 border border-black-200 rounded py-2 px-4" type="submit">Proposer</button></form>Text Content
SAINT-PIERRE KASSI +11 Expertises: ObservabilityCloudInfrastructure & NetworkSystemDesign & ArchitectureDataModelingAPI DesignFrontendApplication TestingSoftwareDocumentationProgrammingContinuous IntegrationSoftware engineeringSkills map Donner du feedback Se connecter Générer mon passport.dev INVITE TON ÉQUIPE, TES COLLÈGUES, TES FRÈRES ET TES SOEURS ! Le passeport.dev en équipe permet de révéler les forces et les faiblesses du groupe, et de prendre des actions pour monter en compétences en favorisant le mentorat. Ajouter Personnes à inviter 0 invitation Envoyer 0 invitation PROTECTION DE VOS DONNÉES Nous prenons au sérieux la protection de vos données personnelles. Pour récupérer l'ensemble de vos données personnelles et/ou supprimer votre compte définitivement, veuillez nous contacter à l'adresse suivante : info@passeport.dev Nous procéderons alors au traitement de votre demande dans les 48h. SAINT-PIERRE KASSI Frontend * * * * * Backend * * * * * * Cloud & DB * * Mobile * * CONTINUOUS INTEGRATION L'intégration continue est une pratique qui consiste à fusionner régulièrement les modifications du code réalisées par plusieurs développeurs au sein d'un projet, afin de détecter rapidement les éventuels problèmes d'incompatibilité et de garantir une qualité constante du logiciel. Jamais pratiquéDéjà pratiquéMaîtrise BASIC GIT COMMANDS Peut Mentorer Mentor Les commandes Git de base sont des instructions utilisées pour gérer un référentiel Git. Elles incluent "git init" pour initialiser un nouveau référentiel, "git add" pour ajouter des fichiers à l'index de suivi, "git commit" pour créer un instantané des modifications, "git branch" pour créer une nouvelle branche, "git push" pour envoyer les modifications vers un référentiel distant, "git pull" pour récupérer et fusionner les modifications d'un référentiel distant vers le référentiel local, et git merge pour fusionner les modifications d'une branche vers une autre branche. Git cheat sheet - 40 commandsGit cheat sheet educationFreecodecamp Git cheat sheet ADVANCED GIT COMMANDS Les commandes avancées de git offrent des fonctionnalités plus fines pour manipuler l'historique des commits, effectuer des recherches de bugs et gérer finement les modifications dans un référentiel Git.: interactive rebase, bisect, squash, fixup, cherry pick etc... 13 advanced Git Techniques and shortcutsGitkraken - Advanced Git techniques TRUNK BASED DEVELOPMENT Méthode de développement logiciels où tous les devs travaillent sur une seule branche principale, appelée "trunk" ou "main", en effectuant des commits très fréquents et en évitant les longues branches de fonctionnalités pour minimiser les conflits de merge. Trunk Based Development - Official docGoogle Cloud - Trunk Based Development FEATURE BASED BRANCHING (GITFLOW) Feature based branching (gitflow) est une stratégie de gestion de branches dans Git qui définit un modèle de flux de travail plutôt rigide, conçu autour des versions de projet, en utilisant des branches spécifiques pour les fonctionnalités, les versions, les correctifs de bugs et la maintenance. Branching Strategies ExplainedWorkflow Gitflow CLEAN COMMIT Un "clean commit" fait référence à une pratique de développement de logiciels consistant à effectuer un commit qui est clair, concis et ne contient que des modifications liées à une fonctionnalité ou à une tâche spécifique, sans inclure de modifications inutiles ou non liées. Cela contribue à maintenir la propreté et la traçabilité du code source, facilitant ainsi la collaboration et la gestion du projet. L'utilisation d'outils comme husky ou commitizen permettent de créer un format type clair de commit Conventional CommitsHow To Write Good Commit Messages4 Tips To Write Clean Commits History CLEAN PR Une "clean PR" est une demande de fusion qui est claire, bien organisée et qui contient uniquement les modifications nécessaires pour résoudre un problème ou implémenter une fonctionnalité spécifique. Cela facilite la révision et la compréhension du code par les pairs, en maintenant un niveau élevé de lisibilité, de qualité et de cohérence dans le processus de collaboration du développement logiciel. Make Clean Pull RequestsA Github Pull Request Template For Your ProjectsWriting A Great Pull Request Description CI SERVERS Un serveur d'intégration continue (CI server) est un outil logiciel utilisé dans le développement de logiciels pour automatiser le processus d'intégration du code. Il permet de compiler, tester et déployer automatiquement le code source à chaque modification, assurant ainsi une intégration régulière et une détection précoce des erreurs. Les plus populaires sont Github Actions, Gitlab CI, Jenkins, Travis ou encore Azure Devops. Comment mettre en place une CI/CD ?CI Server: How It WorksGithub Actions Step By Step Guide LINTER Outil utilisé dans le développement de logiciels pour analyser le code source et signaler les erreurs, les problèmes de style et les violations des conventions de programmation. Il applique un ensemble de règles prédéfinies ou personnalisables pour détecter les erreurs courantes, les pratiques non recommandées et les incohérences dans le code. Les linters aident à améliorer la qualité du code, à renforcer la cohérence du style de programmation et à identifier les problèmes potentiels avant l'exécution du code. What is a Linter and Why you should use oneWhat is a Linter ? Quick start guideGithub Super Linter in 5 minutes TEST COVERAGE Le "test coverage" (ou couverture de test) fait référence à la mesure de la proportion du code source d'un programme qui est exercée par les tests automatisés. Il indique le pourcentage de lignes de code, de branches conditionnelles ou d'autres éléments couverts par les tests par rapport à l'ensemble du code source. Attention à ne pas considérer que le test coverage est suffisant pour garantir la qualité d'écriture des tests! Test Coverage - Comprehensive Guid with Best PracticesTest Coverage Techniques - The Ones You NeedHow To Ensure Test Coverage SEMANTIC VERSIONNING Le versionnage sémantique est un système de versionnage qui associe un sens spécifique à différentes parties du numéro de version, généralement structuré comme MAJEUR.MINEUR.CORRECTIF. Le changement du numéro de version MAJEUR indique des modifications incompatibles, un changement du numéro MINEUR indique l'ajout de fonctionnalités compatibles avec les versions antérieures, et un changement de CORRECTIF indique des corrections de bugs compatibles avec les versions antérieures. SemVer Official SpecsWhat Is Semantic VersioningUndertsanding Semantic Versioning (real world examples) CODE REVIEWS processus par lequel un ou plusieurs développeurs vérifient le code écrit par un autre développeur afin de s'assurer qu'il respecte les meilleures pratiques de programmation, qu'il est exempt d'erreurs et qu'il répond aux exigences du projet. How to make a great code reviewsYou don't need code reviews Tu vois d'autres skills à rajouter dans la catégorie Continuous Integration ? Proposer PROGRAMMING Les patterns de programmation sont des solutions éprouvées à des problèmes de conception courants dans le développement de logiciels. Ils fournissent des approches structurées et réutilisables pour résoudre des problèmes spécifiques et améliorer la qualité, la maintenabilité et l'extensibilité du code. Jamais pratiquéDéjà pratiquéMaîtrise OOP L'OOP (Object-Oriented Programming) est un paradigme de programmation qui se concentre sur la modélisation des problèmes du monde réel en utilisant des objets, qui sont des instances de classes. Il favorise l'encapsulation, l'abstraction, l'héritage et le polymorphisme pour organiser et structurer le code, facilitant ainsi la réutilisation, la maintenabilité et la modularité des logiciels. Object Oriented Concepts ExplainedWhat is Object Oriented ProgrammingOOP in 7 mn FP Le "functional programming" (programmation fonctionnelle) est un paradigme de programmation qui met l'accent sur l'utilisation de fonctions pures, sans état et immuables, en évitant les effets de bord. Il favorise la composition de fonctions, la manipulation de données immuables et l'utilisation d'expressions déclaratives pour résoudre les problèmes de programmation, en mettant l'accent sur la clarté, la prévisibilité et la facilité de test du code. What Is Functional ProgrammingFunctional Programming - A General IntroductionFunctional Programming Explained To My Grandma STATIC TYPING Le "static typing" (typage statique) est un concept en programmation où les types des variables et des expressions sont vérifiés à la compilation plutôt qu'à l'exécution. Les langages de programmation avec un typage statique requièrent que les types soient déclarés explicitement et vérifiés avant l'exécution, ce qui permet une détection précoce des erreurs de type et une meilleure compréhension du code par les développeurs. Statically vs Dynamically Typed LanguagesTypeScript in 1 hourLearn Advanced TypeScript SOLID PRINCIPLES Les principes SOLID sont un ensemble de principes de conception logicielle qui favorisent la modularité, l'extensibilité et la maintenabilité des systèmes logiciels. Ils incluent le Single Responsibility Principle (SRP), l'Open/Closed Principle (OCP), le Liskov Substitution Principle (LSP), l'Interface Segregation Principle (ISP) et le Dependency Inversion Principle (DIP), qui encouragent la séparation des préoccupations, l'encapsulation, l'abstraction et la gestion des dépendances pour produire un code souple et évolutif. A Solid Guide to SOLID PrinciplesBob 'Uncle Bob' Martin Masterclass on SOLID PrinciplesSOLID Relevance DESIGN PATTERNS Les design patterns en code sont des solutions éprouvées et réutilisables pour résoudre des problèmes courants de conception logicielle. Ils fournissent des modèles et des structures de conception bien documentés qui facilitent la résolution de problèmes spécifiques, améliorent la maintenabilité du code et favorisent les bonnes pratiques de développement : Factory, Observatory, Singleton, Decorator, Adaptor, Repository, etc... Patrons de conception / Design PatternA Litlle About Pattern10 Design Patterns Explained ALGORITHMS En informatique, les algorithmes peuvent être classés en plusieurs catégories, dont les plus courantes sont les algorithmes de tri, utilisés pour réorganiser les données dans un certain ordre, et les algorithmes de recherche, utilisés pour trouver des données spécifiques au sein d'un ensemble de données. D'autres catégories comprennent les algorithmes de parcours de graphes, de programmation dynamique, de récursion, de hachage, de backtracking, et bien d'autres, chacun étant adapté à la résolution de types spécifiques de problèmes. Sorting Algorithms Explained VisuallyAlgorithms CS 50 Cheat SheetAlgorithm Definitions for Computer Science BIGO COMPLEXITY Le 'Big O complexity' est une mesure qui évalue l'efficacité et la performance d'un algorithme en fonction de la croissance de la taille de l'entrée. Il exprime la relation asymptotique entre la taille de l'entrée et le temps d'exécution (complexité temporelle) ou l'espace mémoire requis (complexité spatiale) par l'algorithme, permettant ainsi de comprendre comment l'algorithme évolue lorsque la taille des données augmente. BigO Cheat SheetIntro to BigO Notation & Time ComplexityBigO Notation in 100 secondes ASYNCHRONOUS PROGRAMMING La programmation asynchrone est un modèle de programmation qui permet d'exécuter des tâches de manière non bloquante et parallèle. Elle utilise des callbacks, des promesses ou des async/await pour gérer les opérations longues ou lentes, permettant ainsi au programme de continuer son exécution sans attendre la fin de ces opérations. Cela améliore la réactivité, les performances et l'efficacité globale des applications qui doivent gérer des opérations intensives en termes de temps. Asynchronous vs Syncronous ProgrammingThe Async / Await Episode - PromisedAsynchronous Programming - A Beginner's Guide MULTITHREADING Le multithreading est une technique de programmation permettant l'exécution simultanée de plusieurs fils d'exécution (threads) au sein d'un programme. Chaque thread représente une séquence d'instructions indépendante et peut être utilisé pour effectuer des tâches en parallèle, améliorant ainsi l'efficacité et la capacité de réponse des programmes en exploitant les ressources du processeur de manière optimale. A Gentle Introduction To Multithreading Tu vois d'autres skills à rajouter dans la catégorie Programming ? Proposer SOFTWARE DOCUMENTATION Il s’agit de l’ensemble des techniques de visualisation et de modelisation du logiciel qui aide les développeurs à comprendre le code, à faciliter la maintenance, et à permettre à d'autres personnes de collaborer et d'utiliser le code de manière efficace. Jamais pratiquéDéjà pratiquéMaîtrise README Peut Mentorer Mentor Un 'README' est un fichier texte généralement présent à la racine d'un projet logiciel ou d'un référentiel de code source. Il sert à fournir des informations essentielles sur le projet, telles que la description, les instructions d'installation, d'utilisation et de contribution, ainsi que toute autre documentation pertinente, afin d'aider les utilisateurs et les contributeurs à comprendre rapidement le projet et à commencer à l'utiliser. Readme 101 - Template & SuggestionsGuide To Writing A good ReadmeHow To Create Beautiful and Useful ReadMe Documents For GitHub CONTRIBUTING PRINCIPLES Informations spécifiques sur les lignes directrices, les processus et les attentes pour les contributeurs potentiels souhaitant participer au développement du projet. Le fichier 'CONTRIBUTING.md' décrit les étapes à suivre pour soumettre des problèmes, proposer des modifications, fournir des rétroactions ou contribuer de manière générale au projet, afin de faciliter une collaboration efficace et cohérente entre les contributeurs et les mainteneurs du projet. How to Build a CONTRIBUTING.md - Mozilla Sicence LabBest Practices on Making a contributing.md fileContributing.md Gist Template UML Peut Mentorer Mentor L'UML diagram est un type de diagramme utilisé dans l'ingénierie logicielle pour représenter graphiquement différents aspects d'un système logiciel. UML fournit un ensemble de notations standardisées pour représenter visuellement des concepts tels que les classes, les objets, les relations, les comportements, les structures et les interactions entre les composants d'un système. UML Usecase DiagramUML Class Diagram TutorialThe Easy Guide To UML Class Diagram C4 MODEL Approche de modélisation architecturale qui utilise quatre couches pour représenter l'architecture d'un système logiciel, allant du contexte global aux détails des composants internes. Il facilite la compréhension et la communication de l'architecture en fournissant une vue hiérarchique claire et concise du système. Official WebsiteVisualising software architecture with the C4 modelC4 Model a Better Way To Visualise Software Architecture OPEN API / SWAGGER Peut Mentorer Mentor Format de description d'API qui fournit une spécification standardisée, basée sur le format JSON ou YAML, pour décrire les endpoints, les paramètres, les types de données, les méthodes d'appel, les exemples d'utilisation et d'autres informations liées à une API. Il permet de créer une documentation interactive, de générer du code client/serveur et de faciliter l'intégration et l'interopérabilité entre les différentes plateformes et outils. Open API 3.0 - Swagger TutorialOpen API Specifications Crash CourseOpen API 3.0 Tutorial STORYBOOK Storybook est un outil de développement frontend qui permet de créer et de visualiser des composants d'interface utilisateur (UI) de manière isolée et interactive. Il offre un environnement de développement où les développeurs peuvent explorer, tester et documenter les composants frontend de manière indépendante, favorisant ainsi le développement modulaire et la réutilisabilité des UI. Official Documentation - Getting StartedLearn Storybook Crash CourseWhat Is Storybook and How To Use It ADR Un ADR (Architectural Decision Record) est un document qui enregistre une décision architecturale prise au cours du développement d'un logiciel. Il fournit une description concise de la décision, les raisons qui l'ont motivée, les alternatives envisagées et les implications attendues, facilitant ainsi la compréhension et la traçabilité des décisions prises dans le processus de conception et d'évolution d'un système logiciel. Architecture decision record (ADR) - By Joel Parker HendersonHomepage of the ADR GitHub organizationThe Ultimate Guide To Architectural Decision Records RELEASE NOTES Peut Mentorer Mentor Une "release note" est un document ou une note qui accompagne une version logicielle publiée et qui fournit des informations sur les nouveautés, les améliorations, les correctifs de bugs et les modifications apportées à cette version spécifique du logiciel. Elle sert à informer les utilisateurs et les parties prenantes des changements apportés, des fonctionnalités ajoutées et des problèmes résolus dans la version du logiciel mise à disposition. How To Write Effective Software Release NotesWriting Release Notes DEPENDENCY GRAPH Un graphe de dépendances est une représentation visuelle montrant comment différents modules, fonctions, ou composants d'un système logiciel interagissent et dépendent les uns des autres. Il aide les développeurs à comprendre et gérer les complexités du code, en facilitant notamment la détection des cycles de dépendance, l'optimisation du couplage et de la cohésion, et l'organisation de l'ordre d'exécution ou de compilation. Generating Dependency Graph With TextCreate Dependency Diagram From Your CodeDependency Graph Template Tu vois d'autres skills à rajouter dans la catégorie Software Documentation ? Proposer APPLICATION TESTING Une grande partie de la qualité logicielle passe par l’écriture de tests à différents niveaux de ce qu’on appelle la pyramide de tests. Mais les tests servent aussi à aider le développeur à mieux concevoir la logique de son code, de manière incrémentale et itérative. Jamais pratiquéDéjà pratiquéMaîtrise TESTING OBJECTS Les objets de tests, également appelés objets de test doubles, sont des implémentations substituées des dépendances réelles utilisées lors des tests unitaires. Ces objets sont créés dans le but de fournir des comportements prévisibles et contrôlés pour isoler le code testé et faciliter les tests en permettant la simulation de certaines interactions ou valeurs de retour spécifiques : mock, spy, double, fixtures. Test Doubles — Fakes, Mocks and StubsTest Doubles - Martin FowlerTest Doubles - The difference between stubs and mocks UNIT TESTS Les tests unitaires sont des tests automatisés effectués sur des composants individuels d'un logiciel pour vérifier leur bon fonctionnement de manière isolée. Ils consistent à valider les entrées, les sorties et les comportements attendus de ces composants, permettant de détecter rapidement les erreurs et de s'assurer de la qualité du code à un niveau granulaire. Unit Testing GuideArrange, Act and Assert Pattern: The Three A’s of Unit TestingMy Unit Testing Epiphany TDD Le TDD (Test-Driven Development) est une approche de développement logiciel où l'on commence par réfléchir au dénouement souhaité afin de faire ressortir l'algorithme ou la logique que l'on souhaite construire. Cela implique de définir les exigences sous forme de tests, puis de développer le code qui répond à ces tests, favorisant ainsi la qualité, la modularité et la réflexion sur la conception du code dès le début du processus de développement. TDD par l'exempleTDD Doesn't WorkTDD, Where Did It All Go Wrong BDD Le BDD (Behavior-Driven Development) est une méthodologie de développement logiciel qui met l'accent sur la collaboration entre les développeurs, les testeurs et les parties prenantes pour définir le comportement attendu du logiciel à l'aide de scénarios rédigés dans un langage naturel. Il vise à aligner les objectifs métier et les exigences fonctionnelles en encourageant des spécifications plus compréhensibles et une communication claire entre les différentes parties prenantes du projet. What is BDD testing?Le BDD ce n'est pas ce que vous croyezDemonstration de BDD et TDD en live INTEGRATION TESTS Peut Mentorer Mentor Les tests d'intégration sont des tests qui vérifient le bon fonctionnement des interactions et des intégrations entre plusieurs composants ou modules d'un système logiciel. Ils permettent de détecter les erreurs potentielles lors de l'assemblage des différentes parties du système, en s'assurant que les composants fonctionnent ensemble de manière cohérente et conforme aux spécifications. Integration Testing: What is, Types with ExampleFirst Class Tests7 Integration Testing Best Practices END-TO-END TESTS Les tests end-to-end (E2E) sont des tests qui simulent des scénarios d'utilisation réels et couvrent l'ensemble du flux de travail d'une application, du début à la fin. Ils vérifient la fonctionnalité, la performance et l'interopérabilité du système dans son ensemble, en reproduisant les interactions utilisateur réelles pour s'assurer que tous les composants et systèmes interagissent correctement. Ces tests sont plus longs à executer et en général sont plutôt à réaliser sur les absolument parcours critiques d'une application. What Is End-to-End Testing?What Is End-to-End Testing?End-to-End Testing Tu vois d'autres skills à rajouter dans la catégorie Application Testing ? Proposer FRONTEND Partie visible et interactive d'une application ou d'un site web, directement accessible par les utilisateurs. Cela implique la conception, le développement et l'optimisation de l'interface utilisateur, ainsi que la gestion des interactions utilisateur, des affichages de données et des fonctionnalités. Jamais pratiquéDéjà pratiquéMaîtrise FRAMEWORK/LIB FRONT Peut Mentorer Mentor Un framework ou une bibliothèque frontend est un ensemble d'outils, de composants et de fonctionnalités préconçus qui facilitent le développement d'applications web du côté client. Ils fournissent une structure et des fonctionnalités communes pour gérer l'interface utilisateur, les interactions, la gestion de l'état et d'autres aspects du développement web, permettant ainsi aux développeurs de gagner du temps et de maintenir une cohérence dans leur code. STATE MANAGEMENT La gestion de l'état en frontend fait référence à la façon dont les données sont stockées, mises à jour et synchronisées dans une application web côté client. Elle permet de gérer les changements d'état de l'interface utilisateur, de maintenir la cohérence des données et de gérer les interactions dynamiques, en utilisant des techniques telles que les états locaux, les états globaux et les flux de données unidirectionnels pour assurer une expérience utilisateur fluide et réactive. FRONTEND BUILD CONFIGURATION Peut Mentorer Mentor La configuration de build frontend (frontend build config) fait référence à la manière dont un projet frontend est configuré et construit. Cela comprend la définition des outils, des paramètres et des processus nécessaires pour compiler, optimiser et préparer les fichiers frontend (tels que les fichiers HTML, CSS, JavaScript) en vue de les déployer et de les exécuter dans un environnement de production. WEB PERFORMANCE Peut Mentorer Mentor La web performance fait référence à la vitesse, à la réactivité et à l'efficacité d'un site web ou d'une application web. Elle englobe des aspects tels que le temps de chargement des pages, la fluidité des interactions, l'utilisation optimisée des ressources et l'expérience utilisateur globale, avec pour objectif d'offrir une expérience rapide, fluide et engageante aux utilisateurs. LAZY LOADING Peut Mentorer Mentor Le lazy loading est une technique de chargement différé des ressources d'une page web. Il permet de charger uniquement les éléments visibles à l'écran au chargement initial, puis de charger les autres éléments au fur et à mesure de leur nécessité, réduisant ainsi le temps de chargement initial et améliorant la performance globale de la page. MICRO-FRONTEND ARCHITECTURE Peut Mentorer Mentor Les micro frontends sont une approche architecturale où une application web est décomposée en modules autonomes, chaque module étant développé, déployé et maintenu indépendamment. Ils permettent d'intégrer et de gérer plusieurs équipes et technologies frontend distinctes au sein d'une même application, offrant ainsi une scalabilité, une flexibilité et une autonomie accrues. CSS TECHNIQUES Le style est un concept souvent sous-estimé mais pourtant indispensable. Les principales techniques qu'on dénombre sont: le box model, flexbox, grid, le positionnement et les media queries. ADVANCED CSS ANIMATIONS Les animations avancées CSS offrent la possibilité de créer des mouvements et des transitions complexes sans avoir recours à JavaScript, en utilisant des concepts tels que les keyframes, les transformations et les transitions. Elles permettent une interactivité élégante sur le web, avec des effets comme le déplacement, la rotation, le redimensionnement, et le changement graduel des couleurs, rendant les sites web plus vivants et interactifs. SSR Le SSR (Server-Side Rendering) est une technique de rendu où le serveur génère le contenu HTML complet de chaque page en réponse à une demande du navigateur. Cela permet d'envoyer une page prérendue au navigateur, facilitant ainsi un chargement initial plus rapide et une meilleure indexation par les moteurs de recherche. Si les SPA ont largement dominé, les frameworks poussent aujorud'hui à choisir une granularité fine entre ce qui est rendu côté client et ce qui est rendu côté serveur, pour une meilleure optimisation des performances. ACCESSIBILITY L'accessibilité fait référence à la conception et à la mise en œuvre de sites web, d'applications et d'autres contenus numériques de manière à les rendre utilisables par tous, y compris les personnes ayant des capacités différentes. Cela implique d'assurer l'accès équitable à l'information, à la fonctionnalité et à l'interaction, en tenant compte des besoins des utilisateurs ayant des limitations visuelles, auditives, motrices ou cognitives. OFFLINE Peut Mentorer Mentor La gestion du mode hors ligne dans le développement frontend web ou mobile se réfère à la conception et à la mise en œuvre de stratégies permettant à une application de fonctionner même lorsque l'utilisateur n'a pas de connexion internet, en stockant des données localement et en synchronisant les changements lorsqu'une connexion est à nouveau disponible. Cela implique souvent l'utilisation de technologies comme les Service Workers, les IndexedDB ou le LocalStorage pour le cache des ressources et la gestion des données en mode déconnecté. RESPONSIVE Peut Mentorer Mentor Le responsive design se réfère à la conception de sites web de manière à ce qu'ils s'affichent correctement sur une variété d'appareils et de tailles d'écran, de grands moniteurs d'ordinateurs de bureau aux petits écrans de smartphones. Tu vois d'autres skills à rajouter dans la catégorie Frontend ? Proposer API DESIGN La conception d'API (Application Programming Interface) fait référence à la création et à la définition des interfaces et des contrats d'une API pour faciliter l'interaction entre différentes parties logicielles. Cela implique la conception de points d'entrée, de structures de données, de méthodes et de comportements cohérents, intuitifs et bien documentés afin de fournir une expérience utilisateur optimale et une intégration facile pour les développeurs utilisant l'API. Jamais pratiquéDéjà pratiquéMaîtrise REST API Une API REST (Representational State Transfer) est un style d'architecture de services web qui utilise les principes et les protocoles du web pour créer des interfaces d'API. Elle utilise des méthodes HTTP standard telles que GET, POST, PUT, DELETE pour permettre aux clients de communiquer avec les ressources d'une application, en utilisant des représentations de données basées sur des formats tels que JSON ou XML pour transférer les données. On préfère aujourd'hui le format JSON au XML. Best Practice for REST API DesignHow to use REST APIRESTful Web API Design GRAPHQL APIS GraphQL est une alternative aux API REST qui offre des capacités plus flexibles et efficaces pour interroger et manipuler les données. Avec GraphQL, les clients peuvent spécifier exactement quels champs ils veulent dans une seule requête, plutôt que de devoir faire plusieurs appels d'API pour obtenir toutes les informations requises. Cela peut aider à minimiser la quantité de données transférées et à améliorer les performances. GraphQL vs RESTHow to GraphQLIntroduction to GraphQL HANDLING ERRORS La gestion des erreurs est une partie cruciale de la conception de l'API. Les erreurs peuvent se produire pour diverses raisons, telles que des erreurs de côté client (par exemple, une requête mal formée), des erreurs de côté serveur (par exemple, une base de données en panne), ou des conditions d'erreur inattendues. Une bonne API devrait être conçue pour gérer ces erreurs de manière gracieuse et informative, en fournissant suffisamment d'informations pour que le client puisse comprendre ce qui a mal tourné et comment résoudre le problème. REST API Error HandlingError Handling in GraphQLEffective API Error Handling AUTHENTICATION STRATEGIES L'authentification est un aspect essentiel de la sécurité des API. Il existe différentes stratégies d'authentification qui peuvent être utilisées dans la conception des API, notamment l'authentification de base, l'authentification par jeton, l'authentification OAuth, et plus encore. Chacune a ses propres avantages et inconvénients, et le choix de la stratégie à utiliser dépend des exigences spécifiques de l'application. Authentication and Authorization for RESTful APIsUnderstanding the basics of token-based authenticationOAuth 2.0 and OpenID Connect (in plain English) AUTHORIZATION STRATEGY Une stratégie d'autorisation d'API est une approche basée sur les ACL (Access Control Lists) qui définit les autorisations d'accès pour contrôler les actions des utilisateurs ou des clients sur une API. Elle spécifie les règles et les restrictions d'accès attribuées à des utilisateurs ou à des groupes spécifiques, permettant ainsi de déterminer qui est autorisé à accéder à quelles ressources et quelles actions sont autorisées pour chaque entité. What Is Authorization?Differences between Authorization & AuthenticationAAA explained API GATEWAY Peut Mentorer Mentor Une API gateway est un composant centralisé qui agit comme point d'entrée unique pour les requêtes provenant de clients externes. Elle permet de gérer l'authentification, l'autorisation, la transformation des données, la mise en cache et d'autres fonctionnalités communes liées aux API, facilitant ainsi la création, la gestion et la sécurisation des services API. Official DocsgRPC introductionWhy gRPC was invented HANDLING CORS La gestion des CORS (Cross-Origin Resource Sharing) est un mécanisme de sécurité dans les navigateurs web qui contrôle les requêtes HTTP entre des origines différentes. Elle permet aux ressources d'être partagées de manière contrôlée entre des domaines différents, en définissant les autorisations d'accès via les en-têtes HTTP, afin de prévenir les attaques d'injection de scripts et de protéger la confidentialité des utilisateurs. CORS en 100 secondesWhat is CORS ?Cross-Origin Resource Sharing (CORS) | Complete Guide IDEMPOTENCY L'idempotence est une propriété d'opérations dans les mathématiques et l'informatique où l'application multiple d'une opération ne change pas le résultat après la première application. Par exemple, dans une requête HTTP, une opération est dite idempotente si envoyer la même requête plusieurs fois produit le même effet que l'envoyer une fois. What is API Idempotency and Why Is It Important?How Important Is IdempotencyIdempotent API for Payments Tu vois d'autres skills à rajouter dans la catégorie API Design ? Proposer DATA MODELING La modélisation des données englobe différents aspects, de la conception du bon schéma de données au choix de la bonne base de données, en passant par des techniques d'optimisation des performances. Jamais pratiquéDéjà pratiquéMaîtrise INDEXING L'indexation consiste à créer des structures de données supplémentaires pour accélérer la recherche de données en créant des références rapides vers les enregistrements correspondants, ce qui permet d'optimiser les opérations de recherche et de filtrage dans une base de données. Mastering Database Indexing: A Comprehensive GuideDatabase Indexing Strategies Part I (ByteByteGo)Database Indexing Strategies Part II (ByteByteGo) NORMALIZATION La normalisation est un processus de conception de bases de données qui vise à minimiser la redondance des données en les organisant en tables bien structurées, ce qui améliore l'intégrité, la cohérence et l'efficacité des opérations de lecture et d'écriture. Learn Database NormalizationDatabase NormalizationBasic Concept of Database Normalization PARTITIONING Le partitionnement consiste à diviser une table en sous-ensembles plus petits (partitions) pour répartir les données sur plusieurs disques ou serveurs, ce qui améliore les performances en réduisant les temps d'accès aux données et en augmentant la capacité de traitement parallèle. What is data partitioning, and how to do it rightWhat Is Database Partitioning?Database Sharding and Partitioning QUERY OPTIMIZATION L'optimisation des requêtes implique l'analyse et l'ajustement des requêtes SQL pour améliorer leur performance en choisissant les bons index, en évitant les opérations coûteuses, en utilisant les meilleures pratiques de formulation de requêtes et en optimisant les plans d'exécution. SQL Optimisation12 ways to optimize SQL queries for cloud databasesSecret To Optimizing SQL Queries - Understand The SQL Execution Order CACHE L'utilisation d'un cache de données en mémoire permet de stocker les résultats de requêtes fréquemment utilisées, ce qui réduit les accès à la base de données et améliore les temps de réponse en fournissant des données précalculées et rapidement accessibles. Cache Systems Every Developer Should KnowHow does Caching on the Backend work?Cache Strategies SQL Peut Mentorer Mentor Le SQL est un langage de programmation utilisé pour interagir avec les bases de données relationnelles. Il permet d'effectuer des opérations telles que la création, la modification et la récupération de données en utilisant des commandes telles que SELECT, INSERT, UPDATE et DELETE, facilitant ainsi la gestion et la manipulation des données dans les systèmes de bases de données, ainsi que le filtre précis des données grâce aux commandes de type WHERE, LIMIT, HAVING, GROUP BY, ORDER. SQL Zoo7 Advanced SQL Concepts You Need to KnowAdvanced SQL Tutorial DOCUMENT BASED DB Une base de données basée sur des documents, ou Document based Database, est un type de base de données non relationnelle conçue pour stocker, récupérer et gérer des informations orientées document, généralement structurées en format JSON, BSON, XML, etc. Ces bases de données offrent une grande flexibilité en permettant de stocker des données qui ont des structures différentes et en facilitant le stockage et la récupération de données semi-structurées. NoSQL Document Database ExplainedMongoDB in 100 SecondsTop 12 NoSQL Document Database GRAPH DB Une base de données orientée graphe, ou GraphDB, est un type de base de données NoSQL qui utilise la théorie des graphes pour stocker, mapper et interroger les relations. Les données sont stockées sous forme de nœuds (les entités) et d'arêtes (les relations), ce qui permet des requêtes complexes sur les relations profondes entre les données de manière performante. What is a Graph Database ? A Beginner's GuideGraph Database in 100 SecondsTop Graph Databases KEY-VALUE STORE Un 'Key-Value Store' est un type de base de données non-relationnelle qui stocke les données sous forme de paires clé-valeur, où la clé est unique et permet d'accéder rapidement à la valeur associée. Ces systèmes sont souvent utilisés pour des applications nécessitant de hautes performances ou des volumes de données importants en raison de leur simplicité et de leur capacité à gérer efficacement des opérations de lecture et d'écriture. Design a Key Value Store (playlist)The Key-value StoreThe 27 Best Key Value Database of 2024 RELATIONAL DB Une base de données relationnelle (Relational Database) est un type de base de données qui organise les données en tables interconnectées, où chaque ligne représente un enregistrement unique et chaque colonne représente un champ de cet enregistrement. Les relations entre les tables sont définies par des clés primaires et étrangères, permettant des requêtes complexes et garantissant l'intégrité des données grâce à des contraintes et des règles définies. What is a Relational Database?What relational DB to use? (Reddit Thread)Exploring the 28 Best Relational Database Software of 2024 Tu vois d'autres skills à rajouter dans la catégorie Data Modeling ? Proposer SYSTEM DESIGN & ARCHITECTURE Processus de création d'une structure efficace pour un système logiciel, en définissant les composants, les interactions et les choix de conception. L'objectif est de créer un système robuste, évolutif et performant, répondant aux besoins spécifiés et favorisant la maintenabilité. Jamais pratiquéDéjà pratiquéMaîtrise CLEAN ARCHITECTURE La Clean Architecture est un style d'architecture logicielle qui favorise la séparation des préoccupations en organisant le code en couches concentriques, avec le domaine métier au centre et des couches externes indépendantes des détails techniques. Elle vise à obtenir une conception modulaire, testable et maintenable en appliquant des principes tels que la dépendance inversée et l'indépendance des frameworks. L'article original de Uncle BobThe Future of ProgrammingUsing Clean Architecture for Microservice APIs ARCHITECTURE HEXAGONALE L'Architecture Hexagonale, également connue sous le nom de Ports and Adapters (Ports et Adaptateurs), met l'accent sur la découpe des applications en domaines et en couches distinctes. Elle promeut l'idée que le cœur de l'application, le domaine métier, doit être isolé et indépendant des détails techniques tels que les frameworks et les technologies externes. Les adaptateurs sont utilisés pour connecter le cœur de l'application avec les éléments externes, tels que les interfaces utilisateurs ou les bases de données. Glossaire Architecture HexagonaleArchitecture Hexagonale : 3 principes et un exemple d’implémentationThere Are Always Two Sides To Every Story DDD Le DDD (Domain-Driven Design) est une approche de conception logicielle qui met l'accent sur la modélisation du domaine métier au cœur du développement. Il encourage une compréhension approfondie du domaine, une collaboration étroite entre experts du domaine et développeurs, et la création de modèles riches et expressifs pour résoudre les problèmes complexes liés au domaine. What Is DDD by Eric EvansAn Introduction to DDDConcepts of Domain Driven Design CQRS CQRS (Command Query Responsibility Segregation) est un modèle architectural qui préconise la séparation des opérations de lecture (queries) et d'écriture (commands) dans les systèmes logiciels. Il propose d'avoir des modèles de conception distincts pour la modification des données et la récupération des données, permettant une meilleure évolutivité, une optimisation des performances et une conception plus claire des systèmes. CQRS Global Introduction by Udi DahanClarified CQRSCQRS Pitfalls and Patterns MICROSERVICES L'architecture en microservices est un style d'architecture logicielle dans lequel une application est décomposée en plusieurs services autonomes et indépendants, appelés microservices. Chaque microservice est conçu pour effectuer une fonction spécifique, communique généralement via des API et peut être déployé et mis à l'échelle de manière indépendante, favorisant ainsi la flexibilité, la scalabilité et la résilience des applications distribuées. What are MicroservicesMicroservices by AWSWhat Are Microservices Really All About MODULAR MONOLITH Un monolithe modulaire fait référence à une architecture monolithique où le code est organisé de manière modulaire pour faciliter la maintenance, la compréhension et la réutilisation du code. Bien que le monolithe lui-même ne soit pas divisé en services distincts, les modules internes sont conçus pour être indépendants et interagissent à travers des interfaces claires, permettant une certaine séparation des préoccupations et une meilleure gestion du code à l'intérieur du monolithe. Modular Monolith by Simon BrownThe Majestic Monolith by DHHHow To Recover From Microservices CACHING STRATEGIES Une stratégie de mise en cache (caching) est une approche pour améliorer les performances et réduire la charge d'un système en stockant temporairement les résultats de certaines opérations coûteuses. Elle consiste à enregistrer les données ou les résultats calculés dans un cache, généralement basé sur la mémoire, afin de les récupérer plus rapidement lors de demandes ultérieures. Les stratégies de mise en cache incluent la gestion du cycle de vie du cache, l'invalidation des données obsolètes, la détermination de la durée de conservation des données en cache, ainsi que la gestion des politiques d'éviction pour garantir une utilisation efficace et pertinente du cache. Top Caching StrategiesCaching Strategies in High Throughput SystemsChoosing The Right Caching Strategies EVENT DRIVEN ARCHITECTURE L'architecture orientée événements (Event-Driven Architecture) est un style d'architecture logicielle dans lequel les composants communiquent entre eux par le biais d'événements. Les événements, qui peuvent être des actions, des notifications ou des changements de statut, sont émis par les producteurs et consommés par les récepteurs de manière asynchrone. Cela permet un découplage des composants, une extensibilité et une réactivité accrues, ainsi qu'une meilleure gestion des flux de données et des interactions entre les différentes parties du système. The Many Meanings Of Event Driven Architecture by M.FowlerEvent Driven ArchitectureUnderstanding The Basics PUB/SUB ARCHITECTURE La pub/sub (publication/abonnement) est un modèle d'architecture où les producteurs publient des messages ou des événements sur un canal central, et les consommateurs s'abonnent à ces canaux pour recevoir les messages pertinents. Cela permet une communication décentralisée et asynchrone, où les producteurs et les consommateurs ne sont pas directement couplés, offrant ainsi une grande extensibilité et une meilleure scalabilité. Architecture Pub/Sub par l'exempleThe Pros & Cons of the Pub/Sub ArchitectureArchitectural Overview of Pub/Sub MESSAGING QUEUES Les files d'attente de messages sont des structures de données qui permettent la communication asynchrone entre les composants d'un système distribué en stockant temporairement les messages émis par les producteurs jusqu'à ce qu'ils soient consommés par les destinataires. Cela permet une déconnexion temporelle entre les producteurs et les consommateurs, favorisant ainsi une meilleure gestion des charges, une résilience accrue et une évolutivité du système. Message Queue ExplainedHow Message Queues Work In Distributed SystemsMicroservices & Message Queues Tu vois d'autres skills à rajouter dans la catégorie System Design & Architecture ? Proposer CLOUD INFRASTRUCTURE & NETWORK L'infrastructure cloud désigne l'ensemble des ressources informatiques et des services mis à disposition via Internet pour permettre l'hébergement, le stockage et l'exécution d'applications et de services. Elle offre une flexibilité, une évolutivité et une accessibilité accrues par rapport à l'infrastructure traditionnelle sur site, permettant aux utilisateurs de provisionner et de gérer des ressources à la demande. Jamais pratiquéDéjà pratiquéMaîtrise DOCKER Docker est une plateforme open-source qui facilite la création, le déploiement et l'exécution d'applications dans des conteneurs légers et isolés. Ses principaux concepts comprennent les images, qui sont des modèles de conteneurs préconfigurés, et les conteneurs, qui sont des instances exécutables d'images, offrant une portabilité, une flexibilité et une efficacité dans le déploiement d'applications. Official Documentation & Getting StartedDocker SimplifiedWhy We Build Docker - Solomon Hykes INFRASTRUCTURE AS CODE L'infrastructure as code (IaC) est une pratique de gestion de l'infrastructure informatique en utilisant des fichiers de configuration et de scripts en YAML le plus souvent, pour décrire et provisionner les ressources d'infrastructure de manière automatisée. Cela permet de traiter l'infrastructure comme du code, facilitant la gestion, la reproductibilité et l'évolutivité de l'infrastructure, tout en réduisant les erreurs humaines et en favorisant la collaboration. Infrastructure As Code ExplainedIaCInfrastructure As Code Crash Course ORCHESTRATION L'orchestration de conteneurs est le processus de gestion automatisée et de coordination des conteneurs au sein d'un environnement informatique, en veillant à ce que les conteneurs soient déployés, équilibrés, échelonnés et connectés de manière efficace et cohérente. Cela permet une gestion simplifiée des applications conteneurisées, en maximisant la disponibilité, la résilience et les performances du système. Container Orchestration ExplainedKubernetes vs Docker Swarm — A Comprehensive ComparisonDocker vs Kubernetes vs Docker Swarm PUBLIC CLOUD PROVIDER MANAGEMENT La gestion des fournisseurs de cloud public (public cloud provider management) fait référence à l'ensemble des activités et des processus liés à la gestion et à l'utilisation efficace des services et des ressources fournis par un prestataire de services de cloud public, tels que Amazon Web Services (AWS), Microsoft Azure, Google Cloud Platform (GCP) ou d'autres. Cela implique la configuration, la surveillance, l'optimisation des coûts, la sécurité et la gouvernance des services cloud pour répondre aux besoins de l'entreprise. Public Cloud ExplainedCloud Management ExplainedWhat Is Multicloud ? CD PIPELINES Une pipeline de déploiement continu (CD pipeline) est un ensemble d'étapes automatisées qui permettent de livrer, tester et déployer de manière continue des applications logicielles. Elle comprend généralement des phases telles que la compilation, les tests automatisés, la construction des artefacts, le déploiement sur des environnements de test et de production, ainsi que la gestion des versions et des configurations, offrant ainsi une approche automatisée et cohérente pour livrer rapidement et de manière fiable des logiciels. Continuous Delivery Pipeline 101What is A CI/CD Pipeline ?Setting up a CI/CD Pipeline from scratch TERMINAL / SHELL Peut Mentorer Mentor Bash (Bourne Again Shell) est un interpréteur de commandes en ligne de commande, ou shell, populaire sur les systèmes d'exploitation Unix et Linux, qui permet aux utilisateurs de donner des instructions à leur système d'exploitation par le biais de commandes textuelles. Le terminal, parfois aussi appelé console ou interface en ligne de commande, est l'outil qui permet aux utilisateurs d'interagir avec le shell, généralement en tapant des commandes et en recevant des réponses sous forme de texte. Learn ShellCommand Line For BeginnersLearn Enough Command Line To Be Dangerous (Ch.1) SSH Peut Mentorer Mentor SSH (Secure Shell) est un protocole de réseau cryptographique qui permet aux utilisateurs de se connecter de manière sécurisée à un ordinateur distant, généralement sur un réseau non sécurisé, en fournissant une méthode d'authentification forte et en chiffrant les données échangées. Il est couramment utilisé pour l'administration à distance de systèmes, le transfert de fichiers et l'exécution de commandes sur des machines distantes. SSH Crash CourseUtiliser SSH pour se connecter à un serveur distantUnderstanding Encryption, Ports and Connection SERVER CONFIGURATION La configuration de serveur est le processus qui consiste à définir et à ajuster les paramètres et les options d'un serveur afin de l'optimiser pour des performances, une sécurité, ou une fonctionnalité spécifique. Cela peut impliquer la gestion des logiciels serveur, l'installation et la mise à jour des systèmes d'exploitation, le paramétrage du réseau, la gestion des utilisateurs et des permissions, ainsi que l'implémentation de protocoles de sécurité. Server Configuration OverviewTop 20 Server Types & Functions Tu vois d'autres skills à rajouter dans la catégorie Cloud Infrastructure & Network ? Proposer OBSERVABILITY L'observabilité est une pratique de développement logiciel qui vise à rendre un système compréhensible et diagnostiquable en temps réel. Cela implique la collecte, la surveillance et l'analyse des données liées aux performances, à l'état et au comportement du système. L'objectif de l'observabilité est de permettre aux développeurs et aux équipes opérationnelles d'identifier rapidement les problèmes, de déboguer les erreurs et d'améliorer les performances du système. Jamais pratiquéDéjà pratiquéMaîtrise RUM RUM (Real User Monitoring) est une méthode de surveillance qui collecte et analyse des données en temps réel sur les interactions des utilisateurs avec une application web ou un site web. Il fournit des informations précieuses sur les performances, la convivialité et l'expérience utilisateur réelle, permettant ainsi d'optimiser et d'améliorer la qualité de l'application ou du site. Real User Metrics - MozillaQu'est ce que le RUM ?Supporting RUM In OpenTelemetry (Proposal) DISK MEMORY / RAM La gestion de la mémoire disque et de la mémoire vive (RAM) en observabilité consiste à surveiller et analyser les métriques relatives à l'utilisation de l'espace disque et de la mémoire par un système informatique. Cela permet de détecter les problèmes de saturation, de planifier les besoins en ressources et de prendre des mesures pour optimiser l'efficacité et la stabilité du système. Monitoring CPU/RAM/disk metrics with OpenTelemetryWhat is a Memory Bottleneck ?Memory Leak Detection LOGGING Les logs sont des enregistrements chronologiques des événements et des actions se produisant dans un système. Ils fournissent des informations détaillées sur l'état et le comportement du système, et sont utilisés pour le débogage, la surveillance et l'analyse des problèmes. Observability : Logs vs Traces vs Metrics!Writing Best Practices For Application LogsLogging Best Practices TRACING Le tracing (ou suivi) est une technique qui permet de suivre le parcours d'une requête ou d'une transaction à travers un système distribué. Il permet de visualiser et d'analyser les temps de traitement, les délais et les interactions entre les différents composants du système. Distributed Tracing: Everything You Need To KnowThe role of APM and distributed tracing in observabilityIntro To Tracing: OpenTelemetry & Opentracing MONITORING Peut Mentorer Mentor Le monitoring est le processus de collecte, de surveillance et d'analyse continue des métriques et des données relatives à un système ou à une application, afin de détecter les anomalies, de surveiller les performances, d'identifier les problèmes potentiels et de prendre des mesures pour assurer le bon fonctionnement et l'optimisation du système. How is monitoring different than observability?Observability vs Monitoring - The difference explained with an exampleA Three-Phased Approach to Observability ALERTING Peut Mentorer Mentor Les alertes sont des notifications déclenchées lorsqu'un événement ou une condition prédéfinie se produit dans le système. Elles permettent de détecter et de réagir rapidement à des problèmes potentiels, en envoyant des avertissements aux équipes d'exploitation ou aux administrateurs système. Effective Alerting in Practice9 Steps to Prevent Alert Storms WEB VITALS Les Web Vitals sont un ensemble de métriques de performance clés qui mesurent l'expérience utilisateur sur le web, notamment la vitesse de chargement, la réactivité et la stabilité visuelle. Ils fournissent des indications sur la qualité de l'expérience utilisateur, permettant aux développeurs de détecter les problèmes de performance et d'optimiser leurs sites web en conséquence. Understanding Core Web VitalsWeb VitalsPerformance testing with Google Lighthouse and Cypress DORA METRICS Les DORA Metrics (DevOps Research and Assessment Metrics) sont un ensemble de métriques utilisées pour évaluer et mesurer les pratiques et la performance des équipes de développement et d'exploitation dans le cadre de l'adoption des pratiques DevOps. Elles incluent des mesures telles que le délai de déploiement, la fréquence des déploiements, le temps de rétablissement en cas d'incident et le taux de changement échoué, fournissant ainsi des indicateurs clés pour évaluer l'efficacité des pratiques DevOps et l'agilité de l'équipe. DORA MetricsDORA Metrics - User AnalyticsThe Ultimate Guide to DORA Metrics Tu vois d'autres skills à rajouter dans la catégorie Observability ? Proposer * Politique du confidentialité * CGU * CGV * Mentions légales