Going to do teamwork tonight. Tonight’s assignments:
- Chrome Developer Tools Scavenger Hunt
- Journal (ongoing)
- Start of a website for a client.
Normally, when you interact with a client, they specify what they want. From their guidelines, you create a client brief, and then a wireframe. And so, we’re going to take a client brief and wireframe and code them up.
Because we’ll be working as teams, we have to figure out how to collectively edit files that have different people working on them at the same time. The challlenges:
- Communcation at a distance.
- Collaboration on editing:
- If you’re good at this, you can see what everyone else is doing, and…
- You won’t step on each other.
For this assignment, we’re going to use a project management site. There are many, but we’re going to use Basecamp, which has To Do lists, discussions, etc.
(If you don’t log out of Facebook, Google, Amazon, IMDB, they’re tracking every site you visit.)
We learn well by association, and by seeing two things at the same time. Edward Tufte, famed statistician and artist, said that important things need to be within your eyescan. You want to have code and its effect visible at the same time; if you continue in this field, invest in more monitors.
There are Git graphical interfaces, including SourceTree – there’s a list here. However, in this course, we’re going to continue to use the command-line.
Branches in Git are steps toward a goal. The gh-pages branch, for example, is for hosting the content and making it public. In real work, we don’t push into public.
In this next phase of working with Git, we will use it for a team exercise and learn how to collaborate using Git.
When you start a repo on GitHub, to bring it to the local drive, you use git clone (for the first time only) then git pull (for every time after that).
Another simple guide to Git here: http://rogerdudler.github.io/git-guide/.
For now, we’re working with four branches:
- Master (local)
- Master (GitHub)
- gh-pages (local)
- gh-pages (GitHub)
In our case, master is the best, most recent working code (and on team projects, code we’re sharing with one another). gh-pages is the code we publish.
The basics of starting a team project:
- Create a repo.
- Add collaborators.
- The collaborators will do a git clone to bring the repo to their local drive. The first thing they will get is the master branch. Also, will get the gh-pages branch.
Here is the basic team workflow, as demonstrated in the class “Ping Pong” exercise.
Constant process of merging between individual branches and master. To bring collaborators’ contributions to one’s local working branch:
- Do a git pull into one’s local master branch. 2 Moveo into one’s local working branch.
- git merge master.
Then, after one commits some changes on the local working branch:
- git checkout master (to move back into the master branch).
- git merge local_working_branch.
- git push (to update the remote version of the master branch).
If you can understand this, you’ll be a rockstar. Things move fast when you’re on deadline, so keep in constant communication: Slack or Basecamp (or whatever means of communication you’re using). Email is not so good – too many distractions.
The project workflow:
- In GitHub, create a new repository (public).
- Use SSH for the clone.
- On your computer, in Terminal, type git clone (paste URL here).
- Move into the directory that has the repo.
- git branch (to see where you are).
- Make new index.html file.
- git add index.html.
- *git commit -m”Initial commit”
- git push origin master (For the first push).
Back in GitHub, can now add collaborators, and GitHub will send them an email notification.
For the collaborators, after they receive the email:
- git clone (paste URL here).
- git branch (to see where you are, and make sure you’re in the master branch).
- git branch Your_personal_working_branch (git branch followed by a new branch name creates the new branch).
- git checkout Your_personal_working_branch
- Make changes.
- git add any changes
- **git commit -m”description of the changes”
- git checkout master
- git merge Your_personal_working_branch
- git push
WHEN WORKING ON THIS TEAM PROJECT, MAKE CHANGES ON YOUR OWN PERSONAL WORKING BRANCH, NOT THE MASTER BRANCH.
Then, share the code on the master branch.
Project will be a site for a massage therapist. On Basecamp, will have a client brief, design, To-Do’s, text documents, a calendar, discussion. Share the To-Do’s – these are self-managed teams, so everyone can choose their own assignments. When we present the project, everyone will need to be able to explain every piece of code they worked on.
Be careful about images and other content taken from elsewhere. We need to be able to supply a license for everything we use. (Lots of Creative Commons images out there.)
Commits: “String of pearls.” o-o-o-o-o-o-o-o-o
Each repo has a master branch, but may also have other branches. gh-pages, for example, is the “sharing branch” which deploys the visible version.
You don’t want to be afraid of changes. To move quickly, you have to make pages.
gh-pages - Name you will always use for the public branch on GitHub. (Other companies may use different version control systems.)
For collaborations, there are other branches, in addition to the gh-pages branch – for each user who’s contributing to the project.
#####To sort out a merge conflict:
- Fix file, clean up.
- Save.
- Git add
- Git commit.
GitHub: Need to switch to public-key encryption – way to keep things secret.
To create public and private keys: https://help.github.com/articles/generating-ssh-keys/
Fixed header: Find ways to compensate for space it takes, when jumping to an internal link down the page.
- Could add extra margin at the top of the element, but it might ruin the design.
- Or could make an internal div above the element that we want to link to, then link to the empty div, rather than to the element that we’re actually jumping to.
A way to find great public spaces in which to work: https://workfrom.co/.
When trapped in Vim, hit Esc over and over, and if that doesn’t work, Type i for insert mode, then :q!.