Guide: Tools & Development Environment
In order to be a productive developer, you should spend some time learning how best to use the tools of the trade.
Technically, you could code an entire website using your computer's built in text editor. However, the following tools and programs will allow you to be more productive and access a larger ecosystem of code, plugins, and conveniences.
Text Editor
What is it for?
A text editor allows you to write and edit text files which make up the code for your website. You can write in any programming language with any text editor. Any file can contain code, but you should save the file with a file extension that matches the language contained within. For example, you should save an HTML file with the .html extension.
What makes a good text editor?
A good text editor contains features that help you read and write code. Some useful features include:
- Syntax Highlighting - highlight different parts of code syntax with different colors
- Autocomplete - finish common code boilerplate automatically
- Advanced Find & Replace - search through multiple files with code-specific search functionality
- Extensibility - install plugins to extend the editor's functionality or help it better understand new languages
Recommendation
Terminal / Shell / Command Line
What is it for?
The terminal is a way to whisper into your computer's ear. The terminal allows you to run programs and manipulate files using text commands that afford much more power and control than using other applications with user interfaces.
For example, moving all of the JPEG images from one folder to another is one command in the terminal, while the equivalent operation using your mouse and your computer's file explorer might take much longer.
The terminal is also the only way to launch and interact with programs that don't have a user interface. For example, many computers have a built-in program called date that displays a no-frills text printout of the date. This program (like any other program on your computer) exists as an executable file in the filesystem (usually at /bin/date). Unlike iTunes or Google Chrome, however, it has no user interface and cannot be launched from the Dock or the Start Menu. The only way to access and interact with the program is to use the command line. In this case, by typing $ date.
Web developers frequently use the terminal for a number of reasons:
- Web servers are often run from the command line.
- Web development frequently requires moving around and renaming large numbers of text files. This is very easy from the command line.
- Many web development tools are only available as command line apps or command line interfaces (CLIs). For example, ImageOptim-CLI is a tool for resizing and optimizing images for the web, but it only works via the command line.
- Most web libraries and frameworks are written in JavaScript and distributed via the command line. While you can often copy and paste their code from an online source directly into your text files, it is often much more efficient to use the command line to download all of the libraries that you use and incorporate them into your project in one fell swoop.
How do I use the command line?
Note: every computer operating system has a different command line, although macOS and Linux come from the same family of systems called Unix. For this reason, almost all programming instruction assumes that you are using a Unix terminal. If you are running a Windows machine, you will need a way to emulate a Unix system (see below).
The command line is always inside a single directory on your computer, usually your home directory.
You can see the current directory by typing $ pwd, for "print working directory", and pressing Enter. (Note: the $ character represents the terminal prompt, that is, it signifies that the following text is a command that you should run in a terminal. What you should actually type is just pwd.)
You can see the files in the directory by typing $ ls, for list.
(It's worth noting that pwd and ls are just little programs on your computer with very specific functionality. This is the case for almost all terminal commands.)
You can also change directories by typing $ cd {the directory you watch to change to}.
Sometimes you will run a program from the command line that doesn't exit immediately (like a web server). This program will keep running and prevent you from entering any new commands in that window until you stop the program, usually by pressing Ctrl-C.
Recommendation
Hyper or the builtin macOS Terminal
Tutorial
Command Line Bootcamp (unfortunately, the interactive online terminal is broken, but you can follow the lessons on your computer)
Node.js
What is it for?
JavaScript was originally developed for browsers to add interactivity to web pages. However, it was such a popular language that Node.js was created as a way to write and run JavaScript programs on your computer itself.
While JavaScript inside of a web browser has no way of writing files on your computer, for example, Node.js programs written in JavaScript can read and write files to your filesystem and more. Technically this means that Node.js is a JavaScript "runtime". While JavaScript is the language itself, the Node.js runtime provides the capabilities necessary to write programs for your computer. In contrast, a web browser, like Google Chrome, provides a browser runtime which allows you to write JavaScript for web pages. Although these may seem like confusing distinctions, we will talk more about them in class soon.
Node.js itself is a program called node that runs or "interprets" JavaScript files on your computer. You can test out the Node.js interpreter from the terminal by typing $ node. You should be met with another prompt where you can type JavaScript. Try typing 1 + 1 and hitting Enter. Remember that you can exit from long-running programs on the command line by pressing Ctrl+C.
Node.js also includes another program called npm which is a "package manager". That is, it assists programmers in downloading various dependencies, libraries, and frameworks from the internet.
How do I use Node.js?
We will talk more about using Node.js once we start learning JavaScript.
For now, just know that the web server we are using in class was written in JavaScript for Node.js. Therefore, you will need to invoke some Node.js-specific commands on the terminal to use the web server. See the various class assignment instructions for more details.
Download
Additional Windows Notes
As mentioned above, Windows users will need to follow a few extra steps to get a Unix-style terminal on their machine.
Please follow the following instructions to get started:
Install the Windows Subsystem for Linux
Windows Subsystem for Linux FAQ
Running Node.js on Linux on Windows
If you run into issues getting a Unix terminal running on Windows, please send feedback!