Newer
Older
#Principles, Practices and Project Management
##### Week 1
This week I learned about version control, web development using SSGs, and sketched out an initial final project idea.
### Page Summary
1. Version control
2. Git and GitLab
3. Setting up Git for FabAcademy documentation
3.1 SSH key
4. Basic workflow and repository structure
4.1 Working through a Git Tutorial
5. About CI/CD
6. Web Development with Static Site Generators
7. YAML file
8. Web Design
9. Misc upload practices
10. Important and Interesting Links
11. Initial Final Project Ideas
12. About page
1. Version Control
Version control, is the practice of tracking and managing changes to software code.
Version control systems are software tools that help software teams manage changes to source code over time.
https://www.atlassian.com/git/tutorials/what-is-version-control
Git is an open source distributed version control system.
GitLab is a web-based Git repository for faster and more efficient collaboration of software code.
FabAcademy uses a self-hosted version of GitLab on FabCloud at [gitlab.fabcloud.org](gitlab.fabcloud.org), which is were all projects related to the academies and student documentation websites are hosted.
3. Setting up Git for FabAcademy documentation
---
Since I had already created used git before, I found my existing SSH key using `~/.ssh/id_rsa.pub`
Copied and added it to my FabCloud account.
To configure your user from scratch
git config --global user.name "mitalee.parikh"
git config --global user.email "emaitee@gmail.com"
This helps in tracking who makes the changes on the shared gitlab repo which is public.
Then I cloned the default repository on Gitlab to a local folder using:`git clone git@gitlab.fabcloud.org:academany/fabacademy/2020/labs/barcelona/students/mitalee-parikh.git`
I've used git a little for my Master's documentation. But till now, just used some basic commands like:
`git clone` Clone a repository into a new current local directory
`git init` Create an empty Git repository or reinitialize an existing one (starts a .git folder on local computer where all changes will be saved)
`git status` to check what's happening with the current directory
`git add .` to add all changes from the working directory to the staging area
`git commit -m "action msg"` to commit changes from the staging area to the local .git repo
`git push` to push only the changes from the local .git repo to Gitlab cloud repo
`git pull` to pull files from the remote repo to the local repo
I find this diagram very helpful to visualise the directory structure:
Some other commands that might help:
`du -sh * ` to check file sizes
`du -sh * | sort -n ` sorts the files by size
`git help` for help with git commands
Git had very detailed error msgs, so it is advisable to read and follow them to find solutions with issues.
`git diff` Show changes between commits, commit and working tree, etc
`git log` Show commit logs
10Mb limit per commit
It is easier to undo a staged file, i.e. after git add
but more difficut to undo a commited file , after git commit, but still possible
Continuous Integration complies websites with static site generators.
https://docs.gitlab.com/ee/ci/
6. Web Development with SSGs
---
I recently learned how to make a website using HTML, CSS with a Bootstrap framework. To develop my webpage, I wanted to explore different Static Site Generators before fixing on one. So I started by setting up both Mkdocs and Jekyll. Hugo was another option I want to look into in the coming weeks.
Static Site generators
7. YAML file
---
First git reads the YAML file .gitlab-ci.yml
https://gitlab.com/pages This page has examples of different .yml files which changes according to Static Site Generaotrs
like Hugo, Jekyll, or Wikis like Gitbook, etc. and even plain-HTML. The FabAcademy default website is based on Mkdocs.
Grid, colours, font - Helvetica, if you write a sentence in helvetica it is supposed to be the truth. (-Barbara Stauffacher Solomon)
I followed this [Jekyll tutorial](https://jekyll.org) by [Giraffe Academy](https://www.youtube.com/playlist?list=PLLAZ4kZ9dFpOPV5C5Ay0pHaa0RJFhcmcB). Before installing jekyll, I checked if I had these supporting things, and updated them:
1\. **Homebrew:** to easily install software packages
2\. **Ruby:** programming language that jekyll is written in
3\. **RubyGems:** package manager for ruby
4\. **Bundler:** to track and install gems and versions in a group, for jekyll themes
Homebrew, Ruby and Gem were all pre-installed.
So I checked versions using
`ruby -v` and `gem -v`
I installed bundler with `gem install jekyll bundler`, but got a permissions error msg.
So, I tried it with sudo like so: `sudo gem install jekyll bundler` and it worked.
And then to make sure checked version: `gem install jekyll bundler`
To view the changes on my local server `http://localhost:4000` I used `bundle exec jekyll serve` the first time and `jekyll serve` everytime after.
### Setting up Mkdocs
Setting up Mkdocs was a similar process. Intalling and upgrading package manager pip `pip install --upgrade pip` to install mkdocs: `pip install mkdocs`
To view the changes on my local server `http://127.0.0.1:8000` I used `mkdocs serve`
I tried to clone and modify some jekyll themes I downloaded from [rubygems.org](https://rubygems.org/). While pushing it to gitlab, I wasn't sure what files to keep from the default fabcloud repo. So I replaced them all, but there was an issue with my pipeline. I think it has something to do with the config.yml file. While I figure that out, I'm using this default template to document my process.
### Useful links
* [Jekyll](http://jekyll.org) [tutorial by Giraffe Academy](https://www.youtube.com/playlist?list=PLLAZ4kZ9dFpOPV5C5Ay0pHaa0RJFhcmcB)
* [Markdown](https://en.wikipedia.org/wiki/Markdown) [basic tutorial](https://www.markdowntutorial.com/)
* [Mkdocs guidelines](https://www.mkdocs.org/)
Before pushing, I used `ncdu` to check sizes of files. To compress my images I installed and used [ImageMagick](https://imagemagick.org/index.php). I found it very efficient to quickly convert or compress images for the web, and also to make quick GIFs.
After some trial and error, i figureed these basic commands and settings I can use for my workflow:
`convert IMGname.HEIC -resize 25% -quality 50% -density 72 jpg:extent=300kb IMGnewname.jpg`
`convert Screenshot\ 2020-02-18\ at\ 10.54.27\ AM.png -resize 50% -quality 50% -density 72 jpg:extent=300kb newname.jpg`
`convert -resize 25% -delay 15 -loop 0 IMG_1380.HEIC IMG_1381.HEIC IMG_1382.HEIC IMG_1386.HEIC IMG_1387.HEIC IMG_1388.HEIC animation.gif`
`magick identify -verbose focus.gif`
I also check individual file sizes by changing current directory in terminal and using `du -sh *|sort -n`
10. Important links
---
#### Principles and Practices - [notes](https://fabacademy.org/2020/labs/barcelona/local/#material/week01/) + [video](https://vimeo.com/388191611)
#### Project Management - [notes](http://academy.cba.mit.edu/classes/project_management/index.html) + [video](https://vimeo.com/388201669)
# Project management
Gitlab example pages with all compatible SSGs https://gitlab.com/pages
11. Initial Final Project Ideas
---
12. About Page
---