Skip to content

Week 1

I arrived late because I had to work last week in Madrid, so my day 1 is day 4 for the rest of participants!

Everyone knows each other and most of them have very well defined final project ideas. I'm in great company!

I've decided to go for a minimal site with the simplest Static Site Generator in the spirit of Spiral Development. I'm going to try and have something reeeeeaally basic up by the end of the day. I want to hit the ground running.

There are two sections to this page, since there are two assignments this week: Project Management (setting up the website and workflow) and Principles and Practices (sketching a final project proposal).

Project Management

Tasks

  • Work through a git tutorial.
  • Build a personal website describing you and your final project. Refer to the lecture material for examples.
  • Upload parts 1 and 2, to the class archive.

git

  1. Create fablabs.io account: This will be used for Mattermost and gitlab (FabCloud) access.

  2. Sign into gitlab

  3. Generate SSH key and put it in ~/.ssh/fabcloud. In my machine:

    bash ssh-keygen

  4. Add key to gitlab: user settings -> SSH Keys -> copy paste public key into box.

  5. Set up git to use that key for the fabcloud server by adding the following to ~/.ssh/config (~/.ssh/fabcloud is my private key):

    Host gitlab.fabcloud.org PreferredAuthentications publickey IdentityFile ~/.ssh/fabcloud

  6. Clone my personal repo, which is already set up with a template.

I'm set up for business! Whenever I need to add some changes it's a matter of git add, then git commit, then git push:

Git workflow

Personal Site

A core part of graduating is to document everything you do in a personal website. Mine is at this url. If I did everything right, you are looking at it!

This is what the website looked like when I arrived:

My personal website before

Static site generator or raw html?

I think a generator is the way to go. I'd rather write markdown than edit html tags.

What have others done?

I checked out some alumni websites.

Nadie Bremer: used Hugo/Stack. Very pretty, amazing documentation work.

Elena Cardiel: quite nice, simple and clean looking. Changed the website at week 7 with a template from html5up

Bo Heather Bowman: Used nicepage.com. Don't love the design, but I love that she included a "Mistakes, bloopers, and oopsies of the week" section and a "Useful ​Tips of the Week" section.

Don Mateo Coates: great website.

After going over these and a bunch of others I realized that there were two categories: those that are really cool and those that I could do in the time I have decided to devote to this 😂. So again, simplest wins, and I can always go back and "up-design" the site later if I'm not happy with it. I expect I will.

Pros / Cons

  • Jekyll: I've already used it, but I didn't ever really enjoy the experience. Also it was so long ago that I might as well never have done it.

  • Hugo: Looks like the shiny new thing that all the cool kids are using, but a look at the Directory structure section of the documentation smells of many of the things that made Jekyll a bit of a pain to use for me. Some of the selling points are irrelevant for me (build speed, maximum flexibility)

  • MkDocs: siiiiimple. I think I'm going for this and then, if I decide I want something more flexible or prettier, I can always switch.

Setting up a static website with MkDocs

  1. Create a conda environment (mkdocs is python, I don't want to pollute my other envs) and install mkdocs in it:

    conda create -n mkdocs python=3.10 conda activate mkdocs && conda install mkdocs

  2. Create new mkdocs project. daniel-mateos is the subdirectory where I put my personal website repo, mkdocs will not complain that it exists already.

    mkdocs new daniel-mateos

  3. Migrate the template and whatever work I've done so far to mkdocs

  4. Set up the build and deploy stages for GitLab CI.

  5. Write the "About" and "Final Project" sections, at least.

This is what the website looks now!

My personal website after

I just signed the student agreement.

Gotchas

mkdocs error FileNotFoundError: [Errno 2] No such file or directory: '/Users/dani/repos/daniel-mateos/docs/.#index.md': it is due to emacs autosave files. I'm using mkdocs to build the site, emacs to write the Markdown. When I focus away from emacs without saving the current version of the file it saves a .#filename file. This somehow confuses mkdocs serve. Solved simply by saving all modified buffers in emacs.

Update: switching the theme

2024-06-11: after delivering the final project, I turned back to the documentation to plug the remaining holes. I wanted to have a prettier website, and the example that I liked the most was Joe Wallace's.

  1. Install mkdocs material bash pip install mkdocs-material
  2. Copy custom.css bash mv ~/Downloads/custom.css docs/assets/other/custom.css
  3. Set material theme in mkdocs.yml: add the following: ```yaml theme: name: material extra_css:
  4. assets/other/custom.css ```
  5. Add material theme to requirements.txt: it will need to be installed by GitLab CI. mkdocs-material

Done! Looks much better now.

Card grids

I really like a card grid with a big image for each assignment like some other participants have done. This seems to be a supported feature of the material theme.

Add to mkdocs.yml:

markdown_extensions: 
  - attr_list
  - md_in_html

Principles and Practices

Task

Plan and sketch a potential final project

Possible ideas

Lamp that follows your hands across the workshop table

Useful! I found a similar idea from 2016 by Kevin Cheng though.

Idea for control: build a small structure with the same DOFs, use it as a 3D mouse.

Variant: hanging flexo

I've wanted to build a hanging steel flexo for a while now. It would allow you to have a hanging lamp with a fixed attachment to the ceiling but an adjustable light point.

It could be cool to make it and specially to make it respond to the environment: maybe you clap and it points to where you clapped.

Water gun autoturret to scare the pigeons away

Pigeons keep dirtying my balcony! Let's scare them away without spikes or bodily harm.

I have a small online custom fabrication and retail business, Horizontes Cercanos. I generate landscape STLs on customers' request and I print them. The idea is that we humans create strong connections with the landscapes in which we live, and especially with those in which we grow up.

There are several ways in which I could extend that work that could become a Fab Academy final project.

A nice landscape

Computational sundial

One idea is to build the sun dial of the XXIst century. It would illuminate the landscape with the angle that corresponds to either now or a particular date. You could also make it controllable with potentiometers or slide capacitive sensors.

  • Moving on a circular rail?
  • Robot arm?
  • circular addressable LEDs?

Mapping violence

This comes from the idea that violence scars. It scars people and through them it scars/stains the landscape. So I could take one of my landscapes and physically map some dataset onto it:

  • Dripping "blood": some viscous substance that I can stain with red dye.

A bloody landscape

  • Laser scarring the landscape: It would melt the PLA and produce interesting patterns like scars.

A scarred landscape

Research

Inspiration

Amazing Fab Academy Final Projects

Nadie Bremer(Nova jigsaw puzzle): Nice idea, incredible implementation.

Elena Cardiel(Lux the smart lamp): Great design and implementation. It impressive how much the final result resembles the initial sketches.

Bo Heather Bowman(The Turtle Box): Fun idea, impressive execution scope even if the result is not super exciting.

Jason Goodman(BCam: digital magnetic field reader): Really cool project.

Wim Lanz(Clodio): Interesting, cool that it floats.

Kevin Cheng: He made a robot flexo lamp! Like the one I had in mind 😢.

Massimiliano d'Angelo (Lampbot): He did another robot arm lamp.

References

https://www.mkdocs.org/user-guide/writing-your-docs/#internal-links