Merging a Pull Request from GitHub - Live Coding with Jesse

freeCodeCamp.org · Beginner ·📅 Project Management ·9y ago

Key Takeaways

Merges a pull request from GitHub in a React project

Full Transcript

hey everybody it's Jesse and uh I hope you all had a great weekend if anybody did anything awesome let me know in the live chat um today I'm going to do something that for some of you is going to seem really simple uh but for others this may be the first time you've actually seen this done uh and I've gotten a pool request um from one of you uh that's that's been watching the streams and I checked it out Friday afternoon I um I pulled it down to my machine as a separate branch and checked it out and I only found one thing that was different um and it was simply because um I messed something up and put and and basically um it caused a class not to be applied to an element and it looked good like that and then when uh the person who submitted the pool request fixed it it changed the appearance and it actually changed it to what it should have been based on the classes that were there but I actually don't like it like that so that's the only thing that I'm really going to change uh for this everything else is awesome so um I'm going to take you through just you know quickly a quick scan of okay here's here's what's changed uh so you can see like where to go to look at if somebody submits a pool request for your project kind of go through the steps of how you would evaluate that and then what you would do to merge it uh into your your branch also I had some requests uh for me to use uh enro I don't know how it's NG r o k I'm just say enro if that's not how you pronounce it then let me know in the live chat uh but this is going to let you all go to the development version of the site so instead of waiting to see on the screen what I change and you only being able to see what I'm showing on my screen you can look at the site as it's being developed on my local machine so uh I'm this site's being served on um Port 3000 uh for the dev site so I'm just going to start this and now let me blow this up a little bit so if you want to go to I'm going to paste this in the description okay so in the live chat I've just pasted in the uh the URL I was just talking about if you go there you'll be able to see the site so it's not going to be uh wow look at that it looks like some people are going there cuz I can see uh all the requests here um it's not going to be that useful today since you know we're just merging in pool request and we're not making a lot of um like little changes that we want to check out but it'll definitely be useful in the future I'm going to check the live chat really quickly before we get started because looks like some people are saying hi hey everybody all right Thor is says he's finally on time so uh Thor is uh frequently watches uh the live uh show but uh always drops in a little bit later so uh awesome that you're here uh on time um Sebastian says check material ui.com material design with react found it while browsing um yeah I um I've been I've actually been checking it out I actually have open on one of my other screens right now a um material design react uh it's on of framework um I was looking at react uh MD but I've also seen material UI as well I actually was going to go with material UI at once but there was like one component that they didn't have built yet uh that I I needed to use and I didn't feel like uh building it myself at the time so but I definit def want to check that out I think that would be better right now I'm using materialized and I'm trying to make it work in in react um my goal was to kind of translate everything materialized does into react components but maybe it would just be a lot easier to use one of these other react uh component libraries and that use material design and then just contribute to those for the things that that are missing that I I use seem to have overloaded the site looks like yeah we're getting a lot of requests so is it is it working is is the uh the dev site thing working there's it too many too many people connecting too many oh it does say all right let me show you what it says so too many connections the rate limit policy of 20 connections per minute wow 143 connections last 60 seconds okay so I have to think of something else I don't know what the paid plan for um enro is I'll have to check that out after stream if it's not a lot of money then maybe I'll get it I just have no idea how much it how much it is but yeah this isn't going to work for right now so sorry about that that but I mean for today it's I guess I'll just shut this down since it's already shutting down um on its own so yeah it's not going to be a big deal today uh but maybe I'll look it up and see either if there's an alternative that lets me have more connections or if I I could just pay for um for the paid version of enr so thanks to everybody that suggested that it is really cool I hopefully we can get it working with this volume uh Thor says it's $5 for 60 requests per minute which is still not enough because we had 143 Connections in a minute so $12 for10 so it's getting closer Andrew says dos successfully uh yes that was that that was sweet yeah you guys just definitely dos my Dev site um all right so let's get started um I uh I have a meeting at 3 so if you noticed the pattern I have a meeting at 3:00 every Monday so I wanted to keep this short which is part of the reason why I picked this topic to do right now because I don't think it'll take that long the other part of the reason is because if you never really did this before this might be good to see uh I know I always get nervous when I'm doing something you know to my code base bringing something in like will I mess it up now obviously since I'm using get I shouldn't be that nervous I can always just roll it back to a previous commit but uh it's still it's kind of nice to see something demonstrated uh and especially since I'll demonstrate it live maybe I'll make a mistake and that's even better because then you'll uh know not to do what I did I do really feel that way I think uh it's it ends up being better for for you most of the time if I mess things up because then I don't know you you learn you learn more because not only we usually fix it eventually so you know what to do but you also learn what not to do or how to get out of it once you mess it up so basically just to to recap the the steps that I've already taken I just followed these is it these ones yeah I follow these instructions right super easy so this is right on GitHub um I follow these instructions to basically do this just make another Branch that's this this fix okay so I really just kind of um I'll show you what the uh request was so this is the pool request so thanks to v v po I don't I'm not sure how to pronounce that exactly if you're watching oh yeah there there you are President okay so V is um in the live chat right now so thank you very much for this request I checked it out and it's awesome uh and I'll show you guys a little bit about uh what was changed just to show you um how great this is so anyway this is the uh this is what you'll see if somebody does a pool request and like I said if if this is like old news to you and easy stuff then uh sorry but uh consider sticking around and maybe giving some tips uh to everybody that's that's in the live chat so I'm going to show you the um the files that have changed and this is kind of the important part I think to me just to check things out and understand what's going on I love looking at these um the last I've gotten two pool requests so far and I've learned so much from both of them by being able to compare what I did with what what they did in the pool request and seeing how I can improve my own code in the future so uh we could see here so we have um now this component file this head. JS which we actually uh some people asked about I don't remember who it was in the live chat but I had at least one person maybe more ask about moving all of this head stuff into its own component and I remember I had said I think that would be a good good to do I'm just not sure how I would do it yet and um I just never got around to actually trying to figure out how to do it as you know it was a kind of a tight schedule so a lot of things that I thought were great ideas just got kind of pushed pushed back and not done uh so there's also this so here's one new component completely new and that's all the stuff we had in the head and um we needed everything in the head can basically be the same for every page except we needed uh this title tag and we needed the meta description right so now we can actually pass that in okay the title in the description so that's that's awesome like that's the part that was really giving me a bit of trouble was uh I need pass then but also there was some error that I was getting when I tried to do this and um so I just kind of gave up on it when I first tried and uh when I finally kind of realized how I could have fixed the error I was already moved on to something else and I just never attempted it again so the next component is layout. JS so this is totally new and this does what you would think it does this is the layout for the page so we had a lot of uh repetitious code uh we never want to do that right we always want to stay dry right uh do not repeat okay that's the that's the principle right so we don't want to repeat all this so you could see uh especially like this we we're bringing in that head that was just created here bringing that in here because we need that for every page we also we had this div for every page we always have a footer we always import these scripts at the bottom here so all this stuff is now taken out and put into its own component it makes all the rest of the components a little bit cleaner and we don't repeat ourselves so that's awesome uh great idea also the uh Google analytics code is initialized here as well so we don't initialize it everywhere and these changes are all spread out over a bunch of commits and each commit has its own message to kind of explain it to so I mean that's that's all there in the git uh the GitHub repo and there's a link to that in the description so you can check out on your own and kind of go more in depth if you want to try to understand some of this um this is what I was talking about at the beginning which actually changed how things are displayed I'll show you in a second so we had this class card action which if you see obviously this doesn't work because it needs to be class name card action so when I first did this I didn't even catch this because it didn't throw an error and um it looked looked good I liked how it looked so I never even thought twice about it but then when this class name was at and it's actually card action it actually changed the the display how this displayed now I don't like how it's displayed which is of course you know V is uh did this 100% correctly this is how it should have been done um I just should have not use this class on here so what I'm going to do is either change how this looks or just completely take out this this class and see so not sure how I'm going to do that yet uh let me bring over I thought I had it up here but I guess I didn't um oh I know actually my um my computer started making all kinds of noise like it was working really hard and so I closed a bunch of my windows so I ended up closing out the uh window for this so let me open it up again oops didn't want to do that there we go okay so this is reflecting the uh the completely changed version so you see there's this line here and then there's more now normally because of the way materialized does the Styles this shouldn't be inside it should be like on the outside of this card it shouldn't be inside this revealed text so that's why I'm getting like this should have been all the way across but now there's padding so I just kind of took an element and put it in a different spot than the framework was intending which is fine but I just need to account for that and I don't want this color so I need to change that color um this was this is actually the right color normally for our sites but since this site has a different color palette than all the rest of our sites I do need to change this and I want to take out this line I'll show you what it looked like before just in case you you haven't seen it see it just looked like this and after I looked at this I thought I I would kind of like to change this I would like to have this be all capitals and maybe a different color maybe a red color we'll see so it was really good that that happened because I I hadn't even noticed that so I'm glad and it's going to make me rethink the look of that anyway uh also upgraded next so that's good I think I had already upgraded to 2.4.2 so maybe like probably this was this was repo was forked when I was still at 4.1 and then at some point within the last week I think I did upgrade to 4.2 cuz there was a security upgrade that came out so if you're using next and you're still on like 4.1 or lower uh upgrade to at least 2.4.2 because that's an important security update uh I don't know enough about it to tell you exactly what the issue is but I just know that it seems serious from what I read uh so also a lot of changes here see I'm not going to go through all these because they're pretty much the same so Pages now we've gotten rid of all that stuff that's been taken out and put put into other uh components right so now we just have layout so we've wrapped all of this in layout all right which is awesome just so so much less uh less code in general uh we no longer need before we initialize Google analytics every time now we don't now we just log a page view and uh now instead of having our title in description here we just pass it uh as props into uh the layout component and then that gets in turn passed to the Head component all right so that's it and pretty much all of them I'm going to skip down because these are all just the same thing happening on every page pretty much uh so just cleaning everything up and it's important if somebody does submit a pool request to you go through all this stuff you know because you don't want to mess up your project uh you know because you missed something larger projects have like automatic testing that happens um and which which is awesome I don't have that set up I obviously didn't even expect to have anybody else submitting pool requests uh so I didn't even think to set it up uh the final thing is now the analytics has been split out into its own component and there's a new folder uh utils right so for utilities so now this is in its own component which is also a great idea so all around just making everything so much cleaner um more kind of separated out and I really like all those changes so again thank you so much for this and look at look at that change look how much you know basically all the same things are happening but with way less uh in terms of Total Lines of codes so really great pool request so now that we've kind of gone through uh the pool requests like how you how you check it out uh now we've pulled down using these instructions we've pulled that down and I've done that beforehand I did that last week uh so I'm not going to show how to do it I mean it's it's really like what five five steps literally five steps and it works uh so we're going to merge this Branch now into the master Branch but I'm going to do something I was reading somewhere maybe a stack Overflow somebody said that when they do merges what the way they do it is first they merge the so they they merge everything that's been done in master so like there's a lot of stuff that's been done like since this so this is not necessarily completely up to date uh I don't know maybe it is more up to date but there's probably some things that happen that that aren't in here yet so I'm going to merge Master into this Branch right test it on this branch make Tri everything's okay and then merge this back into the master branch and I thought that was kind of a nice idea maybe not always necessary for small changes but um in this case there were a lot of changes so I'm going to do it like that and then that way you know we'll be able to we'll be able to see and if if we mess up this Branch you know not really a big deal uh not as big of a deal as if I messed up master I won't even have to worry about you know reverting to a previous commit because I'll just switch back to master and everything will be uh as it should be so let me let me check the live chat really quick because I've been ignoring it for like 10 minutes okay Thor says there's also Hub a CL CLI by GitHub to simplify fetching the pool request oh that's awesome I'll have to check that out so uh check that out if you um uh hub. github.com so I'll have to check that out after this and but rebase instead hey there guys please don't use merge Thor's saying please don't use merge Master but rebase instead please Andrew says agree with rebase or get merge rebase I see so many people doying it and messing up their history get rebase master on the feature branch and then switch to master and do merge feature Branch okay yeah so let me where did I put this I had a link and somebody was talking about that same thing about messing up their history and there was a way to work around it and that's what I used the last time I did this yeah so rebase Master into feature then merge feature into Master right yeah so I'll um I definitely want to do that in a way that I can keep my history up so I sorry I had a meeting right before this too so I just got here a few minutes before I started so otherwise I would have had this up already but let me um let me bring up the instructions that I was going to use I'll pull them on the screen and then you all in the live chat can let me know if this is kind of what you were thinking or if it's um or if you have something totally different in mind so I got to remember I would I would think that that was something that I would have saved probably in Google Keep so that's where I'm going to look first okay and I did find it and I did save it exactly where I I thought it would be I really like Google keep I don't know if you all use Google keep but um it's it's just really convenient for me uh I use Google for a lot of stuff I have an Android phone so it it works out uh that it syncs up nicely I used to use Evernote for that kind of thing but keep is more simple and I didn't ever really use the uh feat all the features of Evernote uh okay so here's the instructions I was going to use and then uh to keep track it looks like this is not what you were talking about because you guys were talking about rebate or rebase and this is just merge so I'm going to look now back at the live chat so take take a look at this on the screen uh hopefully let me blow it up a little bit more to make sure you can see even if you're on a small screen check this out for a second see if this is going to going to do it yeah okay so Andrew says yeah this part down here this is yeah this is the part that I used the last time I did it so that that will get the job done then awesome thank you okay so Thor is saying this will work but uh prefers rebase could you uh maybe just explain why you prefer rebase I think it'd be cool and I'd like to read it out so everybody that's watching um even later on could be uh could know kind of the difference I mean I'm sure everybody could look it up but since we're on the topic already of the video it'd be nice to to kind of give the alternate way to do this because Andrew saying if you made any commits in master it's better to rebase but I'm wondering I'm wondering why why is it better to rebase so I'll let that I know there's a delay so I'll um I'll kind of get on with it here and then I'll show how to do it and actually I'm going to have more things to merge in so it's possible that we could do I don't know if we'll have time today but it's possible we could do do it both ways and then see just just to demonstrate that might be useful uh you know and helpful so that you all can see you know the differences figure out what's easier Patrick said or Andrew says rebase will get all new commits from Master put on feature and then apply all new commits from feature okay uh Patrick says rebase allows you to clean up your history MK says rebase performs automatic checkout and checks okay okay cool so then Thor says rebase will reset your feature Branch to the point it's split for master apply all new commits from master and then put your commits from the feature uh on top that's cool that sounds good so to uh to explain the difference then so if we merge like this well like I said first I was going to actually merge Master uh into the feature branch make sure everything's working while I'm on the feature Branch then put it all back into master so if I did that so if I used rebase basically all the commits from Master would be in the history first and then all the commits from the uh feature Branch would come if I do it this way that I have up on the screen now then I'm assuming the history would be a different order Thor says it's different okay so so that's then the difference the main difference right you would just have a different history okay all right cool so if you're if you're thinking about doing this if you've never done this before or if you've done it one way but not the other uh then there's a difference in the history so I'll actually uh after I do this I will look at all the commits just to give you an idea of what history looks like from this since I've already explained based on what everybody's saying in the live chat I've already explained what it would look like if you did rebase and then we'll be able to see in the terminal what it would look like this way so okay so Thor Thor is saying you would have Master till it split then feature commits then new commits for master we're doing it this way with rebase you have master and then feature commits so Thor says uh he highly prefers the the second route to just have master and then all the feature commits after H okay uh so like I said I'm going to go I'll probably do the next Branch with rebase uh to demonstrate that I'm going to go with this one first since uh I said I was going to go with this one and I may as well just do it at this point um but that way you'll have a nice idea of which one which one to go with all right so for this Branch so you can follow along I mean the um I mean the URL was crazy for that so I don't know I want to find that uh that there's instructions on stack over overflow maybe I'll um I'll just post it in the uh in the live chat for now and uh maybe post it in the uh description uh in case you want to see those uh commands so first we're going to do so we are on the development Branch so that's important so make sure you're on development branch and I can tell here and actually I so somebody I saw asked a question let me go back so I don't miss it cuz it it makes sense to answer this question right now um I can't find it now but I know somebody said something about okay so uh Ro Rody I'm not sure it I'm not sure how to pronounce this it's like Ro roie w91 so um says how did you fix your your terminal so it looks like that so yeah my terminal this is not default if you never used a terminal before this is not the default look so basically I did this so long ago that I couldn't tell you exactly how I did it like step by step but basically you have like a what's called Like A bash profile and it's just a file all if you heard that in the background that was my alarm to tell me it's 230 so I need to get a move on um this is in your bash profile you can set the colors for different things and and how things work so that's what I edited but I I did the uh git and GitHub course on Udacity so if you go to udacity.com they have a ton of free courses they also have paid certifications you can get but the git and GitHub course is totally free in that course one of the lessons teaches you how to do this I actually just used the default example from the lesson I never even changed it uh so I'd always intended that I would customize the colors but I had some projects that I did and now I'm so used to these I don't really want to change them but you can uh I would recommend that that course especially if you're new to this it was really helpful for me they take you through a lot of test projects and have you do pool requests and merge things and uh really kind of go through everything that you would normally use uh use git and GitHub 4 so let's um let's do the first step which is get so anyway you have to be on the feature Branch to start okay so get merge Master wait what it's already up to date no way it's already up to date and actually all right so I guess this was maybe this did have I I had assumed that this didn't have all the changes from uh from Master huh all right let's try it out I just I do want to check something quickly oops uh where's my oh okay I did want to check this just really quickly just to make sure CU I was almost positive that I had react 2.4.3 all right so I'm going to check that and then now when I switch over I want to check I never changed that that's crazy that's really crazy because I do remember maybe I just did it for another site that I was using next with I know I did it for one of my client sites maybe I just never did it so earlier in the um in the show I realized now that I said something that was incorrect I thought that I had updated next but I didn't and I don't know what happened if I I don't know I I really could have sworn that I did update next I thought I updated 2.4.1 or point2 I guess I did not all right so anyway basically what what has happen is uh this this pull request was actually this pull request was actually already completely up to date with everything so it was really almost kind of pointless for me to do that but if it wasn't completely up to date then that would have actually been important and so now this is going to be really easy so we're going to merge so we're going to get merge so whenever you do a merge you're always merging the branch you specify here into the branch that you're on so I often forget that and I always look it up just to be sure um so I mean don't feel bad if you don't remember that cuz I almost never remember that uh but we're going to to get merge and what was the name of that Branch fix do react. if you if you really haven't used the command line and you're wondering how I make that appear so quickly um when you're on the command line if you just type in like the first letter first two letters of what you're looking for and then hit tab it will try to autocomplete and um if there's like two files or two folders that have this at the beginning um it'll just stop there and so you'll have to type more in so that it can autocomplete but that's that'll save you a ton of time that's that's something I didn't really know at first I saw people on YouTube autocompleting stuff and I just wasn't sure how that was happening but that's how it happens and it's awesome all right so let's let's go ahead and merge great now in this case there are no conflicts okay there occasionally you will have a con conflict no um I forgot to do the step I told you I was going to do in this case it didn't matter because um it was already up to date basically like the log let me show you the log okay so you can see the log and uh who did these changes let's see so these changes are like actually in the right order uh you can see the dates and everything and yeah so right order now what what we had talked about before and I can't remember I can't believe I forgot this was using this instead get merg okay so we had talked about doing this to be able to make your keep your commit uh history uh basically keep everything the way it should be the reason and correct me if I'm wrong the reason that this actually worked was because there there was no difference really there there weren't any new um commits on the master branch that would have made it a lot more complicated so and like I said I'm not like super expert at this because I don't often get pool requests so correct me if I'm misstating that but this this only worked out I think because of that it was simple so um if you had kind of a more complicated situation do this or uh do the rebase um like uh like Thor and Andrew and a few other people in the live chat were suggesting so I'm going to go to live chat because I did ask some questions about what I was doing and I want to get I want to read out the answers to you um Andrew um did have a link he did share a link um of an article for how to do rebase but there's I'm not going to read it out because it has a lot of numbers and letters at the end so um Andrew if you want to put that in the comments for the video so people watching uh later on the recording can can go there as well that would be awesome I it's going to get blocked by the spam filter but I'll go in and approve it later on um Thor says get merge and then with the flag squash would have been a better option I'm not familiar with that flag so um if anybody familiar with the flag squash let me know what what that would do I know that I I read it I remember seeing that in the documentation but I don't I don't uh I didn't pay enough attention to it that I actually remember what it does Thor says normally you don't want all these small commits uh Andrew says it depends on if you want to keep commit history all right in this case if I would have done the uh the oops this command and this is uh this is basically Thor and Andrew are giving a lot of of helpful um a lot of helpful information here so I'm just kind of relaying this to you all um Andrew says if we would have done this command it would have created an unnecessary merge message okay so basically this would have forced a merge message so I would have had to have and I a few times it's happened that I've had to do a merge message on the live stream basically would have forced me to type a message explaining what's happening like why are you it would ask me why are you why is this merge necessary and I would explain that so um sometimes you want that but Andrew says like in this case unnecessary right there are no conflicts we don't you know it all just works um Thor says squash would have squashed all the commits from the feature Branch into one so it would have just been one commit instead of all of all of these commits that you see here in the log okay so it would have been uh Mike also says squash would have made things cleaner okay I could see the benefit of that I actually because at least for me because I'm not getting so many pool requests I kind of like it like this and this lets me see like exactly what was done for me I like this because I'm trying I really trying to learn from the pool requests that you all submit so I kind of like to be able to see all this uh and be able to go through step by step and see like oh what was changed why was it changed to help me understand it if that wasn't if I didn't need to do that I could definitely see the benefit of using the squash flag and just making it one down into one but for me at least at this point uh I like this right now so but this could definitely get really messy if you're pulling in a lot of different stuff so anyway that's so a lot of good info about uh get merges and um how to do things and I'm glad glad we did this because I to be honest with you there were so many options when I was checking I always look this up because I don't do it often enough that I remember how to do it and every time I look it up I always see so many different ways that people do it you know stack Overflow has you know different ways people are doing it even you know there there are a lot of ways to do it and I'm not always clear of what the benefit of doing it one way or another is so um so this is this has been really helpful for me and hopefully for you all and anybody watching this later on uh if you're not sure how to get out of this log when you do it just hit Q so maybe it'll save you a few few minutes of frustration just hit q and it'll get you out okay so MK Tech says you do need to be careful with squash if you are working in a group okay good yeah so so yeah in this case yeah not not in this case would it matter so much but okay so now that we've made this merge like let's just look at it right I mean uh you we do want to double check and make sure that everything we did is working let me see where I I pulled this over here we go let me pull this back over and we can see I'm going to do a refresh just to just to double check we do have the hot module reloading going on so um it should reload but just in case so we could see like okay uh we have this which we knew you know right off the bat this is this is different okay so we are on Master now okay before we only saw this on the feature branch so uh that's a good indication because most of the changes I think all of the changes were all kind of behind the scenes this is really the only change that had any effect on what the user would see so this is a good this is really the only visual indicator we have that the change is really there I mean obviously we know we know it worked we saw it here but just you know just for the for the visual proof confirmation here so and I'm just going to click around I'm going to open up uh Dev tools like I already did this on the on the other Branch uh beforehand so I mean I'm pretty confident that everything's going to be all right uh and it's all going to work out but just for the sake of demonstration I'll click around just so we can see see what's going on here right and everything seems to be working working this this violation here this is because of um this video so I don't know if I can do anything about that so you can see this is the the code for this YouTube ined so if anybody knows how to do anything about that let me know as far as I know I'm I'm pretty much stuck with this but may maybe there's a way to use video in here so that that I just don't know about uh just trying to click around just making sure this works awesome all right and that's that's pretty much it so we made kind of um a major I can also show you the code this would be the last test so now we have the right version of next let's go into like one of our pages so if you can look up here uh we have layout everything's in layout we've gotten rid of all that that head stuff that we had before we have our new folder on the side I know this is small here on the side I I don't really know how to make this stuff bigger but uh we have our new uh utils folder we have some more in components we have some extra components here that we didn't have before so um yeah so everything's in there everything's working we're getting no error messages so successfully um I don't think I had a Trello thing so I have nothing to move over into done because I didn't even make that a task but um yeah so everything worked out and we're on track to have an episode that is less than one hour which was was the goal that we established last week and we couldn't quite achieve that goal uh so awesome that we did it this week uh so good way to start the week here um as always I'm going to do some question and answer right now so want to keep it kind of short so like 5 minutes you know 10 minutes max so I can get over to my meeting at 3 uh also just want to let you know if you're following along with the uh with the project um you can see like pretty much nothing has gotten done since Friday so sorry sorry about that uh today was filled with like meetings and just answering emails I don't know how it is for for you all where you work but it seems like Monday morning is just crazy for email you know you get you got all these emails built up people sending stuff on the weekend and it just took me forever to get through them all um some of them really really important though and then I had a meeting before this so uh actually going to have I think two student workers uh this Summer that are going to work uh remotely for me on some of these sites so that's going to be that's going to be pretty exciting I think it'll be good they're computer science students here so hopefully they'll get some good experience and be able to put some stuff on the resume and GitHub profile uh all right so now I'm going to take a look at the live chat uh if you have a question go ahead and throw it out there now um or put it in the comments for the video or you can direct message me on Twitter let's see oh good good look Seb so Sebastian i' had forgotten to do this and I who was it already up to date no wait a second any sorry Sebastian said uh install the last update of next now that you've updated your package Json so yeah that's really weird uh I should have if anybody knows what's going on with this let me know but I should have had to have reinstalled to the you the next version of next here uh so that changed so what should have happened is when I typed in uh yarn it it should have installed the new updates so I'm a little bit confused by that um I don't know if there's a way if I could go into maybe like the node modules to verify what the version is where am I at okay see if I can find next all right so next is in here I'm trying to find somewhere where it give me a version number yeah version 2.4.3 okay so yeah so this is in fact 2.4.3 so I don't know what happened or why that worked um but it worked but anyway Sebastian good thought I mean after you said that I immediately thought like yeah I do need to do that so for some reason I didn't need to do that but anyway whenever you are doing like a um a get pool or a merge or anything like that it is a good idea to just type in like npm install or yarn if you're using yarn just to make sure I I don't know how many times it's happened to me that I forgotten to do that and I'm getting weird errors and I Wast a lot of time trying to figure out the error when the problem was just that I didn't pull in the package usually it's not necessarily an update but like I've actually added a package somewhere on another computer and then just forgotten so anyway good uh good thought though Sebastian uh v um I I assume that's how you pronounce your name let me know if it's not and I will I will correct myself uh so V ask why are you not using any linter um basically I just didn't I haven't taken the time to install a linter and and use it so I know uh I think I I explained some of this before but there are things that I probably should be doing that I just never did for two reasons one I work by myself so I usually don't have to worry about can my teammates read this um so I've let myself get a little bit sloppy at times uh in terms of my style my coding style my documentation like things like that um or even just like testing uh in terms of like an actual like test Suite like using like mocha or chai or something like that um also like the second reason just of the the busyness and the pace of the projects here uh is just sometimes it stops me from learning things and and doing things that I know I should be doing um because because it's hard to explain to other people like the people above me uh that don't really know the importance of those things why I should push the date back of something because I need to set this stuff up uh because so anyway uh vet what would you recommend for a linter that I I should use uh because if you have a recommendation I'm I I definitely want to try it out uh part of the reason too I don't Implement stuff like that sometimes it's just I'm not sure which one to go with and I'm just like instead of just trying one I just research and research and never make the decision one way or another uh Andrew says I have an exciting app idea uh to create project folder and P project wait what all right I'm not sure Andrew I'm not sure what that um comment about I have an exciting app idea create project folder I'm not sure what that was in reference to so let me know I'm I'm missing something I think uh I'm missing some joke here obviously but um Andrew says uh yarn or um the new update was installed when I typed yarn in the feature Branch that's what I obviously I thought that in the feature Branch but because node modules get ignored I wasn't sure if it would transfer over so that's why I thought I would have to do it again evidently it did transfer over and um so I guess that's why it works okay so we have a suggestion to use uh es lent and to use a plugin for the text edor okay yeah I I'll try that and would we prefer a would prefer V says prefer a uh uh pool request with linter and prettier set up okay yeah and Andrew says it was a joke I I got that it was a joke I just didn't get the joke exactly and I wasn't sure what um like what prompted like if I had missed some conversation earlier that that joke was in response to but um in case you're all watching this is what I was talking about Andrew says one have an exciting app idea two create project folder three include webpack um 47 so step 47 lose all passion for project and is it supposed to be 4 or 47 I'm not sure anyway lose all passion for project and give up go to one all right I get it now the thing that threw me is for some reason I thought it said I have an exciting app idea so I was expecting the next thing to be your idea I but it didn't say that it's it just said have an exciting app idea so sorry about that it was nothing wrong with with what how Andrew phrased that or anything it was entirely my misreading of that that ruined it for me uh so yeah the joke is about how difficult webpack is which is why I like to use nextjs because I don't have to worry about webpack and um it kind of handles all of that stuff for me okay so van says I use standard JS and nextjs all also uses it but if you prefer semicolons then we can use uh EXO or ES lent actually I don't prefer semicolons it's been like so ingrained in me that you're supposed to use semicolons like I mean I don't know if it's just my experience but for most other things in JavaScript it was always like use a semicolon you know like all when I was first learning JavaScript everything said use a semicolon so now I catch my if I really think about it I don't use them but if I'm just kind of not thinking and I'm typing away and I always put in the semicolons so the I think I'll go with standard JS because it'll probably be good for me and help me to quit using semicolons when I don't need to oops and it is almost 3:00 so uh like I said if you have any other questions uh put them up on Twitter or in the comments to this video thank you for all the help and hopefully you know someone out there had you know had a good uh educational experience from this and uh V thanks again for this amazing pool request I really appreciate it and uh I'll see you all uh tomorrow same time 2 p.m Eastern

Original Description

I have a pull request that needs merged. This may be basic for some people, but I thought it would be helpful to see for those who have never done it. Also, as always, Q and A at the end! See a professional front-end developer at work. Unscripted. Mistakes included. Live Site: https://catechetics.com Repo: https://github.com/fus-marcom/ci-react Trello Board for this Project: https://trello.com/b/oD4BYdZk React: https://facebook.github.io/react/ Next.js: https://github.com/zeit/next.js/ Materialize: http://materializecss.com/ Twitter: https://twitter.com/JesseRWeigel Youtube: https://www.youtube.com/c/JesseWeigel29 Code Editor: https://atom.io/ Terminal: https://www.iterm2.com/ Project Management: https://trello.com - Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on programming: https://medium.freecodecamp.com
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from freeCodeCamp.org · freeCodeCamp.org · 22 of 60

1 React: Production Server Setup Part 2 - Live Coding with Jesse
React: Production Server Setup Part 2 - Live Coding with Jesse
freeCodeCamp.org
2 cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
freeCodeCamp.org
3 Browser history tutorial - Beau teaches JavaScript
Browser history tutorial - Beau teaches JavaScript
freeCodeCamp.org
4 Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
freeCodeCamp.org
5 React: Parameterized Routing with Next.js - Live Coding with Jesse
React: Parameterized Routing with Next.js - Live Coding with Jesse
freeCodeCamp.org
6 React: Dealing with jQuery Issues - Live Coding with Jesse
React: Dealing with jQuery Issues - Live Coding with Jesse
freeCodeCamp.org
7 setInterval and setTimeout: timing events - Beau teaches JavaScript
setInterval and setTimeout: timing events - Beau teaches JavaScript
freeCodeCamp.org
8 Browser and Device Testing - Live Coding with Jesse
Browser and Device Testing - Live Coding with Jesse
freeCodeCamp.org
9 Last Minute Updates - Live Coding with Jesse
Last Minute Updates - Live Coding with Jesse
freeCodeCamp.org
10 Post Launch Updates - Live Coding with Jesse
Post Launch Updates - Live Coding with Jesse
freeCodeCamp.org
11 React: Setting Up Google Analytics - Live Coding with Jesse
React: Setting Up Google Analytics - Live Coding with Jesse
freeCodeCamp.org
12 React: Masonry Layout - Live Coding with Jesse
React: Masonry Layout - Live Coding with Jesse
freeCodeCamp.org
13 Load Balancing Digital Ocean Droplets - Live Coding with Jesse
Load Balancing Digital Ocean Droplets - Live Coding with Jesse
freeCodeCamp.org
14 try, catch, finally, throw - error handling in JavaScript
try, catch, finally, throw - error handling in JavaScript
freeCodeCamp.org
15 Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
freeCodeCamp.org
16 Graphs: breadth-first search - Beau teaches JavaScript
Graphs: breadth-first search - Beau teaches JavaScript
freeCodeCamp.org
17 React: Masonry Layout Part 2 - Live Coding with Jesse
React: Masonry Layout Part 2 - Live Coding with Jesse
freeCodeCamp.org
18 React: WordPress API Live Search - Live Coding with Jesse
React: WordPress API Live Search - Live Coding with Jesse
freeCodeCamp.org
19 Creating WordPress Custom Post Types - Live Coding With Jesse
Creating WordPress Custom Post Types - Live Coding With Jesse
freeCodeCamp.org
20 Dates - Beau teaches JavaScript
Dates - Beau teaches JavaScript
freeCodeCamp.org
21 Miscellaneous Front End Updates - Live Coding with Jesse
Miscellaneous Front End Updates - Live Coding with Jesse
freeCodeCamp.org
Merging a Pull Request from GitHub - Live Coding with Jesse
Merging a Pull Request from GitHub - Live Coding with Jesse
freeCodeCamp.org
23 React + Prettier + Standard JS - Live Coding with Jesse
React + Prettier + Standard JS - Live Coding with Jesse
freeCodeCamp.org
24 React: Sortable Responsive Table - Live Coding with Jesse
React: Sortable Responsive Table - Live Coding with Jesse
freeCodeCamp.org
25 Geolocation Sorting by Distance - Live Coding with Jesse
Geolocation Sorting by Distance - Live Coding with Jesse
freeCodeCamp.org
26 Tradeoff Matrix - Agile Software Development
Tradeoff Matrix - Agile Software Development
freeCodeCamp.org
27 The Definition of Ready - Agile Software Development
The Definition of Ready - Agile Software Development
freeCodeCamp.org
28 Getting first React job without experience - Ask Preethi
Getting first React job without experience - Ask Preethi
freeCodeCamp.org
29 React: Google Analytics Click Tracking - Live Coding with Jesse
React: Google Analytics Click Tracking - Live Coding with Jesse
freeCodeCamp.org
30 Submitting a PR to an Open Source Project - Live Coding with Jesse
Submitting a PR to an Open Source Project - Live Coding with Jesse
freeCodeCamp.org
31 Should I go back to school to get CS degree? - Ask Preethi
Should I go back to school to get CS degree? - Ask Preethi
freeCodeCamp.org
32 Hero Section CSS Changes - Live Coding with Jesse
Hero Section CSS Changes - Live Coding with Jesse
freeCodeCamp.org
33 Working Agreement - Agile Software Development
Working Agreement - Agile Software Development
freeCodeCamp.org
34 A day at Pennybox with Co-Founder Reji Eapen
A day at Pennybox with Co-Founder Reji Eapen
freeCodeCamp.org
35 React: Sorting and Filtering Data - Live Coding with Jesse
React: Sorting and Filtering Data - Live Coding with Jesse
freeCodeCamp.org
36 React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
freeCodeCamp.org
37 React: Building a New UI - Live Coding with Jesse
React: Building a New UI - Live Coding with Jesse
freeCodeCamp.org
38 Definition of Done - Agile Software Development
Definition of Done - Agile Software Development
freeCodeCamp.org
39 Getting started with jQuery (tutorial) - Beau teaches JavaScript
Getting started with jQuery (tutorial) - Beau teaches JavaScript
freeCodeCamp.org
40 Making a React Blog with WordPress Content - Live Coding with Jesse
Making a React Blog with WordPress Content - Live Coding with Jesse
freeCodeCamp.org
41 React, NextJS, CSS - Live Coding with Jesse
React, NextJS, CSS - Live Coding with Jesse
freeCodeCamp.org
42 jQuery events - Beau teaches JavaScript
jQuery events - Beau teaches JavaScript
freeCodeCamp.org
43 React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
freeCodeCamp.org
44 React: Working with API Data - Live Coding with Jesse
React: Working with API Data - Live Coding with Jesse
freeCodeCamp.org
45 React: Refactoring Components - Live Streaming with Jesse
React: Refactoring Components - Live Streaming with Jesse
freeCodeCamp.org
46 jQuery effects - Beau teaches JavaScript
jQuery effects - Beau teaches JavaScript
freeCodeCamp.org
47 More React Refactoring - Live Coding with Jesse
More React Refactoring - Live Coding with Jesse
freeCodeCamp.org
48 animate in jQuery - Beau teaches JavaScript
animate in jQuery - Beau teaches JavaScript
freeCodeCamp.org
49 "Finishing" My React Site - Live Coding with Jesse
"Finishing" My React Site - Live Coding with Jesse
freeCodeCamp.org
50 Starting a New React Project (P2D1) - Live Coding with Jesse
Starting a New React Project (P2D1) - Live Coding with Jesse
freeCodeCamp.org
51 React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
freeCodeCamp.org
52 The Agile Manifesto - Agile Software Development
The Agile Manifesto - Agile Software Development
freeCodeCamp.org
53 jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
freeCodeCamp.org
54 React Project 2 Day 3 - Live Coding with Jesse
React Project 2 Day 3 - Live Coding with Jesse
freeCodeCamp.org
55 The INVEST approach to product backlog items
The INVEST approach to product backlog items
freeCodeCamp.org
56 React Project 2 Day 4 - Live Coding with Jesse
React Project 2 Day 4 - Live Coding with Jesse
freeCodeCamp.org
57 Chickens and Pigs - Agile Software Development
Chickens and Pigs - Agile Software Development
freeCodeCamp.org
58 React Project 2 Day 5 - Live Coding with Jesse
React Project 2 Day 5 - Live Coding with Jesse
freeCodeCamp.org
59 jQuery: add and remove DOM elements - Beau teaches JavaScript
jQuery: add and remove DOM elements - Beau teaches JavaScript
freeCodeCamp.org
60 React Project 2 Day 6 - Live Coding with Jesse
React Project 2 Day 6 - Live Coding with Jesse
freeCodeCamp.org

Related Reads

📰
How to Set Up Jira the Right Way (Most Teams Get This Wrong)
Learn how to set up Jira correctly to maximize its benefits for your team, avoiding common pitfalls that hinder its effectiveness
Dev.to · Nisha
📰
7 Best Project Portfolio Management Software in 2026
Learn about the top project portfolio management software to improve reporting and visibility across multiple projects, crucial for effective project management
TechRepublic
📰
Why Building Projects Matters More Than Collecting Certificates in 2026
Building projects is more valuable than collecting certificates in the job market, as it showcases problem-solving skills and real-world application
Dev.to AI
📰
El buen liderazgo
Learn how project managers can develop leadership skills through effective supervision and management techniques
Medium · Data Science
Up next
Program Management: Tying Together Tech & Business Value #shorts
Digital Transformation with Eric Kimberling
Watch →