1. Week 1 - Project management

Day 1 - Introduction to GitLab

On the first day, we got introduced to what Fablab is and what our schedule will look like. Afterwards, we created a GitLab account to start creating our first website. Then, we saw how to use the Markdown language to edit and personalize our website.

How to create the website

First, go to the main page of the gitlab.fablab page to create your own personal website by using “Build” then “Pipelines”.

Then click on “Run Pipeline”.

Once again click on “Run Pipeline” and the website will start processing.

The processing phase will go from “Pending” to “Running” to “Passed” where the processing is completed.

To access the link of the website, go to “Deploy” then “Pages” and the link will be accessible there.

Editing the Website

Now that the website is created, the content of it can be edited by accessing the directories and the files available within the template. The files represent a Markdown code which is an easy-to-use markup language used to format the website elements instead of HTML and has a .mk extension. These files also accept HTML code as input. All the directories are within the "docs" directory which was already pre-assigned.

This first file that has been edited is within the “about” directory where the “index” file was edited by clicking on the “edit” button and selecting “Edit single file”.

The first code that is changed is the title which is represented with a single hashtag (#). A double hashtag is used for subheadings, and triple hashtags for further subheadings.

Another thing that can be done using an HTML line of code is the alignment of content using the “div” command for either centering the photo or justifying the text. Since this is using HTML, the command must also be closed by using the forward-slash with the command after it (/div)

Also, clickable links can be added and labeled using the Markdown code.

Finally, images can also be added by referencing to them depending on where they are located by either using the Markdown code or HTML. Note that the images only show their alternative texts in the preview and can be fully viewed on the actual website.

Day 2 - Using Microsoft Visual Studio Code

On this day, GitBash and Microsoft Visual Studio Code are downloaded to be able to write the code locally on the system then uploading or committing the code afterwards. This simplifies the website editing process by allowing the user to access and edit the code relatively easier than having to go onto GitLab every time. Moreover, it allows the uploading of images to be as simple as dragging and dropping multiple files from one folder to the other whereas on GitLab each image must be uploaded which can be time consuming.

Cloning using GitBash

First, the gitlab directory must be cloned and this is done using the GitBash application, which provides an emulation layer for Git command line experience and interfaces with the operating system through written commands. A folder is created locally on the system and the GitBash is opened by right-clicking and selecting "Open Git Bash here".

Afterwards, the link of the directory is copied from GitLab by going to the main directory and clicking the "Code" button and copying the link under the "Clone with HTTPS". In the GitBash terminal, use the command "git clone" and paste the link after it and press enter to initiate the cloning process from Gitlab to the local system. Note that "ctrl+v" will not work and the link should be pasted by right-clicking and pasting.

It will request authorization and a prompt of GitLab login will pop up. This will only occur the first time of using GitBash and the login details of GitLab should be entered. Once the authorization is completed, the cloning process will start.

Once the authorization is completed, the directory is changed using the "cd" command to where the new folder is created (based on the name of the directory). Then, the username and email are setup in GitBash.

Using Microsoft Visual Studios Code

Now Microsoft Visual Studios Code is downloaded and installed and the director that has been cloned is opened in within the program.

The text file can be accessed by clicking on the desired code file on the side panel. Then the file can be edited similar to the way it was changed on GitLab. Once the editing is completed, the file is saved and should be committed. To do so, click on the "Source Control" icon next to the side panel and add a comment or message describing the changes made. Afterwards, click on the "Commit" button and then the "Sync Changes" button to update the content of the website.

"Extensions" can also be added to Microsoft Visual Studios Code to improve the quality of life while coding. One useful extension added is the "Markdown Preview Enhanced" which allows a preview of the current code while editing.

Now instead of having to go onto GitLab to edit and personalize the website, Microsoft Visual Studios Code can be used to alter the code locally and can be previewed before being pushed online. This allows for a more convenient approach to test the code which reduces the stress on the servers and provides a more user-friendly approach. It is also much better to resize images and reduce their size when uploading them to the website to allow for the visitor to view them efficiently as the reduced size improves the loading speeds of the website. A common website that is used for the resizing of multiple images while keeping the same file name is ILOVIMG.

Day 3 - Customization of the Website

The website can be further customized such as the color scheme, font, title, icons and much more. To do so, the YAML file "mkdocs" with a yml extension, which is located in the main directory, is accessed and has the lines of code for the website template. Unlike the markdown files, the YAML file is indentation sensitive, where it indices indicates the data structure.

The first thing that can be added is your own name on the website in the title and other places as well.

Social media links can also be tailored to the users personal pages. The icons are sourced from Font Awesome.

The template being used for the website is named "material" and allows the change of color, font, and icons. The banner color can be altered through the "primary" code and the highlighted text can be changed through the "accent" code. The color naming is extracted from SquidFunk where the colors can also be tested. The font for the website can also be changed by referring to Google Fonts and adding the text style to the "text" code. Finally, the icon images can also be changed with any svg or png file. The "logo" code represents the logo within the website whereas the "favicon" represents the favorite icon that is located in the tab of the browser.

Day 4 & 5

Further debugging of the codes and preparing assignment 1 (Week 1) as well as discussing the potential ideas for the project. The project is to be selected out of four categories:

• Sustainable Homes
• Educations
• Interactive Play
• Healthcare

As of now, the idea I have is for a connected mailbox that can be connected to the cloud and send data and notifications about the received packages. The last day of the week is the presentation of the content learned in Week 1 as well as a proposed idea for the project. Keywords:

• Automation
• Smart Home
• Interconnected
• User Friendly
• Sensors

Personal Notes

• Markdown is a simple and good way to start learning to code. However, its simplicity does not allow the developer to comfortably edit/design the website to their liking. HTML is a bit more complex, but it allows for additional features to be implemented such as alignment, font colors, and so much more.
• Learned how to efficiently search for articles and journals by using Google Scholar. Searching can be tedious at first, but with time, the process becomes much more understandable and more convenient.
• All the images were edited and captioned in powerpoint as it allows for easier aligning of shapes and comments.

---

Last update: July 9, 2024