Skip to content

1. Project management

Assignment

  • work through a git tutorial
  • build a personal site in the class archive describing you and your final project

Before started, I want to remind that I’m using Macbook so these setting and experience are suitable for MAC system user.

Local git setup & site editing

This week I went through the local git setup and started editing this site.

Even I had some experiences with using Github and Python, do everythng with Terminal is still a brand new experience.

Many works and many bugs fixed, just list some:

  • Setup SSH key
  • Sign student agreement
  • Homebrew bug fixed
  • Imagemagick trial and error
  • Color and logo change

Setup SSH key

Always read the “README” file first. There is a link about how to set up SSH key.

Don’t make the same mistake as I did. This strange pattern generates from terminal is not for you to copy paste. Better open the file and copy paste the numbers and letters only.

Sign student agreement

Don’t straight to download, sign and upload the “students.md” file.

Better just edit the exist “agreement.md” file.

Homebrew bug fixed

If you are using Mac, I guess homebrew is your good friend. Somehow it doesn’t work, and you can try this way to fix it.

rm -rf $(brew --repo homebrew/core
rew tap homebrew/core 
brew update

if it works well, you can install Imagemagick with it. BTW, run brew doctor is a good way to check homebrew status.

Imagemagick trial and error

It’s a tool to deal with your images, if your Homebrew is fine, just run the following:

brew install imagemagick brew install ghostscript

I’m still trying how to reduce the size of images (and efficiently)…

Current conclusion is: better use blur, quality and resize all together!

Some codes to use:

magick source.jpg -resize xx% output.jpg #resize

magick source.jpg -strip -interlace Plane -gaussian-blur 0.05 -quality 85% output.jpg #(example) reduce size

mogrify -strip -interlace Plane -gaussian-blur 0.05 -quality 85% *.jpg #reduce size of all jpg files 

mogrify -format jpg *.HEIC # convert all HEIC files to jog files

(update: after weeks Itry to use BIMP, the GIMP plug-in, which is easier…

And photos taken by iphohe need both resize and compress(together with change format). * Resize: just choose “px” on both width and height and select “Preserve” in Aspect ratio * Compress: about 85 % works. And chang HEIC to JPG.)

(another way is using 40% both height/width and aspect ration “preserve” whiling still have compress 85%. Which keeps photos with words from iPhone clear enoygh to see.

Color and logo change

If you want to change theme colar (into dark as my site), add scheme: slate under palette. You can change primary and accent color as well, but there is a limit number to choose (check this site).

Finally, you may also want to change the logo on your site. This is a bit tricky… please refer to image above. Just delete “icon” and you are able to use your own logo!

Useful basic commands

I think these commands are quite enough with git tutorials. (setting up local repo, pull and push)

git #git version check

ls #list all files

mkdir #create new folder

cd #change directory

cd .. #back to parent direcory

cd // #change to root directory

cd ~ #change to home directory

cd - #back to previous directory

pwd #printing the current working directory

clear #clear all printings in current terminal

git clone “HTTP” #cloe git repo from cloud

rm #delete some files

git status #check local repo changes (check before commit!)

git add . #add local changes to staging (upload step1)

git commit -m ‘commit’ #add local changes to localrepo (upload sep2)

git push #push local changes to cloud（upload step3）

git pull #download cloud files to local repo

du #check all files sizes

Press up/down arrow button: can brouse previous commands you sent.

Update: upload videos and 3D models

Videos are quite easy as images. But sometimes they are not loaded on browser, maybe network speed affects.

I tried to register Sketchfab and upload files with different formats (fbx., obj., stl.). They works but looks different, still trial and error.

Change these parts of codes to embed.

  1. model
  2. model page on Skechfab
  3. model name
  4. your page on Skechfab
  5. your name

update1: ffmpeg (video compress)

install troubleshooting

Well, this FFMPEG really took me lots of time to just install it… for Mac users maybe this experience helps.

First, I think succeddfully install ffmpeg, but when I run it get error.

If you find error like this “library no loaded”, try brew install "that_library" or brew reinstall "that_library".

Sometimes terminal wants you to use brew link "that library", just try it. And whatever they told you to do, copy paste to terminal and run it.

If you don’t run those codes before install or reinstall, may results in “permission denied”. I also try to get root user access with sudo -i or sudo -s (after finishing type exit), and you can confirm your access with whoami, that’s funny!

Use sudo chown -R $(whoami) to grant file access to user.

you cannot use root access to brew install, it’s dangarous (see in picture). But you can use it to give yourself permission of files! Note: If you’re in root user mode, using this command whoami will be root user, so when you exit root user mode it’s still not yours. Use this without root user mode should works!

Copy paste what they said, and you got permission of files, finally install library and ffmpeg works!

Useful ffmpeg commands

ffmpeg -i input_video.mp4 -vcodec libx264 -crf 25 -preset medium -vf scale=-2:1080 -acodec libmp3lame -q:a 4 -ar 48000 -ac 2 output_video.mp4 #reduce less: variable bit rate 1080p MP3

ffmpeg -i input_video.mp4 -vcodec libx264 -b:v 1000k -vf scale=-2:1080 -acodec mp2 -b:a 256k -ar 48000 -ac 2 output_video.mp4 #reduce more: fixed bit rate 1080p MP2

ffmpeg -i input_video.mp4 -vcodec libx264 -b:v 1000k -an -ss 00:00:10 -t 00:00:10 output_video.mp4 #trim time (-ss start time, -t duration)

ffmpeg -i input_video.mp4 -c copy -an output_video.mp4 #strip audio

Note: if you want to keep audio, just delete -acodec libmp3lame in the first or -acodec mp2 in the second compression commands. Reference from ffmpeg commands(Fab academy)

Tips:

  1. Just upload big/long (30MB/20sec) videos to YOUTUBE and embed, don’t use ffmpeg.
  2. If you want to convert mov. video to mp4. video, just use codes above, replace mp4 with mov. Mac cannot open but on web should works~

Embed youtube and Vimeo video

Youtube embed: change src, only need to replace “SyvCsQvwiQ0” to the last digits in your video’s url.

<iframe width="560" height="315" src="https://www.youtube.com/embed/SyvCsQvwiQ0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Vimeo embed: change src, only need to replace “10048961” to the last digits in your video’s url.

# Vimeo embed
<iframe src="https://player.vimeo.com/video/10048961" width="640" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

How to add HTML Comments in Markdown

  • For words: [//]:(THIS IS COMMENT)
  • For paragraph: <!-- THIS IS COMMENT -->
Last update: July 4, 2022