Resource Links

Tools

Visual Studio Code

Visual Studio Code

Recommended extensions:

• HTMLHint (htmlhint.com)
• HTML CSS Support (ecmel.vscode-html-css)
• EJS Language Support (digitalbrainstem.javascript-ejs-support)
• Live Preview (ms-vscode.live-server)
• Error Lens (usernamehw.errorlens)

When we start working with Javascript, you will likely want to add:

• eslint (dbaeumer.vscode-eslint)
  To setup eslint, you also will need to install the npm package eslint and setup a config file see the readme of the cs290 code repo for information on how to do that.

Node JS

Node.js - select the 64-bit Windows Installer (msi) version if on Windows

Git

Examples for this class can be found at: https://github.com/ChemeketaCS/cs290Code

You will use Git to accept and turn in assignments. Git Download

If you want a GUI, try one of these:

• Gittyup (free, simple)
• Fork (paid, but simple and capable)
• SourceTree (free, complex)

Here is a guide to the basics: Git Crash Course

Other Git resources:

• GitHowTo - Interactive tour of git from the ground up
• Visual Git Reference - Visual explanation of basic git commands
• Pro Git Book - Free book on Git

WebDev Tools

• HTML Validator
• Local HTML Validator for Chrome/Firefox

Accessibility Tools

Accessibility Insights Chrome plugin

Lighthouse accessibility audit:

• Chrome instructions
• Online at WedDev

Node / NPM Cheat Sheet

Quick reminders of important node / npm commands:

Run a single js file

node file.js

Add a package.json file to make a folder into a package

Do this ONCE when you first make a new folder that you want to function as a package (something you can run and that you can install other packages into).

npm init

Then add scripts to the package.json to allow for easy execution of commands.

(Instead of npm init you can also copy/paste a package.json from some other project and then edit it as necessary.)

Run a script from your package.json

Any scripts you define can be run with:

npm run SCRIPTNAME

Add a package to your app

To make use of another package, you need to include it in your code. But unless that package is built into node, you also need to install it with:

npm install PACKAGE

It should be added to your package.json (and the lock file) and the package should be installed into the node_modules folder.

Install all the dependencies identified in the package.json

If you download a project from Github, it hopefully does not include the node_modules folder. So before you can use it, you need to install all the packages it uses. Rather than do that one by one, you can simply do:

npm install

That will install everything listed in the package.json file to your node_modules folder.

It is safe to run this even if you have packages installed already. If a teammate adds a new package to the package.json and you then pull those changes to your repository, you will want to run npm install to add any new packages to your node_modules.