2020/03 Cola Daily Build

03/02

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

03/03

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

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)

03/05

  • 建立 node in docker

    • pm2 + node(感覺應恐把 pm2 和 node 拆開比較好)
    • node 服務還沒起來前, docker-compose 沒辦法帶起 node + nginx; 因此一定要讓 node app 服務變成啟動 compose 即啟用才行
      感覺很怪,但又合理
  • node <-> db(mysql); 把連線與 query 包裝成 Promise
    (這個網站的教學非用實用)
    https://time2hack.com/creating-rest-api-in-node-js-with-express-and-mysql/

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.

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

這是哪國文 :face_with_raised_eyebrow:

嗚哇,我自己也看不懂
我改一下 :dizzy_face:

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)

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.

03/12

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 問題

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.

03/17

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

03/18

  • F2E study to hachi
  • why need to use password manager draft

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…

03/23

  • study mobile plan
  • study travel
  • update resume

03/24

on leave

03/25

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

03/26

03/27

on leave

03/30

  • test php cs fixer
  • clean up the bed