1. Principles and practices

This week starting 24^th Jan, coinciding on my birthday marks the beginning of my incredible journey with MIT’s FabAcademy course “How to Make (Almost) Anything.”

As i dive into digital fabrication, its important ot document the journey, the learnings and understanding the foundational principles and practices that underpin the course.Week01 is about getting acquainted with the concept of git and markdown, but also about embracing the mindset of documentation and researching about the final project.

Task

Introduction

For this week assigmnement we had to :

• Sign the student agreement
• Build a personal website - Choose between HTML , hugo and mkdocs
• Write the "About me" page
• Document my progress
• Draw a final project Sketch

Key Learnings

A significant part of this week’s learning was focused on mastering git. Firstly, the world of Git is like a rabbit hole and kept me hooked for hours and sometimes in circles. Understanding Git’s functionalities like branching,committing and pushing, metaphorical to the course has equipped me to efficiently manage and track changes in projects. Additionally, i explored the fundamentals of web development, specifically HTML and CSS. These tools were very new to me and i finally decided to use mkdocs and markdown as my building block of the website, enabling me to create documentation on the go. By learning markdown, i gained the ability to structure web content, and may not have the flexiblity as CSS i can now swiftly document my learning. This week was vital for understanding syntax and warming up for the projects and sharing my work with the fabacademy family.

Research

“This week i learnt about “Git” , “HTML “CSS” and “Markdown”. Later i met my instructors Nisha and Aatif for sessions on Git and project management.

Three Basic Learning of Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. It’s similar to version history we can see on productivity apps, along with more control.

• SSH Key generation and local clone

• Git commit , push and pull

  Git Commit is like working on a Daily Journal or Scrapebook.Every time you add a new piece of information, you want to make sure you don’t lose your progress. Each commit is like a page that tells a part of your project’s story up to that point.

  Git Push is like sending Your project update to your boss/instructor Once you’ve added a few pages (made several commits) to your Journal/scapebook and are happy with your work, you want to share it with others or maybe get some input from your teacher.

  Git Pull is bringing new Ideas. Your teacher might have some cool ideas or other students projects with similar information that you want to include in your project / scrapbook. In Git, when you ‘pull’, you are taking the updates or changes that others have added to their projects in the library and bringing them back to your own project in your folder. This way, you can learn from others and improve your project.

• Understanding version control and relative file tagging

  Using Git, especially on fabacademy projects, means you can see the history of changes, work on different ideas without risk, and easily collaborate with others. It’s like having a super-organized way to work on a big group project where everyone knows who did what and when.Repo is like folders with supor memory power of Branches in Git are like working on different ideas for your project without messing up the main project. Imagine you want to try adding a plot twist to your story but aren’t sure if it will be good. You can create a ‘branch’ to work on this idea. It’s like making a copy of your story, making the changes there, and if it turns out great, you can add this new part to your main story.

4 Methods to Git Commit/Push/Pull

Method 1 : Github Desktop

Method 2 : VSCode Desktop

Method 3 : Terminal commamd line

Method 4 : Git UI

Three Basic Learning of HTML and CSS

• I started to learn basic of HTML CSS from Codeacademy . Honestly , i found it confusing at the start and wondering in the age of drag and drop why should i learn HTML&CSS code. While working on the website , i realised, i could take inspiration from other projects and website by right clicking on ” View page source” and understanding of HTML was key to pcik and place right code.

Three Basic Learning of Markdown

Learning Markdown, invented by John Gruber and Aaron Swartz in 2004, a lightweight markup language has been a game changer for me for writing and documentation. I have been using Markdown in Notion and Google Docs and wonder why its not a standard practice yet. It allowed me to format text on the web easily.I have made a seperate tutorial page for markdown here

Markdown Tutorial

Markdown is particularly useful for documenting projects in a clear and structured manner. It’s simplicity and readability make it an excellent tool for maintaining comprehensive documentation, which is a core aspect of the FabAcademy program. I was aware of Markdown,in google docs and Notion and now able to efficiently use it for website development is empowering.

-Syntax -mkdocs build and serve -markdown to HTML

For my website i started to experiment with the default HTML CSS Website and then moved to markddown template from Academy

Template

How to make (almost) Anything - Project Idea

Last year, i launched my own initiative “bitandbrick”, a collection of 3 projects with a vision to bring Physical Computing,Linking your Thinking and Play in K-12 Educaton.

Everyone Can Make is to empower BBC micro:bit with a backpack accessory based on jacdac connectors. My Final project will be a cube sat box pacaking and transforamble to a car project

Final Packaging

The Final Packaging will have a Sleeve with Logo Design

Interior

Jacdac Connection

Inspiration of the Project

1. Electrofreaks basicbit
2. Databot
3. iocube
4. cubesat
5. xinabox

Useful FAQ’s

1. How to link image files Gitlab uses relative file name. Start with double dots”..” and forward slash pointing towards the directory the file/image is in

2. How to compress image files On Macbooks, Preview can compress images, Canva is also slick

3. How to compress vide files

Using ffmeg and terminal

1. Steps to navigate week01

   For mac users → install git, homebrew, setup ssh key, clone to local repository, optional install github desktop(commandline works too also vScode can do commits

Code Examples

Resize an image

ffmpeg -i input.mp4 -vf "scale=1280:-1" -c:v libx264 -crf 23 -c:a aac -strict experimental -b:a 128k output.mp4

Resize the video (using ffmeg)

Let’s break down this command: -i input.mp4: Specifies the input video file (replace input.mp4 with your video’s filename). -vf “scale=1280:-1”: Resizes the video to a width of 1280 pixels while maintaining the aspect ratio. You can change the width to your desired size. -c:v libx264: Sets the video codec to H.264 (a widely supported codec). -crf 23: Adjusts the video quality. A lower value like 18 will result in higher quality but larger file sizes, while a higher value like 28 will result in lower quality but smaller file sizes. You can adjust this value to your preference. -c:a aac: Sets the audio codec to AAC (common for MP4 files). -strict experimental: Allows the use of experimental codecs (required for some AAC encoding). -b:a 128k: Sets the audio bitrate to 128 kbps (adjust as needed). output.mp4: Specifies the output filename (you can change this to your desired output file name and format).

source:chatGPT

convert example.jpg -resize 800x800 example_resized.jpg

Using mkdocs build and serve

mkdocs build

mkdocs serve

Errors faced :

1. .yml file not updated. Due to in corect the .yml file to be able to switch from old template to new mkdocs template

2. file size error i accidently downloaded a software installer file and commited causing the below error and previous commit was still being cached in my .git folder(thanks to chatGPT)

To stop caching this, I ran the below git reset command.

’‘’ PS C:\fab\richard-shan> git reset –soft HEAD~1 ‘’‘

Acknoledgments

Pablo and Adrian for recitation and supporting the .yml file error and Aatif for helping me with the errors.

Gallery

I learnt about about HTLML and CSS

From Youtube

3D Model of BBC Micro:bit

Dita's Gown by Francis Bitonti Studio on Sketchfab

In conclusion, Week 1 has set the stage for my journey into digital fabrication, equipping me with the necessary setup and mindset to embark on this exciting path of How to make (almost) Anything

---