2020年9月10日 星期四

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.

2020年6月18日 星期四

CDN 不能在 header 中設定 set-cookie

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

2020年4月30日 星期四

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.

2020年3月30日 星期一

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!

2020年2月19日 星期三

CSV 格式的 API 需注意事項

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

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

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

2019年11月29日 星期五

使用 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 部份其實是會重複執行到,但問題解決了。

2019年10月18日 星期五

[bootstrap-4] navbar-toggler with simple JS

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

2019年9月5日 星期四

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

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

2019年8月23日 星期五

insert iframe content without document.write

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);
};