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
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.
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 | 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 |
| 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!
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 \rightarrow Web Developer \rightarrow Console or Menu \rightarrow More Tools \rightarrow Developer \rightarrow 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 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!
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!
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.
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.
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.
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:
I recommend at least trying the command line first.
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 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.
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.
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.
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.
Command not found”). If that happens, you may want to try the instructions laid out here, or if you’re on Windows 10, you could go crazy and install the amazing Windows Subsystem for Linux, which allows you to work as if your computer had a real Unix operating system like everyone else.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 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.