diff --git a/foundations/html_css/html-foundations/links-and-images.md b/foundations/html_css/html-foundations/links-and-images.md index c9d05156e3f..a1996502577 100644 --- a/foundations/html_css/html-foundations/links-and-images.md +++ b/foundations/html_css/html-foundations/links-and-images.md @@ -52,7 +52,7 @@ It's worth noting you can use anchor tags to link to any kind of resource on the ### Opening links in a new tab -The method shown above opens links in the same tab as the webpage containing them. This is the default behaviour of most browsers and it can be changed relatively easily. All we need is another attribute: the `target` attribute. +The method shown above opens links in the same tab as the webpage containing them. This is the default behaviour of most browsers and it can be changed relatively easily. All we need is another attribute: the `target` attribute. While `href` specifies the destination link, `target` specifies where the linked resource will be opened. If it is not present, then, by default, it will take on the `_self` value which opens the link in the current tab. To open the link in a new tab or window (depends on browser settings) you can set it to `_blank` as follows: @@ -60,11 +60,11 @@ While `href` specifies the destination link, `target` specifies where the linked click me ``` -You may have noticed that we snuck in the `rel` attribute above. This attribute is used to describe the relation between the current page and the linked document. +You may have noticed that we snuck in the `rel` attribute above. This attribute is used to describe the relation between the current page and the linked document. The `noopener` value prevents the opened link from gaining access to the webpage from which it was opened. The `noreferrer` value prevents the opened link from knowing which webpage or resource has a link (or 'reference') to it. It also includes the `noopener` behaviour and thus can be used by itself as well. -Why do we need this added behaviour for opening links in new tabs? Security reasons. The prevention of access that is caused by `noopener` prevents [phishing attacks](https://www.ibm.com/topics/phishing) where the opened link may change the original webpage to a different one to trick users. This is referred to as [tabnabbing](https://owasp.org/www-community/attacks/Reverse_Tabnabbing). Adding the `noreferrer` value can be done if you wish to not let the opened link know that your webpage links to it. +Why do we need this added behaviour for opening links in new tabs? Security reasons. The prevention of access that is caused by `noopener` prevents [phishing attacks](https://www.ibm.com/topics/phishing) where the opened link may change the original webpage to a different one to trick users. This is referred to as [tabnabbing](https://owasp.org/www-community/attacks/Reverse_Tabnabbing). Adding the `noreferrer` value can be done if you wish to not let the opened link know that your webpage links to it. Note that you may be fine if you forget to add `rel="noopener noreferrer"` since more recent versions of browsers [provide this security](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#security_and_privacy) if only `target="_blank"` is present. Nevertheless, in line with good coding practices and to err on the side of caution, it is recommended to always pair a `target="_blank"` with a `rel="noopener noreferrer"`. @@ -172,10 +172,48 @@ For example, using an absolute path we can display an image located on The Odin To use images that we have on our own websites, we can use a relative path. +
+Linux, macOS, ChromeOS + + 1. Create a new directory named `images` within the `odin-links-and-images` project. 1. Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory we just created. 1. Rename the image to `dog.jpg`. +
+ +
+WSL + + +When you download a file from the internet, Windows has a security feature that creates a hidden `Zone.Identifier` file with the same name as your downloaded file and it looks like `mypicture.jpg:Zone.Identifier` This file is harmless, but we'd like to avoid copying it over and cluttering up our directories. + +1. Create a new directory named `images` within the `odin-links-and-images` project. + +2. Next, [download the stock dog image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640). + +3. Right click on the new download at the bottom of the chrome window and select "Show in folder". + + 1. Alternatively, if you do not see anything at the bottom of the chrome window, open the "Customize and control Google Chrome kebab menu and select the "Downloads" item. This will show all of your downloads, each with its own "Show in folder" button. + +4. Drag the file from your downloads folder to VSCode's file browser into your new `images` directory. + + 1. Alternatively, using your Ubuntu terminal, navigate to the folder you want to copy the image to (`cd ~/odin-links-and-images` for example) + + 2. Type `cp ` + + 3. Drag the `dog.jpg` image from a Windows Explorer window and drop it onto the terminal window, it should appear as `"/mnt/c/users/username/Downloads/dog.jpg"` + + 4. Type ` .` to tell cp that you want to copy the file to your current working directory. + + 1. The full command will look something like `cp "/mnt/c/users/username/Downloads/dog.jpg" .` + + 5. Hit Enter to complete the command, and use ls to confirm the file now exists. + +Dragging files from Windows into the VSCode file browser prevents the `Zone.Identifier` files from being copied over. From now on, any time you need to copy pictures or other downloaded files like this into WSL, you can do it in this way. If you ever accidentally copy these `Zone.Identifier` files into WSL, you can safely delete them without any issue. + +
+ Finally add the image to the `index.html` file: ```html @@ -228,7 +266,7 @@ As a bit of practice, add an alt attribute to the dog image we added to the `odi ### Image size attributes While not strictly required, specifying height and width -attributes in image tags helps the browser layout the page without causing the page to jump and flash. +attributes in image tags helps the browser layout the page without causing the page to jump and flash. It is a good habit to always specify these attributes on every image, even when the image is the correct size or you are using CSS to modify it. diff --git a/foundations/installations/command_line_basics.md b/foundations/installations/command_line_basics.md index f4e5696c01b..e07f7b269b2 100644 --- a/foundations/installations/command_line_basics.md +++ b/foundations/installations/command_line_basics.md @@ -39,12 +39,16 @@ This section contains a general overview of topics that you will learn in this l
+
+**Note for WSL users**: You will have to use the `wget` command along with the link given in the `Download files` section in order to have the zip file in your WSL installation (`wget https://swcarpentry.github.io/shell-novice/data/shell-lesson-data.zip`). You will also have to install unzip by using the command `sudo apt install unzip` and then `unzip shell-lesson-data.zip` to unzip the file. Keep in mind that throughout the course linked in the first step below, your terminal output may look slightly different to what is shown in the lessons. Anytime the course asks you to go to the Desktop, you will instead be going to the home directory which can be done by using the cd command (`cd ~`). +
+
Many of these resources assume you're using a Mac or Linux environment. If you did our previous installation lesson, you should already have Linux installed in dual-boot or a virtual machine. Or, you might be using macOS. If you don't have macOS, or any version of Linux installed, please return to the [operating system installation guide](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/prerequisites).
1. Visit [The Unix Shell](https://swcarpentry.github.io/shell-novice/) course designed by the Software Carpentry Foundation. There you will find a full complement of lessons on using the CLI, but for now just focus on completing the following lessons: - + - [Download files](https://swcarpentry.github.io/shell-novice/#download-files) - [Introducing the Shell](https://swcarpentry.github.io/shell-novice/01-intro.html) - [Navigating Files and Directories](https://swcarpentry.github.io/shell-novice/02-filedir.html) @@ -90,6 +94,8 @@ Third, there's a really handy shortcut for opening everything within a project d - **macOS**: Some setup is required. After installing VSCode, launch it any way you're comfortable with. Once it's running, open the Command Palette with Cmd + Shift + P. In the little dialog that appears, type `shell command`. One of the choices that appears will be `Shell Command: Install 'code' command in PATH`. Select that option, and restart the terminal if you have it open. +- **WSL**: Opening up VSCode from the command line in WSL is just as easy as it is in Linux. Just enter `code` which will open VSCode in WSL. + ### Knowledge check This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to. diff --git a/foundations/installations/installation_overview.md b/foundations/installations/installation_overview.md index 0d4a872e5ec..6d1d8f24416 100644 --- a/foundations/installations/installation_overview.md +++ b/foundations/installations/installation_overview.md @@ -2,13 +2,13 @@ The first step for building any website is having the right tools. For us, that means setting up a development environment for writing good code. -Many online development courses use in-browser code editors or "sandboxes," which give you the tools and programs needed to accomplish the task at hand and nothing else. You'll use some of these sandboxes throughout the early stages of The Odin Project since they're great for getting started quickly. However, the best way to set yourself up for long-term success is to operate in a real development environment. +Many online development courses use in-browser code editors or "sandboxes," which give you the tools and programs needed to accomplish the task at hand and nothing else. You'll use some of these sandboxes throughout the early stages of The Odin Project since they're great for getting started quickly. However, the best way to set yourself up for long-term success is to operate in a real development environment. We won't lie to you: installing packages, editors, and even entire operating systems can be very frustrating. However, having the experience of setting up a development environment to run the code you'll write is an invaluable, real-world skill you'll carry with you for the rest of your career. ### The installation plan -In the following sections, we'll go over the steps for setting up your environment. There is no need to install anything in this lesson, this is an informative lesson. These sections are **the most important steps** in the entire curriculum. Please take the extra time to **double check what you're typing** or you may cause more headaches for yourself down the road. +In the following sections, we'll go over the steps for setting up your environment. There is no need to install anything in this lesson, this is an informative lesson. These sections are **the most important steps** in the entire curriculum. Please take the extra time to **double check what you're typing** or you may cause more headaches for yourself down the road. In the next few lessons, we will walk through these installation steps together: @@ -37,16 +37,22 @@ If you're using a Mac, you're in great shape. The Odin Project instructions assu #### Windows -Windows **is not natively supported** by The Odin Project, or on our Discord server; however, if you're currently using Windows you can use either a virtual machine or dual boot to keep your Windows install while creating your development environment in Linux. +Windows, by itself, **is not natively supported** by The Odin Project, or on our Discord server. Because many of the tools you'll be using were written with a Linux environment in mind, you'll need to have to one even if you plan to use Windows as your development OS. If you are currently using Windows you can use one of the following options to create your development environment: + +* A VirtualBox Virtual Machine +* Dual-boot Ubuntu installation +* Windows Subsystem for Linux (WSL) A **virtual machine** is an emulation of a computer that runs within your existing OS. It allows you to use another operating system inside of a program on your current operating system (e.g. Running Linux inside of Windows). Virtual machines are as simple to install as any other program and are risk free. If you don't like Linux, you can easily remove the virtual machine. Virtual machines are a great way for new developers to get started quickly. - - [Watch this video](https://youtu.be/yIVXjl4SwVo) on Virtual Machines to achieve an overview of how they work. + - [Watch this video](https://youtu.be/yIVXjl4SwVo) on Virtual Machines to achieve an overview of how they work. **Dual-booting** means installing two operating systems on your computer, which can give you the option to boot either Linux or Windows when your computer first starts up. The advantage of dual-booting over a virtual machine is that the OS can use all of your computer's resources, resulting in much faster operation. There is some risk to installing a dual-boot system because you're changing your hard drive partitions, but you'll be okay as long as you take your time and read the instructions. Dual-booting can be as easy as inserting a flash drive and clicking a few buttons. The benefits of dual-booting cannot be overstated. You will allow Linux to access the full capabilities of your hardware, have a clean and distraction-free environment for coding, and learn the platform used by many senior developers and servers around the world. +**Windows Subsystem for Linux** lets you run a full-fledged Linux environment from within an existing Windows installation, giving you all of the advantages of Linux without needing to run a virtual machine or dual boot. We'll be using version 2 of WSL, commonly known as WSL2, within the curriculum. + ### Concerned about installing a new OS? "Woah, woah, woah! I like my OS just fine the way it is!" @@ -55,9 +61,9 @@ If you don't have an Apple computer, you are likely using Windows. Don't worry! Modifying or dual booting a computer to work with the tools you'll need will make it much easier to start programming, can help create a distraction-free environment, and will look good on your resume. Take a deep breath, and let's look at your options. -Still not convinced? Here are a few great reasons to install Linux: +Still not convinced? Here are a few great reasons to install Linux: -- **Tested** - We've tested our directions with macOS, Ubuntu, and official Ubuntu flavors. We did the research so that you can get tools installed with as few issues as possible, getting you to coding sooner. Time spent wrestling with your operating system is time taken from learning how to code. +- **Tested** - We've tested our directions with macOS, Ubuntu (and official Ubuntu flavors) and WSL2. We did the research so that you can get tools installed with as few issues as possible, getting you to coding sooner. Time spent wrestling with your operating system is time taken from learning how to code. - **Community Support** - Using the tools we recommend makes it easier for us to help when you run into trouble. - **Development Tools Are Built for Linux** - Ruby (on Rails) and Node.js, popular backend technologies covered by The Odin Project and widely used in the larger web development community, are open source projects that explicitly *expect* to run on an open-source (UNIX-based) platform like Linux. - **Work Like The Pros** - Many developers use a Unix-based operating system. @@ -67,7 +73,7 @@ Many learners come to our Discord channel to ask if the directions on this page Before we can continue, we must first stress one detail of importance: -**We can only support what is provided within the scope of our curriculum. We do not support native Windows or any version of Windows Subsystem for Linux (WSL) as a development environment.** Using Windows and WSL has been discussed many times and it is not feasible to do so at this time. Please do not ask us to support Windows, and please **do not bring it up in the Discord**. We are constantly evaluating our curriculum to keep content as fresh and accessible as possible, and Windows/WSL [has not proven to be a path of low resistance.](https://github.com/microsoft/WSL/issues) +**We can only support what is provided within the scope of our curriculum. We do not support native Windows as a development environment.** Using Windows has been discussed many times and it is not feasible to do so at this time. Please do not ask us to support Windows, and please **do not bring it up in the Discord**. We are constantly evaluating our curriculum to keep content as fresh and accessible as possible, and Windows has not proven to be a path of low resistance. With that out of the way, we need to set up an appropriate development environment! diff --git a/foundations/installations/installations.md b/foundations/installations/installations.md index 60960231df2..f3ef2920b17 100644 --- a/foundations/installations/installations.md +++ b/foundations/installations/installations.md @@ -5,7 +5,6 @@ If you are already using **MacOS**, **Ubuntu**, or [an official flavor of Ubuntu

Be mindful of the OS you are using

We can only support the operating systems indicated above. Our instructions have been tested with MacOS, Ubuntu, and official flavors of Ubuntu. We do not recommend installing an OS that is only based on Ubuntu (like Mint, Pop!_OS, ElementaryOS, etc). -
### 1: OS installation @@ -36,7 +35,7 @@ Once you have completed these instructions, **you are expected to work entirely #### Step 1.2: Download Xubuntu -There are thousands of distributions of Linux out there, but Xubuntu is undoubtedly one of the most popular and user friendly. When installing Linux on a VM, we recommend [downloading Xubuntu 22.04](https://mirror.us.leaseweb.net/ubuntu-cdimage/xubuntu/releases/22.04/release/). There are a few files listed here, download the one ending in `.iso`. Xubuntu uses the same base software as Ubuntu but has a desktop environment that requires fewer computer resources and is therefore ideal for virtual machines. If you find the download speed slow, consider [using a different mirror](https://xubuntu.org/release/22-04/#show-all) as the one linked before is a US one. If you reach the download page and are unsure about what version to choose, it is recommended that you pick the latest Long-Term Support (LTS) version (22.04 at the time of writing). You may be tempted to choose a more recent non-LTS release, but LTS releases have the advantage of guaranteed support for up to 5 years, making them more secure, stable and hence reliable. +There are thousands of distributions of Linux out there, but Xubuntu is undoubtedly one of the most popular and user friendly. When installing Linux on a VM, we recommend [downloading Xubuntu 22.04](https://mirror.us.leaseweb.net/ubuntu-cdimage/xubuntu/releases/22.04/release/). There are a few files listed here, download the one ending in `.iso`. Xubuntu uses the same base software as Ubuntu but has a desktop environment that requires fewer computer resources and is therefore ideal for virtual machines. If you find the download speed slow, consider [using a different mirror](https://xubuntu.org/release/22-04/#show-all) as the one linked before is a US one. If you reach the download page and are unsure about what version to choose, it is recommended that you pick the latest Long-Term Support (LTS) version (22.04 at the time of writing). You may be tempted to choose a more recent non-LTS release, but LTS releases have the advantage of guaranteed support for up to 5 years, making them more secure, stable and hence reliable. ### Step 2: Install VirtualBox and set up Xubuntu @@ -46,11 +45,11 @@ Installing VirtualBox is very straightforward. It doesn’t require much technic During the installation, you’ll be presented with various options. We suggest dropping the Python Support as you don't need it by clicking on the drive icon with an arrow and choosing **Entire feature will be unavailable**: - ![The Python option is at the bottom of the list](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/01_turn_off_python.png) +![The Python option is at the bottom of the list](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/01_turn_off_python.png) This is how your installation window should look like after turning it off: - ![You want the Python option to have a scarlet "X" on it](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/02_c_install.png) +![You want the Python option to have a scarlet "X" on it](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/02_c_install.png) Make sure you install the application on `C:` drive, as it has tendency to error out otherwise. The virtual machine itself can be installed anywhere but we'll get to that soon. As the software installs, the progress bar might appear to be stuck; just wait for it to finish. @@ -59,11 +58,11 @@ As the software installs, the progress bar might appear to be stuck; just wait f Now that you have VirtualBox installed, launch the program. Once open, you should see the start screen. - ![The VirtualBox start screen](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/03_start_screen.png) +![The VirtualBox start screen](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/03_start_screen.png) Click on the **New** button to create a virtual operating system. Give it a name of **Xubuntu**, if you want the VM installed somewhere else than default `C:` location, change that accordingly in the **Folder** option. This is the place where your virtual disk will reside, so make sure that you've got at least 30GB for that. In **ISO Image** choose **Other** - you'll see a window open for you to find the `.iso` file on your PC. It most likely is in the `Downloads` folder. Leave **Skip Unattended Installation** as it is. - ![Half of the options being greyed out is normal. Don't worry about it.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/04_install_start.png) +![Half of the options being greyed out is normal. Don't worry about it.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/04_install_start.png) Continue by pressing **Next** and follow the next steps: @@ -71,19 +70,19 @@ Continue by pressing **Next** and follow the next steps: You should see a window like this one now: - ![No need to worry about the Product Key.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/05_unattended_install.png) +![No need to worry about the Product Key.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/05_unattended_install.png) You want to tick the **Guest Additions** and **Install in Background** options and also change your **Username** and **Password** fields to your liking. Note that your username must be all lower-case and no more than 32 characters. If you forget to change the default password, it will be `changeme`. Leave the **Guest Additions ISO**, **Hostname** and **Domain Name** as they are. Continue by pressing **Next**. - #### Step 2.2.2: Hardware - ![You might be tempted to give your VM more than 2 processors. Don't.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/06_hardware.png) +![You might be tempted to give your VM more than 2 processors. Don't.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/06_hardware.png) In the **Hardware** section of the installation you want to set your **Base Memory** to at least 2048 MB or more if possible - the upper limit is half of your total RAM but 4096 MB with the settings we recommend should give you a smooth experience. For example, if you have 8 GB (8192 MB respectively) of RAM, you could allocate up to 4096 MB (1024 MB to 1 GB) to your VM’s operating system. If you do not know how much RAM is available to you, [please run this Google query](https://www.google.com/search?q=how+to+find+out+how+much+ram+you+have) to learn how to find this out. If the VM runs a bit slow, try allocating more memory! +
Difficulty converting your Gigabytes (GB) into Megabytes (MB)? 1 GB of RAM is equal to 1024 MB. Therefore, you can say that 8 GB = 8 x 1024 = 8192 MB. @@ -94,27 +93,25 @@ As for **Processors** you want this to be at 2 and no more. Leave **Enable EFI ( #### Step 2.2.3: Virtual hard disk - ![Don't Pre-allocate Full Size.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/07_virtual_hard_disk.png) +![Don't Pre-allocate Full Size.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/07_virtual_hard_disk.png) Now, you want to leave all the settings as they are besides the **Disk Size**, we recommend giving the VM **at least 30GB** of space. Reminder that this disk will be created in the folder that you've specified on the very first step of the VM creation process but nonetheless, the disk can be moved and resized in the future if needed. - #### Step 2.2.4: Begin the unattended installation Click **Next** to be taken to a **Summary** page, on which you can simply click **Finish** to begin the process of unattended installation. The neat thing about it? It installs the OS and GuestAdditions on its own, without your input! Just let it do its own thing, you will know it is finished when you will see a login screen like this one in the **Preview** section: - ![The Preview section is in the top right of VirtualBox window.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/08_preview_login.png) +![The Preview section is in the top right of VirtualBox window.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/08_preview_login.png) Just click the green arrow called **Show** and you'll be presented with a VM window and the login screen. Log in with the password you've set up during the installation process and we'll have one bit of configuration left to do. It is possible that you'll receive an error like this one after clicking **Finish**: - ![The error shows up on the right side of the VirtualBox window and can be a little differently worded.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/09_virtualization_error.png) +![The error shows up on the right side of the VirtualBox window and can be a little differently worded.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/09_virtualization_error.png) It means you have to [enable virtualization in your computer’s BIOS/UEFI settings](https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/7/html/virtualization_deployment_and_administration_guide/sect-troubleshooting-enabling_intel_vt_x_and_amd_v_virtualization_hardware_extensions_in_bios). [Alternative set of instructions](https://2nwiki.2n.cz/pages/viewpage.action?pageId=75202968). If you have an AMD CPU, you're probably looking for something called `SVM` to enable, for Intel CPUs, `Intel Virtualization Technology`. The error should tell you what it is looking for. After you deal with it, just **Start** the machine and let things happen, you'll know that the process has finished when you see a login screen: - ![You can already make your VM full screen or just maximize the window.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/10_login_screen.png) - +![You can already make your VM full screen or just maximize the window.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/10_login_screen.png) ### Step 3: Setting correct sudo permissions @@ -124,19 +121,19 @@ Due to how the unattended installation is configured by VirtualBox, your account First, if you haven't already, login with the username and password created earlier, then click on the The blue-white rodent Whisker Menu Icon in top left of your window, afterwards type in `Users` and you should see `Users and Groups` show up. Click on it. - ![It should be the top option you see. It is possible that due to localization it'll be called differently - try using the term in your language then.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/11_users_and_groups.png) +![It should be the top option you see. It is possible that due to localization it'll be called differently - try using the term in your language then.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/11_users_and_groups.png) #### Step 3.2: Manage groups In the window that just came up you want to click on **Manage Groups**, click somewhere on the list and type `sudo` on your keyboard. That should bring you to the `sudo` entry like in the picture: - ![You will find the search functionality like this in many corners of Xubuntu.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/12_sudo_group.png) +![You will find the search functionality like this in many corners of Xubuntu.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/12_sudo_group.png) #### Step 3.2: Add yourself to sudo With `sudo` selected, click **Properties** and in the window that shows up tick your user's name like this: - ![No need to touch anything else.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/13_sudo_properties.png) +![No need to touch anything else.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/13_sudo_properties.png) And then click **OK**. You will be greeted with a password prompt - it's the same one you logged in with. @@ -144,9 +141,9 @@ And then click **OK**. You will be greeted with a password prompt - it's the sam Now that this is all done, you can close those windows and reboot your VM. You can open a `Terminal` window by doing Ctrl + Alt + T and type in `reboot` and then press Enter to execute the command. Alternatively, you can click on the The blue-white rodent Whisker Menu Icon , then click on the power icon in bottom right and pick **Restart**. - ![You might want to take note of other options that you see in this menu.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/14_logout.png) +![You might want to take note of other options that you see in this menu.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/14_logout.png) - ![Not the most exciting of menus, but take note of the Shut Down option.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/15_restart.png) +![Not the most exciting of menus, but take note of the Shut Down option.](https://cdn.statically.io/gh/TheOdinProject/curriculum/96d534641514fe4d62aabe2919fac3c52cb286e7/foundations/installations/installations/imgs/15_restart.png) #### Step 3.4: Test your newly gained sudo privileges @@ -176,7 +173,6 @@ Here are some tips to help you get started in a virtual environment: - We recommend going full screen (**View -> Full-screen Mode**) and forgetting about your host OS (Windows). For best performance, close all programs inside of your host OS when running your VM. - If you added additional monitors in the **Display** tab of your VM settings, with the VM running, clicking **View -> Virtual Screen 2 -> Enable**. You can run fullscreen with multiple monitors, but it may ask for more **Video Memory**, which you should have increased when adding more monitors. **Make sure you enable your Virtual Screens in windowed mode before going fullscreen, otherwise they won't work.** Upon exiting fullscreen, your secondary display may close. You can reopen it with these instructions. - #### Frequent issues/questions: - If upon trying to start the VM you only get a black screen, close and `power off` the VM, click **Settings -> Display** and make sure **Enable 3D Acceleration** is UNCHECKED, and Video memory is set to **AT LEAST 128MB**. @@ -224,7 +220,7 @@ Dual-booting provides two operating systems on your computer that you can switch ### Step 1: Download Ubuntu -First, you need to download the version of Ubuntu you want to install on your computer. Ubuntu comes in different versions ("flavors"), but we suggest the standard desktop [Ubuntu](https://releases.ubuntu.com/22.04/). If you're using an older computer, we recommend [Xubuntu](https://xubuntu.org/release/22-04/). Be sure to download the 64-bit version of [Ubuntu](https://releases.ubuntu.com/22.04/) or [Xubuntu](https://xubuntu.org/release/22-04/). If you reach the download page and are unsure about what version to choose, it is recommended that you pick the latest Long-Term Support (LTS) version (22.04 at the time of writing). You may be tempted to choose a more recent non-LTS release, but LTS releases have the advantage of guaranteed support for up to 5 years, making them more secure, stable and hence reliable. +First, you need to download the version of Ubuntu you want to install on your computer. Ubuntu comes in different versions ("flavors"), but we suggest the standard desktop [Ubuntu](https://releases.ubuntu.com/22.04/). If you're using an older computer, we recommend [Xubuntu](https://xubuntu.org/release/22-04/). Be sure to download the 64-bit version of [Ubuntu](https://releases.ubuntu.com/22.04/) or [Xubuntu](https://xubuntu.org/release/22-04/). If you reach the download page and are unsure about what version to choose, it is recommended that you pick the latest Long-Term Support (LTS) version (22.04 at the time of writing). You may be tempted to choose a more recent non-LTS release, but LTS releases have the advantage of guaranteed support for up to 5 years, making them more secure, stable and hence reliable. ### Step 2: Create a bootable flash drive @@ -273,6 +269,73 @@ Once you have successfully met both of these requirements, you should be able to +
+WSL2 + +Using WSL2 is an quick and easy way to get started with using Linux, allowing you to run a Linux distribution from within Windows. WSL2 is available on Windows 10 version 2004 and higher (Build 19041 and higher) and Windows 11. + +
+

WSL2 and Linux instructions

+Because WSL2 is a full-fledged Linux distribution, almost everything that the curriculum teaches about Linux is also applicable to WSL2. In future lessons, whenever there are instructions that differ by OS, you should follow the Linux instructions, unless the lesson includes WSL2-specific instructions. +
+ +### Step 1: Installations + +#### Step 1.1: WSL2 and Virtual Machine Platform + +In order to make WSL2 work we'll first need to ensure both `Windows Subsystem for Linux` and `Virtual Machine Platform` are enabled on your system. + +- Search for Control Panel in your applications, and open it +- Select **Programs** +- Select **Turn Windows Features on or off** (under the Programs and Features header) +- Ensure both `Windows Subsystem for Linux` and `Virtual Machine Platform` are toggled on, and if not toggle them on. +- When prompted, restart your computer + +#### Step 1.2: Installing WSL2 + +- Open PowerShell in administrator mode by searching for it in your applications, right clicking the top option, and then selecting run as administrator. You might get a prompt asking if you want to allow Windows Powershell to make changes to your device: click yes. +- Enter the following command + + ```powershell + wsl --install + ``` +- After a few minutes you'll be prompted to reboot your computer; do so. +- You should see an open Powershell window, prompting you to enter a username and a password. Your username should be lowercase, but can otherwise be whatever suits you. You'll also need to enter a new password. +- When entering your password you might notice that you aren't seeing any visual feedback. This is a standard security feature in Linux, and will also happen in all future cases where you need to enter a password. Just type your password and hit Enter. + +#### Step 1.3.1: Install Windows Terminal (Windows 10 only) + +Windows Terminal is a terminal application that lets you more easily customize and run terminals, as well as supporting multiple tabs which can each run their own different terminals. + +- [Install Window's Terminal](https://learn.microsoft.com/en-us/windows/terminal/install) by using the direct install option. + +#### Step 1.3.2: Setting WSL2 as default (Optional) + +Unless you are regularly using other terminals on your computer we recommend that you set WSL2 as the default terminal program when you open Windows Terminal. + +- Open Windows Terminal by searching for terminal in your applications. +- Click the dropdown next to the new tab button (at the top of the windows), and select Settings. +- You should see a Default Profile option with a dropdown next to it. +- In the dropdown select Ubuntu. +- Click save at the bottom of the page. + +### Step 2 Opening WSL2 + +On Windows there are three primary ways to open WSL2. + +- If you set Windows Terminal to open a Ubuntu terminal by default you can start a new WSL2 session by opening the terminal app. +- Otherwise you can open Windows Terminal, click the dropdown next to the new tab button (at the top of the windows), and select Ubuntu. +- If you search for Ubuntu in the application search bar you should see a application titled Ubuntu; open it to start a new terminal session. + +
+You might notice when you open WSL2 via Windows Terminal, you'll see a window with a different color scheme and a different icon compared to opening a terminal through Ubuntu in your applications. This is because Windows Terminal comes with a default color scheme for Ubuntu meant to emulate how a real Ubuntu terminal looks. This difference is purely cosmetic, and there is no practical difference between the two. +
+ +
+When opening your WSL2 terminal ensure that you do not see `/mnt/c` at the start of the line. `/mnt/c` is where your Windows installation lives when working within WSL2, and messing around there can have unintended consequences. +
+
+ ### 2: Google Chrome installation #### Why Google Chrome? @@ -318,7 +381,7 @@ rm google-chrome-stable_current_amd64.deb #### Step 4: Using Google Chrome -You can start chrome in two ways, +You can start chrome in two ways: - Click **Google Chrome** from the Applications menu - **Or**, use the `google-chrome` command from the terminal @@ -363,6 +426,31 @@ Chrome is going to use this terminal to output various messages and won't let yo +
+WSL2 + +#### Step 1: Download Google Chrome + +- Visit [Google Chrome download page](https://www.google.com/chrome/). +- Click **Download Chrome**. + +#### Step 2: Install Google Chrome + +- Open the **Downloads** folder. +- Double click the file **ChromeSetup.exe**. + +#### Step 3: Delete the installer file + +- Open the **Downloads** folder. +- Drag **ChromeSetup.exe** to the trash. + +#### Step 4: Using Google Chrome + +- Search for **Google Chrome** in your applications. +- Double click **Google Chrome**. + +
+ ### Additional resources This section contains helpful links to related content. It isn’t required, so consider it supplemental. diff --git a/foundations/installations/text_editors.md b/foundations/installations/text_editors.md index 2960c632e56..f075d5a48c4 100644 --- a/foundations/installations/text_editors.md +++ b/foundations/installations/text_editors.md @@ -26,7 +26,7 @@ Choose your Operating System: #### Step 1: Download VSCode - Open your **Terminal**. -- Run the following command to download the latest **VSCode** `.deb` package. +- Run the following command to download the latest **VSCode** `.deb` package: ```bash wget -O code-latest.deb 'https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64' @@ -34,7 +34,7 @@ wget -O code-latest.deb 'https://code.visualstudio.com/sha/download?build=stable #### Step 2: Install VSCode -- Enter the following command in your terminal to install the **VSCode** `.deb` package. +- Enter the following command in your terminal to install the **VSCode** `.deb` package: ```bash sudo apt install ./code-latest.deb @@ -55,7 +55,7 @@ rm code-latest.deb ``` #### Step 4: Using VSCode - + You can start VSCode in two ways, - Click **Visual Studio Code** from the Applications menu. @@ -91,6 +91,39 @@ code - Go to your **Applications** folder. - Double click **Visual Studio Code**. + + +
+WSL + +#### Step 1: Install VSCode + +- Follow the instructions for [Visual Studio Code on Windows](https://code.visualstudio.com/docs/setup/windows) to install VSCode. + +#### Step 2: Delete the installer file + +- Open **File Explorer**. +- Go to the **Downloads** folder. +- Drag **VSCodeUserSetup-{version}.exe** to the trash. + +#### Step 4: Install WSL Extension + +- Open Visual Studio Code. +- Navigate to the extensions tab. +- Find and install the [WSL extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl). + +#### Step 5: Ensure that WSL can correctly open VSCode + +- Open a new WSL terminal. +- Run the following command to open a new VSCode window. + + ```bash + code + ``` + +- After a few moments a new VSCode window should open, and VSCode should provide a notification that its opening in WSL. + +
### Assignment diff --git a/ruby_on_rails/advanced_forms_and_activerecord/installing_psql.md b/ruby_on_rails/advanced_forms_and_activerecord/installing_psql.md index 718e72682e8..b3203109574 100644 --- a/ruby_on_rails/advanced_forms_and_activerecord/installing_psql.md +++ b/ruby_on_rails/advanced_forms_and_activerecord/installing_psql.md @@ -75,6 +75,11 @@ After installation is complete, let's start the server using this command: sudo systemctl start postgresql.service ~~~ +
+

Systemctl and WSL2

+Systemctl is not supported on WSL2, and the above command won't work. Instead run sudo service postgresql start. +
+ If you are unsure about whether `postgresql` is active, it's possible to check with this command: ~~~bash