GitHub GitHub Universe 2020: Developer - Secure Development, 9 Dec 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: GitHub Codespaces: beyond the basics - GitHub Universe 2020

Description

Presented by Allison Weins, Product Manager, GitHub

Join Allison Weins for a deep-dive into GitHub Codespaces—an online development environment service that allows you to develop entirely in the cloud. She'll cover advanced setup and personalization options as well as tips and tricks that will turn you into a Codespaces power user.

For more from GitHub Universe 2020, visit https://githubuniverse.com

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

Hello, everyone, if you needed any indication we're doing this live. I feel like that was basically your newspaper right. There welcome. I am alison wines. I know you heard a little bit about my corgi, so every presentation includes a photo of my dog olive um and we're to talk about github code spaces beyond the basics. um I'll bet, a lot of you are coming from the welcome to code spaces. Talk that my lovely co-workers, matt and bailey just gave, and if you didn't get a chance to check it out, I highly recommend doing so.

A

In their talk, they gave an amazing tour of what you might do. The first time you try out code spaces, but in this session I'm going to take you a step deeper into configuration through the dev container personalization with dot files and settings sync and why you might use one versus the other and a few tips from our team.

A

Whether you're trying to get your environment set up with the perfect personalization or you're, a team lead trying to ensure a consistent setup for teammates using codespaces by the end of this chat, you're going to be equipped with the knowledge you need to dive deep and get going so in case you didn't make it to the welcome to code spaces. Talk I'm just going to give a quick recap to make sure we're all on the same page here at its core github code.

A

Spaces is simply a service that provides managed cloud environments on demand, taking you from repo to development environment in a single click.

A

But more than that, we know how important it is for your environment in your editor, to feel like home, matt, referenced, dot files, setting sync and more in his demo, and we're going to break down all the different ways. You can personalize your code space in just a few minutes and finally, one of the reasons we think codespaces is so exciting is because it empowers you to develop from anywhere which, as you heard, is one of my personal missions.

A

Any developer, armed with a browser and an internet connection can ship code with code spaces and that's what I love about working on it. Okay. So let's talk about what I'm going to talk about.

A

First, we're going to look at two ways that you can personalize your code space. Then we're going to look at how you can configure your repository for easy, repeatable use by adding a dev container and finally I'll share some tips from the team. Just a few tidbits that we like that. We hope you will know so with that, let's dive in personalizing, your experience happens through two main areas or configurations really.

A

You've got your dot files and you've got settings sync, and one of the questions I hear a lot is: okay, allison. Why would I use one versus the other? Maybe you just notice that your code space is mostly right and you're, not quite sure why we're gonna break it down here.

A

So, if you're using dot files, we automatically pull any public repo. That's on your account name, dot files into your code space and we apply them at creation time. So if you perhaps use dot files to set up your local machine- or you checked out some references in the past and forked- a dot files repo from a coworker we're automatically pulling that in.

A

If you haven't been super familiar with dot files, these are pretty much configuration files that start with, as you might guess, a dot. So these might be a dot profile, dot, alias dot prompt. These are all ways that you can configure your environment and shell.

A

Now, there's a ton of dot file examples and you can use those as a starting point in order to be perfectly optimized for you, and the great thing is, although we love to use them in codespaces for customization, you can also apply them to your local machine. So if you happen to accidentally throw your laptop into a lake during a really tough debugging session, you can always quickly apply those dot files to any new local machine.

A

Then again, it's our hope that you won't ever worry about setting up a local development environment. Of course, one thing that's important to know here is that we apply these settings at creation time for your code space, so any changes you make to this repo will only be applied to any future created code spaces. It won't affect any that you've created before that change.

A

Now, that's one way that you might personalize your code space, but the other is setting sync since github code spaces leverages visual studio code as its editor, we get to leverage the amazing work that the visual studio code team has done to sync your settings across these visual studio code. Instances we keep it on by default because we don't want you to have to think about it, but I'm here to tell you just a little bit of how it works and how you can adjust it to your liking.

A

It syncs things like your ui state, your extensions, your themes, your keyboard shortcuts, and it keeps those all in sync across your code spaces.

A

A key distinction here that I want to make is that with settings, sync, any changes you make to the visual studio code editor within your code. Space will be synced across all of your past press future.

A

So if you're kind of mucking around with settings and you're, not sure that you want this to apply to everything, be sure to go ahead and turn off uh settings sync before you do that and now to you know, I can tell you about this all day, but I feel like it's a little bit cooler to show you that it does indeed work the way I'm telling you it works, let's go ahead and do it.

A

Great, so you can see here, I've got a code space up and running already. This is my olive tracker, all of makes appearances as many times as possible in all of my demos. So we've got a theme here with the mononoke and what I'm gonna do. Is I'm gonna go ahead and go to my simple hello, world application and start up a code space.

A

Now, while we're here you'll see, I don't really have anything installed. Only two settings sync is on by default and when this code space finishes running, I guarantee you that we're going to see the same theme applied and, in fact to make things cooler, I'm going to put it side by side. So, as I make changes, you can see that it's happening in real time and there's no funny business behind the scenes.

A

While we're waiting for that to connect. I just wanted to show you a quick example of my dot files here, you'll notice, I have these aliases. I love those they're great. uh If you want a cool one to try with your own dot files. Try this party one it'll, create a nice linear terminal just for you.

A

So here we have our two code: spaces side by side, exactly as we'd expect, and now, if I take the one I just created and I can go ahead and change the theme to abyss, it's going to take a second that setting sync is running in the background and in just a few moments we'll notice this one change as well pretty cool right, but what's even cooler is.

A

I can sync things like my extensions, so, for example, if I know that in every single code space I want to use this prettier code formatter, I can just go ahead and install that, and by default it's going to sync it.

A

Maybe yes, it's going to sync it right here and then, if we wait over here and give this just a second to run that in the background you'll see that my prettier code formatter showed up on my other code space as well. So if you've got any of those extensions that you'd really love to have on every single code space, you can use setting sync to ensure that they follow you wherever you go now.

A

Let's talk about configuring, your code space generally, when you open a repository, if you don't have any special instructions in the dev container that I'll talk about in a second, we leverage a general sandbox to get you started, we try and support. You know the laundry list of languages uh in order to support getting as many of you as possible started, and you can see that list here, but if you need a bit of extra configuration, perhaps you have a very specific version of python.

A

You need you're going to leverage the dev container json for configuration.

A

A

This is a quick sample of what the dev container file might look like. This is purely a configuration file that lets us know how to build the container for your needs. This is great if you're a lead or a maintainer of a repo, and you don't want users to have to do anything more than click. The opening code space button now important things to note here are that the dev container is actually checked into the repository, and so it is scoped to the repo, not the user.

A

This is why it's great for maintainers of a repository to leverage, no matter who the user is, if they're using this repository, they're just going to click on that open and code space button and we're going to build it according to the specification that you've checked in there are a lot of properties uh that you can use in this configuration file, but, what's also great, is that you only need to use what you need.

A

You don't have to do every single thing, as you can see in this sample screenshot, we actually have a few of them commented out, because we don't need them for this repo leverage. Only what you need and don't worry about anything else.

A

Now, as I mentioned, or as you might see here, we have a set of extensions that you can uh itemize for the repository as well, and you might be thinking to yourself. Okay, allison, you just showed me how to sync my extensions with setting sync that was awesome.

A

Why would I also add these extensions to the dev container? That seems like two different ways to make sure that I'm getting the right extensions. I need for my development. Well key distinction. There is setting sync is per user, and so you can't guarantee that any person picking up your repo will have the same set of extensions that you might be using with the dev container and putting the extensions attribute in there.

A

You can ensure that every single person who uses this repository gets this set of extensions installed, and so it's really a way to ensure that everyone has the same uh experience when they open in a code space.

A

So that's the general lay of the land with our dev container, but if you're like me, hearing about a configuration file and actually creating that on my own are two very different things with varying levels of difficulty. So I want to take you through a quick demo of how visual studio code actually helps you create this in case you want to go and build a dev container json for yourself right after this talk, so I'm going to bring this full screen here, so you can see a little better, as I mentioned before.

A

This is just a very simple um hello world application here, and you know I find with a lot of my prototypes. I start just from scratch and then I want to build it up and with our ad configuration files command. I can do just that. So perhaps now I decide you know this repository.

A

I really want it to be a python project, and but I need a very specific version of python, one that our universal sandbox doesn't um support out of the box. So all I do is uh open up the command palette and I can do code spaces, add development container for configuration files. You can also do that from your code, spaces pane. So here with hello world, I can go ahead and add development, container, config files, and what that's going to do is it's going to open up this great quick pick.

A

It shows me some top options, but I can also show all the definitions. There are a lot as you see here, because we really want to help. You get started fast and I'm just going to say: let's do a python 3. and I'm going to do 3.8, because 38 is one of my favorite numbers. Let's hope that's, not a security question somewhere and I'm gonna hit okay, and what that's going to do is it's going to automatically generate everything. I need to get started with this project as a python, 3.8, you'll notice.

A

It's got the list of extensions. It's got some optional attributes here I could uncomment. If I wanted- and it's also got settings that'll help make running this code space incredibly easy for anyone else who wants to pick this up.

A

So that looks all great to me, but maybe I also want to go and add that prettier code formatter to this repository, I think everyone should use this extension. All I have to do is right. Click and you'll see we have the ability to just add to dev container json and in fact there it is so you don't have to search through for exactly how you need uh to configure this dev container. We do a lot of the early lifting for you to help.

A

You get started and experiment rapidly, which I love great so now that we've done that, let's hear just some quick tips from the team.

A

Awesome, so there are three things that I personally love doing and a few of my teammates love too. Did you know that directly from a codespace, you can create an issue from the terminal you might have seen in the keynote that the github cli is out, and I love the github cli, I'm so happy that it is installed by default with codespaces, because if you're like me and you run into a bug, I don't want to have to find which of my 20 tabs.

A

I need to open in order to file an issue, and so I can just go straight to my terminal in my code. Space and do github issue create and go from there and it's awesome. I don't have to lose any of my context on that multi-tab problem.

A

I I love having my code space in the browser, but every now and then I want to leverage my vs code in desktop installation and I think matt showed in his demo that you can actually just open vs code and you can download the github code, spaces extension and you can go ahead and create a code space just from there. The tip that I will add on to that is that if you want to suspend your code space, you can do that from the desktop experience. All you need to do is right.

A

Click on your codespace name and you can go ahead and suspend just like that. And finally, you can actually open apr in a codespace. We talk a lot about. You know working from that repo page clicking the code button and open, but I switch back over to my.

A

Switch back over to my hello world page here, you'll notice, I have a pull request open and if I go ahead and click on it, I can go ahead and hit this open with and do open in code space which, if you you know, want to provide a quick uh review of a teammate's changes without having to mess up one of your installations.

A

You can just quickly spin up a code space and contribute back to your team. That way, I'm sure kath loves this for the prs for her documentation.

A

I know her team has definitely helped me out in that way before and with that that are the big tips from the team. um I hope you learned some new things today and you're ready to go off and personalize your code space, exactly as you need it um and with that, uh I'm so excited to take any further questions and super excited to hang out with y'all in the discussions after toggle your screen. Oh sorry,.