2. Project management

Assignment

  • Complete a Git Tutorial

  • Build a personal website

Research

First I started installing MkDocs a static site generator that focuses on speed and simplicity and geared towards building project documentation. Markdown is the markup language used to build the site using MkDocs. Markdown was created in 2004 by John Gruber and Aaron Swartz as a markup language that is appealing to human readers in its source code form.

The next step in the follow weeks is use some HTML and CSS to build and improve the site

HTML is the standard markup language for the creation of any type of webpage. It stands for Hyper Text Markup Language. HTML is what gives structure to content and meaning when defining it (such as a link, heading, paragraph, image, etc.). It’s best used together with CSS (Cascading Style Sheets), a presentation language that describes how HMTL content need to be displayed in the screen it can controls color, font, change sizes, create themes, etc.

SSH Key

Then to start using the GitLab I generate a New SSH Key. Using fablab tutorial page For this I installed Git for windows Git I used the command prompt and type the following line In the git bash terminal I started to use the git commands to add my Git username and set my e-mail: git config –global user.name “almir-kimurajunior” git congif – global user.email “almir.kimura@oceanbrasil.com”

After this I used the commands below to generate my SSH Key

  • ssh-keygen -t rsa -b 4096 - C “almir.kimura@oceanbrasil.com” and followed the instructions on the screen

Image1 - Generating SSH Key

But later a watch the YouTube video of Aalto Fablab by Krisjanis Rijnieks, and learn the correct ssh-keygen was not rsa but encrypted with ssh-keygen -t ed25519 -c “almir.kimura@oceanbrasil.com”

Another important info in this video is that I installed the cmder terminal and the notepad++ as the new text editor. I like a lot this two new programs. I will try Atom in the future, but now notepad++ is fine.

So I repeat all the steps to get the correct ssh key encrypted with ed25519 and paste it in the gitlab account

Image2 - Paste SSH Key on GitLab

Clone

To better build the web site I choose to clone the repository I received from Fab Academy to my computer. In the repository page clicking the clone button and selecting and copying Clone with SSH

Image3 - Clone repository with SSH

To download I used the code git clone:

git@gitlab.fabcloud.org:academany/fabacademy/2021/labs/insper/students/almir-kimurajunior.git

After that I started using my new skills LOL to prepare the assignment of the Fist Week, the main git commands that I used was:

  • git add (Add file contents to the index)

  • git commit -m “description of the changes” (Record changes to the repository)

  • git push (used to publish new local commits on a remote server)

  • git pull (Fetch from and integrate with another repository or a local branch)

Image4 - Git Commands

MkDocs

The next step is to use Markdown to edit the files downloaded from the repository and start updating the site. Using Notepad++ I edited the .md files on the about page and those referring to the assignments of the first week

Image5 - Notepad++

To have a preview of what the text would look like and to become more familiar with the markdown I used the website Stakedit.io

Image6 - StackEdit.io

At first I had a little difficulty using the “serve” command from Mkdocs to view the changes made in Notepad++ in real time in http://127.0.0.1:8000/ (one of the reasons for using Stakedit.io), however I solved this problem temporarily by isolating in a separate “project” each page that I’m editing at that moment

Image7 - Using MkDocs serve function

Image Optimization

For images reduction file size que use the gimp

With GIMP open, go to File > Open and select an image.

-Go to Image > Scale Image.

-A Scale Image dialog box will appear like the one pictured below.

-Enter new Image Size and Resolution values.

-Select Interpolation method.

-Click the “Scale” button to accept the changes.

Image8 - GIMP interface

Another good method to use in gimp is to open up your image with GIMP and go to Image > Mode and select Index. This will bring up the Indexed Color Conversion menu. By default, “Generate optimum palette” will be selected and the maximum number of colors should be set to 255.

With this technique, a file that was 450KB reduce to 130KB.

ATOM

After learning a LOT of git commands in terminal (cmder), using notepad++ as a text editor, and using mkserver to preview the site before I send it to the online repository I founded this life change software name ATOM. With Atom it is possible to integrate all these steps. In the picture below the red square is the git step, the green square is the site preview step and the yellow square is the text editor.

Image9 - ATOM interface