All right.
So I'm going to do a demonstration of working on feature branches and collaborating between the same
two people.
Me, Colt and Stevie The Chicken.
So I've made another repository on GitHub called creatively Feature Branch Workflow.
I've already added Stevie as a collaborator and I've accepted the invitation.
So Stevie shows up there and I've been working on this repo locally as Colt.
So not I haven't done much since all that we have.
It's the same thing, a bootstrap website, just basic bootstrap included and a heading that says Hello
World.
So again, we're not trying to go crazy with some fancy code or anything.
I'm just trying to show the workflow.
So in the last example, it sucked.
Working on the master branch or on the main branch, I had to pull down and merge code before I could
ever push my code up.
We broke the main branch because Stevie was trying to share some incomplete or incomplete code to get
feedback and hopefully get it solved anyway.
That won't be a problem if we work with branches.
So I also closed it down from Stevie.
Right?
The Stevie side as it shows you there.
I closed it down and we're working on it locally as Stevie.
So why don't we say Stevie gets to work on an app bar?
Same thing as last time.
Now he's not going to work on the main branch.
Instead, he's going to create a new branch.
We haven't really talked about naming feature branches.
I'm going to keep it very simple and do something like nav bar or add nav bar.
There are lots of patterns that large companies and organizations follow for feature branch or just
branch naming in general.
You might see things like fit for feature slash nav bar, for example, and then you might see something
like bug or fix or refactor different prefixes.
But I'm just going to go with a very simple one.
We'll just call it nav bar.
So we'll do get switch dash, see to make that new branch nav bar.
And again, I'm logged in right now as Stevie, I'm working Stevie.
So on this branch that we're currently on, I can go ahead and try adding a nav bar.
So we'll do the same thing as last time.
I'll copy that very large nav bar from Bootstrap.
I'll put it up top.
Let's see what that looks like.
Okay, there's our basic nav bar, but once again, it's not working the way it's supposed to.
Hmm.
What's going on?
Well, I would like to share this with Kolt and get some feedback from him or from anybody on the team,
see if they can fix that issue.
I'm not going to merge it into master.
I'm simply going to take this branch.
I'm going to add and commit my work on this branch because I can have incomplete or broken stuff on
a branch.
No one cares.
My master branch or the main branch is supposed to be the the working, the source of truth branch for
my application.
So I'm going to add and commit as Stevie.
So get add index get commit I don't know begin nav bar or had broken nav bar.
Okay.
So now I can push that up to GitHub if I want to.
I probably wouldn't push that up as just a broken, halfway working nav bar.
But if I wanted to get feedback or collaborate with a teammate, which is what I'm going to demonstrate,
then I definitely would push it up.
So I'm going to do that.
Now we have our remote, right?
We have origin and I'm going to push the branch nav bar.
So get push origin nav bar and push that up.
I refresh and we already see OC Nafaa has recent pushes less than a minute ago and I can see my work
is showing up here on Napa by Stevie Chicks.
So I preserve the state of Maine.
I don't have to screw up Maine and I can still share code that it's incomplete.
Meanwhile, Colt is working away on his own feature, and so he's on his own branch.
What is he doing?
Let's say he's he's working on a pricing table like you see here.
This is just one of the examples from bootstrap, if you could, two examples.
So I'm going to start before I go any further by making a branch that we're going to work on.
So if we're trying to make this pricing table, let's make a branch called pricing table or something
like that.
So I'm now switched back to Colt and I'm going to just check.
All right, I'm on Main.
So let's the first thing I would always do is just see if there's any updates or any new changes to
main before we branch because we want the most recent version of Main.
Maybe a coworker has merged something into Main and I don't have it.
So we could always do get pull origin main.
Although there's nothing new up there, we're already up to date.
But now I can make my branch without having to worry that I'm missing commits.
Anyway, get switched.
See, let's just call this pricing table so I'm on this new branch and now I can do some basic work.
I'll do maybe two commits.
So the first one, I'm just going to add a container to work inside of if you don't know, bootstrap
at all.
Again, that's not the point here, so please don't worry about it.
But I'll just do very basic simple commits like you wouldn't commit that, just a single HTML element.
But I will here.
So get add index and then I'll do get commit add container to index OC.
Now let's do another commit where I'm just going to copy the markup from this example on bootstrap to
make this pricing table, I'll inspect and then let's see if I can make this larger for you.
I want this right here, so I'm just going to right click copy and then copy outer html.
I want the whole thing.
Whoops is not just the particular element, but really it doesn't matter.
This is not a course on HTML or copying and pasting, but I'm going to paste that inside.
Pretend that I've been working on that all morning.
Okay.
So that looks fine enough, right?
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
it with somebody and push it up to GitHub, I can push this branch up at any point.
It doesn't matter what other people have done.
Unlike with our first workflow where I couldn't push anything up until I had pulled down changes to
Main or to Master and I had to merge.
And that process repeated any time anybody pushed new changes up to GitHub.
Everyone else has to pull them down and merge before they can push.
But that's not an issue here.
So now I can push my branch up.
If I add those changes.
So get add index, get commits, add pricing table.
I'll just go with that OC and now I can push that branch up, get push origin pricing table.
And we'll go back to GitHub.
And now we have two branches up here.
NAV bar and pricing table.
OC So I'm not necessarily suggesting that every time you make a feature branch, you need to push it
up to GitHub.
A lot of the time you won't do that unless you have a particular reason and you need to share that feature
branch with somebody.
But often if you look at an organization's repositories, they're not going to have thousands and thousands
of branches, even though there have been thousands of feature branches over the probably a month or
a couple of months at least.
There's just tons and tons of new branches all the time.
We don't push them all to GitHub.
If we do, we remove them.
But also just a lot of the time you don't need to push them up to GitHub.
You will merge them in to master or to Main at some point and then just delete the branch when you're
done.
So they don't need to stay around if you end up merging that stuff in.
Anyway, sticking with Colt, let's say that now Colt gets that Slack message from good old Stevie saying,
Hey, I pushed up that nav bar.
Could you take a look?
I don't know why it's not working.
It's supposed to collapse.
And it is, but it's not expanding on small screen sizes.
I'm not getting the drawers that I'm getting on the documentation.
Why is it not working?
So Steve is just a chicken you.
What do you expect?
I'm no expert, but I think we can figure it out.
So what I need to do is pull that branch down, right?
And before I do that, I could just fetch.
So let's.
I'm on Colt again.
Just to be clear, I can do a get fetch origin and just get everything from origin.
Has anything changed and yep, it says new branch nav bar.
So we have origin slash nav bar and I could start by just going into detached head trying to make this
a bit larger here and checking out if we do get branch dash ah we see there's this origin nav bar remote
tracking branch reference so I could check that out get check out if I wanted to.
Origin or origin slash nav bar.
Detached head.
But I can take a look.
And here it is.
Right?
I can refresh.
This is what's in my working directory because I'm in this detached head state and I can verify is it
actually broken?
Well, it's collapsing how it's supposed to, but that's not working.
Hmm.
So, och, I see Steve's right.
Something is going on, and I want to work on that branch.
I want to make a contribution as cold on that nav far branch, so I need to leave detached head.
Let's just go back to where we were.
We can do this git switch dash.
So now I'm back on pricing table and then if I want to check out that nav bar branch, remember with
git switch, it's super simple.
I can do git switch and then just the same name.
So nav bar get will automatically make me that branch nav bar even though it doesn't exist on my machine
yet and set it up so that it's connected.
It's tracking origin nav bar.
So here we go.
It tells me exactly what I just said.
Branch NAV Bar Set up to track remote branch nav bar from Origin.
So now I'm working on the nav fa.
I'm not just in detached head and I can start to try and tweak it and figure it out.
I happen to know what the problem is.
This requires bootstrap JavaScript, which I did not include.
So let's say that was an accident.
Very trivial, simple to fix issue, but most anybody would notice that in a matter of seconds.
I didn't include the JavaScript file, so I'm going to go get that from bootstrap.
Just right here.
Let's take that script.
I'm going to go put it just at the bottom for HTML.
Now, if I refresh.
Hopefully it works and indeed it does.
So we just collaborated.
Colt and Stevie.
Stevie started the bar.
Colt hopefully finished it.
I hate saying my name in third person.
Now I'm going to add and commit that change to the bar branch as Colt.
So here we go, get status, get add index, get commit.
We'll just go with add fix nav bar bug.
Even though it's really not a bug, it was just missing the entire JavaScript that it needed.
Anyway, we'll pretend I just fix some bug for Stevie and this is on the nap bar branch.
So now I can push that branch up, get push origin nav bar if I want to.
And then I can go back to whatever I was doing, which was the pricing branch, right?
What was it, pricing table.
So now I'm back to that.
I'll refresh here completely different thing and I can get back to work on this, right?
I can experiment, I could do some radical new thing.
And on GitHub, we now have the working knife bar.
Hopefully that knife bar branch.
And Stevie can now go pull that down and maybe keep working on it.
Who knows?
So on Stevie's machine, that's where I am right now.
He hears from Colts that he fixed the bug in the nav bar.
So Stevie's going to go pull down the most recent changes.
Or maybe just the nav bar branch.
So get pull origin nav bar.
All right, fast forward.
There's a new commit or if we type get log.
We see the whole history here.
Most recently we have colt fixed nav bar bug and I'm currently acting as Steve and we see if I expand
that the JavaScript is correctly included and if we refresh, hopefully it works on Stevie's machine
and it does.
So that's the basic idea.
We're working on branches that allows us to collaborate more freely.
We can experiment, try radical changes.
We treat the main or the master branch or whatever branch with some branch as the the important golden
child branch that we don't want to screw up.
So we make feature branches, we make all sorts of branches.
It doesn't just have to be for a new feature, but we make branches that we work on.
Often people just call them feature branches.
The thing that we have neglected to talk about with working on feature branches is the inevitable merging
of those feature branches, or at least some of them.
We need to merge them into the master or main branch and how we do this is up for discussion.
That's what we're going to talk about next.