1. Project Management

How I did this site?

I have years of experience making websites so I took the chance to make something fancy for this assignment.

First of all, I'm using mdx-go to render my site from MDX🔧 source files into plain HTML files.`

M-D-WHAT? 🙀

MDX is an extension of Markdown which gives it support for using react🔧 components inside documents. It's really nice to use as a quick dev server when creating simple sites that don't need a lot of complex routing, since it allows you to mix markdown's simple way of creating html with react's ability to quickly add interaction to anything.

Script Kiddie

I also coded several npm scripts🔧 which help me clean up the output I get from mdx-go, optimize images, adjust the site to work on the fabacademy site and give me the total filesize for the static site. Most of those were coded in bash, but I'm using imagemin-cli🔧 for optimizing the images. I also coded a little node.js script that goes through my assignments folder and creates a json file containing each file title and filename, which I later use to dinamically render the menu, that way I save myself from manually having to add links whenever I add a new assignment page. :)

Superstylin'

I created all styles for my site by hand, I always try to follow both rscss🔧 as a CSS convention to have semantic and reusable classnames and and ITCSS🔧 to have a sane structure, but this time I was a bit messier on the styles.

I'm using a lot of CSS animations and transitions to make the site look smoother, and I'm also using an SVG image as my logo, animating it with CSS too ( here's more info on how that works ).

Deploy Deploy Deploy

As a final step to push the site to go live, I'm using Gitlab's built in CI. Gitlab's CI requires some configuration in the form of a .gitlab-ci.yml file in the root folder of the repo, which tells Gitlab what to do with the files once you push a commit to the repo. In my case I kept it simple and I'm only running the NPM scripts described above to compile the site to plain HTML.

Git this, git that

I have been using git for the last years professionally so following a beginner's tutorial felt like going backwards, instead of that I'm leaving my favourite git commands with a short explanation of why I use them:

git status

As Neil said, you can't get enough status on your life, just throw it all the time to check everything is looking good

git stash

git stash pop

This allows you to take whatever changes you have done, but didn't commit yet, and stash them in a transdimensional bag that's waiting until you need it back.

This is super useful when trying to pull remote changes but you don't want to commit or merge before, just stash your changes, pull, then pop'em.

git cherry-pick [hash]

You made a commit on one branch and kept working on but then need that in your master without the rest of the commits, cherry-pick comes to save you, when you run this it will create a new commit on your current branch.

git add -i

Have you made several changes to the same file but just want to commit some? then this is what you need... just run the command and you'll get an interactive ui where you can pick parts of files to add instead of whole files. More info here🙋