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. 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
Real Web Browser Firefox and/or Chrome Firefox and/or Chrome Firefox and/or Chrome
Text Editor Atom Atom Atom
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
Git Visualization gitKraken gitKraken gitKraken
Github Org Membership Sign up here Sign up here Sign up here
Node and NPM Node Website (guide) Node Website (guide) Node Website (distro instructions)
Slack Community Client Download, Signup Link Client Download, Signup Link Client Download, Signup Link

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 use Atom’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 Atom. Please follow the download links and install to your computer. Once you’ve read the first chapter or two of the Manual, go ahead and install some extra packages by navigating to Edit → Preferences → + Install, as described in detail in the excellent Atom manual. I have prepared a package called history-hack-tools, which will install all the tools I’ll be using during class. Please install that one by searching for its name in the search box. The functionalities fo the various packages are briefly described in the package description.

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 “Wondows Subsystem for Linux, which you can use instead of the Git Bash method.

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.

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

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, Atom, 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 serious disadvantage in the class.

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.