Howard's Note

Cljure FAQ

Sun, 30 Jan 2022 00:00:00 GMT

Recently I try to learn clojure.

Here are some problem noted that I face when I play in clojure & clojurescript

what is `.cljc` file

When Clojure or ClojureScript needs to load a namespace, they first look for the platform-specific file (.class then .clj on Clojure and .cljs on ClojureScript) and if not found, then they look for the .cljc file.

Clojure versions >= 1.7, I can name a file foo.cljc if I want it to be available for loading with require or use both from Clojure and Clojurescript.

ref here

custom macro linter error

ref here

define custom config :lint-as treat custom macro as built-in macro:

	  {:lint-as {rum.core/defcs clojure.core/def}
	   :linters {:unresolved-symbol {:exclude [(rum.core/defcs)]}}}

Also note from here:

There is four way to setup linter config:

home dir config in ~/.config/clj-kondo/config.edn (respects XDGCONFIGHOME)
project config: a config.edn file in the .clj-kondo directory
:config-paths in project config.edn: a list of directories that provide additional config
command line --config file or EDN arguments
namespace local config using :clj-kondo/config metadata in the namespace form

data inspect note

Thu, 16 Dec 2021 00:00:00 GMT

Just some useful toolkit note, including api, useful tip, etc.

request data

There are two most use library in python world, acording to Google search: request and http.client. request seems a easiest and quickest way to fetch web content and api.

but http.client seems to be more oo way. so I just try to use http.client to fetch data instead.

import http.client
import json
url = 'www.twse.com.tw'
route = '/v1/exchangeReport/MI_INDEX'

# params just the parameter u want to use in GET request
params = urllib.parse.urlencode({
    'date': date,
    'response': 'json' 
    '_': str(round(time.time() * 1000) - 500)
})

# Note that don't need to add protocal (http or https) in url.
# instend, just choose to use HTTPSConnection or HttpConnection to make a request.
# also note that port is needed to be selected.
client = http.client.HTTPSConnection(url, 443, timeout=10) 
client.request('GET', f'{self._route}?{params}')
with client.getresponse() as res: 
    # use json to loads the response and parse to dict.
    data = json.loads(res.read()) 
    return data

panda

import panda as pd

load json to data farme:

use Dataframe. in my case, I use json.loads + Dataframe + pd.concat to achieve goal.

def load_to_df(filename, df):
    try:
        with open(filename, 'r') as f:
            j = json.loads(f.read())
            # concat
            date = filename.split('.')[0]
            print(f'load date: {date}')
            temp = pd.DataFrame(columns=j['fields8'], data=j['data8'], index=[f'{date}({i+1})' for i, _ in enumerate(j['data8'])])
            df = pd.concat([df, temp])
    except Exception as e:
        print('[ERROR] error happen in file: ' + filename)
        print(f'[ERROR] msg: {e}' )
        print('')
    return df

pd.concat will create a new DataFframe, that is good, in my opinion.

note that use for comprehension to create index, which is a elegent way to create, and show purpose.

get data row from DataFrame by index.

Just find two api that may be useful: df.loc() and df.ioc(). This time I just use loc() to acheive my goal.

ref from: here

def get_overall_by_date(date, df):
    return df.loc[[date + f'({i+1})' for i in range(3)]]

Data visualization.

Choose to use matplotlib, which seems a easiest solution.

import matplotlib.pyplot as plt

jupyter notebook nbextensiions 404 issue.

Sun, 05 Dec 2021 00:00:00 GMT

問題

安裝jupyter note extentions，重新啟動終端機後，打開 jupyter notebook 不會出現 nb-extentions 頁簽。

web consle 出現以下 error 訊息：

Failed to load extension:
Array [ "nbextensions/nbextensions_configurator/tree_tab/main" ]
 Error: Script error for "nbextensions/nbextensions_configurator/tree_tab/main"

Root cause

會發生這個問題的原因是因為，jupyter notebook 的作用域／環境變數設定，跟 nb-extentions 的不一致而產生。

Reproduce

使用venv進入某一個python 虛擬環境內。
安裝jupyter notebook
安裝 nb-extentions。
關閉終端機，重新開啟。
直接進入 jupyter notebook。

Solution

for now:

每一次使用 jupyter notebook 都進入前一次安裝的venv內。

better:

notebook 的 kernel 和 notebook 本身的安裝是分開來的。

之後使用全域python重新安裝 notebook，

並且在venv內設定 ipykernel，將ipykernel 安裝到 user目錄底下。

ref: https://zhuanlan.zhihu.com/p/33257881?utm_source=pocket_mylist

Python Note

Fri, 03 Dec 2021 00:00:00 GMT

筆記 https://en.wikibooks.org/wiki/Python_Programming/Idioms

http.client

封裝過的http (https) 請求。

基本使用方式：

下例是請求台灣證交所的API

 url = 'openapi.twse.com.tw'
mi_index = '/v1/exchangeReport/MI_INDEX'
client = http.client.HTTPSConnection(f'{url}', 443, timeout=10)
# 呼叫request後才會實際請求。
client.request('GET', f'{mi_index}')
res = client.getresponse()
data = json.loads(res.read())

note: url不用加入協定（http, https)，由使用的物件決定協定（http.client.HTTPSConnection vs https.client.HTTPConnection)。

注意 request 的port，需要當作參數指定。預設http使用 80 port，https 使用443 port。

python idiom

記錄python的貫用寫法加深印象。

錯誤處理

盡量使用 try ... except 的方式處理錯誤。

python 的哲學以 EAFP (its Easier to Ask Forgiveness then Permission) 取代 LBYL (Look Before You Leap)。

將有可能會發生錯誤的程式碼片段放在 try ... except 區塊內。

屬性使用方式

直接使用屬性，不使用 getter / setter 封裝。

屬性是否為private，使用前綴底線(_prop)區分，依賴約定。

dictionary vs class

變值是動態時使用 dictiory，靜態時使用 class。

discard variable

使用底線代表要被捨棄的變數。如使用tuple接回傳值時、或是指示忽略函式參數。

也可以使用 *_, **_ 搭棄 positional / keyword 拾棄傳進函式的印數。

對應可變參數*args, **kwargs

使用 else

可以在 try, for, while, if 後使用 else。

import 原則

impmort 模組，盡量避免引入 name ( function, class etc)。

若直接引入名稱，將會產生新的名稱綁定。而這個命名綁定會跟模組底下的原命名不同（如果兩個名稱任一個被重新賦值）。

可使用 import <module> as <alias> 取個簡單的別名。

若是使用from <module> import <sub-module> 引入子模組，則不太會有問題。

運算

交換值

b, a = a, b

使用nullable 屬性

使用and：

a and a.x
a and a.f()

# regular expression 尤其常用
match and match.group(0)

子字串比對

使用 in關鍵字。

使用 next 搭配 for 表達示，可以取得集合內特定條件的第一個index或值（find first)。

try:
    x = next(n for n in l if n > 0)
except StopIteration:
    print('No positive numbers')
else:
    print('The first positive number is', x)

else 用法可以將關注點分離。

截斷

使用 del，不用使用重新賦值的方式。

del l[j:]
del l[:i]

# anti pattern
l = l[:j]
l = l[i:]

del 可以直接回收資源。

建構string

很常用的感覺

善用 join()

# ...
# l.append(x)
s = ''.join(l)

# 也可使用 generactor expressiotns
s = ''.join(f(x) for x in l)

使用 + 串接字串的話，每次都會產生新的字串（字串在python內是不可變變數）

可變參數 *args, **kwargs

*args 跟 positional variable相關。 **kargs 與 keyword variable 相關。

ref: https://blog.maxkit.com.tw/2018/12/python-args-kwargs.html

gatsby config api

Sat, 20 Nov 2021 00:00:00 GMT

gatsby config api

gatsby 包含了一個gatsby-config.js，可以提供以下設定：

siteMetaData
plugin
mapping
flags
pathPrefix
polyfill
Proxy
developmentMiddleware

此config檔僅支援commonJs。

siteMetaData

可以定義一些各頁面間共享的參數。gatsby會產生一個 graphQL的 field 叫做 siteMetaData，供各頁面查詢。

module.exports = {
  siteMetadata: {
    title: `Gatsby`,
    siteUrl: `https://www.gatsbyjs.com`,
    description: `Blazing fast modern site generator for React`,
  },
}

plugin

gatsby 不支援直接使用 npm安裝插件。如果要使用gatsby的插件，必須在gatsby-config.js底下定義要使用的插件。

plugin 是一個 Array。可以直接使用string指定要使用的插件名稱：

module.exports = {
  plugins: [`gatsby-plugin-name`],
}

若該插件支援option，也可以傳入包含options的object：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-name`,
      options: {
        optionA: true,
        optionB: `Another option`,
      },
    },
  ],
}

plugin 欄位也可以是混合的 array。可以混合不需要指定option的 plugin (型別為string)以及需要指定option的plugin（型別為object）：

module.exports = {
  plugins: [
    `gatsby-transform-plugin`,
    {
      resolve: `gatsby-plugin-name`,
      options: {
        optionA: true,
        optionB: `Another option`,
      },
    },
  ],
}

flag

設定flag可以指定開啟一些正在實驗中的功能。

pathPrefix

pathPrefix可以加入產生的網頁路由前綴。

Polyfill

gatsbyjs 使用 es6的 promise api。預設為未支援promise的瀏覽器提供了polyfill。如果要提供自已版本的 Promise polyfill，可以將此flag 設為 false。

module.exports = {
  polyfill: false,
}

mapping node type

官方建議使用 @Link grapthQL directives https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/#foreign-key-fields

mapping 屬性支援將不同來源的資料做 mapping。

在資料 mapping 前。要先確定是否有裝該資料來源的 transformer (i.e. transformer of yaml, json… )，並且設定gatsby-source-filesystem讓gatsby可以正確取得mapping 檔案。

以下範例，假設一個多作者協同的blog，有一個 author.yaml：

- name: Kyle Mathews
  bio: Founder @ GatsbyJS. Likes tech, reading/writing, founding things. Blogs at bricolage.io.
  twitter: "@kylemathews"

markdown 的 frontmatter：

---
title: A blog post
author: Kyle Mathews
---

設定 author 的 mapping 關係：

module.exports = {
  plugins: [...],
  mapping: {
    "MarkdownRemark.frontmatter.author": `AuthorYaml.name`,
  },
}

gatsby 產生的gruaphql query便提供了兩個資料來源的 mapping 供查詢：

query ($slug: String!) {
  markdownRemark(fields: { slug: { eq: $slug } }) {
    html
    fields {
      slug
    }
    frontmatter {
      title
      author {
        # This now links to the author object
        name
        bio
        twitter
      }
    }
  }
}

mapping 也可以用來mapping 一個包含外來鍵（ids）的array到其它的 collection of data。

例如：

// experement.js
[
  {
    "id": "companyA",
    "company": "Company A",
    "position": "Unicorn Developer",
    "from": "Dec 2016",
    "to": "Present",
    "items": [
      {
        "label": "Responsibility",
        "description": "Being an unicorn"
      },
      {
        "label": "Hands on",
        "tech": ["REACT", "NODE"]
      }
    ]
  }
]

// tech.js
[
  {
    "name": "REACT",
    "icon": "facebook",
    "color": "teal",
    "label": "React"
  },
  {
    "name": "NODE",
    "icon": "server",
    "color": "green",
    "label": "NodeJS"
  }
]

在gatsby-config.js 設定規則：

module.exports = {
  plugins: [...],
  mapping: {
    'ExperienceJson.items.tech': `TechJson.name`
  },
}

可以查詢 tech 與它關聯的項目：

query {
  allExperienceJson {
    edges {
      node {
        company
        position
        from
        to
        items {
          label
          description
          link
          tech {
            label
            color
            icon
          }
        }
      }
    }
  }
}

Proxy

告訴開發server將request導到指定的server。

developMiddleware

加速開發的設定。

jsxRuntime

將此屬性設定為 automatic，可以在開發時直接使用 jsx，而不需手動import react。

jsxImportSource

可以指定gatsby使用特定的jsx transformer。例如若使用 @emotion/react，可以如下設定：

module.exports = {
  jsxImportSource: "@emotion/react",
}

如此預設的 jsx runtime 就會變成 @emotion/react了。

Hello, gatsby

Sat, 13 Nov 2021 00:00:00 GMT

Static site generactor

根據wiki Web template system 條目，Static site generactor (SSG) 指的是可能有使用 tepmlate lanugage、可以用來產生網頁、不用重撰相同內容的工具。除了重覆的網頁內容外，可能也包含CSS，例如 FrontPage 和 Dreamweaver 這種網頁編輯器。

SSG 不是近幾年才產生的概念。例如 Jekyll，非常流行的SSG，早在2008年的時候就已經誕生了。

SSG是前端的其中一種解決方案，選用不同的技術當前端的解決方案時，應該選擇最適合問題本身的方案，沒有所謂的最佳解。

GatsbyJs 是個基於 js、react 的SSG框架。

JAMStack

JAMStack 指的是使用 javascript、API、Markup的技術線。所謂的Markup，在這裡指的是包含一些已經被事先定義好「顯示語義」的標記語言。例如Html就是在網頁中被廣範使用的 Markup stack。

JAMStack 會有一種特徴：程式的邏輯大多會在client端，而不緊緊依賴 backend。

這幾年講到JAMStack，M有時指的是 Markdown。

GatsbyJs 捏供 plugin，可以用 Markdown 來寫網頁內容。

GatsbyJS基本架構

GatsbyJS 是一個 SSG框架，本身使用React做為視圖層。在資料來源層，使用了 GraphQL 做了一層抽象。除了框架本身會自動從指定的檔案路徑內取得內容外，GraphQL 社群也提供了非常多的 plugin，用來取得、解析資料。例如gatsby-transformer-remark，可以用來解析 markdown。

GatsbyJS 主要的程式設定檔有三個：

gatsby-config.js
gatsby-node.js
gatsby-browser.js

另外 src/pages 資料夾底下的檔案，會被 File System Route API 自動解析，產生對應的網頁內容。

目前三個預設的js，似乎都還不支援 EMCAscript module，必須使用 common script 撰寫。

gatsby-config.js

gatsby-config.js 裡面包含了跟框架及網頁有關的設定檔。包含使用的 plugins、proxy、 siteMetaData等等。

其中 plugins的使用很重要，可以從豐富的 plugin librarys 中，找到很多有用的 plugin，加速網站的開發、或是增加網站的功能等。

siteMetaData 可以用來存放一些 meta資訊，例如作者、email等等資訊。

gatsby-browser.js

gatsby-browser.js 中包含一些在Browser中、框架定義的事件，例如 onClientEntry。另外也可以攜代一些網頁元件當作全域的元件。

gatsby-node.js

gatsby-cnode.js 相對復雜，它包含了產生頁面、產生gastby field 的 API、及在建置階段中的一些事件處理。之後再整理一下它的API。

懶了好久，剛剛看一下突然發現我寫錯好久…

rust RefCell、Cell筆記

Fri, 16 Oct 2020 00:00:00 GMT

此文章記錄學習中的個人理解

文章在這

所有權、出借、移出

rust 特別的地方就是有所有權的概念。透過所有權的規則檢查，可以很有效率的管控記憶體的使用；並且可以檢查是否有 dangling refernence的風險。

雖然在寫程式的時候非常麻煩，但是程式run起來以後，可以基本保證不會有 runtime error的情形發生。習慣以後開發會很有效率。

同時所有權的觀念也可以融入到打程式的思考當中。

參照? 指標？

在C++中，其實也有把 Pointer 跟 Reference 的概念分開來。

如果你跟我一樣，只熟悉 C，不熟悉 C++ 的話：

指標的概念就是「指向記憶體的某個位置」。因此，rust中參照也可以視為一個指標，但是它是靜態的（const），不能改變指標指向的位置。

但是，因為rust多了所有權的概念，而且參照的操作方式也跟c的指標不太一樣，而且必須尊守參照規則。

（例如：在c當中，要操作參照位置的變數一定要透過指標 derefrence（*）；rust的參照則不需要）

因此，在 rust 看到函式傳入參照時，必須以借出（borrow）來思考，不能使用c的指標思考。

C++ 也有參照的概念，跟rust就比較相似，不過C++並沒有借出的規則要尊守。

出借的規則

先不提lifetime，出借主要兩個規則：

在任何情況下，可以同時借出多個inmutable 參照，但是只能借出一個 mutable 參照。
在任何時間點下，參照都必須是合法的。

智慧指標

智慧指標是多了一些能力的指標。

在rust中，如果智慧指標有實作 Deref trait，就基本可以把它當成一般參照使用了。

它其實不是rust的特別概念，在C++ 也有這個概念。

Cell / RefCell

上面提到，參照的規則，同時只能有一個 mutable 參照。如果有多個參照需要修改，可以使用Cell。

Cell中的型態需要實作 Copy trait

Cell 跟 Cow 其實只差一點。Cell 是「取用時復製」，Cow是「寫入時復製」。

RefCell 則是可以使用 boroow (reference)的方式取得內部的值；它透過RefCell使用rust 的 lifetime機制實作動態檢查。

它可以動態檢查 borrow 的規則，將borrow的規則延遲到 runtime。

以下：

use std::cell::RefCell;

fn main() {
    let a = RefCell::new(5);
    let b = a.borrow_mut();
    let c = a.borrow_mut();
    
    println!("{}", c);
}

的確將borrow 放到運行時檢查。

Rc

Rc 是 reference counting （參照技術）的意思。它是一個記憶體管理的技術。主要概念是，當沒有參照時就釋放記憶體。

Rc::clone 是 clone Rc 這個 pointer，不是Rc 內的值。

文章提到的 linked list，使用RefCell 是為了動態檢查 borrow規則；而使用Rc可以讓多個變數可以同時參照同一個位置（這樣就可以實作雙向linked list了）。

playground

rxjs source trace

Sat, 30 May 2020 00:00:00 GMT

achieve

此篇內容做為個人學習記錄，不會再更改。

學習 haskell後，發現更重要的其實是函式編程的思考方式。

如果真的理解函式做為一級公民的思考邏輯， rxjs 的實現看起來就會非常自然、直覺。

當初寫這篇學習記錄時，並不懂fp的思考方式。

因此，下面的記錄比較像是逐行記錄動作、及 ts特性，並沒有真正解釋 rxjs 的實作目的。

2020/09/16

目的：看懂Rxjs的Observable實現方式

Rxjs的流程圖

Rxjs是一個實作了 觀察者模式、疊代器模式的library。

根據 ReactiveX 官網所述：

Observables fill the gap by being the ideal way to access asynchronous sequences of multiple items

#	single items	multiple items
synchronus	`T getData()`	`Iterable<T> getData()`
asynchronous	`Future<T> getData()`	`Observable<T> getData()`

ReactiveX 填補了疊代器模式無法支援非同步旨令的問題。

事實上，我在理解原始碼的時候有發現，雖然Rxjs的確有實現 觀察者模式，但是當你在看程式碼的時候，將它當作一個變型的疊代器模式，反而更容易理解。

那麼我們就先從一個流程圖及簡單的範例開始吧。

以下是我們使用 Rxjs的時候，最典型的流程。

我直接從 Anuglar 官網引用簡單的範例：

// Create simple observable that emits three values
const myObservable = of(1, 2, 3);

// Create observer object
const myObserver = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

// Execute with the observer object
myObservable.subscribe(myObserver);
// Logs:
// Observer got a next value: 1
// Observer got a next value: 2
// Observer got a next value: 3
// Observer got a complete notification

code 1 使用 of 運算子產生 Observable 並訂閱。

另外，如果你不想要使用 Operator 建立 Observable的話，你可以直接 new一個 Obsevrable 實例，並且將訂閱後會發出值使用 callback function 的方式傳入 Observable 中。

實務上是不會這麼使用的。在實務上，可以使用 of這類的 creation operator 產生一個最簡單的Observable。而其內部的實現方式，其實就是回傳一個會固定發出 of 參數的 Observable，

// This function runs when subscribe() is called
function sequenceSubscriber(observer) {
  // synchronously deliver 1, 2, and 3, then complete
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();

  // unsubscribe function doesn't need to do anything in this
  // because values are delivered synchronously
  return {unsubscribe() {}};
}

// Create a new Observable that will deliver the above sequence
const sequence = new Observable(sequenceSubscriber);

// execute the Observable and print the result of each notification
sequence.subscribe({
  next(num) { console.log(num); },
  complete() { console.log('Finished sequence'); }
});

// Logs:
// 1
// 2
// 3
// Finished sequence

code 2 建立一個 Observable 物件。

這樣我們已經知道最基本的使用方式了。接著我們看看 Rxjs 中最核心的兩個組件：Observable 與 Observer。

Observable

Observable 是 Rxjs 中最核心的物件。

我剛開始看Observable的實現方式時，旁邊放著 觀察者模式 的類別圖。

然後我看的很困惑。所以我不建議使用觀察者模式對應Rxjs實作。

截取重要的幾段程式碼：

export class Observable<T> implements Subscribable<T> {

  /** Internal implementation detail, do not use directly. */
  public _isScalar: boolean = false;

  /** @deprecated This is an internal implementation detail, do not use. */
  source: Observable<any> | undefined;

  /** @deprecated This is an internal implementation detail, do not use. */
  operator: Operator<any, T> | undefined;

  /**
   * @constructor
   * @param {Function} subscribe the function that is called when the Observable is
   * initially subscribed to. This function is given a Subscriber, to which new values
   * can be `next`ed, or an `error` method can be called to raise an error, or
   * `complete` can be called to notify of a successful completion.
   */
  constructor(subscribe?: (this: Observable<T>, subscriber: Subscriber<T>) => TeardownLogic) {
    if (subscribe) {
      this._subscribe = subscribe;
    }
  }

  // .... 中間略

  subscribe(observer?: PartialObserver<T>): Subscription;
  /** @deprecated Use an observer instead of a complete callback */
  subscribe(next: null | undefined, error: null | undefined, complete: () => void): Subscription;
  /** @deprecated Use an observer instead of an error callback */
  subscribe(next: null | undefined, error: (error: any) => void, complete?: () => void): Subscription;
  /** @deprecated Use an observer instead of a complete callback */
  subscribe(next: (value: T) => void, error: null | undefined, complete: () => void): Subscription;
  subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;

  subscribe(observerOrNext?: PartialObserver<T> | ((value: T) => void) | null,
            error?: ((error: any) => void) | null,
            complete?: (() => void) | null): Subscription {

    const { operator } = this;
    const sink = toSubscriber(observerOrNext, error, complete);

    if (operator) {
      sink.add(operator.call(sink, this.source));
    } else {
      sink.add(
        this.source || (config.useDeprecatedSynchronousErrorHandling && !sink.syncErrorThrowable) ?
        this._subscribe(sink) :
        this._trySubscribe(sink)
      );
    }

    if (config.useDeprecatedSynchronousErrorHandling) {
      if (sink.syncErrorThrowable) {
        sink.syncErrorThrowable = false;
        if (sink.syncErrorThrown) {
          throw sink.syncErrorValue;
        }
      }
    }

    return sink;
  }

  // ... （略）
}

code 3. Observable 程式碼。

不論 pipe 與 Operator 的話，整個 Observable的重點，其實就是 subscribe函式。

Ts 筆記

code 3 中，建構子使用了 function type 的寫法（第19行），定義了傳入的 function 的參數及 return 的型態。另外，function type的第一個參數可以放 this，它可以限制 function 的 this 型態。（因此，此函式不能使用 arrow function）

底線是一個常用的命名規則（21行，_subscribe屬性），代表變數或屬性是內部屬性。

subscribe 使用了 ts 函式多載的功能（27行 ~ 36行）。ts支援函式多載，唯一的限制是，參數的個數必須要相同。因此可以注意到，subscibe的所有參數都是 optional parameter。

跟 java 等語言不一樣。 ts 底層其實還是js。因此與其說它是函式多載，不如說它可以定義多個函式簽名。在 copmile階段，編譯器會選擇最適合的函式簽名來檢查。 refer to

@deprecated 是軟體中很常使用的標籤（38行），代表被棄用的function。不論是公開的 Api 或者是內部的 Api 都非常的好用。

看到 Subscribe 的第一一個參數，它可以是一個 PartialObserver<T> 或者是一個 function。

看一下 PartialObserver的定義：

export interface NextObserver<T> {
  closed?: boolean;
  next: (value: T) => void;
  error?: (err: any) => void;
  complete?: () => void;
}

export interface ErrorObserver<T> {
  closed?: boolean;
  next?: (value: T) => void;
  error: (err: any) => void;
  complete?: () => void;
}

export interface CompletionObserver<T> {
  closed?: boolean;
  next?: (value: T) => void;
  error?: (err: any) => void;
  complete: () => void;
}

export type PartialObserver<T> = NextObserver<T> | ErrorObserver<T> | CompletionObserver<T>;

code 4. Observer interface

其實，PartialObserver 就是 Observer介面的別名，只是三個function中，你至少要定義其中一個。

Observer 及 Subscriber

Observer 其實是 Rxjs定義的界面。

定義界面的好處之一，是可以規範程式的 input 的規格。

export interface Observer<T> {
  closed?: boolean;
  next: (value: T) => void;
  error: (err: any) => void;
  complete: () => void;
}

code 5、Observer

另外，Subscriber 是個物件，它實現了 Observer 、並且繼承了 Subscription。現在只要知道，Subscriber 多了取消訂閱的能力就好（unsubscribe() 方法）。

我們繼續看 code 3 。

code 3第19行~23行。它的建構子其實很單純，就是把傳入的Subscriber function 放入一個內部的 _subscribe屬性。這部份的使用案例可以對應 code 2 看。

接著看到 subscribe() 函式。

code 3，41行。首先會透過 toSubscriber() 這個 utils 將傳入的 Observer轉變成 Subscriber 。

前面提到，在 Rxjs的內部實現中，會把所有的 Observer界面，轉化為 Subscriber 物件，提供訂閱及取消訂閱的能力。

utils 放全域的 function，也是軟體中很常見的專案架構（code 3，41行）。

code 3，43~51行。接著，如果你是透過 creation operator 產生的 observable，subscribe()函式會呼叫這個 Operator（對應 code 1。

如果不是的話，會試著去執行 _subscribe （對應 code2）。

code 3，53~60行。最下面的 if、else，控制 throw exception 。因為新版建議使用 Observer界面，取代將 subscribe 包在 try...catch中，因此這裡會檢查lib的 config檔的flag有沒有被打開；

如果有的話，再檢查是否有遇到例外需要throw回主函式的情型。

結論

從 Observable 的 subscribe() 中，可以了解到，Obsrevable的 subscribe() 要發出的值有兩個來源：要馬是你 new 一個 Observable，並且把 subscribe、及 unsubscribe 的邏輯傳入；要馬是使用 Operator 來發出值。

使用情境來看，後者應該是更常見的情境。

另外，內部會將Observer轉成 Subscriber，是非常重要的一步。有了它，它有辦法實作 pipe。

觀察者模式，通常是異步的，也不會有 Observable 、Operator等物件。因此我開頭才說，最好不要用 觀察者模式 對應了解Rxjs的實作，否則只會越看越糊塗。

以目前看到的行為來說，Observable 更接近 疊代器模式。

RXJS運算子-mergeMap、switchMap

Thu, 28 May 2020 00:00:00 GMT

Observable 與 pip

在 Rxjs中，Observable 是一個可供訂閱的物件。當一個 Observable 被 subscribe （訂閱）後，直到這個 Observable 發出 complete 之前，訂閱這個 Observable的 Observer 都會收到 Observable 發出的值。

因為 Observable 會在特定的條件下，不斷的發出值，因此就會形成一個資料流。可以把資料流想像成水流，而發出值的 Observable 就是水的源頭。

而當資料流產生後，我們可能還會對資料的值一些處理，最將處理後的值發給訂閱這個 Observable 的 Observer。這時就可以使用 pipe。可以把 pipel 想像成一個水管。

打個比方，源 Observable 就像水龍頭，而 pipe 像蓮蓬頭。當水龍頭打開後，我們（Observer）最後看到的水，會是蓮蓬頭導出的水。

pipe 中的 operator （運算子），input 和 output都會是 Observable

所有的運算子，其實都是一個Observable。以 map為例，當project return 值後，map 會發出project return 的值；pipe中的函式會像接水管一樣，下一個Operator訂閱上一個Operator(Observable)。

訂閱的動作，可以透過 Subscriber 完成。它是一個內部使用的類別，實現了 Observer界面，並且繼承 Subscription。內部的 Observer 界面，會被轉化為 Subscriber。 Subscriber 實現了「管理」及「取消」多個Observable 訂閱的能力。因此，在 pipe中，當其中的某個運算子要結束掉整個 pipe的時候，可以通過 Subscriber 的 unsubscribe() 方法，取消整個管線的訂閱。

引用官方說明：

A Pipeable Operator is a function that takes an Observable as its input and returns another Observable. It is a pure operation: the previous Observable stays unmodified.

map operator

函式： map(project: Function, thisArg: any): Observable

map operator是很好懂的一個運算子。它的 project function 會接受上一個運算子發出的值，並且經過處理後，回傳處理後的值。

範例：

// RxJS v6+
import { from } from 'rxjs';
import { map } from 'rxjs/operators';

// 发出 (1,2,3,4,5)
const source = from([1, 2, 3, 4, 5]);
// 每个数字加10
const example = source.pipe(map(val => val + 10));
// 输出: 11,12,13,14,15
const subscribe = example.subscribe(val => console.log(val));

mergeMap and switchMap

mergeMap: mergeMap(project: function: Observable, resultSelector: function: any, concurrent: number): Observable

switchMap: switchMap(project: function: Observable, resultSelector: function(outerValue, innerValue, outerIndex, innerIndex): any): Observable

很多時候，我們會需要回傳一個 Observable，並且自已處理 Observable 的發出值。最常見的範例就是在接到值後，面發起一個 http請求。此時，return的值是一個 Observable。

mergeMap 跟 switchMap 事實上也沒有什麼魔法。它就是 project function 直接回傳一個 Observable，而下一個運算子取得的值，是由這個回傳的Observable發出的。

mergeMap、switchMap 跟 map 的差別，在於 project function。 map回傳的是Observable內的值；mergeMap/ switchMap回傳的是一個函式。

怎麼知道發出的值是從哪一個 Observable發出的？Observable何時 complete

這就是 mregeMap 和 switchMap 的不同處了。因為它們的project function 回傳值是 Observable，我們不會知道它會什麼時候發出值、什麼時候結束。

mergeMap 跟 switchMap 都有內部的 Observable，下一個運算子接收的值，是由這個 Observable 發出的值。而兩者的差別只在，使用switchMap的時候，當新的observable進來了，上一個 Observable會直接 complete。而 mergeMap不會complete上一個 Observable。

當Observable被發出後，該Observable之後再發出的任何訊息，都不會再被訂閱者接收（在pipe中就是下一個運算子）。

switchMap一次只會有一個訂閱中的observable。而mergeMap會一次管理多個Observable訂閱。

因此，使用switchMap可以防止潛在可能memory leak的問題。大多數的時候，使用switchMap是比較安全的。然而，有些情況下，可能還是適合使用 mergeMap。這就要看使用情境跟經驗了。

例子

這是從rxjs官網看到，覺得比較有趣的例子。

StackBlitz

// RxJS v6+
import { interval, fromEvent, merge, empty } from 'rxjs';
import { switchMap, scan, takeWhile, startWith, mapTo } from 'rxjs/operators';

const countdownSeconds = 10;
const setHTML = id => val => (document.getElementById(id).innerHTML = val);
const pauseButton = document.getElementById('pause');
const resumeButton = document.getElementById('resume');
const interval$ = interval(1000).pipe(mapTo(-1));

const pause$ = fromEvent(pauseButton, 'click').pipe(mapTo(false));
const resume$ = fromEvent(resumeButton, 'click').pipe(mapTo(true));

const timer$ = merge(pause$, resume$)
  .pipe(
    startWith(true),
    switchMap(val => (val ? interval$ : empty())),
    tap(val => console.log(val)),
    scan((acc, curr) => (curr ? curr + acc : acc), countdownSeconds),
    takeWhile(v => v >= 0)
  )
  .subscribe(setHTML('remaining'));

首先，原 Observable是 pause和 resume兩個 event 的 merge。因此，timer$ 要馬會接收 pause button 的 click事件，回傳 true 要馬會接收 resume button 的 click事件，回傳 false。

接著，switchMap 會接收 merge 發出的 true 或 false 值，並判斷要回傳 interval$ observable 或是 empty。

而 interval$這個 observable會每隔一秒發出 -1 。

這裡因為使用 switchMap，所以當收到新的 click事件，前一個回傳的 observable會被結束掉，因此不會有潛在的 memory leak風險。

接下來，scan會將收到的值累加，並發出值給下一個運算子。

最後，takeWhile 會在 v > 0 條件成立時，發出接收到的值。

這樣整個 pipe做到的效果，就是一個監聽按鈕有沒有被按，並且做對應動作的倒計時器了。

在switchMap 後面加上一個 tap/do 運算子，log一下接收的值，對switchMap會更了解。當你按下 pause時，switchMap會對內部的Obesrvable送出complete，並且發出一個新的Observable，在這裡是 empty。因此，前一個interval$ 的 Obsevable因為已經complete，不會再發出值了，達成停止counting 的效果。

參考

https://medium.com/allen%E7%9A%84%E6%8A%80%E8%A1%93%E7%AD%86%E8%A8%98/rxjs-mergeMap-%E7%AD%86%E8%A8%98-b971778cbff4

https://rxjs-cn.github.io/learn-rxjs-operators/operators/transformation/switchMap.html

https://rxjs-cn.github.io/learn-rxjs-operators/operators/transformation/mergeMap.html

初探 Golang

Tue, 26 May 2020 00:00:00 GMT

根據 wiki，

Go是Google開發的一種靜態強型別、編譯型、並發型，並具有垃圾回收功能的程式語言。

現在在雲服務中，很多人在使用golang來實作服務。因此，想試試看寫 golang是什麼感覺，

因此，隨便上網找了一個 starter turtoril 來 step by step 照著做，並且記錄一下。

以下的內容參考、翻譯自 https://dev.to/moficodes/build-your-first-rest-api-with-go-2gcj

Go 中的 Rest Api

寫restful api，為什麼要選擇 go ?

go 是 compile 語言，所以編譯後會得到一個很小的執行檔。
快速（比c慢一點，但比大多數的web語言快
非常簡單易懂。
它非常適合應用在微服務的使用場景

net/http

net/http 為go 的 standard library。它是撰寫restful api 非常好的起始點。

幾乎所有其它的library都可以與它交互操作。所以理解它是很重要的。

現在不必了解它所有的細節，只要知道一些我們該知道的事，就可以開始coding了！

The Handler Interface

下面是 Handler 的介面。所有的 net/http 程式都應該要實現此介面。

type Handler interface {
    ServeHTTP(ResponseWriter, *Request)
}

這個介面只有唯一的一個方法。

一個結構，只要有一個 ServeHTTP 方法，接受 ResponseWriter及 *request，就可以被當作一個handler介面使用。

source code

package main

import (
    "log"
    "net/http"
)

type server struct {}

func (s *server) ServeHTTP(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    w.WriteHeader(http.StatusOK)
    // 這個用法應該是指定型態↓
    w.Write([]byte(`{"message": "hello, world"}`))
}

func main() {
    s := &server{}
    http.Handle("/", s)
    log.Fatal(http.ListenAndServe(":8888", nil))
}

逐行解析

所有的可執行go程式，都必須包含一個main package。

當錯誤發生時，我們可以使用log來查看發生了什麼事情。

因為我們要寫 restful api，所以我們必須載入 net/http這個套件。

接下來，我們必須要開始設計我們的伺服器。現在伺服器中沒有任何東西，我們建立一個方法ServeHTTP，它會滿足我們的 Handler 介面。

在go當中，我們不須要明確的指明我們實現了哪個介面。編譯器可以自動偵測我們實現的介面。

在ServeHTTP中，我們設定 httpStatus 200，表示請求成功。並且設定我們回傳的資料型>態為 application/json，好讓 client端知道我們的回傳型態是json檔。

最後，我們將 {"message": "hello world"}做為回傳值。

延伸閱讀

https://www.ithome.com.tw/voice/107839

Howard's Note

最近近況

自大

負面情緒是真實存在且必須要認真學習處理的

克服

Cljure FAQ

what is .cljc file

custom macro linter error

data inspect note

request data

panda

Data visualization.

jupyter notebook nbextensiions 404 issue.

問題

Root cause

Reproduce

Solution

for now:

better:

Python Note

http.client

python idiom

錯誤處理

屬性使用方式

dictionary vs class

discard variable

使用 else

import 原則

運算

交換值

使用nullable 屬性

子字串比對

next

截斷

建構string

可變參數 *args, **kwargs

gatsby config api

gatsby config api

siteMetaData

plugin

flag

pathPrefix

Polyfill

mapping node type

Proxy

developMiddleware

Hello, gatsby

Static site generactor

JAMStack

GatsbyJS基本架構

gatsby-config.js

gatsby-browser.js

gatsby-node.js

rust RefCell、Cell筆記

所有權、出借、移出

參照? 指標？

智慧指標

Cell / RefCell

Rc

rxjs source trace

achieve

Rxjs的流程圖

Observable

Observer 及 Subscriber

結論

RXJS運算子-mergeMap、switchMap

Observable 與 pip

pipe 中的 operator （運算子），input 和 output都會是 Observable

map operator

mergeMap and switchMap

怎麼知道發出的值是從哪一個 Observable發出的？Observable何時 complete

例子

參考

初探 Golang

Go 中的 Rest Api

net/http

The Handler Interface

source code

逐行解析

延伸閱讀

what is `.cljc` file