1. Principles and Practices, Project management
- Plan and sketch a potential final project
- Download, read, and sign the student agreement, then commit it to the repository
- Work through a Git tutorial
- Build a personal site in the class archive describing me and my final project
Concepts for Final Project
-
Auto Record Player
I’m a vinyl collector and I enjoy listening to vinyl records, but a problem I face is that if I ever want to listen to an exact song, I have to pick the needle up, find the right groove, and place it there. What if I could automate this process? This would be very useful, especially for compilation albums which don’t have any flow of songs between them. A device that would scan the entire vinyl for deep grooves indicating the various songs. A camera on the tip of the needle will be used to scan the vinyl, and then a mechanised grabber clamper will clamp around the vinyl, spinning it automatically. The needle will then scan the other side of the vinyl as well. This will give the user a full list of songs on the vinyl which will be displayed on a screen, and then the user can choose any song on the vinyl. The gimmick of the vinyl auto-rotating and the needle searching for songs will be part of the device’s allure.
-
Automatic Watch Winder Stand
An intricate circular automatic watch holder with 5 individual holders, with a display that allows you to choose one watch and it’ll be brought down for you to wear and take out. Each holder will rotate on its own to keep the automatic watch wound, and for ease of access there will be a display that can select a watch for you.
-
Tilapia Meet Cute
A fish-shaped waterproof device with a camera, a food dispenser, and a motor, which can be dipped underwater and swim around. The camera feed is streamed live, and users around the world can click the dispense food button and hope for fishes to come and say hi.
-
Liquid Handler
A prototype liquid handler that is completely 3D printed and can be broken down and shipped as parts to labs, which can be assembled by scientists on site, drastically reducing costs for a low-cost, easy-to-use liquid handler.
-
Dumbphone E Transaction
A dumbphone with an e-ink display with an inbuilt camera that allows users to go through UPI e-commerce transactions. A small device that could fit in your wallet or side bag, capable of managing all your transactions and another reason not to use your phone.
Software Used
HTML Basics
To start off, we quickly brushed through some HTML basics. We learned that the header contains data about the page, while the body holds the actual content displayed on the page. An HTML document begins with <!DOCTYPE html>, and all elements are written using tags, which are enclosed within < >. Some of the common tags we covered include headings (<h1> to <h6>), paragraphs (<p>...</p>), and links using the anchor tag (<a href="link">This is a link</a>). We also briefly looked at basic styling, where entire portions of the page can be styled by adding a <style> tag inside the header and defining the tags to be edited using {}.
CSS basics
Single tags can be given identifiers, allowing styles to be applied individually, but this approach can quickly get cluttered. To avoid this, we can create attribute classes and then assign those style classes wherever needed. This is done using CSS (Cascading Style Sheets). CSS can be implemented in three main ways: inline, by using the style attribute inside HTML elements; internal, by using a <style> element inside the <head> section; and external, by using a <link> element to connect an external CSS file. The main page of a website is typically called index. We also briefly touched on CI/CD pipelines, where updates are instantly published.
Setting up the Code Editor
Finally, we downloaded VS Code as our code editor and installed extensions like Live Server and Code Spell Checker to make coding easier and more efficient.
Git Basics
Git is basically a normal folder, but on the cloud, used for tracking and version control of files. It keeps a history of changes made to a project and allows us to go back to previous versions if needed. Git continuously looks for changes in files, including additions, deletions, and modifications, making it easier to manage updates and collaborate without losing work.
The folder here is called a repository. Git checks the local files against the files in the repository, and if there are any differences, it updates them accordingly. This includes tracking changes like new files, deleted files, or modified content. Since my workstation runs on Windows, it doesn’t come with Git by default, so we downloaded Git for Windows(Git Bash) from Git Installation to enable version control and repository management on our system.
Setting up Git
We can’t simply access files in the repository from our local machine; there has to be some level of security. To establish this, we use an SSH (Secure Shell) key through the SSH protocol. It works like a tunnel between the local computer and the repository. An SSH key relies on two related but asymmetric keys: a public key and a private key, which together form a key pair used for secure access.
ssh-keygen -t ed25519 -C "name@gmail.com"
The private key is secret, encrypted, and stays only with the user, while the public key works like a lock and can be shared freely. We provide GitLab with the public key, and our local machine uses the private key to securely access the repository.
The command used to generate an SSH key pair is ssh-keygen, which creates both the public and private keys on the local machine
The ssh-keygen program is used to create SSH keys, where -t specifies the type of key being generated. ed25519 is an elliptic curve signing algorithm and is widely used in secure communications due to its strong security and high performance.
Now that we’ve generated a key pair, we’re going to give GitLab the public key. To do so, we run:
cat ~/.ssh/id_ed25519.pub | clip
This reads the contents of the id_ed25519.pub file, which is our public key, and copies it to the clipboard.
cat stands for concatenate and is used to read and display the contents of a file. clip is used to copy the output to the clipboard.
~/.ssh/id_ed25519.pub is the file location of the ssh public key
We then add the SSH public key to GitLab to link the cloud repository to my local laptop.
The SSH key pair has now been set up. Next, we’re going to clone a copy of the files in the repository onto our local machine using clone with SSH.
Now that the SSH key pair is set up, we can simply run,
git clone git@gitlab.fabcloud.org:academany/fabacademy/2026/labs/kochi/students/kevin-jijo.git
This command creates a copy of the repository files in our current directory.
Now we are going to start making edits, but Git doesn’t know who is making the changes. To fix this, we need to set a profile for Git, which is done using the following commands:
git config --global user.name git config --global user.email
Adding the Student Agreement
Next, we had to sign a student agreement and add it to our FabLab website. We created a hyperlink that redirects the user to the student agreement file and added this link in the footer. Now, these changes were made locally and to see these changes reflected onto the website we will have to commit these changes to the Gitlab Repository.
git add .This command stages all the new changes in the current directory, moving file contents from the working directory to the Git staging area. If you did not change all files, and for example only edited
file.c, and want to commit changes only to that file, then: git add file.c
git commit
This command is run after staging. When run without any additional arguments, it only commits the staged changes.
git pushThis command is used to send the committed changes to the remote repository.
Now the push is reflected on the website, with the student agreement hyperlink visible in the footer.
Setting up the Personal Website
We were then given the task of making the website our own, as well as documenting our first week’s work. HTML basics were learned through W3 HTML School, and to stylize my website, I referred to the CSS documentation at W3 CSS School.
The project I’m planning to work on is the automated record player, so going with the whole retro aesthetic, I designed my website to look like the Windows XP UI, which was the first operating system I had used. The website just uses HTML and CSS, using accurate colours and fonts to mimic the UI. More improvements to add more interactivity between the user and the site will be added soon.
Found a high resolution stock image of the Microsoft Bliss wallpaper from Google Images. General inspiration was taken from Alexbsoft’s GitHub personal webpage.
However, that design was more Windows 95 focused, so I tried to adjust it to a Windows XP style since I have no experience using Windows 95(I wasn’t even born then).