1. State of the art, project management and documentation¶
The first week of Fabri for me began even before Fabri actually started. Our core local mentor Rico very graciously scheduled for us to meet online and run us through everything ovearchinigly, and got us to meet Mina and Kae.
Image
Previously to this, we had been running around anxiously trying understand how best to prepare, mentally of course, but also with all the material and equipment lists to ensure our cohort's Fabri journey could be as smooth as possible.
The morning of day the course started, we were sent a chain of emails regarding logins and signups. But nothing prepares you for when it actually begins…
What the week looked like:¶
As anxious and excited as i was for the First ‘Class’, i left the three hour global session thinking that damn we didn’t study anything today! And this was my first lesson in Fabri, expectation and time management. You see, if we haven’t studied anything in the session, that would mean that i will need to account for more hours per day (more than i had previously accounted for, since i also have a full time job, like some of my global cohort), to learn what needs to be done.
The second day of Week 1 was my ‘official’ introduction to the course, where our 'Local' Mentors planned for very cute ice breaker sessions, which gave us all a chance to get to know each other. Coincidentally, these 2 days of Fabri were a holiday for me from work and it gave me an opportunity to get a headstart on the assignment for the week.
Our amazing mentors shared with us their personal individual hacks and cheat sheets, along with a small list of tutorials. Knowing that things still seemed like going over our heads, we requested for another session to clear doubts, that we hopefully have, once we go over all the tutorials that were shared. I left feeling a lot more sorted, and ready to jump into all the software downloads and catching up on tutorials.
Luckily for our Day 3 tutorial, we kept asking all the workflow questions, learnt about softwares that needed to be downloaded, encoded, decoded, mac issues, way around those mac issues, file formats, compression, batch compression, website linking, cloud hosting, and so on. It was a LOT, but this is the point when to my mind, i had assumed i clarity of my way forward.
But i was so wrong!!
Takeaway from Global Session¶
The First global session was spent talking and being introduced to all the global participants & students and all the amazing Lab supervisors and mentors. Hearing from them about the varied educational & professional backgrounds that everyone has come from, re-enforced why choosing to do Fabri was the best decision i made this year. From a home schooled student to well established professional, everyone has come together to upskill and learn more, and that is exactly what i had been missing these past few years of working. A community to learn from and where knowledge is shared.
Image
Checklist for the week¶
Image
Personal thoughts & Ideas¶
Since this first page of documentation lays the tone for how i will continue writing, i wanted to look at my webpage to read like a blog diary. Knowing the process a designer takes and the challenges and successes that they faced is something i enjoy reading. And i wanted to take the same aprroach during this course.
As someone with ADHD, before i begin a project, i need to be able to understand the visible structure of work flow & work management, before i can begin. It is a boon and a bane. And unless i can understand the logic of what is happening, the pieces never fit together.
Making websites has been the bane of my existence, since i never could see the puzzle pieces come together for when i tried building my own from scratch. That insight helped me too this time, coz the limited understanding of how to manage workflow, was laid out in a perfect structure by our mentors during our Local Sessions.
Research & Inspiration¶
look at othe students work for inspiration and to understand depth of expected documentation
Student works : Indian Students + International Students
Softwares, Tools & Applications¶
All across the various webpages, presentations and google sheets that list down the tools and softwares needed for each session, the sheer amount of data is just overwhelming and too much to digest at once. For myself, i had decided to take each week as it comes, and download softwares as and when required. The only thing i prepped before hand is ensuring my laptop had enough storage space to deal with the surge of new installations.
SOFTWARES & APPLICATIONS:¶
Hero Image
1. Notion¶
I spent the Day 2-3 laying out a structure to what my workflow needs to be for the 3 months (for now). I setup a notion page (shoutout to Rico for showing his) and this was a nudge to explore and learn tools and applications i had been pushing aside for a while. My notion page is a collection of all links and tutorials shared, every valuable tab opened on my Safari that week, deadlines, details from the Fabri website and DATES DATES DATES.
2. VS Code¶
To begin with, the mentors advised us to download VS Code which is the Code editor of choice and to have a look at this tutorial to help familarise us with the software and it’s capabilities.
3. Markdown¶
The scripting language we will be using to write the code on VS Code is Markdown which exists within the application. I reffered to this video to get a quick tutorial of the language. It covers all the basic capabilities that i will be needing for the documentation process. I also have the digital cheatsheet for Markdown on my Notion.
4. XnConvert¶
Since each student has a limited data storage available on the website, we were recommended to use XnConvert to help compress our Images for the website. I downloaded it for my Mac from here.
Once downloaded, the installation is very straightforward. However, it is a trial and error method to arrive at the correct configuration for the amount of image compression needed based on the orignal size of the Image. I have mine set to the following settings:
Image
5. HandBrake¶
We were recommended to use HandBrake to help compress our Videos for the website. I downloaded it for my Mac from here.
After using it, i have chosen to host videos on YouTube itself as i don't have to compromise on the Video Quality. Moreover, it will help save space on my GitHub repository.
I have had success using XnConvert to slightly compress heavy videos before uploading them online.
6. Adobe Photoshop¶
Based on my insights from the various student websites, i have decided to upload Collages and Compositions, rather than singular images. For this, i will be using Adobe Photoshop, as it gives me more control on the outcome. Moreover, the idea is to upload a singular image, rather than multiple ones, and hence save space on the GitHub repository as well.
7. iMovie¶
Since the idea is to setup a quick and fast workflow for ensuring ease of documentation, i will be using the Mac iMovies software. The interface is extremely straighforward and beginner friendly, and comes with an array of lisenced soundtracks.
Work Flow:¶
Setting up Material List for the Course¶
Since I am the first batch at the Somaiya School of Design Fabri Node (that was registered this year), we had been in touch with Anastasia to help us setup a material and equipment acquisition list. However, this google sheet is very rightly, unprintable, uncopyable and unshareable. So we sat down and created a digitised copy of the entire sheet, along with adding details of what is and isn’t available on-site in our SSD, FabLab and Bioriidl stock. The stock check was very graciously done by our entire extended team: Pranav, Jesal, Dinesh, Nitish, Chinmay, Akhilesh and Apeeksha.
(insert image)(insert image)
Personal Websites logins¶
One day before the course started, i received emails from Fabri to setup our login accounts that i will be using to access the internal FabLab network, my Gitlab account, my Evaluation Portal and my Mattermost access. All of these are to be logged into, in this specific order, using the registered email id and password sent in the emails. I also went ahead and installed the Mattermost app across all my Mac devices (laptop, phone and ipad)
(insert image)
Personal Website Setup: Attempt 1¶
After my Local Tutors showed us the multiple ways to set this up, i chose to use the VS Code interface rather than the WebIDE option of writing code within the GitLab page. VS Code allows for working on the Website without internet access, as opposed to WebIDE which can only be used online.
Both of these allow for a live preview of how the webpage will look like as you work on writing and editing the code.
For me, the thing i couldn’t wrap my head around was how will the code on an application on my Desktop (VS Code) update the details of my website on GitLab cloud. This was explained to us by our mentors that for my workflow, i would first need to download Git on my laptop and sync the application with the website login. This part seemed straightforward and logical.
However, getting to setup GitLab with VS Code has been the most mentally exhausting part of this entire assignment. So far i have shuffled between Xcode, Terminal, VS Code and hours of google searches and youtube videos. Spent 2 days trying to figure out how to connect my VS Code to my GitLab repository.
(insert image)
Personal Website Setup: Attempt 2¶
In the meanwhile, Rico helped me download a .zip vesion of the FabLab GitLab repository to begin experimenting with writing in Markup and updating the contents on the documentation page. For Day 4-5, I have given up any hopes to be able to solve this myself and was waiting for a miracle here.
Updated strategy on Day 5:
- download the GitLab repository on my desktop
- upload the folder on VS Code Workspace
- use the existing template and add content from my google doc
- edit the code in VS Code with Preview mode on
- copy & paste this code back on to GitLab web.io
- commit the website and hope this works!
(insert image)
Updated strategy on Day 6:
- all the text has been edited and the relevant code written
- opening the WebIDE Edit option on GitLab account and pasting the code
- have added an About Me folder as well, along with adding the relevant pictures
- still unable to link images to the webpage, most probalbly because of improper hosting locations
Personal Website Setup: Attempt 3¶
I was unable to setup my website the first week and wasn't able to progress on the documentation for the next week as well. Rico came to my rescue again and very graciously sat through with me online, determined to solve this issue.
We tried uninstalling ALL the softwares that i had installed for setting up my Git and RE-INSTALLED everything again, assuming that this was a 'typical Mac issue'. And we RE-DID the ENTIRE process of downloading the Git repository and attenpting to connect it to my VS Code.
Image
The issues persisted and as a LAST resort, we had to contact Julian at IT to help with understanding the hiccup and setup my page.
Image
However, by this point, i was almost reaching two weeks without a website setup and i decided to GIVE UP on using VS Code.
Personal Website Setup: FINAL¶
HELLO WebIDE!
As dismissive as i was in the beginning of using the WebIDE interface since it can only be worked-on Online, i realised that i should have moved to it SOONER! I also realised that it is in very RARE situations that i do not have internet, and i would have to just live with the fact that in those very-very-very-specific-limited situations, i would not be writing on the website!
The interface of WebIDE is almost exactly like the VS Code one that i liked. And the best and my most favourite part is that, unlike VS Code, i have a SINGLE COMMIT & PUSH button that uploads the changes made to the website!
I finally had my Website workflow!
Image
Personalisations¶
Shortcuts!¶
-
Rico shared this cheatsheet for a quick overview of the beginner commands. And this cheatsheet which allows for a live-preview of the text, inorder to plan the aesthetics of the webpage.
-
My go-to has been ChatGPT to ask all sorts of questions to 'write code in Markdown for ... '. I also ask ChatGPT to point out errors in the code and to rectify the code. This has been one of my most useful tools when i need help with scripting, and it has also helped me momorise a few shortcuts!
-
Adding Images to the documentation is almost 50% of the task, and remebering the shortcut for it saves a lot of time.
/(image name)){: width=600px}
- Adding Website links is another common detail that is needed in the weekly documentation. I use this for adding citations, references and videos
[Write the Text to hyperlink](Paste URL)
- Sometimes, to showcase a rather longer process, that photo and video can't do justice to, a Google Slide can be inserted to the documentation page as well.
<iframe src="https://docs.google.com/YOUR_PRESENTATION_ID/embed?start=false&loop=false&delayms=3000" width="800" height="450" allowfullscreen></iframe>
- Everything else that is specific to the Weekly Documentation is also provided on the sample texts on each weekly webpage. I usually look at the preivew to choose what details i like and copy the code to use in my documentation.
Tutorials¶
Learnings & Takeaways¶
Steps i would take, if i could re-do this (for Mac only)
(insert flowchart)
People to thank for this week¶
...