Commit 745c3eab authored by Laurent Heirendt's avatar Laurent Heirendt
Browse files

create template for june git training

parent 036a198d
# Generated on 2013-11-27 using generator-reveal 0.3.2
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-gh-pages'
grunt.initConfig
"gh-pages":
"gh-pages":
options:
base: "dist"
src: [ '**' ]
watch:
livereload:
options:
livereload: true
files: [
'index.html'
'slides/*.md'
'slides/*.html'
'theme/js/*.js'
]
index:
files: [
'theme/templates/_index.html'
'theme/templates/_section.html'
'slides/list.json'
]
tasks: ['buildIndex']
coffeelint:
files: ['Gruntfile.coffee']
tasks: ['coffeelint']
jshint:
files: ['theme/js/*.js']
tasks: ['jshint']
connect:
livereload:
options:
port: 9000
# Change hostname to '0.0.0.0' to access
# the server from outside.
hostname: 'localhost'
base: '.'
open: true
livereload: true
coffeelint:
options:
indentation:
value: 4
all: ['Gruntfile.coffee']
jshint:
all: ['theme/js/*.js']
copy:
dist:
files: [{
expand: true
src: [
'slides/**'
'theme/**'
'theme/css/**'
'theme/js/**'
'slides/img/**'
]
dest: 'public/'
},{
expand: true
src: ['index.html']
dest: 'public/'
filter: 'isFile'
}]
# Load all grunt tasks.
require('load-grunt-tasks')(grunt)
grunt.registerTask 'buildIndex',
'Build theme/templates/_index.html and slides/list.json.',
->
indexTemplate = grunt.file.read 'theme/templates/_index.html'
sectionTemplate = grunt.file.read 'theme/templates/_section.html'
slides = grunt.file.readJSON 'slides/list.json'
html = grunt.template.process indexTemplate, data:
slides:
slides
section: (slide) ->
grunt.template.process sectionTemplate, data:
slide:
slide
grunt.file.write 'index.html', html
grunt.registerTask 'test',
'*Lint* javascript and coffee files.', [
'coffeelint'
'jshint'
]
grunt.registerTask 'server',
'Run presentation locally and start watch process (living document).', [
'buildIndex'
'connect:livereload'
'watch'
]
grunt.registerTask 'dist',
'Save presentation files to *public* directory.', [
'test'
'buildIndex'
'copy'
]
# Define default task.
grunt.registerTask 'default', [
'test'
'server'
]
{
"name": "template",
"version": "0.0.1",
"private": true,
"devDependencies": {
"grunt": "~0.4.1",
"grunt-coffeelint": "0.0.7",
"grunt-contrib-connect": "~0.5.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-jshint": "~0.7.0",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-gh-pages": "~0.9.0",
"load-grunt-tasks": "~0.2.0"
},
"engines": {
"node": ">=0.8.0"
},
"scripts": {
"test": "grunt test"
}
}
## Best practices
* `pull` before `push`
* Work on your <font color="red">own</font> branch (in your own fork), and **not** on `master` and **not** on `develop`
* Do **not push** to `master` or `develop`, but **submit a PR/MR**
* Get your code **reviewed** by your peers (submit a PR/MR!)
* Submit a PR/MR **often**!
* `clone` a repository, do not download the `.zip` file.
* Do **not** combine `git` commands
```bash
$ git commit -am "myMessage" # do not do this
```
* Stage only 1 file at once using
```bash
$ git add myFile.txt
```
* Commit **only a few files** at once (after multiple separate `git add` commands)
* `Push` often - avoid conflicts
<br><br>
Remember: **A `push` a day keeps conflicts away!**
## Development scheme
<br>
Generally, in a repository, there are guidelines for contributing.
<div class="fragment">
<br>
A common development scheme is dual with a:
- **development** version of the code on `develop`
- **stable** version of the code on `master`
<br>
A **version** of the code is referred to as a **branch**.
<div class="fragment">
<br><br>
<img src="img/icon-live-demo.png" height="100px">
<br>
<font color="red">In the practice repository, the development branch is called `develop`!</font>
<div class="fragment">
<br>
![bulb](img/bulb.png) Use this dual development scheme for your own repositories!
## Branches
A **version** of the code (i.e., a **branch**) is made up of a sequence of code changes.
<div class="fragment">
<br>
These individual code changes are called **commits**.
For instance, the `master` and `develop` branches can be represented as a timeline:
<img src="img/branch-master.png" class="branch-master" />
## Switch between branches
List all branches of the repository with
```bash
$ git branch -a
```
Exit by typing `q`. The branch with the ***** is the current branch.
<div class="fragment">
<br>
Checkout another branch
```bash
$ git checkout branchName
```
<div class="fragment">
<br>
You can switch to the `develop` branch with
```bash
$ git checkout develop
```
<div class="fragment">
<br>
<img src="img/icon-live-demo.png" height="100px">
## Create your own version
Assume that you want to work on a function for adding 2 numbers.
<div class="fragment">
<br>
<font color="red">Create a new **branch**!</font>
```bash
$ git checkout -b add-2-numbers
```
The `-b` flag creates the branch.
Locally, you have your own version now:
<img src="img/branch-create.png" class="branch-create" />
Push your version to your fork:
```bash
$ git push origin add-2-numbers
```
<br>
<div class="fragment">
<br>
<img src="img/icon-live-demo.png" height="100px">
## How do I start working on a repository?
You have to `clone` it first:
```bash
$ git clone git@github.com:userName/myRepo.git myRepo
```
<div class="fragment">
<br>
If you did not configure your SSH key, clone using HTTPS:
```bash
$ git clone https://github.com/userName/myRepo.git myRepo
```
<br>
<div class="fragment">
You will be prompted to enter your credentials.
## How to configure `git`?
```bash
$ git config --global user.name "Firstname Lastname"
$ git config --global user.email "first.last@uni.lu"
```
## Test the configuration
Test whether your username and email have been registered
```bash
$ git config --list
```
<br>
This should list the configuration with `user.name` and `user.email`.
<br>
Exit by typing `q`.
## What is an SSH key?
An SSH key is a secure access credential.
<div class="fragment">
<br>
**Principle**: <br><br>
Communicate **securely** with Github/Gitlab **without** entering the username/password.
## How do I get and set my SSH key?
<br>
Check if you already have an SSH key:
```bash
$ ls -al ~/.ssh
```
<br>
If there are 2 files named `id_rsa`, you have an SSH key.
<div class="fragment">
<br><br>
If you don’t have yet an SSH key, you have to generate one:
```bash
$ ssh-keygen -t rsa # -b 4096
```
<br>
Then, add the SSH key to Github/Gitlab.
<div class="fragment">
<img src="img/icon-live-demo.png" height="100px">
\ No newline at end of file
## The 5 essential commands
<br>
**Yes**, you only need 5 commands!
<br>
`pull, status, add, commit, push`
<br>
or in other words (remember these!):
```bash
$ git pull <remote> <branch>
$ git status
$ git add myFile.txt # example
$ git commit -m "myMessage" # example
$ git push <remote> <branch>
```
## Pull the latest version of an existing branch
Pull the latest revision on branch `add-2-numbers`:
```bash
$ git pull origin add-2-numbers
# Already up to date
```
<div class="fragment">
<br>
Verify its `status` with:
```bash
$ git status
```
## Modify a file
Modify and rename `addTwoNumbers.m` in the folder `src/firstCommit` as `addTwoNumbers_myName`:
```bash
$ cd src/firstCommit
$ git mv addTwoNumbers_myName.m addTwoNumbers_laurent.m # replace myName
```
<br>
Open the file using the `Visual Studio Code` editor (or any other editor)
and correct the line
```Matlab
c = a - b;
```
## Add your file to the stage
First, check the repository status
```bash
$ git status
# uncommitted changes (displayed in red)
```
<div class="fragment">
<br>
**ADVANCED**: see your changes in the terminal
```bash
$ git diff
```
exit with `q`
<div class="fragment">
<br>
Now, add the file (bring it on stage)
```bash
$ git add addTwoNumbers_laurent.m # replace myName
$ git status
# returns the same as before, generally in green (means staged)
```
## Add a commit message
```bash
$ git commit -m "Correcting formula for adding 2 numbers"
$ git status
```
## Push your file to your fork
```bash
$ git push origin add-2-numbers
```
<div class="fragment">
<br>
**ADVANCED**: see the log of all the commits (and your last one) in the terminal
```bash
$ git log
```
exit by typing `q`
## Do it yourself
**Exercice 1:**
* Edit the test in `test/suite`
<div class="fragment">
<br>
<img src="img/icon-live-demo.png" height="100px">
<div class="fragment">
**Exercice 2:**
* Checkout a new branch named `multiply-2-numbers`
* Rename and modify `src/secondCommit/multiplyTwoNumbers_myName.m`
* Push the file `src/secondCommit/multiplyTwoNumbers_myName.m`
* Don't forget to edit <font color="red">`_myName`</font>
\ No newline at end of file
## What is a `fork`?
<div class="fragment">
<img src="img/fork.jpg" class="as-is" />
[//]: <> (http://www.cndajin.com/data/wls/246/22302193.jpg)
## Not really ...
<img src="img/fork-crossed.png" class="as-is" />
## What is a `fork`?
In general, when contributing to a repository, you only have **read** access.
<div class="fragment">
In other words, you can only **pull** (unless it is your own repository or access has been granted).
<div class="fragment">
<br>
In general, you **cannot write** changes. In other words, you do not have **push** access.
<div class="fragment">
You have to work on your **own copy**.
<div class="fragment">
<br>
In other words, you have to work on your own <font color="red">**fork**</font>.
## How to get a fork?
Browse to the original repository and click on the button `Fork`:
![Fork the repo](https://help.github.com/assets/images/help/repository/fork_button.jpg)
<div class="fragment">
<img src="img/icon-live-demo.png" height="100px">
## Time to practice!
<br>
Fork the practice repository: <br><br>
https://git-r3lab.uni.lu/R3school/git.practice
Then, clone your fork to your home directory!
<div class="fragment">
<br>
<img src="img/icon-live-demo.png" height="100px">
<div class="fragment">
<br>
```bash
$ git clone ssh://git@git-r3lab-server.uni.lu:8022/yourUserName/
git.practice.git practice
```
<br>
Change to the practice directory with:
```bash
$ cd practice
```
<font color="red">
Any other rudimentary method such as
*'I simply download the `.zip` and unzip it - works like a charm!'*
shall **be avoided**!
</font>
<div class="fragment">
<br>Why?
## How to update my fork?
As you have your own fork, it will not automatically update once the original repository is update.
![bulb](img/bulb.png) You have to update it yourself!
<div class="fragment">
<br>
**More on that later!**
## GitHub and GitLab
<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" style="width: 200px;"/>
<img src="https://gitlab.com/gitlab-com/gitlab-artwork/raw/master/logo/logo-extra-whitespace.png" alt="GitLab" style="width: 200px;"/>
GitHub and GitLab are VCS systems.
GitHub is **public**, whereas GitLab is **restricted/private**.
Positive point: GitHub and GitLab are (almost) the same.
## GitHub
[https://github.com](https://github.com)
<br><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" style="width: 200px;"/>
<div class="fragment">
<img src="img/icon-live-demo.png" height="100px">
## GitLab
[https://git-r3lab.uni.lu](https://git-r3lab.uni.lu)
<br><img src="https://gitlab.com/gitlab-com/gitlab-artwork/raw/master/logo/logo-extra-whitespace.png" alt="GitLab" style="width: 200px;"/>
<div class="fragment">
<img src="img/icon-live-demo.png" height="100px">
\ No newline at end of file
## Homework
Ideally, do this exercise on a computer on which `Matlab` or `octave` **are** installed.
<div class="fragment">
<br>
More information on how install these software are on [mathworks.com](www.mathworks.com]) or on [gnu.org/software/octave](gnu.org/software/octave)
<div class="fragment">
<br>