Command Line Basics (v1)

Introduction

Feeling scared of the command line? You’re not alone. We have this image of developers staring intently at a black screen with white or green text flashing across as they wildly enter incomprehensible commands to hack into the corporate mainframe (no doubt while guzzling soda and wiping neon orange Cheetos dust off their keyboard).

Other terms that refer to the Command Line Interface (CLI) are: Terminal, Shell, Command Prompt, Bash.

That black screen or window is the command line interface (CLI), where you’re able to enter commands that your computer will run for you. While there’s no need for you to reenact the scene above, working with the command line is a critical skill for you to learn as a developer. The command line is like our base of operations, from which we can launch other programs and interact with them. It has a syntax of its own to learn, but since you’ll be entering the same commands dozens of times, you’ll quickly pick up the commands you need most.

In this introductory lesson to the command line, you’ll learn how to navigate around your computer and how to manipulate files and directories (also known as folders) directly from the comfort of the command line. You’ll soon see that this isn’t as difficult as you may think. The commands you will learn in this lesson are very straightforward, so don’t be intimidated by the prospect of using the command line for the first time.

Test Drive Your Terminal

Open a terminal on your computer.

  • Windows: Press Windows+s to open up the “Start” box. Type “GitBash” and then click “OK” to open the Git Bash Command Prompt.

Launch GitBash

  • Linux: open the programs menu and search for "Terminal". You can also open the terminal by pressing CTRL + ALT + T on your keyboard.
  • MacOS: Open your Applications > Utilities folder and find "Terminal".

Before we do anything, take a look at the following text:

$ whoami

whoami

This is a terminal command because it begins with a $. The $ is saying "Hey! Enter what follows in your terminal." This means that we must exclude the $ when entering any command. In the example above, we would only enter whoami in our terminal. This is a common indicator so make sure that you aren’t entering $ before a command. Now that you are aware of what $ does, take your terminal for a test run! Make sure your terminal is open, type the command mentioned above, and press enter on your keyboard.

It returns your username. Cool!

Why learn this now?

You will be making heavy use of the command line throughout this curriculum, and the upcoming installations project will require you to install many different software programs using the command line. Additionally, you will primarily be using Git within the command line (more on this later). As part of the bigger picture, you may well be using the command line on a daily basis in your career as a software developer, making it an indispensable skill in your toolset.

Learning Objectives

By the end of this lesson, you should be able to do the following:

  • Describe what the command line is.
  • Open the command line on your computer.
  • Use the command line to navigate directories and display directory contents.
  • Use the command line to create a new directory and a new file.
  • Use the command line to rename or destroy a directory and a file.

Practice

  1. Before diving into the command line lesson, you’ll want to know how to create a file. You can do so with the touch command.
  • Open your terminal and enter ls (the l is a lowercase L). ls will show you the files and folders in the current directory (or will show nothing if the current directory is empty).
ls
  • Create a file called test.txt by entering this in your terminal: touch test.txt.
touch test.txt
  • Now enter ls once again. You should see test.txt listed in the output. You can also create more than one file at once using the touch command.

  • Enter touch index.html script.js style.css and press the enter.

touch index.html script.js style.css
  • Then enter ls once more. You should see the files in the output. Here is a small way that the terminal reveals its power. How long would it have take to create all three of those files with your mouse? Thanks, terminal!

Conquering the Command Line

Now it’s time to take a break for 10 to 15 minutes, and then start reading the 1st chapter of Conquering the Command Line.

Serve yourself a hot cup of tea or coffee and dedicate the next few hours to discovering and using the Command Line. Make sure to test the commands mentioned in the book on your local terminal.

Read & Execute: Chapter 1 of Conquering the Command Line.

Use the Command Line Like a Pro

There’s something important that you need to know about programmers. Programmers are lazy. Like, really lazy. If they are forced to do something over and over again, odds are good that they’ll figure out a way to automate it instead. The good news is that you get to benefit from the many shortcuts they’ve created along the way. It’s time to learn how to use the command line like a pro (which is to say, in a really lazy way).

Watch the next video to learn about common terminal commands and shortcuts and then move on to the next section and read about the capabilities of the command line in more detail.

Duration: 12 minutes

First, you might have already noticed that copying and pasting inside the command line doesn’t work the way that you’d expect. When you’re inside the command line, you’ll need to use Ctrl+Shift+C(Mac: Cmd+C) to copy and Ctrl+Shift+V(Mac: Cmd+V) to paste. For example, to copy and paste commands from your browser into the command line, you’ll highlight the command text and use Ctrl+C as usual and then paste it in your terminal using Ctrl+Shift+V. Test it out!

Second, you need to learn about tab completion. Seriously, this tip will save you so much time and frustration. Let’s say that you’re in the command line and that you need to move into a folder that’s far away, something like ~/Documents/FrontEndDevelopment/Web-Development-101/javascript/calculator/. That’s a long command to type out, and everything needs to be exactly right in order for it to work. Nope, we’re way too lazy for that! Basically, by hitting Tab, the command line will automatically complete commands that you’ve started typing once there’s only one option. For example, it’s pretty common to have a Documents folder and a Downloads folder in the home directory. If you’ve typed cd D and then press Tab, the command line will let you know that it’s not sure which one you want by showing you the different options that match what you’ve typed so far:

$ cd D
Documents/ Downloads/
$ cd D

But once you’ve typed in a little bit more, it will complete the name for you, making it possible to write out the full file path above by typing as little as cd Doc[tab]O[tab]W[tab]j[tab]cal[tab] (depending on what other folders exist on your computer). Test it out, and get comfortable with how this works. You’re gonna love it.

Third, there’s a really handy shortcut for opening everything within a project directory: . Once you’ve installed a text editor, you can use this shortcut to open up an entire project and all of its files in one go. For example, if you have VS Code installed, you can cd into the project directory and then type code . (with the period) to open up all of the project files. This shortcut is also commonly used with Git (which is covered in detail later on) with commands like git add . to add all of the files inside of a directory into Git’s staging area.

Exercise

In this exercise, you will practice creating files and directories and deleting them. You’ll need to enter the commands for this exercise in your terminal. If you can’t recall how to open a terminal, scroll up for a reminder.

  1. Create a new directory in your home directory with the name test.
  2. Navigate to the test directory.
  3. Create a new file called test.txt. Hint: use the touch or echo command.
  4. Navigate back out of the test directory.
  5. Delete the test directory.

That’s it–you’re done with command line basics! If you commit to doing most things from the command line from here on out, these commands will become second nature to you. Moving and copying files is much more efficiently done through the command line, even if it feels like more of a hassle at this point.

Another great resource is this video made by one of our students Kiuri Waddington Negrao that shows how to create a Bash script that initializes a project directory, creates some basic boilerplate for web development and initializes it as a git repository. All this running on a Windows machine:

Duration: 11 minutes

Additional Resources

Bash aliases are essentially shortcuts that can save you from having to remember long commands and eliminate a great deal of typing when you are working on the command line.

  • The online book Learn Enough Command Line to Be Dangerous is a great resource for mastering the command line. Chapter 1 is free and provides a good introduction to command line tools. The rest of the book is not free and goes into more depth than you really need at this point, but feel free to purchase and read the rest of the book if you like.

  • ExplainShell.com is a great resource for if you want to deconstruct a particularly strange shell command or learn how Bash works through guess-and-check.

  • Unix/Linux Command Cheat Sheet contains a list of important commands that you can refer to regularly as you become familiar with using Linux. You can print it out so you can have a physical copy with you when you’re not at your computer.

  • Command Line Flashcards by flashcards.github.io.

  • Video Series from LearnLinxTv contains 24 videos explaining the basics of the command line. Videos are brief enough for beginners but, at the same time, are detailed enough to get started and light your inner curiosity.

Knowledge Check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, clicking the small arrow to the left of the question will reveal the answers.

What is the command line?
    • The command line is a way to interact with the computer using specific words called “commands”.
How do you open the command line on your computer?
    • On Windows: Press Windows+s to open up the “Start” box. Type “GitBash” and then click “OK” to open the Git Bash Command Prompt.
    • On Linux: Open the programs menu and search for “Terminal”. You can also open the terminal by pressing CTRL + ALT + T.
    • On Mac: Open your applications folder and find “Terminal”.
How can you navigate to a particular directory?
    • You can use the cd command to change directories.
Where will cd on its own navigate you to?
    • On Linux and Mac, it will navigate you home.
Where will cd .. navigate you to?
    • It will navigate you “up” one folder, that is, into the parent of the current directory.
How do you display the name of the directory you are currently in?
    • On Linux and Mac, use the pwd (print working directory) command.
How do you display the contents of the directory you are currently in?
    • On Linux and Mac, use the ls command. Use ls -l to display the files in a list.
How do you create a new directory?
    • You can do this using the mkdir command.
How do you create a new file?
    • On Linux and Mac, use the touch command, e.g., touch new-file.txt.
How do you destroy a directory or file?
    • On Linux and Mac, use the rm command. To destroy folders, use rm -r or rmdir.
How do you rename a directory or file?
  • On Linux and Mac, use the mv command, e.g., mv folder/old-file.txt folder/new-file.txt.
    • Material based on Erik Trautman | The Odin Project
      LOOKING FOR HELP?

      When looking for help, try doing so in the following order:

      • Did you try everything you could?
      • Did you read the documentation?
      • Did you Google for it?
      • Did you post your question on Slack/Forum?
      • Did you ask your fellow students for help?
      • Did you ask your Mentors for help?
      • Did you leave a comment on the comments section of this page?
      • Did you ask your Instructor for help?
        • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
        • Is it urgent? Did you try reaching him on Slack

      UPDATED: 22.04.2021

      CONTRIBUTORS:

      Code Editors

      Introduction

      A code editor is by far the most used developer tool regardless of what type of developer you are. A good code editor can help you write better code with real-time code checking, syntax highlighting, and automatic formatting.

      Why can’t I use Microsoft Word?

      Rich text editors, such as Microsoft Word and Libre-Office Writer, are great for writing a paper, but the features that make them good at creating nicely formatted documents make them unsuitable for writing code. A document created with these rich text editors have more than just text embedded in their files. These files also contain information on how to display the text on the screen and data on how to display graphics embedded into the document. In contrast, plain text editors, such as VSCode and Sublime Text, don’t save any additional information. Saving only the text allows other programs, like Node’s interpreter, to read and execute the file as code.

      Code Editors

      You can think of code editors as specialized web development tools. They are highly customizable and offer many features that will make your life easier. There is nothing worse than spending 2 hours trying to figure out why your program isn’t working only to realize that you missed a closing bracket. Plugins, syntax highlighting, auto-closing of brackets and braces, and linting are just a few of the benefits of using a code editor. There are many text editors out there to choose from, but we suggest starting with VSCode.

      VSCode is an excellent free code editor. It has outstanding add-on support and great Git integration. VSCode is the most popular code editor among students and moderators, so support is easy to find in the community.

      Which editor you use is generally a matter of preference, but for the purposes of this course, we are going to assume you’re using VSCode, mainly because it’s free, it’s easy to use, and it works pretty much the same on every operating system. If you want to use something else, do it. However, using something other than VSCode may make it more difficult to get help in the chat room.

      As a reminder, if you’re using a virtual machine, you should install your text editor of choice on your VM. You’re welcome to also install it on your host (i.e., your Windows main OS), but you’ll want to be sure that you have this critical tool inside your VM.

      Opening VSCode from the Command Line

      On Windows and Linux, you can open VSCode from the command line by typing code, and you can open folders or files by adding the name of the location after it: code my_first_app/.

      MacOS Users:

      MacOS can do this too, but you need to set it up. 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.

      Regarding Security Warning:

      A message may show, warning the user that VSCode is not trusted software. This is an expected message. VSCode can be trusted, therefore it is safe to ignore this warning.

      WSL Users:

      Although you just installed Ubuntu on your computer, you should still install the Windows version of the code editor you choose. You will edit the files in your Projects directory with the code editor, and WSL will be able to read these files. If you are using VSCode, be sure to install the "Remote – WSL" extension when prompted. This extension will allow you to directly access your Linux files. Once installed, select the green icon in the lower left corner to connect to WSL.

      Material based on Erik Trautman | The Odin Project
      LOOKING FOR HELP?

      When looking for help, try doing so in the following order:

      • Did you try everything you could?
      • Did you read the documentation?
      • Did you Google for it?
      • Did you post your question on Slack/Forum?
      • Did you ask your fellow students for help?
      • Did you ask your Mentors for help?
      • Did you leave a comment on the comments section of this page?
      • Did you ask your Instructor for help?
        • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
        • Is it urgent? Did you try reaching him on Slack

      UPDATED: 25.10.2020

      Installation Overview (v1)

      Introduction

      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 course 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. 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:

      • installing the operating system (OS) of your choice;
      • installing a code editor;
      • creating an SSH key (a personal "password" that will identify you to GitHub, Heroku, and many other sites you’ll be using); and

      At the end of this section, you’ll be up and running with many of the tools you need to write and run code! It may seem like a lot of steps, but we’ll get through it as painlessly as possible together! If anything goes wrong, remember to use these steps:

      • Parse the terminal output for the actual error.
      • Google, Google, Google.
      • Never be afraid to ask for help!

      OS Options

      "Woah, woah, woah! I like my OS just fine the way it is!"

      Don’t worry! We’re not asking you to get rid of what you’re comfortable using. You’ve probably learned a lot of tips and tricks for your favorite OS and don’t want to lose everything you have on your computer. However, most OSs are developed with non-technical folks in mind, so they hide or make it difficult to use many of the languages and frameworks we’ll need to install. Having to work around these difficulties causes many new developers to give up before they’ve even started their journey to full-stack nirvana.

      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.

      Mac

      If you’re using a Mac, you’re in great shape. Most professional developers rely on Unix-based systems for their coding. By installing just a few programs, you will be up and running with your education in no time!

      Linux

      Linux is a free and open-source operating system that works well with all programming languages. Most development tools are written to work natively with Linux. Your tools will likely be updated more often, have more information available for troubleshooting, and just plain run better on Linux. We’ll be using Ubuntu, one of the most popular and user-friendly distributions available, or the lighter weight alternative Xubuntu. If you don’t use a Mac, we recommend that you use Linux. It’s that simple.

      Virtual Machines and Dual-Boots

      IMPORTANT: Setting up a Virtual Machine or Dual-boots on your computer is an advanced process. Make sure to proceed to these steps, only if your instructor told you to. If you are planning to go through the process yourself, make sure you’ve discussed it with your instructor.

      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 on Virtual Machines to achieve an overview of how they work.
      • If you need further clarity, read this article for more information on virtual machines.

      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 the risk is very low. 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 understated. 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 10 with the Subsystem for Linux

      You’re probably familiar with Windows for one reason or another. For many people, it is their OS of choice. Windows is easy to use and comes pre-installed on most computers. Unfortunately, some languages, such as Ruby, were created with the assumption that they’ll be used on Unix-based (Mac or Linux) systems and do not easily run on Windows.

      It is possible to develop with the Windows Subsystem for Linux (WSL), but it is highly discouraged. If you go this route, you’ll end up spending many hours on Google trying to fix the many problems you’ll encounter. For your sanity, we recommend installing a virtual machine instead of using WSL.

      Online Editors

      Finally, there are a variety of online code sandboxes that can be quite handy when you’re away from your main system or prototyping some code before committing it.

      These sites can be used to complete small exercises or to sketch out a concept you don’t quite understand. However, you shouldn’t use these sites as your main development environment.

      Material based on Erik Trautman | The Odin Project
      LOOKING FOR HELP?

      When looking for help, try doing so in the following order:

      • Did you try everything you could?
      • Did you read the documentation?
      • Did you Google for it?
      • Did you post your question on Slack/Forum?
      • Did you ask your fellow students for help?
      • Did you ask your Mentors for help?
      • Did you leave a comment on the comments section of this page?
      • Did you ask your Instructor for help?
        • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
        • Is it urgent? Did you try reaching him on Slack

      UPDATED: 25.10.2020

      Visual Studio Code

      Getting to know the most popular Code Editor

      Before diving into the world of Web development, it’s always an important step to get to know our tools.

      Since, Visual Studio Code is the editor of choice for this course, take some time to familiarize yourself with the software that will help you build software.

      Watch the following video, but try pausing once in a while and test the features described in the video in your version of VSCode.

      Duration: Approx. 60~90 minutes

      Live Server Extension Set Up

      At this point you should be familiar with VSCode, be able to install and uninstall Extensions, configure various aspects and features of the application and work with code files. Also, you should have the Live Server extension installed on VSCode.

      Take a look at the next video, in order to understand how you can work with the Live Server extension as we are going to use this setup a lot in the following lessons.

      Duration: 2 minutes


      Tip: If you are looking for a quick and easy way to position your application windows next to each other, for example having VSCode taking up the left 50% of your screen and the Browser taking up the other right half 50%, you can use some of the shortcuts presented in the videos below (Windows 10).

      Launching from the command line (Mac)

      Read the following guide on how to setup launching VSCode from the command line on a Mac.

      Additional Resources

      Troubleshooting

      For resolving issues regarding the Live Server, you can start your search from the repository’s issues page


      QUESTION: The point of the extension "Live Server" in the VSCode is not for us to refresh the webpage everytime we make changes, right?

      Live Server refreshes the page automatically after each save.

      TIP: If you select "Autosave" from the "File" menu, you can just code and VSCode will automatically save the file as you type while Live Server will automatically refresh the browser for you.


      QUESTION: I save my changes in my code but then I have to refresh the webpage in order to see the changes and from the video tutorial I got the idea that it refreshes automatically. I created a folder inside the folder. The file from the first folder can be updated automatically, but the file in the second folder, the folder that belongs to the first one, cannot be updated.

      the essay.html changes automatically and belongs to the initial folder "ASSIGN" . the file.html doesn’t and belongs to the folder "new"

      SOLUTION:

      The problem was the file that was created in a folder within the vscode, in my case that folder was "NEW". The folder "ASSIGN" was created in my desktop and then I added it to vscode workspace and the files inside work fine.

      LOOKING FOR HELP?

      When looking for help, try doing so in the following order:

      • Did you try everything you could?
      • Did you read the documentation?
      • Did you Google for it?
      • Did you post your question on Slack/Forum?
      • Did you ask your fellow students for help?
      • Did you ask your Mentors for help?
      • Did you leave a comment on the comments section of this page?
      • Did you ask your Instructor for help?
        • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
        • Is it urgent? Did you try reaching him on Slack

      UPDATED: 26.03.2021

      CONTRIBUTORS:

      Setting up Ubuntu/Windows Dual-Boot


      IMPORTANT: You can skip this lesson.

      Read this entire section before starting

      Dual-booting provides two operating systems on your computer that you can switch between with a simple reboot. One OS will not modify the other unless you explicitly tell it to do so. Before you continue, be sure to back up any important data and to have a way to ask for help. If you get lost, scared, or stuck, we’re here to help in the Slack forum.

      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 Ubuntu. If you’re using an older computer, we recommend Xubuntu. Be sure to download the 64-bit version of Ubuntu or Xubuntu.

      Step 2: Create a Bootable Flash Drive

      Next, follow this guide to create a bootable flash drive so that you can install Ubuntu on your hard drive. If you don’t have a flash drive, you can also use a CD or DVD.

      Note: You can use this method to try out different flavors of Ubuntu if you’d like. These images allow you to try out different flavors without committing to an installation. Be aware that running the OS from a flash drive will cause the OS to be slow and can decrease the life of your flash drive.

      Step 3: Install Ubuntu

      Step 3.1: Boot from the Flash Drive

      First, you need to boot Ubuntu from your flash drive. The exact steps may vary, but in general, you will need to do the following:

      • Insert the flash drive into the computer.
      • Reboot the computer.
      • Select the flash drive as the bootable device instead of the hard drive.

      For example, on a Dell computer, you would need to plug in the flash drive, reboot the computer, and press the F12 key while the computer is first booting up to bring up the boot menu. From there, you can select to boot from the flash drive. Your computer may not be exactly the same, but Google can help you figure it out.

      Step 3.2: Install Ubuntu

      If you would like to test out the version of Ubuntu on the flash drive, click ‘Try me’. When you have found a flavor of Ubuntu you like, click ‘Install’ and continue to the next step.

      Installing Ubuntu is where the real changes start happening on your computer. The default settings are mostly perfect, but be sure to "Install Ubuntu alongside Windows" and change the allocated disk space allowed for Ubuntu to 30 GB (or more if you can).

      For step-by-step instructions, please follow this installation guide from the creators of Ubuntu.

      A note to those who are wondering why they’re being asked to install an entire new operating system

      Why is everyone ‘forced’ to switch to Linux or macOS for development? Are there no web developers out there who use Windows as their main operating system?

      The answer to that question is: well, not that many. One of the reasons is that Ruby (on Rails) and Node.js, popular backend technologies taught 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. And while Apple’s operating systems have all included the XNU kernel, originally based on the FreeBSD flavor of UNIX since the transition from System 9 to Mac OS X in 2001, Microsoft has only recently commited to embracing open source and providing more support for the way people approach web development today.

      One of the biggest features added in Windows 10 was the Windows Subsystem for Linux (WSL), which is a Linux command line within Windows. Setting up a development environment inside WSL is not beginner friendly, though, which is why we choose not to recommend and/or support this approach. All instructions you encounter here will assume you’re running either MacOS or Linux. Using WSL with these instructions may cause problems we are not able to help you resolve.

      We do have great support for Linux/MacOS if you get stuck, so please give it a shot!

      LOOKING FOR HELP?

      When looking for help, try doing so in the following order:

      • Did you try everything you could?
      • Did you read the documentation?
      • Did you Google for it?
      • Did you post your question on Slack/Forum?
      • Did you ask your fellow students for help?
      • Did you ask your Mentors for help?
      • Did you leave a comment on the comments section of this page?
      • Did you ask your Instructor for help?
        • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
        • Is it urgent? Did you try reaching him on Slack

      UPDATED: 21.12.2020

      Setting up a Virtual Machine


      IMPORTANT: You can skip this lesson.

      If you are already using MacOS or Ubuntu, you can skip this section. Otherwise, follow the installation instructions.

      Virtual Machine

      Installing a Virtual Machine (VM) is the easiest and most reliable way to get started creating an environment for web development. A VM is an entire computer emulation that runs inside your current Operating System (OS), like Windows. The main drawback of a VM is that it can be slow because you’re essentially running two computers at the same time. We’ll do a few things to improve its performance.

      Step 1: Download VirtualBox and Xubuntu

      Installing a VM is a simple process. This guide uses Oracle’s VirtualBox program to create and run the VM. This program is open-source, free, and simple. What more can you ask for? Now, let’s make sure we have everything downloaded and ready for installation.

      IMPORTANT

      Once you have completed these instructions, you are expected to work entirely in the VM. Maximize the window, add more virtual monitors if you have them, fire up the Internet Browser in the Whisker Menu Whisker Menu on the top left of the desktop. You should not be using anything outside of the VM while working on The Odin Project. If you feel like you have a good understanding after using the VM for a while, and or want to improve your experience, we recommend dual-booting Ubuntu, which there are instructions for below.

      Step 1.1: Download VirtualBox

      Click here and download VirtualBox for Windows hosts.

      Step 1.2: Download Xubuntu

      There are thousands of distributions of Linux out there, but Ubuntu is undoubtedly one of the most popular and user friendly. When installing Linux on a VM, we recommend downloading Xubuntu 18.04. 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.

      Step 2: Install VirtualBox and set up Xubuntu

      Step 2.1: Install VirtualBox

      Installing VirtualBox is very straightforward. It doesn’t require much technical knowledge and is the same process as installing any other program on your Windows computer. Double clicking the downloaded VirtualBox file will start the installation process. During the installation, you’ll be presented with various options. Leave them in their default state unless you are certain about their behavior. As the software installs, the progress bar might appear to be stuck; just wait for it to finish.

      Step 2.2: Prepare VirtualBox for Xubuntu

      Now that you have VirtualBox installed, launch the program. Once open, you should see the start screen.

      A new start. The VirtualBox start screen

      Click on the “New” button to create a virtual operating system. Give it a name of “Xubuntu”, leave the “Machine Folder” as is, set the “Type” to “Linux” and be sure “Version” is set to “Ubuntu (64-bit)”. Continue by pressing “Next”, and choose the following options in the next steps:

      The VirtualBox Create Virtual Machine window. Xubuntu should make the Version be Ubuntu (64-bit) automatically.

      1. Memory size: Use 2048 MB or more if possible. Ideally, this amount should be about half of your computer’s maximum memory. For example, if you have 8 GB of RAM, allocate 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 click here.

      The VirtualBox RAM window. Please allow me to Google that for you.

      1. Hard disk: Click “Create a virtual hard disk now”.

      The VirtualBox Create Hard Disk window 1. This is the default selection.

      1. Hard disk file type: Choose the VDI (VirtualBox disk image) option.

      The VirtualBox Create Virtual Hard Disk window 2

      1. Storage on physical hard disk: “Dynamically allocated”.

      The VirtualBox Create Virtual Hard Disk window 3

      1. File location and size: We recommend at least 20 GB for the virtual hard disk.

      The VirtualBox Create Virtual Hard Disk window 4

      After completing the last step, click the “Create” button. Your new virtual OS should now appear in the menu. With Xubuntu selected, click on the "Settings" button on the navigation bar, highlighted in red below.

      The VirtualBox Home screen with Xubuntu

      Click on the “System” tab and then the “Processor” tab. Increase the Processor(s) to 2. If this screen prevents you from increasing processors, you likely need to enable virtualization in your computer’s BIOS/UEFI settings. If you have a single core processor, you will not be able to change this setting.

      The Xubuntu System Settings Processor window

      If you have more than one monitor, you can create additional monitors by increasing the "Monitor Count" attribute in the "Display" tab. Please be sure to increase the "Video Memory" slider until it is in the green. All other settings should remain default.

      The Xubuntu System Settings Display window

      With all that complete, click "OK" to save the changes.

      You cannot install Xubuntu without mounting the ISO you downloaded earlier. We will do that now. Click on the section labeled [Optical Drive] Empty to the right of the text labeled IDE Secondary Master under Storage at the main VirtualBox screen, while Xubuntu is selected. This will open up a dropdown menu, click Choose/Create a disk image….

      The VirtualBox Home Screen again

      The next window that opens, click on the Blue Circle with the Green Plus labeled Add, and locate your Xubuntu ISO file you downloaded earlier. Choose the ISO and click open.

      The Xubuntu - Opticial Disk Selector screen

      You should now see the ISO on the Disk Selector screen. Click it and hit the Choose button at the bottom.

      The Xubuntu - Opticial Disk Selector screen but with an ISO loaded

      You can now start the VM by right clicking on the icon in the menu and by clicking the large "Start" arrow at the top.

      When the VM starts up, you’ll be asked to install Xubuntu. All of the default options can be left alone, including the Installation type ("Erase disk and install Ubuntu"). It may sound dangerous, but the VM can only see the "Hard Drive" of the VM. This is the beauty of VMs: the ability to separate the physical space of your computer across many VMs. While installing, be sure to take note of the password and username you chose, we will need these later.

      The rest of the installation is pretty straightforward, but if you have any questions, you can find Ubuntu’s official installation guide for Ubuntu here.

      Step 3: Install and Enable Guest Additions

      Your regular operating system (Windows in this case) is called the Host, and all other operating systems that run as VMs are called Guests. To make working in your Guest OS easier, you need to install Guest Additions. It adds useful functionality to the Guest OS, such as full-screen guest mode.

      While your VM is running, do the following steps:

      1. Click the Whisker Menu Whisker Menu Icon on the top left of the desktop.
      2. Type Software Updater in the text field that opens up and click on the item with the same name.
      3. Install all available updates. If there are no available updates, move on to Step 5.
      4. If the Software Updater is stuck waiting for an unattended upgrade to finish, reboot the VM and start again from Step 1.
      5. Open a terminal with ctrl + alt + t or opening the Whisker Menu and typing in Terminal (the shortcut is obviously faster).
      6. Copy and paste this into the terminal: sudo apt install linux-headers-$(uname -r) build-essential dkms. Enter your password when it asks you to. (note: Your password will not be visible in the terminal. This is a security feature to protect your password. Press Enter when done.)
      7. If you get the following errors: Unable to locate package build-essential and Unable to locate package dkms, paste in the following: sudo apt-get install build-essential and enter your password. Otherwise, move on to Step 8.
      8. Type Y when it asks you to and let it finish installing. Close the terminal when it is finished.
      9. Click Devices on the VM toolbar -> Insert Guest additions CD image in the menu bar.
      10. Wait for the CD image to mount, it will show the CD on the desktop as solid, not transparent, and a window will show on the top right of the VM screen saying it was successfully mounted.
      11. Double-click on the CD icon on the VM desktop.
      12. In the new window that opens, right click on the white-space or any file/folder, and click Open Terminal Here.
      13. In the newly opened terminal window, paste sudo ./VBoxLinuxAdditions.run and hit enter. You will know it is finished when it asks you to close the window.
      14. Once it finishes, close the terminal and the CD folder.
      15. Right-click CD on the VM desktop and click Eject Volume. It will not eject if the CD folder is open.
      16. Reboot your VM (which you can do by typing reboot and hitting enter in a terminal).
      17. You can now maximize the VM window, use the shared clipboard, and create additional displays, among many other useful features. These options are available on the VM toolbar under View and Device.

      NOTE:

      • 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.
      • If you receive an error when trying to mount the Guest Additions CD image ("Unable to insert the virtual optical disk"), please reboot your host (Windows/OSX) operating system. Afterwards, ensure that there is no image file mounted in both Virtual Box as well as in the file system of the VM.

      Step 4: Understand Your New VM

      Here are some tips to help you get started in a virtual environment:

      • All your work should happen in the VM. You will install everything you need for coding, including your text editor, Ruby, and Rails inside the VM. The Xubuntu installation inside of your VM also comes with a web browser pre-installed.

      • To install software on your VM, you will follow the Ubuntu installation instructions from inside the Xubuntu VM.

      • All of the development that you’ll do related to TOP will be done in the VM.

      • We recommend going full screen (Edit > 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. Upon exiting fullscreen, your secondary display may close. You can reopen it with these instructions.


      Material based on Erik Trautman | The Odin Project
      LOOKING FOR HELP?

      When looking for help, try doing so in the following order:

      • Did you try everything you could?
      • Did you read the documentation?
      • Did you Google for it?
      • Did you post your question on Slack/Forum?
      • Did you ask your fellow students for help?
      • Did you ask your Mentors for help?
      • Did you leave a comment on the comments section of this page?
      • Did you ask your Instructor for help?
        • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
        • Is it urgent? Did you try reaching him on Slack

      UPDATED: 21.12.2020

      Installing Node

      Introduction

      Node is a JavaScript interpreter that doesn’t run in the browser, there are many tools that require this to be installed. Testing frameworks and bundlers are two of many.

      We’re going to install it using nvm (Node Version Manager), because it makes it easy to change node versions and upgrade node. There is another tool called npm (Node Package Manager) that you will use later to install the various libraries and tools used in javascript environment. It can be easy to confuse these two so read carefully!

      Node is also very easy to install using nvm, so this should go quickly 🙂

      Step 0: Prerequisites For Linux

      To install NVM properly, you’ll need curl. Simply run the command below:

      sudo apt install curl
      

      Step 1: Downloading and Installing nvm

      Step 1.1: Download and Install

      Simply run this command:

      curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
      

      This will install nvm

      Step 1.2: Initializing nvm

      In the terminal there should be some directions on how to initialize nvm, if not, (or you don’t feel like copying from the terminal), run these commands:

      export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
      [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
      

      You can verify nvm is installed by running the command:

      command -v nvm
      

      if this returns nvm: command not found close the terminal and re-open it.

      On OS X you may continue to see the same message. If this happens, open your .bash_profile and add the following line of code:

      source ~/.bashrc
      

      For more information, view NVM’s github documentation.

      Then try running the above command again. If you get anything else, you’re good to continue!

      Step 2: Installing Node

      Now that we have nvm installed: we can install Node.

      Step 2.1: Installation

      Run:

      nvm install node
      

      This will install the most recent version of node, and you’ll see a lot of output in the terminal. If everything worked, you should see something similar to this somewhere in the lines of output:

      Downloading and installing node v12.6.0...
      

      If not, close the terminal, re-open it and run nvm install node again.

      Step 2.2: Setting the node Version

      We need to tell nvm which version of Node to use when we run the node command. It’s easy, just run the following command:

      nvm use node
      

      Now when you run node -v you should see v11.8.0 or something similar.

      If you see that, you have successfully installed node!

      Material based on Erik Trautman | The Odin Project

      Command Line Basics

      Introduction

      Think of an image: Developers staring at a black screen with white or green text flashing, writing code and trying to hack into the corporate frame. Does this image sounds familiar?

      That black screen is the command line interface (CLI).

      Other terms that refer to the Command Line Interface (CLI) are: Terminal, Shell, Command Prompt, Bash.

      In this CLI is where you enter the commands that the computer will run. Working with the command line is essential skill to learn as a developer. It is the base of our operations meaning that it is from where we can launch other programs and interact with them. The command line has its own syntax, but since you are going to enter the same commands over and over again, then it is a matter of time to learn the most important ones and the ones you will need most.

      In this lesson you will learn some basic operations we can do from the command line such as navigate around the computer and manipulate files and directories (also known as folders). The commands that you will learn in this lesson are very simple and straightforward so there is nothing to worry about.

      Write Your First Command in the Terminal

      Open a terminal on your computer.

      • Windows: Press Windows+s to open up the “Start” box. Type “GitBash” and then click “OK” to open the Git Bash Command Prompt.

      Launch GitBash

      • Linux: open the programs menu and search for "Terminal". You can also open the terminal by pressing CTRL + ALT + T on your keyboard.
      • MacOS: Open your Applications > Utilities folder and find "Terminal".

      Before we do anything, take a look at the following text:

      $ whoami
      

      whoami

      Every terminal command starts with a $. This symbol tells our computer to execute what comes after the $. This means that we must excluded it when we enter a command. So in the example above we will only type whoami in our terminal. So open your terminal, type whoami and press enter on your keyboard.

      It returns your username. Cool you have just wrote your first command.

      Why should you learn the terminal now?

      Throughout this curriculum we will use the command line very often. We will going to install various software using the command line and you will use Git within the command line. In addition in your career as a software developer you will use the command line on a daily basis, and thus learning that skill early on it will be an asset.

      Learning Objectives

      • Understand what the command line is.
      • Open the command line on your computer and use it to:
        • navigate directories and display directory contents.
        • create a new directory and a new file.
        • rename or destroy a directory and a file.

      Practice

      1. First let’s see how to create a file using the command line. You can do so with the touch command.
      • Open your terminal and enter ls (the l is a lowercase L). The ls command will show you the files and folders in the current directory (or will show nothing if the current directory is empty).
      ls
      
      • Create a file called test.txt by entering this in your terminal: touch test.txt.
      touch test.txt
      
      • Now enter ls once again. You should see test.txt listed in the output. You can also create more than one file at once using the touch command.

      • Enter touch index.html script.js style.css and press the enter.

      touch index.html script.js style.css
      
      • Then enter ls once more. You should see the files in the output.

      This is a small indication of how powerful the terminal is. It would have taken much more time if we had created those files with the mouse. Thanks, terminal!

      Conquering the Command Line

      Now it’s time to take a break for 10 to 15 minutes, and then start reading the 1st chapter of Conquering the Command Line.

      Serve yourself a hot cup of tea or coffee and dedicate the next few hours to discovering and using the Command Line. Make sure to test the commands mentioned in the book on your local terminal.

      Read & Execute: Chapter 1 of Conquering the Command Line.

      Advanced Command Line Topics

      Programmers in general are lazy. If they are using the same command over and over again they will find a way to automate it. For this reason there are a lot of shortcuts out there, that they have been created from developers, that you can use and benefit from.

      Watch the next video to learn about common terminal commands and shortcuts and then move on to the next section and read about the capabilities of the command line in more detail.

      Duration: 12 minutes

      One problem that you might already have encountered is that copying and pasting inside the terminal doesn’t work as usual. In order to copy and paste something you need to use Ctrl+Shift+C(Mac: Cmd+C) to copy and Ctrl+Shift+V(Mac: Cmd+V) to paste. You can test it by highlighting a command text from the browser, use Ctrl+C to copy it and then use Ctrl+Shift+V to paste it in the terminal.

      Another useful tip is the tab completion. This tip will save you a lot of time since it helps you to navigate quicker to a folder. For example let’s say you need to move to a folder that is located in ~/Documents/FrontEndDevelopment/Web-Development-101/javascript/calculator/. As you see this is a long command to type out and thus by hitting Tab, the command line will automatically complete commands as you are typing them, once there’s only one option.

      Let’s see an example: If you type cd D then you probably have two folders the Documents folder and the Downloads folder. So the command line will show you these two options.

      $ cd D
      Documents/ Downloads/
      $ cd D
      

      However if you continue typing a little more you will be able to write the full path with just typing cd Doc[tab]O[tab]W[tab]j[tab]cal[tab]. Just test it out and see how it works.

      There is also another handy shortcut the .. This command will help you open every file within a project. For example if you have VSCode installed you can type cd into the project directory and then type code . (with the period) to open up all of the project files. In addition this shortcut is also used with Git. For example we use the git add . command to add all the files inside of a directory into Git’s staging area.

      Class Exercise

      Now it’s time for an exercise. You will create directories and folders and then delete them. You will create those files using the terminal.

      1. Create a new directory in your home directory with the name my-directory.
      2. Navigate to the my-directory directory.
      3. Create a new file called my-file.txt.
      4. Navigate back out of the my-directory directory.
      5. Delete the my-directory directory.

      If you have successfully done those steps you have understood the basics of the command line. Keep in mind that is more efficient to move and copy files through the command line. As you continue using the command line more often then you will get used to it and you will feel more comfortable.

      Additional Resources

      In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

      A great resource is this video made by one of our students Kiuri Waddington Negrao that shows how to create a Bash script that initializes a project directory, creates some basic boilerplate for web development and initializes it as a git repository. All this running on a Windows machine:

      Duration: 11 minutes

      Bash aliases are essentially shortcuts that can save you from having to remember long commands and eliminate a great deal of typing when you are working on the command line.

      • The online book Learn Enough Command Line to Be Dangerous is a great resource for mastering the command line. Chapter 1 is free and provides a good introduction to command line tools. The rest of the book is not free and goes into more depth than you really need at this point, but feel free to purchase and read the rest of the book if you like.

      • ExplainShell.com is a great resource for if you want to deconstruct a particularly strange shell command or learn how Bash works through guess-and-check.

      • Unix/Linux Command Cheat Sheet contains a list of important commands that you can refer to regularly as you become familiar with using Linux. You can print it out so you can have a physical copy with you when you’re not at your computer.

      • Command Line Flashcards by flashcards.github.io.

      • Video Series from LearnLinxTv contains 24 videos explaining the basics of the command line. Videos are brief enough for beginners but, at the same time, are detailed enough to get started and light your inner curiosity.

      Check your Knowledge

      Now it is time to check your knowledge and your understanding of this lesson. If you stuck in a question just click the small arrow to the left and an answer will be revealed.

      What is the command line?
        • The command line is a way to interact with the computer using specific words called “commands”.
      How do you open the command line on your computer?
        • On Windows: Press Windows+s to open up the “Start” box. Type “GitBash” and then click “OK” to open the Git Bash Command Prompt.
        • On Linux: Open the programs menu and search for “Terminal”. You can also open the terminal by pressing CTRL + ALT + T.
        • On Mac: Open your applications folder and find “Terminal”.
      How can you navigate to a particular directory?
        • You can use the cd command to change directories.
      Where will cd on its own navigate you to?
        • On Linux and Mac, it will navigate you home.
      Where will cd .. navigate you to?
        • It will navigate you “up” one folder, that is, into the parent of the current directory.
      How do you display the name of the directory you are currently in?
        • On Linux and Mac, use the pwd (print working directory) command.
      How do you display the contents of the directory you are currently in?
        • On Linux and Mac, use the ls command. Use ls -l to display the files in a list.
      How do you create a new directory?
        • You can do this using the mkdir command.
      How do you create a new file?
        • On Linux and Mac, use the touch command, e.g., touch new-file.txt.
      How do you destroy a directory or file?
        • On Linux and Mac, use the rm command. To destroy folders, use rm -r or rmdir.
      How do you rename a directory or file?
      • On Linux and Mac, use the mv command, e.g., mv folder/old-file.txt folder/new-file.txt.
        • LOOKING FOR HELP?

          When looking for help, try doing so in the following order:

          • Did you try everything you could?
          • Did you read the documentation?
          • Did you Google for it?
          • Did you post your question on Slack/Forum?
          • Did you ask your fellow students for help?
          • Did you ask your Mentors for help?
          • Did you leave a comment on the comments section of this page?
          • Did you ask your Instructor for help?
            • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
            • Is it urgent? Did you try reaching him on Slack

          The archived old version of this post can be found here

          UPDATED: 03.06.2021

          CONTRIBUTORS:

          Code Editors

          Introduction

          Code editors are very essential tools for a developer. A good code editor can help the developers do their work faster since they offer real-time code checking, syntax highlighting, and automatic formatting.

          Can I use Microsoft Word?

          Microsoft Word and other rich text editors are great for writing a paper. However they are not suitable for writing code. A document that is created with rich text editors contains much more information, such as how to display the text on the screen, which makes other programs, such as Node, hard to read. On the other hand code editors, such as VSCode and Sublime Text, don’t save any additional information and so the other programs execute the file as code.

          The Importance of Using Code Editors

          As stated before code editors come with a lot of features that help the developers to do their job faster. There like a specialized tool that are fully customizable. Plugins, syntax highlighting, auto-closing brackets are some of the features that code editors offer.

          There are many code editors out there but we suggest you use VSCode. VSCode is an excellent free code editor. It is the most popular code editor among students and moderators, so support is easy to find in the community.

          For the purposes of this course we are going to assume that you are using VSCode but since the code editors it is a matter of preference you can use whichever code editor you like. Keep in mind that if you use another code editor than VSCode in might be difficult to get help in the chat room.

          Opening VSCode from the Command Line

          If you are using Windows or Linux, you can open VSCode from the command line by typing code, and you can open folders or files by adding the name of the location after it: code my_first_app/.

          MacOS Users:

          MacOS can do this too, but you need to set it up. 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.

          Regarding Security Warning:

          A message may show, warning the user that VSCode is not trusted software. This is an expected message. VSCode can be trusted, therefore it is safe to ignore this warning.

          WSL Users:

          Although you just installed Ubuntu on your computer, you should still install the Windows version of the code editor you choose. You will edit the files in your Projects directory with the code editor, and WSL will be able to read these files. If you are using VSCode, be sure to install the "Remote – WSL" extension when prompted. This extension will allow you to directly access your Linux files. Once installed, select the green icon in the lower left corner to connect to WSL.


          The archived old version of this post can be found here

          UPDATED: 03.06.2021

          LOOKING FOR HELP?

          When looking for help, try doing so in the following order:

          • Did you try everything you could?
          • Did you read the documentation?
          • Did you Google for it?
          • Did you post your question on Slack/Forum?
          • Did you ask your fellow students for help?
          • Did you ask your Mentors for help?
          • Did you leave a comment on the comments section of this page?
          • Did you ask your Instructor for help?
            • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
            • Is it urgent? Did you try reaching him on Slack

          Installation Overview

          Introduction

          The most important thing when you are building any project is to have the right tools to work with. So setting up an appropriate development environment for writing good code it is essential.

          Many online development courses use in-browser code editors. These code editors or "sandboxes" provide the tools and programs needed for a quick and easy start on any task. This simplicity they provide is a great for getting started and thus you will use some of those tools at the beginning of this course. However this isn’t the recommended way of setting a successful long-term development environment.

          We acknowledge that installing tools and packages and even operating systems can be really frustrating. Having said that the experience that you will get from setting such an environment is a valuable skill that will certainly help you throughout your career.

          Setting Up the Environment

          Now it is time to set up your environment. This part is really important and we wll go the installation steps one by one together. Please be very cautious and always double check what you are typing.

          These steps are:

          • installing the operating system (OS) of your choice;
          • installing a code editor;
          • creating an SSH key (a personal "password" that will identify you to GitHub, Heroku, and many other sites you’ll be using); and

          Once you finish with the installations you will be ready and up and running with many of the most important tools to write and run your code. As mentioned before we will go those steps together and if something goes wrong please remember to check the following steps:

          • Parse the terminal output for the actual error.
          • Google, Google, Google.
          • Never be afraid to ask for help!

          Choose the Correct Operating System

          "Woah, woah, woah! I like my OS just fine the way it is!"

          Don’t panic! We are not asking you to get rid of what you currently using. You will be probably very comfortable using the OS you currently have and you don’t want to lose everything you have in your computer. However, you need to keep in mind, that most of these OSs are not developed for tech folks in mind. So sometimes it is hard to install and use many of the languages and frameworks. You can always find a work around these difficulties but it can be frustrating and it may lead you to give up before even starting.

          Therefore modifying or dual booting a computer might be good option to start programming with the right tools. In that way you will have a distraction-free environment and that will also look good in your resume.

          So now let’s look at your options one by one:

          First Option – Mac

          The first option is to use Mac. If you are already using Mac then you are in a great shape. Mac is used by many professional developers because they rely-on Unix-based systems. Therefore the only thing for you to do is to install a few programs and then you are all set!

          Second Option – Linux

          The second option is to use Linux. Linux is a free and open-source operating system. Linux has the advantage of working well with all programming languages as well as most of the development tools. These tools are written in such a way to run natively with Linux and thus they will likely be updated more often and have more information available for troubleshooting. So if you are not using Mac we strongly recommend to use Linux.

          Third Option – Virtual Machines and Dual-Boots

          A third option is to set up a virtual machine or a dual boot on your computer.

          IMPORTANT: Setting up a Virtual Machine or Dual-boots on your computer is an advanced process. Make sure to proceed to these steps, only if your instructor told you to. If you are planning to go through the process yourself, make sure you’ve discussed it with your instructor.

          Let’s now see a brief description of what a virtual machine is and what we mean with dual-booting.

          A virtual machine is basically an emulation of a computer that runs within your existing OS. In other words, your current operating system allows you to use another operating system inside of a program. A good example is to run Linux inside Windows. Virtual machines are a good option because they are simple to install and if you don’t like Linux you can easily remove it.

          • Watch this video on Virtual Machines to achieve an overview of how they work.
          • If you need further clarity, read this article for more information on virtual machines.

          Dual-booting means installing two operating systems on your computer. This means that you have both operating systems in your machine and you can choose which one ypu want to boot when your computer starts up. So for example you can have both Linux and Windows and boot to whichever OS you want.

          The advantage of this option compared to the virtual machine’s one is that the OS can use all of the computer’s resources and thus the operation is faster. However there is a bit risk with that option since you are changing your hard drive partitions. As long as you read the instructions carefully you will be ok.

          Furthermore dual-booting is a great option since it is easy to implement such as inserting a flash drive and clicking a few buttons. It also allows Linux to use the full capabilities of your hardware and have a clean distraction-free environment for coding.

          Windows 10 with the Subsystem for Linux

          You’re probably familiar with Windows for one reason or another. For many people, it is their OS of choice. Windows is easy to use and comes pre-installed on most computers. Unfortunately, some languages, such as Ruby, were created with the assumption that they’ll be used on Unix-based (Mac or Linux) systems and do not easily run on Windows.

          It is possible to develop with the Windows Subsystem for Linux (WSL), but it is highly discouraged. If you go this route, you’ll end up spending many hours on Google trying to fix the many problems you’ll encounter. For your sanity, we recommend installing a virtual machine instead of using WSL.

          Online Editors

          Finally, there are a variety of online code sandboxes that can be quite handy when you’re away from your main system or prototyping some code before committing it.

          These sites can be used to complete small exercises or to sketch out a concept you don’t quite understand. However, you shouldn’t use these sites as your main development environment.


          UPDATED: 03.06.2021

          The archived old version of this post can be found here