YULIA SOKOLOVA: Hi, everyone. My name is Yulia I'm one of the preceptors here at CS50. Thank you so much for joining us today for our CS50 seminars. Today, we have our own Andrew Holmes, Harvard class of 2024, presenting on Flying the Nest-- Setting Up Your Local Development Environment. 

So I will kick things off to enter in just a minute, but please enjoy the seminar. Feel free to type any questions that you have in the chat, and we will try to get to them either during the seminar or shortly after Andrew, you want to kick things off? 

ANDREW HOLMES: Well, welcome. Thanks for coming. This is the CS50 seminar on Flying the Nest. So today, I'm going to be talking about moving from cs50.dev or the Codespace environment and all of our familiar tools working on your laptop-- working offline in local development. And for me personally, that takes the form of Windows. 

As I've just said, I am a long-time Windows user. I've just moved to an iPhone for the first time ever in the iOS system. But I'm going to be talking largely based in Windows. And at the end, I'm going to talk about some of the Mac connotations and how that should translate if you're working on a Mac or on a Linux system. 

So to get us started-- well, to get us started I guess I should start with a home page. So welcome to the CS50 seminar again. My name is Andrew Holmes. I am a head TF here for CS50 at the college currently. I have taught CS50 for three years. This is my final year here as a senior, and I'm really excited to be working with you for the next 30 minutes or so. 

So getting going, this is something that hopefully we're familiar with. If you're a CS50 student, you've been studying through CS50x, CS50 at the college, this is our Codespaces environment, right? This can be accessed by cs50.dev. On the left, you're going to see some of our new tools. You might see the duck over on the left sidebar, which is one of our newest tools which I was fortunate enough to work on over the summer last year. But this has some problems, and you might have encountered some of them already. 

So it begs the question, why am I even bothering saying "Why Local Development?" Because we already have a tool space where you've worked. It's familiar. It has lots of great things. The CS50 duck is actually specific to that environment. You won't be able to find that anywhere else. 

So why should I bother? The first point I would say is offline work. Anyone here at the college knows the pain of the CS50 office hours on Sunday, where we have wi-fi issues. Maybe you're traveling. We get stuck. You can't access cs50.dev, you can't make progress, and that can be a source of a huge frustration. 

The next thing is a customizable environment. You might want to have tools that we don't allow you. And I'll show you an example where cs50 has restrictions on what you can do within the Codespace environment, even though it's built on top of VSCode, which we're going to see is very flexible. And the next one is simplicity and speed. I can just turn on my laptop, access whatever I'm working, on VS Code or any similar tool, and I can write code. 

I can make progress. I don't have to go to cs50.dev. I don't even necessarily need a GitHub account. I can just make it happen like that. 

But you might have heard that local development is not necessarily the standard here. And I'm going to ask why not local development in the same vein. Local development is common, especially at the undergraduate level. But as you go on, you might actually find that we move back away from local development and go back onto like a server or something like Codespaces. And that begs the question, why? Why have we set up local development? Why would we move away from it later? 

One of the things-- it's a massive pain to set up. As we're going to see, and as I was demonstrating by struggling a minute before I was meant to present, things can go wrong, especially on your own computer. Right? And that's a safe space. You don't want to damage your computer. You don't want to have to debug your machine or cause issues with the rest of your life, especially if it's a personal computer, like many university or students of CS would currently use. You don't have a work machine and a home machine. 

There are also hardware limitations. Whatever laptop you're running, it's limited, right? You might have four cores. You might have eight cores. Maybe you're running a new M3. Maybe you're running an old Intel Windows laptop. Maybe you're running AMD hardware, which is different. 

That can create some hazards, right? Some things may not be compatible, some things may install differently, and some things may not translate. Your code might run differently on your system than on mine. That's especially true if you're on a 32-bit versus a 64-bit machine. We might even see an example later perhaps where I made a mistake and installed a 32-bit GCC or C compiler, and so all my pointers in C are actually 4 bytes long by accident when I installed this earlier. 

And that's come down to hardware-dependent behavior. And one of those especially is with the new Apple silicon, M1s, M2s have different behavior based on their ARM architecture versus the traditional Intel or similar processors. I'm going to bring myself back in here. 

So VSCode, this is where we're going to start. This is a familiar interface. I have it here as my default black theme, which I think many people are used to. And why should I use VSCode? 

I'm going to say that this is where it's a good place to start in terms of writing code locally. And the first thing is it's familiar, right? This is essentially the same thing. You'll see the sidebar over here, which will look nice and familiar. Right? 

And it's very powerful. We use it everywhere. It's very common. It's used by plenty of people you should trust who write excellent code. And so, let's get started. 

So we're going to see that I'm running in Windows. I don't have VSCode. If I type it here, if I try and check-- Andrew, you've been writing code for a while. It's already installed, right? I'm working on a new user. So I have no VSCode. 

And instead of going to cs50.dev, like I have here, we're going to search VSCode. Not the logo, which I needed for my slides, but here's Visual Studio Code. Right? And the first thing we see on this web page is Download for Windows Stable Build. And that's what we're going to hit. 

As we wait, we're going to get an exe which we're going to just run and install like on Windows, and the process here, while I have a minute-- because this is going to take a little bit to download. I should have connected the ethernet. It's going to be similar for Mac, right? Go to VSCode, just search Visual Studio Code, and there will be a nice big install button. For example, if I go back a page, you'll see that I could even click this arrow and say I want the macOS version. 

OK. Looks like my download is complete. So let's run this. I'm going to accept the agreement to install this. Next. 

I'm going to install it in some folder. Luckily, it's not-- I have a second user, so it's not going to stall where I already had it in my Andrew. It's going to stall in Andre. I guess I was both called Andrew, and it removed the W for this user. We're going to have it as Visual Studio Code or VSCode, whatever you like your shortcut to be. 

Then we have a couple of options here which are useful. So the first one at the top here, Open with Code action to Windows Explorer file context menu, and the one right beneath, directory context menu. This is to say, if you're in the File Explorer, you're looking through your files, you'll be able to right-click on a piece of code, let's say a .c file, and say Open With and then with Visual Studio Code or open with Code. And that will mean there will be a shortcut directly within your File Explorer so you can open a code file and bring it into VSCode. 

So I would recommend taking both of these and hitting Next. And let's press Install. OK. So we're going to wait for this to run for hopefully not too long. And as we go, let's launch VSCode. OK. 

So I have a couple of things open which I probably should have got rid of before. But I've set up a little space for us to do some experimentation. I have a .c file over here-- hello.c. So this should be nice and familiar. I'll make this bigger so it's clearer for the video. 

This should be nothing surprising. Then, if I go over here, I've also got the birthdays p set from p set nine-- this is our Flask app-- and a home page. When I say a home page, I really mean a very simple HTML page set up for us. OK. 

But currently, if I try and run anything here and do HTTP Server, or any of the familiar tools, we're going to see that I'm going to get some pretty nasty red errors. It's currently not recognized as a form of a commandlet. And that's because I don't have a HTTP Server installed, right? 

And it'll be the same-- I'm going to get rid of this for now-- if I try to write gcc, which is a C compiler. If I try to go to, let's say I go to the C directory. I'm just going to clear. So I'm now in the C directory. If I ls, you're going to see I have my hello.c and a makefile. If I tried make hello, we're also going to see that I'm hitting errors because I don't have this default installed. 

OK. So how do I fix this? Well, there's a couple of routes through this on Windows especially. The first thing is that I can not fix it. I can take what I already had on cs50.dev, and I can run it locally. We have this tool. And when you go on the Login button, there's the arrow here on the right. And I'm going to demonstrate it now. 

If I want to, I can run exactly the environment I had on cs50.dev, but I can run it on my computer. Right? So if I hit this Open in VSCode Desktop, click this, it's going to ask you for some permissions. So it's going to allow CS50 to install the prerequisite materials onto your computer. So here we go, Allow it to open. Oh, apologies for the noise. Let's turn that off. 

OK. And here, we're going to see it's trying to set up. So as you'll see-- I'll move myself-- we have setting up remote Codespace, starting Codespace. And what this is going to do is set up almost exactly the environment that we already had. So I have a completely blank codespace. I'll go and log in here on the web page, just to demonstrate that it's not like I'm missing anything. My files would be synced. 

Let's log in. And here is my probable lamp codespace. Like I said, I made a new GitHub user just to simulate trying to set up for the first time. So yeah, I have nothing here. So you should expect, when this is all set up-- I don't need the languages. But now I'm in a codespace environment, and there's nothing there. 

Let's remove the Welcome. But if I wanted to, I could code. Let's use some of our commands. Let's mkdir hello. You see, hello is now there on the left. cd hello. 

I'm going to code. Code is the keyword, essentially a bash function, to run VSCode and open the file in VSCode. And if I wanted to do, I could do include stdio.h, int main void, printf, "hello, world!" And I now run make hello and ./hello, there we are. Hello, world. 

And with that in mind, let's put myself back on screen. OK. So this is one way of doing it. But this is not going to give us much flexibility. Because we have restricted some tools on here to make it work with our systems. 

One of those that is probably pretty frustrating if you have any experience with it is that if I try and run Git, it's going to say-- move myself again quickly-- you are in a repository managed by CS50. Git is disabled. And there's a talk later this afternoon about using Git, and it's a super useful tool. Hopefully, you'll watch that talk and see how to use it. 

But some restrictions like this are going to be problematic for me to configure exactly what I want to do. So let's abandon this idea. I want to be able to have my own exact custom environment. So I'm going to close this out, and I'm going to ignore cs50.dev, and I'm going to go my own route. 

And my own route-- on Windows, there are two routes I would say. And this is going to be a fascinating arrow-- the height of animation and teaching. Windows is going to point directly to Windows. And what I mean by this is there are two options on Windows. 

Generally, if you want to stay on Windows, one is to work locally exactly within Windows. But there's an alternative, which is this arrow, which is a little bit more meaningful, and it's not the same word drawing to the same word. This is WSL. This is the Windows Subsystem for Linux. 

And what this does is it means I can run a small Linux, almost something like a virtual machine-- it's not actually a virtual machine. But I can run something like Linux while within Windows. I can write code in that environment. I can work in that environment. But I can still have all the familiarity of working in my own Windows system. 

And this is great because all the tools that we're used to are much easier to install in Linux, and there are some compatibility and other nice features that it's going to give us. So as it would suggest by the green arrow, we're going to take this route today. You can do both, and I actually have both configured myself on my laptop. But we're going to focus on WSL for today. 

And why? It's more similar to CS50 tools. It's running a Linux environment. So we're going to be back in Linux. Anything like ls, mkdir, wget, apt-- all those tools are going to work right out of the box basically. It's much easier to install once setup, and Linux and Unix tends to be much more compatible with other systems. 

Some cons briefly is that there's some overhead to run it. You are essentially running a mini operating system on top of Windows already. And accessing files on your local computer from WSL, there's some overhead. And it actually recommends you to have all your files within the subsystem for Linux. I'll talk about that a little bit later to explain it a bit better, but it's going to be a little bit slow in terms of file writing and reading at times. 

And one con that I know someone on the staff will want me to include, so I'm going to put it there, it's not as good as just running pure Linux. If you want to take that route and run Linux entirely, abandon ship, that would be totally reasonable. And I, in fact, dual boot. I can boot into Windows or I can boot into Linux. But that is a little bit advanced and definitely not necessary for CS50. 

So here's how we're going to get started. We're going to try and install WSL. Going to do wsl --install within a terminal, and that's going to get us on the road. So what I'm going to do is I'm going to open a terminal. In Windows 11, this is just called Terminal like this. If you're on Windows 10, you might want to run the command prompt-- cmd down here. But I'm assuming most people are now on Windows 11. 

I'm going to type-- well, I'm going to clear the console quickly and type wsl --install. Let's make this nice and big, make it clear what I'm doing, and we're going to install. So I've already installed this because it needs a restart after installing. But this is a simple command. 

You're just going to run, it's going to install it, and then it's going to tell you to restart. And then you'll be essentially exactly where I am. OK? So now that you have that set up. 

If I try and run wsl, for me I've had to cheat a little bit and remove my distribution so I can run it. It's going to say it has no installed distributions. And what this means is WSL, the subsystem for Linux, is installed, but it doesn't actually have a Linux installation that it can use. 

And so, to do that, you can go to one of these stores, or you can simply install a distribution. And I'm going to do that like this. wsl --install, a distribution, -d. And because I know I already have it installed, I'm going to pick Ubuntu-22.04, the latest Ubuntu long-term support edition. 

So I'm going to hit this command, and now it's going to attempt to install Ubuntu. And so, again, I've cheated just so the seminar doesn't take an hour to install all of these things. But this is already installed, so it's going to speed up-- hopefully appear here in a second for me. 

I see there's some questions in the chat. We're going to answer questions right at the end, once we've finished going through everything, if that's. OK. Cool. 

And now, I see, in this terminal, it has installed for me, and it wants some username and password, just as if it was Windows or any other operating system. So for this example, I'm going to pick cs50. I'm going to give myself a password. It's not going to display your password. So this is a hidden, not very secure password for the demonstration. And now, I'm in. 

It says, Welcome to Ubuntu 2022-- sorry, 2022? 22.04.2. OK. Now, if I type clear and I run ls or anything like that, you're going to see it's going to work. You notice my terminal is changed to this green prompt, which is going to be our indicator that we're in Windows subsystem for Linux. 

OK. Now, how can I actually use this? Well what I'm going to do is I'm going to go back to VSCode. OK. And it's trying to set up this remote connection with Codespaces, which is actually not what I want. I want to work locally. I'm going to open local, I'm going to go to My Documents and this CS50 folder, and I'm just going to open here. OK? 

So here we are. We're back in this folder that we talked about, which wasn't in my Codespaces. This is on my computer, and this is code that I want to run. Right? And what I'm going to do is this bottom corner over here there's an Open a Remote Window. And this is going to allow us to open in WSL that folder. 

So I'm going to write Connect to WSL, and I'm just going to click this. And we're going to see what happens. So it says starting VSCode-- If I move myself-- in WSL I didn't move in time. Sorry about that. But now I'm in WSL, and I'm in my VSCode shortcut-- sorry, in my VSCode terminal. And any of the tools that I wanted to run over here, like ls, makedir, hello, cd hello, we're going to see that now I'm back. 

But where actually am I? I don't seem to be-- like, if I'm on the left, it says like Open the Folder. What's going on? I don't seem to be in CS50. And if I click this cs50, here where it says Recent, we're going to see I no longer seem to be in WSL. What's going on? 

What's going on is when WSL recommends that you should keep your files separately-- so when I open local Windows files, it says, oh, you probably don't want to be in WSL. But in fact, I do. So we can override this. And this is an update. If you've seen Carter's local development talk, this has changed since then. 

You're going to want to hit Control-Shift-P or View and the Command Palette. OK? And then, if you type WSL an Open folder in WSL, it's going to say, OK, which folder do you want to open with WSL? And I'm going to click the CS50 folder, Select Folder, and now what we're going to see-- oh, OK. I'm not used to having Zoom videos move around. 

What we're going to see is-- if I close everything here-- now, I'm in my folder right, CS50 over here. It says ESL Ubuntu and WSL Ubuntu. And actually, at my terminal, if I move myself again, we're going to see now I'm in CS50. Right? If I ls, I can see my folders. If I wanted to work in C, I would cd into C. Let's just clear. 

Show my folders here again. So I have my makefile and hello.c. And now, I'm in business. Within in Linux I'm running an Ubuntu system or a system, but I'm working in my Windows files. So now, if I wanted to make this code, I might want to use a C compiler. And I'm just going to quickly-- just to make things a little easier-- run this command prompt_dirtrim, which is going to shorten how many folders are visible in my prompt. And I'm going to try and run a C compiler. 

I want to try and compile this code. So the C compiler that I'm going to recommend using is called GCC. And I'm going to type gcc hello.c -o-- I'm too far on the screen-- and then hello. OK? And what this is going to do is it's going to try and compile that file, hello.c, and it's going to output the Hello file. But we're going to find the GCC is not installed. OK? 

And it's going to give us-- Linux gives us very nice instructions as how to install these files. Install sudo apt install gcc. Just before we do that, we're going to make sure that we have everything up to date. So apt is a package installer that we're going to use a lot. And sudo, the sudo command that we're going to see all over the place today, is super user do. It's the equivalent of running as an administrator on Windows. It says, I want this done. Trust me, I know what I'm doing. 

And so, we're going to run this command first. It's going to say sudo apt update. And once that's done, it's then going to run the second half, which is sudo apt upgrade. Which is going to make sure our apt tool is nice and up to date. 

So we're going to say sudo apt update. Let me just move the sidebar to make it clearer. Let's clear this. Clear. Sudo apt update and sudo apt upgrade. You can run these as separate commands if you like. I'm just going to do them all in one. 

Hit Enter, and it's going to ask you for a password because you're running as an administrator. So let's put in the password-- cs50. And we're going to see it's going to do a whole lot of stuff. And I'll put myself back here briefly while it's running. 

And here, it's going to ask, are you sure you want to download all this? 91.4 megabytes is not a whole lot. We have space for that. So I'm going to hit Y-- type Yes. OK? 

And here it goes. It's going to install for us. Waiting for-- hopefully the wi-fi won't take too long. And we're almost there. Leave myself out for the fireworks-- the nice progress bar. 

And any second. And we're in. OK. Done. Zero added, zero removed. No red. No errors. 

Cool. Let's clear that away. And let's try it again-- gcc hello.c out hello. And again, it's still not installed. All I did right there was install the package manager or update the package manager. So we're now going to run this command it tells me-- sudo apt install and then gcc. And this stands for Gnu C compiler or collective compilers-- the Gnu collective compilers I believe. 

And we're going to say, Yes. I want to install this program. This is a compiler. And it's going to do the same thing. We're going to see this a couple of times when we try and run apt install. 

And there we are. All done. Again, if I type clear. And one final time, hopefully, I try gcc hello.c. io stands for out, output. And this is the name of the file that I want to put output. And now I see I got nothing, right? 

This is the equivalent of me running make hello. But if I run as we would do in cs50 space, within Codespaces, if I run ./hello, what do we see? "hello, world!" Right? So if I now go look at the C and I hit this little refresh button for it to show up, now you can see this is the compiled file. And now I have a C compiler ready to go, right? 

I was able to compile this file-- not for now-- and be able to printf "hello, world!" Cool. But that's not how I originally was compiling code on CS50, right? I was using make-- make hello. And the tool to use that is behind the scenes we're running a makefile for you. 

What is a makefile? It's a handy little tool to compile code for you. And I have an example here. Let's zoom out a little bit, just so I can see everything. And this is something close to the compiler-- sorry, the makefile that we have for CS50. 

What it does is it says, what's the C compiler that I'm going to use? GCC. Give it some flags. I've only put in a couple of flags. But this will tell you any options for how you want to compile your code and then some compilation rules. 

This is going to look very cryptic. I can post this file afterwards online if you want to do something like this, or you can find your own makefiles online or make your own. And what this says is the target-- if I run make and then some word like hello, it's going to look for that target hello.c. It's going to run the compiler with some flags. The output should just be the name of the target. 

The target was .c. After -o, there's no .c. It just wants to target out. Essentially, that's what's going on. 

So if I now try this, if I say make hello, we're going to see that, damn, not installed again. Right? But that's OK, another easy fix. Sudo apt install and then make. It happened almost instantly. 

Now, if I try to make hello, "hello" is already up to date. Whoopsie. Let me just delete this file just to give an example. Make hello. We're going to see, it's run gcc. That's the command it's run. 

And if I run ./hello again, "hello, world!" Yeah? So now, I have a makefile root of compiling, or I can just compile by myself using GCC. Cool. So that's basically a compilation for first half of the course, right? Everything we've done in C. Looks like we're up in business. 

But let's talk about the rest, right? So we've made these couple of steps. When you install WSL, it probably installed this WSL extension for you. If it didn't, I would just make sure you have the [? WSL ?] installed-- extension. 

So to install an extension, you go to this part of the sidebar. It's the three blocks with an extra block. Search for the extension the one to install. Type WSL. And then, if I just pick another one, for example, you'll see this Install button. And just hit this Install. 

So this was already installed for me. I think I might have gotten a little bit lucky there. If it didn't, install that for yourself. OK? 

OK, next. So we're a little bit ahead of slides. There are a couple of things that are already installed for us. OK? So I didn't even have to try and run-- I didn't have to sudo apt install this. Python 3 and Git are already going to be installed for us. 

So if I type python3 here-- let's move myself again, and let's get rid of this-- we see that I have a Python interpreter already good to go. Python 3.10.12. And if I say x equals 12, and let's print x, we print 12. OK? 

So that's already set up for us, which is nice. I'm going to hit Control-D to get out of the Python interpreter. And then, also, git. If I try and type git, and then let's say git status, it's going to say fatal-- not a git repository. But it's actually working, right? It's recognizing that I'm not within a git repo. I could just try it like git --version, and it's going to tell me which version of git I have installed. 

And so, like I said, I'm not going to go too much into Git here. That's for this afternoon's talk. But it's nice that it's already set up for us. 

Some of you may be thinking, Python 3? If I want to run Python 3, you saw this at the top. It said Python 3.10.12. It's not the most up-to-date version. There is Python 3.12, which is currently the latest version. And 3.13, I think, is coming out in January is the estimated timeline. These tend to lag a little bit behind. 

If you want to install the latest version, you certainly can. It's a little tricky at times. 3.12 is a little weird in terms of compatibility. But there's actually some benefits to being on some of these older toolings. 3.10.12, a lot of the packages take some time to update to later versions. 

So especially if you're doing final projects, [? doing ?] like machine learning, stuff like TensorFlow and PyTorch are classic Python libraries which are used extensively in machine learning but are currently not supported by 3.12. So if you'd like to go beyond 3.10, you're welcome to do that, and I'm not going to cover that now. But actually staying in 3.10 is not the worst idea in the world at all. 

OK. So now, we might think, OK, let's go cd back back, and let's go to my birthdays, right? Maybe I want to run birthdays. If I look at my file here, I have this app.py-- same as a normal Flask application. And if I tried flask run, it's going to tell me that Flask is not installed. And there's a couple of things that we're missing there. 

So I'm going to remove my terminal and show the birthday folder. So move this app.py. If you'd like to install, there's these pop-ups. Installing the recommended Python extensions is generally a good idea. You can hit this Install if you'd like. I'm just going to ignore it for now. 

But we're missing some libraries, right? CS50 has its own Python library, which I currently don't have installed. And also, Flask. Flask has a bunch of-- [INAUDIBLE] Flask. There are two Flask libraries that we're going to want to see. And let's see how we install those. 

So I'm going to clear again. And to install things, we're going to use Python's installer. It's called pip. Or I'm going to do this. Pip3. OK? 

And that's not going to work because that's not installed, which is a bit of an oopsie. So let's install sudo apt install python3-pip. This is going to be our Python install Python package manager. It stands for I think Pip Installs Programs or something like that. So it's a nice recursive definition where PIP is both in the definition and the definition. And we're going to run Yes when I want to install it. 

And we should be all set. So now, if I type pip3, we can see it gives me a bunch of commands. OK. So let's go back to my slides briefly. 

So we've already set up GCC and make, but there are things that we're missing like Flask and HTTP Server. So we've already done these two. I haven't done SQlite 3. Let's just handle that quickly. So I want to install SQLite 3-- same thing, sudo apt install and sqlite3. 

That was done super quickly. I'm within birthdays, so I have this birthdays.db. So let's do sqlite3 birthdays.db. And we're going to see, we're back in business, right? I can do anything that I could do in the CS50 environment. .schema, or if I wanted to select everything from the table from birthdays-- typo from me-- then we see we have everything. Good to go. Cool. 

I'll just show that come on quickly again. So it was sudo apt install sqlite3. Again, I'll be sharing all the slides for this afterwards. But this is how we're going to install Python packages. We're going to use pip3, Python's package installer. 

So these are the three packages you're going to need for the-- well, at least for the p sets for CS50. And if you want to use other packages, you might want to find tools online that you want to install via pip. So we're going to run these commands. So the first one-- let's clear my console again-- is going to be pip3 install and then cs50. Right? This is going to install the CS50 packages. 

And we're going to see that a lot of installing for us. Clear it away. Let's return to my slides. And we want to install Flask. And then flask_session, this is basically a sublibrary of Flask. It's going to be used in-- if you have done the finance p set already or you're starting on it now, this is what we can use to track session information about users. 

So let's do pip3 install and then flask. Already has Flask installed for me, which is, I think, possibly a product of me messing around earlier. But if it's not already installed for you, which it probably shouldn't be, you'll get exactly the same string of text saying stuff is installing. And then hopefully no red error messages, and you should be good to go. 

OK. I did the same thing-- pip3 install flask_session up here. OK. So if I try and run flask run here, there might be one final hurdle. It's going to say it actually wants the installation from apt as well. So you might need both to run this. This was not always true. But I'm just going to do exactly what it tells me-- sudo apt Install python3-flash. And yes, I want to install that. 

Nice and fast. And now, if I run flask run, we're going to see the nice WARNING that we've had so many times before. This is a development server. Do not use it in production. But if I click this, we're going to see I have the beginning of the birthdays problem set from week 9. 

And now, we're up and running. We have C up and running. We have SQL up and running. We have some maketools if you want to compile using the make command like we had in the Codespace environment. We're almost there, right? 

I think the only thing I haven't shown you so far, in terms of being able to run the p sets, is our old friend HTTP Server. So if I wanted to just go back, and I think I had this home page. Let's just clear. I have an index.html and styles.css, right? I would have wanted to be able to run http-server, but it says command not found. And it didn't even give me up nice install message. 

That's because HTTP Server is generally not installed via apt. Normally installed via node-- Nodejs. Carter's previous talk, I think in 2019, can cover this. But I'm going to suggest a different version. 

We are benefiting that we are in VSCode, and it has some really nice tools for us. And one of those, if we go to the Extension tab and type live server, is this live server package. And if I click on this, it says a development local server with live reload for static web pages. So I'm going to hit Install on this, and it's going to take just a few seconds. Everything here should install super fast except from the original WSL install and the installation of the distribution. 

And I'm blocking it, but something new has appeared. It's hard to spot. But down in this bottom-right corner, I have this Go Live button. Click to Run a Live Server. So when you're within the folder you want to run, I'm going to hit this Go Live button. And it's going to say Open in Browser. The application is now running. 

So I Open in Browser. It's going to show me my folders, right? And I want to run in the home page. So I go to Home page. It's going to tell me, wow, that was easy! Right? Because if we look at my HTML page, homepage, index, what do we see? Header-- Wow, that was easy. 

And that is now just rendering as a page. And you can see me being a little worried that this wasn't going to work. Filming live is a little tricky. But so far, no major hiccups I think. Which is good. 

And now, we have basically everything from any CS50 p set you can now run, and it's been up and running in about 25-30 minutes, hopefully. I'm going to show you a brief another tool that is now useful for your final project. There's a tool called Emmet. I realize I'm disappearing. There's a tool called Emmet which is useful for writing HTML fast. 

There's a really good Emmet cheat sheet. If you Google Emmet cheat sheet. Oh, I can't spell-- cheat sheet. And it looks something like this. It looks about what you'd expect a computer science cheat sheet to look like. 

Again, I can share this in the chat-- or if [INAUDIBLE] or Carter wants to share this in the chat. But this is a tool that's actually built into VSCode for you. And it allows you to write HTML really fast. Especially if you're doing final projects, this could be super useful. 

So to show you an example, I'm going to give a quick shout-out to my teaching fellows here at Harvard. We have a really great community, and I'm very proud of the people that I've been in charge of as head TF this year. So I'm going to do ul If I hit ul and just hit Tab, it's going to create an unordered list for me. 

But I want to go a little bit further than that. And then, I can say within the ul I want something. I want an li. So I'm going to have this less than or-- sorry, it's a greater than symbol right-- ul greater than symbol and hit Tab. That would create a ul and then an li within. Go back one more step. 

I can also give them ids and classes within this. When I gave something a class within CSS, I had the dot syntax. And I'm going to say that my staff, the people I've been teaching, have been really awesome this semester. Awesome-staff is going to be the class I'm going to give to them. And I'm going to make seven of them. 

And I believe my cohort is seven people. And if I hit Tab, we're going to see that I get a ul with a bunch of awesome staff. And just as a nice quick shout-out to you guys, I'm going to put in your names. I'm going to say thank you to these guys for having a really good semester. Let's try and make sure I get everyone. Matthew, Isabel, Sedik. 

And if I save this and look at my page-- I had to restart. What are we going to see? There we have all their names. Not quite as big as I like it. I'll give you a little zoom, guys. Right? 

I didn't have to refresh. I didn't have to restart my server. It is a live server, just like HTTP Server. Cool. 

Now, a couple of final extensions and useful bits and pieces. One of them that I really recommend is, along with live server, there's a tool called Live Share. And we're going to go here-- same place, search in your extensions, Live Share, and hit Install. 

And what that's going to do is allow us to have real-time code sharing. If you want to work on your project with someone else, you can see exactly where you're working. And you can work on the same file at the same time. So I have this installed, and I've been told-- and hopefully I'm right-- that Carter has this installed as well, over to my left somewhere. And now what I'm going to do-- there's now this Live Share tab, right? 

So if I hit this Live Share, I want to start a live sharing session. I want to work-- Carter wants to work on my code at the same time. Maybe we're in the same room, but we want to work on different parts of the project. Maybe at the CS50 Hackathon, maybe just working together while on a call. 

I'm going to create this new sharing session. OK. And what I'm going to do is I'm going to hit Invite participants. Right? I want someone else to come along with me. It says Invite link copied to clipboard. What I'm going to very quickly do-- I'm going to send it to Carter@cs50. 

Carter, are you with me? 

CARTER ZENKE: I'm with you. 

ANDREW HOLMES: Excellent. There's a Live Share link for him. And when he joins, hopefully we're going to see, over on the left, we're going to have our participants is going to bump up to one. And it's also going to see, just while I'm waiting for that, that we actually have a shared terminal. We can also not only share writing files, but when we're in the terminal, we can see what each other is writing. 

OK. So even before he's joined-- I think he's still working on finding the link-- is you're now going to notice that to facilitate discussion and working on things collaboratively, there are now this button on the left where I can say Start discussion. And I can create a comment thread. And we just saw, Carter has just joined on the left, which is cool. 

And so, I can say, Hey, Carter. Aren't my staff great? You can see-- oops. So now, you'll see there's this comment for him that he can look at. But also, he can write some code for me. Carter, do you want to add anyone to that style that you'd like to shout-out this year? 

Let's move myself. A very deserving shout-out to Yulia, one of our new staff members here behind the scenes-- one of our preceptors who's been amazing. And so, now, you can see, this is now Carter. He can see my cursor. I can see his cursor. If Carter typed in the terminal, I could also see what he was doing in the terminal. 

But that's rarely used. You'd rather just work separately. But we can work side by side. So I'm going to write one more staff member. Carter, do you want to write one beneath me? So I'm going to do li.awesome-staff, and I'm going to shout out a previous member of staff, Phyllis. And perhaps one more-- we're going to shout out Ashley. 

As you can see, we're both writing code simultaneously in the same file and able to collaborate. If I look at my live server, which is still running, we see that I now have a full, updated list of people we all wanted to shout-out. Phyllis, Ashley, Brian, and Yulia are all people we've just added together. Cool. 

So that's super great. Carter, maybe you'd like to leave a comment. Or did you add a comment to mine? 

CARTER ZENKE: Yeah, [INAUDIBLE]. 

ANDREW HOLMES: Sure. Just to show some of the added functionality. Carter just added a comment down here. Nice list of staff. Very good. So this can be super useful when you're collaborating on your final project with a partner or just working in future your classes, future endeavors. Live Share is a great tool. 

In terms of when Carter leaves the session, I also as the host can kick him off I believe. Remove Participant. Sorry, Carter. Hate to do this to you. But now that I've removed Carter, maybe we're working together in the same place, maybe we're at the Hackathon, wherever, but I was the one holding the session. It was my code, and the code is only saved locally to me. 

So now, when Carter has left the session, we're no longer working side by side, he does not have access to the code. And that's really where Git comes in. Git is a useful tool, and especially Git in relation to GitHub. You can send and upload code. 

Once you're finished working on something, once you've implemented something, push it to the server, push it to GitHub. And then your user-- another user-- your friend, your group project, they can then pull from GitHub. They can use git pull and bring that information live onto their computer. So at the end of a session, you could both commit the work you've done, say git push, push it on to the server. 

Say I keep working-- my colleague, my partner, has gone work to do something else-- I push something else that they don't have while I was working. Then when they log back in, before they start working again, they get your live, updated changes. They say git pull, they have all the information, and then they're good to go. They have everything that you've just done. 

So using these two tools in tandem, Live Server and GitHub, is super useful for working in collaboration on projects. I think that's about me done. I'm just going to check that there's nothing else that I missed. I had some other VSCode extensions you might want to install. So when Python popped up or C popped up, you can quite literally search C and Python for these extensions over here. So if I type Python-- there's just some toolings for the languages that you might want to work in. So if you work in any other languages, these are good things to install as well. It might just help you with error messages and debugging. 

And I had one final one, which is CodeSnap. This is the tool that I use to take screenshots of any of my code. So if you like taking screenshots and having pretty code like this, that's a tool called CodeSnap which you can have a look at. But that's not super instrumental in getting yourself set up, which is basically where we are now. 

And in correlation with the talk this afternoon with Git and GitHub, you should be able to work on a final project together or on other projects super effectively. So there's a lot more customization options. One of them, I would say, that I like is having your own macros. So for example, some of these tools are a little-- let's put myself back-- one of my favorite things is if I'm currently working within the home page, like I don't want to see all these other files whatever, then there's this command code ., which says code here. This current location is the dot. And then -r stands for replace-- replace the current working directory. 

And this is going to open just birthdays. Now, you can see on the left, I'm just in that environment. Right? That's a lot to remember-- code . -r. And sometimes what I do-- you can edit-- oh, I'm blocking my own command. Let's zoom in. 

Oh, I'm going to prompt-- prompt dirtrim equals 2 again. And I'm going to say code. So you're currently running-- Linux runs in a terminal called Bash. This is a bashrc file. You just have to remember that this is at the root and then go to this location /.bashrc. 

Yes, I want to open it. This gives you some tools. This is how your terminal is configured. And one of the things you can do, which can be useful to you if you ever forget commands or you just have some shorthands, is you can write an alias. So for me, I have ch equals and then code . -r. This is just one of the aliases I have. And Save. 

So what it says is I want the ch command to then just be replaced, and it should just run this. So I'm going to do that. I finished editing it. You're going to want to write source and the same path bashrc, which is just going to say I've updated this, now reuse it. 

And now, if I went back-- cd dot dot-- and then I wanted to go into the C directory. Now I want to write some C. Now, instead of code . -r, I'm just going to Control-L. And I can type ch, code here. That's what I have as shorthand. Ch Code Here, and it's going to do exactly what I want. So there's all sorts of tools and information like that you can do. Customize it to your heart's content. 

There's also the side of things where local development and just pure Windows is often still useful, especially if you want to get things-- oh, I'm definitely blocking my own text. If you want to get stuff done quick and dirty, you don't need to boot up WSL, just want to work, especially Python is nice and easy in Windows, you can do that. And then just install other tools. Apt is a great tool. The internet is a great tool for anything else that you might want to use for a final project. 

But hopefully now you're all set up with everything that you needed for the final project or other endeavors. Oh, wrong button. I think the only thing I have left to say is we're about to go to the final slide, which is just going to be a Thank you. I'll give a shout-out to the slides that I used. I've been using this design for a while, and my students seem to love it. 

We're going to end up just now. Wrong one again. Need to hit the button. But that's going to be a wrap for the live community. In a second here, we're going to open up for some questions. I think Carter or Yulia will manage the Zoom. 

But if you're watching the recording, thank you very much. I hope this was useful to you. If you're working on Mac, there is the previous version with [? Rongxin ?] and Carter in 2019. We'll probably put a link to that in the description. And I'll try and be in the comments to try and answer some useful questions-- common questions-- that I can't do here. 

But I think that's all from us. Thank you very much.