linjiang82 / journals Goto Github PK

Intro of the bug

How to fix

Gut feeling: Easy, generated the cantonese version of audio files and uploaded to the relevant bucket/folder.
And the result was: OOPS, I broke something, the audio game did not work anymore.

So, maybe it's not so easy.

1. The audio assets are stored in the S3 like below

2. That is why the format correctness of the audio files is vital here to allow the combining to be successful, and here is the requirement of the format

Lessons Learnt

1. Don't trust your gut feeling, sometimes if not most of the time it is not correct.
2. Don't touch the S3 Assets buckets unless we're 100% sure what we are doing and also get the permission from Tech/Team leader or Manager.

Credit

Thank Brandon for fixing the thing I messed up and Thank Jeremy for guiding me through the ticket.

Rebase

With the rebase command, you can take all the changes that were committed on one branch and replay them on another one.

Merge

The easiest way to integrate the branches, as we’ve already covered, is the merge command. It performs a three-way merge between the two latest branch snapshots (C3 and C4) and the most recent common ancestor of the two (C2), creating a new snapshot (and commit).

reset vs checkout

prerequisition:
There are three trees(tree here means a collection of files) in git, HEAD, INDEX, working directory
we can check the files in staging/index by running git ls-files -s and check the file content by git cat-file blob [file hash]

• reset --soft [commit] is going to move the branch and HEAD pointer to commit
• reset [commit] apart from the above step, it will also copy the file from the commit to INDEX
• reset --hard [commit] apart from the above steps, it will also copy the file from the commit to the working directory.

1. Test Promise

it('should reject ', () => {
   expect.assertions(1);
   return expect(APromise).rejects.[toEqual/toThrow]({
     error: 'Your code message',
   });
 });     

Below is a JSX, which will be turned into an Element by React.createElement(). After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

const element = <div>Hello world</div>

When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.

Components conceptually are functions that take props object and return an element

React does not require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.

React may batch multiple setState() calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state, using a function as the argument of the setState function call.

No Inheritance, only composition

Diff

For the sake of performance, it is important to maintain a relatively stable VDom tree structure due to the mechanism of React diff

1. It will compare the Node Type, only if they are the same, it will continue the subtree comparison
2. Property Key to memorize the element and ease the comparison

Fibre Reconciliation

What is Fibre

It is a data structure, a plain js object.

What it solves

Before Fibre Reconciliation, when the tree of elements is too deep, the JS thread will be stuck until the recursion is completed, and due to JS is single thread, so it won't respond to other events(page rendering, user input etc.)

How it solves

Slice the time and when the time slot allocated to JS thread expired, it will come back to surface to check other tasks and then come back to finish the diffing.
It has two phases, render/reconciliation phase and commit phase(which is going to update the DOM nodes)

Bind vs Call vs Apply

usage: func.bind(obj) func.call(obj, arg1,arg2...) func.apply(obj, [arg1,arg2...]
Bind will return a new copy of the calling function and bind this inside func to the passing obj.

Call has three differences with Bind:

1. It would not return a new func;
2. The required parameters will be passed inside call method.
3. The func will run right away.

Call and Apply are essentially the same except apply takes an array of arguments.

Prototype Chain

1. All functions have a prototype property which is an object(the object has a constructor property on default)
2. All objects have a __proto__ /{{prototype}} property which points to the object constructor's protoytpe property
3. Functions also objects in JS, so it has prototype and __proto__ /{{prototype}} properties
4. When looking for a property/method, the object will look for it in itself and then go all the way up along the proto

function test(){}
//test is a function, function in JS is also an object, so it has __proto__, which points to its constructor Function.prototype
test.__proto__
ƒ () { [native code] }
test.__proto__ ==Function.prototype
true

//test is a function,  so it has prototype property, which is an object that has a constructor property which points back to the function it self
test.prototype
{constructor: ƒ}constructor: ƒ test()[[Prototype]]: Object
test.prototype.constructor==test
true

//prototype is an object, so it has __proto__, which points to  its constructor Object's prototype
test.prototype.__proto__==Object.prototype
true

//Object.prototype is also an object, but it's __proto__ is pointing to null, the end of prototype chain.
test.prototype.__proto__.__proto__==null
true

//f is an object constructed by test, so it does not have a prototype property
let f = new test()
f.prototype
undefined

//the below further proof the chain.
f.__proto__ == test.prototype
true
f.__proto__.__proto__ ==Object.prototype
true

Promise

Catch

The Promise returned by catch() is rejected if onRejected throws an error or returns a Promise which is itself rejected; otherwise, it is resolved.

Then

Once a Promise is fulfilled or rejected, the respective handler function (onFulfilled or onRejected) will be called asynchronously (scheduled in the current thread loop). The behavior of the handler function follows a specific set of rules. If a handler function:

returns a value, the promise returned by then gets resolved with the returned value as its value.
doesn't return anything, the promise returned by then gets resolved with an undefined value.
throws an error, the promise returned by then gets rejected with the thrown error as its value.
returns an already fulfilled promise, the promise returned by then gets fulfilled with that promise's value as its value.
returns an already rejected promise, the promise returned by then gets rejected with that promise's value as its value.
returns another pending promise object, the resolution/rejection of the promise returned by then will be subsequent to the resolution/rejection of the promise returned by the handler. Also, the resolved value of the promise returned by then will be the same as the resolved value of the promise returned by the handler.

Diff between interface and type

One major difference between type aliases vs interfaces are that interfaces are open and type aliases are closed. This means you can extend an interface by declaring it a second time.

// the following is ok
interface Kitten {
  purrs: boolean;
}

interface Kitten {
  colour: string;
}

// In the other case a type cannot be changed outside of
// its declaration. The following will cause error: _Duplicated Identifier_

type Puppy = {
  color: string;
};

type Puppy = {
  toys: number;
};

• tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of tabindex.
• tabindex="-1" — this allows not normally tabbable elements to receive focus programmatically, e.g., via JavaScript, or as the target of links.

1. address type is essentially uint160 type, it includes account address and contract address

From XXX（基于什么镜像）
WORKDIR（指定shell语句运行在那个路径下）
COPY（将宿主机的文件拷贝到某路径下）
RUN（运行shell语句，只要构建就会运行，如echo 321 >> 1.txt）
CMD （指定镜像启动运行的脚本，只有容器真正运行的时候才会运行的脚本，执行后容器的生命周期即结束，且一般为阻塞式语句，如tail语句）

一般语句为：
FROM WORKDIR COPY-ADD RUN CMD-ENTRYPOINT
ENTRYPOINT非json则以ENTRYPOT为准，如果ENTRYPOINT和CMD都是JSON则ENTRYPOINT+CMD拼接成shell

EXPOSE---暴露镜像的指定端口
VOLUME---指定映射文件
ENV---指定doker的环境变量，运行时一直生效
ARG---构建参数，运行时无效，可以构建时候临时修改变量
LABEL---指定元数据，便于找到docker
ONBUILD---当前镜像构建的时候不会执行，基于当前镜像的镜像去构建的时候才会执行
STOPSIGNAL---指定容器使用什么信号，一般指定信号名
HEALTHCHECK---检查容易的健康状态
SHELL---指定linux为/bin/sh，windows为cmd

Salting

A salt is a unique, randomly generated string that is added to each password as part of the hashing process. Since the salt is unique for every user, an attacker has to crack hashes one at a time using the respective salt rather than calculating a hash once and comparing it against every stored hash. This makes cracking large numbers of hashes significantly harder because the time required grows in direct proportion to the number of hashes.

What is a socket?

A socket is a way to communicate with other programs (usually on the internet) using a standard Unix file descriptor.

Tcp/ip

Transport layer is layer3, includes UDP and TCP, port number used here
IP layer is layer2, mainly for IP and routing, ip address used here

Byte Order

Host Byte Order vs Network Byte Order
In C:

• h: host
• p: printable/presentation
• to: to
• n: short
• l: long

Dev env setup

P: fatal: could not read Username for 'https://github.com': terminal prompts disabled
S: git config --global url."[email protected]:".insteadOf "https://github.com/"