Week 01. Principles and Practices / Project Management
The first week of Fab Academy! I did a sketch of my project and added it to the Final Project page.
Assignments for this week
- plan and sketch a potential final project
- work through a git tutorial
- build a personal site in the class archive describing you and your final project
What I've done this week
- Setting up PC enviroments
- Visual Studio Code (VScode)
- Git
- MkDocs
- Create a website
- Choose a style
- Sign up Student Agreements
- Plan a final project
1. Setting up PC enviroments
The First thing I did this week was Setting up my PC enviroment.
Here are the version of tools I use.
- MacBook Air (M1, 2020)
- macOS Monterey 12.3.1
- VSCode 1.74.3
- zsh 5.8 (x86_64-apple-darwin21.0)
- Homebrew 3.6.20
- python 3.10.8 / pip 22.3.1
- git 2.39.1
- mkdocs 1.4.2
I changed my mac screenshot setting from the default(PNG) to JPG with the following command.
defaults write com.apple.screencapture type jpg
Choose Text Editor
Text Editors are software where you write your codes in.
I chose VScode for my text editor.
VScode has wide range of extensions that help you code, debug and visualise your work. Here are the extensions I installed for Fab Academy:
- Git History
- HTML CSS Support
- Markdown All in One
Getting started with Git
I followed this tutorial of Git.
Step 1. Download Git.
brew install git
Step 2. Identify user.
git config --global user.name "sosuke"
git config --global user.email "sosuke.kanegae@mat.eng.osaka-u.ac.jp"
Step 3. Check if there is any SSH-Key existing. If not generate SSH-Key.
(check)
cat ~/.ssh/id_rsa.pub
(generate)
ssh-keygen -t rsa -C "sosuke.kaneage@mat.eng.osaka-u.ac.jp"
Step 4. Check the public key you just created.
cat ~/.ssh/id_rsa.pub
Clone my repository from GitLab to a local workspace
Now so that I got Git ready, I prepaired a new directory to store everything I do with Fab Academy.
cd ~/FabAcademy/
mkdir workspace
In new workspace, I first cloned my repo on GitLab
git clone https://gitlab.fabcloud.org/academany/fabacademy/2023/labs/kitakagaya/students/sosuke-kanegae.git
Now, I have a newly cloned directory "sosuke-kaneage" in my workspace. And, I am ready to edit my website.
Setting up MkDocs
Using MkDocs, you can easily create documentatoin websites. You will have to code in HTML, CSS and JavaScript to create a website. However, in MkDocs all you have to edit is Markdowns, which is easy to use.
Step 1. Install MkDocs.
pip install mkdocs
Step 2. Create new Mkdocs project in workspace
cd ~/FabAcademy/workspace
mkdocs new fabacademy-docs
Step 3. Launch test server
mkdocs serve
Now, I have a MkDocs project with the default settings in ~/FabAcademy/workspace/fabacademy-docs. And, I can check how the website will look in my browser(http://127.0.0.1:8000/).
Build, Commit and Push
After editing MkDocs project, I have to convert the markdowns to HTML files.
cd ~/FabAcademy/workspace/fabacademy-docs
mkdocs build
The build commmand creates HTML files in ~/FabAcademy/workspace/fabacademy-docs/site/
To build directly into the git directory, add the following line to ~/FabAcademy/workspace/fabacademy-docs/mkdocs.yml
% mkdocs.yml
site_dir: ../sosuke-kanegae/public/
Finaly commit changes in local git repo and push to remote GitLab repo.
git commit -a -m 'Comments about changes'
git push
Instead of commit and push in the command line, you can also commit and push from the Git tab in VScode.
You can find the Git tab in the left column of the window. Click the tab and you will see a blue "Commit" button. Underneath the button, you can check the changes you made from last time. If you're good with the changes you can just simply press the "Commit" button. Or, you can select "Commit & Push" in the option of the "Commit" button.
When everything is up to date in your local repo, the blue button will turn into a sync button. The number written on the button indicates how many times you commit since you last push git. To push you can simply press the sync button.
Finally, when you have pushed and everything is up to date, the blue button will return into "Commit" and will be deativated
Warning
An error will sometimes occur when pushed in VScode. So, it might be better to push from command line.
2. Create my website
Choose a style
There are several optional styles available for MkDocs. third party themes
I chose Bootswatch Theme, because the menu interface was very useful.
- You can access to every page on my website easily.
- There is a content on every page, so you can jump to any h2 tag.
Customize website
I customize my website by editting ~/FabAcademy/workspace/fabacademy-docs/mkdocs.yml
I add Copyrights by adding the following line.
copyright: Copyright 2023 Sosuke Kanegae - Creative Commons Attribution Non Commercial
I made a link to the source code in GitLab by adding:
repo_url: https://gitlab.fabcloud.org/academany/fabacademy/2023/labs/kitakagaya/students/sosuke-kanegae
3. Plan a final project
A lamp that changes mood depending on sunlight
For my final project I would like to make a lamp that creates several different mood depending on the situation.
Just putting a lamp in a room changes the atmosphere of the room. Every lighting equipment has its own mood.
In the daytime, my favorite lighting equipment is a projector with streaming devices. Streaming devices like AppleTV and Chromecast show pictues and landscape movies when they are at screensaver mode. I love the way pictures and landscape moving slowly on my wall. So, I want to make a lamp with silhouettes moving around the lamp shade.
I love watching candles before bedtime. It makes me relax and feel calm. But, fire is dangerous. especially if you fell asleep with your candels on. I want to make a bedroom lamp that glows and flicker like a candle.
These two are the concept of the lamp I want to make. It's not just I want to make both type of lamps, but I want to make a lamp that switches between the two.
The lamp will change mode like:
- Turns ON with sunlight silhouettes (birds, butterflies and flowers) moving around the lampshade. (Senses enviormantal light)
- Changes to candle mode at bedtime. (Senses enviormantal light going low)
- Turns OFF when everybody is asleep. (Timer or acoustic sensor)
How it would look like:
Daytime: projecting silhouettes on the lamp shade
Nighttime: glows and flickers like a candle