Contribute To This Project Download - Contribute To This Project Code Source Download

Contribute To This Project

Autre code source

1.0.0

Télécharger

Contribuer à ce projet

Informations sur l'image

Logo créé avec? Par Candiddeer

Annonce:
Souhaitez-vous devenir mainteneur de ce projet et aider à le maintenir? Si vous êtes intéressé, lisez le Guide du responsable, rejoignez notre serveur Discord et demandez à rejoindre l'équipe chez les responsables du projet.

Index d'accès rapide

Introduction
Objectifs
À qui est-ce?
Pourquoi dois-je faire cela?
Qu'est-ce que je vais contribuer?
Traductions
Installation! :)
Contribuer
- Étape 1: fourchez ce référentiel
- Étape 2: cloner le référentiel
- Étape 3: Créez une nouvelle branche
- Étape 4: Ouvrez le fichier index.html
- Étape 5: Copiez le modèle de carte
- Étape 6: Appliquez vos modifications
- Étape 7: Commissez vos modifications
- Étape 8: Poussez vos modifications à GitHub
- Étape 9: Soumettre un PR (demande de traction)
- Étape 10: Célébrez
Étapes suivantes
Remerciements
Licence
Top 100 contributeurs

Introduction

Il s'agit d'un tutoriel pour aider les nouveaux contributeurs à participer à un projet simple et facile.

Objectifs

Apporter une contribution à un projet open source.
Devenez plus à l'aise dans l'utilisation de GitHub.

À qui est-ce?

C'est pour les débutants absolus. Si vous savez comment écrire et modifier une balise d'ancrage <a href="" target=""></a> , 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 obtenir plus de contributions pour plus d'expérience et de confiance.

Pourquoi dois-je faire cela?

Tout développeur Web, aspirant ou expérimenté, doit utiliser le contrôle de version Git, et GitHub est le service d'hébergement GIT le plus populaire utilisé par tout le monde. C'est aussi le cœur de la communauté open source. Se mettre à l'aise avec Github est une compétence essentielle. Faire une contribution à un projet augmente votre confiance et vous donne quelque chose à montrer 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.

Qu'est-ce que je vais contribuer?

Contributor Card

Vous allez apporter une carte comme celle-ci à la page Web de ce projet. Il inclura votre nom, votre manche 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 les personnaliser avec vos propres informations.

Traductions

Ce tutoriel est également disponible dans d'autres langues

Arabe (عربي)	Bangla (বাংলা)	Chinois (traditionnel) (繁體中文)	Néerlandais	Anglais (anglais)
Français (Français)	Allemand (Deutsch)	Hindi (हिंदी)	Italien (Italiano)	Japonais (日本語)
Coréen (한국어)	Polon (Polski)	Portugais (portugais)	Russe (рсский)	Serbe (српски)
Espagnol (español)	Turc (türkçe)	Ukrainien (українська)	Norvégien (Norsk)	Malalam

Les documentations de traductions pour les projets sont les bienvenues. Lisez Translation Guide pour contribuer.

Installation! :)

Note

Ce tutoriel est basé sur GitHub PC. Si vous êtes à l'aise avec le terminal, accédez à ce tutoriel (cliquez ici)

Faisons d'abord la configuration pour faire le travail

Connectez-vous à votre compte GitHub. Si vous n'avez pas encore de compte, rejoignez GitHub. Je vous recommande de faire le tutoriel GitHub Hello World avant de continuer.
Téléchargez l'application GitHub Desktop.
- Alternativement, si vous êtes à l'aise d'utiliser GIT sur la ligne de commande, vous pouvez le faire, voici le lien vers le tutoriel CLI.
- Si vous utilisez VS Code, il est livré avec GIT intégré et vous permet de faire ce dont nous avons besoin directement de l'éditeur.
- Cependant, le moyen le plus simple et le plus simple de suivre ce tutoriel est d'utiliser GitHub Desktop.

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

↑ Aller au haut ↑

Contribuer

Devenez un contributeur open source en 10 étapes faciles.

Temps estimé: moins de 30 minutes .

Étape 1: fourchez 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é GitHub et une fourche en est une copie.
Assurez-vous que vous êtes sur la page principale de ce dépôt.


Cliquez sur le bouton Fork

Vous avez maintenant une copie complète du projet dans votre propre compte.

↑ Aller au haut ↑

É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 GitHub Desktop. Dans l'application:


Cliquez sur le fichier puis sur le référentiel de clone

Vous verrez une liste de vos projets et fourches sur GitHub.
Sélectionnez <your-github-username>/Contribute-To-This-Project .
Cliquez sur le clone

↪️ Un projet fourchu aura le symbole de la fourche à gauche. Votre fourche aura votre propre utilisateur GitHub

Cela prendra un moment car le projet est copié sur votre disque dur. Je vous recommande de garder le chemin par défaut qui est généralement ..DocumentsGitHub .
Vous avez maintenant une copie locale du projet.

↑ Aller au haut ↑

Étape 3: Créez une nouvelle branche

Une fois le dépô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 garder vos modifications séparées de la partie principale du projet appelé 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 cliquez sur `New`
↪️ Donnez un nom à votre branche, puis cliquez sur `Create branch`
↪️ Publiez votre nouvelle branche sur GitHub

Vous pouvez le nommer ce que vous voulez, mais comme il s'agit d'une branche pour ajouter une carte avec votre nom au projet, l'appeler your-name-card est une bonne pratique car elle maintient l'intention de cette branche claire.
Vous avez maintenant créé une nouvelle branche distincte du maître.
Pour les prochaines étapes, 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 GitHub Desktop où il indique la branche actuelle .

Ne travaillez pas sur la branche master

↑ Aller au haut ↑

Étape 4: Ouvrez le fichier index.html

Nous devons maintenant ouvrir le fichier que nous allons modifier avec votre éditeur de code préféré.
Trouvez le dossier du projet sur votre ordinateur. Si vous avez gardé 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 localisez le fichier index.html dans le répertoire principal du projet


↪️ Vous pouvez également localiser le fichier sur votre disque dur, un clic droit et ouvrir avec votre éditeur

Vous avez maintenant le fichier que vous allez modifier ouvrir dans votre éditeur et vous êtes prêt à commencer à apporter des modifications.

↑ Aller au haut ↑

Étape 5: Copiez le modèle de carte

Nous ferons une copie du modèle de carte pour commencer à y travailler
À l'intérieur du <body> , vous trouverez une section <div class="container"> . Cela contient beaucoup d'autres sections.
Les 2 premières sections sont exactement comme: <div class="row"> . Les effondrer en cliquant sur la flèche par leurs côtés sur votre éditeur de code VS comme indiqué dans l'image ci-dessous. (Si vous utilisez un autre éditeur, vous ne pourrez peut-être pas utiliser la fonctionnalité. Vous devrez simplement faire défiler vers le bas). L'effondrement permet de masquer facilement certains composants de code que vous n'aurez pas besoin de modifier.
Vous devriez maintenant voir la section qui abrite toutes les cartes de contribution: <div class="grid" id="contributions">

À l'intérieur de cette section, vous trouverez la section étiquetée == TEMPLATE ==
Copiez tout dans la place rouge dans l'image, du commentaire Contributor card START au commentaire Contributor card END

Collez le tout directement en dessous du commentaire l'indiquant; en plus de la carte du contributeur la plus récente.
Assurez-vous qu'il existe une seule ligne d'espace entre la fin de votre carte et le début de la dernière carte. Ajoutez également une ligne d'espace entre le début de votre carte et la ligne avec le commentaire === Paste YOUR CARD directly BELOW this line === . C'est une bonne pratique de garder notre code aussi clair que possible
N'utilisez jamais de liners ou de formateurs de style. Le projet a une configuration plus jolie

C'est maintenant votre carte pour vous personnaliser et éditer.

↑ Aller au haut ↑

Étape 6: Appliquez vos modifications

Nous allons maintenant commencer à modifier HTML, en modifiant les champs personnalisables de notre carte.

↪️ Remplacez le «nom» par votre nom

Remarque: ne changez pas class="name"

↪️ Insérez l'URL de votre compte Twitter `href="Insert URL here"` , tapez votre poignée dans le champ de texte

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 allant à la recherche d'icônes impressionnantes pour la recherche de la bonne icône et en remplaçant uniquement la partie fa-x-twitter avec la nouvelle icône comme fa-facebook par exemple. Suivez ensuite les mêmes étapes ci-dessus.


↪️ Dites-nous quelque chose sur vous. Gardez-le court et doux. Pensez-y plus comme un tweet qu'un article de blog

↪️ Partagez avec la communauté 3 Liens vers des ressources utiles pour le développement Web. Cela peut être n'importe quoi, une vidéo, un discours, un podcast, un article, une référence ou un outil. Si vous êtes un débutant, ne soyez pas intimidé par cela, partagez ce que vous savez, même si vous pensez que c'est basique. Vous serez surpris du nombre de personnes.

Lien: insérez le lien href="here" Remplacement du # . Veuillez vous abstenir d'utiliser des raccourcisseurs d'URL ou des URL qui ne sont pas du site que vous publiez!
Titre: Écrivez une brève description title="here" .
Nom: Écrivez le nom de la ressource dans le champ de texte >here</a> .
Assurez-vous que vous avez enregistré toutes vos modifications .
Testez vos modifications . C'est important! Ouvrez le fichier HTML dans votre navigateur (en double-cliquez dessus par exemple) et voyez à quoi ressemblera votre carte sur le site. Voyez que toute la page se ressemble toujours et rien n'est cassé. Cliquez sur vos liens et assurez-vous qu'ils fonctionnent. Ouvrez la console (Ctrl + Shift + J (Windows / Linux) ou CMD + Opt + J (Mac)) et vérifiez qu'il n'y a pas de messages d'erreur.
Super, vous avez fini de modifier votre code! Les prochaines étapes enverront vos modifications à GitHub, puis les soumettront pour être fusionnée avec le projet principal.

↑ Aller au haut ↑

Étape 7: Commissez vos modifications

Retournez à l'application GitHub Desktop.
Vos modifications auront été ajoutées automatiquement à la zone de stadification.
Cela signifie que Git a enregistré tous les changements enregistrés .
Vous pouvez le voir reflété dans l'application. Tout ce que vous avez ajouté au fichier sera en vert, et les suppressions s'afficheront comme rouge.


↪️ L'étape suivante est appelée `Commit` . Cela signifie à peu près `confirm the changes`

↪️ C'est à quoi devrait ressembler votre en-tête de bureau GitHub. Remarquez 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 vous `Commit` vous devez remplir le champ `Summary` . Ceci est le message de validation expliquant ce que vous avez changé. Dans ce cas, `"Add my card information"` serait un message raisonnable. Facultativement, vous pouvez ajouter une `Description` plus détaillée. Cliquez sur le bouton `Commit` . Votre bouton dira quelque chose comme `Commit to "your-branch-name"`

↑ Aller au haut ↑

Étape 8: Poussez vos modifications à GitHub

Vos modifications sont désormais enregistrées ou engagées. Mais ils ne sont sauvés que localement, c'est-à-dire sur votre ordinateur.
La synchronisation des modifications locales avec votre référentiel sur GitHub est appelée push . Vous "poussez" les modifications de votre référentiel local au référentiel distant sur GitHub.

↪️ Cliquez sur le bouton `Push`

Après quelques secondes, l'opération est terminée et maintenant vous avez exactement la même copie de cette branche sur votre machine ainsi que sur GitHub.

↑ Aller au haut ↑

Étape 9: Soumettre un PR (demande de traction)

C'est le moment où vous attendiez; Soumettre une demande de traction (PR).
Jusqu'à présent, tout le travail que vous avez fait a été sur la fourche du projet, qui, comme vous vous souvenez, réside sur votre propre compte de GitHub.
Il est maintenant temps d'envoyer vos modifications au projet principal pour être fusionnée avec elle.
C'est ce qu'on appelle une demande de traction car vous demandez au mainteneur du projet d'origine de "tirer" vos modifications dans leur projet.
Accédez à la page principale de votre fourche sur GitHub (il aura l'icône de la fourche et votre propre nom d'utilisateur en haut).
Vers le haut du dépôt, vous verrez un message de demande de traction en surbrillance avec un bouton vert.


↪️ Cliquez sur la `Compare and pull request`

↪️ C'est à quoi ressemble l' `Open a pull request` .

N'oubliez pas que vous essayez de fusionner votre branche avec le projet d'origine et non avec la branche Master de votre fourche .
L'image ci-dessous vous donne une idée de la façon dont l'en-tête de votre demande de traction devrait ressembler.
À gauche se trouve le projet original, suivi de la branche maître. À droite, votre fourche et la branche que vous avez créée.


↪️ Créer une demande de traction: Écrivez un titre, ajoutez des informations facultatives dans la description et cliquez sur `Create pull request`

Ne soyez pas décroché par toutes les options. Il vous suffit de faire ces trois étapes pour l'instant.
Laissez l'option Allow edits from maintainers cochés.
Désormais, une demande de traction sera envoyée au responsable du projet. Dès qu'il est examiné et accepté, vos modifications apparaîtront sur la page Web du projet.

↑ Aller au haut ↑

Étape 10: Célébrez

C'est ça. 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 vivre sur la page.

Il est très normal pour un réviseur de demander des modifications sur un RP. Pensez-y comme une bonne pratique si cela vous arrive. Gardez un œil sur les commentaires et les modifications demandées. Une fois que vous avez apporté les modifications demandées (dans votre succursale), tout ce que vous avez à faire est de vous engager et de pousser vos modifications. Le PR mettra à jour automatiquement avec les nouvelles modifications.

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

↑ Aller au haut ↑

Étapes suivantes

Revenez un certain temps pour vérifier votre demande de traction 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 lorsque le PR est finalement fusionné avec le maître et que votre carte a été ajoutée.
Vous pouvez également apprendre à contribuer à partir de cette série gratuite : comment contribuer à un projet open source sur Github
Si vous avez trouvé ce projet utile , veuillez lui donner une étoile en haut de la page et tweeter à ce sujet pour aider à faire passer le mot
Vous pouvez rejoindre notre serveur Discord
Vous pouvez me suivre et entrer en contact? (Twitter) ou utiliser l'une de ces autres options
Il s'agit d'un projet open source, donc en plus de contribuer votre carte, vous êtes les bienvenus pour aider à corriger les bogues, les améliorations ou les nouvelles fonctionnalités. Ouvrez un problème ou envoyez une nouvelle demande de traction
Pour aider à améliorer notre communauté, jetez un œil à l'onglet Discussions GitHub situé à côté pour tirer les demandes. Cette zone est un endroit pour vous présenter, participer à des discussions plus approfondies sur l'open source et communiquer avec les responsables du projet. Allez-vous nous aider à construire cette fonctionnalité et à améliorer notre communauté?
Merci d'avoir contribué à ce projet . Vous pouvez maintenant aller de l'avant et essayer de contribuer à d'autres projets; Recherchez le Étiquette pour les options de contribution adaptées aux débutants.
Je recherche également des collaborateurs pour me donner un coup de main dans l'examen et la fusion des RP. Si vous souhaitez obtenir une pratique GIT plus avancée, lisez le Guide du maintien du maintien, rejoignez notre serveur Discord et demandez à l'adhésion de l'équipe chez les responsables du projet.

↑ Aller au haut ↑

Remerciements

Ce projet est fortement influencé par le grand projet de première contribution de Roshan Jossey avec son excellent tutoriel.

Il est également particulièrement inspiré par la grande communauté autour de #googleudacityscholars The Google Challenge Bourse: Front-End Web Dev, Class of 2017 Europe.