Project Management
In this week, I learned and set up Git, created this website to document my work during Fab Academy, and uploaded the website to Fab Academy Gitlab. All of them were completely new for me, so it was a little bit challenging but it was a great opportunity to learn something new and exciting!
In Fab Academy we are going to document our work in own website and upload it to Fab Academy Gitlab. Here, I am going to write how I set up Git environment.
My week started from learning Git. I saw GitHub sometimes while I was working on my own projects, but I haven't really thought about what it is. Git is a distributed version control system originally developed in 2005 by Linus Torvalds, the creator of the Linux operating system. In distributed version control system, such as Git, there are three different types of storage areas. Workspace is the folder I am editing now. Local repository is the storage for different versions of the projects in my own computer. Remote repository is the storage for different versions of the projects in a remote server where I can share my projects with others. It is useful, for instance, when some issues are found in a version of the website, every developer can track the old version of the website and fix the issue. It is possible to track individuals' workflow in a collaborative project.
First I installed latest version of Git for Mac OS X from official webpage of Git to my MacBook. I am using Terminal to write a command in Git. Terminal is Apple's bash shell to access operating system's service. Following the Fab Academy's tutorial of Setup Git I identified myself in Git by writing the commands of my name and email address in Terminal.
git config –global user.name “Firstname Lastname”
git config –global user.email “emailadress@mail.com”
Next I created SSH key pair. There are two keys I needed to create to identify myself in GitLab which provides Git repository hosting service. Public key can be shared and is stored in GItLab. Private key must not be shared and is kept in my computer. Following the instructionsin GitLab, first I wrote the command in Terminal .
ssh-keygen -t rsa -C "your.email@example.com" -b 4096
Later, I found the hidden folder by typing the following command in Terminal.open -a Finder /usr/local/bin
Next I cloned repository from remote repo to my own computer to create local repo. I identified the folder, FabAcademy2018, which I am going to put local repository in my computer by typing the command, Change Directory.
cd /Users/megumiiwata/Desktop/FabAcademy2018Then I typed the following command to clone public repository.
git clone git@gitlab.fabcloud.org:academany/fabacademy/2018/labs/fablaboulu/students/megumi-iwata.git
To try using GitLab, I created a test website and uploaded to the remote repository in GitLab. I used Bracket as a text editor.
I wrote the commands and saved as index.html in the FabAcademy2018>megumi-iwata folder. I saved it in the local repository. To check the changes in local repository, I typed the following command.
git status
git pull origin master
git add .If I want to add only one specific file to the local repository, I can use this command.
git add [file name].
git commit -m “message”
git push origin masterNow the change in my local repository, the test website: index.html, was published in the remote repository.
Then I needed to script to publish HTML as a website. I went to home of GitLab my page, selected new file, chose the following type and selected HTML. .gitlab-ci.ymlThis file is for continuous integration in GitLab and placed in the root of my repository to define how my project should be built. Each time any push is done to my repository, GitLab looks for this file, and this file tells GitLab what to do.
Now the test website is running.
I was having trouble to upload my actual website that I created for documentation. Later I figured out that when I close the Terminal and open it again, I need to make sure the directory is correct. I can identify the directory that I am working now by typing the following command, Print Working Directory.pwdIf the directory is wrong, I need to change it by typing the following command which leads to the folder of local repository.
cd /Users/megumiiwata/Desktop/FabAcademy2018/megumi-iwata
I haven’t create a website by myself, so this is also new thing for me. On 18th of January, Iván Sánchez Milara who participated in Fab Academy last year explained basics of how to make a website. He introduced several websites and tools to create a website. He introduced w3schools HTML tags for learning HTML, text language to tell what contents the website has, and w3schools CSS tutorials for learning CSS to change how the website look like. To find a good text editor, I went through three options he introduced, Notepad++, Bracket and Sublime Text. I chose Bracket because it has live preview function which will be useful to check each change when I edit the website.
The website should include the contents of about me, final project and weekly assignments. I wanted my website simple and nice modern looking. In addition, I wanted to have sections of each content in the front page. Because as I looked at previous students websites, the websites that the pictures of their work are visible in front page interested me more. There are many free HTML templates available, and Iván suggested to use one of them to make the process easier and look beautiful. He recommended us to use fluid templates Bootstrap. Bootstrap is a framework for designing websites using HTML, CSS and Java Script. One of the advantages to use Bootstrap is that it resizes the website automatically when the screen size is changed or is shown in mobile. I checked several options of responsive HTML website templates, such as TEMPLATED, WrapBootstrap, Bootstrapious and Start Bootstrap. After went through those options, first I chose Creative from Start Bootstrap because it looked simple and nice. But Marta, other Fab Academy 2018 student from Fab Lab Oulu, advised me to change the template because it had only one page and I needed to make changes to create new pages for documentation of weekly assignments. So I searched again and Finlay decided to use the template MULTI from Bootstrapious. It is simple and beautiful, and has enough pages and functions to document work, such as dropdown menu. Also when it is resized, the design of the page looks still good. I downloaded the template. It contained index.html for the main page, text.html for another page, folders for CSS, Java Script and font and some images.
First, I started editing index.html in Bracket to design which contents should be where in my website according to the image in my head how I want my website looks like. I decided to have about me section in the front page, and weekly assignments and final project in different pages. I duplicated text.html and named as index_final.html for final project page and index_w2.html for week 2 assignment. Though I have final project and weekly assignments in other pages, I still wanted to have pictures and headline of weekly assignments and final project in the front page, so that people can get interested in my work from those pictures and headlines. I modified the sections of the front page and created sections for weekly assignments and final project. After I designed the contents of the website, I added the pictures and changed the main colour of the website which matches with the front picture. I decided the weekly assignments page includes summary of my work in the week on the top, description of the weekly assignment, documentation of the process, and reflection at the end.
It is important to keep size of photos small (50-70KB) so that my repo will not occupy too much space in GitLab. I used Preview in Mac and PhotoScapeX to edit and resize photos.
It was almost first time for me to create a website. I had several problems in the process. First, I had image of how my website should be but I could not find a good template easily. It was because most of the templates were for companies or commercial use and not the best ones for making a portfolio. Later I realised I could also use the good websites from previous students of Fab Academy. Another problem was HTML tags. They were completely stranger for me, so I always needed to search the right tags from the internet, such as w3schools.com. I also referred to previous students websites, such as Iván Sánchez Milara and Jari Pakarinen for the right tags. In addition, using a ready made template is a good way to create a nice looking website easily, but it is also confusing. Because there are many folder and files which I am not sure how they are used and if I need it or not. Especially some elements in HTML have been defined in CSS and I cannot find and change them easily. My website is not perfect one but I am going to keep developing one by one.
Neil explained also important ways of working during Fab Academy.
Demand side time management is thinking from tasks, the things I have to do. It might fail because I might get stuck on a task. On the other hand supply side time management is thinking back from the time that I can spend during a week. Then I split the time on each tasks. I might not go through everything perfectly but I can work on all the tasks as much as I can.
Serial development is doing several tasks in order, one by one. It is not the fastest way to do things. Instead, we should go few parallel tracks, tasks at the same time.
One way to work on a project is starting from the beginning to the goal. But it might cause a big failure or mistake at the end. Instead, it is better to work as spiral. We should start something small, start from a little spiral, not to try something huge. We should work on a small part of the project, prototyping, and keep coming back after each spinal. Each time we finish the project and keep enlarging the spiral so that each time we discover something.
We will fail every week and we have to figure out what was wrong each time. When we figure out what was the problem, we shouldn’t think whole system of the project, but we should decompose the project into small modules. It would be easier to find problems and then solutions.
Documentation is important. We have to document each week and the amount of work is a lot. If we work and then document, we will fail. While working, we should keep recording all the process including success and fail as I do.
I didn’t have much knowledge about making a website or Git, so it took some time, but I am happy that I understood basics and managed to create own website and started using Git. The best thing in this intensive learning is that the biggest challenge that I had last week looks very small thing today.
About the final project, I couldn’t make a decision to work on this project for a while, because it is very challenging project for me requiring many new skills. But one important thing I learned from my previous experience in Fab Lab is that I have to make a decision at some point and start doing something. So I will start working on it!