00:00:00 Although commands like git add, commit, push, merge, checkout, stash, and others may seem hard to remember, even though they're simple once you get a hang

00:00:09 of them, there is an alternative method.

00:00:12 As developers, we always discover more efficient techniques for accomplishing repetitive tasks.

00:00:18 So let me introduce you to a completely different approach for executing these Git commands.

00:00:25 Before I teach you these very powerful techniques, do remember that it is still super important to understand the behind the scenes of how these commands work.

00:00:34 And that's what you've learned so far, which makes you ready to utilize the power and simplicity of this new approach.

00:00:41 I'm referring to using Git through a GUI, a graphical user interface.

00:00:47 It doesn't require memorizing commands, but instead offers a more visual and user-friendly approach to version control, allowing you to execute Git commands

00:00:57 through simple buttons, panels, and menus.

00:00:59 Many editors and IDEs offer Git integration through a GUI, but their functionality is limited compared to WebStorm's features.

00:01:09 So I highly recommend downloading WebStorm, it's free and packed with powerful Git integrations.

00:01:15 But if you prefer not to, no worries, you can still follow along with the video and check if your editor supports some of the features that I'll be showing

00:01:24 in WebStorm.

00:01:25 We can start from scratch by creating a completely new folder and create a new readme.md file within it.

00:01:33 There we can say something like testing Git through a GUI, a graphical user interface.

00:01:42 First things first, let's turn this folder into a Git tracked repository.

00:01:47 On the top left or the bottom right, you can click version control and then create a Git repository.

00:01:54 Open up the current folder.

00:01:56 And immediately, this folder will be turned into a Git repository.

00:02:01 This is the same as running the git init command.

00:02:04 And immediately, you can see that right now you're in the main branch.

00:02:08 I actually prefer having this on the bottom right, so I'll press Command-Shift-B, then I'll search for Toolbar, and I'll hide it.

00:02:17 If you hide the toolbar, then its details will appear at the bottom right.

00:02:21 So right now, you can see all of the branch details here.

00:02:24 Now that we have initialized the Git repo, let me show you how you can commit using a GUI.

00:02:30 You can go to the bottom right corner and then simply click Commit.

00:02:34 It'll immediately lead you to this menu showing you all the unversioned files.

00:02:39 You can select all of them and then add a commit message.

00:02:42 I'll say, initialize the repo.

00:02:47 And I will commit the changes.

00:02:49 It is as simple as that.

00:02:52 Now, if you click on the main branch once again, you'll see that you also have the possibility to create a new branch.

00:02:59 So let me show you how to do that.

00:03:01 You just press new branch and enter a branch name.

00:03:05 Let's do something like new-branch.

00:03:09 And it even asks you whether you want to check out to it immediately.

00:03:12 For now, I'll untick that and click create.

00:03:16 So, since we haven't moved to it immediately, how can we move to that branch now?

00:03:21 Well, you can see this little pop-up telling us that a new branch was created, so we can click here, and here you can see the new branch.

00:03:30 But an even easier way to switch to it is to click at the bottom right, or the top left, and then simply select the branch you want to move to,

00:03:38 and click Check Out.

00:03:39 And that's it, you are on your newly created branch.

00:03:43 I love how WebStorm conveniently organizes these branches into recent, local, and later on will even have remote.

00:03:51 So you always know at which versions of your branches you're working on.

00:03:55 But of course, that begs the question, how can we push these branches to remote?

00:04:00 We usually use the command git push dash u origin, and then the branch name.

00:04:05 But with WebStorm, you can do it in a single click.

00:04:09 Just click push.

00:04:12 Click define remote and you'll have to enter the URL of your remote origin.

00:04:17 To get it, I'll create a new repo and I'll call it WebStorm underscore git and click create repository.

00:04:28 And I'll simply copy the URL back in the code.

00:04:31 I'll paste it, click okay, and click push.

00:04:36 Check this out.

00:04:37 All of your code has been pushed to the new branch and now a new origin new branch also exists.

00:04:44 And it even asks you whether you want to immediately create a pull request.

00:04:48 I won't do that yet.

00:04:50 First, I want to teach you how we can add a few more commits to our readme.

00:04:55 So I'll add a new line and then simply say, commit 1. Then you can either go to this commit icon on the left side and then select it and then modify the

00:05:06 commit message and simply press commit.

00:05:10 Or let's add another one, commit 2. You can also go to the bottom right and simply click commit there, which is going to lead you here and you can add

00:05:20 a commit to.

00:05:21 This time, let's check out the second option, which allows you to immediately commit and push.

00:05:28 It's going to ask you to which branch you want to push.

00:05:30 In this case, we want to push it to the new branch.

00:05:33 So let's simply click push.

00:05:35 And in a matter of seconds, all of those commits are right there.

00:05:39 Of course, if you committed some changes earlier, like I will do in this case, commit three, add it, and then add commit three.

00:05:49 And then later on, you want to push them.

00:05:51 You can go to the bottom right, select push from here, and repeat the same steps.

00:05:56 It is super convenient.

00:05:58 Now, what about pooling some changes?

00:06:00 Let's say that somebody else comes to your repo and inserts an additional message, like a commit for right here and updates the readme.

00:06:09 How would you get access to that change directly within your repo?

00:06:13 Well, typically you would have to run git pool.

00:06:17 But by using WebStorm, you can just go here and press update project.

00:06:22 It's going to ask you whether you want to merge incoming changes into the current branch or whether you want to rebase, which will rewrite the commit history

00:06:30 by rebasing your current branch onto another branch, effectively moving it to a new commit.

00:06:35 In this case, we don't need to rebase.

00:06:37 We'll just merge it into our current branch.

00:06:40 So just press OK.

00:06:41 And in a matter of seconds, the commit for that another person pushed is right here within our local repository.

00:06:48 What about viewing history?

00:06:50 Well, let me show you something really cool.

00:06:52 Look for the git icon at the bottom left.

00:06:56 This one here.

00:06:57 If you click it and expand it, you'll see a ton of different Git functionalities.

00:07:03 You can see the exact changes that were made in this repo, who created them, and when, all within this nice-looking graphical user interface.

00:07:12 And within here, you can do everything and more that you can do with typical Git commands.

00:07:17 all by choosing one option from a menu that is in English.

00:07:22 No obscure commands.

00:07:23 If I open up the repo for jsmastery.pro platform, it is super convenient seeing exactly what is happening within our projects.

00:07:32 We can see what changes were made, who made them, when, and whether the tests have passed.

00:07:37 Check this out.

00:07:38 You can even see the merges that were happening.

00:07:40 This makes it super easy to go back to previous versions of your codebase if needed.

00:07:45 In addition to this, if you press here, and then you press console, you can see all the commands that WebStorm is running for you.

00:07:54 Of course, you know some of these base ones, but some of these more complex ones, well, it's going to be easier to do it using a GUI.

00:08:01 Now, how can we use WebStorm to merge one branch into another?

00:08:06 Typically, we would have to create it and then run git merge command to merge it into another branch.

00:08:11 In this case, select a main branch and press this arrow right here.

00:08:16 It's going to allow you to merge main into new branch or vice versa.

00:08:22 Similarly, if you click the arrow on this branch, you can easily create a new branch from this branch or you can update it.

00:08:30 In this case, let's go to main and let's merge main into the new branch.

00:08:35 In this case, it says it's already up to date, so we're good.

00:08:39 But what about pull requests?

00:08:41 One of WebStorm's coolest features is that it allows you to do all sorts of tasks directly within the IDE.

00:08:48 You don't need to use GitHub desktop or even GitHub to perform different actions.

00:08:53 Everything you need is right there.

00:08:55 So let's talk about creating a pull request.

00:08:58 On the left side, you can find a pull requests tab.

00:09:02 For you, it might be a bit of a different icon.

00:09:04 In this case, it's a GitHub icon for me.

00:09:06 Within here, you can do everything PR related.

00:09:09 So let's open up a new pull request.

00:09:12 In this case, we want to merge the new branch into the main branch.

00:09:17 But before we do that, we have to first create a remote origin version of the main branch.

00:09:22 So let's do that first.

00:09:24 I'll head over to main.

00:09:27 by checking out to it, and I'll simply push it.

00:09:30 Push to origin main.

00:09:31 It is as simple as that.

00:09:33 We can immediately now use this create pull request feature to move us to this pull request menu.

00:09:38 We want to merge from branch new branch, or you can choose origin new branch.

00:09:44 to origin main, exactly what we want it to do.

00:09:48 You can add a title of this pull request, such as implement for commits, because that's what we added into the readme.

00:09:56 Description is not needed.

00:09:58 And directly from here, you can add reviewers, assignees, and labels.

00:10:03 In this case, I'll just click create pull request.

00:10:06 And there we go.

00:10:07 It is right here.

00:10:08 If you go to GitHub and click pull requests, you can see the new pull request indeed has been opened.

00:10:14 The next cool thing is that you can see exactly the changes that were implemented for each specific commit.

00:10:20 So if you go here, you can see that first at some time they added a commit one, then later on they added commit two and so on.

00:10:28 But now we're interested in all commits, so now you can review the changes that were made for each file separately.

00:10:36 First, we want to dive into the readme.md file, so right-click it, and then it'll open up a diff.

00:10:42 A diff, or a difference, refers to the changes of a specific file on two sides of the coin.

00:10:49 or should I say on two different branches.

00:10:52 One is the branch that we're trying to merge and the other one is the branch we're trying to merge the changes to.

00:10:58 You can view those things either split like this or unified in a single editor.

00:11:03 And based on the green or red color, you can see the changes that were made.

00:11:07 In this case, I'm happy with the changes and I'll click submit.

00:11:11 And if you're a reviewer, you can immediately add a review directly within WebStorm.

00:11:16 You don't have to go to GitHub.

00:11:17 Just by pressing a plus here, you can add a comment, something like, fix this line.

00:11:23 And you can even start a review.

00:11:26 There we go.

00:11:28 Finally, you can submit your pull request review.

00:11:31 And you can add one final comment.

00:11:33 Looks good to me.

00:11:35 Great.

00:11:36 Finally, if everything looks good, you can press the three dots next to the request review button, and then say merge review,

00:11:44 merge.

00:11:46 Merge pull request one, it'll implement four commits, that's the title of the pull request, and we can say merge.

00:11:54 Believe it or not, this is it.

00:11:57 So now on main, you can simply update the project and all of these commits will come directly to your code base.

00:12:05 I mean just how convenient and intuitive and efficient this is.

00:12:11 At start, you might feel like you are kind of cheating the system, or that you are a bit of a less of a developer by using this help that WebStorm provides.

00:12:21 But don't feel that way.

00:12:23 Any tool that can make you more efficient is welcome.

00:12:26 And what matters is that you understand what WebStorm is doing behind the scenes.

00:12:31 And you do because you came to this point of the video.

00:12:34 I think that in just a couple of minutes, I've showed you all of the primary functionalities that before using the terminal,

00:12:41 I spent more than an hour to explain.

00:12:43 And we've accomplished all of that and more in just a few minutes.

00:12:47 But there are so many more things that you can do with WebStorm.

00:12:50 One of these things is a fetch.

00:12:52 If you see this icon on top right, you can just click it and it'll fetch all the latest changes.

00:12:58 Another thing is how easily you can delete branches.

00:13:02 We no longer need this one since we merged the changes.

00:13:05 So you can just press delete.

00:13:07 Here we go.

00:13:08 That was it.

00:13:09 You can also compare different branches, mark branches as favorite, or even cherry pick from a specific commit.

00:13:17 If I go right here to Git at the bottom left and go back to Log, we can see all of these different commits that I added.

00:13:25 Cherry picking is a very advanced technique, but in WebStorm, it is as simple as clicking this cherry pick icon.

00:13:32 You click it, and it'll allow you to pick the changes from this commit.

00:13:37 You can press merge and then you can see which changes you want to accept.

00:13:41 This is similar to reverting or resetting to a specific commit, but it gives you even more power to pick and choose which features you want to keep and

00:13:50 which ones you want to remove.

00:13:52 You can also rename different branches.

00:13:55 or even revert to specific commits directly from within this view.

00:14:00 Typically, you would have to get the commit hash, figure out what you want to do.

00:14:03 Here, you just press revert commit and that's about it.

00:14:06 We cannot do it now because we have unstaged changes, but that's also pretty easy to resolve once you have WebStorm.

00:14:13 You just go here and you can easily resolve all the conflicts and then commit.

00:14:18 And when a technology is so good that it feels like magic based on how many things is it doing for you and it's doing them well,

00:14:25 well, it almost feels like magic for us developers.

00:14:29 So whichever complicated feature you want to use, you can use it within WebStorm with ease.

00:14:35 These were just a few examples of how we can use the WebStorm GUI to perform many different Git operations without needing to rely on a single Git command.

00:14:44 And that's only one of the reasons why I love WebStorm.

00:14:48 While you can accomplish some of these tasks in other editors, not all of them are possible, as there's a clear difference between an editor and an IDE,

00:14:56 right?