1 00:00:00,240 --> 00:00:00,690 All right. 2 00:00:00,690 --> 00:00:05,850 So I'm going to do a demonstration of working on feature branches and collaborating between the same 3 00:00:05,850 --> 00:00:06,660 two people. 4 00:00:06,689 --> 00:00:10,260 Me, Colt and Stevie The Chicken. 5 00:00:10,260 --> 00:00:15,630 So I've made another repository on GitHub called creatively Feature Branch Workflow. 6 00:00:15,960 --> 00:00:20,640 I've already added Stevie as a collaborator and I've accepted the invitation. 7 00:00:20,640 --> 00:00:27,120 So Stevie shows up there and I've been working on this repo locally as Colt. 8 00:00:27,120 --> 00:00:30,250 So not I haven't done much since all that we have. 9 00:00:30,270 --> 00:00:37,140 It's the same thing, a bootstrap website, just basic bootstrap included and a heading that says Hello 10 00:00:37,140 --> 00:00:37,700 World. 11 00:00:37,710 --> 00:00:41,280 So again, we're not trying to go crazy with some fancy code or anything. 12 00:00:41,280 --> 00:00:43,160 I'm just trying to show the workflow. 13 00:00:43,170 --> 00:00:45,270 So in the last example, it sucked. 14 00:00:45,270 --> 00:00:49,350 Working on the master branch or on the main branch, I had to pull down and merge code before I could 15 00:00:49,350 --> 00:00:50,760 ever push my code up. 16 00:00:51,180 --> 00:00:56,760 We broke the main branch because Stevie was trying to share some incomplete or incomplete code to get 17 00:00:56,760 --> 00:00:59,550 feedback and hopefully get it solved anyway. 18 00:00:59,580 --> 00:01:02,000 That won't be a problem if we work with branches. 19 00:01:02,010 --> 00:01:05,459 So I also closed it down from Stevie. 20 00:01:05,459 --> 00:01:05,790 Right? 21 00:01:05,790 --> 00:01:07,920 The Stevie side as it shows you there. 22 00:01:07,920 --> 00:01:11,340 I closed it down and we're working on it locally as Stevie. 23 00:01:11,550 --> 00:01:15,780 So why don't we say Stevie gets to work on an app bar? 24 00:01:15,810 --> 00:01:17,100 Same thing as last time. 25 00:01:17,100 --> 00:01:19,220 Now he's not going to work on the main branch. 26 00:01:19,230 --> 00:01:22,560 Instead, he's going to create a new branch. 27 00:01:23,010 --> 00:01:25,290 We haven't really talked about naming feature branches. 28 00:01:25,290 --> 00:01:31,020 I'm going to keep it very simple and do something like nav bar or add nav bar. 29 00:01:31,050 --> 00:01:36,450 There are lots of patterns that large companies and organizations follow for feature branch or just 30 00:01:36,450 --> 00:01:37,920 branch naming in general. 31 00:01:38,010 --> 00:01:46,380 You might see things like fit for feature slash nav bar, for example, and then you might see something 32 00:01:46,380 --> 00:01:50,310 like bug or fix or refactor different prefixes. 33 00:01:50,310 --> 00:01:52,380 But I'm just going to go with a very simple one. 34 00:01:52,800 --> 00:01:54,060 We'll just call it nav bar. 35 00:01:54,060 --> 00:01:59,490 So we'll do get switch dash, see to make that new branch nav bar. 36 00:02:01,020 --> 00:02:04,260 And again, I'm logged in right now as Stevie, I'm working Stevie. 37 00:02:04,440 --> 00:02:09,240 So on this branch that we're currently on, I can go ahead and try adding a nav bar. 38 00:02:09,240 --> 00:02:10,770 So we'll do the same thing as last time. 39 00:02:10,770 --> 00:02:15,510 I'll copy that very large nav bar from Bootstrap. 40 00:02:15,870 --> 00:02:16,980 I'll put it up top. 41 00:02:16,980 --> 00:02:18,690 Let's see what that looks like. 42 00:02:19,030 --> 00:02:24,690 Okay, there's our basic nav bar, but once again, it's not working the way it's supposed to. 43 00:02:24,900 --> 00:02:25,170 Hmm. 44 00:02:25,290 --> 00:02:26,340 What's going on? 45 00:02:26,340 --> 00:02:33,330 Well, I would like to share this with Kolt and get some feedback from him or from anybody on the team, 46 00:02:33,450 --> 00:02:35,080 see if they can fix that issue. 47 00:02:35,110 --> 00:02:37,140 I'm not going to merge it into master. 48 00:02:37,440 --> 00:02:39,870 I'm simply going to take this branch. 49 00:02:39,870 --> 00:02:45,780 I'm going to add and commit my work on this branch because I can have incomplete or broken stuff on 50 00:02:45,780 --> 00:02:46,170 a branch. 51 00:02:46,170 --> 00:02:47,100 No one cares. 52 00:02:47,100 --> 00:02:53,130 My master branch or the main branch is supposed to be the the working, the source of truth branch for 53 00:02:53,130 --> 00:02:54,360 my application. 54 00:02:54,450 --> 00:02:57,570 So I'm going to add and commit as Stevie. 55 00:02:57,570 --> 00:03:08,130 So get add index get commit I don't know begin nav bar or had broken nav bar. 56 00:03:10,150 --> 00:03:10,760 Okay. 57 00:03:11,050 --> 00:03:14,170 So now I can push that up to GitHub if I want to. 58 00:03:14,410 --> 00:03:18,910 I probably wouldn't push that up as just a broken, halfway working nav bar. 59 00:03:18,910 --> 00:03:24,040 But if I wanted to get feedback or collaborate with a teammate, which is what I'm going to demonstrate, 60 00:03:24,040 --> 00:03:25,730 then I definitely would push it up. 61 00:03:25,750 --> 00:03:26,650 So I'm going to do that. 62 00:03:26,650 --> 00:03:28,870 Now we have our remote, right? 63 00:03:28,870 --> 00:03:32,830 We have origin and I'm going to push the branch nav bar. 64 00:03:32,830 --> 00:03:37,750 So get push origin nav bar and push that up. 65 00:03:38,920 --> 00:03:45,730 I refresh and we already see OC Nafaa has recent pushes less than a minute ago and I can see my work 66 00:03:45,730 --> 00:03:49,060 is showing up here on Napa by Stevie Chicks. 67 00:03:49,060 --> 00:03:51,430 So I preserve the state of Maine. 68 00:03:51,430 --> 00:03:55,270 I don't have to screw up Maine and I can still share code that it's incomplete. 69 00:03:55,300 --> 00:04:01,710 Meanwhile, Colt is working away on his own feature, and so he's on his own branch. 70 00:04:01,720 --> 00:04:02,440 What is he doing? 71 00:04:02,440 --> 00:04:05,860 Let's say he's he's working on a pricing table like you see here. 72 00:04:05,860 --> 00:04:09,220 This is just one of the examples from bootstrap, if you could, two examples. 73 00:04:09,340 --> 00:04:14,650 So I'm going to start before I go any further by making a branch that we're going to work on. 74 00:04:14,650 --> 00:04:19,959 So if we're trying to make this pricing table, let's make a branch called pricing table or something 75 00:04:19,959 --> 00:04:20,680 like that. 76 00:04:20,800 --> 00:04:27,550 So I'm now switched back to Colt and I'm going to just check. 77 00:04:27,550 --> 00:04:28,600 All right, I'm on Main. 78 00:04:28,600 --> 00:04:33,790 So let's the first thing I would always do is just see if there's any updates or any new changes to 79 00:04:33,790 --> 00:04:37,480 main before we branch because we want the most recent version of Main. 80 00:04:37,480 --> 00:04:40,690 Maybe a coworker has merged something into Main and I don't have it. 81 00:04:40,690 --> 00:04:43,900 So we could always do get pull origin main. 82 00:04:43,900 --> 00:04:46,870 Although there's nothing new up there, we're already up to date. 83 00:04:46,870 --> 00:04:51,250 But now I can make my branch without having to worry that I'm missing commits. 84 00:04:51,730 --> 00:04:52,780 Anyway, get switched. 85 00:04:52,990 --> 00:05:00,430 See, let's just call this pricing table so I'm on this new branch and now I can do some basic work. 86 00:05:00,430 --> 00:05:02,830 I'll do maybe two commits. 87 00:05:03,040 --> 00:05:07,240 So the first one, I'm just going to add a container to work inside of if you don't know, bootstrap 88 00:05:07,240 --> 00:05:07,540 at all. 89 00:05:07,540 --> 00:05:10,510 Again, that's not the point here, so please don't worry about it. 90 00:05:10,870 --> 00:05:17,170 But I'll just do very basic simple commits like you wouldn't commit that, just a single HTML element. 91 00:05:17,170 --> 00:05:18,370 But I will here. 92 00:05:18,370 --> 00:05:26,410 So get add index and then I'll do get commit add container to index OC. 93 00:05:26,980 --> 00:05:33,100 Now let's do another commit where I'm just going to copy the markup from this example on bootstrap to 94 00:05:33,100 --> 00:05:39,100 make this pricing table, I'll inspect and then let's see if I can make this larger for you. 95 00:05:39,820 --> 00:05:46,120 I want this right here, so I'm just going to right click copy and then copy outer html. 96 00:05:46,120 --> 00:05:47,560 I want the whole thing. 97 00:05:47,590 --> 00:05:52,000 Whoops is not just the particular element, but really it doesn't matter. 98 00:05:52,000 --> 00:05:57,160 This is not a course on HTML or copying and pasting, but I'm going to paste that inside. 99 00:05:57,340 --> 00:05:59,620 Pretend that I've been working on that all morning. 100 00:06:00,640 --> 00:06:01,360 Okay. 101 00:06:01,360 --> 00:06:03,700 So that looks fine enough, right? 102 00:06:04,210 --> 00:06:09,190 And the good news is that if I want to share this, if I'm maybe I'm not done, but I want to share 103 00:06:09,190 --> 00:06:13,810 it with somebody and push it up to GitHub, I can push this branch up at any point. 104 00:06:13,840 --> 00:06:16,040 It doesn't matter what other people have done. 105 00:06:16,060 --> 00:06:21,160 Unlike with our first workflow where I couldn't push anything up until I had pulled down changes to 106 00:06:21,160 --> 00:06:23,830 Main or to Master and I had to merge. 107 00:06:23,830 --> 00:06:28,720 And that process repeated any time anybody pushed new changes up to GitHub. 108 00:06:29,080 --> 00:06:32,620 Everyone else has to pull them down and merge before they can push. 109 00:06:32,620 --> 00:06:34,060 But that's not an issue here. 110 00:06:34,120 --> 00:06:36,970 So now I can push my branch up. 111 00:06:37,660 --> 00:06:39,070 If I add those changes. 112 00:06:39,070 --> 00:06:43,420 So get add index, get commits, add pricing table. 113 00:06:43,720 --> 00:06:50,020 I'll just go with that OC and now I can push that branch up, get push origin pricing table. 114 00:06:52,480 --> 00:06:54,040 And we'll go back to GitHub. 115 00:06:55,790 --> 00:06:57,980 And now we have two branches up here. 116 00:06:58,010 --> 00:06:59,990 NAV bar and pricing table. 117 00:07:00,490 --> 00:07:05,780 OC So I'm not necessarily suggesting that every time you make a feature branch, you need to push it 118 00:07:05,780 --> 00:07:06,710 up to GitHub. 119 00:07:07,400 --> 00:07:12,470 A lot of the time you won't do that unless you have a particular reason and you need to share that feature 120 00:07:12,470 --> 00:07:13,560 branch with somebody. 121 00:07:13,580 --> 00:07:19,130 But often if you look at an organization's repositories, they're not going to have thousands and thousands 122 00:07:19,130 --> 00:07:24,620 of branches, even though there have been thousands of feature branches over the probably a month or 123 00:07:24,620 --> 00:07:25,850 a couple of months at least. 124 00:07:25,850 --> 00:07:28,850 There's just tons and tons of new branches all the time. 125 00:07:29,240 --> 00:07:30,770 We don't push them all to GitHub. 126 00:07:30,800 --> 00:07:32,120 If we do, we remove them. 127 00:07:32,120 --> 00:07:35,110 But also just a lot of the time you don't need to push them up to GitHub. 128 00:07:35,120 --> 00:07:40,700 You will merge them in to master or to Main at some point and then just delete the branch when you're 129 00:07:40,700 --> 00:07:41,240 done. 130 00:07:41,360 --> 00:07:44,910 So they don't need to stay around if you end up merging that stuff in. 131 00:07:44,930 --> 00:07:52,100 Anyway, sticking with Colt, let's say that now Colt gets that Slack message from good old Stevie saying, 132 00:07:52,100 --> 00:07:53,630 Hey, I pushed up that nav bar. 133 00:07:53,660 --> 00:07:54,380 Could you take a look? 134 00:07:54,380 --> 00:07:55,850 I don't know why it's not working. 135 00:07:55,850 --> 00:07:57,140 It's supposed to collapse. 136 00:07:57,140 --> 00:08:02,120 And it is, but it's not expanding on small screen sizes. 137 00:08:02,120 --> 00:08:05,180 I'm not getting the drawers that I'm getting on the documentation. 138 00:08:05,180 --> 00:08:06,280 Why is it not working? 139 00:08:06,290 --> 00:08:08,740 So Steve is just a chicken you. 140 00:08:09,050 --> 00:08:10,100 What do you expect? 141 00:08:10,190 --> 00:08:12,310 I'm no expert, but I think we can figure it out. 142 00:08:12,320 --> 00:08:16,460 So what I need to do is pull that branch down, right? 143 00:08:16,910 --> 00:08:19,190 And before I do that, I could just fetch. 144 00:08:19,190 --> 00:08:19,970 So let's. 145 00:08:19,970 --> 00:08:21,290 I'm on Colt again. 146 00:08:21,290 --> 00:08:26,750 Just to be clear, I can do a get fetch origin and just get everything from origin. 147 00:08:26,750 --> 00:08:30,860 Has anything changed and yep, it says new branch nav bar. 148 00:08:30,860 --> 00:08:36,200 So we have origin slash nav bar and I could start by just going into detached head trying to make this 149 00:08:36,200 --> 00:08:44,540 a bit larger here and checking out if we do get branch dash ah we see there's this origin nav bar remote 150 00:08:44,540 --> 00:08:50,410 tracking branch reference so I could check that out get check out if I wanted to. 151 00:08:50,420 --> 00:08:55,220 Origin or origin slash nav bar. 152 00:08:55,670 --> 00:08:56,900 Detached head. 153 00:08:57,550 --> 00:08:58,630 But I can take a look. 154 00:08:58,630 --> 00:08:59,890 And here it is. 155 00:08:59,890 --> 00:09:00,260 Right? 156 00:09:00,280 --> 00:09:01,540 I can refresh. 157 00:09:03,820 --> 00:09:09,490 This is what's in my working directory because I'm in this detached head state and I can verify is it 158 00:09:09,490 --> 00:09:10,450 actually broken? 159 00:09:10,450 --> 00:09:13,810 Well, it's collapsing how it's supposed to, but that's not working. 160 00:09:13,840 --> 00:09:14,170 Hmm. 161 00:09:14,560 --> 00:09:17,050 So, och, I see Steve's right. 162 00:09:17,050 --> 00:09:19,990 Something is going on, and I want to work on that branch. 163 00:09:19,990 --> 00:09:25,600 I want to make a contribution as cold on that nav far branch, so I need to leave detached head. 164 00:09:26,050 --> 00:09:28,030 Let's just go back to where we were. 165 00:09:28,210 --> 00:09:30,400 We can do this git switch dash. 166 00:09:30,580 --> 00:09:37,420 So now I'm back on pricing table and then if I want to check out that nav bar branch, remember with 167 00:09:37,420 --> 00:09:38,770 git switch, it's super simple. 168 00:09:38,770 --> 00:09:41,800 I can do git switch and then just the same name. 169 00:09:42,220 --> 00:09:48,370 So nav bar get will automatically make me that branch nav bar even though it doesn't exist on my machine 170 00:09:48,370 --> 00:09:50,560 yet and set it up so that it's connected. 171 00:09:50,560 --> 00:09:53,020 It's tracking origin nav bar. 172 00:09:53,020 --> 00:09:54,040 So here we go. 173 00:09:55,180 --> 00:09:56,740 It tells me exactly what I just said. 174 00:09:56,740 --> 00:09:59,680 Branch NAV Bar Set up to track remote branch nav bar from Origin. 175 00:09:59,680 --> 00:10:01,720 So now I'm working on the nav fa. 176 00:10:01,750 --> 00:10:07,390 I'm not just in detached head and I can start to try and tweak it and figure it out. 177 00:10:07,390 --> 00:10:09,940 I happen to know what the problem is. 178 00:10:10,420 --> 00:10:14,830 This requires bootstrap JavaScript, which I did not include. 179 00:10:14,830 --> 00:10:16,870 So let's say that was an accident. 180 00:10:16,900 --> 00:10:22,960 Very trivial, simple to fix issue, but most anybody would notice that in a matter of seconds. 181 00:10:22,960 --> 00:10:28,270 I didn't include the JavaScript file, so I'm going to go get that from bootstrap. 182 00:10:29,160 --> 00:10:30,140 Just right here. 183 00:10:30,150 --> 00:10:31,650 Let's take that script. 184 00:10:32,850 --> 00:10:36,630 I'm going to go put it just at the bottom for HTML. 185 00:10:37,500 --> 00:10:38,940 Now, if I refresh. 186 00:10:39,240 --> 00:10:42,960 Hopefully it works and indeed it does. 187 00:10:42,960 --> 00:10:44,640 So we just collaborated. 188 00:10:44,640 --> 00:10:45,810 Colt and Stevie. 189 00:10:45,820 --> 00:10:47,310 Stevie started the bar. 190 00:10:47,340 --> 00:10:49,040 Colt hopefully finished it. 191 00:10:49,050 --> 00:10:50,910 I hate saying my name in third person. 192 00:10:51,120 --> 00:10:55,260 Now I'm going to add and commit that change to the bar branch as Colt. 193 00:10:55,500 --> 00:11:00,930 So here we go, get status, get add index, get commit. 194 00:11:01,350 --> 00:11:06,150 We'll just go with add fix nav bar bug. 195 00:11:06,150 --> 00:11:11,790 Even though it's really not a bug, it was just missing the entire JavaScript that it needed. 196 00:11:11,790 --> 00:11:17,280 Anyway, we'll pretend I just fix some bug for Stevie and this is on the nap bar branch. 197 00:11:17,280 --> 00:11:22,110 So now I can push that branch up, get push origin nav bar if I want to. 198 00:11:23,720 --> 00:11:29,140 And then I can go back to whatever I was doing, which was the pricing branch, right? 199 00:11:29,150 --> 00:11:30,440 What was it, pricing table. 200 00:11:31,190 --> 00:11:32,760 So now I'm back to that. 201 00:11:32,780 --> 00:11:38,000 I'll refresh here completely different thing and I can get back to work on this, right? 202 00:11:38,000 --> 00:11:41,000 I can experiment, I could do some radical new thing. 203 00:11:41,000 --> 00:11:44,090 And on GitHub, we now have the working knife bar. 204 00:11:44,120 --> 00:11:46,490 Hopefully that knife bar branch. 205 00:11:47,400 --> 00:11:50,970 And Stevie can now go pull that down and maybe keep working on it. 206 00:11:51,000 --> 00:11:51,670 Who knows? 207 00:11:51,690 --> 00:11:55,320 So on Stevie's machine, that's where I am right now. 208 00:11:55,950 --> 00:12:00,440 He hears from Colts that he fixed the bug in the nav bar. 209 00:12:00,450 --> 00:12:03,720 So Stevie's going to go pull down the most recent changes. 210 00:12:04,020 --> 00:12:05,490 Or maybe just the nav bar branch. 211 00:12:05,490 --> 00:12:07,860 So get pull origin nav bar. 212 00:12:09,390 --> 00:12:10,650 All right, fast forward. 213 00:12:10,770 --> 00:12:13,320 There's a new commit or if we type get log. 214 00:12:13,320 --> 00:12:14,810 We see the whole history here. 215 00:12:14,820 --> 00:12:23,550 Most recently we have colt fixed nav bar bug and I'm currently acting as Steve and we see if I expand 216 00:12:23,550 --> 00:12:30,780 that the JavaScript is correctly included and if we refresh, hopefully it works on Stevie's machine 217 00:12:30,780 --> 00:12:31,830 and it does. 218 00:12:31,830 --> 00:12:33,270 So that's the basic idea. 219 00:12:33,270 --> 00:12:36,810 We're working on branches that allows us to collaborate more freely. 220 00:12:36,810 --> 00:12:39,120 We can experiment, try radical changes. 221 00:12:39,120 --> 00:12:45,690 We treat the main or the master branch or whatever branch with some branch as the the important golden 222 00:12:45,690 --> 00:12:47,640 child branch that we don't want to screw up. 223 00:12:47,640 --> 00:12:50,700 So we make feature branches, we make all sorts of branches. 224 00:12:50,700 --> 00:12:55,110 It doesn't just have to be for a new feature, but we make branches that we work on. 225 00:12:55,200 --> 00:12:57,420 Often people just call them feature branches. 226 00:12:57,420 --> 00:13:03,210 The thing that we have neglected to talk about with working on feature branches is the inevitable merging 227 00:13:03,210 --> 00:13:05,610 of those feature branches, or at least some of them. 228 00:13:05,940 --> 00:13:11,460 We need to merge them into the master or main branch and how we do this is up for discussion. 229 00:13:11,460 --> 00:13:13,050 That's what we're going to talk about next.