Git for Beginners: Writing and Approving Pull Requests in GitHub (Part 6)

when you're working with gait you can push and pull code when you push code you're putting those files on a server you're pushing it online when you pull code you're downloading those files you're pulling it off the server so for request is an official request to pull or merge your code today we're going to talk about the pull request process how to write it approve it submit it let's dive in okay okay okay if you're near this channel my name is Amy Denton I'm a web designer developer if you're looking at getting into this space sometimes it's hard to know where to start or what resources to trust I want to help you level up and get to where you want to be if this sounds interesting to you hit the subscribe button below it's a big part of development because it's one way that developers are able to work together if you're not sure what kit is how to use it why you would want to use it how to get it installed on your computer be sure to check out some of the other videos in my series linked in the card above before we jump into the code terminal and github let's talk about why pull requests are important and why you might want to use one overstay merging directly into master your canna team a pull request allows other members of your team to review the changes that you're making this is a critical step for maintaining the quality and consistency of your codebase usually an admin or a code owner are the only people that can approve a pull request if you're contributing to an open-source project a pull request allows the code owner to ensure that the changes you're making are in line with their long-term vision of the project even if you're working on a solo project pull request can still be beneficial lately I've been rebuilding a self teach new website it's a Gatsby site built on net Liffe I and anytime I create a pull request net liffe I will automatically publish that code on a randomly generated URL I can test the code on the server and make sure everything is working before I merge it into master this keeps broken builds and bugs off the live site hopefully I've convinced you so let's talk about what the process looks like all my code is on github I'll show you what the process looks like but if you're using another service like bitbucket or gitlab the process will be similar let's start with the jokes repository that we've used in other videos I'll include a link to again have in the description below we're going to add a new jokes let's open up the terminal and create a new branch so I'm going to type git checkout - the new joke so that - B says create a new branch and we're going to call it a new joke and since we use checkout it moves us on to that branch in the S code let's open up our knock-knock jokes txt file and we're going to add the following joke to the bottom so I say knock knock who's there kanga can you do actually it's a kangaroo so let's go back to the terminal and we want to commit it so get add knock-knock jokes got text get commit okay no let's push this to github so I'm gonna say git remote add github and we need the address for our repository so I'm gonna copy this guy and paste him in our terminal here we're saying we want to add a remote repository and github is the name of that remote most places will say origin here but technically you can name it whatever you want and I think it's a little easier to read and know where your code is going if you name it what it actually is migrated projects before from bitbucket to github and labeling your remotes like this makes it a lot easier to know where you're pushing your code to enter this line right here at link to our github repository but it did not push our code on line so now I'm gonna type git push set upstream github new joke since this is the first time that we're pushing this branch to get in I have to include this extra information set upstream tubs get where we want to send our code github is the name of our remote that we labeled up here and a new joke is the name of the branch that we want to use on github so we have our new joke branch on our local machine will have our new joke branch on github as well hit enter so like I said before you don't have to include this sent upstream flag every time only the first time you push a branch I'll show you so in the knock-knock jokes text file I'm gonna add another joke so I'm going to say knock knock who's there cactus cactus who cactus makes perfect give that a safe and now in the terminal I'm gonna type git add get commit edit a cactus knock-knock joke hit enter and now I'm just gonna type git push and you'll notice it works now if we go back to github it knows that we recently pushed code and will give us a nice notice at the top all I need to do is just click this button compare and pull request eventually this message will disappear so let me show you another place you can go click on this pull requests tab at the top you'll notice a box at the top here too but I'm gonna click on this a new pull request button on this page it says compare changes unless to different branches so we want to compare master to our new branch on this page it shows all the commits that were made and the differences in your final code from the master branch this all looks good to me so I'm gonna click on the create pull request button now a they give our pull request a title and a brief description okay if this is a team project you want to bring the person reviewing your code up to speed as quickly as possible I have a template that I used to cried on my pull request I have a sweet little program called text expander that makes this really easy with this program you can set little text snippets and it will expand that text if for example I can type semicolon tha and I'll expand into thanks Amy that snippets for my mailing address my phone number my website you name it a lot of times I'll start these snippets with a semicolon because words don't start with semicolons in our case I have a pull request template setup with the snippet semicolon pull and github if I type semicolon pull it'll expand out our pull request template include a link to text expander and a link to this template as a gist in the description below the text expander piece is just a bonus you can actually set up templates within github so that when you create a new pull request this template is already loaded in I'll show you really quick how to do this and then we can walk through everything on the template and the terminal let's go back to our master branch so get check outs master in vs code I'm going to create a new file called pull request template MD it has to be named exactly like this in order for it to work inside this file I'm going to add our template and save it in the terminal I'm gonna go through the same song and dance so it get add get commit added a PR template get push now instead of creating this PR I'm going to click on the code tab you'll notice it simply pushed directly to master technically that's not a good practice you'll see pull request template in our file list this time I'm gonna click on compare and pull request button you'll notice we didn't have to select the branches up here github recognized that automatically and you'll see that our template is loaded in our PR now let's walk through everything in this template it's written in markdown so if you see the double Asterix or the pound sign that's all part of formatting if you click on this preview tab you can see how it's going to look so the first thing in our template is this clubhouse ID clubhouse is a website app that you can use to manage your project and work through features so a lot of times I'll include this story ID as part of the title so ch4 Clubhouse if I were using github issues I'd say gh and then I have a title for the issue so in this case we created a new joke so this is perfect then in a template I have the clubhouse ID so actually include a full link to the tickets here at the top then under feature description I'll quickly summarize this feature this may seem redundant but remember the whole idea here is to help the person that's reviewing your PR to get up to speed as soon as possible and I shouldn't have to click over to club house unless they really need to under the analysis and design section I might include a link to that figma file or link out so envisioned this would be a good place to write specifics about the design implementation under the solution description alright about how I solve the problem remember PRS are just as much about maintaining the code based quality and so you may want to explain your line of reasoning and why you made the change that you did under output screenshots I'll upload a screenshot of what it looked like before and after I made the change github makes this really easy I'll just put my cursor where I want the image to go and then drag and drop the screenshot on to the text box github will upload the photo and write the markdown code for me quick protip sometimes I'll use the cloud app to create an animated gif this is perfect for what I'm trying to show motion or what happens when a user clicks or hovers over a button in the address affected an insured section you can list out areas of the code that might be affected by the change if a change was only supposed to be specific to a small portion of the app I'll include that information here that way a reviewer will know how extensive the changes and if they see another part of the app change they'll know whether that was intentional or not so under tests I'll write any information about the tests that were added and was the feature tested on all browsers this is a checklist of the different browser supported so you can check off these items by putting an X inside the brackets then in this last section related PRS this is helpful if we branched off of something other than master or if there's another feature that's closely related to this one sometimes it's important to have merge branches in a specific order to avoid merge conflicts so you will want to document that here now that we made it through the entire template I'll be the first to admit this is overkill for adding our two tiny little jokes to our repo but for bill projects this is incredibly helpful I'll start with this template and then delete the sections that I don't need here I'm going to delete everything except the feature description and the address affected and insured under feature description let's add added two knock-knock jokes and under affected and insured we want to say changes only affected the knock-knock jokes text file perfect now let's click the create pull request button and on the right side here you'll notice a few options these are github specific you can add someone as a reviewer and this will flag that person to review your code you can assign this PR to someone and this should be the person that will ultimately merge and close the PR you can assign labels to a PR if you project I've worked don't use a review label when you want to flag it as needing reviewed or a whip uip for work and progress this is great if your code is not ready to be reviewed or if you want to open up a conversation about the direction that you're taking your feature and yes that means that code doesn't have to be finalized in order for you to open a pull request you can also associate your PR with a project or a milestone you can link your PR to issues if you're using github issue system I've mentioned several times that pull requests are a great way to maintain code quality and one way to do that is through code review and you can do that directly within github okay so I'm gonna click on the files changed tab and this will show you all the code that has changed within our PR as you can imagine this page would get awfully long if you made a ton of changes all at once that's one reason why it's a good idea to keep your PR small it's easier to review small changes than to adopt a large code overhaul all at once ideally when you submit a PR someone from your team will come to this page to review your code you'll notice I can click next to the line number to make a comment about a specific line of code or I can click and drag to make a comment about a block of code I can also click on this start review button to officially start the review process after I've it you to file you can also click on this view to check box that'll collapse the file and it makes this page a little bit easier to process when you're looking at multiple files then when I'm done I can click on that finish your review button and you can comment on the code as a whole you'll also notice I can approve or a question is pretty cool obviously I would never review my own code that's kind of dumb since I wrote it but you kind of get an idea of how these tools work within a team you'll notice github won't even let me approve my own PR I'm going to the conversations tab I'm gonna go ahead and scroll down and github knows that it can emerge my code without any conflicts so I can go ahead and merge this pull request confirm now that it's been merged you'll want to do a little housekeeping and delete the branch losing anything all that information is stored within the history of the PR okay now if we go back to the code tab and click on the knock-knock jokes file you'll see our new jokes are included dun dun dun one second I'm almost done I promise give me just one second all the code within this video is posted on github feel free to download it use it modify it whatever you need have at it if you like this video I wanna see more videos on web design and development the subscribe button below hit the bell icon if you when I receive notifications when new videos are posted until then keep moving [Music]

Channel: Self Teach Me

Views: 9,663

Keywords: git, github, github tutorial, github tutorial for beginners, git for beginners, selfteachme, git tutorial for beginners, git tutorial for beginners mac, git tutorial, git tutorial mac, how to make pull request in github

Id: 1XrP6POUPD0

Length: 14min 1sec (841 seconds)

Published: Tue May 05 2020