2020/03 Cola Daily Build

cola · 2020年03月03日09:39

03/02

GTM 相關文章, 寫文的速度好慢
- 主要花時間在素材… 雖然能先整理出大綱和短文可是圖片類的東西很難先準備

cola · 2020年03月04日01:39

03/03

GTM 文章，篇幅有點長，依慮要不要拆文
通順語意，加註說明等
study facebook pixel custom pixel event; 在 GTM 對 async js loading 的處理方法就是每個 tag 都置入 html 讓瀏覽器 cache 處理重覆問題(個人覺得怪

cola · 2020年03月04日07:38

03/04

GTM 拆文完成上線
typescript
很酷的 ES6 用法
Require Parameters for JavaScript Functions

const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) }

Six Tiny But Awesome ES6 Features

其中一個~

參數檢查進階版

const is = {
  get required(){
    throw new Error('Required argument')
  }
}

import { is } from 'utils'

const foo(name = is.required)=>Array.from(name)

cola · 2020年03月06日01:52

03/05

建立 node in docker
- pm2 + node(感覺應該把 pm2 和 node 拆開比較好)
- node 服務還沒起來前， docker-compose 沒辦法帶起 node + nginx; 因此一定要讓 node app 服務變成啟動 compose 即啟用才行
  感覺很怪，但又合理
node <-> db(mysql); 把連線與 query 包裝成 Promise
(這個網站的教學非用實用)
Creating REST API in Node.js with Express and MySQL 🧩-Time to Hack

cola · 2020年03月09日02:53

03/06

use Visual Studio Code (vscode) Debug Node.js within a docker container

(理論上非 docker 也可以用這個方式)

不論是 pm2 或是 node 直接啟動 JS APP 都可以使用~

在 docker container 內啟動 node APP

(選擇你的 app 啟動方法)

方法1: 透過 pm2 啟動
- target script: ‘/var/www/express-test/bin/www’
- node_args: “–inspect-brk=0.0.0.0”
方法2: node 直接啟動
- node app.js --inspect-brk=0.0.0.0
port 預設: 9229

ref.

成功啟動 app 並進入 debug 監聽模式

可以看到 app 啟動後，debugger listening 提示訊息(如下圖)

(訊息開頭 NODE_1 後半段部份)

確認本機與 container 監聽是否串接成功

回到本機

在 chrome 瀏覽器，網址列輸入

chrome://inspect/

Discover network targets Configure…
新增監聽 localhost:9229

如果串接成功
下方
Remote Target 區塊，將出現 node 版本與相應 .js

與 vscode Debug 串接

於 vscode menu bar -> Debug -> open configuration 或 add configuration

編輯 vscode debug 監聽設定 launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Docker: Attach to Node",
            "type": "node",
            "request": "attach",
            "port": 9229,
            "address": "localhost",
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "/var/www/express-test",
            "protocol": "inspector"
          }
    ]
}

以上需要注意並調整~

port 變更為前面 node inspect-brk 指定的 port
remoteRoot 變更為 docker container 內 node 啟用的時目錄位置(也就是專案根目錄)
e.g.
啟動時用的路徑為:
/var/www/express-test/bin/www
或
/var/www/express-test/app.js
專案根目錄則為: /var/www/express-test

.
.
.

vscode 內按 F5 Start Debugging

接著對程式碼下中斷點 (breakpoints)

到 chrome 相對應的頁面，重新整理或執行

碰到中斷點就會自動回到 vscode

可以用滑鼠查看中斷點前變數內容

Ref.

cola · 2020年03月09日05:58

03/09

post node debug article

DB query await / async
在這個場景下，不曉得洽不洽當

一般的 query 資料 e.g. select 可以使用 async/await
(L14)
非同步的計數器則可以不使用 async/await，因為並不需要即時取回計數回傳值
~~一般性 query 取資料, 配合 await, 非同步的 query 計算來客數不加上 await 使之分開處理不即時取回回傳值~~
L 12

Pamcy · 2020年03月09日13:54

這是哪國文

cola · 2020年03月10日01:25

嗚哇，我自己也看不懂
我改一下

cola · 2020年03月11日07:32

03/10

laravel 7
- test
  使用 phpunit.xml 切探 .env 為 .env.testing 走測試用 env config
  對己存在 DB 難以即時重建測試專用 DB 情況，建議直接 duplicate 一個測試專用 DB (拿是用測試機 DB) 在上面跑 test

example code

    public function provideLinkListData()
    {
        return [
            [1, 2],
            [0, 5],
            [-2, 2],
            [3, 5],
            [10, 10],
        ];
    }

    /**
     * @dataProvider provideLinkListData
     */
    public function testLinkListController(int $page = null, int $limit = null)
    {
        $this->repo = Mockery::mock(LinkRepository::class);
        $this->app->instance(LinkRepository::class, $this->repo);

        $this->repo
            ->shouldReceive('list')
            ->once()
            ->andReturn(new Collection);

        $response = $this->call('GET', "links/{$page}/{$limit}");
        $response->assertSuccessful();
    }

    /**
     * @dataProvider provideLinkListData
     */
    public function testLinkListRepo(int $page = null, int $limit = null)
    {
        $repo = $this->app->make(LinkRepository::class);
        $list = $repo->list($page, $limit);

        $this->assertTrue(
            is_array($list->toArray())
        );
    }

上面只測試 controller 和 repository，沒有測/mock model

個人認為不太適合測 orm model

斷言回傳值就好了(上面僅檢查是否為 array)

cola · 2020年03月12日02:25

03/11

mysql PARTITION, 突然想到要補一下這部份內容
資料量、筆數如果太少, 做分區 (partition) 沒什麼用

keyword:
目前分割資料有分二種方式，一種是水平分割(Horizontal Partitioning)、另一種是垂直分割(Vertical Partitioning)。分表、分庫

test

建兩個 table 相同資料各二千萬筆

table schema


-- 新增 table
CREATE TABLE member1 (
    id INT NOT NULL AUTO_INCREMENT,
    age INT NOT NULL,
    cont VARCHAR(255) NOT NULL, 
        PRIMARY KEY(id, age)
)
PARTITION BY range(age) (
   -- 由大至小設定
    PARTITION p0 VALUES LESS THAN (10), -- 0~9
    PARTITION p1 VALUES LESS THAN (20), -- 10~19
    PARTITION p2 VALUES LESS THAN (30), -- 20~29
    PARTITION p3 VALUES LESS THAN (40), -- 30~39
    PARTITION p4 VALUES LESS THAN (MAXVALUE) -- over 40
)
;

-- 若表已存在，注意執行時間與效能
ALTER table member 
PARTITION BY RANGE(age) -- partition key 必須為 primary key
    PARTITION p0 VALUES LESS THAN (10), -- 0~9
    PARTITION p1 VALUES LESS THAN (20), -- 10~19
    PARTITION p2 VALUES LESS THAN (30), -- 20~29
    PARTITION p3 VALUES LESS THAN (40), -- 30~39
    PARTITION p4 VALUES LESS THAN (MAXVALUE) -- over 40
    
);

-- 查看 table 被設定的 partition 參數
show create table member;

-- 如果要刪掉 partition，注意執行時間與效能
ALTER TABLE member REMOVE PARTITIONING;

-- 刪掉後建議重跑一下，注意執行時間與效能
OPTIMIZE TABLE member;

query performance

一般 where 比較

-- 有 partition
select * from member1
where age > 10 and age < 30
-- avg: 10~17ms

-- 沒 partition
select * from member2
where age > 10 and age < 30
-- avg: 100~140ms

.
.

測試 group

-- 有 partition
select * from member1
where age > 10 and age < 30
group by age
-- avg: 70~130ms

-- 沒 partition
select * from member2
where age > 10 and age < 30
group by age
-- avg: 150~200ms

結論~

資料量小是完全沒差別的, 千萬級以上且有一定資料內容差異較大
關係到全表搜尋速度差異就會出現
加上 group 就差多了

explain query
可以看到使用了哪些 partition

Ref.

假資料建立
http://filldb.info/dummy
MySQL 千萬級資料表 partition 實戰應用
https://www.itread01.com/hkclpql.html
30-27之資料庫層的擴展 - 分區表
https://mark-lin.com/posts/20190927/
3.3.1 RANGE COLUMNS partitioning
https://dev.mysql.com/doc/mysql-partitioning-excerpt/8.0/en/partitioning-columns-range.html

cola · 2020年03月13日03:52

03/12

update resume, linkedin
log mysql partition
seo study
https://medium.com/@meistudio/mobile-first-indexing-seriously-3e396b7a75e7

cola · 2020年03月16日01:35

03/13

wordpress code highlight
webpack dev server live reload within docker
- host: 0.0.0.0 chrome 也有 app enable 訊息，但是 livereload 沒有生效?!
ddd study
調查03-12 sv 晚上high memory 問題

cola · 2020年03月16日08:33

03/16

替換頁面上的 gif 為 mp4 加快網頁讀取、載入效率

把巨肥而且吃資源的 gif 拿掉~

『Replace animated GIFs with video for faster page loads』

thumbor is an open-source photo thumbnail service, gif to mp4

雖然改用 mp4 好處多多但是有很多技術問題需要解決
行銷、UX 上可能需要 autoplay
但這個簡單動作在各平台上的行為不一，以 ios 來說省電模式下 autoplay 是停用的
http://strifer.link/html-video-autoplay-test/

總結來說， gif 雖然肥… 但他 “just work”
#seo #f2e

ref.

cola · 2020年03月17日01:28

03/17

mysql partation blog and test
web dev gif to mp4 study
certificate Deposit study

cola · 2020年03月20日03:12

03/18

F2E study to hachi
why need to use password manager draft

cola · 2020年03月20日08:28

03/19

on leave

03/20

nginx conf for wordpress within docker

server {
  listen 80;
  listen [::]:80;

  server_name padada.workxplay.net;

  location / {
    rewrite ^ https://$host$request_uri? permanent;
  }
}

server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  server_name padada.workxplay.net;

  index index.php index.html index.htm;

  root /var/www/html;

  server_tokens off;

  ssl_certificate /var/discourse/shared/standalone/ssl/uni.workxplay.net.cer;
  ssl_certificate_key /var/discourse/shared/standalone/ssl/uni.workxplay.net.key;

  add_header X-Frame-Options "SAMEORIGIN" always;
  add_header X-XSS-Protection "1; mode=block" always;
  add_header X-Content-Type-Options "nosniff" always;
  add_header Referrer-Policy "no-referrer-when-downgrade" always;
  add_header Content-Security-Policy "default-src * data: 'unsafe-eval' 'unsafe-inline'" always;
  # add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
  # enable strict transport security only if you understand the implications

  location / {
    try_files $uri $uri/ /index.php$is_args$args;
  }

  location ~ \.php$ {
    try_files $uri =404;
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass fpm:9000;
    fastcgi_index index.php;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PATH_INFO $fastcgi_path_info;
  }

  location ~ /\.ht {
    deny all;
  }

  location = /favicon.ico {
    log_not_found off; access_log off;
  }

  location = /robots.txt {
    log_not_found off; access_log off; allow all;
  }

  location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
    expires max;
    log_not_found off;
  }
  
}

幾個問題要注意
目錄權限，也許需要用到 755
nginx 重導向注意
查看 nginx access, error log 可以找出問題
ngixn conf 最好能早點拆分, e.g. ssl, php.conf…

cola · 2020年03月25日08:49

03/23

study mobile plan
study travel
update resume

03/24

on leave

cola · 2020年03月25日08:50

03/25

update resume(featured with flexbox)
update mobile plan (tstartel)
study zoom, hangout

cola · 2020年03月31日05:55

03/26

03/27

on leave

cola · 2020年03月31日05:57

03/30

test php cs fixer
clean up the bed