Project Management

Individual assignment

Learning outcomes:

Have you:

Software Used

Student agreement

Download it here.

Useful Links

Making a Website

Useful reminders

I keep forgetting basic stuff on HTML editing so in order to make my life easier I will start by enumerating useful codes and location of stuff like my template page:

HTML uses tags for each entry like a paragraph or a button so I enumerate the tags I will use the most while editing my pages:

ps: one should open the tag with <some tag inside here> and not forget to close the tag with </same tag inside here>

Research

To get an idea of what my site would look like I went to the 2016 Fab Academy Student Archives in order to have a look at what others have done and used the random student button.

Random Student

After reviewing a few pages I found Yuji OKI's page which led me to the Fab Academy Template by Massimo Menichinelli

Yuji OKI's page Yuji OKI's page

Fab Academy Template by Massimo Menichinelli Fab Academy Template by Massimo Menichinelli

Using Massimo's template

On GitHub, I cloned the repository for Massimo's template page to my hard drive. Then copied its contents to a directory with my name.

Editing

The code editors I chose to use are Sublime_text3 and Brackets.

About Sublime_text3:

Sublime is great for coding, diffing, and merging two codes. I especially like to use the plugin "Sublimerge3", It lets me compare 2 files and then merge portions of the code.

About Brackets:

Most of the time that's where I code HTML. The great feature Brackets have is to update in real-time what you code into the browser page. This way every single modification can be viewed without the need to refresh.

To install it on a macOS I simply run the following terminal commands:

$ brew install --cask sublime-text
$ brew install --cask brackets

Brackets Snapshot Brackets Snapshot

Customization of the template's CSS

CSS lets you style your HTML. This can be done in 3 ways: Inline, Internally, and externally.

As the current template uses an external method, and it's a huge time saver, that's how I went with. In some places of my website, for lack of better understanding of how CSS works I might have used inline styling.

The external style files are bootstrap.css and fabacademy.css. These files are referenced in the <head> section at the beginning of each HTML file.

So far I changed only a few settings in order to achieve the current settings and they are in the fabacademy.css file:

In the bootstrap.css I also did some changes as exemplified below:

As I had near 0 knowledge of HTML editing or CSS and to better understand HTML Prior to the above modifications I watched Massimo's lecture on HTML and CSS

Massimo's lecture on HTML and CSS

Also used HTML references at w3schools.com

W3Schools

Website Folder Structure

Currently, the folder structure is quite simple and will need some cleanup.

Folder Structure:

Current folder structurecurrent folder structure

Installing ncdu and using it in order to check for big files

In order to save space on the server as well as have a faster loading website we need to constantly make sure we don't miss big uncompressed image and video files

  1. On a Linux terminal type:
    2. sudo apt install ncdu

    Installing ncdu

  2. Start ncdu on a Linux terminal by typing:
    3. ncdu

    ncdu will open and with the up and down arrows and enter key you will be able to navigate your directories.

    Navigating with ncdu

    ncdu will classify the biggest files first and show the more hash tag characters "#" for the biggest folders or files.

    Finding the biggest file with ncdu

    In this case, the biggest file is a video file for my final project sketch

Compressing the biggest files

For the video file we will use ffmpeg

  1. Start by installing ffmpeg on a Linux terminal:
    2. sudo apt install ffmpeg
  2. Next run ffmpeg on the big video file as per my example:
    3. ffmpeg -i input_video -vcodec libx264 -b:v 1000k -vf scale=-2:720 -an output_video.mp4

The code above should give you a 720p video without audio for more examples check Neil's ffmpeg cheatsheet

For the images you can use a software called Gimp and a plugin called bimp.

    I use a package managing software called Chocolatey in order to install some Windows software.

    It works similarly to apt but for Windows.

  1. On a Windows administrative shell run:
    2. choco install gimp
  2. Then download bimp from its website and then install it so you can run it under gimp.
  3. After installation is finished run gimp and select the batch image Manipulation plugin

    4. BIMP Start

  4. In order to load a previous set or to save a new one you have to press the Add button then select the desired operation

    5. BIMP Adding

  5. In my case since I had the set saved already I selected "load set"

    6. BIMP Load Set

  6. Then select the set, in my case "readyforweb.bimp"

    7. BIMP Selecting Set

  7. In order to create or modify the behavior of the plugin click on the add to add a process or click on one of the ones you have saved prior

    8. BIMP Editing Property

  8. Inside the resize set I selected the options I wanted specifically the width to 800px

    9. BIMP Editing File Size

  9. Then I went to the other process and opted for 75 compression ratio as well as convert the format to jpeg

    10. BIMP Editing Compression

  10. Then I selected all images I needed to convert at once and applied the changes

    11. BIMP Selecting Images

  11. Next copy converted images to your folder if you did not specify it before.

Installing and using git

First I am using macOS. With that in mind and with many possible terminal applications to be installed it's useful to have Brew it helps with all installations one needs to do on Terminal and desktop.

To install open terminal and run:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Next install Cask it helps installing desktop app

$ brew tap caskroom/cask

Next install Github desktop that will include Git as well

$ brew install --cask github

Github Snapshot Github Snapshot

Working with your Repository

Now that I have the website set locally it's time to upload it to the Fab Academy repository.

To do that I will have to save my public ssh key into the Fab Academy's gitlab website it will let me access it using git without the need to type my password every time. After that, it's necessary to clone your repo to the local drive to start working on it.

A source of info on how to do it is at the ssh help at gitlab, following is how I did it.

Step-by-step instructions:
  1. Since I previously had installed git I go ahead to the directory I want to work and create an ssh key with:
    2. ssh-keygen -t rsa -b 4096 -C "your_email@domain.com"

    This will generate the SSH key and the label of the key will be whatever you include inside the quotes

    Generating public/private rsa key pair.
Enter file in which to save the key (/Users/someone/.ssh/id_rsa):
  2. After a while, a message will ask to either leave the location and name of the new SSH key as default or make a new one. I chose a new typing a location and a new file name.
    3. Enter file in which to save the key (/Users/someone/.ssh/id_rsa): /Users/someone/.ssh/id_rsafab
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/someone/.ssh/id_rsafab.
Your public key has been saved in /Users/someone/.ssh/id_rsafab.pub.
The key fingerprint is:
SHA256:IheXdVbB4DChb7Lyo5nJPHhNyExDKAFw5kADUTMR7MU your_email@domain.com
The key's randomart image is:
+---[RSA 4096]----+
|XBX= .    =.++o. |
| =+oE .  + *  .  |
| ..o .. +   .    |
|  .   oo .       |
|    .+ooS o      |
|     o+..+       |
|     ..o.        |
|    .oo*o        |
|     .Bo..       |
+----[SHA256]-----+
  3. Show your ssh key running 
    4. $ cat ~/.ssh/id_rsafab.pub
  4. Next you can select the text on the screen that will look like this 
    5. ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQDRdz+KsRwD2jgojGESZzVQNtFT0uWLGZAieKRNMy4ytav//ABgEB5eAWFTU/YfjQn2apnt+YgXC7aWfjk8Ta5/AQblQ2r/randomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekeyrandomfakekey+rEk6OvIq5F46sKZclXdCLFbj4b9CP5wlFVWm/vq/tgeEbc701587xVCSq/7Ssqv5GNbipbq8eGElKiM4J7h1xlEJmSb06uuqk7PswQjDhV2RFHTl6sNM45qJw30y9O3WkfddFmW5nQ8roP880ef0rvvWK51nvUpmm37rIrHa+rdFpPc9U0bRZ5BhYpp/wMnVHLmZB8W/9Wf2TN0TD/H1AWjvQ1O2EJxKn7GStVGUzopCcIwt+jEjcMZRC/pRZnvEjH30FAFv5F+kYQwmsKcNuZz+qLWF8D5sjVySHSdERLJ3Y7h4ObCJt0ll5+NJ7syf1S7gCotvT910Evorq1f2jb4l6Lt1gJz7uXA03va0HhaBGTKTB0mF7NRJusotyhGWncXgNTkZOkfFQ5Ps1xAcLRmB0uMt0/3MnS7ONu/TfJVuSqYqUuuUtz9hqbke4I4JsD+X7e1a4gAvsFK/nv6Usf0m8aQ== your_email@domain.com
  5. Because my key is not default I need to let the SSH agent know where it is typing:
    6. $ eval $(ssh-agent -s)
Agent pid 9284

$ ssh-add ~/.ssh/id_rsafab
Identity added: /Users/someone/.ssh/id_rsafab (/Users/someone/.ssh/id_rsafab)
  6. Next is to load the public key to gitlab and copy your repo ssh key address, in case you do not know it. Go to gitlab.fabcloud.org
  7. Login with the fablabs.io
  8. Locate your lab and then your student name;
  9. There you can copy your repo ssh address by switching html to ssh.

    10. GitLab SSH Address

  10. Next add your key to your user profile

    11. GitLab User Profile

  11. Now it's time to clone your repo and start with the "mantra"... so with your prior copied ssh address type the following
    12. git clone git@gitlab.fabcloud.org:academany/fabacademy/2018/labs/yourlab/students/yourname.git
  12. Now that your repo is cloned locally you can either start editing your HTML right there or paste your already edited website or template in the directory created.
  13. Now the "MANTRA"
    14. git pull
git add --all
git commit -m yourmessagehere
git push

    This series of commands will make sure:

    1. First (git pull) you are updated with your origin
    2. Second you add all new alterations to your local branch (git add --all)
    3. Third you committed all changes (git commit -m yourmessagehere)
    4. And last you sent the commits to your origin (git push)

Git and Bash Notes:

(Notes here are to be added along the course as a cheat list of git commands)

Creating a new Repo

I wanted to include instructions on how to create a new repo and upload it to GitHub for future reference even it was not how I did

  1. First it's necessary to be on the working directory and then make it a git directory with:
    2. git init
  2. Next add all files to the local repo and stages them for commit
    3. git add .
  3. Next needs to be committed with:
    4. git commit -m "First commit"
  4. Now create a new repository on GitHub

    5. GitHub New Repository

    GitHub New Repository

  5. Then copy the remote repository address

    6. GitHub Remote Address

  6. Now add a remote with the copied address
    7. git remote add origin copied_address_here
  7. Finally push everything with:
    8. git push -u origin master

    And it's done

  8. Notes on git:
  9. Notes on ffmpeg: