How we feelin?

"rabbot’s mind" by hexmoire

Today

1. Finish Git demo (finally!)
2. Discuss "Web Design, The First 100 Years"
3. Talk about research & prototyping.
4. Time project demo

Git er done!

Ok, now you probably have two folders to deal with for your class site. Hopefully they're both in your Code folder, but if not we can move them:

1. A folder called something like "[username].github.io-master" that you edited several weeks ago for the assignment (in class we downloaded it as a .zip file)
2. A folder called "class-site-git" that we pulled from GitHub in class using the git clone command.

So what we want to do is move the contents of the first folder (with our changes in it) to the second folder. How do we do this? Copy/paste!

Back to the Terminal!

Make sure we're in the "Code" folder:

$ cd ~/Code

Change directory to the "class-site-git" folder.

$ cd class-site-git

Now notice that if you do a ls -a (li*st **a*ll) you will see a ".git" folder. This is where all of the version information is stored!

$ ls -a
.       .DS_Store   README.md   malevich.html
..      .git        index.html  style.css

So now you have all of your files in an active git project. Now let's save the changes and push them to the server!

Saving changes to Git

Ok, first let's try the status command. This will tell us what's up with our git project.

Hey git, what's up?

$ git status

There's quite a bit of info in the status message here. There are two main things to pay attention to:

First files that are already being tracked by git but have updates since they were last saved (the file names will be in red in most terminals):

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

    modified:   README.md
    modified:   index.html

Next, we have files that are new and aren't being tracked by git at all:

Untracked files:
  (use "git add <file>..." to include in what will be committed)

    malevich.html
    style.css

Really what we want to do is save all of the changes in the folder, both the existing files that have been changed and the new files that aren't being tracked yet. Fortunately, that's pretty easy:

$ git add .

This basically tells git "mark all of the modified or new files in this folder to be saved." We can see what has changed by using the status command again:

$ git status

Now you should see all of the files under a heading "Changes to be committed", and they will probably have all changed to a green color.

Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

    modified:   README.md
    modified:   index.html
    new file:   malevich.html
    new file:   style.css

That means our files are ready to be committed (saved) to the git repo. Let's do it!

$ git commit -m "Add updates to class site"

Ok, if that all went according to plan then we should be able to check status again:

$ git status

And see something like this:

nothing to commit, working directory clean

Pushing changes to GitHub

$ git push origin master

Now if you go to your git repo, you should be able to see the updates!

Discussion

"Web Design, the First 100 Years" by Maciej Cegłowski

Project Ideas!

Discuss with your peers. Share the idea you researched and talk about what you know/don't know.

R&D

Testing airplane lenses used in map making at the U.S. Bureau of Standards, Washington, D.C

Design = Infinite Loop

Infinite Loop by Rob Nichols

The first step is knowing what questions to ask!

Rummy

Research

Research Library, Nanking Univ'y

Research tips

• Make a list of questions first. What are the things you need to investigate? Break it into pieces
• Look for examples first! Even examples that use different tools can be helpful. Searching GitHub helps.
• Dig deeper! Look through the documentation
• Find somebody who's already solved the problem and ask! Why not?

Some starting points

• GitHub
• Documentation for the tool you're using
• Stack overflow
• Class site resources!

Development

Prototypes & proofs-of-concept.

Dark Matter Manufacturing

Prototype:

Final Product:

Triangular Series video

Some approaches when prototyping:

• Build it smaller
• Build it out of paper, or some other tool you are familiar with
• Make it ugly but functional
• Fake it but make it pretty!
• Build it in many separate pieces, then put them all together
• Try building a simple version two different ways
• Try to do the hardest part first
• Take it one step at a time!

Time project demos

Running a Python server:

This should start a python server at the address http://localhost:8000

$ cd path/to/project
$ python -m SimpleHttpServer

More info and instructions here!

Demonstration Project

In class we began a sample project creating a "cat calendar". Browse the sample code here or download it to your computer.

Concept

The goal was to create a site that would update the background based on the current time and the image/text based on the day of the month.

Final product

Click through to see the code and demos for each step of the way:

Next Week

I will spend some time Saturday looking over your proposals and get back to you with suggestions, etc.

Office Hours

We can talk about your projects and catch up on conferences.

• Sunday: 4-7pm
• Tuesday: 7-9pm

Let me know if you plan on coming! Also, let me know if you'd like to meet but can't make these times!

Assigments

"The way to create something beautiful is often to make subtle tweaks to something that already exists, or to combine existing ideas in a slightly new way."

-- Paul Graham

1. Review prototypes
2. Read Paul Graham, "Hackers and Painters"