霹靂開發邦

detect portrait/landscape mode, don't use window.orientation

noreply@blogger.com (Unknown) — Sat, 23 Jul 2022 06:26:00 +0000

Math.abs(window.orientation) == 90 doesn't mean it's landscape mode. About 1% of android tablets consider that window.orientation == 0 in landscape mode. Therefore, window.orientation cannot be use, try this method instead:

window. addEventListener('resize', function(){
var dde = document.documentElement,
rotation = dd.clientWidth > dd.clientHeight ? 'landscape' : 'portrait';

}, false);

Since onorientationchange always get the value before orientation, so we use onresize instead.

one line shell script to set a variable for odd or even month

noreply@blogger.com (Unknown) — Mon, 16 May 2022 07:57:00 +0000

month=$(if [[ $(echo $(date +%m)%2 | bc) -eq 1 ]]; then echo "odd"; else echo "even"; fi;)

google vs cloudflare: check if IP cames from mainland China

noreply@blogger.com (Unknown) — Sat, 10 Jul 2021 06:07:00 +0000

google ad manager report and cloudflare geoip header

all traffic in specific period: 5,804,277

cloudflare-geoip is CN: 80,956
cloudflare-geoip is not CN: 5,723,321

IP is China in google report:

cloudflare-geoip is CN: 78,543 (75%)
cloudflare-geoip is not CN: 26,464 (25%)

IP is not China in google report:

cloudflare-geoip is CN: 2,413 (0.004%)

HK 809, US 783, PH 311, JP 122...

cloudflare-geoip is not CN: 5,696,856 (99.957%)

change SVG color by using CSS

noreply@blogger.com (Unknown) — Mon, 15 Mar 2021 03:39:00 +0000

https://codepen.io/sosuke/pen/Pjoqqp

default settings in enableLazyLoad()

noreply@blogger.com (Unknown) — Thu, 10 Sep 2020 10:55:00 +0000

GPT(google publisher tag) starts to support lazyload at 2019-02-04(v301), developer can setup lazyload ads easily . But there is no official document doesn't provide the default value, but only some example. We found the value in the code.

fetchMarginPercent: 800
renderMarginPercent: 400
mobileScaling: 3

These values were found in securepubads.g.doubleclick.net/gpt/pubads_impl_2020090201.js?21067391. It might be changed in the future.

CDN 不能在 header 中設定 set-cookie

noreply@blogger.com (Unknown) — Thu, 18 Jun 2020 08:46:00 +0000

aws cloudfront 只要有 set-cookie ，就不會快取，而 #cloudflare 原本沒有，但最近也跟進了。

disable adsense on 404 pages in wordpress

noreply@blogger.com (Unknown) — Thu, 30 Apr 2020 02:52:00 +0000

My client got adsense policy violation for 404 pages since the static adsense code appeared in the widget of sidebar. Therefore, we run few lines of code to disable the adsense in 404 pages.

add free "code snippets" plugin
add the code in this link https://gist.github.com/girvan/b779d6b5f969f804f283aab435ad94bb
turn on the code

upgrade to Jetdrive for Macbook pro

noreply@blogger.com (Unknown) — Mon, 30 Mar 2020 01:09:00 +0000

The missed step took me several hours, cause my new jetdrive unable to be detected.

jetdrive should format by following steps:
disk utility -> view -> show all devices -> select the device as root level -> erase as:
- MAC OS extended (Journaled)
- GUID partition map

Don't forget to backup! No warranty! Good luck!

CSV 格式的 API 需注意事項

noreply@blogger.com (Unknown) — Wed, 19 Feb 2020 06:56:00 +0000

近期本站製作藥局口罩資訊，官方提供的 API 是 CSV 格式。但後來發現，CSV 格式，有時候可能因為網路問題，會導致下載不完全。但 CSV 格式的特性，不完全，它還可以被分析轉換，導致後續一連串的錯誤發生。當然，可以的話 JSON 格式最好，好轉換，若被截斷了，至少不會繼續錯下去。本篇說明相關的解決方法。

原本的做法是
curl -o mask.csv https://...
無論是 curl 或是 wget ，在網路有問題的情況下，還是會有檔案。

所以解法可以是
curl -o mask.csv https://.... || rm -f mask.csv
在 || 的左邊如果成功了，右邊就不會執行。所以 curl 只要有問題，就會被砍掉。

使用 cloudflare workers 來代替 php 存取第三方 API ，解決 process 被卡住的問題

noreply@blogger.com (Unknown) — Fri, 29 Nov 2019 06:03:00 +0000

最可恨的事情就是，cpu 沒有 100% ，系統就掛了。

本站大部份的頁面，php 平均處理時間大多是 50ms 以下，有快取的則在 10 ms 以下。但是當 php 要存取第三方 api 時， api 的回應常到高達 1~5 秒，所有的 php process 就會被卡住。假設 php process 上限是 5 個，有時候高峰(spike) 來了，一次來個 10 個需要存取 api 的 request，但是當所有 php process 都在用來等待後方 api 的時候，同時間其它應該可以快速回執行完的 request 都會被 queue 住了。

php 往後方存取 api 並不是很 cpu 耗資源，但一個 process 的成本卻很高，可能記憶體就要30~50MB。所以沒辦法將 php process 的上限數設到很高很高。

還有一個簡單的解法，就是把需要存取 API 的部份改成 ajax ，然後透過 nginx proxy 來實作。nginx proxy 可以容納的 connections 就可以很高了，如果你有設定好的話。當然如果 nginx proxy 可以解決，請直接左轉離開吧！但本站考量 SEO 的關係，沒辦法這麼做。

既然 php process 不善長等待這件事，我們就把等待這件事交給 serverless 來去處理。

假設 php 程式在執行的過程中，會執行到某一段程式，並從後端存取資料。

function _fetch($url)
{
// php curling .....
return $html;
}

php 部份只需要加個幾行而已。

function _fetch($url)
{
if(isset($_GET['workers_proxy_get']))
die($url);
if(isset($_GET['workers_proxy_response']))
return $_POST['html'];
// php curling .....
return $html;
}

接下來是 workers 的部份，如下
https://gist.github.com/girvan/2ee69ba0f1887aaab1dc8663240ca73c

然後再到 cloudflare 把這一類的 request 導到 workers 即可。記得 pattern 要設定好，不要所有的 request 都這麼玩。

眼尖的人會發現，php 部份其實是會重複執行到，但問題解決了。

detect browser and append classname on html element

noreply@blogger.com (Unknown) — Fri, 25 Oct 2019 08:10:00 +0000

[bootstrap-4] navbar-toggler with simple JS

noreply@blogger.com (Unknown) — Fri, 18 Oct 2019 05:30:00 +0000

You don't need to load whole JS library, just a simple 3-line script. no fading affect, but it just work.

[font-awesome] put single svg instead of download font file

noreply@blogger.com (Unknown) — Thu, 05 Sep 2019 09:23:00 +0000

font awesome is heavy library.
I prefer to use standalone svg file.

Download SVG file here:
https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg
Change SVG color by using this:
https://codepen.io/sosuke/pen/Pjoqqp

insert iframe content without document.write

noreply@blogger.com (Unknown) — Fri, 23 Aug 2019 06:44:00 +0000

Old ways:

var doc = document.getElementById('myIframe').contentWindow.document;
doc.open();
doc.write("<html>....</html>");
doc.close();

But chrome started to show the warning from 2018, therefore, you can modify as following way:

document.getElementById('myIframe')
.contentWindow.document.documentElement.innerHTML = "<html>....</html>";

If you want to add jQuery in iframe:

var iframeWindow = document.getElementById('myIframe').contentWindow;
iframeWindow.$ = function (selector) {
return jQuery(selector, iframeWindow.document.body);
};

使用 Google 分析來統計 cloudflare 的節點 (colo) 資訊

noreply@blogger.com (Unknown) — Thu, 27 Jun 2019 07:03:00 +0000

許多人會造訪 /cdn-cgi/trace 來查看是哪一個節點，但是問再多人都難以得知全面的統計數字。這裡提供一個 JS 的語法來進行全面、即時的統計。統計結果會即時的顯示在 Google 分析裡。

複製連結裡的程式碼，再貼到網頁中即可。
https://gist.github.com/girvan/ec00a46bfd03674f9cbbed3ac2dd7a92

語法要放在 Google 分析語法的後面。

在 Google 分析裡查看的方法：

即時資訊：即時 → 事件
統計資料：行為 → 事件 → 總覽

大家互相分享一下統計資訊，就知道要買 cloudflare 哪一個等級了 XD

從 yui compressor 升級到 clean-css-cli + uglifyjs 的心得

noreply@blogger.com (Unknown) — Thu, 27 Jun 2019 06:06:00 +0000

我這裡指的是 cli 版本。

由於 yui compressor 已經很沒有在維護了，再加上原本的 java 版本速度很慢，這次一舉換成 node 版本。

原本的 yui compressor 使用的 cli 為

java -jar /usr/share/yui-compressor/yui-compressor.jar --charset=utf-8 {input-file} -o {output-file}

新的改成

js: uglifyjs -c -m -- {input-file} > {outputfile}

css: cleancss -O1 specialComments:off --skip-rebase --inline none {input-file} > {outputfile}

幾點心得：

CSS 部份

在這個過程中有比較 ycss (yui compressor 的 node 版本)，uglifycss (說是從 yui compressor port 來的，但看起來是重寫的)。再比較一下 npm 的下載次數和 github 的星號數。ycss 7 年沒有維護了，不考慮。最後來決定採用 clean-css-cli 。速度上的比較：

yui compressor (java)：2m10s
clean-css-cli: 55s
uglifycss: 26s

clean-css 速度不是最快的，但壓的還是比較小。功能也比較多，但我都沒用上。

JS 部份

在這個過程中有比較 closure ，但真的速度太慢了，比起 uglifyjs 差了 4~8 倍，uglifyjs 的官網有寫比較表。從過去的 yui compressor 升級到 uglifyjs3 之後，看到一些很新的壓縮的方法，比如說 false 會變成 !1 ， true 會變成 !0，if(a == b) c = d; 會變成 (a == b && c = d)。目前看到的缺點是，在 output 的結尾會多個換行字元。

讓 iterm 2 強制斷線的方法 (Mac)

noreply@blogger.com (Unknown) — Thu, 25 Apr 2019 04:37:00 +0000

在 Mac 中使用 iterm 2 再配合手機分享的 wifi，特別容易斷線，斷線時整個 session 卡住，只能關掉再重開一個新的。這裡提供一個方法，在 session 卡住時，只要按

enter ~ .

(依序按，不要放開)

即可強制斷線。

記得按 ~ 時也要按 shift

換 ssh port 是必要的

noreply@blogger.com (Unknown) — Wed, 24 Apr 2019 02:30:00 +0000

TL;DR

ssh 換 port 是必要的，可以減少許多低端駭客例行性掃描。
fail2ban 舊版本不支援 ipv6 ，ipv6 的門是開的。
fail2ban 要測試是否有確實生效，適時修改設定。

以前覺得換 ssh port 沒有必要，才 6 萬個 port 掃一下就知道了，然後以為 fail2ban 很神。但後來發現，22 port 其實都一直被掃，被試。時間久了，fail2ban 會造成系統很大的負擔。下圖為 linode $5 的機器。換 ssh port 前後的差異。

下列提供換 (root) port 的指令，記得防火牆先 allow 那個 port，不然你會被擋在門外。

ubuntu 16.04 換 sshd port 指令為

sed -i "s/Port 22/Port NEW_PORT/g" /etc/ssh/sshd_config
service sshd restart

ubuntu 18.04 換 sshd port 指令

sed -i "s/#Port 22/Port NEW_PORT/g" /etc/ssh/sshd_config
service sshd restart

再來討論一下 fail2ban ，它在 ubuntu 16.04 預設的版本是不支援 ipv6 的，也就是說有心人試用 ipv6 就可以慢慢打。所以要去 sshd_config 把 ipv6 關掉。下列為關閉指令。

file=/etc/ssh/sshd_config
if [[ ! $(grep "AddressFamily inet" $file) ]]; then
echo "AddressFamily inet" | sudo tee -a $file
/etc/init.d/ssh restart
fi;

ubuntu 18.04 的 fail2ban 版本支援 ipv6 ，但我還是把它關掉，而且配合 ufw 的話要加上這一段才有用。

jail=/etc/fail2ban/jail.local
echo "[DEFAULT]" > $jail
echo "banaction = ufw" >> $jail
echo "[sshd]" >> $jail
echo "enabled = true" >> $jail
echo "maxretry = 3" >> $jail
echo "findtime = 3600" >> $jail
echo "bantime = 3600" >> $jail
service fail2ban restart

再來是 fail2ban 是很吃資源的，ubuntu 16.04 開機 267 天後，fail2ban 記憶體用量為 198MB。

uptimerobot 使用一個月心得，加碼升級 pro

noreply@blogger.com (Unknown) — Mon, 01 Apr 2019 07:03:00 +0000

原本在 2014 在 Google App Engine (GAE) 用 python 寫的一套監控程式，一直用到去年底。後來因為 GAE 環境下的 curl api 不是很穩定，外加 python 忘光了... 才開始尋找其它解決方案。

uptimerobot 從免費版本開始用，我設了 39 個監控，透過 api 設的。
上週升級 pro，升級 pro 的原因：
不是為了 1 minute monitoring；而是為了 if down x minutes, notify every y minutes.

值得一提推薦理由為：

API 完整簡單
pro 很便宜 $5.5/月(年繳為 $4.5) ，比起其它家動輒 $10 或 $20+
pro 的功能很實用 if down x minute, notify y minutes.

最後一項功能很重要，這也是我當年自己手刻的原因。

因為手機時時在響，不重覆通知真的很容易忽略。

另外講補個缺點就是，其實說每 x 分鐘會監測或寄信，我測的結果有時沒這麼準時。

在 git compare changes 頁面排除某些檔案

noreply@blogger.com (Unknown) — Wed, 27 Mar 2019 07:17:00 +0000

通常在 branch 要合併之前，我會到 git compare 的頁面再做一次檢查

https://github . com/{name/repo}/compare/master...{branch-name}

但有時候可能是不小心，或是因為歷史因素，某些大量批次產生的檔案，也可能是外部的開放源始碼函式庫會出現在這個頁面。太多這類的程式碼讓這一個頁面難以查閱。

這裡是一個書籤 javascript ，以路徑為 pattern 來移除掉這類的程式碼，當然只是頁面上移除而已。

https://gist.github.com/girvan/f2c1755abc7f5409eb3bd756611cb2e5

請複製，並修改 /SOME-PATH-YOU-WANT-TO-EXCLUDE/ 字串
再到 https://mrcoles.com/bookmarklet/ 製作成書籤即可。

Chrome 70 removed "Build" in user agent string

noreply@blogger.com (Unknown) — Wed, 21 Nov 2018 03:23:00 +0000

Chrome 70 removed the "Build" part:
Chrome 69: ...(Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit...
Chrome 70: ...(Linux; Android 4.2.1; en-us; Nexus 5) AppleWebKit...

But it doesn't change in webview:

...(Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D; wv) AppleWebKit...

使用 cdnjs 上的 1x1 gif

noreply@blogger.com (Unknown) — Tue, 20 Nov 2018 06:45:00 +0000

在使用 lazyload image 常會空白的 gif

這邊找了幾個 43 bytes 的版本:

https://cdnjs.cloudflare.com/ajax/libs/blockly/1.0.0/media/1x1.gif

https://cdnjs.cloudflare.com/ajax/libs/timelinejs/2.36.0/css/blank.gif
https://cdnjs.cloudflare.com/ajax/libs/probtn/1.0.1/stylesheets/blank.gif
https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.8.5/skins/lightgray/img/trans.gif

那為什麼不用下列方法？

留白法：<img data-src="http://...." />

data uri: <img data-src ="http://...." src="data:image/gif;base64,....." />

因為看過 access log 之後發現

如果你的頁面是 example.com/hello/

留白法會造成主頁面再多一次 request 到 /hello/

data uri 會造成相對路徑再多一次 request 到 /hello/data:image/gif;base64,...

誰發的 request？主要是一些爬蟲，和少數的舊瀏覽器

每月 200美金的 cloudflare business 又開始走台灣節點了！

noreply@blogger.com (Unknown) — Mon, 05 Nov 2018 09:05:00 +0000

台灣訪客造訪 cloudflare pro 的網站

72% KIX
28% TPE

台灣訪客造訪 cloudflare business 的網站

84% TPE
16% KIX

資料來源是從本站的 log 挖出來的
不知道是 cloudflare 和 hinet 的心結解開了，還是其它考量就不清楚了。

SSL 憑證：新申請的或快到期的憑證會讓使用者連不上網站

noreply@blogger.com (Unknown) — Thu, 28 Jun 2018 02:41:00 +0000

使用者的電腦的時間不一定正確，自己的經驗是，儘管是用正版 windows ，時間自動校正都常常壞掉。當使用者電腦的日期是 6/1 ，但是您網站的 ssl 憑證是 6/2 ，瀏覽器就會擋下來，說憑證不安全什麼的。簡言之，您可能 6/1 申請的憑證，6/3 才能放上網站上供使用者使用。本站曾對使用者電腦的時間做過簡單的統計：

電腦時間在八小時以前：2.7%，新申請的憑證在八小時內就放上去，有 2.7% 的使用者會連不上。
電腦時間在十天以後：0.6%，憑證在快到期前十天有 0.6% 的使用者無法使用
電腦時間在一天以前：1.2%
電腦時間在一天以前 + 電腦時間在三十天以後：1.4%
電腦時間在兩天以前 + 電腦時間在三十天以後：1.0%
電腦時間在三天以前 + 電腦時間在三十天以後：0.9%
電腦時間在五天以前 + 電腦時間在三十天以後：0.7%

以上是本站的使用者統計，主要非台灣的使用者，桌機；每個網站的實際情況不一樣。

我們自己是申請完五天後就才放上線使用，預計只影響 0.7% 的使用者。

cloudflare argo 速度測試

noreply@blogger.com (Unknown) — Tue, 29 May 2018 02:33:00 +0000

先說結論，真的快！懶得看請按讚！

日本節點到美國之間的連線

使用日本的機器直連 cloudflare NRT 日本節點，以 jquery 1.8.2 為 93k，由於使用 ab 指令來測試。

測試由 NRT 到 US 的速度

在 cloudflare page rule 設定 cache level = bypass 來避免快取。

Non ARGO: JP test point → cloudflare NRT (cache bypass) → US server

Complete requests: 20

Failed requests: 0

Total transferred: 1880020 bytes

HTML transferred: 1868720 bytes

Requests per second: 1.30 [#/sec] (mean)

Time per request: 769.221 [ms] (mean)

ARGO: JP test point → cloudflare NRT (cache bypass) → US server

Complete requests: 20
Failed requests: 0
Total transferred: 1878160 bytes
HTML transferred: 1868720 bytes
Requests per second: 4.33 [#/sec] (mean)
Time per request: 230.750 [ms] (mean)

台灣節點到美國之間的連線

再來是台北節點的測試，使用 hinet ipv6 來直連台北節點

Non ARGO: TW test point → cloudflare TPE (cache bypass) → US Server

Complete requests: 20

Failed requests: 0

Total transferred: 1880020 bytes

HTML transferred: 1868720 bytes

Requests per second: 0.84 [#/sec] (mean)

Time per request: 1192.325 [ms] (mean)

ARGO: TW test point → cloudflare TPE (cache bypass) → US Server

Complete requests: 20
Failed requests: 0
Total transferred: 1878160 bytes
HTML transferred: 1868720 bytes
Requests per second: 2.29 [#/sec] (mean)
Time per request: 437.533 [ms] (mean)

結論

日本節點實測連線時間 -70%，台北節點實測連線時間 -64% 。

但是否採用 argo ，要視你網站系統的架構而定。以本站說，台灣訪客的走法有這兩種各佔一半：

台灣訪客 → 台北節點 → 美國主機
台灣訪客 → 日本節點 → 美國主機

以上述的測試來說都可以讓 TTFB 少一半以上，這對 SEO 和廣告效益會有幫助。

但是否採用 argo 還有另外一個要考量的就是口袋深度，無論是否有快取要價 0.1USD/GB ，本站也要再考量看看。

其它測試結果

25k 圖檔: tpe non-argo to us
HTML transferred: 492400 bytes
Requests per second: 1.68 [#/sec] (mean)
Time per request: 596.254 [ms] (mean)

25k 圖檔: tpe argo to us
HTML transferred: 492400 bytes
Requests per second: 2.60 [#/sec] (mean)
Time per request: 384.306 [ms] (mean)

13k 圖檔：tpe non-argo to us

HTML transferred: 267260 bytes
Requests per second: 2.63 [#/sec] (mean)
Time per request: 380.700 [ms] (mean)

13k 圖檔：tpe argo to us
HTML transferred: 267260 bytes
Requests per second: 2.90 [#/sec] (mean)
Time per request: 344.813 [ms] (mean)