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¶
- CSS Flex tutorial This might be helpful if you're struggling with Flex layouts.
Opendir and 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.
- Hermione will tar up the assignment folder (say
a09
into a file calleda09.tar
) - Hermione will drop the tar file into Ron's account.
- 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.