GitHub GitHub Satellite 2020 - Work, 7 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: What every GitHub user should know about VS Code - GitHub Satellite 2020

Description

Presented by
Sana Ajani, Program Manager, Microsoft
Burke Holland, Developer Advocate, Microsoft

Over the past year, VS Code has been hard at work delivering tighter and more seamless integration with GitHub. From viewing diffs and commit history, to managing PRs and conducting code reviews to creating issues - VS Code has re-imagined what it means to "code" when GitHub is a fundamental part of the experience. In this session, we'll take a look at the features and extensions for VS Code that might change the way you think.

GitHub Satellite: A community connected by code

On May 6th, we threw a free virtual event featuring developers working together on the world’s software, announcements from the GitHub team, and inspiring performances by artists who code.

More information: https://githubsatellite.com
Schedule: https://githubsatellite.com/schedule/

A

I'd like to give you the pleasure of introducing how to's, Degas well.

B

Thank you now, straight off the bat we've got a two-for-one special here, not one speaker, but two. Our first speaker is coming all the way from beautiful, New Jersey and she went to Georgia Tech, which I did too so I mean we know she's amazing. Our second speaker comes from supposedly the best city in the world. Nashville Tennessee. The name of this next session is what every github user should know about: D s code. So without further ado, please help me welcome Sanaa, Ajani and Bourke Holland.

C

Hey wow- that was quite the introduction, welcome everybody on this fine lovely Wednesday evening or morning. Actually, wherever you are we're all over the world, my name is Burke Holland and I'm. Here with my colleague, yes, Anna, hey Johnny, hey.

D

Everyone I'm Sena and together with Burke, we both work at Microsoft where the s code gets built. We're gonna spend the next 30 minutes talking to you about how you can improve your github life with the S code. We're gonna show you some of the latest cutting-edge features in the editor and if you don't use vs code, stick around some of the pain points that we talked about might still resonate with you, and at least you'll know what BS code can do about them.

D

Besides, all developers and editors are welcome here, so this is what every github user should know about vs code.

D

So when we work on vs code, we are always thinking about developers, developers, developers, developers more and more. We know that github has become the bread-and-butter of workflows of developers all across the world. You can't talk about improving development processes without thinking about github. It's not just how people build and test their code, but it's also how they collaborate and communicate with each other.

D

So as we build vs code, we're always taking in community input, because we want vs code to work the way that developers work so over the last couple months, Burke and I had reached out to a bunch of developers and we asked them. How do you use github?

D

So when we talk to these developers, we wanted to know how they work in their repos and how they communicate with each other. We heard a lot of common pain points, so we heard people say things like it's really easy for me to forget about issues that have been assigned to me or things like I forget about pull requests because of the conversation that goes on in the comments, and so pull requests are never merged or just forgotten about.

D

This would lead to you know, code reviews not having as much participation or involvement as as you want. We also heard from users that during code review, they normally just check the the glance at the code and then merge it if the test pasts, but sometimes they really want to test the code for themselves, but the whole process of checking out adding a remote doing a git fetch can get really cumbersome. And finally, we heard from people that sometimes there's just too much context.

D

Switching you have a bunch of windows open with all your different tabs and notifications. You have a bunch of terminals open and a bunch of editors, so that can become really overwhelming. So we learned that there isn't really a correct, git or github workflow every developer. Every development team uses a different workflow and there is a bunch of different reasons that that's that's totally okay, so what we want to do is see if we can still tackle some of these common pain points that we heard inside the editor.

D

So when we think about where developers spend a lot of their time, you can kind of divide it into two loops. One is the inner development loop. This is where the code lives, so things like where you edit your code, where you debug your code where you navigate through your code. The other is the outer loop.

D

This is all the things that have been outside the editor, so things like project management and documentation, setting up your CI CD, all the stuff, that's happening on github, so both of these loops have to exist, but the more disconnected they are, the more context, switching that you're doing as a developer, so we asked ourselves: can we bring these two loops closer together? If we bring some of the experiences from the outer dev loop, can we bring them and connect them into the inner loop?

D

If we can do that, we'll reduce the amount of jumping around that developers are doing, and this way you save more time to be focused and be more productive. But with that said, if we're bringing in things into vs code, like code reviews and collaboration, we have to make sure that it's usable usable by all developers, so we have to make sure it's flexible and customizable, depending on what your team's workflow is.

D

So, what's what Burke is going to show you now for the first time is what we've been working on in vs code for the past couple months to bring github closer to you and vs code.

C

All right, Thank, You, Sona, well, we've actually been working on two things for the past few months that are designed to improve the experience for github users, the NBS code, one of the things we've been working on. It's of course, the editor itself, but Visual Studio code isn't super opinionated about which source control provider you use.

C

It tries to be as agnostic about that as possible so that you can use the source control provider that works best for you, but we've have made some improvements to vs code, specifically around authentication that allow us to do some pretty cool things with it with extensions, and so the other thing we're gonna show you is an extension called github, pull requests and issues formerly known as github pull requests and there's been quite a bit of functionality added in there.

C

But of course it's one thing to talk about it: it's quite another to see it in action. So let's do that now so I'm going to go ahead and show you my screen here.

C

uh Son, uh could you go ahead and stop sharing so I could I don't.

D

Sorry about that, oh that's.

E

Okay, no problem all right, Oh, perfect! That's perfect!.

C

Okay, so I'm use I've, got Visual Studio code open here and I'm using the insiders Edition, which is the nightly build. This is the latest bits we're gonna be showing you some cutting-edge features here, so we're gonna need the latest build of this now before we do anything else. Let's just get this out of the way. The theme that I'm using here, which is probably the most important question to be asked, is the github theme. There's an official github theme that you can install you'll know it's the right one cuz.

C

It says it's made by github, it's right here, I like it a lot I think it's really nice. Alright. Now by default in Visual Studio code, we have this source control of you and if you use visuals Visual Studio code before you recognize this view here and this initialize repository button.

C

If I click this in this project, it will essentially run in a get in it and then I'll have a local repository alized, but we've added this authentication provider inside a visual studio code that allows us to authenticate to services and then extensions can use that authentication to provide a much more expanded experience. So let's do this: let's install the github pull requests and issues extension, which is here I'm, going to go ahead and install this and it's installed.

C

And now, when we go back to the source control view, there's a new button and it says, publish to github. But what are what happens if we click on that? It asks us to sign in this. Is the new authentication provider kicking in so we're gonna, say allow and then say continue and just like that? We've authenticated to github now, if you've used villa's code before you know that before you had to create a get a private access token and give that to the extension, you have to do any of that anymore.

C

All of that can now be handled by the provider, and you can see here that I can actually, for the first time, create a repository from Visual Studio code. So if I click create private repository, will do just that and put my code there, but I don't want to do that. What I want to do actually is clone a project instead, so you might be using to use to cloning from the terminal. You can also clone from inside a visual studio code, which is not new. But what is new? Is this clone from github action?

C

If I click on this I can clone repositories from github, which repositories any repository that I can have access to so, for instance, let's say I wanted to clone the react project from Facebook. I just need to know enough about the name of the repository to search for it and boom there. It is I can clone it right from here, but the one we're gonna clone is called with the URL s.

C

This is a project we've been working on and we're gonna clone B front-end project here, so we'll select, ok and find a spot for it here. Let's put it.

C

Let's put it here in this folder sounds good and then it's gonna clone it and I'm gonna, say open in new window now, you'll notice, if we click on this provider over here that I'm now signed into github, and if I click on this I can actually say, manage trusted extensions and I can say which extensions have access to this authentication for github to make sure that the wrong extensions don't get access. So when I did this, let me go ahead and open the terminal.

C

It's 20/20, so the first thing we have to do in any project is run an NPM install. So let's go ahead and get that out of the way, but I want to show you some of what's happened here if I look at bigot remotes here. So, let's look at our get remotes you'll, see that we cloned over HTTP visual studio code did that and it never asked us for a username or password, because it's handling all of that with the authentication provider.

C

Additionally, if we push or pull from visual studio code or from the internal terminal here we won't get prompted for username or password. Everything will just work. So if you don't have SSH keys, set up, visual studio code will handle all of that for you over HTTPS. So let's go ahead and look at this application that we're actually working on here. The application is called the URL lists and what it allows us to do is to collect a list of links that we want to send to people.

C

Maybe one of them is this one of course there's this one right here and the last one I, don't know why we would ever send someone a list to just Facebook, but there it is, and then we can publish this and we get a vanity URL. We can send to people and then they can see all of the links. So it's just a list of links and, of course, a giant QR code, because again it's 2020 you're gonna want that giant, QR code. We want you to have it all right.

C

So back on this home page here, I like this page I've got this very minimalistic design, which is great, but it's a little too minimal. I feel like we need a description here and so I want to get Sunna to add a description, because I know that she works on this part of the site, because this is how our team works.

C

So I want to show you how we sort of brought that outer loop of github closer to the inner loop of where your code is so I'm gonna open up the home dot view file here and what I want to do is I know that, underneath this banner text is where I want this description to go so actually I can actually highlight this and I could say, create issue from selection and then I'll give it a description, so I'll say, add a site description and then, if I click on this little pencil, icon I get an editor.

C

Where I can edit the issue, and then you can see it's a markdown file and it's given me a permalink to the lines that I just highlighted.

C

So that's one way that we could do this, but one of the things that we do a lot on our team is we work in the master branch because we don't build from there, and so we leave a lot of dues for each other. So a lot of times, we'll just leave comments and you're like add a site description.

C

This is just how our workflow works, but what's new here because of the github pull request in inches extension I can actually mention sunna directly from here, and you can see it's pulling her presence in from github, as well as the other contributors on this repository. So I'm gonna select that but now watch this.

C

If I come over here and say, do I get this little light bulb over here, and it says if I click on it, it says, create github issue and it automatically populates the title and if I hit the pencil it gives me the permalink but I'm going to take this out and I'm just gonna, say add: you add a description home dot view.

C

This is gonna, give her a little bit of information, so she doesn't have to go searching for the file and then I'm gonna go ahead and click this, which will create this issue in github and pop us back over, and you can see it added the issue number in line and, if I mouse over that it shows me the details of the issue right here inside of the editor. This is the outer loop literally inside of the editor and, of course, if I mouse over sauna here I can see all of her information.

C

So I want to go ahead and commit this file here. So I'm gonna go ahead and save and I'm going to stage this file and then I'm just gonna, say, add, site description, comment and then and watch this, because it's Visual Studio code and because of the extension I can mention sauna here as well. So we just have presents throughout the editor, which is great I'm, going to go ahead and stage this and then I'm going to go ahead and synchronize down here in the status bar I.

C

Just click down here in the left hand corner and all of this is done over HTTP and just like that. I've created an issue and so now I'm going to turn it back over to sauna. To show you what this looks like on the other side of this equation, sauna all.

D

Right all right cool, so let me show you when my screen looks like.

D

All right, so you can see envious code. I have a first thing: I'm going to do is I'm, going to go over to the source, control view and I will do a git pull so I can do that multiple ways in vs code, I'm gonna, do it from the context menu over here and now. You can see I'm totally on the master branch, so I'm going to go over to the sort of the github pull request.

D

Extension view and I can see this issues section as a part of this view, by default, vs code will create two sections here, called my issues and created issues. My issues are issues that have been assigned to me and then it created issues are the ones that I've created. So the cool part about this is that you can edit this to be specific to whatever you want to do. So. If you have labels and milestones and that's how you organize issues and manage your project, you can you can work with that.

D

So if I click on this, it opens up my settings a JSON, and you can see that there's a setting to create additional queries, so I can go ahead and create a new one and say like label and I'm, going to call it all issues and then go ahead and add a query, and this will show up. So you can query this. The same way you would on github.com, so I'm gonna do is go ahead and change the the query here.

D

I'm gonna copy this and say I want it to be in this repo, all open issues and all the ones that are assigned to me.

D

You cool and that gets rid of the milestone, because our team doesn't really use milestones. So now, I can customize this. The way I want so now I'm on the master branch, but as soon as I click over this issue and hover over it, I get the hover information and I can start working on the issue. So when I start started working on that, you saw that down here, I switched from the master branch and we checked out a new issue branch.

D

So now I can go over to home W, because I see that that's where Burke wants me to add it and I can see the same issue that he just added so same thing. Hover over see the issue, description and I think this is a pretty simple thing. So let's go ahead and remove the to do comment and I'm going to add and I already have the you know the instructions that I want to add here, I'll copy this over and then paste it right in here alright looks good.

D

That was a pretty simple change added some instructions. So let's go ahead, go ahead and go source control view and commit this. So you see that now vs code picked up on the fact that I started working on the issue and added a commit message. For me, it's the name of the issue and it's the issue number. So this is great exactly what I want commit. This and I can go down to the status bar and also push this.

D

All right cool, so one thing I want to show real quick, is also some other settings that you have so with the issues you can customize it even more. So you saw that Burke when he created the to do common. It created an issue trigger if you want to use other keywords to do so. You can add that right here you also saw that when we started working on the issue, it created a new branch.

D

But if that's not something your team does or you don't want to create that many branches, you can just turn this off. You also saw that the commit message when I started working on it was, in this format the name of the issue and what it fit, what it fixes. So you can customize. This issue commit message to be whatever you want.

D

So now that I've committed it I'm gonna go in and change the issue into a claw request, so I can click in the status bar and I get a couple options: I get an option to create a pull request or a draft pull request. We've heard from developers that they use both a draft full request is a polar quest. That's not yet ready to be reviewed, but I think this is a pretty simple change. It's pretty ready, so I'll just create a pull request from this target.

D

The master branch and, let's use the commit message as the name of the PR and you can see, I'm brought over to the pull request, view and I can go in and see the files I've changed. The commitment, the commits I've I've done and I see the same sort of view for the PR that I would on github.com. So this is a pretty simple fix, all just add Burke as a reviewer, so he can go in and approve my PR.

D

D

E

E

C

Right so we're back in my screen now and over here I've got my sidebar on the right hand side. So let me just go ahead and get that out of the way as well and say that I toggle the sidebar from the left to the right, because it's better on the right and the reason for that is because, if it's on the left, when you collapse it watch the code, it jumps or if you put it on the right, watch the code, it doesn't jump around anymore.

C

I, don't see the session was worth it just for that all right. But let me show you here on the side here: we've got the pull, requests and issues. It's everything is now right here within visual studio code. So it's easier for me to take accountability for things that I need to do.

C

One of the things that I know as a developer is when it's on github is sort of out of sight out of mind, and it's easy for me to ignore it and pretend like it's not happening and there's not a bunch of stuff for me to do there, which is something I'm, just very guilty of so I'm, going to look at the pull request here.

C

That Senna has submitted and marked me for review on and I can see it just like it would be on github and I want to go ahead and view the diff, so I'm, just gonna click on the file. I can see that side by side by the way, little tip. If you'd like to see the unified diff. Just do the toggle, the in-line view, and that will give you the inline diff view.

C

That's pretty simple change, it looks fine, but of course we don't want to run this without checking it out and see if it works locally. So I'm gonna come over here and I'm just going to click checkout and what that's going to do is move me from the master branch over to the PR branch. That son are created and I'm already running this site down here. So I'm, just gonna click here and let's load it up and see what it looks like it's beautiful, I, love it. This is poetic.

C

I could not have done it any better myself. This is the best change ever all right, so I definitely want to merge this. It looks great, so what I'm gonna do here is I'm going to go ahead and just leave a comment once I collapse, my terminal here, let's go down and leave a comment so I'm just gonna, say this looks good to me and approve this and.

C

Gonna say up here: I'm gonna, exit review mode. That puts me back on master in the bottom left-hand corner and then I'm gonna say merge, pull request and create a merge commit it's just like you would on github.com now, once I've done this, it can say, delete branch but watch this because we're inside a visual studio code. It knows a little bit more about our code, like the fact that we have a local branch, so we can go ahead and delete that as well and that's the completed workflow.

C

So we've now done the entire workflow of identifying an issue creating it seeing it parsing it fixing it. The pull request, closing the pull request, all from inside of the editor here now. One of the other things we heard from people is that that add their workflow is very unique. We heard that a lot and we concur. There's not one right way to use github, there's only the way that your team uses it. So we wanted to do is make things very customizable up to and including the editor itself.

C

So we have this nice Timeline view here. That's in the Explorer. That's been added, but you might want this over where your github stuff is. So, if you just drag this over and hover over that extension, you can just drop it right here and all of the editors like that. So if we open the terminal, for instance on let's say, I just wanted to put all of the output there as well, we can do that too. I mean the editor. Is yours customize it to the way that works the best for you with that?

C

We want to bring it full circle and give you your very own URL s that has all of the resources that you need to get up and running with github from this talk, envyus code. So thank you so much for joining us for this session and we'll be hanging around to answer all of your questions. Yes,.

D

A

All the amazing integrations happening is the s coding get up. I've just started using this code, so I love the way you included all the github stuff. So it's very very exciting to say now never gonna be questions coming and we have time for just one question Jared. Would you like to hit us with one of the questions coming from discussions? Yes,.

B

We have a ton coming in. We only have time for one, but the one question we can ask is what else is on the vs code. Roadmap that'll be coming soon.

D

Yeah we've got some super exciting stuff coming so one of the things that Burke was showing the detachable parts, that's something that our team's been working on for a while and that's a really exciting feature to customize your editor speaking of customization. Another thing that we're working on is custom editors, so this is in place of vs code standard text editor. So if you're working with things like binary files or data files, you can now use like an image editor, for instance, or a way to visually render those.

D

So that's an exciting thing coming up and one more I'll do one more is a notebook native notebook experience in BS code, so we've noticed that notebooks, like Jupiter, have become super popular in data science and even the education space. So now we're working on a native, rich notebook experience inside vs code from from just out of the box.

A

Start to be working for day now, I know we don't have any more time for questions, but I know you two boys gonna, be our discussion so we'll see you then thank you. Thank you so much for your wonderful presentation, thanks for time, thanks bye. Thank you.