January 25, 2023

Week 1

Principles and Practices, Project Management

This week's fun assignment was:

  • Sketched your final project idea(s)
  • Described briefly what it will do and who will use it
  • Made a website and described how you did it
  • Created a section about yourself on that website
  • Added a page with a sketch and description of your final project idea(s)
  • Documented steps for setting up your Git repository and adding files to it
  • Pushed to your class GitLab repository
  • Signed and uploaded Student Agreement
Week 1

Project Management

To start off this documentation for the first week, i have to admit that i lost a lot of time reading random stuff that relates to all that was talked about in Prof. Neil's class.
As a web developer, i'm used to work with a lot of tools and i'm always looking for new ones. I'm also a big fan of open source and i'm always looking for new projects to contribute to.
Right now i'm just a bit overwhelmed by all the information that i have to process. I'm also a bit afraid that i will not be able to keep up with the pace of the course.
So my first step was to try to find a suitable project management software. Like i mentioned, i first tried to find an open source one, but for now, decided to go for a proprietary one.
I'm setting up Monday.com.

A generic square placeholder image with rounded corners in a figure.
Monday.com project interface before populated with content.

Next up was for me to start documenting the Git processes.
I use Git on a daily basis, but i'm not really familiar with the GitLab interface. I use mostly GitHub.
It's git, so it's not that hard to use.
I run linux on my machines, so I have git alreay installed as well as a terminal, but i want to check if everything is updated so i will run
git --version followed by sudo apt update in my terminal, to update the packages and make sure everything is up to date.
I will try to follow this tutorial, but it seems very Mac and Windows centric. Besides, as i mentioned, i already use Git in GitHub so i will have to make configurations, like adding another user to my local git.
I learned git a long time ago using this tutorial: https://www.coursera.org/learn/introduction-git-github
Anyway, i will try to follow the tutorial and see how it goes.
First thing first, i will check if have more than one user using git config --list.
One should move to the directory it want's to use before hand. I will use the cd command to move to the directory that i want to use.
I only have my normal user that it's a global one. I will add a local one just for this course using git config --local user.name "pedro-candeias" and git config --local user.email "pedrocandeias-fabacademy@gmail.com"

Add another user.
Add another user to git.
Now, let's check again if everything is ok using git config --list.
Check if the user is added.
Check if a user is added.
There, that's more like it.
Next up: Generated a SSH Key. I'm 100% sure i don't have a SSH Key setup here so I will jump the cat ~/.ssh/id_rsa.pub step and go straight to the ssh-keygen -t rsa -C "pedrocandeias-fabacademy@gmail.com"
Generate an SSH Key.
Generate a SSH Key for git with a little typo.
Now let's see our key:
cat ~/.ssh/id_rsa.pub
SSH Key.
Nothing to see here little human, just stuff for machines.
Next, I copied my key clip -sel clip < ~/.ssh/id_rsa.pub
And finally added it to GITLAB following the instructions on this video

Everything pretty straightforward till here.
Now, let's try to clone the repository, get Nginx running and see if we can see the website.
I will clone the repository using git clone but first i have to create a folder for the repo and init.
Înit folder
Create a folder and Init the repo.
And now, let's finally clone it.
Clone it
Clone the repo.
It's cloned! Now one could use git status but I will just browse the directory, change some text and commit.
Check Cloned Repo
Check the clone repo.
Now, a simple change to the index.html file.
Change index.html
Change index.html.
That' nice. Now let's add and commit and push.
Add files
Add.
Commit files
Commit.
And push it to the remote repo:
Push
Push.
Let's see if it worked.
First commit
First commit, hurrah!
Now, let's see if we can see the website.
My new site
My new site!
So, i think i should add here something that Adrián Torres said in a video-conference that believe to be really good advise.

One should use a mantra for Git:

  1. git status (to see what has changed)
  2. git pull (to download the local repository to the last version of the online repository. This is very useful if several people are working on the same repository).
  3. git add . (to add the changes)
  4. git status (to check that the changes were added)
  5. git commit -m 'description of the change' (to confirm the changes)
  6. git push -u origin master (to make the changes effective and finally update the repository online)
But it's always nice to remember other commands like:
  • git clone - Clone a repository into a new current local directory, to do once at the beginning of documentation
  • git init - Create an empty Git repository or re-initialize an existing one (starts a .git folder on local computer where all changes will be saved)
  • git help - Help with git commands
  • git diff - Changes between commits, commit and working tree, etc
  • git log - Show commit logs
Another important thing to note is gitignore. This file is used to tell git which files (or patterns) it should ignore. This is so you don't accidentally end up committing sensitive data such as passwords or keys.
Now I will start on the site development.
For the IDE I will use Visual Studio Code. I already have it installed as i'm used to using it everyday for work.
I will also use Jekyll to generate the static site and NGINX to serve the site.
NGINX and pretty much everything that's needed for Development of the site is already installed and ready, excepto for Jekyll.
Haven't used Jekyll in a long time, but i'm going to give it a try.
Installing Jekyll is really easy, just follow the instructions on the Jekyll website.
Install Jekyll using the command gem install bundler jekyll and create a new site that will be in a folder (mine will be "pec" as in PEdro Candeias)
You can configure Jekyll to compile the static site directly to our local repo but i prefer to it to a different folder and then copy the files to the repo.
Later on i'll probably use a CI/CD tool to automate the process.
So, create the site jekyll new pec
Move into the folder cd pec
Run the site jekyll serve --livereload
The live reload command is to automatically reload the browser when a change is made.
Now, let's see if it works.
Jekyll install
Jekyll install.
And the served site:
Jekyll site
Jekyll site.
I will be using a Jekyll theme called "Clean Blog" that i found on Start Bootstrap.
It's clean and simple and i will customize it to my needs.

And a couple of hours later, i have a basic site up and running.
I had to change the theme a little bit to make it work better with Jekyll and GitLab and learned it by adding a couple of commits.
First, GitLab is not keen on having relative urls of folders, so i had to change the baseurl to an absolute url.
Then, i had to change the url to an absolute url as well.
But i remembered that Nuria, my instructor told me to watch out for relative url's.
So, i had to change it again, this time making sure that all pages sit in the root of the folder.
Anyway, here is a first look at the site with absolute URL's just for posterity.

Gitlab Site
GitLab Site.


For the Final project

Dall-e2 version of a tshirt folding machine
Dall-e2 version of a tshirt folding machine
Dall-e2 version of a tshirt folding machine
Dall-e2 version of a tshirt folding machine

A tshirt folding machine drawing in the style of Leonard DaVinci made by Dall-e2

For the final project I would like to build a tshirt folding machine.
I would like it to be portable, or at least easily storable.
As a proud owner of about 60 tshirts there is no task more tedious then folding them.
I usually just keep them in a guest bedroom, unfolded on gigantic pile of recently washed and dried tshirts, something that my wife hates!

Althought the idea of a tshirt folding machine is not new, there are a couple of videos on youtube of people building manual operated ones them as well as lot of industrial grade ones and even some hobbyist makers one.

What does it do?
It folds t-shirts (and maybe other clothes).

Who's done what beforehand?
There are a couple of videos on YouTube of people building manualy operated ones as well. Did also find industrial grade machines and even some hobbyist makers plans for machines like this

What will you design?
I will be designing the machine, the software, the electronics and the mechanical parts.

What materials and components are you going to use?
PLA, MDF, controlers, tshirts, PCB, motors, hinges, etc.

Where will they come from? Some parts will be build, printed and machined, others will be bought, or are already at the Fab Lab.

What parts and systems are going to be made? PCB, mechanical parts, software, etc.

What are the implications?
An automatic clothing folding machine can have several benefits and implications, including:

  • Can fold clothes faster and more consistently than a person can, which can save time and increase productivity.
  • Can fold clothes in the same way every time, which can make it easier to keep track of inventory and ensure that all items are folded to the same standard.
  • Can reduce the risk of repetitive motion injuries that can occur from manual folding.
  • Can fold clothes in a compact way which can save space.
  • Can make my wife happier and happy wife, happy life!
Also it can improve the lifes of people with disabilities:
  • Can help people with disabilities to fold their clothes independently, which can increase their sense of autonomy and self-reliance.
  • Can reduce the strain on people with disabilities who may have difficulty with manual folding.
  • Can help people with disabilities to fold clothes more quickly and efficiently, which can improve their productivity and ability to complete tasks.
  • Can be designed with ergonomic features that can reduce the risk of injury for people with disabilities who may have difficulty with manual folding.
  • Can be considered as an assistive technology that can help people with disabilities in completing daily living task.

Here's a simple sketch:

Dall-e2 version of a tshirt folding machine

And some fun features that it could have (spiral development) would be:

  • Play a sound/music when it folds;
  • Have a sensor to detect if a tshirt is in place;
  • Auto unloading of tshirt to a basket;


Learned this week (in no special order)

  • CLI for Imagemagic is going to be super usefull;
  • Got to work more on my documentation skills and do it more quickly;
  • Refreshed git by command line as normally only use it in VSCode;
  • Got to play around with GitLab;
  • Started reading on supply time demand and other methods;
  • Gitlab doesn't like things that are not in the root;

Notes and Thoughts

Not sure if i'm going to keep this section, but i'm going to write down some notes and toughts that i have during the course.
I'm also going to write down some notes about the tools that i'm using and how i'm using them.

ImageMagick

I'm using ImageMagick to convert the images that i'm using in the website to jpg. I'm using the following command to do so:

Monday.com

I'm using Monday.com for the project management. I'm not sure if i will keep using it, but for now, it's working fine.

Bootstrap 4

I'm using Bootstrap 4 for the website. I'm not sure if i will keep using it, but for now, it's working fine.

GitLab

I'm using GitLab for the version control. I'm pretty sure i will keep using it.

Markdown

I'm using Markdown for the documentation. Sometimes i just switch to plain HTML.

Jekyll

primary

Some commands i find usefull for now:

convert week7_christopher_wool.jpg  -geometry x600 week7_christopher_wool.jpg
convert week7_christopher_wool.png week7_christopher_wool.jpg
convert week7_christopher_wool.jpg  -quality 75 week7_christopher_wool.jpg
ls -lhr
for image in *.png ;  do convert "$image" "${image%.*}.jpg" ; done