Redux Document: English 中文 What is Redux Redux is a predictable state container for JavaScript apps. Redux also created by Facebook and it is a improvement from Flux. Redux is state management for any view library (mostly react) When use Redux Redux is design for complex UI, multiple view source or many interaction with server. If a simple UI, Redux is not necessary Workflow Redux Workflow Example for Redux core In index.

How to connect your React app to a backend on the same origin https://flaviocopes.com/how-to-serve-react-from-same-origin/ React Conditional Rendering Original source: https://www.robinwieruch.de/conditional-rendering-react Why We Switched to React Hooks Original source: https://blog.bitsrc.io/why-we-switched-to-react-hooks-48798c42c7f Why Can’t I Open My React App By Clicking Index.html? From My Own Post Original Resource is NOT Free Medium Original source: https://medium.com/@louis.raymond/why-cant-i-open-my-react-app-by-clicking-index-html-d1778f6324cf How To Use an IntersectionObserver in a React Hook PDF archive: –>Link<– Original Resource is NOT Free Medium Original source: https://medium.

Prototype prototype 1 2 Foo.prototype.constructor === Foo; // true f1.__proto__ === Foo.prototype; // true 1 f1.constructor === Foo; // true f1 don’t have constructor, however depends on prototype chain engine will search f1.__proto__. This is line is equivalent to Foo.prototype.constructor === Foo f1 instantiate a Foo: f1.__proto__link Foo.prototype f1 have a constructor which is Foo since Foo.prototype have a constructor Object.create() Syntax is Object.create(proto[, propertiesObject]) 1 2 var newObj = Object.

Flex Cheat Sheet provide by CSS-tricks.com A Flexbox code Example display 1 2 3 .container { display: flex; } flex-direction 1 2 3 .container { flex-direction: row | row-reverse | column | column-reverse; } flex-direction flex-warp 1 2 3 .container { flex-wrap: nowrap | wrap | wrap-reverse; } flex-wrap flex-flow This is a shorthand for the flex-direction and flex-wrap properties. 1 2 3 .container { flex-flow: column wrap; } order 1 2 3 .

Create new post hugo new posts/new.md Add a picture Basic markdown  hugo build-in shortcut –> figure (src is start from static folder) \{\{< figure src="" title="" >}} Add a reference link Documentation of ref and relref 1 2 \[Neat](\{\{< ref "blog/neat.md" >}}) \[Who](\{\{< relref "about.md#who" >}}) Theme feature This theme extended short code. See Theme Documentation - Extended Shortcodes admonition 1 2 3 < admonition type=note title="Here is title" open=true > Here is text content < /admonition > note (default type) Here is text content abstract A abstract banner info A info banner Tip A tip banner success A success banner question A question banner warning A warning banner failure A failure banner danger A danger banner bug A bug banner example A example banner quote A quote banner

Reference: https://www.restapitutorial.com/httpstatuscodes.html ⭐︎ -> “Top 10” HTTP Status Code. More REST service-specific information is contained in the entry. 1XX Information 100 continue – Client should continue 101 switching protocols 102 processing (webDAV) 2XX Success ⭐︎200 OK – The request has succeeded. General status code. Most common code used to indicate success. ⭐︎201 Created – A new resource has been created and should return a URI. Successful creation occurred (via either POST or PUT).

table 1 2 3 4 5 6 7 8 9 10 table ├── thead │ └── tr │ └── th ├── tbody │ └── tr │ └── td └── tfoot └── tr └── td Intersection Observer API 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 const option = { root: null, rootMargin: '0px', threshold: 0.

Longest common subsequence This is a typical recursive problem. The pseudocode is: 1 2 If S1[i] == S2[j], lcs(S1[i:],S2[j:]) = 1 + lcs(S1[i+1:],S2[j+1:]) else lcs(S1[i:],S2[j:]) = max(lcs(S1[i:],S2[j+1:]), lcs(S1[i+1s:],S2[j:])) Recursive solution: 1 2 3 4 5 6 7 8 9 10 11 12 int longestCommonSubsequence(string text1, string text2) { if(text1.size() == 0 || text2.size() == 0 ){ return 0; } if(text1[0] == text2[0]){ return 1 + longestCommonSubsequence(text1.substr(1, text1.size()-1), text2.substr(1, text1.size()-1)); } return max(longestCommonSubsequence(text1, text2.

What is dp problem DP problem is a programming strategy which use extra space to save time. These problems need to store some state instead of calculate again. For most situation, DP is a strategy to reduce the time consuming for recursive problem. Memorization Tabulation fibonacci example The classic recursive problem: 1 2 3 4 const fib = (n) => { if (n <= 2) return 1; return fib(n - 1) + fib(n - 2); }; How to memorize :

Download Go to this link workspace Run go env in terminal. The variable GOPATH is the default workspace path. Project should under this folder. In this workspace, file should structured as how you route your project: 1 2 3 4 5 6 7 . ├── bin ├── pkg └── src └── <The home web page of version control> └── <User name> └── <Project name> Example: 1 2 3 4 5 6 7 8 .