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 

2019年4月24日 星期三

換 ssh port 是必要的


TL;DR

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


2019年4月1日 星期一

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

原本在 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 分鐘會監測或寄信,我測的結果有時沒這麼準時。

2019年3月27日 星期三

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

通常在 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/ 製作成書籤即可。