Tools

January, 2020

Page content

Preface: For programming in this class, you will want to have good tools. Good tools make programming easier, and let you focus on the (more fun and interesting) content. You will also need to have tools to work with GIT for source control as this will be our mechanism for handing in assignments.

Some ideas on how to install the recommended tools (on Windows) are provided at Software.

Overview of Programming Tools for CS559

In CS559, you will do a substantial amount of JavaScript programming. See the Javascript in CS559 page for a discussion. We will use GitHub to distribute framework code and for students to hand in assignments (see the Git and GitHub in CS559 page).

This means you will need some tools for programming in JavaScript and working with GitHub. We won’t force you to use any particular programs, but we’ll make suggestions. You should make sure that you have something to use in the first week of class. The first assignment will require everything.

The requirements (details below):

Either Firefox or Chrome for a web browser to run programs
Some GIT client that talks to GitHub
Some IDE or text editor for programming in JavaScript
Some local server to test things out on your machine

The optional (but recommended) things (details below):

A type checker and/or linter
A good debugger
An IDE that integrates 1 and 2
An SSH key manager so you don’t need to type your password all the time when using GitHub

You may use any tools that works for you. Since we assume that you are using your own computer(s), it is your responsibility to set these things up and learn to use them. We strongly recommend you get things set up the first week in class. Spend time early in the semester to master the tools!

We recommend (and can provide some help with):

Chrome
Installing the command line GIT tools, and optionally a visual client (SourceTree)
Visual Studio Code (VSCode) as an IDE
LiveServer (inside of VSCode) and Node http-server for a local server
Node (for JavaScript tools like eslint and http-server)

Some details follow.

Web Browser

All your programs will run in a web browser.

Importantly, our programs (the framework and example code for class) must run in your web browser, and your programs (assignments you turn in) need to run in our web browser. In the ideal world, everything is compatible. In practice, it’s safest to try to run the same web browser.

A web browser is a personal choice, so we don’t want to dictate which one to use. We will make sure that our programs that we give to you run in both Firefox and Chrome. For grading, we will have both Firefox and Chrome available. We ask that you tell us which one you tested your program with.

GIT Client

See the Git and GitHub in CS559 page for more information on GIT in CS559.

You will need to work with the GIT source control system. The default way is to install the command line tools, which are available for all platforms. We recommend that you have some familiarity with the command line tools.

In theory, you can do everything via the GitHub web page: download the repo as a ZIP file, upload the files you changed, etc. While this is OK for small fixes, you will not want to do this for your class assignments. Do not do this!

You can use the GIT command line tools.

Visual interfaces for GIT can be helpful, and make many tasks easier. I use SourceTree because it’s free, cross-platform, and works for both GIT and Mercurial (and I switch back and forth a lot). The ability to do GIT and Mercurial isn’t so important for this class.

Some IDEs integrate support for source control. Learning to use this can be convenient.

Setting up public keys to connect to GitHub is really convenient - it saves you from typing your password all the time. On windows, this is a little tricky (see the Software page). The GitHub Guide should be sufficient for a Mac.

Editors and IDEs

You will need tools for reading and writing JavaScript programs and related files (like HTML files). We recommend Visual Studio Code (see below).

Using a Basic Text Editor

You can probably get by in this class with a basic text editor (Notepad++, Vim, etc.). Almost all of these offer some features for programming (like coloring and checking for basic syntax things). However, more specialized tools can be helpful - helping you work with larger programs (across files), providing more linguistic support, etc.

Atom

Atom seems like a basic text editor. However, since it is extensible and has an active user community, it gets a lot of fancy features.

WebStorm / PyCharm

JetBrains is a company that sells “industrial strength” programming tools. They sell them (they are not free). However… they have “free” editions, and they will provide academic licenses that let you get the full “pro” versions of the tools for free.

I use their Python version (PyCharm) which also includes JavaScript support. Some of this is out of habit: when I started using it, the other choices above (Atom, VS Code) didn’t exist. And, I have chosen it for its Python support (which is very extensive). However, I am have switched to VSCode (below) for JavaScript development.

Visual Studio Code

For CS559 we recommend Visual Studio Code as a JavaScript development environment. See the Visual Studio Code (VSCode) for CS559 page.

Visual Studio Code (VS Code) is a JavaScript-based text-editor/IDE that is meant for doing programming. It has an active community with lots of plugins and lots of features. While this comes from Microsoft, it is cross-platform (it runs on Windows, Mac and Linux).

VS Code is connected to a bunch of JavaScript “services” that allow it to do things like infer types for your variable, intelligent code completion, and error checking. Check out the VS Code JavaScript Feature Page for a list of all kinds of cool stuff it can do.

The features are really helpful for learning. They catch beginner mistakes. Tooltips that pop up when you look at a function call give you documentation which saves you from having to remember what all the functions are (and having to do a web search each time you want to do something).

The more I use VSCode, the mor impressed I am with it. I strongly recommend it.

See the Visual Studio Code (VSCode) for CS559 page for more thoughts on VSCode for CS559, and help getting started.

Local Web Server

Even though your files are on your computer, the web browser won’t just open them: for security reasons, the web browser disallows doing things with files directly - it wants things to be provided by a web server. Therefore, you need to run a web server on your computer (locally) so that the web browser can read the files on your disk.

Here are three options (there are certainly others):

Use the “http-server” that is part of Node. This requires that you have Node installed (see below). This has useful features like being able to turn off caching so file changes are seen instantly. You probably want to use http-server -c-1
Use the simple server that is part of Python. This requires that you have Python installed. The method for using it depends on the version of Python.
Use “live server” that is part of Visual Studio Code. This is really convenient when you are editing a project in Visual Studio Code, but less convenient to just start something up. You probably want to have an option besides this one. Documentation on live server is https://ritwickdey.github.io/vscode-live-server/.

If you use Visual Studio Code, you will probably want to have Live Server (since it is very convenient), but you will also want to have a stand alone option for running programs outside of VSCode.

The graders will use the first option (http-server) for grading. It should be equivalent to second.

Remember: using a local web server requires you to (1) have it installed correctly; (2) start the server running in the correct directory; and (3) pointing your web browser to the right place. Everyone’s configuration is always slightly different, but (for example) when I use http-server, I need to (1) go to the directory I am working in with my .html files in a command window, (2) type http-server -c-1 (I need the option to turn off caching), and go to “http://127.0.0.1:8080/index.html” in my web browser (http-server tells me this link when I run it).

If you’re using VSCode with live server (recommended), don’t forget to start the server.

Node and JavaScript Tools

Node is a JavaScript environment that runs outside of the web browser. We won’t be using it for class. However, it is useful to have it installed since it is the main way to get other, useful JavaScript tools. Node has a package manager (called “npm”) that gives a convenient way to install JavaScript related programs.

Some things you probably want to have:

jshint or eslint - These are programs that check JavaScript programs to catch errors before you run them. These get integrated into IDEs (like Visual Studio Code) to suggest problems while you’re editing. However, they are convenient to use from the command line.
http-server - See Local Web Server above.

If you use VSCode, you’ll want to have Node installed since VSCode will use Node and npm to do some of its magic such as getting type inference information.

Type Checkers and Linters

With JavaScript, we run our program without a separate compilation step - the compiler is run “just in time”. The upside is we don’t have to wait for the compiler. The downside is that the compiler doesn’t check our code for mistakes before we execute it. Therefore, it is really handy to have a tool that checks over your program before you run it.

expand to read more ... ↕

Linters are programs that check over your program to catch mistakes. There are several for JavaScript. Two common ones are jshint and eslint. These can be installed via Node (see above), and are integrated into good IDEs.

Because JavaScript is dynamically typed, you can easily make the mistake of passing the wrong kind of object. These kinds of errors are not caught at compile time (since there is no compile time) - you only find them when your program doesn’t work as planned. While the “no explicit typing” style of JavaScript makes it easier to program, it does lead to bugs that may not get caught until later.

TypeScript is a variant of JavaScript that does compile-time type checking. To make this possible without tons of explicit type definitions in your code, TypeScript can (usually) infer the types of most variables. You get the best of both worlds: the error checking of compile time type checking with the ease of not having to explicitly declare your types (except in the cases where type inference fails). Unfortunately, for this class, you have to program in JavaScript, not TypeScript (see the class rules Policies(Policy on JavaScript Usage)).

However, you can program in JavaScript and get the benefits of type checking. Visual Studio Code will use the TypeScript compiler to check your program - even if your program is written in JavaScript! The catch is that for cases where you need to explicitly declare types, you have to do it in “JSDoc” style comments. See Typed JavaScript and CS559.

The best part about these tools is that they are built into the IDEs (especially Visual Studio Code). While you type, it tells you problems in your program - before you run it.

Markdown

Markdown is a convention for writing stylized text as plain text. As far as class goes, you can treat a “.md” file as a plain text (.txt) file. The “markdown” elements should be obvious (such as **two asterisks** for bold text, or beginning a line with a # to create a heading).

For class, you are not required to write using any markdown. We will give you Markdown files, but you can just add plain text.

If you use an editor like Atom or Visual Studio Code, it will color and style your markdown.

If you want to learn about markdown (and don’t already know about it), check out the WikiPedia page or the original author’s page. There are many resources on the web including this cheatsheet.

For class, you won’t need a program that converts Markdown to HTML or PDF - but you are welcome to use it. Markdown conversion is built into GitHub (although we won’t use that feature).