Jeremy Lu coodoo

## book_summary.txt
# BOOK INFO

	- 黑暗巨塔

	- <no_subtitle>

	- 大衛．恩里奇

# OVERVIEW

## fatch.js
/*
  # goal

    - 在不修改 node-fetch 原始參數格式下新增兩功能

      1. 新增 timeout 設定且逾時自動重試

      2. 新增 retry 模式可指定重試次數

    - 所有 config{} 皆有預設值因此使用上與原始 fetch() 相同

## css_outline.js
$$('*').forEach(e => {e.style.outline = "1px solid #" + (~~(Math.random()*(1<<24))).toString(16);e.style.outlineOffset='-1px'} )

## jotai_setter.js
// sample code copied from the blog:
// https://blog.axlight.com/posts/you-might-not-need-react-query-for-jotai/
const idAtom = atom(1)
const dataAtom = atom(
	// read
	async (get) => {
		const id = get(idAtom)
		const res = await fetch(`https://reqres.in/api/posts/${id}`)
		const data = await res.json()
		return data

## statechart-xstate.md

      
              1 file
            
          
              5 forks
            
          
              0 comments
            
          
              17 stars
            
          
                coodoo
                / statechart-xstate.md
            
            
              Last active
              May 26, 2022 20:00
            
              
                Extensive research of statecharts with a focus on front-end development.
              
          
    The case for statechart and xstate -- why it matters and how we can benefit from it

Bottom line up front


redux is a global data management tool, not a proper state management tool, hence causing a lot of troubles


statecharts is an extension to Finite State Machine (FSM) which provides explicit and safe state management capabilities, perfectly fit for front-end development


statecharts had been used intensivelly in all industries (be it embedded systems, hardware, electronics, aeronautics, automotive, game development and more), it's us front-end developers late to the party


## a.js
async function foo() {
  // throw new Error('bb')
  return new Promise((res, rej) => {
    setTimeout(_ => {
      // throw new Error('bb')
      rej('cc')
    }, 1000)
  })
}

## a1.js
// 前情提要：async/await 只是 Promise 的語法糖
// 只要精熟 Promise 則使用 async/await 就心無罣礙

// 範例 1 - 錯誤示範
// main 為同步執行，不會等待 forEach 內三件 async 工作完成即先結束
async function async_log(time) {
  // 模擬這支 fn 經過 300ms 後才回應，因此是非同步函式
  // 想像成是 fetch() 就行
  return new Promise((resolve, reject) => {
    setTimeout(_ => {

## permutation.js
let arr = [
  ['a1', 'a2'],
  ['b1', 'b2', 'b3']
]

let result = arr.reduce(
             // -----------
             // 最外層 reduce 會依序遍歷
             // ['a1', 'a2'] 與 ['b1', 'b2', 'b3']

## example.js
useHotkey(['Meta', 'c'], () => {
  console.log( `要跑 1`,  )
})
useHotkey(['ctrl', 'c'], () => {
  console.log( `要跑 2`,  )
})

## starling.js

/*
 RequireJS 2.1.4 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
 Available via the MIT or new BSD license.
 see: http://github.com/jrburke/requirejs for details
*/

/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/
	# BOOK INFO

	- 黑暗巨塔

	- <no_subtitle>

	- 大衛．恩里奇

	# OVERVIEW
	/*
	# goal

	- 在不修改 node-fetch 原始參數格式下新增兩功能

	1. 新增 timeout 設定且逾時自動重試

	2. 新增 retry 模式可指定重試次數

	- 所有 config{} 皆有預設值因此使用上與原始 fetch() 相同
	// sample code copied from the blog:
	// https://blog.axlight.com/posts/you-might-not-need-react-query-for-jotai/
	const idAtom = atom(1)
	const dataAtom = atom(
	// read
	async (get) => {
	const id = get(idAtom)
	const res = await fetch(`https://reqres.in/api/posts/${id}`)
	const data = await res.json()
	return data
	async function foo() {
	// throw new Error('bb')
	return new Promise((res, rej) => {
	setTimeout(_ => {
	// throw new Error('bb')
	rej('cc')
	}, 1000)
	})
	}
	// 前情提要：async/await 只是 Promise 的語法糖
	// 只要精熟 Promise 則使用 async/await 就心無罣礙

	// 範例 1 - 錯誤示範
	// main 為同步執行，不會等待 forEach 內三件 async 工作完成即先結束
	async function async_log(time) {
	// 模擬這支 fn 經過 300ms 後才回應，因此是非同步函式
	// 想像成是 fetch() 就行
	return new Promise((resolve, reject) => {
	setTimeout(_ => {
	let arr = [
	['a1', 'a2'],
	['b1', 'b2', 'b3']
	]

	let result = arr.reduce(
	// -----------
	// 最外層 reduce 會依序遍歷
	// ['a1', 'a2'] 與 ['b1', 'b2', 'b3']
	useHotkey(['Meta', 'c'], () => {
	console.log( `要跑 1`, )
	})
	useHotkey(['ctrl', 'c'], () => {
	console.log( `要跑 2`, )
	})

	/*
	RequireJS 2.1.4 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
	Available via the MIT or new BSD license.
	see: http://github.com/jrburke/requirejs for details
	*/

	/*! jQuery v1.9.1 \| (c) 2005, 2012 jQuery Foundation, Inc. \| jquery.org/license
	//@ sourceMappingURL=jquery.min.map
	*/