update

content/posts/React.md

@@ -2,7 +2,7 @@
 title: React overview
 date: 2019-10-03
 author: Haolin Yang
-categories: ['Overview']
+categories: ['Overview', 'trick']
 tags:
     - web
     - react
@@ -194,13 +194,13 @@ In this example, a parent component that renders `<FancyInput ref={inputRef} />`
 
 ### useState
 
-```js
-const [state, setstate] = useState(initialState);
+```jsx
+const [state, setState] = useState(initialState);
 ```
 
 ### useEffect
 
-```js
+```jsx
 useEffect(() => {
     <effect>;
     return () => {
@@ -599,9 +599,11 @@ To get current value in functional component, add a ref(react) / create a value
 
 ### Initial state from props
 
-Ref: https://reactjs.org/docs/react-component.html#constructor
+Ref: https://react.dev/learn/choosing-the-state-structure#don-t-mirror-props-in-state
+
+> It is **NOT RECOMMEND** that initialized state from props directly. Update _props_ won't be reflected in the _state_. **Because initialize state only run once**
 
-> It is **NOT RECOMMEND** that initialized state from props directly. Update _props_ won't be reflected in the _state_. **Only use this pattern if you intentionally want to ignore prop updates.**
+> **Only use this pattern if you intentionally want to ignore prop updates.**
 
 Class Base:
 
@@ -617,10 +619,22 @@ Functional Base:
 
 ```js
 //  Don't do this!
-const [state, setState] = useState(props.color);
+function Message({ messageColor }) {
+    const [state, setState] = useState(messageColor);
+}
+```
+
+{{< admonition type=success title="The correct way is just use props:" open=true >}}
+
+```js
+function Message({ messageColor }) {
+    const color = messageColor;
+}
 ```
 
-The correct way is:
+{{< /admonition >}}
+
+If really want to convert props to status. It should use be:
 
 Class Base:
 
@@ -646,6 +660,25 @@ useEffect(() => {
 }, [color]);
 ```
 
+## Trick
+
+### inject props to children
+
+For example, we have a Wrapper component:
+
+```jsx
+<Wrapper>{children}</Wrapper>
+```
+
+if we want to inject a props to children. Could use `cloneElement()` to achieve.
+
+```jsx
+const [isOpen, setIsOpen] = useState(false);
+return <Wrapper>{cloneElement(children, { isOpen: isOpen })}</Wrapper>;
+```
+
+Reference from [React.dev](https://react.dev/reference/react/cloneElement)
+
 ## React Posts Archive
 
 > [See my other post]({{< ref "/react-posts-archive.md" >}})

content/posts/ffmpeg.md

@@ -41,6 +41,16 @@ file 'name2.mov'
 file 'name3.mov'
 ```
 
-### type convention
+### Type convention
 
 > ffmpeg -i in.mp4 out.mov
+
+> ffmpeg -i in.mp4 out.gif
+
+### Scale
+
+It very common to reduce size of output file. Change scale usually the common and efficient way to do so.
+
+> ffmpeg -i in.mov -vf scale=960:-1 out.gif
+
+[Reference from ffmpeg wiki](http://trac.ffmpeg.org/wiki/Scaling)

content/posts/hugo-blog-cheatsheet.md

@@ -2,7 +2,7 @@
 title: 'Hugo Blog CheatSheet'
 date: 2020-08-17T16:43:42-07:00
 Categories: ['CheatSheet']
-tags: ['hugo', 'cheatsheet']
+tags: ['hugo', 'cheatsheet', 'trick']
 toc:
     enable: true
     auto: true
@@ -32,3 +32,7 @@ math:
 \[Neat](\{\{< ref "blog/neat.md" >}})
 \[Who](\{\{< relref "about.md#who" >}})
 ```
+
+## Theme feature
+
+This theme extended short code. See [Theme Documentation - Extended Shortcodes](https://hugoloveit.com/theme-documentation-extended-shortcodes/#13-person)

content/posts/js-trick.md

@@ -2,7 +2,7 @@
 title: 'Js Trick'
 date: 2020-05-03T23:12:40-04:00
 Categories: ['Note']
-tags: ['javascript']
+tags: ['javascript', 'trick']
 toc:
     enable: true
     auto: false
@@ -446,3 +446,27 @@ console.log(
     })
 );
 ```
+
+## Relative time expression
+
+Sometime we want to know the relative time between two date. **Like 3 days ago. 1 year ago.**
+
+There is no vanilla js function direct support that. It is ok to use existing time library to handle it.
+
+> [day.js](https://day.js.org) is good option here. Small and efficient.
+
+For relative time part. See: https://day.js.org/docs/en/customization/relative-time#docsNav
+
+## Lodash api
+
+[Lodash](https://lodash.com) is a very power for utility library
+
+### Lodash to Chrome
+
+```js
+fetch('https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js')
+    .then((response) => response.text())
+    .then((text) => eval(text));
+```
+
+[original post](https://medium.com/@matt.leo/how-to-import-lodash-to-chrome-console-3e5e30b4933e)

content/posts/typescript.md

@@ -2,7 +2,7 @@
 title: 'Typescript overview'
 date: 2021-04-08T23:37:35-07:00
 Categories: ['Overview']
-tags: ['overview', 'typescript', 'javascript']
+tags: ['overview', 'typescript', 'javascript', trick]
 toc:
     enable: true
     auto: true
@@ -11,6 +11,16 @@ math:
     enable: false
 ---
 
+## Trick
+
+### generic types optional
+
+https://garbagevalue.com/blog/optional-generic-typescript#quick-solutions-make-generic-type-optional
+
+### string[ ] & [ string, ...string[ ] ]
+
+The main difference is that type `[string, ...string[]]` at least have one element. `[]` will alert error. `string[]` could be empty. `[]` is ok.
+
 ## type
 
 ### Union type & Literal type
@@ -140,7 +150,3 @@ interface Book {
     name: string;
 }
 ```
-
-## generic types optional
-
-https://garbagevalue.com/blog/optional-generic-typescript#quick-solutions-make-generic-type-optional

resources/_gen/assets/scss/css/style.scss_26962b449d539ee5c1301a7879e5bb0e.json

@@ -0,0 +1 @@
+{"Target":"css/style.min.css","MediaType":"text/css","Data":{}}

resources/_gen/assets/scss/lib/mermaid/mermaid.scss_efa1660969d538c50f4cf5901915f9e4.json

@@ -0,0 +1 @@
+{"Target":"lib/mermaid/mermaid.min.css","MediaType":"text/css","Data":{}}