Vue 3

Refs

1. Composition API - An animated explanation
2. Vue2 to Vue3 — What’s changed?
3. Why vite ?
4. A definitive guide to Vue 3 components
5. ViteJS
6. What is the difference between “vite” and “vite preview”?

What is redis

An distributed in-memory key-value database.
distributed: redis can scale from a single instance to a distributed system.
in-memory: that’s why redis is fast and commonly serves as cache.
key-value: redis stores key-value pairs.

Why redis

As an in-memory cache, redis is much faster than traditional RDBMS.
Helps reduce database workload.

Install

Server: See offical install procedure here.
As no offical windows install file provided, tporadowski provides an unoffical install file.

Client: redis server ships with a cli tool redis-cli. For GUI client, check RedisInsight out.

Config

Difference between redis.windows-service.conf and redis.windows.conf

redis.windows-service.conf: Configuration file for windows service.
reids.windows.conf: Configuration file for command line.

Security

Default redis requires no auth, but cannot access from machine other than localhost.
To enable remote access (only tested on windows):
In file redis.windows-service.conf:

1. Comment bind 127.0.0.1(line 64). This makes redis listen to all interfaces.
2. Change procted-mode yes to protected-mode no(line 83). All clients are now able to connect in.
3. Uncomment requirepass foobared(line 503) and replace foobared to your own password.

Use

Different types

Commands

redis-cli: connects to localhost on port 6379.
redis-cli -h [host] -p [port] -a [password]: connect to specified host and port. If password contains special character, wrap it in quotes.

node redis

Note that redis does not work in browser environment.

Reference:

1. A conclusion of Javascript running mechanism
2. Detailed explanation of Javascript asynchronism
3. JavaScript Event Loop And Call Stack Explained

Sinle-threaded Javascript

A running chrome consists of multiple process. Each tab is an isolated process.

A tab process consisits of multiple threads. Among them the important ones includes:

1. Rendering thread. Renders DOM.
2. Javascript engine thread. Runs Javascript. Note that when Javascript engine thread runs, rendering thread hangs. Because Javascript engine thread can manipulate DOM and rendering requires a consistent DOM.
3. Event thread. Handles event loop.
4. Timer thread. Handles timer methods like setTimeout, setInterval. Timer thread should be stand-alone as running of other function may affect timing accuracy.

Asynchronism

Javascript, well-known for its asynchronism.
Synchronous functions runs and gets result. When function is slow (e.g. has file I/O or web request operations), it waits.
Asynchronous functions runs and expects result. The function does not wait for result, instead it leaves a callback function there to handle future result, and it moves on.
Asynchronism makes Javascript run without idle time. That’s why javascript is fast.

Event loop and call stack

Browsers gives us Web APIs to handle callbacks. Functions like AJAX, setTimeout call these APIs.
Web APIs push callbacks into callback queue. Callbacks wait to be executed in the future.
Event loop watches call stack and callback queue. If call stack is empty, event loop takes one callback from callback queue and javascript engines executes the callback.

Queues

Callback queue is not only one but two queue: macrotask queue and microtask queue.
Everytime event loop is triggered, it takes all microtasks and one macrotask. Microtasks are executed first.
Macrotasks: setTimeout, setInterval, setImmediate, I/O operations, UI rendering
Microtasks: Promise, process.nextTick, MutationObserver

What is markdown ?

A lightweight markup language which formats content by its simple syntax.

Why markdown ?

1. Eveywhere, for everything.
   Websites like Reddit, Github, etc. support markdown. Documents, notes, books, emails and so on support markdown. WYSIWYG files are mostly only supported by its own editor.

2. Human readable. Markdown files are in plain text which is human readable. WYSIWYG files are not.

3. Portable. As markdown files are written in plain text, it can be created on any device, any operating system. And almost all platforms supports rendering of markdown.

Kicking the tires

Online editor: Dillinger
Client editor: Marktext, a realtime rendering editor

Syntax

Basic

Extended

FAQ

• Escaping
  Use backslash to escape most special characters.

• Leading spaces
  Markdown does not support leading spaces before each paragraph. Use  (may have some problem with specific renderer like Hexo) or full-width space(a prettier solution) at the beginning.

• Custom style
  Use html tags directly in markdown and style them with css.

  1 2 3 4 5 6 7

  > <div class="poetry">满堂花醉三千客，一剑霜寒十四州。</div> <style> .poetry { text-align: center; } </style>

• Warning box
  The easiest way is to use emojis:

1

> ⚠ **If you are using mobile browser**: Be very careful here!

• Change line in blockquote

1
2
3
4
5
6
7
8
9
10
11
12
13

> Case 1
> 
> 00:23
> 
> 00:54
> 
>  
> 
> Case 2
> 
> 00:21
> 
> 00:51

will produce:

Case 1

00:23

00:54

 

Case 2

00:21

00:51

or an easier one(leave one space at the beginning of the second line and so on):

1
2
3

> line 1
 line 2
 line 3

will produce:

line 1
line 2
line 3

• Highlight delete/add line in code

Use diff directive:

1
2
3

``` diff
- I like markup
+ I like markdown

gives:

1
2

- I like markup
+ I like markdown

• Code block with filename

1
2

``` js, test.js
console.log('hello!')

gives:

1

console.log('hello!')

• List in list/nested list

Use 2 or 4 spaces:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Unordered list

* Item 1
* Item 2
* Item 3
    * Item 3a
    * Item 3b
    * Item 3c

# Ordered list

1. Step 1
2. Step 2
3. Step 3
    1. Step 3.1
    2. Step 3.2
    3. Step 3.3

What is Git ?

A distributed version control system.

Why Git over SVN ?

1. Github uses git. Most modern IT companies use git.
2. Git is distributed, SVN is centralized. Git enables you to work and source control offline with your own repo.
3. Most operations are done locally, so it’s fast.

How Git works

Git consists of 4 areas:

1. Working Directory: Current working directory.
2. Staging Area: Tracks and saves changes ready to commit.
3. Local Repo: Repository on the disk.
4. Remote Repo: Repository on the server.

Concepts

• HEAD: Current branch.

.gitignore file

Refs:

1. Git ignore patterns
2. gitignore

Patterns

FAQ

What is HEAD in git ?

The HEAD in Git is the pointer to the current branch reference, which is in turn a pointer to the last commit you made or the last commit that was checked out into your working directory.

Git reset

Ref

Suppose we have a branch master with A/B/C commits:
- A - B - C (master)

• reset --soft B: Moves pointer to B; changes staged; run commit and will get a new commit as C
• reset --mixed B: Default. moves pointer to B; changes remain but unstaged; run add and commit and will get a new commit as C
• reset --hard B: Moves pointer to B; changes permanently reset; always run status to make sure changes can be discarded

Undo a commit

undo add: git reset
undo commit: git reset --hard HEAD~1 (moves to one commit before and --hard resets staging and working changes)

Links existing directory with remote repo

• In existing directory, git init .
• git remote add origin <remote repo url>(origin is a conventional name for remote repo)
• git push origin <local branch name>

What is a leading slash in .gitignore ?

The leading slash anchors the match to the root.

How can I ignore everything but one file in a directory ?

Original Answer

1

git add -f Website\bin\Settings.json

What is fast-forward ?

Git pull and git fetch

• Ref: Fetch vs pull
• Git pull: Incorporates changes from a remote repository into current branch and then fast-forward/merge current branch.
• Git fetch: If don’t want to fast-forward/merge, use this.
• pull = fetch + merge

Branches

• git branch
  Show all local branches, with current branch marked with an asterisk.

  1 2	* master Pages

• git branch -r
  Show all remote branches.

  1 2	origin/HEAD -> origin/master // Currently checked out branch, which is origin/master origin/master

• git branch -a
  List all branches.

• git branch newb
  Create new branch named newb.

• git checkout newb
  Switch to branch newb.

• git checkout -b newb
  Shorthand for git branch newb and git checkout newb.

• git branch -d newb
  Delete local branch newb.