CCFA15_week_8.md

Clouds to Circuits / Filesystems, Git, IDEs

Networks!

There are networks everywhere! Here are some kinds.

Centralized

Decentralized

Distributed

The Internet, everybody's favorite distributed network!

Say Hello to the terminal

Proceed with caution!

Be aware that the terminal won't babysit you in the way you're used to. You can do some serious damage if you're not careful. In a worst-case scenario, you could delete some or all of your hard drive by accident (trust me, I've done it). But we're hackers now so we can handle it, just remember to be careful and take your time. Also, back up your computer if you aren't already!

The basics

Applications->Utilities->Terminal.app

Turn up your volume, then let's say hi! Using say followed with text will say it out loud.

$ say hello

Time to get existential — whoami will tell you your username.

$ whoami

When you see ls think "list" -- list files in the current directory.

$ ls

But wait, what is the current directory? pwd is "path with directory" and will tell you where you are.

$ pwd

The dot (.) means current directory (folder). Commands like ls assume you mean the current directory if you don't say otherwise.

# same thing!
$ ls
$ ls .

Two dots (..) means the folder above this one. So this means "list the contents of the folder above me". But notice that pwd stays the same, because we never left the current folder.

$ ls ..
$ pwd

But this is boring, let's go somewhere! cd will change the directory. For instance, this will move one folder up (use pwd to check):

$ cd ..
$ pwd

So let's get to the root of the matter! This will go to the very top folder of your hard drive. Use some of the tools we've learned to look around:

$ cd /
$ pwd
$ ls

If you really get lost, open will open in the Finder (which you're probably more comfortable with).

open .

Notice there are some files you can see in the terminal but not in the Finder! The people making OS X decided we can't be trusted with everything. Good thing we know how to use the terminal now.

This will bring us back to home base, in the terminal ~ means home.

$ cd ~

Ok so that's all great and everything but what else can we do? Well for one thing, there's "piping":

$ whoami | say

The | character takes the output of one command and sends it to another one. That last takes the output of whoami (your username) and instead of just spitting it out as text it sends it to the say command. Let's try another one:

$ pwd | say

What about ls?

$ ls | say

Oh no, how do I stop it!?

• control + c -> Eject! Force whatever you're doing to cancel
• contrul + u -> Remove currently typed text
• up key / down key -> Look through your history
• tab key -> Autocomplete

Some other helpful tools: for most commands if you type the command and -h it will give you some basic info about how to use it:

$ say -h

And you can usually get more in-depth instructions from the manual (man) command:

$ man say

This might look like gibberish to you now, but you'll get used to it over time. For instance, I learned that you can get a list of voices by entering this:

say -v ?

And I can use that list now to output things in different voices:

say -v Trinoids whoa this is a weird one
say -v Pipe Organ bum bum bum bummm bum bum

You get the idea ;)

Say hello to git

Some basic terms:

• Git is a free and open-source "revision control system" built for programming projects. It uses a distributed networking system to manage tracking code between collaborators. Think of it as a "Save" for your code project, in the same way you would save an Adobe Illustrator file or a Word document. Or even better, think of it as Time Machine for your code, since it keeps track of all of your changes, and allows you go back to older versions if you need to.

• GitHub is a company that makes it really easy to use Git. They are a good study in the power of designing user experiences, as the popularity of Git now is partually fueled by the ease of use on GitHub.

• A repository is the archive where all the information about your project is stored.

• A commit is basically an individual "save" for a Git repositry. It's a snapshot of a particular moment in a project's history, containing information about everything that has changed since the last commit. When you save a commit you also add a commit message, which is a brief written description of what has changed in the project.

• Cloning is when you copy a Git repository to make a new one. This is what happens when you copy files from GitHub onto your computer. Every Git repository can be cloned infinite times, and each clone can be synced with the others.

Git, meet the terminal

Ok, so let's do some ... uh .. gitting? First go to your GitHub account (hint: you should have put your username in the class Google Doc).

Let's fire up the terminal. First make sure you're in your home folder.

$ cd ~

Ok, now let's make a folder to store our code projects in:

$ mkdir Code

Now cd into that folder.

$ cd Code

Ok, now go to your Git repository and copy the "clone" URL:

~clone-url

Now type git pull and then paste the link into the terminal: (so your url should be in place of `[path to your repository]" below:

$ git pull [path to your repository]

Now if we try ls we should see our newly cloned project! Let's use cd to go inside and check it out:

$ ls
$ cd [name of your project]

Ok now let's see what's going on in git.

$ git status

Try and change a file, and then see:

$ git status

How do we save?

$ git add .

But now it's only saved on my computer. How do I get it back up to the server?

$ git push

What if somebody else makes changes? Or what if I change it somewhere else?

$ git pull

Ok! Now we're ready to go!

HTML Demo

• Opening site in Atom
• Open in browser
• Refresh, refresh, refresh!
• Basic HTML
• Adding links
• Adding images
• Basic CSS
• Background colors
• Fonts
• Magic?
• Bringing in JavaScript??

Assignments

1. Make a basic HTML website! Anything goes really, but make sure to add your "Drawing Machine" project.
2. Read "The Information"