Skip to content

Week 1: Project management

Week 1 Assignment:
  1. Download, read, and sign the student agreement
  2. Commit the file to your repo
  3. Work through a git tutorial
  4. Build a personal site in the class archive describing you and your final project

Creating GIT REPOSITORY

GitLab

Info: GitLab

GitLab -> GitLab is a web platform where you store code and manage software projects. It hosts Git repositories, allows teams to collaborate on code, includes tools to build, test, and deploy apps.

For the project management, Fab Academy use GitLab as a student repository to store documentation files. Firstly, I need to login to gitlab.fabcloud.org and choose sign in with “Fablabs”.

Email Address

The email address must be the same as your Fab Academy account.

Password Problem

While logging in to fablabs.io, I had trouble with my password, so I had to reset it. After resetting the password, I was able to access my GitLab dashboard.

Here’s my GitLab dashboard:

Git

Info: Git

Git (the tool) -> Git is a version control system. Git helps to track changes to files over time, allows you to go back to previous versions, and helps multiple work on the same project without problems. - Example: Edit file name -> save & commit -> Git remembers exactly what changed

Next, I need to download Git on my computer using Homebrew (MacOs). Without Git installed, I cannot track file changes, cannot connect Gitlab from my laptop, and cannot use commands like: ‘git clone’, etc.

Install Homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install Git:

brew install git

SSH Keys

Info: SSH Keys

SSH keys -> a secure digital identity. It works automatically after setup, no need to re-enter passwords.

Next, I’m using SSH keys for the Git authentication. Here’s how I created a new key by writing this code in the terminal:

ssh-keygen -t ed25519 -C "my-laptop-key-for-gitlab"

and then I copied the SSH keys to my Gitlab. In GitLab, go to the top navigation bar,

  1. click your Profile image > Preferences > SSH Keys

  2. click “Add SSH Key”. Set a title, pasted the copied key, click “Add key”.

Next, I verify that I can connect to Gitlab using SSH keys. I wrote in the terminal:

ssh -T git@gitlab.fabcloud.org

and then I received a message:

Welcome to GitLab, @emily-noor!

MkDocs

Info: Markdown & MkDocs

  1. Markdown -> Markdown is a lightweight text formatting language. It lets you write formatted text using plain text symbols: # Title, ## Subtitle, - Bullet points, **bold**, *italic*

  2. MkDocs -> MkDocs is a tool that turns Markdown files into a nice-looking documentation website. How it works:

    1. Write docs in Markdown
    2. MkDocs converts them into a website
    3. You can host it (for example on GitLab)

Afterwards, I utilize Mkdocs which written in Markdown language, to build the website. Mkdocs is simple and has a lot of customisations. Firstly, I downloaded the student template Mkdocs, then I replaced all my files with the new template (inside the “student-template-mkdocs-master” folder).

Tips

Initially, I didn’t replace all the files. Instead, I copied the “student-template-mkdocs-master” folder to my repository (“emily-noor” folder), but it didn’t work properly. I can preview my website with mkdocs serve but the actual website was not updating.

Then I deleted all the files from “emily-noor” folder and replaced all my files with the new template inside the “student-template-mkdocs-master” folder: mkdocs.yml, requirements.txt, docs/, .gitlab-ci.yml. And finally it works!

Problem

However, I still have this issue until now: I can preview my website with mkdocs serve, but saving the updated file doesn’t instantly update my browser.

Visual Studio Code

Info: VS Code

Visual Studio Code -> a free code editor made by Microsoft. Basically a workplace where you write and edit code. It can work with many languages (Python, JavaScript, C++, etc), has built-in Git support and clean interface.

I use Visual Studio Code / VS Code to write and edit code for my website. VS Code is a very convenient tool because I can work on local files offline.

How to download VS Code:

  1. Open Visual Studio Code Website and click “Download”

  2. Download according to your system (Windows/Mac/Linux):

  3. Since I am using Mac, I downloaded for the Mac. Then I installed to my laptop:

    1. Open the .zip file
    2. Drag Visual Studio Code into Applications
    3. Launch the app

Workflow:

I wrote code in Visual Studio Code -> Git tracks my changes locally -> SSH key securely connects to GitLab -> push my code online

Image and Video Compression

Squoosh

I compressed my profile picture and all the other images with Squoosh (to make it under 100kb). The process is fast and direct - you just need to upload the photo, set the settings and then download the file.

ffmpeg

Then, I compressed my video with ffmpeg. Ffmpeg is a command-line tool that converts audio or video formats.

The first step is to ask Brew to install ffmpeg on the terminal:

Brew install ffmpeg

After it successfully installed, write:

cd ("the folder name" or you can drag the folder here)

then:

ffmpeg -i input.mp4 output.mp4 (the name of the mp4 can be changed)

Command Explanation: Basic Command

This command takes input.mp4, re-encodes it into output.mp4

-i input.mp4 -> specifies the input file output.mp4 -> output filename

The result: quality may change slightly, encoding settings are automatic

However, if the video is long and large in size, this command above is not enough, so I added extra command like this (with the help of ChatGPT):

ffmpeg -i input.mp4 \
  -vf "setpts=0.5*PTS,scale=360:-2,fps=15" \
  -c:v libx264 -preset veryslow \
  -b:v 250k -maxrate 250k -bufsize 500k \
  -an \
  output.mp4
-> this made the video 2x faster, decrease the resolution to 360px, lowers it to 15fps, encodes it at 250 kbps and removes audio

Command Explanation: Process + Compress Video

  1. setpts=0.5*PTS Speeds up video to 2× speed -> Video plays twice as fast PTS = presentation timestamps

  2. scale=360:-2 Resizes video width to 360 pixels Height = -2 -> automatically calculated while:

  3. Preserving aspect ratio

  4. Ensuring it’s divisible by 2 (important for encoding)

  5. fps=15 Reduces frame rate to 15 FPS (higher FPS, the video becomes smoother) Helps shrink file size

  6. -c:v libx264 Use H.264 codec (most common video format)

  7. -preset veryslow Controls compression efficiency

    -> veryslow = best compression, smallest file, but slowest encoding

  8. -b:v 250k -maxrate 250k -bufsize 500k \ Targets 250 kbps video bitrate maxrate limits spikes bufsize smooths bitrate variability

    -> very small file size, but lower quality

  9. -an Removes audio completely

(24 March 2026) Upgraded version (generated by ChatGPT)

for f in *.(mp4|MP4|mov|MOV)(N); do
  ffmpeg -i "$f" \
    -vf "setpts=0.5*PTS,scale=360:-2,fps=15" \
    -c:v libx264 -preset veryslow \
    -b:v 250k -maxrate 250k -bufsize 500k \
    -an \
    "${f%.*}.mp4"
done
-> this code works for .mp4 and .mov, keeps same base filename, can batch process many files

Command Explanation: Batch Processing

  1. for f in *.(mp4|MP4|mov|MOV)(N); do Iterates over files matching: .mp4, .MP4, .mov, .MOV (N) is a zsh feature: Prevents errors if no files match

  2. "$f" Refers to current file Quotes handle spaces in filenames

  3. "${f%.*}.mp4" ${f%.*} removes file extension Adds .mp4

imagemagick

(Updated on 18 Mar 2026)

While Squoosh works well for small batches of photos, it cannot convert HEIC files directly to JPG or efficiently handle large numbers of images. Therefore, I looked for another way to compress photos, and Tim suggested using ImageMagick.

Imagemagick is an open-source software suite for creating, editing, converting, and manipulating images.

How to install ImageMagick

Open your Terminal and install ImageMagick using Homebrew:

brew install imagemagick

Then install Ghostscript:

brew install ghostscript

Convert HEIC to JPG (resize to 400px and compress)

The following command converts HEIC, jpg, jpeg, png, webp images to jpg, resizes them to a maximum height of 400 pixels, and reduces quality to 85%:

mkdir -p output

find . -maxdepth 1 -type f \( \
  -iname "*.heic" -o -iname "*.jpg" -o -iname "*.jpeg" -o \
  -iname "*.png" -o -iname "*.webp" \
\) | while IFS= read -r f; do
  filename="$(basename "${f%.*}")"
  magick "$f" -auto-orient -resize x400\> -quality 85 "output/${filename}.jpg"
done

Command Explanation: Imagemagick

  1. mkdir -p output

    • Creates a folder called output
    • -p means: Don’t error if it already exists, create parent directories if needed

  2. find . -maxdepth 1 -type f \( ... \)

    • . -> current directory
    • -maxdepth 1 -> don’t go into subfolders
    • -type f -> only files (not directories)

  3. -iname "*.heic" -o -iname "*.jpg" -o -iname "*.jpeg" -o \ -iname "*.png" -o -iname "*.webp" \

    • -iname = case-insensitive match

    • -o = OR

    • So it matches: .heic, .jpg / .jpeg, .png, .webp

  4. | while IFS= read -r f; do

    • IFS= -> preserves spaces in filenames
    • read -r -> prevents backslash escaping issues
    • f -> variable holding each filename

    -> This makes it safe for weird filenames (spaces, special chars)

  5. filename="$(basename "${f%.*}")"

    • ${f%.*} -> removes file extension
    • image.png -> image

    • basename -> removes directory path

    • For example: ./photo.png -> photo

  6. magick "$f" -auto-orient -resize x400\> -quality 85 "output/${filename}.jpg"

    1. magick "$f" -> Loads the input image
    2. -auto-orient -> Fixes rotation based on EXIF data, prevents sideways/upside-down images
    3. -resize x400\> -> Resize height to max 400px Important detail: x400 -> constrain height > -> only resize if image is larger
    4. -quality 85 -> JPEG compression quality (0–100) - 85 = good balance: smaller file size, minimal visible loss
    5. "output/${filename}.jpg" -> Saves everything as JPEG, converts all formats to .jpg, puts them in output/ folder