Git in VS Code

timeline, outline. Click on timeline. Seen any of these other tasks here. I've only ever looked at the I've seen outline maybe, but I've never seen timeline. Woah.

And like this one right here, just put that in your brain somewhere because at some point, you're going to accidentally oopsies dash dash wait.

and close the file, and you're gonna be like, where did that code go?

Explorer.

open up your just your file listing Rid. You can filter by branches, filter by authors.

Nuke something yeah. Parts of me agree. Like, you can just drop down and see all your branches names, but then parts of me is just like, And, like, I wouldn't even know what the flags are for all of these things in in the CLI.

video or something like 10 things That are kind of niche, you know? Yeah. I have a series, Versus Code Pro Tips, where I just talk about little things that I've picked up here and there. So Good. A little like one offs.

a Versus Code

The outline

I love this. Have you have you done that? I've done it many times. Yeah. And I'd I'd I'd like I said, I didn't know this timeline existed.

Interesting.

And do you see at the bottom, it says commits, NPM scripts, sent me a tweet from 2020 and said, I just made this after taking your course, and it was Riverside. What?

It's called the Explorer, Wes.

I need to do like

to the podcast.

Yeah.

Yeah. Yeah. Those are the things like you. Versus Code has so many little features that you don't necessarily know them all. My little trick to people is open up the command palette rid. And scroll through the entire thing and just, like,

look for random out of the way. Do you have no concept of everyone you're blocking? That's like the George Costanza. Do you remember that Seinfeld episode Where he pushes the little kid out of the way. Yes. Yeah. I do.

Mhmm. In your sidebar?

Okay.

from your markdown file. You can jump around to it, But the timeline is is unreal.

It's really handy as well. If you've got a markdown file, it can give it gives you all of the nested headers

rid. There is a little, You can

change. So if you go into your sidebar, during at the right time.

is that, that is part of your commit.

rid. After you've committed it, but you've saved it and closed it down,

Versus code specifically And I I my wife always hates how impatient I am, but I'm just like, rid Go. Like, move your legs kind of, like, take a copy, do a whole bunch of work. And if you need to dip back into the working version of that, rid. You can sort of keep your changes

and and then click on rid. Save it, and then make another change and save it and click click back to the one of the last file saves, like, 30 seconds ago. Rid. It will open up a diff You might have changed a little bit of HTML. You might have changed a little bit of JavaScript. You might have added an image, and you might have And what that will do is it will open up the merge conflict. You can save it

and it will show you all of your git commits in there. Rid. But then it will also show you your file saves

you're you're kind of out of luck unless you have, like, time machine where a time machine magically backed it up right cracking. Tower. That's the one. It's not rid. They I have them in my pocket all the time, and you have them in your ears all the time, and they get disgusting.

thing in Versus Code called timeline,

One thing I don't think a lot of people know about,

But Versus code will actually take a there's a couple other ones where before you before you go ahead

in between commits, meaning that, like, if you accidentally nuke a file in between those git commits. So if you make a change

for you, and it will show you this is what it was before you saved it, and this is what it was when you saved it. Rid. And you can revert back to those just like it was a git commit, which is unreal. I love that feature. So I'm gonna need you rid. Me where exactly that is because I've never heard of that. I had no idea that existed.

There's also

rid. Into Versus Code. So if you are inside of a file, you can just right click and it should say here you you try rid rid. You your Versus code is still tracking changes, and this this has always been a kind of a scary thing for me. And, quite honestly, it's a reason why I Have kept working out of Dropbox for so long, and I've been doing this less and less. I'm almost totally done with that. And the reason behind that is because

being able to see a given file history for me is is really nice. In fact, I'll also talk a little bit about an extension that I use

Git history, or is this, like, just straight up a file history? This is straight up baked into,

rid. How Git use Gitworks or GitHub works, or they have they have docs on GraphQL and Node. Js and Perl and Python.

Wes, you have file history here. Is this Part of the extension

Around like, this is not necessarily how to use Linode, rid. A bunch of closing rid It's a but maybe, yeah, Dreea is a tower of type. Tower is a big one. There's all kinds of Yeah. Kraken is a big one. Yeah. Kraken, rid. I've used that one, but that's been been years years since I've I've used it.

the diffing,

docs. So they have just and this has just been updated less than a month ago, A beginner's guide to GitHub.

Rid. And then what that will do is it will open up another panel in your Versus code, and it's going to show you literally your file history. So it will show you all of the commits

And that's what I love about Linode is they've got, like, really good docs, really good documentation you need to tell git to wait.

Linux hosting,

within GitHub. Now there's 2 different kind of ways for

but they know that, okay, you're using Linode. You probably are also needing to know how,

me personally, you know, I'll hit issues where I'll just be like,

You name it, they've got it. And I find that to be really, really handy when you're trying to find a specific commit. Rid. Yeah.

Yeah. I often there is a drop down, and you could say after post commit command, you can sync, you can do nothing, or you can push. And I have mine set to push so emoji just so you can get like Slack style emoji all over your computer without having to have a separate app. It can have really nice,

if you're running a virtual private server, that might be a great way to utilize some of your Git skills in the command line because, you might be rid. SSH ing into a box and using some GitHub stuff or get get get commands using that CLI put to work. Wes, do you want to talk a little bit about Linode? I do. Linode is the

So let's actually take a quick moment to talk about one of our sponsors today, which is Linode. And, actually, Linode,

rid. Paste it in and make sure you have the right one. Kinda scary. Much nicer just to see the actual commit

To quickly and easily check that file history, but being able to, like, time travel back in time and see sort of the status of any file, when it was changed By whom and in what branch and what version. Any of that stuff becomes such a power tool when you've been working in a code base that's existed for a long time.

so You can quickly and easily see what's been removed at any given time over time between 1 file version and another file version. And, typically, the way VSCode will do it is even though it's essentially 2 tabs open, it'll have them as 1 tab in the tab bar, And it will say, for instance, like index dot HTML and then then parentheses,

awesome company that they are, and they're gonna give you $100 in free credit. So listen up. Linode's an awesome company. So if you wanna host your website or host your note app or literally anything, they have products for every single thing that you could want to host.

the commit, the shortened commit number, and then an arrow over To say the same file name and then the commit that you're comparing it to. So you can see directly the commit numbers in which 2 files you're comparing, And you can get a good view and a good understanding of what has changed. Just at a a quick glance, you can scroll up and down, and you that information in the the scroll bar too. I don't know if you've noticed this, Wes, but in the scroll bar, there's red and green showing you where exactly all of these changes take place. Rid. Super handy.

I just did command palette file history, and that a diff,

Double concerned with it on GitHub,

Rid. But they also have, like, very, very good or untracked.

Rid. And we moved to this app extension.

So it's pretty cool. We should have the the the guy that made Riverside on. Yeah. What? And then ready. On how to use Riverside. I would love that. Yeah. That'd be fun. Here. Here's what you do. You go to the link.

And, so like life. There's some circular dependencies there. Yeah. Wow. It's I obviously, Or or going to, like, a popular Instagram photo spot, and there's just line Line. Like dozens of people.

rid. I love seeing that. Like, I don't know if I could build this. This is amazing.

Sometimes it's a little glitchy, but don't worry. Rid They're working on

that does, merge conflicts Because doing that in the command line, I've done it many times. Git reset dash dash hard, and then you got to copy the commit short hash, Versus code tracks your changes session of coding. I really like the source control, and I bet that's the next the next gen for these terminals is that, like, Like, Warp has all these gooey features. It has a command palette. You can see all your commands. You can search.

rid super base a little bit if you're interested, as well as things like three d and Svelte or browser APIs or Keystone JS with Amy Dutton. You can check it out. Learn all of that and more at level up tutorials.com.

and you would have to populate the user's name into that and then also select from a drop down.

and then it has a little like a stiff bristle on one side. And then on the very end, it has, like, meaning that it's not a huge separate app or whatever. I'm I'm already in my editor. I feel comfortable in it, and it just adds the right amount of buttons, The right amount of,

Or drop a review if you like this show.

pokey bit, which is you you poke that down into the it. You're working on it. Alright. So we are,

which is a,

syntax.

for a full archive of all of our shows.

So they do all of your invoices, all of your client management, all of your rid your project, your time tracking,

via a like a form. Yeah. I used to have a bunch of, like, Auto completions,

And this is the ticket. I initially saw it on, it was like a TikTok ad, and it was, like, worth, like, 5th $15. I was like, there's absolutely no way

Awesome. I'm gonna shamelessly plug All of my web development courses. So you wanna learn a little bit about CSS or JavaScript,

Windows, and Linux, and it's built in Rust. It's called Espanso, I almost never keep both. I don't know, like, if it's just the way I code, but, like, keep both is almost never something I select. Sometimes I end up rid Just going in by hand and not clicking the buttons and just highlighting and deleting the the code I wanna keep and whatever. But in your actual code,

little,

.com. It's my tutorial site that I have, the 4th version of the UI of our site that we're designing. And so that is a branch. It's a Totally different version of the site that we can completely work in in isolation and then bring changes in back and forth. Yeah. I think that's pretty good for for jargon.

it's a great application, and I love expanding text because it can make you Have auto completion stuff really nice and easy, but here's an app that is free, So

rid. You poke that down into the,

support person that does email, but I use this a ton. And I've been I've been on the, like,

and, essentially, what it is is on one side, It has, like, a microfiber rid. The reality is that people wanna do the same stuff I'm doing, so they want

Rid.

Stuff, whether that is a real time remix with Supabase,

I am going to sec pick something really cool. I'm gonna hold up hold it up to Scott and see if he can guess what it is.

Alright. Now let's get into the part of the show that we call sick picks Or we pick things that we think are sick. I have a sick pick for y'all today,

the one time payment

such as a FreshPick, I you could say. Wes, do you wanna talk a little bit about FreshBooks? Yes. Freshbooks.comforward/

The case gets, like, full of dirt and, like Like, it has magnets in it, so it just it attracts, like, I don't know, random bits of metal. I'm not sure what I'm doing, but my AirPods are awful.

completion is the perfect rid. Place to see all of your errors and exceptions happening in a visual video scrubbable replay and also get a handle on just how your users are visiting the site. Now it's funny this rid episode's about visual tools, and LogRocket Good way to go ahead. You're you're hitting those git gitdocs, which, personally, I if I'm in the gitdocs, I'm not having a great time.

Yeah. It also looks like something you could stab someone with. It's definitely stappable.

You'll West, you'll you'll like that there is a package to do random dad rid folks from here. So that's pretty neat. There's a whole ton of packages, actually. So, including some Git related ones, which I haven't used myself, but here they are. Rid. So looks neat. But, yeah, check out a spreadsheet, though. X triggers. Oh, that's cool. Oh, I don't like that. Yeah. This this seems rid. Sweet. I'm excited about this.

for around the world, your

massive catalog of tutorials.

Rid. I almost said Linux. Windows and Linux. MacOS,

So I got this tool. You can get it on AliExpress. It was You could see a list of all the courses I have available. Lots of free ones, lots of paid ones.

an AirPod cleaning tool. Oh. So, man, if men my AirPods,

level up tutorials which honestly is is probably redundant now that GitLens has, like, really good history and there's individual file history. But I used to use this Git history And don't forget to subscribe in your podcast player I do my commit, I hit enter on the commit, It automatically pushes up to whatever branch I'm working on. And to me, that's it's it's one less thing I gotta do. And since our workflow is so, you know, buttoned down, it just feels so nice to me to do that. And then I might even change this push to sync, new new, half year new new me. I'm I'm ready to go. So, Yeah. I got a couple donkeys of the day.

So just go straight good live tip right there. Yeah. Yeah. Just go straight to AliExpress and buy it for a 5th of the cost. Sick. Well, I love that. Okay. Yeah. I'm gonna pick one of these up for myself. Alright. Next 1 is going to be our But even some ways that you can work with your code to understand it a little bit better. And before before we, I don't

What does that look like? It looks like a pen

is looks like a calligraphy pen.

text expander application. Now text re Expander went, like, paid subscription, and it was kind of, Why? Well, the okay. So that needs to go in the, the Southport. The syntax code generator.

AirPod case,

If you do get a paid one, like my beginner JavaScript, you can get $10 off

he he's been looking for himself. So, like, form support where you have your own form and it inserts your your text into

old version of TextExpander forever because there's no way I'm spending

We offer a la carte pricing so you can buy each course individually, or you can and get access to everything on the site, which is a massive, extension. And this is another one I think I might reinstall now that we've done this little deep dive to see, when did this file get changed exactly? Like, I don't I remember this file being different, or I remember this line being different. And and sure enough, there's git blame stuff there too that we'll talk about. But, get commit and push that where the commit message is just like rid. Testing forget how the actions because it's such a pain to to make sure, like, something works. So you gotta wait for a tall run through, and then it doesn't work and you try it again. Rid Another extension that I use, we before we can wrap this up here is conventional commits. And one thing that I really like about the conventional commits extension is it gives you All of those conventional commits workflows if you use that that way of working in Git, and it puts them all in your command pallet, but it Also puts them into

rid. To talk about a nonsick pick, but a sick pick nonetheless, which is FreshBooks. FreshBooks,

It's just a cool little nice little tool. It comes with a nice little case For $3 shipped, just I don't know. Just go to AliExpress and type in AirPod cleaner. Yeah. There's, like, 10,000 of them that all look the same. Yeah. Exactly. So I was wondering, like, how do you get the dirt that you have done to this file, who has done them.

with John Myers, Production branch. Yeah. And I would I would personally just describe it as a version of your code. Right?

Rid. I don't do that anymore because I have, like, a dedicated I think Scott and I both have been,

So if you're interested in learning any modern web development

your your main branch or your master branch. That's generally what people use as their syntax. That I'll get you a 30 day free trial. Thank you, FreshBooks, for sponsoring. Sick.

new sales page.

rid. I always like to think of it as like a folder. So, like, if you were working on a website and then you needed to,

Maybe if we hit any others, we can make sure that we call them out because Git that I think that was one of the biggest things for me when I was first learning Git is you just People talk about it in such a way where they kinda everybody just assumes you know the the right words, and you're all just saying these words. But They're all very specific to what it is to work in Git. And if you don't have any experience there, it's kinda hard to get past that jargon.

work on another feature for that website, you might rid. Be tempted to make a copy of your folder from, like, the working the the working website. You might want to make a copy of that folder into, Another folder and then rename that folder to, like, website dash

A branch is sort of like a

So what

from your other version of the website until you are ready to, Something that like, it's it's all on, like, teamwork flow. Like, I worked Yeah. When I did contracting, I worked for, Then you can also search the commit history.

rid. What branches will allow you to do is to sidebar as well simply just because they give you buttons to do common things like you can they have like you can just sync it with your rid. Is changed, and it's not necessarily the same line because Git is very good about figuring out, like, alright, if you added

isolated because we would have a 100 people pull request adding themselves to the very bottom of the file.

they cannot Git itself does not understand Head on over to syntax.fm

those changes that have been made whether or not is it will have the file that you are comparing it to and the older or newer one based on whatever. It'll have them open rid. Side by side, and you can see highlighted in red with a minus sign in the gutter is everything that was removed from a given version of the file. And then in the newer version of the file it could be plus with a green for anything that was changed or added easier.

rid. Do you know exactly what conditions create a conflict in rid Just to pull down as well. I guess maybe I like to be a little bit more control of when I'm pulling down code, but push to me feels like it will have a c next to the file, and that c stands for conflict. There's a conflict with this file. Rid If you click on that c on any given file that there's a conflict on, it will show you a diff.

in GetWes? shameless plugs where we plug things that

What to do with the code coming in and the code going out? Where where syntax. Thank you, Linode, for sponsoring. So now we talked a little bit of ways that we can use Git in Versus Code. Let's talk about some features that exist within Versus Code to make your Git life exactly what what extensions are are various here. We also have git graph, Which is an extension I use for a really nice visual representation of the branches that you have, the current branch, how it all works. I mean, we're talking about branches, and this gives you the ability to them in that whole branch Oh, I have not. I have not.

and it's fantastic.

what code do you want us to keep? What code don't you want us to keep? And what is the actual it's like lost lost the plot in terms of,

when,

Git cannot, just in 1 fell swoop. And I always found that to be, like, a great way to work. If I was seeing that, you know, me and a co worker were coworker were working on the same branch And all of a sudden, I'm seeing code come in. I can just go ahead and click that and stay up to date at any given point, and that to me is really nice. I also this is where I rid. I use my mouse to the bottom left corner of Versus Code, and I click to change my branch. That's how I change branches in Versus Code.

go like, you go to it and you're like, okay, I can merge this one. And, Oh, that one you can't merge. Let's try edit it online. Oh, I can't. Okay. And let me let me pull the origin down and and fork it into its own branch and, You know, like that can be a little bit slow sometimes. Yeah. I would love to be able to

hover over specific issues. You can filter for things that were created by yous.

handy for, like, like, triaging pull requests because, like, I, I my personal website, I've got, like, 20 pull requests open for it. And I would love to just, like, motor through that right from my editor without having to

6,000,000 people are only 3 out of 5 stars, though. Interesting. I when you when you wrote this in the the show notes, I was like, oh, am I am I a dummy for not knowing this existed? So I'm really glad to hear That, you didn't really know about this either because at first, I was like, wait. Why the why isn't that I I didn't have this installed. So, yeah, I I should check out the GitHub extension. I have not used it. Rid One that I I don't know, incompetent because I couldn't figure out or you you would you would run you would say, how do I, you know, add things To the you know, how do I add files to be tracked? And you'd see, like, 8 different ways to do it. Oh, you do git add dot, git add hyphen, I don't know what that would be like. I haven't used it, but it kinda looks sweet. So I might I might wanna check it out. Yeah. The the read base. Rid. Sorry. Rebases are always kinda tricky, And you see what What kind of new features or experimental things? Also, you know what's really great, though, is the v s nobody does I don't think anybody

like,

synergy between your Versus code and GitHub stage it.

rid. That makes the,

into your own branch for that one. So they makes it nice and easy for me so I don't have to remember the syntax for that. Last rid. Tip I have here. Somebody mentioned this in Twitter, and I said, oh, I've been using this one forever. It's super handy. It's, fun commands Yeah. And see what they do. You know? Or people are always like, how do you know rid these features. I literally just click all the menus and read all the menus, and users usually hidden functionality

a little bit tighter. So I I have not used this yet. I just installed it. I had no idea they even had one, but, obviously, it's huge. There's I bet that's the next or just try to go all in on using Warp for, like, a week or two. Mhmm. I don't have any like, I don't use any of the hyper plug ins anymore. I just like the only one thing that I love about it is that I have a pink border around it.

You'll get 14 days for free. So definitely a tool you want to try. Least head to their website. Watch some of their videos. See what it's all about. Really interesting stuff here.

Obviously, commit often because you don't want to lose your stuff.

It gives you,

Rid. But when you submit a pull request for a feature, it should only be 1 commit that's nice and tidy. Other other teams will say, whatever.

to solve them. There's just something about that visual aspect of Working with the tools, whether that's the the console logs or the network request tab, and being able to see these things happen and really just dive into them makes it such a a great experience to solve bugs. So check it out at logrocket.comforward/syntax.

Rid. You got 8 commits. That's all valuable information rid. What is on the remote? And then there's a possibility that somebody else forked what you had, opened it up for me. Okay. There you go. Command palette file history.

Let's keep those in the code base. Right? Interesting. Alright. Well, let's take a a quick,

Love these visual tools, man. I'm a visual person.

is one of those visual tools just in a totally different context. So for me, LogRocket is one of those things that Will will really change how you debug websites because having a scrubbable video replay suddenly opens up to this whole world of being able to see errors happen. And When you can see errors happen, it just makes it so much easier a couple weeks from hell here, and I am feeling like today is the start of a new

at logrocket.com

rid. This is the line of code that I actually want. I want it to say, you know, espanso.org.

So now what's happening is we we we both had I love pizza.

Scott changed it to I love sushi,

G I t it together. That's for sure. Yeah. I'm I'm glad you managed to to get food into this episode.

if some line of code has changed,

ready. You have changed it also, and you're trying to merge it. It says, okay. Hold on.

in

rid. Git will will say well, 1, it will in the source control tab, And

typically, I don't like The integrated command line into Versus Code for some reason. I I No. Even typically, if I'm working in the command line, I I typically have Iterm open. Rid I I don't know why. I I just like that context switch for me if I'm doing the command line stuff, but I I've never Is that they're so well integrated with how and where you're editing your code already. It's not a separate app. It's not a different context. A lot of these things work hand in hand with exactly when and how you're writing your code.

do that yourself because Git has no idea. Okay. Well, you changed it. So does Scott. Like,

rid. Generally, if where you could never rid Used to never be able to automatically Scott tried to change it to burgers. I tried to or Scott rid. Tried to do change it to sushi. I tried to change it to burgers. That's a git conflict. Right? Bringing sandwiches into us, and, rid. Then you have to manually no sense or

So what happens is when you have a conflict, rid. Repose in this monorepo.

That's great.

Rid. It says I love pizza. That was the original.

We have a good track record here going. Whether it's under the hood or it's Sandwich building or something. We, we have a pretty good track record there.

rid. Versus Code GUI for doing merge conflicts because see what happened and manually do it yourself.

the hyphens and some bunch of stuff there to show that there is, where 1 branch starts Or one one commit starts and the other commit ends and, what's coming in and what's going. And so you can say, oh,

and I changed it to, jargon do we have? Commit, diff, head.

is really handy. Interesting. So okay. Well, that's that's rid. Really, really insightful. I so this is what we have here. I know we ask for a lot of tips on on Twitter. If you listen to this So and you say, oh, man. I have all these great Versus Code tips for Git. Please hit us up on Twitter. Tweet us at a what you think, babe? We can do an entirely other episode that's, like, So if,

and then close that file, and rid. Git itself will be smart enough to say, okay. They're done. Let's go ahead and and keep going. So the dash dash wait flag on code Rid. Yeah. Yeah. I think the only time you wouldn't want it I think I'm gonna turn that on. I should say that. But the only time you wouldn't want that on is if you have a

Yeah. So that maybe we can try out some new stuff and learn some new things ourselves, and, we can all upgrade together. Let's take a a quick Alright. Let's get into extensions really quick, and we're we're kind of running out of time here so we can breeze through some of these. Oh, shit. Yeah. We've got rid So much more. We this might need to be a part tour because, yeah, we've got

and rebase something,

What that will allow you to do is

rid Versus Code tips from user members.

if you are ever If you're using git from the command line and you need to do a rebase or a merge conflict or, Rid. You can say start working on an issue. So if you have an issue, you can immediately just branch off of main, in between commits, $6 a month to expand

any Versus Code command line in Or, not Versus Code command line. Any, Git command line, Specifically to to do Git, have you try like, I know you mentioned that you tried some of the UI tools. Which which ones in particular did you try?

the GUI tools here and there, but I've mostly been a used git from the command line. Rid. And every now and then, I dip into the Versus code or the GUI tools, and I'm like, oh, these are actually really nice. There's So we switched,

CLI users of Git For most of our life, I've dipped into the like, video audio recording, does guests, and stuff like that. And it's awesome. And I did you see The guy on the guy who made Riverside billing in different Currencies, you name it. FreshBooks does it. If you're a small business and you wanna save time so you can actually work on coding instead of actually having to rid. Do the books of your business. You need to check out FreshBooks. You're gonna get paid faster, and you're gonna spend less time fussing around with your books. Check it out. FreshBooks.comforward/ out of the inside of the AirPod case? it obviously does make sense. It's it's part of the language. But just to like regular folk like us, It's kinda your HST, all your different taxes it was Red Hat, and we rid. Squashed all over the place because They go put a towel on the beach chair at, like, 5 AM.

tools within Versus Code

Capital a, That's that's a little bit of my history with it. Again, none of these tools have really stuck for me. Most of the time, it's like I would download them and install them and then blah blah blah. But

get into that aspect, do you wanna maybe cover some Quick jargon that we're gonna be saying. I know sometimes when we get into Git world, we'll we'll just say things like commit

I didn't start until maybe last year sometime really diving into the The Versus Code Git tools. And now I gotta say, Wes, I have not really written,

to do all of my Git things,

a lot of random stuff in Git that you have to memorize.

hard to use. Don't you agree? Yeah. And Git Git, I think, has such a barrier to entry for new developers that when I was first learning Git, I remember feeling There are extensions to this thing. There's packages you can install it and can autocomplete Simultaneously, Let's talk about conflict resolution. When so conflict rid. Resolution is something that takes place typically when you're merging or pulling in code where code has been modified somewhere else, whether that is From an automated process on GitHub, you know, from a GitHub action or something, or another user's modified code and push up to the branch or a pull request or something, And you have what's called a conflict, and a conflict is typically Yeah.

and then the like, it's like there's just so many different ways to do the same thing that it always felt really overwhelming to me. But I I've been since using, like you said, the the the command line to do Git for a very long time. And,

That makes absolutely

commands for quite some time. I've only been using the visual

and diff.

So,

and I'm a big fan. So I think what we're gonna do in this show is really just talk a little bit about What are the different options? What are the different extensions? What are the reasons why you might use some of these UI tools rather than using the command line? And and and very well, many of you might say, well, I'm just fast with the command line. And I I I totally agree with you. I I'm rid. Typically, way faster with the command line as well, but I think there are some tools here that can provide some speed to your workflow, some automation, some structure to your workflow, And I actually this is how I primarily interact with Git myself.

if I'm showing any git stuff, I don't want to, like,

as few paid things if possible, no paid things as possible, Rid. And then that would sort of wrap all of those things together so that if you ever need to undo those changes or go back and look to see what was done, they are grouped together into a commit.

I think that the beauty of these Versus Code tools and UI,

I don't wanna, like, take sides on what version, especially if you're using, like, a paid thing. That's another people always ask me, like, why are you using Webflow? And branch. So you say, like, in Rid. It's just, like, so nice and quick, and it it doesn't get in my way. It's not like, a lot of people are, like, just don't use the Versus code stuff. Use a GitHub desktop. It's way better. Rid. And I

things that we're gonna be talking about specifically,

it's really nice to be able to quickly say, rid. Pull from checkout to merge this branch, rid.

rid. Developer was, like, teasing a whole bunch of kinda neat integrations, You can discard changes to a specific file. You just Oh, yeah. That's so handy. Click it. Discard changes. Done. Like, what the heck Is that command in the CLI? I always forget it's get reset Yeah. It's like when a line of code a huge feature, and you commit allow you to create tags and branches

Gen for the CLI tools. It's not just

Yeah. I know. It it does look nice.

I don't have a reason. It's gorgeous. It's a good looking app. And they added all the hyper stuff, so you get that little toolbar with all the CPU stuff that the hyper has, and there's Yeah. I think I need to to move back,

Yeah. Just so, like but it's no it's not I never noticed it as an issue until I switched back. But I saw the Iterm two It'll show a little photo. It'll show you when they've done them, obviously, the commit hash. But then it will give you a whole bunch of, like, gooey features for doing resets. Soft and hard resets

And and I've never really gotten too deep in the hyper, but just mostly for performance reasons. And yeah. It's not that big of a deal. Like

commit, whatever.

Rid. Because So I fixed that by saying add yourself at a random location.

Warp again last week just to see where it's at. It's getting really fast, especially, like, I'm I'm still using A lot like, I'll add a line to the end of the jokes repo, and then somebody else will add a line to the end of the jokes repo. And what happens is that okay. Well, rid. 2 people edited the very last line of this. They're both adding their own joke,

I

which is which is very good.

In UI tools, Wes, are are there any UI tools that you've used in the past GitHub actions

what okay. So So we we talked a little bit about, the fact that we both came from, like, a CLI background.

rid have used in the past the GitHub GUI,

tower go to westboss.comforward/courses.

context. It's where you're writing your code. So You can get all of this interface directly in front of you where you're writing your code. And and I I just I like that about the the UI, especially for for diffs. Rid. You got your Prettier working. You've got your all your auto completion, your syntax highlighting. You're just comfortable in the code. And if you're making But diffing in general, when you're comparing 2 files in Versus Code, What it will do oftentimes Some people, this scares for some reason, and this does not scare me. I really like this. And what it is is automatically pushing your code after a commit.

Some people I I I did a little video on this on YouTube, and I I definitely got mixed.

A kind of scary merge conflict

and we take a a sponsor break, I wanted to just talk briefly about one Little automation tip that I have that you may or may not find to be useful.

it is exactly you're not having to switch your context

And my monorepo has sub repos. It has private and public, Rid. Courtney does that, so I can't talk too much about that. Oh.

And that to me just is a nice,

So to me, having that visual backup of, like, what is this current status of of my or my tracked or untracked rid. Files to me is is a big indicator of where I'm at in a given However, this time, there'll be Sections of the code that has incoming code, outgoing code, and whether or not you want to keep the incoming, keep the current, or keep both.

one of my Git repositories

this has become really where I live for all of my commits, especially because I have a a somewhat decently sized monorepo.

I'm seeing, like, a ton of modified files. That's a good indicator to me that, you know, I should be doing a command right about now. This thing is getting kinda heavy. There's a lot a lot of changes being made here.

depending on, like, what's the status of this thing. Has it been,

we we have all sorts of ways if I wanna commit to a specific project or work within a specific project. I can see Every single who we're we'll have on the show actually coming up to talk about The things you learn, Wes, this is why we do this show. This is why you listen to the podcast. Yeah. This is why I listen

So rid. Diffing. One of which is we'll talk a little bit about conflict resolution.

all of your projects and all of their git status, you can commit. There's a text box for any time rid. That's, changes have been made. Every single one of your files that's been modified shows up here, and it has a little different color coordinator with an m, a u, or a d,

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

So at the the very most basics, Oh, it's gorgeous. And the coolest thing about it is you see it. You see all the branches, And you can click on any commit there, and then it'll show you all of the files that changed in that commit. And then you can click the file up from there. It'll open a diff directly. All of these things are are things that we've been able to do, like, 8 other ways in Versus Code and Git, but this one for me is also nice and visual and just easy to use.

some of the ways that we can interact with Git in Versus Code.

So let's get into, a good visual representation of everything that's been going on in the given workflow that you've been doing. So So let's say I've been working on a feature for a given amount of time, and I noticed that in my source control,

Rid. And for the longest time, I don't think this is still possible, but you couldn't, like, pop it out, Oh, man. Alright. Well, let's rid Get into it. Let's talk about Versus Code.

rid. Gone too deep into using the command line within Versus Code. Me me neither. Everyone's always like, why don't you use the built in command line in Versus Code? Then it's just 1 app.

rid. The output and, like, I feel like it just gets too cramped. I just wanna be free Yeah. And be able to put my thing wherever I want. And I'm off I'm often running, like, 7 or 8 things in my terminal at once. So $3 shipped,

get, Versus Code has a a built in command line that you can use to To type in and do all your git commands in the command line if you so choose within GitHub. I've never done this personally.

I hear you. Just yeah. And I I feel like the I feel like Iterm usually runs a little bit better too in terms of rid Performance wise, I don't have any statistics to back that up with. But it it's a feeling, and it feels like it is. But I also agree that, like, I I do need I like to put my terminal wherever I want it. I want it over here in this monitor so that I can have a track while I have the browser and the the text editor here. Yeah. I like to keep all these things moving in the right spot. You know, I dipped into, I've created, but we also have a ton of guest content creators, ton of, rid. Really talented people doing courses for level up tutorials.

are waiting for you to pull down. And if you click that, it will pull pull down and push up any changes that you have

rid This is the right amount of of gooey for me. Yeah. It's it's like a it's like a brownie that you pulled out of the oven just a little bit too early.

Rid It's the right amount of gooey.

Yep. So, you can also rid change branches from here, Wes. I don't know if you knew this, but you can click the little branch name that's right next to the project name, and then that will bring a drop down in your command palette area to to let you choose the re really quick and easy. That's nice too. I don't typically do that. There's an easier way that I found. Now you can also interact with Git in the status bar, which is that bar that's at the very Bottom of Versus Code. That that's called the status bar, which, to be honest, I didn't know what it was called before I wrote this. The show notes for this, I had to go into the UI, and I was just toggling things rid until I found what it was actually called. So the status bar is where

Impressive.

your branch information, what's currently which branch you're currently on. And the next to it is a synchronized changes button. And this is, like, oftentimes

Versus Code kinda puts a lot of informational things based on different plug ins that you have installed or Maybe what what language or maybe Prettier is down there. But in the bottom left, there is

I just I I don't know.

another really good extension is Git history, tokens. I have a I have, like, a an alias that does, like, a quick,

I it popped into my brain this morning. So I was really angry at Capital One. So I was like, oh, they're the donkey of the day. And,

So maybe maybe a visual version of it wouldn't scare me less.

when that was in my brain, I was like, I wonder if I can put together a sound for donkey of the day and just bring it on Wes without him noticing it.

Rid. Another really good,

Then What is this of that. The day from? rid. I want that, but you chat. Shout out to the Versus Code team for using my theme in those release docs sometimes.

because you gotta know what all the words are. So I've never done a I've done an interactive rebase before, but I've always just, rid.

like a work tree, which allows you to easily work on different branches of a repository Yeah. Totally. Rid the world. That'd be scary because that's how people get hurt, I think, on those.

But I didn't have enough time. It also shows you authorship of individual code blocks. So it can say, like, before whole block of code who wrote it, which is nice. There's a interactive rebase features, which I've never used, but look nice. There's also a bunch of, like, plus Features that you have to pay for for private repos that are free for public repos, the version control window, the source control window. In fact, In addition to, like, being able to see, we've created. I'm going to shamelessly plug, Of course,

Edited the rebase file in Versus code. Mhmm. You put I or s or whatever. You know, if you wanna keep it or squash it or rename it, You just put them in, go for it. But I I should try that out. I almost never rebase because it scares me.

And we have a good branch flow where I'm not pushing directly to staging often where it's going to trigger or deploy to our staging environment. I'm pushing to Sub branches in them and do a pull request in the staging. So what I do is if you go into Versus Code settings, Okay. So let's get back to Git in Versus Code. So another way you can interact with Git in Versus Code is via the command palette. Now I don't know what the command is on Windows. I would imagine it's control shift p. But on Mac, it's command shift p. That brings up what's called the command palette where you can just start typing. If you type in the words g I t or git, You can see that you can do a whole ton directly from the command palette. So if you're the type of person who never likes to leave the keyboard with your fingers, and,

Now especially if you're you have, like, a good branching system set up and we have, like, you know, automation set up through, Do text expansions. You know? Yeah. Right. No kidding. Right? And that that's kinda how I felt, so I never really got into it.

and you search for post

commit Yeah. I mean, there are some things I really like about my Iterm setups. Like, you know, I can scroll with my mouse scroll wheel. I can click on links, and it opens them up in Versus Code nice and easily. Like, There's a lot of little niceties that for so long, you just felt like, why why can't you do these things in the command line? Why is this so obnoxious? lots here. Let's get into it. Yeah. Let's get into it real quick here. GitLens. GitLens is probably the best extension for,

Command,

that anytime that I commit, git Blame, which kinda sounds aggressive to call it blame, but that's just what it's called. Git blame just basically shows you who edited a file when they edited it. And this will show you in line in your you hover over any individual line. I used to use an extension Git named Git Blame for this, and I just realized to that GitLens does all of my Git Blame features. So I've uninstalled Git Blame now because GitLens does all of the things that I would want it to do Tell me who last edited a line. In that way, if you see some line and you're like, who's the donkey of the day? Oh, it's me. I'm the donkey of the day.

it's right there.

And then you squash them, then you are I'm pretty sure you have to force

I almost never squash.

meaning that a lot of workflows will be like let's say you're working on, like, a

for over, like, 2 days.

and that's where you get into hot water with with Git. But, Quite honestly, it's not your workflow.

if you push all those changes

what you might want to do is to squash

Sorry.

all of those commits into a single commit that says, rid. Added this feature, and then you send a pull request over because what can happen is rid. Cloud computing, They are cloud accounting.

to overwrite Get it together.

rid. Commit often and squash before you push,

Yeah, it's Who who is it that puts those docs together? Because Rid Alright. That's it. Thanks everybody for tuning in. We will catch you on Friday. Peace. Peace.

7 or 8 times throughout the I would say it may be one of the best GUIs to use. Rid. I have also used, by using the coupon code syntax.

it's not

it was a rule.

Like a huge, Right?

Rid. Sometimes you drive by the park near our house at, like, I don't know, 7, 8 AM, and there's people

It's a playground. What are you gonna do? Stop families from coming to the playground? So we, like, got this sneezy little table in the back and, like,

just, like, sitting there, like, holding the table.

So I do use conventional commits, and I like them. So, I like pizza or I like whatever. So you can you kinda have To go in by hand and and massage the the code a little bit to really say exactly what I want and what I don't want. Yeah. This is another reason why I love the

it whether it's the little there's a little button next to the check mark if you install this that pops open essentially the command palette thing that where you can use conventional commits directly from the source control tab.

test and run GitHub actions locally

would be just Yeah. So I mean, I that would be great. I think I wonder if they're working on that because that that's the one thing that get up actions and For git in Versus code, like, any any tips or or whatever. And I didn't even realize that there's an official GitHub try maybe giving what you think a commit is? Yeah. So with Git, rid. Git will track your files for changes. And every time you you say, okay. I've done something here. I want to explain you whole bunch of the what is that? Arrow left pointing arrows? Yeah. It's it's It's a bunch of junk I never look at. I just know it's there. Bunch of arrows, and it'll say the current branch name or or head. That means, like, what head means, like, what is on your computer right now. Rid. Then it will show the code that's on your computer, then it'll have a a whole bunch of equal signs, and then it will show the code that's incoming.

it was got to set up too much, you know, lots of push

the version control, rid You know, trying to set up before everyone's coming. I was just so annoyed these people were so aggressive about it. It's like, man, it's a 5 year old's birthday party at a a playground.

Other commits, and then you get rid of all those arrows and whatnot, and you're good to go. But rid. Versus code just inlines little as well as a whole bunch of links to reverting.

No. It's a difference. I'm assuming. What? Why would it stand for different than a car? Yeah. Yeah. So diff is really when you have 2,

you can diff, like, literally any 2 commits rid. Or you can diff, still using hyper. Mhmm. And, like, the the speed difference between that and warp is unreal. Why don't you use I term? called Riverside Rid. You name it. They've got it. So, like, metadata information at a quick glance, you can see which files are modified or deleted or I'm I'm saying this as someone who's like, I'm pretty rid. With Git, I think. Like, not amazing. Sometimes I have to go to the old Twitter and ask the actual experts, but, And I have mostly just rid. Stuck with the CLI. Another reason for that is because in my tutorials, rid. Merge those changes into

other branches.

to and you can revert or create a branch off of that. You name it. You got it.

it. Looking back at the history of a file as well just to see what's different there. Yeah, exactly. You can and it's open source, and it is multi platform Mac.

versions of the same file that you're comparing, and you're seeing what's different between them. So when we say a diff of a file, You're checking a file between the current version perhaps and an older version and seeing what's different. And that's many Many times in the context of of merging code or pulling code in, maybe there's an issue with that. But it can also just be,

What else? What other kind of, or I wanna be able to see

what is called the head, which is, like, your current working state

You can diff 2 entire branches.

Rid Yeah. I I also see it with, awesome job at all their documentation. If you wanna host your next website, your next node app, your next Python app, whatever it is, Check out the $100 in free credit at linode, l I n o d e, .comforward/ And then it will say

people that go to, like, resorts.

sorry. Courtney move right there. She she got it from her mom, but rid Like, they'll wake up super early just to grab the the most choice chairs and then just, like, throw all their stuff on them and then arrive back at them 3 hours later after rid best in. Who knows what? On the the same vein of it, have you ever seen those photos of, like, people climbing Mount Everest or people going up, like, a popular hike inside of those menus or in the command palette. Yeah. Here's a One thing that I do occasionally, you go to the, settings UI, and you go to the search bar, and you just type in experimental.

Oh,

Okay. Nice. That's way better than my explanation.

rid. What I have done to these files, that is called a commit. So,

and say,

Differential.

now I've changed a couple things about that, rid. And I feel like the code is in a good enough spot, or I want to commit to making those changes. Right? And that's what you do. You you add the files that you've changed, The same CLI we had 20 years ago, but like a like a v s code for the the terminal.

update about me page design.

rid. Think that was a great explanation of what a commit is? Do you wanna

rid. Do do you think that stand is that stand for, like, difference? Or what does that exactly stand for? Is that is that what it is? Stands for differential.

Rid. Then you say, okay. Based on the last time I committed, to Syntax. We don't need to clap anymore, Scott.

it diff. When we say diff, smart smart typing. West found some stuff in here that,

So, rid Wes, I I wrote here that a commit is code that has been modified and included into the session.

rid. Or you add the child the files that you wish to group into a commit. Because, like, let's say you're updating your personal website.

globalcore.editor I have a change from the original.

if you do git config Oh, man. Okay. So, Scott just clapped rid 32 1. I'm so I'm, I'm

And then you pass it code and rid. These are just anything any ad you get on Instagram or TikTok is just someone drop shipping something from AliExpress.

And many of the extensions that you install with Versus Code that We'll talk about later, end up having their own commands in your command palette, whether that be conventional commits or anything like that. So many times, if you're wanting to just Commit and you don't wanna leave the context of your code. You can just hit that command palette and commit directly

from the command palette, and that's really nice and easy. And and, personally,

I think that's way easier than even switching context to a terminal anywhere, whether that be in Versus Code or in another app. Rid. I think the killer feature of the command palette is simply just being able to see what the available options are.

Because if you just type commit, You see, get commit, get commit, all get commit, amend, that you have done. You can line up the hash if you're rid. It's called Fig right now, which gives me much more IntelliSense into those options. But before that, I don't think I have any what is the other one? It's like a tree

Rid. It'll allow you to do things like review pull requests, validate PRs.

Rid. Like I said, Git blame, use GitLens instead.

They're also I I just asked on Twitter real quick. I was like, what do you use

like, that it just makes so much more sense Just to have a button.

Head dash 1 or whatever, you know, like, I'm changed a little bit of CSS. So you commit all 4 of those files together

That's hard on it. CLI to be that intuitive, and and so this gives you an intuitive, rid. Here's an undo looking button to do the undo functionality.

dash dash soft at Rid. This is,

Release docs as good as Versus Code does. Versus Code does the best release docs. They show you at any given release all of the new things that have arrived, un is it untracked? Has it been modified? Has it been deleted? Like, what is the status of this file? What happened when this file changed.

And they do so by, like, highlighting various color themes. And in Versus Code, folks, can you highlight, the syntax remix of LevelUp Tutorial's official color scheme sometime? Because, I've seen Cobalt 2 in there, but I've never seen my theme in there. And every single time I I check one of those Versus Code Git will put in the given project that I'm in just kind of in their own world over here.

rid. Release docs. I'm always like, is it gonna be this 1? Is this the one where my my color scheme gets featured? quick break to talk about one of our sponsors today, which is LogRocket

does

You can sync it instead of having to type whatever git pull and and whatnot.

rid. Git repo. So if you've got I don't know. You got a coworker that's on GitHub. They push the changes. Alright. I pushed it. Pull it down and and give it a shot. Right? My way. Unreal.

Then they also have just arrows for specific.

Searching was it called s SCM or something before? Yeah. That was called version control. Control for the longest time. Yeah. So now it's called source control, do more with, like, GitHub actions in Versus Code. I like to into a pre established

Next is going to be the source control tab, which the source control tab, I did it used to be called something else? Because I went and I remember I was, like,

Alright.

As somebody who's watched a lot of Mount Everest documentaries,

to, like, walk.

it's like there'll be a giant line, and all of a sudden, the storm will blow through. And then everybody who's in that line is in big trouble because you can't go anywhere, forward or backwards. You're just kinda stuck. That sounds like a nightmare to me. No. Thank you. Yeah. Yeah. I'd be like I always think about that. Like, sometimes I'm in in a place and, like, if there was a fire right now, like,

That might be me. I think I think for me, if I was in a situation like that, I think my my monkey Gills would come into town. I would just start climbing things. I would just start climbing, looking for a hatch in the roof somewhere.

This this pull request added a sync to the function, and then I also added a new argument to that function. So if that's the case and you just boop boop boop, you can you can manually but they're both editing line 80. Rid. And in that case, you you keep both because you okay. This person just clearly added something. That's the most pain in the butt type of change to deal with rid Where it's just people adding stuff to the end of I have that with my users dot tech repo as well off of specific commits,

where people will add Forty lines above this and changed one below it. It still knows. Okay. Well, obviously, that went down. Right? So that's why it is so good. But

Yeah. And I I do like I like how much, rid. So they can try it out and do it exactly as Wes is doing it. Right? Yeah. I hear you on that. Yeah. I've I've tried a lot of these myself, and the only one that I ever really used for any The amount of time was really the GitHub Desktop app, but it's only because, occasionally, GitHub will will throw a fit, and it'll just be like, you need to do this rid. This diff on the GitHub app, this is like a complex situation or something. I don't even remember, like, the exact scenarios in which it but there were times where GitHub specifically will want you to use the GitHub app to resolve a conflict and then I'll be like, oh, I gotta download an app and I gotta go to all do all this stuff. So One last thing before we get into extensions They are great, though. They and they show you every single month new features,

buttons like you said, accept current change, accept incoming change, accept both. So you said I've never used that. I have that on my jokes repo a lot,

I've for the longest time, I've been able to Edit my merge conflicts by hand, which means that Versus Code gives Welcome

rid. Just by hand, you just basically you keep the one you want and you delete the other one, rid. I love burgers.

Yeah. And, it fixed it. So it's it's it's a great UI. I love it, and it's It's because you can so quickly you say, okay.

angle brackets, and it'll close the in your code. You should be where you're most comfortable editing that code. Yeah. I hear you on that.

I use

Rid. That's me. I'm, like, all of. Yeah. You go to that well, the Git SCM website. Yeah. You're like, oh. That's a great website, but rid Who would I push over to get out of here? You know, sometimes people are so slow

What does kid undo? What does kid undo? Right. You know? Give me the plain English. Get get documentation. Why is it hard, and why is it soft? You know?

I just sometimes I groan when I think in that, like, it's a little worse. It's a little technical.

commit, commit an empty from the Versus code. And, like, I've got rid. 3 monitors. I will often put Yeah. Yeah. A terminal on another monitor,

classically conditioned to clap when somebody says 321. Somebody says 321, I clap. That's how it works.

we switched over our podcast recording from we used to do Zoom, and then we would record locally.

release of lien for my car that I was trying to sell. So you are a donkey of the day, Capital One.

You refused to give me A Colorado Branch is a version of your code. For instance, right now, we have a branch for UI four, which is the,

Couple donkeys of the day. Capital One, your donkey of the day.

gonna talk about Git and Versus Code today. So, rid. Specifically, Versus Code has a whole bunch of features built into it to work with Git, and we're gonna go through what all those are today. We are sponsored by 3 awesome companies, rid. Linode cloud computing and Linux servers, LogRocket, JavaScript session replay, and FreshBooks cloud accounting.

And, rid number 2 donkey of the day is the family at the park that was trying to strong-arm us out of our birthday party that we were throwing. West, so we we were doing a a birthday party for Landon's 5 year old 5 year old birthday in the park. And we get there, and this family had Stuff on every single picnic table in the entire park. And I was just like, oh, can we use one of these picnic tables? And they were just like, no. We have a permit for the entire north side of the park. I'm like, it's a public park.

With Me, as always, is mister Scott Talinski. How are you doing today, Scott? Hey. I'm doing good, man. I have had

rid. I don't know. Clicking instead of like, when you're doing something big, like switching a branch. Yeah. Clicking. I don't I still use I I still use command palette when I want, but they're definitely not against you change the background from blue to green, and you increase the font size.

the key or sorry, the mouse for that type of thing. It's not a big deal. It's not a big deal. And and I don't know why, but I've gotten really used to it.

Rid. I don't know why, but I that that to me is, like, the little workflow I've gotten into, and it feels nice for some reason. Yeah. There's also something about, I don't know, nice about, if if if there are, like, rid. Remote changes in the current branch that you're on. It will say, like, a down arrow with a 4 or an up arrow with a one based on how many different commits Versus Code in my mind. GitLens gives you a visual file history, rid. Really easily allows you to tab back and forth. There's, like, what it gives you is these little arrows at the top of your file. And if you click the arrow backwards, it will just Give you the previous version of the file in a diff, and I use that almost every single day because there's so many times where I wanna see what was the previous status of this file. I click that little arrow, and then I see in a diff exactly what it is. It gives you a visual file history.

using pretty much like a calligraphy tip or like a stitch ripper if you've if you use one of those before. Yeah. That's used for rid. Digging out the nasty earwax out of your your AirPods.

I will take that. Hey. That that's fine with me. And and some people don't like using mouse at all, and I get that. And then you can head to the command palette or any of those things. But to me, sometimes that visual representation and sometimes just using the else there is isn't a big deal. I actually, you know, appreciate it and enjoy that. It it is sometimes nice nice to see, like, how many things are you you pulling down when You're pulling down from a a commit that's been pushed up or something. I I think the reason why I like this so much is that it's like the we said this. Go back To, like, one of our 1st ever episodes on switching to Versus code from Sublime Text. We I think we said it's the right amount of GUI, rid