Week 1: Project Management¶
First thoughts¶
Throughout the first week I caught myself enslaved to freedome… It’s been quite difficult to narrow down a set of ideas for the final project when the choices are infinite.
Installing Git & Homebrew¶
What is Git?¶
distributed: project members have a full copy
version: specific "save points"
control: managing and undoing changes
system: the software itself
Git is not GitHub or GitLab! Git is the local software you use to track your code history, while GitHub and GitLab are online platforms where you store and share those files. In short, Git is the tool, and the others are the hosting services that make collaboration possible between multiple developers, and help go back to older versions of the code.
Git¶
I am using macOS, and git is preinstalled, yet I proceeded to updating it as I hadn’t used Terminal in a while. First, I checked the version using the following command:
git --version
I then installed Homebrew both to update Git, and download other software more swiftly, including Image Magick for image manipulations.
Although the main commands to use throughout Fab Academy are status, add, commit, and push, I reccomend this game which will help understand git branching more interactively.
Homebrew¶
Why to download Homebrew?
Homebrew is like an App Store for your terminal. You use it because the terminal doesn’t have a built-in way to easily find, install, or update software. Without Homebrew, you’d have to manually hunt down files on websites and manage updates yourself. With it, you just type one command.
Apple includes some tools [like Git, Bash, or Python] by default, but they are often several years out of date for stability and security reasons. Homebrew allows you to install the latest.
// **downloading** <br>
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
// **check version again** <br>
brew --version
// **updating git** <br>
brew upgrade git
git --version
ERROR: git not installed.
After, I turned to chatGPT, pasted the output and found out that the terminal recognized two gits: Apple’s default, and Homebrew’s not yet installed.
brew install git
git --version
Still giving me an error to which chatGPT suggested the following command:
which git
// if expected output was not /opt/homebrew/bin/git
hash -r
git --version
All good!
SSH Key¶
For these steps I followed my local instructor Maxime’s documentation and GitLab’s official documentation.
Step 1: enter Terminal and type
ssh-keygen -t ed25519 -C "some comment"
Step 2: press Enter
This will generate public and private ed25519 keys. Then enter the file in which to save the key (/home/user/.ssh/id_ed25519). By not giving a specific path to a directory Terminal places the SSH key in your user folder, which later you can find with the following command:
~/.ssh/
Step 3: go to GitLab
Have your generated SSH key ready. Once you enter GitLab, go to User settings > SSH Keys > Add new key, or as shown in the image below.
Code Editor¶
I picked Visual Studio Code. Although I had already worked with VS Code, I had never combined it with Git. The app also makes it easy by having a built in terminal.
In the left images below is depicted the tool panel where your have the Explorer which lists your local files. In the right image, under `Source Control, one can navigate through the timeline of their pushed commits onto the server.
The letters next to the files help understand their latest manipulations:
A for Added, D for Deleted, and M for Modifieded.
git status: checks what has changed and what is currently staged
git add *: stages your changes, preparing them to be saved
git commit -m "text": saves your staged changes locally with a descriptive message
git push: uploads your saved local commits to server
Compressing Images¶
Theoratically, there are infinate ways to compress images, but my top three highlights are: Image Magick, OS-based compression, and Web-based compression.
What to use: JPEG or PNG?¶
Note, JPEGs cannot have a transparent background, whereas PNGs can! So, in dark mode, in the images below you can clearly notice the difference between the left JPEG file with white background, and color-matched background PNG file on the right.
To get a better understanding about JPEGs I recommend this video!
Image Magick¶
Yet again with Homebrew, I installed Image Magick and compressed my profile picture using the following command:
magick Hrach_Barseghyan_Headshot.png -quality 75 Hrach_Barseghyan_Headshot.jpg
// both reduced the quality, and converted from .png to .jpg
OS-based compression¶
This method is by far the fastest for me, but I see noticable quality loss over its bit-size. Anyway, on macOS, when you right-click a file, in a dropdown menu go to Quick Action > Convert Image > Choose Format & Size > Convert
Web-based compression¶
Some of the most popular, and user-friendly UI sites are:
My Website¶
The most crucial step of Fab Academy is documentation, hence this page.
At first I wanted to dedicate time, and revive my basic knowladge of web develompment. Though after some convincing I had moved on with MkDocs.
One interesting link, a plugin for MkDocs, I was given by one of my local instuctors – Elen, it’s called Material for MkDocs. I think this page has better UI for people who are new to coding.
Color scheme¶
By now you might have noticed I have a light mode and a dark mode. With the light mode I tried keeping things simple, yet adding some simple highlights here and there. My main colors are deep orange and indigo which come preinstalled in the default MkDocs color palette. Whereas in the dark mode, the page becomes more interesting as the orange is more vibrant and gazing.
Additionally, I also made changes to the cursor highlight. Although I try to make minimal CSS integrations, for this I added a separate .css file which needed to be integrated in the .yml file.
CSS
[data-md-color-scheme="default"] ::selection {
/* light mode */
background: rgba(255, 87, 34, 0.30);
color: inherit;
}
[data-md-color-scheme="slate"] ::selection {
/* dark mode */
background: rgba(255, 87, 34, 0.45);
color: #ffffff;
}
Font¶
I had also changed the font to something simple, yet with a twist. I went onto Google Fonts, the royalty free typography selection is great there. After downloading go into Font Book > File > Add Fonts to Current User > Choose the File, or simple drang and drop the downloaded file into Font Book.
After this, you need to go into the mkdocs.yml file, and under theme change the font name.
YAML
theme:
font:
text: Funnel Display
code: Ubuntu Mono # Roboto Mono
Favicon¶
Week 3, for our parametric design I sketched a star-like symbol, which I had learned from calculus. Simple put, it’s a type of a cycloid.
Unintentionally, I later decided that its a good logo and a good favicon, so later I made some variatiouns, and soon will complete a amateur brand book.
The difficulties with having the favicon visible accross different browsers came down to having a compatible file type. While you can export the file as .svg and .png I recommend .ico. Unlike standard images, a single .ico file can contain multiple images of varying sizes (e.g., 16x16, 32x32, 256x256 pixels) and color depths. This allows the OS to scale the icon cleanly depending on where it is displayed, such as the taskbar or the desktop. Note, both .svg and .png will sho up on Chrome, Opera, Mozilla, but not Safari.
The same cannot be done with the default icon in MkDocs. Trying to replace it with an .ico will not work out, whereas an .svg simply would crash the site [right image].
P.S. I have not yet found a solution to this!
Web App¶
As I regularly enter my website, I decided to cwreate a web app, a shortcut for entering the site. As I had already created a favicon, and uploaded it, it would look like a proper app on my dock.
The steps are simple, if you are using macOS, in Safari or other browsers also, go to Share > Add to Dock > name the web app > press Add.
Traffic¶
I truly am curious how people will interect with, and nevigate in my website, so for that I connected my Fab Academy website to Google Analytics. Though I will not describe much how I did it, I have simply added this section for others to discover this method also.
When creating your Google Analytics account you should generate a Measurement ID, e.g. G-XXXXXXXXXX, and then add it to your mkdocs.yml file, under extra.
YAML
extra:
# Google Analytics
analytics:
provider: google
property: G-Y7MG9DXSF8
Assignments & Evaluation¶
Refering to nueval will help you understand what the week’s outcome and assignment fulfillments are. The sectiones “Have you answered these questions?” and “FAQ” will give you a better understanding on what you might have missed out on.
This page sometimes can be outdated! The assignments are most up-to-date at the bottom of your lectures. This page simply helps to see the unknown.
Conclusion¶
Overall the week was a bit hectic. If I did not know what Git was, or havn’t ever opened a code editor before, I am pretty sure this week would scare me.
I quite enjoyed making a unified interface, adding a logo/favicon which I will also use in my design models.