# An articles a day for 30 days

## 希望是最淺顯易懂的 RxJS 教學
https://blog.huli.tw/2017/12/08/introduction-to-rxjs-observable/#more

看到一半就看不懂了...只好從RxJS官網開始

### RxJS

What makes RxJS powerful is its ability to produce values using pure functions. That means your code is less prone to errors.

Normally you would create an impure function, where other pieces of your code can mess up your state.

#### Pure function vs Impure
Pure:
* predictable
* no side-effects
Can't do the following:
Ex. Modifying a global variable, Modifying an argument, Making HTTP requests, DOM manipulation, Reading/writing files.

// PURE FUNCTION 👼
const pureAdd = (num1, num2) => {
  return num1 + num2;
};

//always returns same result given same inputs
pureAdd(5, 5);
//10
pureAdd(5, 5);
//10

//IMPURE FUNCTION 😈
let plsMutateMe = 0;
const impureAdd = (num) => {
  return (plsMutateMe += num);
};

//returns different result given same inputs
impureAdd(5);
//5
impureAdd(5);
//10

RxJS有三個特點：
1. Purity
ability to produce values using pure functions

//Normal JS => Impure
let count = 0;
document.addEventListener('click', () => console.log(`Clicked ${++count} times`));

//RxJS
import { fromEvent } from 'rxjs';
import { scan } from 'rxjs/operators';

fromEvent(document, 'click')
  .pipe(
      scan(count => count + 1, 0))
      .subscribe(count => console.log(`Clicked ${count} times`)
  );

2. Flow
has a whole range of operators that helps you control how the events flow

//Normal
let count = 0;
let rate = 1000;
let lastClick = Date.now() - rate;
document.addEventListener('click', () => {
  if (Date.now() - lastClick >= rate) {
    console.log(`Clicked ${++count} times`);
    lastClick = Date.now();
  }
});

//RxJS
import { fromEvent } from 'rxjs';
import { throttleTime, scan } from 'rxjs/operators';

fromEvent(document, 'click')
  .pipe(
    throttleTime(1000),
    scan(count => count + 1, 0)
  )
  .subscribe(count => console.log(`Clicked ${count} times`));

3. Values
transform the values passed through your observables

//Normal
let count = 0;
const rate = 1000;
let lastClick = Date.now() - rate;
document.addEventListener('click', event => {
  if (Date.now() - lastClick >= rate) {
    count += event.clientX;
    console.log(count);
    lastClick = Date.now();
  }
});

//RxJS
import { fromEvent } from 'rxjs';
import { throttleTime, map, scan } from 'rxjs/operators';

fromEvent(document, 'click')
  .pipe(
    throttleTime(1000),
    map(event => event.clientX),
    scan((count, clientX) => count + clientX, 0)
  )
  .subscribe(count => console.log(count));

### React + Redux 的非同步解決方案：redux-observable
React + Redux 這一套非常常見的組合，一直都有一個問題存在，那就是沒有規範非同步行為（例如說 API）到底應該怎麼處理。而開源社群也有許多不同的解決方案，例如說 redux-thunk、redux-promise、redux-saga 等等.

因此，Netflix 就開源了這套redux-observable，用 RxJS 來處理非同步行為。

在 redux 的應用裡面，所有的 action 都會通過 middleware，你可以在這邊對 action 做任何處理。或者我們也可以把 action 看做是一個 Observable，例如說：

Rx.Observable.from(actionStreams)
  .filter(action => action.type === 'GET_USER_INFO')
  .switchMap(
    action => Rx.Observable.from(API.getUserInfo(action.payload.userId))
  )
  .subscribe(userInfo => {
    dispatch({
      type: 'SET_USER_INFO',
      payload: userInfo
    })
  })

redux-observable 是一個 middleware，你可以在裡面加上很多epic，每一個epic就是一個 Observable，你可以監聽某一個指定的 action，做一些處理，再轉成另外一個 action。

### More to read
https://ithelp.ithome.com.tw/users/20103367/ironman/1199

---

# To finish

## 你所不知道的各種前端 Debug 技巧
https://ithelp.ithome.com.tw/m/articles/10238903

## 今晚，我想來點 Web 前端效能優化大補帖！
https://ithelp.ithome.com.tw/m/users/20113277/ironman/3877?fbclid=IwAR3lFxDWNAcd-BaltaiOkx2qM7-SElXgEeXUDdUS5G2ngB_JQ0Y30KgdKFg

前端的效能優化
* Loading Time
ex. Code Splitting
* 執行時期 (Runtime)
ex. Virtualized List

### 補充
CSS 架構的動畫通常是由瀏覽器「主執行緒」的另一獨立執行緒處理；而樣式、版面配置、繪製與 JavaScript 都是在主執行緒上處理。
https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance?hl=zh-tw#css-vs-javascript-performance

## HTML Character Sets

> 今天在看公司程式碼時，看到`-`用`&mdash` 表示，好奇為什麼不直接用`-`就好。

---
# To Read

## 密碼要怎麼儲存才安全？該加多少鹽？-科普角度
https://blog.darkthread.net/blog/store-pwd-safely/?fbclid=IwAR2tOo5W5l-8ftpX6A45cein88HpPTKzSN5qDFXipJJMWXG0pzC5C2uncF8