Skip to content

Latest commit

 

History

History
294 lines (176 loc) · 32.5 KB

File metadata and controls

294 lines (176 loc) · 32.5 KB

Tweet

Discord

GitHub forks GitHub stars GitHub watchers

Annonce:

Souhaitez-vous devenir un responsable de ce projet et aider à le maintenir? Si vous êtes intéressé, envoyez moi un DM sur Twitter et lisez le guide du mainteneur.

Introduction

Ceci est un tutoriel pour aider les nouveaux contributeurs à participer à un projet simple et facile.

Objectives
  • Apporter une contribution à un projet open source.
  • Devenir plus à l'aise dans l'utilisation GitHub.

Ce tutoriel est également disponible dans d'autres langues (Actuellement disponible en Portugais, Espagnol, et Italien. Des traductions sont les bienvenue).

À qui est-ce destiné?
  • Ceci est 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 pour ceux qui ont un peu plus d'expérience mais qui veulent faire leur première contribution open source, ou obtenir plus de contributions pour plus d'expérience et de confiance.
Pourquoi dois-je faire ça?

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 utilisé dans le 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.

Que vais-je apporter?

Carte de contributeur

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.

Les traductions

Ce tutoriel est également disponible dans d'autres langues (Arabe, Français, Allemagne, Italien, Coréen, Polonais, Portugais, Serbien, Espagnol, and Turc actuellement. Des traductions pour ce README ou le fichier README des responsables sont les bienvenues!).

Index d'accès rapide

Pour contribuer:

Mise en place!

D'abord mettons nous en place pour effectuer le travail
  1. Connectez-vous à votre compte GitHub. Si vous n'avez pas encore de compte, rejoindre GitHub. Je vous recommande de faire le Tutoriel GitHub Hello World avant de continuer.
  2. Télécharger GitHub Desktop app.
    • Alternativement, si vous êtes à l'aise avec Git sur la ligne de commande, vous pouvez le faire (voicifirst-contributions, a similar project that can serve as a guide for the commands needed). OR -Si tu utilises VS Code il est livré avec Git intégré et vous permet de faire ce dont nous avons besoin directement depuis l'éditeur.
    • Cependant, le moyen le plus simple et le plus simple de suivre ce didacticiel consiste à utiliser GitHub Desktop.

Maintenant que vous êtes tous configurés, continuons à contribuer au projet.



Contribuer

Bdevenir un contributeur open source en 10 étapes faciles.

Temps estimé: moins de 30 minutes.

Étape 1: créez ce référentiel

  • L'objectif ici est de faire une copie de ce projet et de le placer dans votre compte.
  • Un référentiel (repo) est la façon dont un projet est appelé sur GitHub et un fork en est une copie.
  • Assurez-vous que vous êtes sur la page principale de ce repo.
  • Cliquez sur le bouton Fork
Fork
  • Vous avez maintenant une copie complète du projet dans votre propre compte

Étape 2: Cloner le référentiel

  • 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
Clone
  • Vous verrez une liste de vos projets et forks sur GitHub.
  • Sélectionnez <your-github-username>/Contribute-To-This-Project.
  • Cliquez sur Clone
Clone project
  • Un projet forké aura le symbole fork sur la gauche.
  • Votre fork aura votre propre nom d'utilisateur GitHub.
votre fork
  • Cela prendra un moment pendant que le projet est copié sur votre disque dur. Je vous recommande de conserver le chemin par défaut qui est généralement .. \ Documents \ GitHub.
  • Vous disposez maintenant d'une copie locale du projet.

Étape 3: créer une nouvelle branche

  • Une fois que le repo a été clonée 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é.
  • Clique sur Current branch
  • ensuite clique sur New
Créer une branche
  • Donnez un nom à votre branche
  • Clique sur Create branch
Nom de la branche
  • Vous pouvez le nommer comme vous voulez, mais comme il s’agit d’une branche pour ajouter une carte avec votre nom au projet, appelez-le your-name-card est une bonne pratique parce qu’elle maintient l’intention de cette branche claire.
  • Publiez votre nouvelle branche sur GitHub
Nom de la branche
  • Vous avez maintenant créé une nouvelle branche distincte du maître.
  • Pour les étapes suivantes, assurez-vous que vous travaillez dans 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.

Na PAS travailler sur la branche master


Étape 4: Ouvrez le fichier index.html

  • 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.html est directement dans le dossier Contribute-To-This-Project.
  • Ouvrez votre éditeur de code (Sublime, VS Code, Atom..etc) et utilisez la commande Open file et trouvez le fichier the 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.
Ouvrir le fichier d’index
  • Maintenant, vous avez le fichier que vous allez modifier ouvert dans votre éditeur et vous êtes prêt à commencer à y apporter des modifications.

Étape 5: Copier le modèle de carte

  • Nous allons faire une copie du modèle de carte pour commencer à travailler dessus
  • Au début du fichier HTML, sous les sections <head> et <header> vous trouverez la section intitulée == TEMPLATE ==
  • Copiez tout ce qui se trouve dans le carré rouge de l’image, à partir du commentaire Contributor card START jusqu'au commentaire Contributor card END
Copier le modèle de carte
  • Collez le tout directement sous le commentaire qui l’indique
  • Assurez-vous qu’il y a une seule ligne d’espace entre le début de votre carte et la dernière fin de la carte. C’est une bonne pratique de garder notre code aussi clair que possible
  • N’utilisez jamais de linters ou de formateurs de style. Le projet à une configuration plus jolie
Coller le modèle de carte
  • C’est maintenant votre carte à personnaliser et à modifier.

Étape 6: appliquez vos modifications

  • Nous allons maintenant commencer à éditer le html, en changeant les champs personnalisables de notre carte.
  • Remplacez 'Nom' par votre nom
  • Remarque: ne changez pas class =" name "
Change name
  • Insérez l'URL de votre compte Twitter href =" Insérez l'URL ici "
  • Saisissez votre identifiant dans le champ de texte
Changer de contact
  • Si vous préférez utiliser un contact autre que Twitter, vous devrez remplacer l'icône Twitter <i class =" fa fa-x-twitter "> </i> en accédant à Font Awesome Icons en recherchant la bonne icône et en remplaçant uniquement la partie fa-x-twitter par la nouvelle icône comme fa-facebook par exemple. Suivez ensuite les mêmes étapes ci-dessus.
  • Parlez-nous de vous
  • Soyez bref et concis. Pensez-y plus comme un tweet qu'un article de blog
Change about
  • Partager avec la communauté 3 liens vers des ressources utiles pour le 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 un débutant, ne vous laissez pas intimider par cela, partagez tout ce que vous savez même si vous pensez que c'est basique. Vous serez surpris du nombre de personnes qui en bénéficieront
Change resources
  • Lien: insérez le lien href =" here " en remplaçant le #
  • Titre: écrivez une brève description title =" here "
  • Nom: écrivez le nom de la ressource dans le champ de texte > 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 + Maj + J (Windows / Linux) ou Cmd + 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.

Étape 7: Validez vos modifications

  • Revenez à l'application de bureau GitHub.
  • Vos modifications auront été ajoutées automatiquement à la zone de préparation.
  • Cela signifie que Git a enregistré toutes les modifications ** enregistrées **.
  • Vous pouvez voir cela reflété dans l'application. Tout ce que vous avez ajouté au fichier sera en vert et les suppressions s'afficheront en rouge.
  • L'étape suivante s'appelle Commit
  • Cela signifie en gros "confirmer les modifications"
Commit changements
  • Voici à quoi devrait ressembler votre en-tête de bureau GitHub
  • Notez le symbole de la fourche à côté du nom du projet dans Current repository
  • Votre succursale actuelle aura le nom que vous lui avez donné à l'étape 3
Commit changements
  • Pour Commettre, vous devez remplir le champ Summary
  • Ceci est le message de validation expliquant ce que vous avez changé
  • Dans ce cas, "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. Votre bouton indiquera quelque chose comme "Commit to" your-branch-name ""
Écrivez un message de validation et validez

Étape 8: transférez vos modifications sur GitHub

  • Vos modifications sont maintenant enregistrées ou validées. Mais ils ne sont enregistrés que localement, c'est-à-dire sur votre ordinateur.
  • La synchronisation des modifications locales avec votre référentiel sur Github s'appelle un Push. Vous «poussez» les modifications de votre référentiel local vers le référentiel distant sur Github.
  • Cliquez sur le bouton Push
Pousser vers GitHub
  • Après quelques secondes, l'opération est terminée et vous avez maintenant exactement la même copie de cette branche sur votre machine ainsi que sur GitHub.

Étape 9: Soumettez un PR

  • 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 la fourche 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 un Demande de tirage parce que vous demandez au responsable du projet d'origine de "tirer" vos modifications dans son projet.
  • Accédez à la page principale de votre fork sur GitHub (il aura l'icône de fork et votre propre nom d'utilisateur en haut).
  • Vers le haut du dépôt, vous verrez un message de demande de tirage en surbrillance avec un bouton vert.
  • Click on the Compare and pull request
Soumettre une demande de tirage
  • Voici à quoi ressemble la page Ouvrir une demande d'extraction.
  • RAPPELEZ-VOUS vous essayez de fusionner votre branche avec le projet d'origine et non avec la brancheMaster sur votre fork.
  • L'image ci-dessous vous donne une idée de ce à quoi devrait ressembler l'en-tê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.
Ouvrir une demande d'extraction
  • Créez une pull request:
  • Écrivez un titre
  • Ajoutez des informations facultatives dans la description
  • Cliquez sur "Créer une demande d'extraction"
Soumettre une demande de tirage
  • Ne soyez pas déconcerté par toutes les options. Il vous suffit de suivre ces trois étapes pour le moment.
  • Laissez cochée l'option «Autoriser les modifications des responsables».
  • Maintenant, une Pull Request sera envoyée au responsable du projet. Dès qu'ils seront examinés et acceptés, vos modifications apparaîtront sur le page Web du projet.

Étape 10: Célébrez!

C'est tout. Vous l'avez fait! Vous avez maintenant 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; ils doivent d'abord être examinés, acceptés et fusionnés par le responsable du projet. Une fois qu'ils sont fusionnés, votre carte doit être visible et en direct sur la page.

Il est tout à fait normal qu'un critique demande des modifications sur un PR. Considérez cela comme une bonne pratique si cela vous arrive. 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'à valider et à pousser vos modifications. Le PR se mettra automatiquement à jour avec les nouvelles modifications.

Je promets que je vais essayer de revoir et de fusionner dès que possible, mais je le fais pendant mon temps libre, donc un retard de quelques jours est inévitable.



Prochaines étapes

  • Revenez dans un moment pour vérifier votre demande de tirage fusionnée.
  • Vous devriez recevoir un e-mail de GitHub lorsque vos modifications ont été approuvées ou si des modifications supplémentaires sont demandées. Et quand le PR est finalement fusionné avec le maître et que votre carte a été ajoutée.
  • Si vous avez trouvé ce projet utile merci de lui donner un: star: star: star: en haut de la page et Tweet à ce sujet pour aider à faire passer le mot Tweet
  • You can follow me and get in touch on Twitter or using any of these other options
  • This is an open source project so apart from contributing your card you are welcome to help fix bugs, improvements, or new features. Open an issue or send a new pull request
  • Thanks for contributing to this project. Now you can go ahead and try contributing to other projects; look for the Good First Issue label for beginner-friendly contribution options.
  • I'm also looking for collaborators to give me a hand in reviewing and merging PRs. If you would like to get more advanced Git practice please send me a DM on Twitter and read the collaborator's guide.

Remerciements

Ce projet est fortement influencé par le projet Roshan Jossey premières contributions avec 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.

Licence

Licence MIT

Retour en haut ↑