簡訊供應商比較表懶人包

因為專案的需要串接簡訊的功能,所以就研究了一下各家簡訊供應商

以下是簡短的心得

送全球用 Nexmo 與 Twilio

Nexmo 台灣的到達率比較高,其他地方沒人反應收不到,所以是未知 XD,Twilio 是備援,有一次 Nexmo Routing 出問題,所以就加入 Twilio 當作備援。

送台灣用 SMS-GET 與 三竹簡訊

因為 Nexmo、Twilio 送台灣很貴,所以就再增加台灣本地的供應商。

SMS-GET、三竹簡訊 就是便宜,到達率也不錯。

會用兩個供應商也是因為要互相備援,不然只要供應商一有問題,抱怨就如同雪片般飛來

懶人包

最後是 各家簡訊供應商比較表 Google Spreadsheets ,裡面有比較完整的比較

後台 Bootstrap, jQuery, Javascript 套件大寶典

手上的工作項目除了寫 backend code 之外,有時還需要做網頁後台,本人略懂 HTML, CSS 但是設計則是大外行,所以在做網頁後台時大多找些現成的 package 。

因為 Bootstrap 實在非常好用,所以找 package 的準則首選相容 Bootstrap 或是有 Bootstrap theme 的套件,以下就由院長一一為大家介紹。

Bootstrap

AdminLTE

拿來當底的 Admin theme ,相容 Bootstrap 3 又有許多客製化的 Widgets

Jasny Bootstrap

有一些強化原本 Bootstrap 3 沒有的元件,像是 Input mask, Row link, File input, ... 等,我主要拿來補 Bootstrap 沒有的 File input

Bootstrap 3 Datepicker

最齊全的 Datepicker

Bootstrap Notify

用來做網頁彈 Notify

Javascript

Holder.js

Jasny Bootstrap 有個 image 縮圖的 uploader 元件,可以再上傳時預覽圖片,Holder.js 則是用來填充預設的空白圖片區域

Moment.js

最齊全的日期處理函式庫

spark-md5

純 Javascript md5 函式庫,搭配 HTML5 的 FileReader,就可以在前端直接算出檔案的 md5 hash value

Vue.js

最近很夯的 front-end framework ,會用 Vue.js 不是因為要搞什麼 Single Page Application(SPA),而是拿來做一些原本用 jQuery 不好做的元件透過 Vue.js 的 two way data binding 就可以輕鬆搞定,這部分再找時間寫專文來介紹。

jQuery

DataTables.net

最好的 DataTables 了,有 Bootstrap 3 的 theme

yadcf

DataTables.net 的 Column Filter 外掛,可以在 DataTables 的 Column 加上 Filter ,就可以單獨過濾這個 Column ,唯一的缺定就是 css 很難看,不過除此之外也找不到其他的了。

Chained

拿來做多個 select 連動,像是選了縣市、根據縣市再選行政區這類的 select 連動

Selectize.js

原本是強化 select 的套件,不過裡面的 tag input 是目前院長用過最好用的 tag input

WYSIWYG editor

Summernote

間單清爽的 WYSIWYG editor

CKEditor

CKEditor 就不用介紹了吧,全功能、重裝備

UIkit

UIkit 也類似 Bootstrap 的 front-end framework ,UIkit 有個 HTML editor 可以支援 Markdown ,之前有專案使用過這個 Markdown editor

Icon font

Icon font 就不解釋了

Ionicons

Font Awesome

Punch Burger - 台電大樓站拳擊漢堡主題餐廳

Punch Burger

台電大樓站拳擊漢堡主題餐廳

推薦度:☆☆☆☆☆

Google Map 地圖連結: https://goo.gl/maps/bUQP1tKJiiD2

官方網站: http://www.punchburger.tw/


跟一些老朋友聚餐,同時來朋友開的餐廳捧場

Punch Burger 在捷運台電大樓站三號出口,出來右轉就可以看到,還蠻容易找的

Punch Burger

一進門就看到拳擊假人,可以打個幾拳,姑且叫它「Punch醬」吧

拳擊假人

店裡的氣氛就是以拳擊為主題,還有拳擊台圍繩,同時還有大電視可以看運動比賽轉播

Punch Burger 用餐環境

換個角度再一張

Punch Burger 用餐環境

人到齊後,店員送上菜單

點餐摟

點完後,聊了一會兒剛剛點的東西就上來拉

這是朋友點的鳳梨漢堡

漢堡套餐除了漢堡還有現炸薯條

如果吃不夠吃不爽還可以加料喔

鳳梨漢堡

至於院長呢,則點了我最愛的花生醬漢堡

除了花生醬之外 Punch Burger 的花生醬漢堡還有加花生,而且是一整顆花生喔,不是一般的顆粒花生醬

還有漢堡肉都是手打的,超多汁的,我看改名叫潮吹漢堡好了...

花生醬漢堡

漢堡套餐都有生菜、洋蔥跟大蕃茄切片

漢堡套餐的配菜

除了漢堡套餐之外,還有全天供應的早午餐系列也很厲害

這是朋友點的明太子嫩煎雞肉早午餐

嫩煎雞肉真的很可口好吃又多汁

明太子嫩煎雞肉早午餐

這是蘑菇櫛瓜早午餐,蘑菇與櫛瓜烤得很多汁

蘑菇櫛瓜早午餐

飲料除了碳酸汽水飲料之外,還有好喝的奶昔

這是巧克力奶昔,還有大量的鮮奶油,喔~這真是太銷魂了

巧克力奶昔


Punch Burger 的漢堡真的是沒話說,多汁的漢堡肉是厲害的地方,還有現炸薯條很脆又很大根吃起來超過癮,早午餐也很不錯,還有厲害的奶昔,下次有機會搞不好可以在那邊看運動比賽,氣氛一定很 high。

院長的旅行日誌

這篇紀錄了院長歷年的旅行日誌

2016 日本大暴走蜜月之旅

2015 藍寶石公主號 沖繩四天三夜之旅

2015 紐約零下酷寒之旅

2014 東京之旅

2013 美國北卡出差記

網站監控 website uptime checker

監控一直都是個大學問

一般來說有分成

  • 網站監控
  • 系統監控
  • 應用程式監控

這篇只討論網站監控,也就是最簡單的 uptime checker

以下就是院長的體驗報告


Site24x7

Site24x7

優點:

  • 功能很多,包山包海
  • 有 android, ios app

缺點:

  • 沒付錢只能有 5 個 web monitor
  • 沒付錢可以用的進階功能就很少
  • 介面有點老舊,即使最近改版還是有一種老舊風

SiteUptime

SiteUptime

缺點:

  • 超級老舊的介面比 Site24x7 還老舊

Uptime Robot

Uptime Robot

優點:

  • 沒付錢可以用 50 個 web monitor
  • 介面還算先進

缺點:

  • 進階功能看起來很少

StatusCake

StatusCake

優點:

  • 沒付錢可以用無限個 web monitor
  • 介面先進

缺點:

  • 有一個沒法用的 android app

結論

雞尾酒療法,院長用了這兩個,功能較為簡單,但是有大量的 web monitor 可以用

Line Bot Tips

callback url

callback url 只吃 https ,同時憑證還不能是自己簽的,如果只是玩玩不想花錢買憑證可以用 GoGetSSL 的 GGSSL TrialSSL ,跟正常的憑證一樣,只不過是 90 天有效,90 天後就會過期

GGSSL TrialSSL

另外 callback url 一定要加上 port number 即使是標準的 443 port 也一樣

發訊息給 Line Server

訊息要打回 line,要在 line bot 後台建立 IP 白名單。

也就是說沒有固定 IP 的 service 就 bye 啦,像是 GAE。

另外 IP 白名單是用 CIDR 的格式,不過 subnet 是 24 - 30 之間,不同網段就多設幾組。 如果只有 1 個 IP 就設到 30 就好

account type

Line Bot 目前有兩種 account type,分別是 Business Connect 跟 BOT API Trial

Business Connect 是有簽約有繳錢,所以功能比較多

好用的 web tools

協作工具

Lucidchart

mjml.io

  • 目前最好用的線上流程圖工具
  • 可多人協作像 Google Docs 一樣
  • 院長有付費使用的好工具

Email

MJML - The Responsive Email Framework

mjml.io

  • 製作 Responsive Email Template 的好工具

Litmus PutsMail — Test your HTML emails before sending them.

PutsMail

  • 快速地 html 送信工具,直接貼上 html 就可以送信,快速測試做完的 email teamplate

DNS

DNS Check - Free DNS checking tool with IPv6 support - DNSInspect

DNSInspect

  • 檢查 DNS 的設定,最後還會有個評分,可以根據評分的結果來改善目前的 DNS 設定

SSL

Qualys SSL Labs - Projects / SSL Server Test

Qualys SSL Labs

  • 程式 Server SSL 的設定,最後還會有個評分,可以根據評分的結果來改善目前的 Server 設定

GoGetSSL

GoGetSSL

  • 買 SSL 憑證唯一推薦,便宜簽發速度又快,完美

Uptime Checker

StatusCake

StatusCake

  • 沒付錢可以用無限個 web monitor
  • 介面先進

Uptime Robot

Uptime Robot

  • 沒付錢可以用 50 個 web monitor
  • 介面還算先進

更多 uptime checker

社交網站 share page link

透過 html 連結 share 到 social media 比較簡單的方法。

<a href="share_link", target="_blank"></a>

Facebook

http://m.facebook.com/sharer.php?u=<urlencoded_url>&t=<urlencoded_title>   

雖然是 mobile 版的連結,不過桌機會自動轉到桌機版,不過有時候會出槌一直轉到 mobile 版。

最靠譜是用 FB.ui 不過要弄個 app id。

Google+

https://plus.google.com/share?text=<urlencoded_text>&url=<urlencoded_url>

Twitter

https://twitter.com/intent/tweet?text=<urlencoded_text>&url=<urlencoded_url>

Reference

Nginx check header

一般來說保護 RESTful API 最簡單的方法就是把 api key 放在 https header 裡面,然後 ap 再檢查 header api key 是不是合法的。

但是,因為我們的 ap 只有一個 api key ,所以就想用 nginx 來檢查 api key。

做法蠻簡單的

location /api {
	if ($http_x_your_api_key != '1234567890') {
  		return 403;
	}
}

假設 header 是 x_your_api_key ,在 nginx 裡面就用 $http_x_your_api_key 就可以取到 header。

接著就是判斷是否合法,不合法就吐 403 回去。

另外,如果之間吐 403 回去, nginx 會吐預設的 403 html 檔回去。

如果想吐 json 回去,可以定義一個 403 json response

location /api {
	error_page 403 = @403_json;
	if ($http_x_your_api_key != '1234567890') {
  		return 403;
	}
}

location @403_json {
	default_type application/json;
	return 403 '{"error":{"code":"FORBIDDEN"}}';
}

這樣就可以吐 403 json response 回去。

以上

Reference