Project Management, Principles & Practices¶

Fabacademy Global Class¶

Fabacademy Presentation¶

Introduction to web design / git-gitlab

Introduction to the terminal¶

Everything is a FILE¶

Each file in your computer resides somewhere (in a directory), and each program in your computer is a file, hence, they live somewhere. You can know where they live, and make some programs yourself. But don’t be afraid, the only thing you need is a file.

Each program has an specific input and an specific output. These are know as std_in and std_out. For instance, a text editor can have a text input from your keyboard and an output to a file.

Every program on your computer has the ability to do a vast amount of different things. Read files, start other programs, do math, control devices. The main difference between bash and most other programs is that unlike them, bash was not programmed to perform a certain task. Bash was programmed to take commands from you, the user. To do so efficiently, a “language” was created which allows users to “speak” to the bash program and tell it what to do. This language is the bash shell language and you are about to become intimately familiar with it.

In essence, a shell program is one that provides users with an interface to interact with other programs. There is a large variety of shell programs, each with their own language. Some popular ones are the C shell (csh), Z shell (zsh), Korn shell (ksh), Bourne shell, Debian’s Almquist shell (dash), etc. Bash (also called the Bourne Again shell) is currently the most popular and ubiquitously available shell. Even though all of these shells use seemingly similar syntax, it is important to be fully aware of what shell you’re actually writing code for. Often, you’ll hear people refer to their code as “shell code”, which is about as specific as “source code” is when referring to your Java code. This guide will teach you how to write bash shell code: you should use it only with the bash shell, not any other.

Note

Probably the best guide to learn what this all means.

TL;DR

Bash is a simple tool in a vast toolbox of programs that lets me interact with my system using a text-based interface.

Useful commands¶

Getting to know eachother:

By Eraserhead1, Infinity0, Sav_vas - Levenez Unix History Diagram, Information on the history of IBM's AIX on ibm.com, CC BY-SA 3.0, Link

WINDOWS specific¶

dir - To view the contents of a directory, type “dir”
del - Subsequently, you might want to clean up useless files
clip - copy the output

UNIX specific¶

ls - list files in a folder
rm <filename> - delete files. Be careful, it won’t ask for confirmation and they won’t be in the Trash!!
pbcopy - copy the output

All¶

cd <dir> - It is frequently useful to know in which directory you are currently working To move between directories, use the cd command with the name of a directory example go to desktop is “cd Desktop”
cd .. go up a directory
open <file> open a file with the default
mkdir <filename> - To create a new directory
pwd - print name of current/working directory
ls --help - show help of ls command.
ls -a - list files in a folder (including hidden).
ls -l - show long listing format.
man ls - Format and display the on-line manual pages.
mv [-f | -i | -n] [-v] source target - change name or move file (basically the same)
cat <file> - outputs file into std_out

Redirection and pipelines¶

We can redirect the std_out of a command to a specific target. Most commonly, this will be a file.

Basic redirection and appending¶

echo "Hello" > file.txt: Says hello, but redirects the output to a file (file.txt). Creates a new file
echo "Hello" >> file.txt: Says hello, but redirects the output to a file (file.txt). Appends it to the file

Pipeline¶

Pipelines are meant for command to command communication.

pwd|pbcopy: send the output of pwd command to the input of another command, in
ps -ax|grep 'python': send the output of ps -ax (list of open processes) and only grab the ones that contain python in them

In terminal applications¶

VI(M) Screen-oriented text editor originally created for the Unix operating system.

Basic commands

Edit a file: type i - > INSERT MODE
Exit INSERT MODE: press Esc
Quit. Out of any mode: type :q
Write and quit. . Out of any mode: type :wq
Dont’ write and quit. Out of any mode: type :q!

Intro to GIT¶

Our problem¶

How many times have you done this?

project_final.doc
project_final_final.doc
project_final_final_this_one.doc
project_final_final_this_one_yes.doc
project_final_final_final_mega_final.doc

Our solution - Version Control Systems¶

source: https://xkcd.com/1597/

Version Control is the management of changes to documents, computer programs, large websites and other collection of information. There are two types of VCS:

Centralized Version Control System (CVCS)
Distributed Version Control System (DVCS)

Centralized VCS¶

Centralized version control system (CVCS) uses a central server to store all files and enables team collaboration. It works on a single repository to which users can directly access a central server.

Drawbacks:

It is not locally available; meaning you always need to be connected to a network to perform any action
Since everything is centralized, in any case of the central server getting crashed or corrupted will result in losing the entire data of the project

Distributed VCS¶

In Distributed VCS, every contributor has a local copy or ‘clone’ of the main repository i.e. everyone maintains a local repository of their own which contains all the files and metadata present in the main repository.

Welcome to Git¶

What is git?

Git is a distributed version control system for tracking changes in source code during software development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files. Its goals include speed, data integrity, and support for distributed, non-linear workflows.

Why Git?

Free and Open Source
Speed
Scalable
Reliable
Distributed Development

Git Local/Remote Structure¶

As a reference, this is a basic structure of the local/remote structure using git.

Interactions¶

Here there are some basic interactions you will normally do with your git repositories.

Cloning¶

Cloning takes a remote repository and literally clones it into a local one:

git clone git@gitlab.com;flu/supermegasuperguay.git

Status¶

Shows what is the status of your local/remote repository - if there are local or remote changes, or things to be pushed:

git status

Log¶

Shows the history of the local and remote repositories as a list of commits with more info:

git log

Basic changes workflow¶

You will most likely be using this workflow for git

Pull-add-commit-push¶

Download the last copy from the online repository and merge it with your local working directory:
```
git pull
```
Add the new files you added to git
```
git add index.html
```
or to review each sloc:
```
git add -p
```
Now name your update, so you know what you changed with this push.
```
git commit -m "COMMIT MESSAGE"
```

About the commit message

This is a general point of failure for many many students (and instructors) that do not make a relevant commit message.

Write a meaningful commit message. This should answer the question:

“If I apply this commit, I will… “.

For example:

“uploading final project idea”

This is not OK at all and will not help anyone to trace problems (and they will happen):

Upload to the Repository
```
git push
```

This is 1% of what git does

Git is much more than this. Do not hesitate to visit the docs to get more info or to follow a tutorial on more advanced features.

Guidelines¶

Warning

Students can login on gitlab using their email address (the one they use for registration) and entering their Student ID as a temporary password (they need to change it asap)

Sizes¶

Warning

There’s a soft limit on 300mb. Sites reaching 300mb will be listed on a dedicated page in the archive for public shame. Site over 300mb for two weeks in a row will get special consideration.

The size of the repository is very important for faster deploys and image loads. Images in a website don’t need to weight more than 1Mb.

Pro tip

Image optimization and why to do it: Automating Image Optimization

Tips and tricks¶

New with the terminal?

Visit this guide to get started!

Check the file-size of your folder!

You should commit 1-2MB per week. Not more!

Run the following command (Terminal or GitBash) in your folder to see folder and file-sizes:

du -sk * | sort -n

Each time you want to update your website, you should go through the following commands:

```
cd ~/Desktop/fablabbcn
git pull
<change files - modify the files in your folder> 
git status
git add .
git commit -m "<commit message>"
git push
```

Note

If you end up in Vim-Editor, quit without saving by typing: :q!

Warning

Your website might not update in your Browser until you clear the cache (Hard Refresh!)

If you still get error messages, study git or write an email to your instructor.

Setting up git¶

Note

All information provided in this page comes from here

Windows: Gitbash for windows users. This will install git and git bash, a terminal for using the command line in Windows other than the Power Shell.
Mac: command line and install from here. You can use homebrew as a package manager. We recommend to install Xcode first (from the app store, for example) and then homebrew.
Linux: Use the command sudo apt-get git in the Linux Terminal.

Make an account¶

Make an account in Github.com using the email you used in the program registration form

Format for the username

Make a username as such: name_surname

For example if my name is…

Andrés López Lee Peters: andres_lopez

Or…

Wongsathon Choonhavan: wongsathon_choonhavan

Do not use dots in your username as you will have problems afterwords.

Go local¶

In your terminal, add your Git username and set your email

git config --global user.name "your_username"

Configure you email address for uploading

git config --global user.email "your_email@mail.com"

Generate SSH Keys¶

Check if you have an SSH KEY already (If you see a long string starting with ssh-rsa, you can skip the ssh-keygen step):

cat ~/.ssh/id_rsa.pub

Generate your SSH key:

ssh-keygen -t rsa -C "your_email@mail.com"

Now let´s see your keygen

cat ~/.ssh/id_rsa.pub

Copy your key:

Windows

clip < ~/.ssh/id_rsa.pub

macOS

pbcopy < ~/.ssh/id_rsa.pub

linux

xclip -sel clip < ~/.ssh/id_rsa.pub

Go global Github¶

Add the copied key to github.com by following this guide

Go global Gitlab¶

Add the copied key to gitlab.fabcloud.org/ by following this guide

git +¶

None

How to make your web page in 10 steps¶

HTML exercise¶

In order to go through the basics of a webpage, let’s go thought some examples:

Note

Here you can download all the files needed for this guide

First of all, let’s try to understand the basic structure of a website:

Basic Page

The second example is about some of the different items that we can use in HTML.

HTML elements

Let’s give it some style!

Styling HTML

What is CSS?

CSS file

And what about JavaScript?

Making it interacive with JavaScript

Static Site Generators¶

Here is a guide for using SSG

Git Resources¶

HTML Resources¶

How the web works: https://github.com/vasanthk/how-web-works

HTML Tools¶

Online tool for Bootstrap template generator