Environment setup - JavaScript Tutorial

- [Instructor] To work along with me on the files for this course, you need three applications, a web browser, a code editor, and an HTTP server. You also need an API key from OpenWeatherMap.org. You undoubtedly already have a web browser installed in your machine and any major modern browser, Chrome, Firefox, or Microsoft Edge is fine for this course. I'll be using Chrome in these videos, which is a popular choice among web developers because of the extensive and powerful developer tools it has built in. Because we'll only be using the console though, that won't really make a difference for this course. A number of great code editors are available, both free and paid apps. Any editor that lets you edit and save plain text is fine for this course. So if you have a code editor you like, such as Sublime Text or Atom, it's fine to use that. I use Visual Studio code in these videos, which is a version of Microsoft Visual Studio, created specifically for web development. Visual Studio code is free and has Windows, Mac, and Linux releases. The code is available on GitHub, and users can submit issues there as well. I've customized my editor with a few extensions that are particularly useful for this course. Bracket Pair Colorizer by CoenraadS, assigns different colors to the parens, braces, and brackets throughout your code. It uses the same color for the start and end bracket in each pair, and it uses contrasting colors for nested pairs. In code with a lot of nesting, this extension makes it easier to identify which opening character a closing bracket corresponds to. Identicator, by SirTori, adds a vertical line to the editor window for each indent level, and it highlights the line for the parent element of the active line of code. This creates another visual cue to help you identify where a statement or block fits into the nesting hierarchy. And finally, I use the Live Server extension by Ritwick Dey as my HTTP server. So this extension launches an HTTP server and opens the current document in your browser using the HTTP protocol rather than using the file system. This is invaluable for testing API requests and responses, which are often blocked for security reasons when initiated from a document using the file protocol. Live Server adds a GoLive icon at the bottom of the Visual Studio code window, which you click to serve and open the current document. It's note that when testing front-end web code, using Live Server, you need to launch the server on an HTML document. So right now I have a JavaScript file open. And if I click GoLive, it's going to open a live view of that file, which is just the directory of the currently open project. So to close that Live Server connection, I just click this icon, disposes of that connection, and if I want to see the effect of my current JavaScript code, I need the HTML file where that code is showing up, which in this case is tours.htm. And I can either open that and use the GoLive icon, or I can right-click it and click Open with Live Server. And that is going to create that connection with the browser and going to show me the file. And when I make any changes in the HTML, they're immediately going to be reflected in the browser. So that saves me a lot of saving, reloading, saving, and reloading. If you're going to use the start files for each video in this course, rather than working with one set of files all the way through, you need to make sure that you end the server session for one page before you can start it up for a different one.