2. Project management

This week I worked on defining my final project idea and started to getting used to the documentation process.

First try - hexo

For the documentation, first I wanted to use Hexo and reconfigure continuous integration and deployment but with the lack of time due to others projects, I fallback to Markdown to respect delay. I maybe try to switch back to Hexo that seems interesting in next weeks.

The hexo init with npm, I have to init in a blank folder and then copy it to my workspace folder :

hexo1

Hexo with the theme i choose is in chineese… lol

hexo2

My work on hexo :

hexo3

Using Git

To synchronize my work, I use git in GUI and command mode.

git2

git

I’ve also use directly GitLab for managing and editing file like .gitlab-ci.yml I’ve deleted for moving to hexo using template in GitLab. I’ve finally go back restoring original .gitlab-ci.yml file to reuse markdown for my website.

To init my workspace, I create SSH key pair using this tutorial. Then I add public key to my gitlab profile (I had to make it twice because I change computer during fabacademy and I create new keys instead of transfer older ones, it’s more secure because old keys can be reused if somebody spend time on scanning HDD on the old computer…)

gitlabprofile

Then I make a git clone to have a local copy of the website and start working on it.

Fallback mkdoc with typora + sublime text

Due to lack of time, I finally go back to mkdoc, so I use a WYSIWYG editor called Typora

typora

and also sublime text to raw edit for fine tuning. I’ve edited .gitignore to add file in ignore list due to Hexo.

sublimeText

Edit week03 :

Due to huge number of images, I want to use image magick. But having some problem with install of WSL (linux subsystem for windows) and not having time to reboot and reboot and reboot again. I will use irfan view to compress images.

Typora always use absolute link, so before uploading md files, I use sublime text and I make a global replace for images to relative path that work when static website is generated.

irfanview

image-20200211182340506

irfanview2

In many cases (by experience and without need of transparency) Jpeg files are lighter than png, so I made bulk batch transform to jpg and replace path in sublimeText.

Git issue

I have adding by error backup images (if bulk compress fail) in commit, when pushing to origin, I have the message “too large blabla”, so I commit a suppress of images and try to push again but still the error !!! So finally, I revert branch to a commit before the wrong commit and then I redo a good commit.

Edit week04 :

Adding some hacks

My developper & hacker side can leave this website only using mkdocs (shaaaamme! shaaaaamme!) As hexo wasn’t success (start website last day of the first week is not a good way indeed) and because I doesn’t want to spend time just translating template I’m thinking about another solution.

I have see many student using jekyll so it seems to be legit solution but… I hate just doing the same just because everybody choose it.

So I made it in hacker way. I choose to keep mkdocs, little tuning with another template (I use theme slate of mkdocs-bootswatch) and I will overwrite generated html pages using the GitLab CI :)

- mv -f custom_hack/index.html public/index.html

I get html source from standard generated mkdocs index and I’m starting to rewrite it directly in sublime text with HTML and JavaScript. Even if matrix text effect is overused and deprecated since 20 years, I will use it, Matrix 4 is announced and old stuff always became fancy.

I have found a full JS effect here : https://codepen.io/syropian/pen/bLzAi

I have rewrite it to insert it in smooth way and have it responsive and adding custom drawing on top of it.

Edit week07 :

I optimize by myself some images that are very heavy (reduce size + choose good type between png & jpg) but it’s time consuming so I use FileOptimizer to automatically reduce filesize. It’s not perfect, it’s very CPU consuming and take times for large images but it’s do it alone so I can do more useful stuff in the meantime.