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

2019年6月27日 星期四

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


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

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

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

Google 分析 裡查看的方法:
  • 即時資訊:即時 → 事件 
  • 統計資料:行為 → 事件 → 總覽
大家互相分享一下統計資訊,就知道要買 cloudflare 哪一個等級了 XD

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

我這裡指的是 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}

幾點心得:

2019年4月25日 星期四

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

在 Mac 中使用 iterm 2 再配合手機分享的 wifi,特別容易斷線,斷線時整個 session 卡住,只能關掉再重開一個新的。這裡提供一個方法,在 session 卡住時,只要按
enter  ~  . 
(依序按,不要放開)
即可強制斷線。
記得按 ~ 時也要按 shift