NgRx

因為 NgRx 是用 Redux 的概念,所以先看 Redux

看完大致可以理解,就是 design pattern 裡講的 state pattern。大部份 Redux 例子都是搭配 React,看的還是霧煞煞,所以找 NgRx 搭配 Angular 的例子來看。

我覺得這三篇的例子蠻清楚的,很容易可以了解現有的 angular 碰到 ngrx 時,要怎麼結合。

原本 angular 的一個頁面是 component html 跟 component code ,現在加上 ngrx 以後,會使用 store 儲存狀態,寫 reducer 來處理狀態。當有事件觸發時,就使用 store.dispatch 去發送 action,reducer 在收到以後,會依據 action 來處理狀態,然後回傳狀態。這時候頁面會因為 binding ,而反映出新的狀態結果。

這三篇雖然清楚,但已經舊了,我在試驗時,就碰到兩個問題:

  1. 找不到 StoreModule.provideStore() 這個方法,這個已經改為 StoreModule.forRoot()
  2. Observable 找不到,要解決這個問題,除了得裝 rxjs 之外,還要裝 rxjs-compat 讓 rxjs 向前相容。

文章有提到 Redux DevTools 這個工具,可以從 Firefox addons/Chrome store NgRx 安裝,安裝以後,專案程式那邊也需要調整。調整的部份可以參考 @ngrx/store-devtools ,安裝好,修改 app.module.ts 之後,就可以使用了。使用的方式是先開啟專案的網址,然後再開 developer tools,這時會看到有個 Redux 分頁,試著觸發一些事件看看,這邊就會出現發送的 action 以及改變前後的狀態了。

CSRF is dead?

前幾天在 Hacker news 上看到 Scott Helme 寫的這篇 CSRF is (really) dead ,一直沒看。這兩天開始看,一開始 Scott Helme 先提,你應該先看這篇 Cross-Site Request Forgery is dead! ,再回頭來看。


我先看了第一段,心裡納悶這樣怎麼會有什麼危險呢?後來找了另外兩篇中文來看 (加快理解):

我蠻推第一篇 Huli 寫的文章,寫的很清楚。簡單的說,就是利用 cookie ,當別的網頁裡有嵌入對其他網頁的存取時,會因為 cookie 的關係而有存取權,如果網站沒有做適當的檢查,那麼使用者的資料就有可能遭到竊取或被錯誤的存取。這也是為什麼後來幾乎每套 web framework 都會有 CSRF token 的處理。

回頭來講,Scott Helme 會說 CSRF 死的原因很簡單,就是有了 SameSite cookie,在 2019 年6月以後幾乎各家都支援 SameSite cookie 了 – Can I use samesite cookie? 所以現在只要在 Set-Cookie 時,後面多加 SameSite=Strict 或 SameSite=Lax 就可以避免 CSRF 的風險了。

等到真正普及可能還要一到兩年的時間吧。

apk add 的 –virtual

Reduce Docker image sizes using Alpine 這篇學到的,add 時加上 –virtual,是暫時性的為這次加的 package 納入群組。之後若不需要這些 package,就可以在 del 時,指定這個名稱,就可以移除前次加入的 packages。

apk add --no-cache --virtual .build-deps gcc freetype-dev musl-dev
apk del .build-deps

電影流水帳(2019/07/01~2019/08/31)

sharks

The Meg

忘了是在 HBO  看到還是在東森洋片台看到,我是覺得這故事就很單純的把巨齒鯊描述成殘酷、噬血的生物,然後人類為了自衛就把它給幹掉這樣,未免也太不符合目前的保護動物潮流了吧?!

我沒全部看完,大致只看了後半段。大略是從他們去探勘,然後發現了巨齒鯊,後來好不容易逃回去鑽探平台開始。回去鑽探平台以後,大夥以為沒事了,主事者也聲稱他已經打了電話給軍隊,要他們派兵去消滅鯊魚。可是,主事者暗地裡帶了一伙人去丟炸彈,想消滅鯊魚。豈料,畫虎不成反類犬,他們失敗了,被鯊魚殺死。更糟的是,鯊魚還往人多的沙灘去了。鑽探平台的一行人隔天才發現主事者不見了,也沒聯絡軍隊,事情一整個不對勁。一伙人經過商量以後,決定自己來阻止鯊魚。他們趕緊進行準備,並且開船前往沙灘,要來阻止鯊魚。可惜來不及了,鯊魚已經開始攻擊人類。他們趕到的時候,就趕緊進行預定的計劃,進行誘殺。經過一番奮戰,終於消滅了鯊魚,事情算是圓滿落幕。

Crazy Rich Asians

故事意外的蠻勵志的,本來以為會是諷刺或是貶低亞洲人的,但並沒有。雖然故事有點八股,不過,大家都喜歡快樂結局,我也覺得故事收的不錯。裡面的演員都一時之選,演的都很好。

Nick Young 在美國認識了 Rachel Chu ,熱戀了好些日子,Nick Young 家親戚舉辦婚禮,所以找了 Nick Young 回去。Nick Young 就想女友 Rachel 前些日子嚷嚷著說要去新加坡找閨密,就邀請她一同前往,也順便帶她回去看看家人。Rachel Chu 從小在美國長大,是媽媽撫養長大的,只是媽媽從來沒跟他提過父親的事情。長大以後,在大學裡教授經濟學。Rachel 一直以為 Nick 只是個普通的上班族,到了要上飛機去新加坡那天,她才知道 Nick 不簡單,Nick 的家裡也不簡單。Rachel 雖然心裡犯嘀咕,嘴裏怪 Nick 怎麼都不說,可是並不怎麼在乎這事情。到了新加坡,兩人跟新郎新娘碰面,一同去吃飯、逛逛走走,Rachel 也去找了閨密。只是真正到了 Nick 家以後,才知道 Nick 家裡真的是超有錢。經過跟 Nick 家裡幾天的相處以後,Rachel 確認了自己並不受到歡迎,是的,Nick 的媽媽認為他們門不當戶不對。在一次對話裡,Nick 的媽媽說明了自己當初也是門不當戶不對地嫁進來,也非常努力的去學習跟適應,然後才慢慢爭取到家族的認同,可是,她並不認為 Rachel 可以,而且非常直白的告訴 Rachel,Rachel 大受打擊。

可是 Rachel 並不是一個柔弱的女子,她回頭找了好友,請好友幫忙打理全身裝扮,打算在 Nick 親戚的婚宴裡好好的證明自己。在婚宴裡,Rachel 展現出自己,證明自己跟 Nick 是郎才女貌的一對。Nick 的媽媽看到 Rachel 並沒有知難而退,就拿出之前請私家偵探調查 Rachel 家底的報告,原來媽媽隻身到美國,獨自撫養 Rachel 長大是有著不太光彩的原因的。這份報告等同於再次直白的告訴 Rachel ,你就是不配。Rachel 聽到自己母親是這樣的人,一個晴天霹靂,整個人恍恍惚惚的走出晚宴,回到好友那兒去,整個人失魂落魄了好幾天。

好友跟 Nick 輾轉找了 Rachel 的媽媽來到新加坡,Rachel 從母親口中得知了之前隻身來到美國的經過,這才明白前因後果。最後,她聯絡上 Nick 的母親,藉著放水一個牌局,明白的告訴 Nick 媽媽,今天老娘不是個不識大體的人,也不是我死纏爛打,今天是我犧牲來成全你,你之後不要忘了。說完,就跟母親走了。Nick 的媽媽回去以後,左思右想,她決定告訴 Nick ,讓他去追回 Rachel,然後就一個幸福的結局啦。

Holmes & Watson

電影不怎麼好笑,很多梗都時事梗、18禁梗,不適合小朋友看。故事大致是兩人搞笑的查案經過,最後歪打正著的找到凶手。

Contratiempo

8/11 周日晚上看了「佈局」,故事講的很棒,劇情區折離奇,後段算是反轉。到後面時,隱隱約約猜到那個律師就是死者的媽媽。

一開始是律師來找 Adrian ,Adrian 是個新創公司的年輕 CEO,看來像是陷入了困局。在簡短的相互介紹後,律師表示,你沒有告訴我詳細的經過,我沒辦法幫你,於是他開始娓娓道出事情的經過。Adrian 跟情人 Laura 一同出遊,為了閃避麋鹿,意外撞上了對向來的車子,兩人下車察看,發現對方已經死了。兩人相當緊張,經過一陣慌亂以後,Laura 說,乾脆我們佈置一下,讓人以為他是為了閃躲鹿而發生意外的吧,於是兩人開始忙了起來。事情總是不如人意,這時候來了輛車,Laura 機警的將死者推倒,偽裝成是車禍。車子駕駛善意的停下來詢問是否需要幫忙,Laura 聲稱已經找人幫忙就推託過去了。Laura 要 Adrian 開著死者的車帶死者去滅跡,自己則留在原地,設法將車開走。Adrian 開著車,開了很久,直到天黑。到了某個湖邊之後,將車子連死者一同推到湖裡去。Laura 在車子邊沒多久,很幸運的遇到了一個開著車的老人。這老人說自己是修車廠師傅,很會修這種車,就拖著車子回到老人家裡。老人幫 Laura 修車,Laura 就在老人家叨擾了好一會兒,閒聊時她突然看到照片,心裡嚇了一大跳,原來這死者就是這家人的兒子啊,但她外表假裝若無其事,趕緊開著修好的車子走了,然後就去接了 Adrian。在遇到 Adrian 時,她講了這件事情,串好供之後就回去了。後來,經過了若干日子,他們接到勒索信,說已經知道他們之前做的事情,除非給錢,要不然就揭露真相。他們跟對方約在旅館碰面,豈料在房間時,Adrian 被打昏之後,Laura 已經死在當場了,這也是 Adrian 為什麼會被控訴的原因。

律師反覆的針對疑點提出問題,Adrian 也開始針對前面所說的經過做出調整,最後 Adrian 終於透露出真相。原來一開始說的一切都是 Adrian 所編造的,棄屍是他提的,Laura 也是他殺的。Adrian 在這時接聽了一通電話,律師則把握這個機會離開了。咦?律師為什麼離開?原來律師並不是真的律師,他是 Virginia,是車禍死者的母親,他跟先生費盡心思,終於得知了所有真相,並且將 Adrian 的惡行揭露於世。

AWS S3/Glacier select

前幾天看 S3/Glacier FAQ 時,看到有 SELECT 這個功能,是去年推出的。S3/Glacier select  這功能是這樣子,你可以把 CSV/JSON/Apache Parquet 這幾種格式的檔案放到 S3/Glacier 上,然後就可以使用類似 SQL 的敘述來查詢檔案內容。

所以我們可以把不常使用的資料從資料庫移轉到 S3/Glacier 上,需要時,再使用 S3 SELECT 來查詢。這樣資料庫不需要一直擴充容量,放到 S3/Glacier 可以降低資料庫儲存的成本。

使用範例:

不過,網路上能找到的範例多半都是使用 CSV,那使用 JSON 又是如何呢?我試了以後,發現這個 JSON 格式不是我在 Python 用 json.dump() 傾印出來就搞定的。資料是陣列時,要針對每個元素去 dump,不可以是 [{}, {},…] 這樣,必須是 {} {} {} 這樣子,AWS API 才不會報錯 (參考:stackoverflow – amazon s3 – s3-select querying data on field name)。

import json

with open('output.json', 'wt') as fout:
  for obj in objs:
    json.dump(obj, fout, indent=2, ensure_ascii=True)
# 輸出結果
"""
{
  "id": 13930241}{
  "id": 13930240}
"""

vim – 查按鍵定義

Embed from Getty Images

雖說常用 vim,但是我幾乎是沒什麼在定義按鍵,都是沿用 plugin 的定義,所以用了一堆 plugin 之後,難免會遇到衝突的情況。

那麼要怎麼查按鍵的定義呢?除了可以用 grep/ag 來找 vimrc/plugin 裡的定義之外,也可以在執行 vim 以後,用 :verbose map 來查

" 我的 leader key 是 \
" 以下就是查 \gg 會執行的指令
:verbose map <leader>gg

步驟:

  1. 先按冒號 ‘:’ ,游標會移到下方,進入 last line mode
  2. 在下方輸入 verbose map <leader>gg
  3. 輸入完按 Enter,就會看到 vim 印出按鍵的定義與上次定義的位置
  4. 再按一次 Enter,就會關閉回到 Normal mode

印出的結果 (會因為你的按鍵定義而異)

n  \gg         * :EXGSearchCWordW
        上次設定: ~/exvim/vimfiles/bundle/ex-utility/autoload/ex/keymap.vim line 37

Using curl to upload file to Django without csrf_exempt

簡單的說就是利用 cookie 來取得必要的 CSRF TOKEN 資訊。

#!/bin/sh

ENDPOINT=http://localhost:8000/uploads/simple/
COOKIE_JAR=cookies.txt
# 是否要讓 curl 顯示詳細的資訊 (含 header 等)
# VERBOSE=-v
VERBOSE=

# Get
# 用 -c 存到 cookies.txt
curl \
    $VERBOSE \
    -c $COOKIE_JAR \
    $ENDPOINT

# Get CSRF token from cookies.txt
# cat $COOKIE_JAR
CSRFTOKEN=$(awk '/csrftoken/{print $7;}' $COOKIE_JAR)
echo "CSRFTOKEN=$CSRFTOKEN"

# POST 時,在標頭 X-CSRFToken 帶入剛剛找到的 CSRF token
curl \
    $VERBOSE \
    -X POST \
    -b $COOKIE_JAR \
    -H "X-CSRFToken: $CSRFTOKEN" \
    -F myfile=@image003.png \
    $ENDPOINT

算IOPS

上個月公司 AWS 帳單來時,看到 EBS 使用率提高,所以費用增加不少

剛剛去算了一下目前的 IOPS ,然後套到 aws 計算機去算。

先用 AWS CloudWatch 去指定要看的 EBS volume 、指標(VolumeReadOps/VolumeWriteOps)以及日期區間,把統計方式改為總和,然後用最高點的數值套這公式: (VolumeReadOps + VolumeWriteOps) / 區間的秒數,算出目前用的 IOPS 是 106 左右。

計算方式是參考這兩個連結:

然後到 AWS 計算機網頁,目前 EBS volume type 是 magnetic(standard),storage  250 G,IOPS 填入 106,算出金額約 39.79,接著將 Volume type 改為 gp2,金額變成 26.40。

所以選擇適當的 EBS volume type 是有助於省錢的。

電影流水帳(2019/06/22~2019/06/30)

Embed from Getty Images

Toy Story 4

看完第一個感想是,還好還好。之前玩具總動員3已經算是不錯的收尾了,真的是還好,4沒有變差。我認為這次講的主題是走出新的風景,往往走到你認為是山窮水盡的時候,其實是你沒看到外面的世界,在看過外面的世界以後,更需要鼓起勇氣做出一點改變,這一點點的改變就能踏出一條新的路。

延續3的劇情,Woody 等人來到了新家,但 Woody 卻被冷落了。即便如此,Woody 看到 Bonnie 不樂意去上課,決定還是偷偷進到書包,期望 Bonnie 在學校看到熟悉的玩具能有所慰藉。Bonnie 在學校並不是很愉快,但在使用塑膠叉子做了 Forky 以後,心裡有了慰藉,變得愉快許多。後來 Bonnie 帶著 Forky 回來,Woody 跟大家說明 Bonnie 在學校的情況與 Forky 的由來,他決心保護 Forky ,讓 Forky 能繼續陪伴 Bonnie。不過 Forky 本人卻認為自己是個垃圾,一直想往垃圾桶跑。

沒多久,Bonnie 家全家出遊,Bonnie 帶了些玩具去。在路上,Woody 很努力的保衛 Forky ,不讓他跑去垃圾桶。然後 Woody 在古董店外看到了熟悉的檯燈,他以為久未見面的 Bo Peep 就在裏面。就跟 Forky 進去,進去以後,碰到了 Gabby,Gabby 想要他的發聲盒,Woody 驚恐的逃離了古董店,留下 Forky,Gabby 透過 Forky 知道了許多 Woody 的事情。Woody 逃離以後,遇到了 Bo Peep,看到久未謀面的老友,Woody 非常開心,聊完近況後,他請求 Bo Peep 幫忙,要去救回 Forky。

等不到 Woody 回來的玩具們,讓 Buzz 出去找人。Buzz 在找人的途中遇到了 Bunny 跟 Docky,然後找到了 Woody 跟 Bo Peep,他們一起進古董店裡救人。真的是還好有熟門熟路的 Bo Peep 幫忙,他們找到古董店裡的 Duke Caboom ,一起去救 Forky。援救的結果並不順利,沒能救出 Forky,Bo Peep 等人都放棄了。Woody 不死心,回頭去救人,但勢單力薄的 Woody 被包圍,孤立無援的 Woody 後來選擇了用發聲盒交換 Forky。

得到發聲盒的 Gabby 並沒有如預期般的得到女孩的關注,她非常失望。Bo Peep 回頭來救 Woody,跟 Bo Peep 要一起走的 Woody 看到 Gabby 的情況,就安慰了她,並要她一起走。在此時,Woody 和 Gabby 的心境都發生了轉變。Gabby 決定跟著 Woody 他們走,在途中,她看到一個哭泣的小女孩,決心幫助小女孩。於是 Woody 跟 Bo Peep 幫助 Gabby 找到新的歸宿。Woody 跟 Bo Peep 回到 Bonnie 那邊,本來打算跟 Buzz 一行人團聚的 Woody 改變了主意,既然 Bonnie 已經不需要他了,他決定跟 Bo Peep 一行人一起浪跡天涯。

英雄本色

以前對這部電影印象最深的是周潤發開槍的畫面,這次從頭看起,才明白了前因後果。

子豪是子杰的哥哥,為了生病的爸爸跟年幼的弟弟,做的是黑社會的大哥,從事非法的勾當。弟弟子杰則是進了警校在唸書,並不知道哥哥從事的工作。哥哥知道弟弟念警校,知道自己總有一天要轉換跑道,免得拖累弟弟。子豪有個好搭檔 – 馬克,一起出生入死,打拼天下。

在一次到台灣的交易裡,與阿成同去的子豪被出賣,台灣的警察拘捕了他,將子豪關入監獄,阿成順利逃回香港。在香港的父親跟弟弟則被拖累,子豪的父親被來找子豪的黑幫所殺害,子杰因此知道了哥哥的職業,非常的生氣。雖然父親要子杰原諒哥哥,但子杰並不諒解。馬克得知子豪被捕,隻身前往台灣尋仇,一場槍戰,殺死設局子豪的台灣黑幫。馬克的腳因此受了傷,台灣警方也開始追捕馬克。

幾年的時間很快過去,刑期不多的子豪出獄回到香港,洗心革面,改當計程車司機。阿成此時已經成為黑幫老大,而馬克由於腿傷,委屈自己當個小嘍囉。子豪抽空去見了弟弟子杰,弟弟子杰因為父親以及職場不順利的關係,非常的不諒解哥哥,反目成仇。

阿成想要再次拉攏子豪,子豪不願意,所以轉而對付子豪身邊的人,像馬克、弟弟子杰等人。子豪不願意自己身邊的人受到傷害,就聯手馬克,要把阿成拉下來。首先,讓馬克去取得了犯罪證據,然後以這證據勒索阿成,私底下卻將犯罪證據交給子杰。

子豪約了阿成在碼頭碰面拿錢,但阿成鐵了心要幹掉子豪跟馬克,除了安排大批人馬之外,也設局讓警方誤會子豪是殺人凶手。弟弟子杰收到犯罪證據,跑去碼頭幫忙。總之,一言不合,兩方拿槍火拼。最終,阿成的人馬都死光,馬克死掉,子杰明白了這一切不全然是哥哥的錯,把槍給了子豪,讓子豪殺了阿成幫馬克復仇。故事就這樣結束。

jemalloc

jemalloc (github) 是效能聽說很好的 malloc library。

之前是在 為線上環境而最佳化的 Ruby:Fullstaq Ruby 看到的,看到的當下是想說,會不會也有人來編譯用 jemalloc 的 Python 版本,不過很遺憾的是沒有。後來找了 jemalloc 的資料以後,發現要替換其實不難。Ubuntu 14.04 是已經有包 libjemalloc 了,但版本較舊,是 3.5.1 版。

後來還是選擇自行編譯,然後使用 LD_PRELOAD 環境變數來替換 python 的 malloc library。

那要怎麼檢查 python 是不是真的有使用到呢?這可以使用 lsof 來檢查。(How to see the currently loaded shared objects in Linux?)

lsof /usr/local/lib/libjemalloc.so.2

同款的還有 tcmalloc (Google 出的),有空也來測試看看。

P.S. ptmalloc 是 glibc 的 malloc。