1. Principles, Practices, and Project Management

This week I worked on defining my final project idea and started to get used to the documentation process.

Research

In my research I found that I would like to build something I was passionate about. Narrowing down my ideas I landed on a “Leaf Light”. The Leaf Light will be solar powered, created using upcycled material, and uniquely designed to emit a soft light when it is dark out. This can be for rooms that are too dark at night such as a child’s bedroom or a restroom, to even lighting up dark rooms for elderly individuals to easily move around in the dark.

After reviewing tutorials on web designing, product design and coding I spent time prototyping my project idea. My Leaf Light will be off during the day and as the sun goes down it will increase in lighting up.

Preliminary Concept Art

Preliminary Detail Sketch

Processes

Using tutorials and help from local Fab Academy students I learned how to work with Mkdocs, Gitlab and face coding complications.

  • MkDocs - Mkdocs uses .html to build my Fab Academy Site.
  • iTerm2 - Working as my terminal I use iTerm2 to send my git:(master) commands. I use iTerm2 to retrieve my mkdocs serve. Mkdocs serve is a command that then allows me to preview any edits before committing and pushing the final version.
  • Sublime Text - This program is a text edit for markup.
  • GitLab - My repository is stored on GitLab and my commits all process through here in order to post and push my site up.
  • Coding and complications - I learned markdown and how to communicate with my site. I used my terminal to install pip. This was a frustration at first due to its miscommunication with my computer. I had to research a way to fix the error. After extensive research I found that adding a 3 to my pip commands (pip3) successfully communicated.

Process of using the Processes

  • For the first use of Git I had to set it up internally. I had to enter a username and password, along with collecting my SSH Key to communicate with Git.
  • I then cloned my student repository to my desktop so that I could edit it with Sublime. Noting that I can use the command git pull to retrieve my most recent copy.
  • My site is edited in sublime for text. In my file directory on my desktop I can store images and files. When I build this location into the image command line it links to the files saved. I zip my overall working design files and add them in the same process. For the videos I upload them to an external site, YouTube. I then copy the embedded code and place it into my text editor. This then links those videos to my page.
  • After edits to my site I used the git status to check that I had recent modifications saved and showing.
  • Using git add . command I uploaded my changes to my online repository.
  • Using the command git commit -m “message” I notated what those changed included.
  • The command git push is the last thing used to upload all final changes to the domain. This pushes all the files, photos and edits online.
  • I learned the importance of checking your site with Mkdocs before committing or pushing it up to the final domain. This will help you to avoid possible breaks in code, complication with missing pieces (i.e. fonts, themes, photos, ect.). This is important so that you do not overload incorrect information to the repository or the final site.

Top Left: iTerm2 Bottom Left: Server Preview before committing or pushing Right: Sublime Text Edit

GitLab Repository

Top Left: iTerm2 Bottom Left: Server Preview before committing or pushing Right: Sublime Text Edit

GitLab was originally quite confusing to me. Figuring out the full communication from piece to piece and what that meant took some work. With the help of other Fab Academy students and the tutorials I began to understand. The GitLab Repository will help me to commit my site changes and help to push them to the domain. You will see example in the photo of commits that were not working and then some that did. I worked through this by figuring out that I needed the preview that MKdocs serve provided. Each time I save changes is Sublime Text Edit it updates my Mkdocs serve command in my iTerm2. This then shows any potential issues and can help address these before attempting to commit or push.

Version Control

Version Control is a very important part of using GitLab. Version Control is the ability to track changes within a repository. These changes show as additions or deletions within certain files. These can be viewed within the commits of GitLab. The photo below is an example of this.

VersionControl

The deletions are highlighted in red and the additions are highlighted in green. I can see what I had removed and also what I had added or replaced within the file. This is a very important tool when working on a web page.

This is also a really important tool when sharing the responsibility of a single repository with others. Changes can be tracked this way and can benefit the users to stay in-sync with each other. All changes can be found in the commits and accessed by any members.

Other Version Control sites: