Week 1 Principles and Practices
Summary
The main goals of this week was to sketch and plan a final project and to create a website to track my work. I learned about Gitlab and how to use it to upload documents and track changes as well as some basics on how to create a website using Markdown and work in the Visual Studio Code environment. I also learned how to compress and image both using a rudimentary method of emailing a smaller version to myself but also with the XnConvert software that was recommended during the recitation on Jan 27.
Assignments
1. Plan and sketch a potential final project
My final project is related to my work as a physical therapist. I call the concept Robophysio It is a device that can provide "Rolling massage" to a forearm or a prototype of such a device that can be used to gauge interest for a commercial development. Currently physical therapist often treat conditions such as tennis elbow with a roller that they have to apply manually. This device is also used on several other areas of the body such as calves, hamstrings, quadriceps, lumbar region and upper back. The treatment is effective in reducing muscle tension and create pain relief through the release of the body's endorphins as the tissue is stressed and pain signals are received through the nervous system. This is tedious and physically taxing for the therapist. It will consist of a motor, electronic controls to turn it on and off and regulate the pressure applied to the forearm. I created the sketch in the notes app on my ipad using and Apple pencil which I recently bought. That was fun, sketching with a pencil on paper is easier in my opinion but you have lots of opportunity to use color etc on the iPad and maybe there is better drawing software or I can learn how to use it better. Doing it digitally makes it easier to find the note rather than in a sketch book that you can misplace. The image is on my main page and is also posted above.
2. Read, sign the student/instructor/lab agreements, and commit to your repos
I cut and pasted the agreement into a word document and then saved it as a minum size pdf and uploaded to the repository. It is Linked here.
3. Work through a git tutorial
I located the Git tutorial through the Fab Academy web site and signed in to my account on Github. I find all the different kinds of Git presented a bit confusing and need to work through understanding the difference between Github and GitLab. I downloaded Git Cola and will explore this later to see if that is more intuitive for me to use a graphical interface. After discussing with Svavar I realized that Github is just something we used for the prefab preparation for Fab Academy and Gitlab is what we will be using from now on for fab academy. I googled Gitlab tutorial and found a page that looked useful
The section Learn Git seemed most applicable to what I am doing so I started there. There were many more options but they seemed time consuming and more applicaple for software development teams. I had already created SSH keys when starting to set up my web page so the computer is ready to go. The steps of the tutorial are below, I am going to document what I learned in each one and spend about two hours on this then move on to editing the web page.
1. Create a sample project
2. Clone the repository
3. Create a branch to make your changes
4. Commit and push your changes
5. Merge your changes
So my plan changed, after working on the webpage and uploading documents directly to the code subfolders I don't really see the point in going through the gitlab tutorial in detail. As per the recitation it is best to commit to one workflow and my workflow is to place files in the code folder and the relevant subfolder that I created and then do my webpage text edits in VSC/Markdown. I like the structure for documentation that was presented in the bootcamp which is hero shot, summary, workdetail, learning outcomes and digital files which I plan to follow going forward. I am having one issue that I don't understand which is that the final project jpeg is not displaying correctly on the week01 page but it is displaying correctly in the index page. I got an error message when running the preview as you can see below.
Also when I view it in VSC it seems to be correct but not once I have uploaded it to the web. I may need to seek some assistance with this at the open house in the Fab lab tomorrow night. I was able to solve the issue by renaming the file and moving a copy into the week01 folder. It seems like you should be able to have images in one folder but I need to understand better how this works. Otherwise my file structure might become cluttered.
Second step which is to commit a file.
The instructions note "A commit is a file extension that creates a Markdown file. You can learn more about Markdown by visiting "Basic writing and formatting syntax" in our docs or by taking the "Communicating using Markdown" Skills course." I am going to come back to this and take those courses once I am done with this tutorial. I add a file name it profile.md and then click commit changes, wait 20 seconds then refresh the page. Since I have setup the repository with a ssh key uploading a file is a simple as placing it in the code folder in the correct subfolder for the document and then hitting commit in markdown, I did this with both the fab lab agreement and the pictures I am using for the web site.
4. Build a personal site in the class archive describing you and your final project
To set up the personal web site I went through the steps outlined on my instructors Svavars website with his assistance. To create the website using markdown I needed to install several software programs. Git, Gitlab which I had access to through the Fab Academy, Python and Mkdocs
The first step is to create a folder called "Code" to host the web site documents. I had already done this as part of a pre Fab Academy exercise.
After installing python I tried to install mkdocs-material which is software that can be used to publish a web site and keep it synchronized with Git. When I tried to run this in VS code it did not work so I tried rebooting the computer. Now the commaand pip install mkdocs material worked.
I also used Git bash to create an SSH key per the instructions from
Svavar's web site
and this tutorial that he also used when he was creating the site.
I input the following commands into Git bash
ssh-keygen -t ed25519 -C "
Using the file explore I deleted the old html structure and replaced it with an index file. I also then added an assignments folder and a week-01 folder and markdown file which is this one that I am using to document. Next I wanted to commit changes to the source control. When I attempted to do this Mkdocs refused since I had not identifed myself. I added the following command's per Svavars web site to create identification. Now I was able to commit comments in source control.
I also went to fellow student's Johannes' web site
to get code that I pasted into the VS code terminal which allowed the markdown file to publish through Gitlabs.
To experiment with this I changed the heading on the website to welcome to my homepage and this worked.
I also tested the local preview function using MKdocs serve command in VSC by changing a heading to Comments B and this worked.
I continued editing the text for the headings the top of the site now says Hogni Fridriksson My Robophysio journey. I also created an assignments folder per Svavar's recommendation where each week I will create a new .md document labeled with the number of the week. That is week01, then week 02 etc.
I was able to succesfully upload a selfie by emailing a smaller version of it to me and got the file size down to less than 70KB. I also uploaded a sketch of my final project and wrote a description and I created the jpeg by taking a screenshot of a drawing I made on my iPad using an Apple pencil in the notes app.
I now want to add some screenshots to my description of creating the site so I am going to try XnConvert to compress the screenshot
Adding files was fairly easy but I selected too high of an image quality for starters. There are also multiple types of jpg files to choose from and I am not sure which is best yet, further research is needed.
I then ran the program again and selected a lower image quality, next time I do it I am going to pick the lowest image quality and see how that turns out. I added a pic of the manual rollers to my final project page and selected the lowest image quality for XnVconvert. This seems to work fine and the file size was only 38Kb. This seems like the way to go.
Learning Outcomes
Finally I was able to edit and add text and images describing the steps to get an SSH key and connect to Git. That first part of getting and setting up the key is confusing when you are new to programming and a lot of the commands don't make intuitive sense you just kind of do the steps to get to the point where you can organize folders on your computer which then automatically organizes your web site the same way. This is a brilliant way to do it and will make the documentation and publishing process efficient as I go through Fab Academy. I have started to become familiar with VSC and using file compression as well.