Managing remote repositories (with Git Add, Git Commit and Git Push)

9. After I had successfully cloned my repository, I went to the local (copied) Git repository folder and run the "git remote command and I am able to see the word "origin" that is the default name of my local repository as well as representing my current connection to the remote server at Gitlab. The name for Git respository on the remote server is call "master. During the clone/copying process, these names are automatically created.

git remote

10. If you had edited any file or add new file to your local respository, and now you want to upload the changes to Gitlab. The first step is to use the "git add {file name}" command. Git will check the files and add any modified file(s) to the staging area. A shortcut is to type "git add * (everything)" command, which is a handy tool to allow user to stage all changes done to one or multiple files which also include modified files in sub folder(s) too. Take note of this important information, to include changes done in project root folder as well as sub folders, you have to run "git add *" at the main project folder, or root level.

The "git add " command is to store all the modified files (changes) to the staging area. The second step is to save all these changes to the local Git respository and do to so by typing "git commit -m "log message"" command. The "-m" flag allow you to type in a meaningful comment/message to identify each saved or commit process.

To publish to Gitlab, use "git push {remote} {branch}" command to push changes up to the (master) Git respository at gitlab. A remote name for example "origin", and a branch name for example "master". For advance software development, you might have more than one branch, for example "develop", "chinese", etc.

git add *
git commit -m "update operation"
git push origin master

Understanding Git version control and revert back of file

11. Type the "git log" command, and you can see the past previous commits carried out. If you really "messed things up" and need to restore to back to a point of time before your changes are carried out, you are able revert back all your project files by reverting back to any of the previous "commits". However, performing this will detached from the current path/snapshot. The "git log" provide the information of previous commits and your message that you typed-in are displayed here.

git log

If you accidentally delete some files and don't know what are the files deleted, or you just want to restore the whole branch (from the last commit), you can run the “git checkout {branch name}“command.

git checkout {branch name}

If you just want to restore one or two files, you can run the “git checkout {filename} “command. Example I had accidently overwrite a file, I immediately restored just this file by using the git checkout {filenmae} command.

git checkout {filename}

Checking Git repository storage space, run the linux command "du -s -h". Overtime, you will make lots and lots of commits to the Git repo, each commit increate the project size as Git keep track of changes made. Soon it will take up lots of storage space as "objects" directories in your local git repo. You might have to restart a Git repo. One way is to make a backup of the local git repo, re-clone from GitLab and run a "git init" command again. A warning is that this will erase all your git history.

du -s -h (display total size of local git repo) du -a -h (display storage space of each file and directory)

Exploring and testing out GitHub

Gitlab, that the class site for Fab Academy and where our files or web site is stored, is similar to Github. Github is a popular platform for many programmers to share their files.

Playing with sharing image file from GitHub. After I uploaded my image file to Github, I move my mouse and hover the filename in the list and right click to select "copy link address" to get the file's URL. However I would need to append "?raw=true" to the end of the URL adress to get a downloadable / embeddable version.

Reference :
How to Use Github for Hosting Files

Getting started with Html + CSS

I have tried out a few website templates from the Fab Academy as well as some templates found online at w3schools.com, but was overwhelmed by the large amount of coding found in all these templates. Therefore I decided to build my web site from scatch. tarting with learning the basics (basic html and css), then continue to explore around and integrating more advanced web design techniques/coding like the use of javascript, etc.

Staring-out : Basic idea for my project web site sketched on paper :

Planning for my web page taking into consideration of the need for documentation of my weekly progress and the weekly assignment (that will include codes, CAD files, etc)..


Folder structure :
A "myproject" folder (which is also my local Git respository) will contain the weekly assignment sub-folders. In each weekly sub folder, I will place my images, codes and videos.

Handling of images and videos :
As the Gitlab has limited space, so all images uploaded to web site has to be kept to a minimum size, especially photo taken on my iPhone which is hi-res and take up a lot of space. This goes for video, try to speed up the video so that it shorten the overall duration, and export the video to a small resolution. For videos of larger size, I will have to host them on my GitHub account.

Draft of first web page design (main page - index.html) :

Having the main page (index.html) up, I began to explore, learn and add in codes from w3schools like for the responsive navigation bay (w3school : How TO - Responsive Top Navigation).

Web editing using Atom Editor

I designed my first web page using "Sublime" text editor which is free to edit my html files. Sublime also allow installation of addition package like "View in Browser" which allow me to preview my currently opened .html file in a web browsers by using shortcut key "CTL + ALT + V". Go to main menu bar of sublime -> Preference -> Package Control -> Install Package -> search for package(add-on) that you like to install.

However later on, I switched to using "Atom Editor" which I find it to be much user friendly and I particularly like the "tree view" which is like a folders/files listing as well as the Git integration feature.

1. Go to "Ubuntu Software" and install Atom.
2. At Atom main menu -> Packages -> Open the "Command Palette" (by Pressing "Cltr+Shift+P" in Atom).
3. Type "Github: Clone" to pull your fab academany repo down. everything is automatically done.

4. The "Tree view" panel on the left is very useful. By clicking on the "Git" button on the bottom-right of the screen will open the Git interface and you can push your works up to the Fab Academy repo to publish your website.

5. I also installed two essential packages to help me with the web site design. They are "atom-live-server-plus" to preview your web page live and "atom-beautify" to tidy up your codes. Go to Main Menu -> Package tab -> Setting View -> Install packages/themes.

6. Git integration :
With the git integration feature, this makes uploading of your website easier and fast.

On the bottom-right corner, you can click on the "Git" button and the Git panel will appear on the right side. The top portion is similiar to you using the "Git Add" command. You can Git add a single file, two or more files or all the edited files to the staging area. The portion below is similiar to "Git commit -m" command where you can enter a short little message/text. When you ready to Git push your work up to the repo, you just click the "Push" button at the bottom.

Learning to build a responsive web site

While designing my website, I am also learning to make my website responsive, so that my web site would not look out-of-alignment on a small screen like a mobile device. Example I noticed that my <h2> title text does scale down on small screen, it look large on my iPhone screen.

I had used a lot of <div> tags in my website as a container for each section. I prefered <div> tags over "grip" and "table" tags. Another way is the use of "width:50%"" over static "height=xx px width= xx px" for image.

Adding a responsive meta tag “<meta name="viewport" content="width=device-width, initial-scale=1">“ in the header section of all my web pages to tell the web browser to auto-scale to device size :

Using a responsive/dynamic html tag for displaying images instead of the static/fixed width and height :

Colour scheme used on website:

Choosing a color scheme is important. More info online on colur scheme on www.canva.com website.

The white background and black-color font text allows easy reading.
I choosen the variant colours of blue for my color scheme as it project a comfort and smoothing emotion, and a clean and neat presentation.

#e2cfff (for navigation bar)
#AFC2E7 (for Home button on navigation bar)
#f2f2f2 Light grey (for top header block and footer block)
#00839A (for title text)
#ffffe6 Light yellow (for code box)

Reference :
Website Color Schemes: The Palettes of 50 Visually Impactful Websites to Inspire You
A Practical Guide For Creating the Best Website Color Schemes
Color picker : #ffffe6 Color Hex

Mass resize of image files

The "convert" command is available on many Linux distributions, as it is installed as part of the "ImageMagick". I used the convert command to resize most of my screen captures as well as photos taken by my iPhone, into smaller file size for uploading onto my website.

Converting a .png image into .jpg using a compression ratio of 80 and resize to a width of 600px

convert photo.jpg -quality 70 -resize 600 photo.jpg

Here's the bash code to run mass convert all the jpg files in the directory to a compression ratio of 80 and resize to a width of 600px

for file in *.png; do convert "$file" -quality 80 -resize 600 "${file%.*}.jpg"; done

or you can set a percentage for the resize

for file in *.png; do convert "$file" -quality 80 -resize 70% "${file%.*}.jpg"; done

Reference :
How to Quickly Resize, Convert & Modify Images from the Linux Terminal

Weekly Assignment Approach :

The Fab Academy Diploman course is fast-pace programme with a new topic introducing each week, along with a weekly assignment, so project management skill and self-discipline is extremerly important.

My typical "Weekly cycle", I hope I will not fall behind... :

• Wednesday 10pm to 1am - Attend Fab Academy class Lesson
• Thursday morning 10am to 12noon - set aside time to meet up with Fab Lab SP instructors, Mr Steven and Mr Rodney, as well as fellow classmates to discuss on yesterday lesson, clarify any doubts, check availbility of Fab Lab/equipment/material
• Thursday/Friday - self-learning, come up initial design ideas
• Saturday/Sunday - work on design to get ready for production on next Monday/Tuesday
• Monday/Tuesday/Wednesday - production at Fab Lab
• Wednesday - update web site (deadline-to be done 2 hours before next lesson start)