Week 02: Project Management

Important Documents

Day 01: HTML Basics

Today we learned from the brief history of the World Wide Web, which was invented by Tim Berners-Lee in 1989. And Kris also explained the relationship from Server, DNS Server to Client.

Because of my habits, I selected Sublime as a text editor, Chrome, and Safari as my browsers.

Everything start from Html basic structure:

<!DOCTYPE html>
<html>
<head>
	<title>Fab Academy 2021</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
</head>
<body>
	Hello.
</body>
</html>

Something needs to mention:

<meta charset="utf-8">

It makes the browser can display special characters.

<meta name="viewport" content="width=device-width">

With this script, the content will automatically adjust to different devices' browsers, as know as Responsive Website Design (RWD).

When we need headings:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

When we need lists:

<ul>
	<li>Coffee</li>
	<li>Tea</li>
	<li>Milk</li>
</ul>

When we need paragraphs:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML links could be added after most of tags:

<a href="url">link text</a>

After all the steps, we finally got this :) ↓

HTML basic

The further information can be found :

Day 02: Command Line and Git Basics

Command Line

Command Line

On the second day, we talked about the history of command line. It came from teleprinter, teletypewriter and later became computer terminals. In the MacOSX Zsh is defaulted, so the Mac user can easily access it from Terminal.

Git

Git

Git is a version controller. It was created by Linus Torvalds for providing Linux kernel development an alternative. After installing it in the folder, we can use the command line to update and manage old and new files to record down every step we did.

Hint: GNU nano is a text editor for operating environments using a command line interface.

Nano 
$ nano hello.txt

Command in Command Line

Git Installation

For macOS users to install git, please follow the instruction in the Homebrew.

  1. Confirm the installation:

     $ git version
 git version 2.25.1

  2. Git Initailization:

     $ git init
 $ ls -a
 . .. electronics.png .git index.html

  3. Setting the username:

     $ git config --global user.name "John Doe"
 $ git config --global user.email johndoe@example.com

  4. Checking the status all the time:

     $ git status
 Untracked file...

  5. Adding the file to staging erea:

     $ git add filename.jpg
 $ git add . (all the file)

  6. Commiting the file:

     $ git commit -m 'Initial commit'
 2 files changed...

  7. Checking the history of commit:

     $ git log

  8. Get out of git log:

     $ q

  9. Checking the difference from last version:

     $ git diff

HTML

  1. Table

     <table>
 	<tr>
 		<td></td>
 		<td></td>
 	</tr>
 </table>

  2. Image

     <img src="electronics.png" alt="Temporary Image">

  3. Copyright

     &copy;

  4. Links

     <a href="index.html">Home</a>

The further command can be found :

Day 03: Setting up and Using GitLab

GitLab

GitLab

GitLab is a web-based DevOps tool and developed by Ukrainian developers: Valery Sizov and Dmitriy Zaporozhets. Git repository hosting implements into the DevOps cycle: Build → Test → Result

SSH public key (Secure Shell)

GitLab needs your ssh public key for decoding your information. It can be set by following steps:

  1. Generate SSH key:

     $ ssh-keygen -t ed25519 -C "My Key"

Follwing the default without the passphrase.

  1. Print SSH public key:

     $ cat id_ed25519.pub

  2. Copy the result and past in the GitLab: Go by Profile icon → Setting → SSH Keys → Add key

Command Line

  1. remove

     $ rm id_ed25519 id_ed25519.pub

Creat new project in Gitlab

  1. Create blank project

  2. Project name: Fab Academy

  3. Visibility Level: Public

  4. Push an exisiting Git repository

     $ git remote add origin git@gitlab.com:russianwu/fab-academy.git
 $ git push -u origin --all

  5. Everytime want to update the new file:

     $ git push

  6. In order to download all the updated file:

     $ git pull

Markdown

It is a simplify version of HTML. Further information could be found here.

.gitlab-ci.yml

Automatically publish the website:

  1. click button +
  2. .gitlab-ci.yml
  3. HTML
  4. Enter commit message
  5. Commit change
  6. Check the running pipeline
    .gitlab-ci

Open the website

From setting → Pages → https://russian_wu.gitlab.io/fab-academy-2021

Day 03 video could be found from here.

Day 04: Using a Static Website Generator

Hugo

Hugo builds with GoLang and has no dependencies.

Hugo Installation

  1. Download Hugo

    Latest version could be downloaded from here.

  2. Extract hugo to wherever you want

  3. Check if the hugo executable:

     $ ./hugo version

    If it pops up the following similar context, then it works.

     Hugo Static Site Generator v0.80.0-792EF0F4 darwin/amd64 BuildDate: 2020-12-31T13:36:47Z

  4. Find a program location by

     $ which ls
 $ which mv
 /bin/rm

  5. Move the hugo into user program location with Super User Do (sudo)

     $ sudo mv hugo /usr/local/bin

  6. Confirm the location of hugo

     $ which hugo
 /usr/local/bin/hugo

  7. Then hugo can access in the computor from anywhere

     $ hugo version
 Hugo Static Site Generator v0.80.0-792EF0F4 darwin/amd64 BuildDate: 2020-12-31T13:36:47Z

Implment hugo into our file

  1. Create a .temp directory to store all previous files

     $ mkdir .temp
 $ mv ./* .temp

    Hints: touch is to create a file; mkdir is to create a directiry

	$ hugo new site ./ --force

<img class="img-fluid pt-1 pb-3" style="width: 40rem;" src="../hugo.jpg" alt="config">

  1. Get rid of the files we don’t need: archetypes, data, and themes

  2. Edit config.toml file

    config

  3. Move index.html into layouts file

  4. Check the lastest changes

     $ hugo server

  5. Open http://localhost:1313/fab-academy-2021/

  6. Replace the varies content with variables and edit params

    index-variable

  7. Create a partials folder for navigation.html

    navigation

  8. Create markdown files in content directory

    content

  9. Create single.html in _default folder

    single

  10. Change the navitigation path

    navigation

  11. The files in the static would be accessable index.html file

  12. Move README.md file in to the root

    $ mv .temp/README.md ./

  13. Create a .gitignore to write down the file need to be ignored

    $ touch .gitignore

  14. delete the old .gitlab-ci.yml file

  15. Create a new .gitlab-ci.yml

    1. click button +
    2. .gitlab-ci.yml
    3. Hugo
    4. Enter commit message
    5. Commit change
    6. Check the running pipeline

Day 04 video could be found from here.

Day 05: Optimizing Images and Videos

Two types of images

Vector (.svg) and Raster (.png, .jpg) files are wildly used in the internet. However, there are some specialties for each. Png files can store transparent pictures. Jpg stores the files are effective. SVG and ai files could zoom into any size without crap resolutions.

Videos

Videos are the sequence of images and playing together, and the eyes working system would consider it as a continual video. The most popular compression file nowadays is H.264 file, it can minimize the file size and maximize the video quality.

Choose for documentations

Because I am working on MacOS, I usually use Quicktime and Preview to screenshot or record the monitor. For video editing, I usually use Premiere or even After Effect when I need it. After the class, I also tried ImageMagick for image compression. It is amazing and effective, you can see from the following pictures.

image-resize

Insert a shortcodes

	$ {{ <video> }} video-resized-5s.mp4{{ </video> }}
shortcodes video

The futher information can be found :

Bootstrap

bootstrap
Bootstrap is open-source that allows beginners to build responsive websites faster and more organized. Further history about Bootstrap can be found here.

Where to download it?

  1. Include the link in the scripts, however, it only works when you have internet.

     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

  2. Download the compiled CSS and JS from website.

How to start it?

  1. Copy the bootstrap.min.css and bootstrap.min.js files into the static file which we built in Hugo, because the scripts should be able to access by all the folders.
    bootstrap

  2. Add <link rel="stylesheet" href="{{ .Site.BaseURL }}assets/css/bootstrap.min.css"> into the head of website. Min means the minified version of bootstrap library.

  3. Add <script src="{{ .Site.BaseURL }}assets/js/bootstrap.min.js"></script> at the end of page.

Futher information could be found from Bootstrap Documentation

Build a Navbar

navbar header

Main

mains footer

Markdown Tips