Prerequisite: a modern browser
A browser is the software you use to visit webpages and use web applications. Check whatbrowser.org for more info and advice about upgrading your browser, and this compatibility table for more detail about ES2015 support among browsers.
The safest bet is to choose either Google Chrome or Mozilla Firefox, two "evergreen" (self-updated) browsers with excellent ES2015 support in their recent versions. Other capable browsers include Opera and Microsoft Edge (Windows 10's default browser). On the contrary, all versions of Internet Explorer will have issues with ES2015 code: stay away from them.
Solution A: coding online
For chapters 1 to 23: CodePen
If you choose to use CodePen, you really should start by visiting Welcome to CodePen. It introduces the platform in a very friendly way and gives you everything you need to get started.
In addition, there are some helpful articles in the CodePen documentation about autocomplete, the console, pen autosaving, keybindings and auto-updating. Albeit not mandatory, mastering CodePen will make you more productive while studying this book.
T> I advise you to enable autosave and disable auto-update for all your book-related pens. Showing the CodePen console will often be needed to look at the results produced by the code.
You should use a pen (not necessarily saved) to try every code sample this book contains. You should also dedicate a specific and saved pen to each exercise and project you'll search.
For performance reasons, the CodePen console does not always show the same amount of information as the "real" browser console.
From chapter 24 onwards: Glitch
Starting with chapter 24, a back-end playground will be necessary to create Node.js applications. The prominent choice is Glitch, a platform for quickly building Node-based web applications. Glitch emulates a local Node setup and automates things like code execution, package management, hosting and deployment. You can also remix (clone) any Glitch app to personalize it for your needs.
Solution B: building a local development environment
Setting up your local machine takes a bit of work, but will give you a tailored and powerful environment. This is also your only choice if you need to work offline.
The following steps will help you code effectively on your machine.
Install a code editor
At heart, programming is typing code as text in a number of files. To actually program, you'll need to use a code editor on your machine. Here are some of them:
Install Node.js and npm
The Node.js platform is necessary from chapter 24 onwards. The npm package manager is automatically installed along with Node.
To setup Node on your local machine, download the latest version here, execute the downloaded file and follow the instructions.
Some examples in this book need Node 8 or higher.
The easiest way to test that node is installed is to run the
node --version command in your terminal/command prompt, and check that a version string is returned.
Install a code formatter and a linter
- A code formatter frees you from the burden of formatting your code manually and improves consistency. Prettier is the current standard.
- A linter can greatly improve your code's quality, detecting bugs and enforcing good practices. ESLint is a common choice.
The easiest way to setup ESLint and Prettier is to add them as extensions (sometimes named add-ons) to your code editor. For VS Code, use these links:
Follow the instructions provided in their documentation to setup them.
ESLint configuration is discussed in the next chapter.
Organize your code
It's important to set up your basic folder and file structure before actually starting to code. That way, your project will be organized, and you'll be starting off with some good programming habits.
Create a folder in your storage disk dedicated to coding along this book. The folder name doesn't matter,
thejsway-code will do nicely. All local files you subsequently create should be stored in subfolders of this root folder. The most logical solution is to create a subfolder for each chapter of the book.
You can either download a predefined folder structure or follow the next few paragraphs to create this folder structure by hand.
For chapters 1 to 23
.html extension) in an
html subfolder, CSS files (
.css) in a
.js) in a
js subfolder. Each chapter is set up in a series of folders as follows.
For examples and each exercise of a chapter, create an HTML file in the
html subfolder of the chapter folder. In these HTML files, a
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Code examples</title> </head> <body> <!-- HTML code goes here --> <script src="../js/examples.js"></script> </body> </html>
<script> tag asks the browser to load the
../js/examples.js. The two dots (
..) at the beginning of the path indicate you're going back one level in the directory structure relative to the HTML file itself before looking in the
js subfolder for a file named
.js file. Its result will be shown in the browser console (see below).
From chapter 24 onwards
package.json file located at the root of this folder. Subdirectories may be used to store specific files:
node_modules(automatically created) for external dependencies.
viewsfor HTML files.
modulesfor internal modules.
Use the browser's development tools
Modern browsers include developer tools to help with web development. Each browser differs in exactly which tools they provide, but there are more similarities than differences among them.
Check out the following links to discover more about browser developer tools: