Project Management

Time Management

In Overall

Neil suggested that we start the semester with a general direction on the final project, using the techniques learned each week to test the different modules, and processes of the final project, and to concretize the final project plan through a spiral weekly iteration.

For Each Week

Neil suggested the supply-side time management approach instead of the demand-side approach, considering the limited time available each week, especially since most of us are taking multiple courses simultaneously in a semester rather than just this one.

Personally, I set up a potential weekly schedule and tried to follow it as much as possible. Sometimes I have to front-load or catch up due to unavoidable time conflicts especially during exam and review weeks.

Wednesday

• lecture - introduction to this week's topic.

Thursday

• tools training at the workshop.
• recitation - supplementary techniques, which is essential in my opinion.
• designing.

Friday, Saturday, Sunday

• making at the workshop, time varies.

Monday, Tuesday

• debugging with TA.
• documentating and updating the website.

GIT and Version Control

1. Install GIT.

2. Creating connection between your local PC to the HTMAA server at Center for Bits and Atoms. GitLab needs some way to authenticate your local git against your account on the global server every time you pull or push changes. This can be done two different ways:

   • HTTPS authentification: git clone the repo with HTTPS - this will require you to input your credentials (gitlab username and password) every time that you clone, push, or pull. This is fine, but it gets a little tiring to enter your password every time, so it's recommended to use vvv
   • SSH authentification: you setup a secret key which is added to both your computer and in your gitlab account. then when you clone, push, or pull, git checks the path where you have saved the ssh key to verify your credentials. a guide on how to set this up can be found here. Note that when setting up your rsa key, you do not need to make this file password protected, it's an unecessary level of security for our use cases.

     • Multiple SSH Keys (advanced git users)

       If you already have an ssh key setup for another git client (like GitHub), you can configure two SSH keys on the same machine which point to different hosts - here's a helpful guide, but feel free to reach out to me if you run into issues.

3. First time pulling to get a local clone of the website.

   git clone

   Now you have git configured! Go to your section repo and at the top right corner click "Clone" and copy the path that matches the authentification method you decided to use. Then, in the command line, navigate to the directory that you want to clone the class repo to and run

   Text Only

   git clone path/copied/from/clipboard
   

   obviously, replacing the path with your copied value.

   Now you have a local version of the section website!

Source

1. Editing the website locally.

2. Push to Server.

   After trying the command-line interfaces (CLI) multiple times, I started to use Visual Studio Code to finish these steps for convenience as it has both command-line interfaces (CLI) and graphical user interfaces (GUI), and it's also the workspace I used to edit the website.

Website

I used the Material theme for MKDocs to create this static website.

The Process

1. Follow the official instructions to finish the initial setup.
2. Editing markdown and configuration mkdocs.yml files.
3. Use mkdocs build to generate a static HTML site to my folder inside the HTMAA Harvard site folder cloned by GIT before.
4. Use VS Code to pull, commit, and push.

Design Features

Typography and Font

I use Px Grotesk and it's monospaced version for my website.

To use a local font file, you need to setup two things:

1. Enable Built-in privacy plugin of Material for MKDocs

The built-in privacy plugin automatically identifies external assets as part of the build process and downloads all assets for very simple self-hosting. Add the following lines to mkdocs.yml:

plugins:
  -  privacy

2. Setup custom CSS following the workflow here.

I never write CSS before, after following this tutorial, I learned how to define font faces that links to local font files. Below is this part of my CSS code. Note the default font style of a font family needs to be placed at the last so that it can overwrite other font variations and act as a default.

/* Px Grotesk */

@font-face {
  font-family: 'Px Grotesk';
  src: url('../assets/fonts/PxGrotesk-Regular.otf') format(opentype);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Px Grotesk';
  src: url('../assets/fonts/PxGrotesk-RegularItalic.otf') format(opentype);
  font-weight: 400;
  font-style: italic;
}


@font-face {
  font-family: 'Px Grotesk';
  src: url('../assets/fonts/PxGrotesk-Bold.otf') format(opentype);
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Px Grotesk';
  src: url('../assets/fonts/PxGrotesk-BoldItalic.otf') format(opentype);
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Px Grotesk';
  src: url('../assets/fonts/PxGrotesk-Black.otf') format(opentype);
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Px Grotesk';
  src: url('../assets/fonts/PxGrotesk-BlackItalic.otf') format(opentype);
  font-weight: 900;
  font-style: italic;
}


@font-face {
  font-family: 'Px Grotesk';
  src: url('../assets/fonts/Px Grotesk Screen.otf') format(opentype);
  font-weight: normal;
  font-style: screen;
}


/* The last one below as default style */

@font-face {
  font-family: 'Px Grotesk';
  src: url('../assets/fonts/PxGrotesk-Regular.otf') format(opentype);
  font-weight: normal;
  font-style: normal;
}


/* Px Grotesk Mono */

@font-face {
  font-family: 'Px Grotesk Mono';
  src: url('../assets/fonts/PxGroteskMono-Regular.otf') format(opentype);
  font-weight: 400;
  font-style: normal;
}

/* The last one below as default style */

@font-face {
  font-family: 'Px Grotesk Mono';
  src: url('../assets/fonts/PxGroteskMono-Regular.otf') format(opentype);
  font-weight: normal;
  font-style: normal;
}

:root {
  --md-text-font: 'Px Grotesk';
  --md-code-font: 'Px Grotesk Mono';
}

Cover Image

Made with Figma.

Technical Workflow

Image Compression

I use Adobe Lightroom Classic (LR) to manage and compress all images, including photos taken by the camera and by phone, screenshots, and renderings. All images go through LR to have optimized visual quality and size. LR is able to export images based on maximum dimension and size. I also created an export preset to easily export images to a certain folder without going through settings every time. The settings I used are as follows:

• Export folder: a dedicated folder under MKDocs folder for all images.
• Resolution: up to 2000 x 2000 px
• File size: up to 500 KB
• Sharpen for screen

Video Compression and Hosting

For either short or long videos, I use Adobe Media Encoder because I can preview the file size before exporting. All videos are exported to MP4 format.

For long videos, I host them on Vimeo without ads. Free alternatives include YouTube, with ads.

Tips

Directory Character Case Matters

Useful Links

Convert Rich Text to Markdown

Paste to Markdown

Command-Line Interface

Command line crash course

Introduction to the command-line interface

Material for MKDocs

List of available lexers in Pygments

Resources

⬇️ Download Project Files and Assets