Week 01: Project Management

Assignment: plan and sketch a potential final project, work through a git tutorial, build a personal site in the class archive describing you and your final project

This week, I:

read the Fab Charter

Note: I appreciate the spirit behind the Fab Charter - the community-first approach to growth, in particular, is critical to a more societally relevant way of creating, rather than staying within the bounds of the field. A concern that I have sometimes is whether my work benefits others, so having a way to develop a local communal resource is very welcome.

set up my Gitlab account

set up git for version control

created and deployed my documentation website using MkDocs and Markdown.

This site was created using MkDocs, a site generator "geared towards building project documentation". All pages are written using Markdown. I chose this approach as Markdown is easier to read when coding than HTML, and MkDocs provides a clean template to use Markdown in.

Markdown looks like this:

Markdown Code

and renders like this:

Markdown Code

I had difficulty at first with understanding the important role that tabs and line breaks played in formatting pages, as I was used to other programming languages that ignored whitespaces. Multiple line breaks are needed to start a new line on the page, and tabs are used to adjust indentation.

I also was surprised at the slight difficulty I faced when trying to manipulate images. To present a raw image, it is fairly easy - the code looks like:


but when I wanted to, for instance, move the image to the right of the screen, I had to switch to HTML, or use CSS, which I don't prefer. The HTML looked like this:

<img style="float: right" src="../img/cryptid2.jpg" alt="Profile Image" width="200" />

which I found oddly clunky for an otherwise easy-to-read language. It is nice, however, to be able to use HTML within Markdown, as Markdown is built on HTML, so you can do more complex things if needed.

My theme was Cinder, from the MkDocs Wiki.

To import the theme to my website, I cloned the Cinder repository:

Cloning Cinder

to my site's home directory (C:\Users\userName\fab-academy). Note: Be sure to clone it to the base directory, instead of putting it in a second folder inside fab-academy - that will break the website.

Use the following to launch a locally hosted page that is immediately responsive to changes made to saved files. Very useful for testing changes to your pages.

mkdocs serve

CTRL+C to close the server

sketched my final project idea

used ImageMagick to compress and optimize images for web hosting

I used the following command line entry as a catch-all form of optimization; however, more documentation can be found on the website for customizing the way that the image is modified.

Note: I had to use the 'magick' command instead of the 'convert' path due to an 'Invalid Parameter' error - it appears that Windows may have its own 'convert' command already, so I would have to modify the Path to prioritize ImageMagick. I chose to not take that route, as 'magick' worked just as well and was less trouble.

magick filePath/fileName.jpg -resize 900x900 -quality 70 -density 72 -units pixelsperinch newPath/newFileName.jpg

The commands are fairly obvious, but the -resize element does not change the scale of the image - instead, if it is given a WxH value, it scales it down so the maximum dimension is the greater of W or H. However, given a single value, it scales the image so the minimum dimension is that value.

With this command, I was able to compress the initial sketch on my final project page from 1.81 MB to 65.9 KB - approximately an 27x reduction in size.

used HandBrake to compress a video

HandBrake is a free "tool for converting video from nearly any format to a selection of modern, widely supported codecs." It was recommended to me as something similar to ffmpeg with a GUI, and it was less intimidating to navigate.

The UI has a few tabs that you can go through to convert the video. I was able to take a file from 4.51 MB to 789 KB, with some quality loss but not a sizable amount. I used these settings:


In the future, I plan to learn how to use ffmeg, but for now this works quite well.

Note: I had to rename the file format from .m4v to .mp4 for my browser, Chrome, to support the video. Not sure why HandBrake outputs their 'mp4' format as an .m4v file, but renaming it works just fine.