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)
Wishlist
- 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:
- made a website and explained how
- introduced myself
- described ideas for my final project
- git push-ed to the class archive
Additional credits: My better half & the people@Fablab, Amsterdam (Waag Society).