Setup

For the duration of this course, you will need to set up a “development environment” to do your work. You’ll need to download,install, and interact with a group of programs and services that make it possible to do your work. Setting your environment up can be difficult, so be sure to budget some time to do so! Also be aware that these tools will take up significant spae on your laptop and may cause your laptop to slow down somewhat if run simultaneously with

Platform Notes

I run Arch Linux on my laptop, and have experience with Ubuntu as well. For the purposes of this class, I have installed Windows 10 Education Edition (available free to U of T students here). I wil also attempt to support MacOS as best I can.

  • if you have an earlier edition of Windows, some of our tools may not work properly. I encourage you to upgrade to Windows 10 Education Edition, which has good support for modern tools.
  • if you have a Chromebook, you will need to install a full Linux OS in order to do the coursework. If you are lucky enough to have a recent, powerful Chromebook, you may be able to use Google’s official “Crostini” tool. Otherwise, Gallium OS and Crouton are the two recommended tools for this, and you can find some instructions here. It’s not easy, and I won’t be able to help you. If this seems hard, you may want to think about buying an inexpensive, older laptop and installing an ordinary Linux distribution. Here are two lists of distributions, but the choice is up to you.

Details

Here’s the table of tools from the syllabus:

Tool On Mac On Windows On Linux (debian/ubuntu commands)
Real Web Browser Firefox and/or Chrome Firefox and/or Chrome Firefox and/or Chrome
Text Editor VSCode VSCode VSCode
Bash Shell Environment Terminal (Built in) Git for Windows or Windows Subsystem for Linux gnome-terminal, qterm, etc
Git Version Control Git for OSX Git for Windows apt-get install git
Slack Community Client Download, Signup Link Client Download, Signup Link Client Download, Signup Link
Github Org Membership Sign up here Sign up here Sign up here
Git Visualization (deprecated) gitKraken gitKraken gitKraken
Node and NPM Node Website (guide) Node Website (guide) Node Website (distro instructions)

If you’re comfortable exploring and installing software, you can probably get set up quickly by following the links above. Please nonetheless read the detailed instructions below. Things will go smoother if you do!

Web Browser

All of our work will involve interacting with the World Wide Web. Firefox and Chrome are head and shoulders above all other web browsers, and you should install one (or preferably both) of them. In class, I will use Firefox almost exclusively. If you haven’t tried Firefox for a while, give the new Quantum version a try’ it is much, much faster and more stable than its predecessors.

Both have highly sophisticated developer tools with which you should familiarize yourself. As you learn more about web design, you’ll come to rely on these tools more and more. Follow these links for more about Firefox Dev Tools and Chrome’s version.

Of particular value in both Chrome and Firefox is the “Javascript Consoles,” accessible from the developer tools: Tools \rarr Web Developer \rarr Console or Menu \rarr More Tools \rarr Developer \rarr Console

The Firefox console is a little awkward to use for multi-line programming, so they have also provided a “Scratchpad” tool (Shift-F4), which I find helpful, though I now often use VSCode’s Javascript console instead (see “Text Editor”, below).

The other tool I use all the time is “inspect element”, available by right-clicking on any part of a web page. Both of these tools will prove essential for figuring out why your code isn’t working right!

Text Editor

If you want to code, you have to write like a coder. This means using a powerful text editor. In this class we use Visual Studio Code. Please follow the download links and install to your computer. There’s a separate post about using VSCode – once you’ve installed it, navigate there!

Command Line

Web developers and digital humanists spend a lot of their time in the command-line environment, interacting with their computers through text-based commands instead of a mouse or voice interface. It takes some time to learn to use the command-line, but it’s a very powerful and effective way to work once you get used to it. One goal of this course is to help you get comfortable in this environment and learn to take advantage of its power.

There are actually many different command-line environments; in this class we use bash, the most popular.

On Mac and Linux, bash is built in to the system. In Mac, open the Terminal app to find the bash prompt; in Linux you may have any of several terminal emulators installed, search your program list for “term” to find yours.

In Windows, bash comes with the Git installation – follow the instructions below. Note that very recent editions of Windows 10 come with the “Windows Subsystem for Linux (WSL)”, which you can use instead of the Git Bash method.

IMPORTANT UPDATE: VSCode has an integrated terminal, and it’s extremely useful. Windows users will have to do a little bit of work in order to use bash in the integrated terminal. See the excellent terminal configuration instructions online, and be sure to follow the link explaining how to access the user settings screen in VSCode.

Git, Github, and GitKraken

Software development is made vastly easier by “version control” systems: specialized software that keeps track of the history and current state of files and directories. In the past there were many such systems, but now almost the whole user uses git, and we’re all grateful for it.

Install Git

To install git, follow the download links on the website (see the table above for OS-specific links and instructions. We’ll come back to the Git command-line in a minute.

Sign up for Github

For many developers – maybe even most of them – using Git is intimately tied to the Github code-sharing website. We’ll be using Github for almost all of our work this semester, so it’s important that you get familiar with it. If you were present for the first class, you’ve already done this. If not, you’ll need to sign Up for a Github account. Once you’ve done that, you have two choices:

  • practice working at the command line
  • go straight to a GUI (“Graphical User Interface”) that will make working with git a little more comfortable.

I recommend at least trying the command line first.

Command-line Setup

You need to tell git a little bit about yourself. Start with your email address and your user name. Open your bash shell (Terminal in Mac, git-bash in Windows) and type:

git config --global user.name "Your Name"
git config --global user.email "youraddress@ mail.utoronto.ca"
git config --global github.user YourGithubId

Great – now git knows who you are. If you’re feeling ambitious, you can also set up SSH keys so you don’t have to type in your password every time you commit to Git.

VSCode Git

VSCode also has an interface to Git and Github. It’s pretty powerful and intuitive, so I recommend trying it before installing GitKraken. The instructions are here.

Using the GitKraken GUI client

Sometimes it’s nice to have a backp. GitKraken is an impressive visual tool that also makes it easy to configure all of your information. They have a nice video about SSH integration, which you can watch if you like.

Learn more

There is a somewhat more wordy Git tutorial on this website, which you should read. For now, Install the Github Desktop App which also includes the command-line version of git. You can follow the excellent tutorial in the downloadable git-it application, as well as the Github Desktop documentation. There is also a quite helpful tutorial on The Programming Historian. We’ll be discussing Git and Github further in our first class.

Node and NPM – This is the hardest part!

Right now it looks like the drag and drop tool we wanted to make will NOT be ready for this semester :frowning_face:

Installing Node is not strictly necessary for the first assignment. If you are having trouble, put this off till next week.

Most of our programming work will involve Javascript, which runs most of the web. The Node.js environment and its “package manager,” NPM, are an incredible resource for Javascript development. In fact, Slack, VSCode, and gitKraken are all written as Node applications themselves! Installing the “bare” versions of node and NPM lets us access some of that power while we work.

You can survive this class without installing Node, but without it, you won’t be able to run the test suites that accompany all of the assignments. You’ll therefore be at a disadvantage in the class, because the tests offer hints about what’s wrong with your code.

The details of Node and NPM are a little outside the scope of our class, but a colleague at the University of Washington has an excellent introduction in one of his courses.

Slack

Slack is not strictly necessary to do your work, but it is the principal means of conversation for the class. Your activity in our Slack team is part of your participation assessment. So, please sign up for the team using the signup links above, and if you’re not familiar with Slack already, read some of the Slack documentation.