Digital fabrication principles and practices

Assignment: Built a personal site describing a potential semester project and upload it to the class archive using Git.

Learning outcomes:

  • Explore and use website development tools
  • Formulate a final project proposal
  • Identify version control protocols

Week 1: Fablab Academy, Amsterdam and beyond

After my experience at MIT Media lab europe (as a research fellow in the Human Connectedness group), about 15 years ago, I was excited to be back in a similar inspiring making environment, locally and globally. It started with introductions on-site at the Waag Society in Amsterdam, meeting a nice bunch of wide-ranging people from Cyprus, Japan to the East of the Netherlands. After hearing about all the ins and outs of Fab Academy, followed by a global lecture by Neil Gershenfeld (MIT), I mainly worked on the first assignment: Building (and adjusting) this website and pushing it to the Fab Academy repository. I also worked on some initial ideas for the final project.

In doing this, I set myself the challenge of using my own web environment with decoupled architecture and designing my own style-sheets. It would have been easier to just code my website in plain html and using CSS stylesheets or use a Wordpress template (because a plugin to convert to plain html already exists for this CMS). However, like I said, I wanted to set myself a challenge instead of doing it 'generic template-style'. So, I started with configuring the Bolt CMS on my hosting environment to allow for the content types I needed (such as weekly assignment posts with series of images). Then, I made the posts available through a JSON API using a Bolt extension. I also designed a basic layout in Photoshop and converted that into an html/(s)css template. I used the Slim php framework to tie the the template and the data from the API together. As the Fab Academy requirements only stipulated static html pages, I wrote an export script in php to convert the pages (including dynamic links and images) to (static) html. Finally, for the gallery, I used the Javascript lightbox 2 plugin.

On my website, I included some ideas for my final project in which I am planning to use various fab skills. Also, I familiarised myself with Git, GitLab and GitHub. Which means I no longer need to watch the screencast "Let's suck at github together".

Biggest challenges

  • Converting my initial dynamic website (CMS and PHP framework) to a static version suited for the Fab Academy repository
  • Coming to terms with the 'selfie society': Just coining a term for our increasing demands and expectations to express and share everything you do publicly through networked media
  • FITting in my Fab activities with my other work and projects
  • Accepting I did not have enough time this week to write another CHI paper, and...
  • Neil Gershenfeld: "Every day of the week, you will be out of time"

Highlights of the week

  • Meeting old and new (fab) people
  • Symposium Games for Behavioral Change (just made it in time for the presentation of my students)
  • Discovering that Coda has a built-in feature for Git
  • Having my site up and running in the Fab repository and using its requirements (plain html...)
  • Yoga (> understanding Git)

Lessons learned

  • It is important to fail
  • Sometimes just restarting your computer is enough to make it work (such as fixing 'Unapproved caller' issues when installing new software)
  • If people say it is not possible (e.g. automatically converting your dynamic webpage CMS set up to plain html), it can still be done, but with a lot of hassle...
  • If it gets complicated -make a drawing

Questions of the week

  • What is a fablab?
    • The educational outreach component of MIT’s Center for Bits and Atoms (CBA), an extension of its research into digital fabrication and computation
    • A technical prototyping platform for innovation and invention, providing stimulus for local entrepreneurship
    • A platform for learning and innovation: a place to play, to create, to learn, to mentor, to invent
    • A global knowledge sharing network that spans 30 countries and 24 time zones.
    • To be a Fab Lab means connecting to a global community of learners, educators, technologists, researchers, makers and innovators- Because all Fab Labs share common tools and processes, the program is building a global network, a distributed laboratory for research and invention.
  • Why use Git and GitHub? In the case of my personal website, this approach seems to be a case of overengineering (I could e.g. just use Coda's embedded FTP functionality). However, I can see it being useful when working on the same coding project with a lot of people, consequently making version control essential. Also in the current set-up, we can watch over the shoulders of fellow fab academy members and monitor each others' process. Whether that is a good thing is of course debatable...
  • What is the difference between GitHub and GitLab? There is not a big difference, still, GitHub has a bigger community, but is less suitable for (hosting) private projects, so that is where GitLab comes in.
  • What is the Fablab experience like? Neil Gershenfeld: "Exciting but a lot of work."

Tools used

  • Adobe Photoshop (for designing my website)
  • Git (Open source distributed version control system)
  • GitHub / GitLab (Git repository hosting services)
  • Sublime Text (code editor)
  • Coda (All-in-one code editor, with built in way to open and manage local and remote files -not free)
  • Bolt (Open source Content Management Tool)
  • Slim (PHP micro framework)
  • Twig (for templating)
  • PHP (server-side scripting for e.g. generating and converting dynamic content)
  • Mamp Pro (local server environment)
  • Sass /SCSS (Cascading Style Sheets with superpowers)

Tools not used

I miss using Flash. I know times have changed, but I still prefer to seperate coding when designing interactivity. After all those years, I miss easy, visual, non-bloated tools enabling us to do that.

Some useful Terminal & Git commands

  • ls -al (also lists hidden files)
  • cd .. (change directory one level up)
  • git clone (clone/copy existing repository)
  • git commit -am "...." (for directly adding a commit message, skipping text editor)
  • git push (pushing your changes back to the original repository)
  • git pull (also a great way to get the updated files from the students in the repository)
  • git status (see changes made to local working directory)
  • git checkout (checking out files, commits and branches, e.g. git checkout ../../.DS_Store)
  • rm (for removing unwanted files, but be careful, -e.g. rm ../../.DS_Store)
  • git log (show history of commits)


  • Account details for Adobe Typekit (to add my preferred fonts)
  • Focus more on improving the design of my website
  • Adding playful and meaningful interactivity: 'presents' for the user
    • Implement Paper.js -like functionality
  • Global videoconferencing systems that work flawlessly
  • Combine my fab activities with my university work and its new maker space
  • Write a paper on "What fab design can (and should) do"
  • Extra time...

I have:

Additional credits: My better half & the people@Fablab, Amsterdam (Waag Society).

The Waag ("weigh house") is a 15th-century building that holds the Fab lab, Amsterdam. It was originally a city gate and part of the walls of Amsterdam. The building has also served for many purposes, such as a guildhall, museum, fire station and anatomical theatre. It featured in Rembrandt's painting: The Anatomy Lesson of Dr. Nicolaes Tulp.
The Waag ("weigh house") is a 15th-century building that holds the more
Global Git lecture by Neil Gershenfeld
Global Git lecture by Neil Gershenfeld
Let's fail! Lesson during this week's Symposium Games for Behavioral Change
Let's fail! Lesson during this week's Symposium Games for Behavioral more
Sketch of how my site (and Git) works
Sketch of how my site (and Git) works
FAB 2016 shirt (-GIT)
FAB 2016 shirt (-GIT)