Skip to main content
465

June 1st, 2022 × #git#version control#vs code

Git in VS Code

Wes and Scott discuss using Git version control in VS Code, including built-in features and extensions that enhance the developer workflow.

or
Topic 0 00:00

Transcript

Announcer

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.

Topic 1 00:02

Welcome to Syntax Podcast

Wes Bos

Welcome to Syntax. We don't need to clap anymore, Scott.

Wes Bos

Scott just clapped rid 32 1. I'm so I'm, I'm

Scott Tolinski

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

Wes Bos

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

Topic 2 00:35

Riverside App for Podcast Recording

Wes Bos

Rid. And we moved to this app called Riverside that does, 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 sent me a tweet from 2020 and said, I just made this after taking your course, and it was Riverside. What? My way. Unreal.

Wes Bos

And, so like life. There's some circular dependencies there. Yeah. Wow. It's I obviously, rid. I love seeing that. Like, I don't know if I could build this. This is amazing.

Wes Bos

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.

Wes Bos

Sometimes it's a little glitchy, but don't worry. Rid They're working on it. You're working on it. Alright. So we are, 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.

Topic 3 01:20

Git in VS Code Features

Wes Bos

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

Scott Tolinski

a couple weeks from hell here, and I am feeling like today is the start of a new new new, half year new new me. I'm I'm ready to go. So, Yeah. I got a couple donkeys of the day.

Scott Tolinski

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

Scott Tolinski

You refused to give me A Colorado release of lien for my car that I was trying to sell. So you are a donkey of the day, Capital One.

Scott Tolinski

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.

Topic 4 02:33

Donkeys of the Day

Scott Tolinski

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, 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.

Wes Bos

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

Topic 5 03:14

Beach Chair Saving

Wes Bos

Rid Yeah. I I also see it with, people that go to, like, resorts.

Wes Bos

They go put a towel on the beach chair at, like, 5 AM.

Scott Tolinski

Rid. Courtney does that, so I can't talk too much about that. Oh.

Scott Tolinski

Oh, 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

Wes Bos

Or or going to, like, a popular Instagram photo spot, and there's just line Line. Like dozens of people.

Scott Tolinski

Yeah. Totally. Rid the world. That'd be scary because that's how people get hurt, I think, on those.

Topic 6 04:00

Crowded Hiking Trails

Scott Tolinski

As somebody who's watched a lot of Mount Everest documentaries, 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,

Wes Bos

rid Who would I push over to get out of here? You know, sometimes people are so slow to, like, walk.

Wes Bos

And I I my wife always hates how impatient I am, but I'm just like, rid Go. Like, move your legs 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.

Scott Tolinski

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.

Topic 7 04:45

Monkey instincts

Wes Bos

Oh, man. Alright. Well, let's rid Get into it. Let's talk about Versus Code.

Wes Bos

I think Scott and I both have been, CLI users of Git For most of our life, I've dipped into the 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 a lot of random stuff in Git that you have to memorize.

Topic 8 05:02

Git terminology

Wes Bos

That makes absolutely no sense or it obviously does make sense. It's it's part of the language. But just to like regular folk like us, It's kinda

Scott Tolinski

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 So, 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, Capital a, 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, 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, any Versus Code command line in Or, not Versus Code command line. Any, Git command line, commands for quite some time. I've only been using the visual tools within Versus Code to do all of my Git things, 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, But even some ways that you can work with your code to understand it a little bit better. And before before we, 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 and diff.

Topic 9 07:26

Git commit definition

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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 rid. What I have done to these files, that is called a commit. So, you change the background from blue to green, and you increase the font size.

Wes Bos

Rid. Then you say, okay. Based on the last time I committed, 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, 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.

Wes Bos

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 changed a little bit of CSS. So you commit all 4 of those files together and say, update about me page design.

Wes Bos

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.

Scott Tolinski

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

Scott Tolinski

And it diff. When we say diff, a diff, 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.

Wes Bos

Differential.

Topic 10 09:04

Git diff definition

Scott Tolinski

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, 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, it. Looking back at the history of a file as well just to see what's different there. Yeah, exactly. You can

Wes Bos

you can diff, like, literally any 2 commits rid. Or you can diff, what is called the head, which is, like, your current working state to Other commits, other branches.

Wes Bos

You can diff 2 entire branches.

Wes Bos

What else? What other kind of, jargon do we have? Commit, diff, head.

Topic 11 10:04

Git branch definition

Wes Bos

A branch is sort of like a 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, 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 new sales page.

Wes Bos

So what rid. What branches will allow you to do is to 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 isolated from your other version of the website until you are ready to, rid. Merge those changes into your your main branch or your master branch. That's generally what people use as their

Scott Tolinski

Production branch. Yeah. And I would I would personally just describe it as a version of your code. Right? Branch is a version of your code. For instance, right now, we have a branch for UI four, which is the, 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.

Scott Tolinski

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.

Topic 12 11:24

Git jargon summary

Scott Tolinski

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

Scott Tolinski

In UI tools, Wes, are are there any UI tools that you've used in the past 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?

Wes Bos

I rid have used in the past the GitHub GUI, which is which is very good.

Wes Bos

I would say it may be one of the best GUIs to use. Rid. I have also used, what is the other one? It's like a tree tower cracking. Tower. That's the one. It's not 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.

Topic 13 12:36

Previous Git GUIs used

Wes Bos

And I have mostly just rid. Stuck with the CLI. Another reason for that is because in my tutorials, if I'm showing any git stuff, I don't want to, like, 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 rid. The reality is that people wanna do the same stuff I'm doing, so they want as few paid things if possible, no paid things as possible,

Scott Tolinski

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 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 I think that the beauty of these Versus Code tools and UI, things that we're gonna be talking about specifically, 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.

Topic 14 14:10

Git in VS Code overview

Scott Tolinski

So let's get into, some of the ways that we can interact with Git in Versus Code.

Scott Tolinski

So at the the very most basics, 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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

Rid. And for the longest time, I don't think this is still possible, but you couldn't, like, pop it out, from the Versus code. And, like, I've got rid. 3 monitors. I will often put Yeah. Yeah. A terminal on another monitor, or I wanna be able to see 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

Scott Tolinski

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,

Topic 15 15:49

Integrated terminal drawbacks

Wes Bos

Warp again last week just to see where it's at. It's getting really fast, especially, like, I'm I'm still using still using hyper. Mhmm. And, like, the the speed difference between that and warp is unreal. Why don't you use I term? Rid. Because

Scott Tolinski

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,

Wes Bos

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.

Scott Tolinski

Yeah. I know. It it does look nice.

Scott Tolinski

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

Wes Bos

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 rid. Developer was, like, teasing a whole bunch of kinda neat integrations, 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.

Wes Bos

I bet that's the next Gen for the CLI tools. It's not just The same CLI we had 20 years ago, but like a like a v s code for the the terminal.

Scott Tolinski

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? Yeah.

Scott Tolinski

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, it's really nice to be able to quickly say, rid. Pull from checkout to merge this branch, commit, whatever.

Topic 16 18:03

VS Code command palette for Git

Scott Tolinski

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.

Wes Bos

Because if you just type commit, You see, get commit, get commit, all get commit, amend, commit, commit an empty stage it.

Topic 17 18:39

Seeing Git options in command palette

Wes Bos

And, like, I wouldn't even know what the flags are for all of these things in in the CLI.

Wes Bos

I use 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

Scott Tolinski

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.

Wes Bos

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 I just sometimes I groan when I think in that, like, it's a little worse. It's a little technical.

Wes Bos

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?

Topic 18 19:25

Difficulty of Git documentation

Scott Tolinski

Why? Well, the okay. So that needs to go in the, the Southport. The syntax code generator.

Wes Bos

Alright.

Scott Tolinski

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, 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, And I actually this is how I primarily interact with Git myself.

Topic 19 20:06

VS Code source control tab

Scott Tolinski

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

Scott Tolinski

And my monorepo has sub repos. It has private and public, rid. Repose in this monorepo.

Scott Tolinski

So 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 one of my Git repositories in the given project that I'm in just kind of in their own world over here.

Scott Tolinski

In addition to, like, being able to see, 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, depending on, like, what's the status of this thing. Has it been, 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.

Scott Tolinski

And that to me just is a nice, 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, 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.

Scott Tolinski

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

Topic 20 21:31

Source control tab indicators

Wes Bos

session of coding. I really like the source control, 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. 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? You can sync it instead of having to type whatever git pull and and whatnot.

Wes Bos

Then they also have just arrows for specific.

Topic 21 22:12

Buttons in source control

Wes Bos

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 dash dash soft at Head dash 1 or whatever, you know, like, I'm 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, like, that it just makes so much more sense Just to have a button.

Scott Tolinski

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.

Topic 22 22:54

Right amount of GUI in VS Code

Scott Tolinski

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

Topic 23 23:32

VS Code provides intuitive interface

Wes Bos

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, like, metadata information at a quick glance, you can see which files are modified or deleted or or untracked.

Wes Bos

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 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,

Topic 24 24:08

Changing branches in VS Code

Scott Tolinski

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.

Scott Tolinski

Rid It's the right amount of gooey.

Wes Bos

Impressive.

Scott Tolinski

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 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 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 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 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 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.

Topic 25 25:59

Sync changes button

Scott Tolinski

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,

Wes Bos

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 using

Scott Tolinski

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.

Topic 26 26:29

Changing branches via status bar

Scott Tolinski

So let's actually take a quick moment to talk about one of our sponsors today, which is Linode. And, actually, Linode, 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

Wes Bos

rid. Cloud computing, Linux hosting, 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.

Wes Bos

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

Wes Bos

And that's what I love about Linode is they've got, like, really good docs, really good documentation Around like, this is not necessarily how to use Linode, but they know that, okay, you're using Linode. You probably are also needing to know how, rid. How Git use Gitworks or GitHub works, or they have they have docs on GraphQL and Node. Js and Perl and Python.

Wes Bos

Rid. You name it. They've got it. So, 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/

Scott Tolinski

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 easier.

Scott Tolinski

Wes, you have file history here. Is this Part of the extension Git history, or is this, like, just straight up a file history? This is straight up baked into,

Wes Bos

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

Scott Tolinski

I just did command palette file history, and that

Wes Bos

opened it up for me. Okay. There you go. Command palette file history.

Wes Bos

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 that you have done to this file, who has done them.

Wes Bos

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 allow you to create tags and branches off of specific commits, as well as a whole bunch of links to reverting.

Wes Bos

Then you can also search the commit history.

Wes Bos

Rid. You can filter by branches, filter by authors.

Wes Bos

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.

Wes Bos

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, rid. Paste it in and make sure you have the right one. Kinda scary. Much nicer just to see the actual commit that you have done. You can line up the hash if you're Double concerned with it on GitHub, and you can revert or create a branch off of that. You name it. You got it.

Scott Tolinski

Yeah. I often me personally, you know, I'll hit issues where I'll just be like, 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, 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 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.

Scott Tolinski

There's also the diffing, within GitHub. Now there's 2 different kind of ways for rid. Diffing. One of which is we'll talk a little bit about conflict resolution.

Scott Tolinski

But diffing in general, when you're comparing 2 files in Versus Code, What it will do oftentimes 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 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, 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.

Topic 27 32:03

VS Code tracks changes between commits

Wes Bos

One thing I don't think a lot of people know about, Versus code specifically is that, in between commits, 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 Versus code tracks your changes in between commits, meaning that, like, if you accidentally nuke a file rid. After you've committed it, but you've saved it and closed it down, you're you're kind of out of luck unless you have, like, time machine where a time machine magically backed it up right during at the right time.

Wes Bos

But Versus code will actually take a change. So if you go into your sidebar, rid. There is a little, thing in Versus Code called timeline, and it will show you all of your git commits in there. Rid. But then it will also show you your file saves in between those git commits. So if you make a change 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 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.

Topic 28 33:34

VS Code timeline feature

Wes Bos

Oh, man. Okay. So, open up your just your file listing Mhmm. In your sidebar?

Scott Tolinski

It's called the Explorer, Wes.

Scott Tolinski

Explorer.

Scott Tolinski

Okay.

Wes Bos

And do you see at the bottom, it says commits, NPM scripts,

Scott Tolinski

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.

Wes Bos

Yeah.

Wes Bos

Interesting.

Wes Bos

The outline It's really handy as well. If you've got a markdown file, it can give it gives you all of the nested headers from your markdown file. You can jump around to it, But the timeline is is unreal.

Wes Bos

And like this one right here, just put that in your brain somewhere because at some point, you're going to accidentally oopsies Nuke something and close the file, and you're gonna be like, where did that code go?

Scott Tolinski

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.

Scott Tolinski

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 to the podcast.

Wes Bos

I need to do like a Versus Code

Scott Tolinski

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.

Wes Bos

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 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

Scott Tolinski

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.

Topic 29 35:28

Finding experimental features

Scott Tolinski

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 does rid.

Scott Tolinski

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, 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 rid. Release docs. I'm always like, is it gonna be this 1? Is this the one where my my color scheme gets featured?

Topic 30 36:10

VS Code release notes

Wes Bos

Who who is it that puts those docs together? Because rid. I want that, but you chat. Shout out to the Versus Code team for using my theme in those release docs sometimes.

Scott Tolinski

They are great, though. They and they show you every single month new features, and it's fantastic.

Scott Tolinski

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 when, Git cannot, they cannot Git itself does not understand What to do with the code coming in and the code going out? Where where 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, those changes that have been made whether or not rid. Do you know exactly what conditions create a conflict in in GetWes?

Wes Bos

Yeah. It's like when a line of code rid. Is changed, and it's not necessarily the same line because Git is very good about figuring out, like, alright, if you added 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 rid. Generally, if if some line of code has changed, and ready. You have changed it also, and you're trying to merge it. It says, okay. Hold on.

Topic 31 37:17

Git merge conflicts explained

Wes Bos

I have a change from the original.

Wes Bos

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

Wes Bos

Scott changed it to I love sushi, and I changed it to, rid. I love burgers.

Wes Bos

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

Wes Bos

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 do that yourself because Git has no idea. Okay. Well, you changed it. So does Scott. Like, Get it together.

Wes Bos

Right?

Scott Tolinski

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

Scott Tolinski

That's great.

Scott Tolinski

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.

Scott Tolinski

So what happens is when you have a conflict, typically, rid. Git will will say well, 1, it will in the source control tab, 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.

Scott Tolinski

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.

Scott Tolinski

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, Git will put in 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, rid. This is the line of code that I actually want. I want it to say, you know, 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

Wes Bos

rid. Versus Code GUI for doing merge conflicts because I've for the longest time, I've been able to Edit my merge conflicts by hand, which means that Versus Code gives 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.

Topic 32 40:09

Resolving merge conflicts in VS Code

Wes Bos

And then it will say rid. A bunch of closing angle brackets, and it'll close the branch. So you say, like, in rid. Just by hand, you just basically you keep the one you want and you delete the other one, and then you get rid of all those arrows and whatnot, and you're good to go. But rid. Versus code just inlines little 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, where people will add 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, 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 where you could never rid Used to never be able to automatically merge conflicts because we would have a 100 people pull request adding themselves to the very bottom of the file.

Wes Bos

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

Wes Bos

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.

Wes Bos

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 see what happened and manually do it yourself.

Scott Tolinski

Yeah. And I I do like I like how much, it is exactly you're not having to switch your context 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

Topic 33 42:25

Staying in coding context for conflicts

Wes Bos

A kind of scary merge conflict in your code. You should be where you're most comfortable editing that code. Yeah. I hear you on that.

Scott Tolinski

One last thing before we get into extensions 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.

Scott Tolinski

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

Topic 34 43:09

Auto push after commit

Scott Tolinski

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.

Scott Tolinski

Now especially if you're you have, like, a good branching system set up and we have, like, you know, automation set up through, GitHub actions 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, and you search for post commit Command, 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 that anytime that I commit, 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, 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's right there.

Wes Bos

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 rid. Commit often and squash before you push, meaning that a lot of workflows will be like let's say you're working on, like, a Like a huge, a huge feature, and you commit 7 or 8 times throughout the for over, like, 2 days.

Topic 35 44:31

When not to auto push

Wes Bos

Before you send up a pull request, what you might want to do is to squash 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 if you push all those changes And then you squash them, then you are I'm pretty sure you have to force push to overwrite rid. What is on the remote? And then there's a possibility that somebody else forked what you had, and that's where you get into hot water with with Git. But, Quite honestly, it's not your workflow.

Wes Bos

Sorry.

Scott Tolinski

I almost never squash.

Wes Bos

Yeah, it's it's not Something that like, it's it's all on, like, teamwork flow. Like, I worked Yeah. When I did contracting, I worked for, it was Red Hat, and we rid. Squashed all over the place because it was a rule.

Topic 36 45:53

Team workflows and squashing

Wes Bos

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

Wes Bos

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.

Wes Bos

Rid. You got 8 commits. That's all valuable information that is part of your commit.

Scott Tolinski

Let's keep those in the code base. Right? Interesting. Alright. Well, let's take a a quick, quick break to talk about one of our sponsors today, which is LogRocket at logrocket.com 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 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 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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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 lots here. Let's get into it. Yeah. Let's get into it real quick here. GitLens. GitLens is probably the best extension for, 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.

Scott Tolinski

It gives you, 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.

Topic 37 48:09

GitLens extension features

Wes Bos

Then What is this of that. The day from?

Scott Tolinski

I just I I don't know.

Scott Tolinski

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, 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.

Scott Tolinski

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, like a work tree, which allows you to easily work on different branches of a repository Simultaneously, 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,

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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

Scott Tolinski

Rid. Another really good, another really good extension is Git history, 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 extension. And this is another one I think I might reinstall now that we've done this little deep dive to see, 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.

Scott Tolinski

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.

Topic 38 50:39

Git Graph extension

Scott Tolinski

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

Wes Bos

They're also I I just asked on Twitter real quick. I was like, what do you use For git in Versus code, like, any any tips or or whatever. And I didn't even realize that there's an official GitHub extension.

Wes Bos

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

Topic 39 51:18

Official GitHub extension

Wes Bos

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

Wes Bos

Rid. You can say start working on an issue. So if you have an issue, you can immediately just branch off of main, into your own branch for that one. So rid. That makes the, like, synergy between your Versus code and GitHub 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

Scott Tolinski

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

Wes Bos

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 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

Topic 40 52:42

GitHub Actions locally

Scott Tolinski

do more with, like, GitHub actions in Versus Code. I like to test and run GitHub actions locally

Wes Bos

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 it was got to set up too much, you know, lots of

Scott Tolinski

tokens. I have a I have, like, a an alias that does, like, a quick, 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 the version control, the version control window, the source control window. In fact, 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.

Scott Tolinski

So I do use conventional commits, and I like them. So,

Topic 41 53:56

Conventional Commits extension

Wes Bos

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, if you do git config globalcore.editor And then you pass it code dash dash wait.

Topic 42 54:14

Opening repo in VS Code from terminal

Wes Bos

What that will allow you to do is 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, there's a couple other ones where before you before you go ahead and rebase something, you need to tell git to wait.

Wes Bos

And what that will do is it will open up the merge conflict. You can save it 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

Scott Tolinski

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, rid Versus Code tips from user members.

Scott Tolinski

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 rid. To talk about a nonsick pick, but a sick pick nonetheless, which is FreshBooks. FreshBooks, such as a FreshPick, I you could say. Wes, do you wanna talk a little bit about FreshBooks? Yes. Freshbooks.comforward/

Topic 43 55:12

Request for Git tips from listeners

Wes Bos

syntax.

Wes Bos

They are cloud accounting.

Wes Bos

So they do all of your invoices, all of your client management, all of your rid your project, your time tracking, your HST, all your different taxes for around the world, your 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/ syntax. That I'll get you a 30 day free trial. Thank you, FreshBooks, for sponsoring. Sick.

Scott Tolinski

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, which is a, text expander application. Now text re Expander went, like, paid subscription, and it was kind of, 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, and it's open source, and it is multi platform Mac.

Scott Tolinski

Rid. I almost said Linux. Windows and Linux. MacOS, Windows, and Linux, and it's built in Rust. It's called Espanso, espanso.org.

Scott Tolinski

There are extensions to this thing. There's packages you can install it and can autocomplete 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, smart smart typing. West found some stuff in here that, he he's been looking for himself. So, like, form support where you have your own form and it inserts your your text into into a pre established completion

Wes Bos

via a like a form. Yeah. I used to have a bunch of, like, Auto completions, and you would have to populate the user's name into that and then also select from a drop down.

Wes Bos

Rid. I don't do that anymore because I have, like, a dedicated support person that does email, but I use this a ton. And I've been I've been on the, like, the one time payment old version of TextExpander forever because there's no way I'm spending $6 a month to expand

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Scott Tolinski

What does that look like? It looks like a pen is looks like a calligraphy pen.

Scott Tolinski

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

Wes Bos

Rid. This is, an AirPod cleaning tool. Oh. So, man, if men my AirPods, 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.

Wes Bos

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.

Wes Bos

So I got this tool. You can get it on AliExpress. It was $3 shipped, and, essentially, what it is is on one side, It has, like, a microfiber little, pokey bit, which is you you poke that down into the rid. You poke that down into the, AirPod case, and then it has a little like a stiff bristle on one side. And then on the very end, it has, like, 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.

Wes Bos

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 out of the inside of the AirPod case? 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 rid. These are just anything any ad you get on Instagram or TikTok is just someone drop shipping something from AliExpress.

Scott Tolinski

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 shameless plugs where we plug things that we've created. I'm going to shamelessly plug, Of course, level up tutorials .com. It's my tutorial site that I have, 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.

Scott Tolinski

So if you're interested in learning any modern web development Stuff, whether that is a real time remix with Supabase, with John Myers, who we're we'll have on the show actually coming up to talk about 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.

Scott Tolinski

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, massive catalog of tutorials.

Wes Bos

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

Wes Bos

You could see a list of all the courses I have available. Lots of free ones, lots of paid ones.

Wes Bos

If you do get a paid one, like my beginner JavaScript, you can get $10 off by using the coupon code syntax.

Wes Bos

Rid Alright. That's it. Thanks everybody for tuning in. We will catch you on Friday. Peace. Peace.

Scott Tolinski

Head on over to syntax.fm for a full archive of all of our shows.

Scott Tolinski

And don't forget to subscribe in your podcast player Or drop a review if you like this show.

Wes Bos

Rid.

Share