Using GitHub Codespaces with this course - JavaScript教程

- [Instructor] In this video, I'll show you how to use GitHub Codespaces. Codespaces is an instant cloud-based development environment that uses a container to provide you with common languages, tools, and utilities for development. Codespaces uses the power and familiarity of Visual Studio Code to get you up and running in no time. This course was developed using GitHub Codespaces. So you have everything you need to get started without having to worry about installing plug-ins or build tools. To follow along with the course, you can create a new GitHub codespace using the open link found in the related to this course section on the course overview page. If you're already logged into GitHub, you'll be directed to a getting started with Codespaces page. If you're not logged into GitHub or don't have an account yet, you'll be prompted to log in or create an account before using the codespace. Once on the getting started with Codespaces page, click on the green create codespace on main button. It can take a few minutes to create and open your codespace, so just hang tight until it's finished loading. You can also create a codespace from the main repository overview. Click the green code dropdown button, click the Codespaces tab, and there you have the option to create a new codespace on main or open a previously created codespace. Once your codespace has been loaded, you'll be in the code editor view. If you've worked with Visual Studio Code before, this should look quite similar. Codespaces is a special version of VS Code that runs on GitHub servers. If you accidentally close your browser containing your codespace environment, you can reopen the codespace from the GitHub repo landing page. All codespace environments are saved on a virtual machine, so you don't have to worry about losing your progress. This course was created on one branch, which means you don't need to worry about switching to a new branch or creating a new branch for each chapter. We'll primarily be working with the file explorer tab. You can check the other tabs out on the left hand sidebar to search, commit files to GitHub, and view plugins, and more. In the file explorer, we can see we have many folders. Each chapter that uses a codespace corresponds to a file in the start folder. If we open one of these files, you can see we have everything we need to get started. Just open the file from the start folder that corresponds to the video you're currently watching. You'll notice for this course we have a mixture of HTML and JavaScript files. Let's first learn how to work with the HTML files. We'll use the live server plugin to run our HTML files in the browser and receive realtime updates. So every time you save the HTML file, the browser will reload with your changes. Since the live server plugin is already installed, you can right click on any HTML file and select open with live server. After a few moments, a new browser tab open. When I make a change to the HTML file and save it, we can see the change is now automatically reflected in our live server tab. You'll also notice that occasionally I'll type a tag element name like h1, and hit the tab key on my keyboard. When I hit the tab key, the HTML element will auto-create with the required attributes. This is a great way to quickly write nested HTML markup without having to worry about making a syntax mistake. We can use this HTML shorthand because of a tool called Emmet. This is already integrated with Codespaces. Emmet is a really robust tool and can save a ton of time. For example, if I wanted to create an unordered list with three list elements, each containing a link, I would write the Emmett shorthand like this and hit tab, then all of my elements have been created for me. Don't worry about this for now. But if you see me using this trick, that's what's going on. You may also want to open your browser console to view the DOM in real time. You can do that by right clicking the page and selecting inspect. If the exercise uses a JavaScript file, we can run it in the terminal. To open the terminal, you can select view terminal from the Codespace menu. Once in the terminal, you can change directory into the start folder with the cd command followed by the folder name, start. Now, if I write a console statement in the JavaScript file, we can test if it's running correctly. We'll use the node command to run this file. Write node followed by the file name. We don't need to type the entire file name. We can type the first few characters, and then hit the tab key to auto complete, then hit enter. You'll see our hello string is being logged to the console. Back in the file explorer, you can see we have one more important folder. The end folder contains all of the code challenges in a complete state. I recommend not looking at these files until you've attempted to challenge yourself. If you want to create your own copy of this repository, you can fork it. This saves a complete copy of the course repo at this point in time to your own personal GitHub account. Click the fork button in the top right of the repository and give it a name and description, then click create fork. Forking the repo will allow you to save your changes, even if you delete your codespace. You can create a new codespace from your forked repository as well. The benefit of forking the repository before creating a codespace is that you can push your own changes to your forked copy. So if I want to make a change and save it to the repository, I can edit the file and save it. Once I've saved the file, you can see that there is a 1 added to the source control panel icon. This tells us that we have one changed file. Now I can add and commit the file to the staging area. Then I can click to push the main branch of my forked repository. Once pushed, you can see your changes reflected in your forked repository on GitHub. If you create a codespace on the main course repository and try to push changes, don't worry. Codespaces will first ask you if you want to create a fork before letting you push your changes. Now we're ready to get started.