You. Hey, everyone. Today I am talking about why are people developing inside containers and how GitHub code spaces takes containerization to the next level. Now, I have a bit of a confession. It's that in 2018, about five years ago, when I started my software engineers career, I had no clue what containers were like. I received a list of install instructions on my first day. It was talking about install Docker and do this with containers and kubernetes. And I was like, what are containers? I don't really understand or why people are developing inside containers. But I was like, fake it till you make it. Fake it till you make it. Doesn't matter. But then I went back to it, and I was like, you know what? It does matter. I want to know why. So the first half of this talk is to kind of explain that for folks who might have related with me. And then the second half of this talk is to talk about GitHub code spaces. So let's get into it. The way I like to illustrate what container's purpose and usage is for is this line. It works on my machine. So either you found yourself saying that before, or you've heard somebody say that, and if not, it's soon to come. And you might be like, why would somebody say it works on my machine? So when you start coding at a company or for an open source project or whatever, maybe your configurations are sometimes a little bit different. So sometimes when you fix a bug or add a new feature, and then you push it up to production or staging, or you share it with a coworker or teammate, they're like, it's not working for me. It's not working here. It's broken. And that is because you might have slightly different containerization settings or environment variables, or something's just a little bit different, which is causing your feature or your bug to not be reflected in the same way as it was on your local machine. So then it makes you say, wait, but it works on my computer. It works on my machine. Like, I swear. Yeah. So that's kind of why containers were created. Or part of it, right? Is to stabilize or create some consistent within environments. And what is a container? Right. So, according to Docker, a container is a standard unit of software that packages up code and all its dependencies so applications can run quickly and reliably from one computing environment to another. And what is Docker? Docker is an open source platform or product that was founded in March 2013 by Solomon Hykes. And when people think of containers, they immediately go to Docker but Docker didn't create containers or the idea of containers. It only popularized the use of containers because Docker made it so much easier. It's more of like a suite of different management tools for containers. And it made it way easier for developers to be able to containerize or package up all their software and ship it. So just reiterating the users of containers and why they exist. So containers enable software engineers to program in a consistent environment. So for example, your dev environment may mirror, or will now mirror your production environment with the same operating system configurations and dependencies. And this will enable all bugs and features that behave the same across all environments. So now you don't have to say it works on my machine, it works on everybody's now. So let's go back in time. Little history lesson of the origination or how containers were created. So we start in 1979 with this command called Shrut. I think some people pronounce it differently, but your girl says Shrut. But basically this command allowed you to change the root directory for any given process. And the benefit here is that it gave you an isolated environment for build processes and dependencies. Then in 2000 came freebsd jails. And these were pretty similar where they allowed developers to isolate and test updates and changes without jeopardizing the integrity of the system. The cool thing is these came with some designated IP addresses. Then in 2006, Google created this thing called process containers, which have now been renamed to control groups, aka c groups. And basically this isolated resource usage of like hours, cpu, memory, disk, I o and network. Basically this is just giving developers a chance to be like, hey, here's this container or area where this resource is. And I want to test and debug and figure out what's going on without touching the rest of the system. And then comes in Docker. So I kind of skipped a lot, but there were other implementations of different type of container management and containers. But Docker came in in 2013 and this was way easier to use and people were like, okay, I can dig it. And introduced a suite of management and packaging tools for containerization. Essentially all of this is to say, this has been a pursuit of figuring out how we can run software reliably from one environment to another. And I think code spaces takes containerization to the next level. And we're going to talk about how right after I introduce myself a little bit more, I like to introduce myself, you're like, who is this person that's talking? Who's this amazing person? So my name is Rizel Scarlett. I'm a junior developer advocate at GitHub. Before that I was a software engineer for about three years. I'm an advisor, and I was a director at an organization called Code, which introduces women of color and non binary people of color to web development for free. I'm also pretty passionate, or some might say addicted to social media. So if you are also on the interwebs, you can go ahead and follow me at black girl Hykes on Twitter, mastodon, Instagram dev two hash node, literally anything you could think of except on Twitch. I am black girl hykes. One because I forgot my password and got myself locked out of my account. All right, let's jump back into it. So we're going to talk about what is GitHub codespaces and how it takes development to the next level, how it's taking containerization to the next level. First of all, what is it, right, essentially to not even make it complicated. It's just an ide in your browser. So whether that's vs. Code, jetbrains, Jupyterlab, you can get that in your browser. And I hope y'all like my meme of Tyra Banks saying vs. Code, but make it fashion. All right, so why would this be helpful to you? Like vs. Code in your browser? So when you work in a code space, the environment you're working in is created using a development container, and that development container is hosted on a virtual machine. So this is allowing you to code in a container that's hosted on the cloud, as everyone says. And what is the cloud? Right? If you're like, what is this cloud thing? It's just can environment that doesn't reside on your computer, but rather on the Internet. It's not with you, that server, that environment is not with you. It's in the cloud. Okay, so I do want to specify like codespaces is not the GitHub web editor. I've called to a couple people and they've thought it's the GitHub web editor. So the GitHub web editor is when you go to a repository and then you press the period button and it opens up a web editor like view for you. And this just allows you to edit your files, right? But you can't, like if you just had a formatting problem or something and you wanted to quickly edit your files without ruining the spacing for Yaml, because we know Yaml is a little picky or any other thing, right? We don't want prettier to yell at us and we want to edit the code without opening up our editor and cloning things and doing all that, you just go into the GitHub web editor and edit it and then commit it. But it has no terminal. You can't run the code. You can't really do much. That is the GitHub web editor as opposed to GitHub code spaces. It has a terminal, you can run your code there, you can set up what machine type you're using, right? You can use GPU, you can use a whole bunch of different things on GitHub code spaces. And GitHub code spaces is not necessarily free. So you do get 60 hours of free usage per month. So that's a good amount. But GitHub web editor is free forever for all time. All right, so the benefits of GitHub code spaces, why would you want to code in a development container that's hosted on the cloud and now you're in your browser? Well, you get faster, right? Or you can automate the onboarding process for folks. If you've ever joined a new job, they give you this document of like, here's all the steps you got to do to be able to code in this code base. And it can take forever, like a day to a week. And with this, your manager or coworker or whatever can set up all the environment variables. You'll need all the dependencies all in one go. And then when you start your new job, you can open it up and be like, wow, I can commit code day one. I don't need to do the setup stuff. It allows you to code from anywhere as well. Because it's browser based. You don't have to download your repo or clone your repo onto your local machine and then start installing things again because you have that automated configuration file that's setting everything up for you. It's all in there, believe me. I've coded in codespaces on a plane, on my iPad. So wherever you have Internet access, and if you have access to that repository, you can open that bad boy up. And then because it's using containers again, you don't have that problem of it works on my machine because it's bringing that uniformity to your developers environments. All right, so let's talk about how codespaces can be used for onboarding new employees. So codespaces users this concept called configuration as code and what that is is basically config files dictating how your app should run on the given environment, whether it's a platform or hardware operating system, whatever your config files are saying, this is what should happen. This is what I'm expecting. This is the environment that I'm in. And the benefit of this right to have config files as code is now you can manage them in your repository with version control. And this allows you to do things like have them all in a centralized location, have CI CD run on them, and be able to trace bugs. I'll go on to a little bit more on this slide. Right, so centralization, you have one single source of truth for your config files. They're all in one place. You're not searching everywhere for them because they're in your repository. You can run like CI CD stuff on them. So if you want to check out linting or testing or do some security scanning on them, you can do that all in one go with hours code and your config files. And then also if you make a mistake, maybe there's an extra space or a random comma. You can look back through your commits, your version control, and be like, oh, that's what changed. I accidentally added a comma. All right, so let's talk about how we can set this up for newcomers, right? So you have this thing called a dev container JSOn. It is responsible for automatically installing things like extensions, environment variables, install commands, build commands, your docker file, post forwarding and post creation commands, or specifying your Docker file. So here in this example, right, this is one for node js. We're saying we're using this Docker file. We're going to use code JS 16. And here's all the extensions I want installed automatically. I want es lint, I want prettier, and I want live share. I could specify the forwarding ports. Like I could say I want it to run on 3000 when it's open and when it opens up, when that code space opens up, I want it to run yarn install da da da da da. Cool stuff, right? And then we have our Docker file, right? Docker files are used to automate the installation and containerization of a container, so it contains a list of commands that the Docker client calls while creating an image. For this, all I needed to write was node 16 bullseye, because that's all I needed. That's all I wanted. It's just node 16, right? And then we have the Docker compose YaMl file. This is probably one that's less users, but it is useful if you want to run multiple containers. So let's say you want to run a database and a web server in a code space. That's what the Docker compose yaml file is for, and you can use it for that. So if we look at this file right here, we see them setting up the postgres database and saying even what port they wanted on and putting in all those variables. So you got it? All right, let's talk about one use case that I thought of for code spaces, which is using it if you were a coding instructor. I don't think many people have thought of this, but for me, as someone who's taught people to code either online or in person, for coding workshops or boot camps, I've been like, yo, code spaces would be so cool for this. So here is, let me pause this really quickly and give some consistent here I have a, I started from the beginning. Give me a quick second, give me a quick second. All right, we were here, so I don't want it to press play, but essentially pause. What has happened here is I set up a code space, and this code space, this is for someone teaching them front end like HTML, CSS and JavaScript if they've never done it too much before. And what I have is when they open it up, they get a view of the browser. This gives them a cloud that I but part of the clock. But I have some missing pieces here. And essentially one half is the browser or the preview of the browser, and then the other half is splitting up their HTML, CSS and Javascript files for them so they can see it clearly. And then I have these little prompts created by an extension, a GitHub extension called code tour. So once they open it up, they get all of this and the prompt tells them hey, there's a question mark here. Can you update the h one value to change it to six? And it does all these things so they can get a little bit comfortable moving around or navigating these different files from an HTML file to CSS file to a JavaScript file. So I'm going to press play so you can see the experience. So here I'm changing that question mark to six, and then I say, oh cool, let's change the color. Let's change the color. So they're looking at the CSS and the linear gradient and maybe they want to change it to red. Okay, cool. And there's one thing that's pretty weird. The hour hand and the second hand are moving really fast. So I ask them to update one of the lines and I say change the seconds to hour. Yes, cool. So now that it's updated, the hour hand is going to move on the hour and the second hand is going to move on the second and then it says mission complete. So all the stuff I users here is essentially I'll show you. First I set up a dev container JSon so that when they opened it up and all I had in there was just these extensions, nothing else, because I didn't need anything else. There's no backend or anything here. Just when they open up this code space, I wanted it to immediately install eslint for them. Prettier vs live share an extension I made called deploy to GitHub pages so that they can deploy this afterwards. The same vs code theme I had code swing, code hours, and code spell checker. This helped me immensely because I find what happens, especially in a remote environment, is sometimes people get lost, and especially if there's multiple people and I can't see that they're lost because I'm not in the same place as them. So having the code tour extension helps them to stay on track and get guided, even when they're not too sure what to do. And then having them have the same theme as me and stuff like that. So they're not like oh excuse me instructor, why is mine highlighted as blue but yours is highlighted as pink? Everything the same across the board for them, same environment, so that it doesn't allow them to be confused. Then there's can extension called codeswing. So what I added in there is a file called codeswing JSon to kind of show the layout of how I wanted things to go. So I wanted the files, the index HTML, the CSS and the Javascript to be split on the right, and then you would see the browser on the left hand side. Then we had the code tour and this is that extension that gives you a tour of the code base. I used it to kind of guide them through stuff. So I have different steps here and I specify which line and which file and what I want the code tour to say and they can press next when they've completed it. I thought that was pretty fun. Then there's also, I also think code spaces is useful for those who like experimenting with different programming languages. There's some people that as soon as a new framework, Javascript framework comes out, people want to try it out, and I don't get them wrong, I'm like, it's totally fine. So there is this idea in code space, or this concept in code space is called templates. So I'm going to go ahead and navigate over there. So here we have GitHub.com codespaces templates and you have multiple templates. You can either open up a blank template, a ruby on rails template, a react Jupyter express, and nextjs and much more. So we're going to open up the nextjs one. While this is opening up, I'm going to clear my throat. And now you all are seeing the login for GitHub. All righty. And I might zoom in here just a smidge. So it might take a little bit of time. I pressed reset right after it did it. It's going to take a little bit of time to install all the things needed. So it has a couple of extensions and it should open up a browser view for me. I'm going to let it do its thing, but we can watch it happen. Pretty cool that. Here's the browser opening up on the left hand side for me. So we can see that in the browser we have a file that says fast refresh demo and essentially it has a component with state. So if I click it, the clicks keep counting. It can throw an error for me too. Document body is not a function. So I can go ahead now that everything is essentially set up and I can find that. Let me put it on this side so we'll be able to see it. I can find that index js file and I can say maybe I want, for whatever reason, the count to increment by two. So if I save that, it'll automatically change to that. I think it's okay. I decided to go off script and do that. Don't worry. Let's go back to actually what was on my script. My script was to actually go ahead and change the file here. So instead of changing the count, I expected it to go up by two. That's all right. What I'm going to do instead. I might not have paid attention to what the incremental values are. Perhaps this was for this part and not for this. That's all right. So I can essentially go ahead and just change like this. Instead of it saying fast refresh demo, I can say code spaces takes containerization and I'll move these files. We don't need this folder so big to the next level and we can see this automatically changing. Right? You get that view right there. And this gives you a chance to be huh? How does next JS work? Let me play around with some of the features here. It's already set up for you, or if you already know, next JS, but you just want to create a quick demo app instead of going through NPM install or yarn install or whatever for next JS. Here you have this playground that you can play around in and you can actually go ahead and just commit it to your repository. And I think that part of it's so fun. All right, let's go back. Oh man. All right, now here's the other thing. I think it's great. If you're prayer programming similar to Ngrok, you can do port forwarding here. So if we go to the dev container JSon, I'm hoping it's going to tell us that it's forwarded. Yes, forwarded to port 3000 or this is the forward port, right? And then it forwards it to this long address that says black girl bytes, verbospace invention and all these random numbers. So normally the convention, the naming convention is like the owner's name, a random word that it's generated, and then a couple of random numbers, the port number, and then preview app GitHub dev. Now this is something that if I click this and I've opened it in my browser, I can see the same thing, right? Instead of just seeing it within code spaces, or if I wanted to share it with someone and prove to them that yes, it does work on my machine. While we're coding together in live share on GitHub code spaces, I can change the visibility and I can say I want this to be public in general or just public to my containerization. So like anybody who's part of my organization could be able to see this. So if I but public, and let's say I copied this copy and I'm going to open this, but I'm not sure if it would change anything for you all. But if I was to share this with somebody, I'll open it in a different browser, they would still be able to see it as well. It doesn't too much really show that for you because I'm on the same computer, but you can change that port visibility. And it's one of the things that I think is pretty cool on GitHub codespaces. But wait, there's more. So after we talk about port forwarding, you can also manage code spaces from the command line, which I think is pretty fun, pretty awesome if you are a command line geek here. In this example, I show that you can type Gh codespaces list and see a list of all your GitHub code spaces. You can also create a GitHub code space from here. So what I'm going to do in the next slide here is. So I created a GitHub code space by saying GitHub gh codespaces create that flag r. Then the owner of this, so I have an organization called galaxy bytes, and then the repo name, which is pink moon, and I want it to be the code space to be created on my main branch. So I'm going to go ahead and do that. I create it and I choose the machine type. So I want two cores and I'm going to go ahead and refresh it, and I want it to show up here. So it did show up. I'm just going to pause it. It showed up right here. So before we had only one code space under galaxy bytes, and now we have two. And the second one is called upgraded potato, and it does come up with these random names that are hard to remember. So I thought, could you rename the space to something you can remember? And in fact you can. So if you do gh code space edit, and then you put in the old code space name and put the display name, you can be able to change it. Now, this won't change the permanent name. This is more like an aka or a name that you'll be able to remember. It'll still be called black girl bites upgraded potato. But when you see it, when you're identifying it, you'll see the name that you change it to. So I'm going to go ahead and paste in the original name, the permanent name. I'm going to paste it, and then in display name, I'm going to call it memorable name. So for me, when I see it, I'll see the memorable name, but behind the scenes, it'll still be called that really long name. So once I refresh it, I should see it say memorable name rather than upgraded potato. And you can also delete GitHub code spaces. So again, because this is the permanent name, I need to still use that name it gave it. So what I did is I copied and pasted the name, and I put Gh codespaces, delete flag c right before it pasted the name. And once I refresh my page, I should see that the code space doesn't exist. And last but not least, GitHub code spaces is. This is the exciting part. I hope y'all didn't leave yet. GitHub codespaces allows you to do stuff for data science, machine learning, and AI. So what we're going to do next is we're going to use GitHub code spaces to generate some AI art with stable diffusion, like so cool. All right, so I have some gifs here. So that way I'm not doing it live because the demo gods are never with me. So I was able to generate this cartoon black girl. So I put in this prompt in GitHub quotespaces that says a cartoon black girl with cotton candy here and a pink dress standing in front of a pink sky with cotton candy clouds. And it gave me this kind of scary looking, to be honest. And then I did another prompt that says a polar bear looking at the northern lights, and it gave me this. So let's see how we can make that happen. First off, you need to make a GPU powered code space, and you would do that when you open your code space, you got to open it with options and you'll choose six core, one GPU rather than two core, four core. This is in limited beta right now, like this option. So you will have to request availability to gpus or to having a GPU powered code space. Then you want to sign up for a hugging face account and generate an API token. Once you have that API token, each of your repositories have codespaces secrets. So inside of your codespaces secret, you want to store your hugging face token and you want to name it hugging face token because that's what it's looking for. And once you do that, you can open up a Jupyter notebook and you're going to run each of these lines. I did fork a repo that I can show you all at the end that you can fork from me as well, so that you don't have to do all this from scratch. So here at each cell you want to press run to make sure everything works. So first we're going to install the needed files for this. So we're installing it or needed dependencies, and this is literally how long it takes, but I think it's interesting to just see it. So like on the left side we have these Jupyter notebooks and we have the dev container and all that going on. Then we want to go ahead and run this line that ran pretty quickly. We'll run another line that's setting up everything for us. So running, running. And I think while this is happening we can just look at it. So next is going to be the prompt. So we can see here we're importing autocast from Torch, and this is where you'll update the prompt to something you want. So I put a boy hitting a baseball with a baseball bat. I'm going to go ahead and run it, and hopefully it's not something super terrifying. I'll run it right after these are done downloading and done running this stuff. Come on. Cloud faces should be done pretty soon. I could have fast forwarded this, but, you know, it's good to see the real time stuff. So we already had that cotton can here, one from before. So I'm going to go ahead and run this. And even it's specifying the height and width of the image, and it's probably returning an array of different images and showing us the first one as we can see here with images. And then it has the zero if element in the array. So we're getting there. We're halfway there. Halfway there. All right. And it generated a really scary looking image. It tried, but we're used to stable diffusion doing that. So I'm going to go ahead and show you all the repo that I used for this and let us see. So it should be called do. Okay, this is it. So if you all wanted to go to it, it is GitHub.com galaxyblights stable diffusion. You can go ahead and fork this repo. I forked it from my manager, who forked it from the code spaces product manager, who forked it from somebody else. So you can keep forking it you all until just to mess around. And you can create your own if you wanted to. But remember, this has to work with a hugging face API token, and you have to have access to Codespace's GPU, and you can request that because it right now is in limited beta access. Let's go back. We're almost done. Like, I showed you all the cool stuff from GitHub codespaces. So I just want to do a real quick recap. With containers, you can standardize your development environments, and with GitHub codespaces, you can streamline onboarding, you can code from answers, you can have standardized environments, you can use templates if you wanted to experiment with a framework or build a quick demo, and you want to skip all the boilerplate, you can share your forwarded ports with folks, and you can perform data science and machine learning tasks such as generating art, AI art with stable diffusion. It's really fun to use GitHub code spaces. Thank you. Thank you so much for tuning in. Thank you to the Conf 42 DevOps 2023 and everyone involved for allowing me to speak or inviting me to speak. This was so much fun. Please hit me up if you have any questions. My handle is at black girl bites. Thank you. Bye.