CSE 331: Software Design & Implementation

CSE 331: Resources

Other Course Pages

This website will be the main source of information about the course. However, we will also use the following web pages:

  • Gradescope: used to submit homework assignments.
  • Canvas: used for non-public information such as grades, recordings of lectures, Zoom links for office hours, and a link to our Gradescope page.

In addition to these web pages, students will need to install software, as described in the next section. In the last section on this page, you will find additional resources that may be helpful during the quarter.

Required Software

All students should have access to the following software, either on their own computer or using the department's computers:

  • Bash: command-line shell (built-in on Mac, Windows version available here)
  • Git: version control system (built-in on Mac, Windows version comes with Bash, above)
  • Node: executes JavaScript code on the command-line (available here)
  • NPM: package manager (comes with Node, above)
  • VSCode: where you write code (any editor is allowed, but we can only provide support for this one)

The following section describes, in a step-by-step manner, how to go about installing this software.

Software Setup

Students are expected to complete the following steps before the first quiz section of the quarter. Those who have any trouble, should ask for help on the message board. If it cannot be resolved that way, they can come to section after getting as far as they can on their own.

1. Determine your operating system

Figure out if you're using a MacOS, Windows, or Linux. Then, make sure that you follow the instructions that work for your computer as you proceed through this document. For this course, we recommend that you do any and all coding locally.

A note for Windows users: For any downloads you perform in this course (both downloading tools in the following instructions and downloading/cloning any section or homework code), you should make sure that you are storing things in local directories. Specifically, do not place code or other downloads in a OneDrive folder. This can cause various issues with tools not working as expected.

2. Install Bash

Bash is the command-line shell that you use on your laptop. It is sometimes also referred to as the terminal.

  • MacOS or Linux: Your command-line shell is built-in. It will be an application on your laptop titled "Terminal".

  • Windows: You can install your own version of bash. On the Git for Windows page select Download and then follow any prompts that you are given.

3. Install Git

Git is a version control system. We won't need to use git for anything more than downloading the starter code. However, it is an extremely useful tool that would be worth your time to learn.

  • MacOS If you do not already have git, you can install it with the Apple developer command line tools package by running xcode-select --install in a terminal. Note: this does not install the full XCode IDE, just the command line developer tools. The tools are also installed automatically if you have installed the Homebrew package manager (also not required for CSE 331, but popular with many MacOS developers).

  • Linux: Install git from your package manager.

  • Windows: Git comes with Bash. If you followed the above instructions for Bash, you should already have it!

4. Install Node and NPM

Node executes JavaScript code on the command-line. NPM is a package manager that comes with Node.

Please note that absolutely everyone in this course should install Node. Even if you already have it installed, do it again! The Node installer will handle all duplicate and outdated Node versions on your OS, so there's no harm in re-installing!

  • MacOS or Linux: First, navigate to the Node.js homepage and select the LTS version of Node.js. This will also install the correct version of NPM automatically. You may get a warning about the installer not coming from a “verified developer.” To resolve this, open System Preferences and navigate to Security & Privacy > General. There, you'll be able to click “Open” to run the Node/NPM installer.

  • Windows: First, navigate to the Node.js homepage and select the LTS version of Node.js for Windows. This will also install the correct version of NPM automatically. Make sure that the “Add to PATH” option is enabled with the “Will be installed on local hard drive” sub-option during the installation process. Keep the “Tools for Native Modules” option disabled. These selections should be the default installation options, so just verify they are made.

NPM comes with Node.js, so you should have it now as well!

5. Install Visual Studio Code (VSCode)

Students are free to use any editor. However, the staff will only provide help with VSCode. In other words, if you prefer to use a different editor, the staff will be unable to help you with any setup related bugs you encounter throughout the quarter. If you already have VSCode, make sure that you update it to the latest version!

VSCode is an editor with excellent support for TypeScript (and practically all other programming languages under the sun). If you ask the staff, we think it's pretty great! This is an editor that is popularly used in industry as well, so it is definitely a good tool to be familiar with! :)

  • MacOS: First, navigate to the VSCode homepage and select the big blue Mac button. Then, follow any prompts that you are given.

  • Linux: First, navigate to the VSCode homepage and select the big blue .deb or .rpm buttons, depending on which of the 2 designated categories that your OS falls under. Then, follow any prompts that you are given.

  • Windows: First, navigate to the VSCode homepage and select the bug blue Windows button. Then, follow any prompts that you are given.

Recommended VSCode Extensions

The following are recommend VSCode extensions that enable even more functionality on VSCode. They should be especially helpful for completing assignments in CSE 331.

  • Comfy TS Linter: ensures that your code follows the coding conventions required for CSE 331.
  • Babel JavaScript: makes coding a bit easier by providing VSCode syntax highlighting for JavaScript (and TypeScript).

To install an extension, follow the link to the VSCode website which provides more information on the extension, click the big green Install button which will redirect you to VSCode, and then prompt you to install there. You will have to complete these steps for each extension that you wish to install.

6. Check that your software setup is working properly

  • Use bash and git to clone the git repo for the first section:
git clone https://gitlab.cs.washington.edu/cse331-24su/cse331-24su-materials/sec-fib.git
  • Change into the resulting directory: cd sec-fib
  • Install the dependencies: npm install --no-audit
  • Start the dev server: npm run start
  • Navigate to http://localhost:8080
  • Open the developer tools. In Chrome, either:
    • Select the triple dots menu, then More Tools, then Developer Tools.
    • Or, right click on the webpage and then select Inspect from the popup window.
    In developer tools, select the Console tab.
  • Take a screenshot of the entire browser window, including the URL bar, the blank main page, and the developer tools displaying the message from the starter code. It should look something like this: Screenshot of sec-fib and the developer console with current datetime
  • Upload your screenshot to Gradescope to receive a credit for completing the software setup!

Additional Resources

This section contains links to guides, articles, and websites with more information about the languages we are using. They include lots of information that is useful but beyond what we can cover in class.

Articles

References

Advanced Topics

  • Effective TypeScript has more advanced tips on using TypeScript. Most are beyond what we will need in this course, but if you want to learn more about the language, this is a good source.