We work with open source software. This means that the programs we use and write have a license that allows other developers to modify the source code. These licenses often require that changes to the source be shared back with the community.
What we refer to as "The Open Web" is the combination of HTML, CSS, and JavaScript. It is "open" because the code we write in these languages can be viewed and modified by anyone. A lot of the things we build borrow open code that someone else has written. In this way, we build on top of things that others have done before us, and can make better software.
The machines you have use a free operating system called Linux, which works a little differently than a Mac or a Windows PC. Linux comes in many different flavors or "distributions." The distribution on your laptops is Ubuntu. If you want to learn more about how to use Ubuntu or run into problems, you can find help and documentation in the Ubuntu Desktop Guide.
To install software on Linux, you can use the Ubuntu Software Center, or you can install programs from the command line. If you want to use the command line to install software, you would open a terminal and type
sudo apt-get install <name of program>
We use the terminal extensively in our day-to-day work. We can do a lot of magical stuff with it, but for now we'll focus on a few basics and using it for git. These are the basic terminal commands.
cd: Change Directory. This is used to move around your computer's files and folders. e.g., if you open a terminal and type cd sandbox, that would change the directory to the "sandbox" project to in your user's folder.
ls: List Directory Contents. This lists the contents of whatever directory you're currently in. It can be helpful to see where you want to cd into next.
pwd: Present Working Directory. This tells you the full path to the directory you're currently in. Kind of a "You Are Here" sign if you ever get lost.
If you need a refresher on using these or you want to see some other things the terminal can do, this Youtube video is pretty good.
Git is a version-control system that many open source projects use. Version control allows us to make changes to our code, but go back to an earlier version easily if we make a mistake. It also allows many people to work on the same project at the same time.
GitHub is a service that gives us a central place to store all of our code. We can clone this code to any computer, make changes, and push those changes back to GitHub. If we need to work on a different computer, it's as simple as cloning the project to the new computer.
GitHub has also become the programmer's portfolio. Some programming jobs now don't even ask for a resume: they just want to see your GitHub account.
The GitHub mascot is the Octocat.
Some of the best-known Open Source projects in the world are on GitHub. If you know the language they're programmed in, you can fork them, make changes, and contribute your code. Things such as:
- Mozilla Firefox
- Some projects Facebook has created (but not Facebook.com)
- Some projects Twitter has created (but again, not Twitter.com)
- Linux
We followed the instructions from Github's set up git tutorial, and configured an SSH key to get our computers set up to talk to Git.
We had a problem with @jooordan's computer that was solved by following these directions.
First we found a project we wanted to make changes to: https://github.com/bobholt/sandbox/. We clicked the "Fork" button on the top right. This created a copy of the project in our own GitHub accounts.
These are the commands we used to get a project copied to our laptops, make changes, and push our changes back to GitHub.
git clone <project url>: Clone (download a copy of) a Git project. e.g., git clone git@github.com:bobholt/sandbox.git would download a copy of Bob's "Sandbox" project to your computer. To clone your fork, you would replace 'bobholt' with your username. The URL we use to clone a project is located to the right of the screen on the main project page. Make sure it is the SSH Clone URL.
We can then work on the code on our own computers and make whatever changes we want.
git status: Ask Git to tell you the status of your code: what files have changes, what files are new, etc.
git add .: Add every file in the current directory (.) to Git's "Staging Area" (meaning that it's ready to "commit"). We could also do git add <filename> if we only wanted to add a single file or directory. e.g. git add index.html would only add the index.html file.
git commit -m "<message>": Commit the code to your local repository, and leave yourself a message so you can can remember why you made the changes you did.
git push origin gh-pages: Sync your code changes back up to the "origin", which is how we refer to the copy of your code that's up on Github. (gh-pages is what is called a "branch," which we'll get to later! For now, we'll just say it's how we magically get your code to appear at http://<your-username>.github.io/sandbox/ !)
If you have some time this week, let's do a couple of things:
- Make sure you understand everything we did on Wednesday and the notes we wrote up here.
- If you have any questions, email Bob and KAdam.
- Play around with the index.html and try to push your changes up to GitHub again so you can see them at http://<your-username>.github.io/sandbox/
- If you want a refresher on some of the HTML stuff we learned this summer, glance over this HTML Introduction (We'll go over HTML again in a couple of weeks).
- Find a website that you like and poke around the source (You can right-click on the page and select "Inspect Element" to see some of the HTML). See if you can figure out what's going on.
On 10/9 let's talk about the different kinds of projects we work on at Bocoup. We can look at some examples and start thinking about what you want your capstone project to be. Right now I'm thinking of a few things:
- FirefoxOS
- Data Visualization
- Web Applications
- Games