Logo créé avec 💖 par CandidDeer
Souhaitez-vous devenir un responsable de ce projet et aider à le maintenir? Si vous êtes intéressé, lisez le guide du mainteneur et envoyez-moi un DM sur Twitter.
- Introduction
- Objectifs
- Pour qui est ce projet?
- Pourquoi contribuer?
- Que vais-je contribuer?
- Traductions
- Setup
- Contribuer
- Étape 1: Forker le repo
- Étape 2: Cloner le repo
- Étape 3: Créer une nouvelle branche
- Étape 4: Ouvrir le fichier index.html
- Étape 5: Copier la template de la carte
- Étape 6: Apporter des modifications
- Étape 7: Appliquer un commit
- Étape 8: Faire un push à GitHub
- Étape 9: Soumettre une PR (Pull Request)
- Étape 10: Fêter ça
- Prochaines étapes
- Remerciements
- Licence
- Top 100 Contributeurs
Ceci est un tutoriel pour aider les nouveaux contributeurs à participer à un projet simple et facile.
- Apporter une contribution à un projet open source.
- Devenir plus à l'aise dans l'utilisation de GitHub.
- Pour les débutants absolus. Si vous savez comment écrire et modifier une balise d'ancrage
<a href="" target=""></a>, alors vous devriez pouvoir le faire. - C'est aussi pour ceux qui ont un peu plus d'expérience mais qui veulent faire leur première contribution open source, ou pour ceux qui souhaitent faire plus de contributions - pour monter en expérience et prendre davantage confiance.
Tout développeur web, en herbe ou expérimenté, doit utiliser le contrôle de version Git, et GitHub est le service d'hébergement Git le plus populaire au monde. C'est aussi le cœur de la communauté Open Source. Se familiariser avec GitHub est une compétence essentielle. Contribuer à un projet renforce votre confiance et vous donne quelque chose à afficher sur votre profil GitHub.
Si vous êtes un nouveau développeur et que vous vous demandez si vous avez besoin d'apprendre Git et GitHub, voici la réponse: Vous auriez dû apprendre Git hier.
Vous allez contribuer une carte comme celle-ci à la page web du projet. Il comprendra votre nom, votre pseudo Twitter, une brève description et 3 liens vers des ressources utiles pour les développeurs web que vous recommandez.
Vous allez faire une copie du modèle de carte dans le fichier HTML et le personnaliser avec vos propres informations.
Ce tutoriel est également disponible dans d'autres langues
Les traductions de documentations sont les bienvenues. Lisez le
Guide du Traducteurpour contribuer.
Note
Ce tutoriel est basé sur l'application GitHub Desktop. Si vous êtes confortable avec un terminal, essayez ce tutoriel (cliquez Ici)
Commençons par configurer l'environnement de travail :
- Connectez-vous à votre compte GitHub. Si vous n'en avez pas encore, créez un compte. Je vous conseille de faire le Tutoriel GitHub Hello World avant de continuer.
- Téléchargez l'application GitHub Desktop.
- Autrement, si vous êtes confortable avec le terminal, vous pouvez l'utiliser: voici le lien vers le tutoriel CLI.
- Si vous utilisez VS Code, il propose un Git intégré et permet de faire le nécessaire directement depuis l'éditeur.
- La manière la plus simple et la plus directe de suivre ce tutoriel reste Github Desktop.
Maintenant que vous avez la configuration nécessaire, passons à la partie contribution.
Devenir un contributeur open source en 10 étapes faciles.
Temps estimé: moins de 30 minutes.
- L'objectif ici est de faire une copie de ce projet sur votre compte.
- Un repo (dépôt) est la façon dont un projet est appelé sur GitHub, et un fork en est une copie par un autre utilisateur.
- Assurez-vous que vous êtes sur la page principale de ce repo.
 |
|---|
| Cliquez sur le bouton Fork |
- Vous avez maintenant une copie complète du projet sur votre propre compte
- Maintenant, nous voulons faire une copie locale du projet. C'est une copie enregistrée sur votre propre machine.
- Ouvrez l'application de bureau GitHub. Dans l'appli:
 |
|---|
| Cliquez sur File puis sur Clone repository |
- Vous verrez une liste de vos projets et forks sur GitHub.
- Sélectionnez
<votre-nom-github>/Contribute-To-This-Project. - Cliquez sur Clone
 |
|---|
| ↪️ Un projet forké aura le symbole fork sur la gauche. Votre fork aura votre propre nom d'utilisateur GitHub. |  |
|---|
- La copie du projet sur votre disque dur prendra un moment. Il est conseillé de garder le chemin par défaut, qui est généralement
..\Documents\GitHub. - Vous avez maintenant une copie locale du projet.
- Une fois que le repo a été cloné et que vous l’avez ouvert dans GitHub Desktop, il est temps de créer une nouvelle branche.
- Une branche est un moyen de séparer vos modifications de la partie principale du projet, appelée
master. Par exemple, si les choses tournent mal et que vous n’êtes pas satisfait de vos modifications, vous pouvez simplement supprimer la branche et le projet principal ne sera pas affecté.
↪️ Cliquez sur Current branch, puis sur New |
 |
|---|---|
↪️ Donnez un nom à votre branche, puis cliquez sur Create branch |
 |
| ↪️ Publiez votre nouvelle branche sur GitHub |  |
- Vous pouvez la nommer comme vous voulez, mais puisqu'il s’agit d’une branche pour ajouter une carte avec votre nom au projet, l'appeler
your-name-cardest une bonne pratique, parce que cela rend l’intention de la branche claire. - Vous avez créé une nouvelle branche, séparée de la branche master.
- Pour les étapes suivantes, assurez-vous que vous travaillez sur cette branche. Vous verrez le nom de la branche sur laquelle vous vous trouvez en haut au centre de l’application de bureau GitHub, où il est dit Current branch.
Ne PAS travailler sur la branche master
- Maintenant, nous devons ouvrir le fichier que nous allons éditer avec votre éditeur de code préféré.
- Recherchez le dossier du projet sur votre ordinateur. Si vous avez conservé la valeur par défaut, cela devrait être quelque chose comme
your-computer > Documents > GitHub > Contribute-To-This-Project - Le fichier
index.htmlest à la racine du dossierContribute-To-This-Project. - Ouvrez votre éditeur de code (Sublime, VS Code, Atom..etc), utilisez la commande
Open fileet trouvez le fichier index.html dans le répertoire principal du projet
 |
|---|
| ↪️ Vous pouvez également localiser le fichier sur votre disque dur, cliquer avec le bouton droit de la souris, et l’ouvrir avec votre éditeur. |
- Vous avez maintenant le fichier ouvert dans votre éditeur et vous êtes prêt à y apporter des modifications.
- Nous allons faire une copie du modèle de carte pour commencer à travailler dessus
- Dans le
<body>, vous trouverez une section<div class="container">. Elle contient d'autres sections. - Les 2 premières sections ont ce format:
<div class="row">. Réduisez-les en cliquant la flèche sur le côté de VS Code, comme indiqué sur l'image en-dessous. (Si vous utilisez un autre éditeur, il est possible que vous n'ayez pas la fonctionnalité ; vous devrez descendre manuellement jusqu'à la section qui nous intéresse) - Vous devriez maintenant voir la section qui contient les cartes de contribution :
<div class="grid" id="contributions">
 |
|---|
- Dans cette section, vous trouverez la section intitulée
== TEMPLATE == - Copiez tout ce qui se trouve dans le carré rouge de l’image, du commentaire
Contributor card STARTjusqu'au commentaireContributor card END
 |
|---|
- Collez le tout directement sous le commentaire qui l’indique; juste au-dessus de la contribution la plus récente.
- Assurez-vous qu’il y a une ligne de marge entre la fin de votre carte et le début de la dernière. Ajoutez également une ligne de marge au début de votre carte, en-dessous du commentaire
=== Paste YOUR CARD directly BELOW this line ===. C’est une bonne pratique qui permet de garder notre code aussi clair que possible - N’utilisez pas de linters ou de formateurs de style. Le projet à une configuration Prettier
 |
|---|
- Vous avez maintenant une carte à personnaliser et à modifier.
- Nous allons maintenant commencer à éditer le html, en changeant les champs personnalisables de notre carte.
| ↪️ Remplacez 'Your name' par votre nom |  |
|---|
- Note: Ne changez pas
class="name"
↪️ Copiez l'URL de votre compte Twitter dans href="URL ici", et votre identifiant à la place de 'Your handle' |
 |
|---|
- Si vous préférez utiliser un contact autre que Twitter, vous allez devoir remplacer l'icône Twitter
<i class="fa fa-x-twitter"></i>en allant sur Font Awesome Icons et en trouvant un icône plus approprié. Il faudra remplacer l'identificateurfa-x-twitterpar un autre icône,fa-facebookpar example, et répéter les étapes précédentes pour l'URL et l'identifiant.
 |
|---|
| ↪️ Parlez-nous de vous. Soyez bref et concis. Voyez ça comme un tweet plutôt qu'un article de blog. |
 |
| ↪️ Partagez avec la communauté 3 liens vers des ressources que vous trouvez utiles au développement web. Cela peut être n'importe quoi: une vidéo, une conférence, un podcast, un article, une référence ou un outil. Si vous êtes débutant, ne vous laissez pas intimider, partagez ce que vous connaissez, même si vous trouvez ça basique. Vous serez surpris par le nombre de personnes qui trouveront ça utile. |
- Lien: insérez le lien dans
href="ici", en remplaçant le#. Évitez les URL raccourcis, ou les liens qui pointent vers d'autres sites que celui que vous voulez montrer. - Titre: écrivez une description rapide dans
title="ici". - Nom: écrivez le nom de la ressource dans le champ
>ici</a>. - Assurez-vous d'avoir enregistré toutes vos modifications.
- Testez vos modifications. C'EST IMPORTANT! Ouvrez le fichier html dans votre navigateur (en double-cliquant dessus par exemple) et voyez à quoi ressemblera votre carte sur le site. Vérifiez que la page entière est toujours la même et que rien n'est cassé. Cliquez sur vos liens et assurez-vous qu'ils fonctionnent. Ouvrez la console (
Ctrl + Shift + J(Windows / Linux) ouCmd + Opt + J(Mac)) et vérifiez qu'il n'y a pas de messages d'erreur. - Génial, vous avez fini de modifier votre code! Les étapes suivantes enverront vos modifications à GitHub, puis les soumettront pour être fusionnées avec le projet principal.
- Revenez à l'application de bureau GitHub.
- Vos modifications auront été ajoutées automatiquement à la zone de staging.
- Cela signifie que Git a noté toutes les modifications enregistrées.
- Cela devrait être reflété dans l'application. Les additions au fichier seront en vert, et les suppressions s'afficheront en rouge.
 |
|---|
↪️ L'étape suivante s'appelle Commit. Cela signifie, grossièrement, confirmer les modifications |
 |
↪️ Voici à quoi devrait ressembler votre entête de bureau GitHub. Notez le symbole de la fourche à côté du nom du projet dans Current repository ; votre Current branch aura le nom que vous lui avez donné à l'étape 3 |
 |
↪️ Pour Commit, vous devez remplir le champ Summary. C'est le message de validation expliquant ce que vous avez changé. Ici, "Ajout des informations de ma carte" serait un message raisonnable. Vous pouvez éventuellement ajouter une Description plus détaillée. Cliquez sur le bouton Commit. Le bouton devrait dire Commit to "your-branch-name" |
- Vos modifications sont maintenant enregistrées et committées. Mais les changements ne sont qu'en local, c'est-à-dire sur votre ordinateur.
- La synchronisation des modifications locales avec votre repo Github s'appelle un Push. Vous «poussez» les modifications de votre dépôt local vers le dépôt distant sur Github.
↪️ Cliquez sur le bouton Push |
 |
|---|
- Après quelques secondes, l'opération est terminée et vous avez la même version de cette branche sur GitHub que sur votre ordinateur.
- C'est le moment que vous attendiez; soumettre une Pull Request (PR).
- Jusqu'à présent, tout le travail que vous avez effectué a été sur votre fork du projet, qui, comme vous vous en souvenez, réside sur votre propre compte de GitHub.
- Il est maintenant temps d'envoyer vos modifications au projet principal pour les fusionner.
- C'est ce qu'on appelle une Pull Request, parce que vous demandez au responsable du projet d'origine de "tirer" (pull) vos modifications dans son projet.
- Allez à la page principale de votre fork sur GitHub (elle aura l'icône de fork et votre nom d'utilisateur en haut).
- Vers le haut du repo, vous verrez un message de pull request en surbrillance, avec un bouton vert.
 |
|---|
↪️ Cliquez sur Compare and pull request |
 |
↪️ Voilà à quoi la page Open a pull request ressemble. |
- RAPPELEZ-VOUS: vous essayez de fusionner votre branche avec le projet d'origine, et non avec la branche
Masterde votre fork. - L'image ci-dessus vous donne une idée de ce à quoi devrait ressembler l'entête de votre pull request.
- Sur la gauche se trouve le projet d'origine, suivi de la branche principale. Sur la droite se trouve votre fork et la branche que vous avez créée.
 |
|---|
↪️ Créez une pull request: écrivez un titre, ajoutez les informations facultatives dans la description, et cliquez sur Create pull request |
- Ne soyez pas déconcerté par toutes les options. Il vous suffit de suivre ces trois étapes pour le moment.
- Laissez l'option
Allow edits from maintainerscochée. - Maintenant, une Pull Request sera envoyée au responsable du projet. Dès qu'elles ont été examinées et acceptées, vos modifications apparaîtront sur le page Web du projet.
C'est tout. Vous l'avez fait! Vous avez contribué à l'open source sur GitHub.
Vous avez ajouté du code à une page web en direct: https://syknapse.github.io/Contribute-To-This-Project
Vos modifications ne seront pas visibles immédiatement; elles doivent d'abord être examinées, acceptées et fusionnées par le responsable du projet. Une fois vos changements fusionnés, votre carte sera visible en direct sur la page.
Il est tout à fait normal qu'un reviewer demande des modifications sur une PR. Si cela vous arrive, considérez ça comme un entraînement aux bonnes pratiques. Gardez un œil sur les commentaires et les modifications demandées. Une fois que vous avez effectué les modifications demandées (de retour dans votre branche), il ne vous reste plus qu'à commit et à push vos modifications. La PR se mettra automatiquement à jour avec les nouvelles modifications.
Je promets d'essayer de lire et de fusionner les changements dès que possible, mais je le fais sur mon temps libre, un délai de quelques jours est donc inévitable.
- Revenez dans un moment pour vérifier la fusion de votre pull request.
- Vous devriez recevoir un e-mail de GitHub lorsque vos modifications ont été approuvées, ou si des modifications supplémentaires sont demandées. Vous en recevrez un autre une fois que la PR est fusionnée avec
masteret que votre carte a été ajoutée. - Vous pouvez aussi apprendre comment contribuer de cette série gratuite: Comment Contribuer à un Projet Open Source sur GitHub
- Si vous avez trouvé ce projet utile, n'hésitez pas à lui donner une ⭐ star ⭐ en haut de la page et à écrire un tweet pour faire passer le mot
- Vous pouvez me suivre et me contacter sur 𝕏 (Twitter) ou via une de ces options
- Ce projet est open source, ce qui veut dire qu'en dehors de votre carte, vous êtes encouragé à aider dans la correction de bugs, l'amélioration et l'ajout de features. N'hésitez pas à ouvrir une issue ou à faire une nouvelle pull request
- Pour aider notre communauté, regardez l'onglet Github Discussions à côté des Pull Requests. C'est un endroit pour se présenter, parler de l'open source plus en détail, et communiquer avec les responsables du projet (maintainers). Allez-vous nous aider à développer cette feature, et porter la communauté?
- Merci pour votre contribution à ce projet. Vous pouvez maintenant essayer de contribuer à d'autres projets; cherchez des issues avec le label
, indiquant des bonnes possibilités de contribution pour les débutants. - Je cherche également des collaborateurs pour m'aider à lire et fusionner les PRs. Si vous voulez développer votre expérience sur Git, rejoignez le serveur Discord et lisez le guide du mainteneur.
Ce projet a été fortement influencé par le projet de Roshan Jossey, first-contributions, et de son excellent tutoriel.
Il est également particulièrement inspiré par la grande communauté autour de #GoogleUdacityScholars: The Google Challenge Scholarship: Front-End Web Dev, promotion 2017 Europe.
Ce projet est sous la Licence MIT.