Reference Material and Links

This page has links to lots of useful reference material. If there's something that you think should be here but isn't, please let me know!

Visual Studio Code

We'll be using Visual Studio Code (VSC) for editing remote files this semester. You can find installation instructions for VSC at that link.

Tutorials

Web Page Permission Troubles

Permission troubles discusses permission troubles and what to do about them.

Copying Code to your Partner

When working with a partner, you will typically choose one person's account to do all the development on. At the end of the assignment, both partner's should have a copy, for studying, future reference and the like. So, how can you copy the finished work to a partner's account?

Since the usual assignment involves an HTML file, maybe a CSS file, at least one JavaScript file, and possibly images and other supporting files, arranged in folders and sub-folders, it's helpful to package all that up into a single file from which the original structure can be reconstructed. A traditional solution to that in the Unix world is a tarfile. (I can tell you more about the history of that word, below.)

For purposes of exposition, imagine that Hermione and Ron have worked together using Hermione's account. We'll solve this with 3 steps.

  1. Hermione will tar up the assignment folder (say a09 into a file called a09.tar)
  2. Hermione will drop the tar file into Ron's account.
  3. Ron can (whenever he wants) reconstruct the a09 folder from the tarfile

Let's look at each of those steps

Creating a Tarfile

To create a tarfile out of a folder, we typically are in the folder that contains the folder we want to tar up. Here is how Hermione will tar up folder a09 in her cs204-assignments folder:

cd ~/public_html/cs204-assigments
tar -cf a09.tar a09

The -c means to create a tarfile, and the -f means to put the result in the named file. These two arguments are combined as -cf

Dropping a File

I (Scott) created the drop command many years ago. It's not part of standard Unix. It copies a file to a destination user's account, transferring ownership of the file to the recipient. In that sense, it's a little like a physical mail box: you put stuff in, and you can't get it back out again. Rather like sliding a printout under a professor's door.

However, before people can give you files, you need to create a "drop box." This is done just by creating a folder called "drop" in your home directory. Since Hermione needs to drop the tarfile into Ron's account, Ron needs to do the following:

mkdir ~/drop

Note that Ron only needs to do that once, and then anyone can drop files in there. The ownership of whatever files are dropped in there are transferred to Ron, so he will own them and be able to copy or move them to other places, open them, un-tar them, and so forth.

Once Ron has created his drop folder, Hermione can drop the tarfile in there. So, she does this:

drop rweasley a09.tar

The first argument of the drop command is the person whose drop folder you are putting the file in, and then the second argument is the file.

Un-tarring

Lastly, Ron can un-tar the file. Note that his drop folder will have sub-folders, one for each person who dropped a file to him. In this case, he wants the file he got from Hermione, and he wants to copy it to his assignments folder, and un-tar it.

cd ~/public_html/cs204-assignments
cp ~/drop/hgranger/a09.tar a09.tar
tar -xf a09.tar

The last command "un-packs" the tarfile.

Summary

Here's a high-level summary of the commands. I'll prefix each prompt with the person who does that command.

rweasley$ mkdir ~/drop

hgranger$ cd ~/public_html/cs204-assignments
hgranger$ tar -cf a09.tar a09
hgrander$ drop rweasley a09.tar

rweasley$ cd ~/public_html/cs204-assignments
rweasley$ cp ~/drop/hgranger/a09.tar a09.tar
rweasley$ tar -xf a09.tar

That's it!

Terminological Note

The tar command is very old. It was originally a way of archiving a directory onto magnetic tape, creating a Tape ARchive. So the command was named tar. Later, people started using tar to write the archives onto files instead of tapes, and those files were called tarfiles.

Reference Material

  • Mozilla Developer Network This is an excellent resource. Most of the time, you can look up anything you want by including "MDN" in your Google search term. For example, Google for "MDN console.log" to find out more about JavaScript's console.log
  • W3Schools has tutorials and reference material on many topics, including everything in our course. W3Schools is more novice-friendly than MDN, though not quite as comprehensive. It often has a very nice "try this" way of experimenting with code elements
  • jQuery and JQuery API is the canonical source of information about jQuery
  • Quirks Mode has some nice information and essays
  • more to come. Please send me your suggestions

Template

You can use this template as a starting point for your web pages. It includes the validator icons (you can remove them if you want, or use CSS to hide them) and the meta charset tag and such.

The page references a style.css file, to make it easy for you to create one, but it doesn't supply the file. Just create one using Visual Studio Code.

Validators

  • The nu W3C Validator for HTML 5.
  • The old W3C Validator for HTML.
  • The W3C Validator for CSS.
  • Adding validation icons to your pages for HTML and CSS.
    • <p>
  <a href="http://validator.w3.org/check?uri=referer">
     <img 
       src="http://cs.wellesley.edu/~cs110/Icons/valid-html5v2.png"
       alt="Valid HTML 5"
       title="Valid HTML 5"  
       height="31" width="88">
  </a> 
</p>

    <p>
  <a href="http://jigsaw.w3.org/css-validator/check/referer">
     <img 
       src="http://cs.wellesley.edu/~cs110/Icons/vcss.gif"
       alt="Valid CSS"
       title="Valid CSS"  
       height="31" width="88">
  </a> 
</p>

Google Fonts

The list of Google Fonts.

Tar

The otter images are in a file format called tar (tape archive -- this format has been around for a while). It allows a directory tree to be contained in a single file, which is much easier to copy around.

tar xf otter-images.tar

will create the folder from the tar file. You can then copy/move it wherever you need to.

JavaScript Visualizer

JavaScript Tutor (also Python, C and C++)