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

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

 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

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

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

default settings in enableLazyLoad()

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

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

disable adsense on 404 pages in wordpress

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

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 需注意事項

近期本站製作藥局口罩資訊，官方提供的 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 被卡住的問題

最可恨的事情就是，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 部份其實是會重複執行到，但問題解決了。