1. Principles and practices
Assignments
Here you can find videos and slides from the Student Bootcamp:
Student Bootcamp - day 1: video
Student Bootcamp - day 1: slides
Student Bootcamp - day 2: video
Student Bootcamp - day 2: here
Here you can find a recording of the lecture from the 23rd of january. Among the things that Neil Gershenfeld mentioned and caught my attention was that I need to organize my final project with spiral development in mind. Fab Academy will be a demanding program and I should probably use a project management program.
This week's assignments and learning outcomes, see here:
- Plan and sketch a potential final project
- Read, sign (add your name to) the student agreement and commit it to your repo
- Work through a git tutorial
- Build a personal website in the class archive describing yourself and your final project. Refer to the lecture material for examples
- Upload parts 1 and 2, to the class archive
Learning outcomes:
- Communicate an initial project proposal
- Identify and utilise version control protocol(s)
- Explore and use website development tool(s)
Questions that should be answered:
- Sketched your final project idea(s)
- Described briefly what it will do and who will use it
- Made a website and described how you did it
- Created a section about yourself on that website
- Added a page with your sketch and description of your final project idea(s)
- Documented steps for setting up your Git repository and adding files to it
- Pushed to your class GitLab repository
- Signed and uploaded Student Agreement
Student Agreement
I read the Student Agreement, signed it and committed it to my repo.You can see it here.
Final project
The search for an idea
In the beginning I had so many starting points to choose from but it was quite difficult to see how they would look as a final project. These were the first ideas that interested me:
The Greenland Shark or a whale
- I wanted to do something that acts as a living being og gives you that sense, f.ex.:
- A plant that raises her leaves in daylight and loweres them at night.
- An animal form that rises up at certain time and kneels after some time.
- An animal that swims/moves in slow movements (Greenland shark?) or whale (maybe a humpback whale). - Maybe some other animal. Perhaps a migrating bird that travels to and from Iceland.
Then I saw the final project called Cloudio in Fab Academy by Wim Lance and I liked the idea about levitation very much. I wondered if I could do something similar with my Greenland shark/whale idea. I would like to see it floating calmly in the air, just as it floats slowly around in the cold sea. Maybe it would be possible to lasercut wavelike lines in the box/base and let Neopixel lights move and shine out of the box, casting ripples onto the walls or ceiling as if it was a reflection from the sea.
I would do a 3D design and print the whale or shark. The box would be 3D printed or cut out of birch plywood and all elements, microcomputer, battery, solenoid coils?, magnetic wave sensor? packaged in the box. The whale/shark would be with integrated magnet. This is an incomplete list and Svavar Konráðsson pointed out that I have to decide what kind of input I would like to use. The same goes for the Sun wall and the Sun lamp idea. But then I started thinking about GPS tracking as an input. I haven't decided which animal to work with. Maybe I could find an animal that is tracked and then I could use the tracking data, if it is open to public, and use that as an input. I would like to track a whale if possible. Then I could possibly use GPS tracking of a whale and use LED lights that would indicate where the whale is situated on a map. I could rasterize the map on to a plexiglass plate and maybe mould and cast a small replica of Iceland, where I live.
This project would be made for people who want to visualize, and in a certain way connect themselves to an animal or species. It should also be an reminder that we, the human kind, should respect and care for our nature and the living beings that share it with us. This could also be used by teachers in STEM education.
Mindmap for Humpback whale or Greenland shark
The Sun
I live in a town where tall mountains surround a small fjord. When the sun is low on the horizon it disappears behind the mountains for a few weeks. This happens in many places in Iceland. The daylight can still be bright, but it´s always good to see the sun again in january and people celebrate. The idea is to tell this story by creating a wall light that shows how the sun disappears and then appears again.
The mountain would be cut out of birch plywood and the light would be situated behind the mountains, shining between the mountaintops and finally over the mountain. I picturize it as covering a whole wall in a small room, maybe in a hallway, where you could sit and watch the light appearing on the opposite wall. The height of the mountains would be around 180 centimeters, but maybe this would be a little bit too big as a project and I do not know where it could be situated. Maybe I would have to ask my friends and family if they would like to have a wall like this in their home.
The other possibility is to make this a small lamp. I would fit the embedded microcontroller, battery, neopixel lights, the axis and motor neatly in packaging behind the mountain shaped front. I wonder if I could use Sparkfun ESP32, a DMX and LEDs similar to those that are used in this video. I would like my LEDs to move up and down an axis, maybe with a white, matte plexiglass cirkle in front of them. Then the cirkle would appear like the sun over the mountains. The front of the lamp would be cut out of birch plywood and the rocks and the canyons would be rasterized. The Sun Wall and the Sun lamp would be made for myself or someone who would like to own such a thing; someone who would like to visualize how it is not to see the sun for a few weeks.
Mindmaps for Sun Wall and Sun Lamp
Git tutorial
I used this tutorial when generating an SSH-key and describe it here below in the chapter about Cloning a repository.
Then I went through this tutorial. You can see it here.
Building a website
I had a lot to learn and many steps to go through when creating this website. Even though Svavar Konráðsson, Andri Sæmundsson and Þórarinn Bjartur Breiðfjörð guided me through the whole process, it was a lot to learn. I ran into quite a few problems but in the end all worked out.
Prior knowledge
A few years back I created a simple website using a template from Wix. Then, a few months ago, I participated in adding information to a website made by Þórarinn Bjartur Breiðfjörð and Svavar Konráðsson. I did this by using GitHub web editor, so I had gotten to know editing Markdown a little bit. This helped me a lot.
In the fall of 2024 I attended Pre Fab Academy to prepaire myself for the Fab Academy journey. This is the first time that Pre Fab Academy is held in Iceland. Svavar Konráðsson is my instructor and his collegues, Árni Björnsson, Andri Sæmundsson and Þórarinn Bjartur Breiðfjörð, assisted in this program. Here you can see my documentation from Pre-Fab. This preparation included doing some of the assignments of Fab Academy in advance and therefore some of the documentation on this Fab Academy website is based on my Pre-Fab website.
Compressing photos and videos
As Adrián Torres mentioned in a lecture last week, it is important to compress images before uploading them. The video can be found here. The screenshot below, was taken at the bootcamp for students on the 20th of january. For example it is recommended to change .png format to .jpg and keep the size width to 1000 or less. As can be seen in the photo, certain programs were mentioned as conventional for compressing photos and videos.
In the beginning of my documentation I used the Snipping Tool. Since the size of all images was around 15-50kb I thought that they would be conveniently small for my website, and I decided to load them all up at the same time. When I checked out the website I saw that they were too big. I opened each of these photos in the Photos program, clicked on the three points at the top and chose Resize image. This way I could adjust the quality of the image and also the width and height in pixels. Each time I saved a copy of a resized photo I added the pixel size to the name of the photo. The widht in pixels determined how wide the photo would appear on the screen, so I like using this way of resizing photos.
Svavar introduced me to another way of compressing photos, which is using the Greenshot program. He also explained how to use "FFMPEG to compress videos. He explaines all of this in icelandic in this video. I copied the commands from Svavar´s website and followed a link on his website to this site to learn how to make a textbox. I copied the code and adjusted it, as you can see here below:
Greenshot
With Greenshot you can take screenshots to document everything. You can download it here.
A quick screenshot
When you hold down the Shift key and the Windows key and click on the letter S a window pops up where you can choose quickly if you want to take a screenshot of the whole screen or just a part of the screen.
FFMPEG
You can use FFMPEG to compress videos. That is very helpful since videos tend to be very large files. You can download it here.
How to use these commands to compress photos or videos
The text in the text boxes can be edited, then copied and finally pasted in the adress bar at the top of our folder - but first you have to write cmd in the adress bar and hit enter. After that, you can paste the command there..
Not as easy as it seemed
This sounded easy and I wanted to follow these instructions on how to use FFmpeg to resize a video, but it didn´t work at all. The computer said that it didn´t recognize the FFmpeg as an internal or external command, operable program or batch file. Árni Björnsson sent me two links to help me understand how to solve this problem and set FFmpeg up the right way. The first link explaines what external variables are and how to edit them, see here. The second link is a guide to how FFmpeg is set up, see here. I had to ask a collegue of mine, Viðar Guðmundsson, to assist me. He is an administrator at my scool. He followed the instructions on this site to put FFmpeg to path. After that I tried to use it to resize a video but it didn't work.
Using FFmpeg to resize a video
I spoke to Svavar Konráðsson and he showed me that in the folder where the video is I could go to View and then Show. There I could choose Filename extensions. After that I could see the type of file in the end of the name of the file. Then I could write the whole name of the file/video that I wanted to resize. At last everything worked perfectly.
Setting up programs
To prepare the creation of this website and documentation of the assignments it was necessary to install a few programs:
Python
On Python´s website Python is explained as a language for programming that works fast and is effective in integrating systems. There you can find directions for beginners.
GitHub
In this video GitHub is explained in a fun way. You can use GitHub to code and store data, both on your own or in collaboration with others. I had signed up in GitHub a few months ago so I had an account but when I installed Visual Studio Code I had to connect VSC to my GitHub account. The link to GitHub is here
Visual Studio Code
According to their website, in VS Code you can code in different programming languages, f.ex. HTML, Python, Json, Javascript, YAML and create Markdown and that is exactly what I needed to do when creating my website. One more thing; it is necessary to close VS Code after installing programs or adding extensions and then open it again to begin working. Information here.
GitHub Graph
GitHub Graph can be used as an extension in Visual Studio Code. When you click on it you can see all commits in a pictorial tree/timeline. You can travel between changes in files and restore old commits if necessesary. I like the picturesque look of all the actions because it helps getting a good overview of what has been done. See here.
Material for MkDocs
Material for MkDocs is a site generator that can build HTML sites and it works well with GitHub and Visual Studio Code. You can choose between different themes and add plugins. I like the clear instructions that can be found on their website.
Understanding HTML+Javascript
In Pre-Fab the first assignment was to copy a code from here and paste it into a NotePad. By saving the NotePad file as a HTML file it opens up as a webpage when doubleclicked on. This helped me to understand how HTML and Javascript work.
Learning about CSS
The next step was to learn about CSS, or Cascade Style Sheet, and how we can use CSS to control the way our HTML code appears, f.ex. the colour of elements, where text is situated and which fonts to use. On this page here we could find explanations on CSS.
Learning about Basic syntax/Markdown
By reading about what to do and what not to do on here it helps when writing a Markdown. I took another look at this page after some coding and realized that I was not doing everything the right way. I should have put a blank line before writing a heading, instead of writing the heading at the top of the terminal. I also should have pressed the space button between the hashtag symbol and the text in the heading, instead of not leaving space inbetween.
Cloning a repository
I thought it would be simple to clone my repository to VS Code, since I did it in https://olofh2.github.io/Before-Fab-Academy/Website.html#setting-up-programs, but I ran into problems. I had to generate an SSH-key from my computer to my repository to be able to clone it. I opened Git Bash and followed these instructions but when I was asked to Enter a file in which to save the key I thought that I should copy the path to the folder and add it in Git Bash, but that was a failure. I wasn't supposed to add anything, just press enter. I asked Svavar Konráðsson for assistance and he followed me through the steps and then I realized my mistake. Then, finally, I could clone the repository from my GitLab account. Then I clicked on the three points in the top bar, chose Terminal and then to Open a new terminal.
Material for docs
Material for MkDocs
To set up Material for docs I installed a Python package by copying and pasting this code:
I decided to build my webpage the same way i did with my Pre-Fab website but I was not happy with everything, so I decided to use the repos of my instructor Svavar and my fellow student Jóhannes Andrésson as guidance when setting up my yml. Some of the settings were the same as on my Pre-Fab website but by investigating how they did it in their repos I was hoping to do things in a better way.
I began by copying the code from Jóhannes Andrésson to set up the page and paste it into gitlab-ci.yml. I admit that I find it very hard to understand completely the function of this code:
pages:
stage: deploy
image: python:latest
script:
- pip install mkdocs-material
- mkdocs build --site-dir public
artifacts:
paths:
- public
rules:
- if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'
To see other people's Repositories
Begin by clicking on the symbol for the repo. F.ex. the logo for the repo for Jóhannes is at the top right in the header of each page of his site . After clicking on it, I clicked on the mkdocs.yml that you can see at the bottom on the lower photo here to our left.
I saw that Svavar Konráðsson added Admonition and SuperFences to be able to add notes, codeblocks and more to his website. I decided to do the same and add admonition to my mkdoks.yml file from here. Below is the code that I copied:
markdown_extensions:
- admonition
- pymdownx.details
- pymdownx.superfences
- pymdownx.arithmatex:
generic: true
- pymdownx.tasklist:
custom_checkbox: true
Svavar Konráðsson had the following in the navigation settings, and I did the same:
But I also saw that Svavar had more markdown extensions on his list, so I followed what he had done and added these:
features:
- content.code.annotate
- navigation.instant
- navigation.tracking
- navigation.tabs
- navigation.top
- navigation.tabs.sticky
One more thing that I saw in Svavar's repo was that :
I also copied codes from the same site here and adjusted the text to fit here on my page. The look and usage of admonitions can vary and you can learn more about it here:
Info
Have fun changing admonitions by reading about them here
Collapsable block
Toggle the arrow here on the right side
I think it´s absolutely brilliant to be able to make a collapsable block, like this one, with a small toggle to the right.
Inline block
Inline blocks
It is important to place content after the code for inline blocks. The photo here on the left side is a screenshot from here, and so is the code that was used to make this Inline block.
Note
The photo is 400 pixels wide, 500 pixels was to wide so that the inline box did not fit beside the photo.
Icons and emojis 
An icon or an emoji can say so much and I found information about how to set them up here. I copied this code to enable the use of icons and emojis and pasted it into my mkdocs.yml:
- attr_list
- pymdownx.emoji:
emoji_index: !!python/name:material.extensions.emoji.twemoji
emoji_generator: !!python/name:material.extensions.emoji.to_svg
Adjusting colors on the page
The colors on the page can be adjusted as explained here.
Jóhannes enabled switching between light and dark mode. I decided to follow his way of doing this, as can be seen in his Jóhannes Andrésson
Info
I like being able to format text, f.ex. to higlight or underline words and to write keyboard keys, as described here, so I copied the code below and added it to mkdocs.yml:
There are a few more things I learned from Svavar´s website. I noticed that when I clicked on links on his page to see the origin of codes he used, the links led me to exactly the right place on the sites he had linked to. I did´nt have to search the pages to find the origin. Svavar used this code so that other´s, who would link something to his page would end up on the right spot on his page. I decided to copy the code from his page and do the same.
I also copied this code from his page:
It makes the navigation at the top of the page follow when scrolling down a page.
Checkboxes
I followed these instructions when creating the checkboxes at the top of this webpage.
More mistakes (or learning opportunities)
As can be seen from everything I documented here, I made so many mistakes. When I told the class about some of my mistakes Rico Kanthatham pointed out that in Fab Academy we should see mistakes as learning opportunities. Some of my mistakes were easy to solve, others were more difficult to solve and needed extra assistance.
One of the mistakes I made when creating this site was to make two yaml files in my Actions folder. Svavar pointed this out to me and I deleted one blank yaml file.
On Svavar´s site I saw that it was recommended to add a line to settings.json. I wrote the code myself after the code on his site, but something went wrong. After copying the code and pasting it in the right place it worked.
I knew that the number of hashtags in front of a sentence or a word controlled which type of heading was used and I thougt that if I used one hashtag in front of the headline I should use two hashtags in front of text that I wanted to be bigger than normal text. What I did not know was that the hashtags I was using also made the text appear in the Table of content. Svavar Konráðsson saw this and he let me know so that I could change the use of hashtags if I wanted.
When talking about the Build command I misunderstood something and I skipped this command in gitlab-ci.yml. This command is necessary for GitLab to change Markdown files to HTML and for the webpage to appear. For this reason I got emails telling me that "Pipeline had failed". I also received Error messages in VS Code about my mkdocs.yml not being there. I tried everything I could to find out what was wrong. I opened Git Graph in VS Code to check if I could see what went wrong. I also took a look at a vivideo that Þórarinn Bjartur Breiðfjörð made about Git. This video is in Icelandic and it explained a lot for me.
The tree told me nothing, because I didn't have full understanding of how it works, even though I watched this video. But I could see that everything I committed was received in my repository, so I knew that it had to be something that prevented the information in appearing on the website. Then Árni Björnsson and Svavar investigated what I had done and helped me solve the problem. He told me to use Git Bash, find the right folder (where my cloned repository was stored). The command
He also pointed out an Indent error. That means that in my mkdocs.yml I had pushed the Tab button too often, creating to much indent. This was also creating errors. So it is very important to look closely at how much indent should be with each comment. This site has an example of how much indent should be used. Since I have been making mistakes with this, I must be aware of this.
Useful tips
Autosave in VS Code
It is possible to turn on Autosave in VS Code and I find that helpful because when I am documenting my changes appear almost instantly on my website and I can check out regurlarly how things look.
Useful tips
Commit regularly
It is good to commit what you´re working on regularly and write good description about what I was doing. This helps you find errors if you run into problems.
Switching between programs
One helpful tip: When switching between programs in your computer you can press ALT + TAB