在 bootstrap 下使用的 datetime picker 有不少, 不過簡單一點的可以參考這個:
http://www.malot.fr/bootstrap-datetimepicker/
主要是代碼短小, 使用起來也十分容易, 操作也很順手, 是個方便好用的 datetime picker.
若有在查找 bootstrap 的 datetime picker 這個會是一個不錯的選擇. (同時支援 bootstrap 2 與 bootstrap 3)
在 bootstrap 下使用的 datetime picker 有不少, 不過簡單一點的可以參考這個:
http://www.malot.fr/bootstrap-datetimepicker/
主要是代碼短小, 使用起來也十分容易, 操作也很順手, 是個方便好用的 datetime picker.
若有在查找 bootstrap 的 datetime picker 這個會是一個不錯的選擇. (同時支援 bootstrap 2 與 bootstrap 3)
這個專案組件很可愛, 是一個時間選取器, 呈現的介面就是一個時鐘, 操作起來還蠻方便的, 另外也在手機上測試操作看看, 也是一樣方便順手, 蠻有意思的.
有需要使用到 timepicker 的場合, 可以試看看這組 clockpicker , 很不錯.
有 bootstrap版本: http://weareoutman.github.io/clockpicker/
還有 jQuery 版本: http://weareoutman.github.io/clockpicker/jquery.html
在 bootstrap 下, image 可以很容易地使用 img-responsive class 進行 image 的 responsive 設定, 但是 embed 或是 video 如何處理呢?
在 bootstrap 3.2 起, 增加了好用的 embed-responsive 功能, 簡單說明語法如下:
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe> </div>
在外部建立一個 div, 包含了 embed-responsive 與 embed-responsive-16by9 or embed-responsive-4by3 class, 然後在 video 或 iframe 包含 embed-responsive-item class, 就可以順利地讓 embed video 能有完整地 responsive 功能了.
使用 PHP 將圖檔上傳至 Microsoft Azure 雲端空間供圖檔應用, 有以下幾個步驟:
1. 建立 Azure 的 Storage Account , 並取得 key 與建立 container (也可以使用程式建立)
2. 安裝 Azure PHP Client: http://azure.microsoft.com/en-us/documentation/articles/storage-php-how-to-use-blobs/
2-1. 先安裝 Git
2-2. 依說明建立 composer.json 與下載 composer.phar (http://getcomposer.org/composer.phar), 並進行安裝: php composer.phar install
2-3. 完成程式下載
3. 在 php 程式碼中引入對應程式碼, 以上傳圖檔為例, 程式碼如下:
require_once 'vendor/autoload.php'; use WindowsAzure\Common\ServicesBuilder; use WindowsAzure\Common\ServiceException; use WindowsAzure\Blob\Models\CreateBlobOptions; $connectionString = "DefaultEndpointsProtocol=https;AccountName=[storage account name];AccountKey=[storage access key]"; $blobRestProxy = ServicesBuilder::getInstance()->createBlobService($connectionString); $content = fopen("myfile.jpg", "r"); $blob_name = "myfile.jpg"; $createBlobOptions = new CreateBlobOptions(); $createBlobOptions->setBlobContentType("image/jpeg"); try { //Upload blob $blobRestProxy->createBlockBlob("[container name]", $blob_name, $content, $createBlobOptions); echo "ok"; echo "<img src='http://[storage account name].blob.core.windows.net/[container name]/".$blob_name."' />"; } catch(ServiceException $e){ // Handle exception based on error codes and messages. // Error codes and messages are here: // http://msdn.microsoft.com/library/azure/dd179439.aspx $code = $e->getCode(); $error_message = $e->getMessage(); echo $code.": ".$error_message."<br />"; }
其中範例中的程式, 並沒有指定對應 blob 中的 Content-Type, 會使用預設的 application/octet-stream , 其實在網頁使用並無影響, 但若是直接連結會變成是下載的狀況, 比較不適合, 而且也應該是指定為正確的 Content-Type 較佳.
若有需要使用到 php 上傳圖檔至 Azure storage, 可以參考上面做法進行上傳應用.
相關資料:
Put Blob: https://msdn.microsoft.com/library/azure/dd179451.aspx
使用 ASP.NET 版本參考這篇:
http://blogs.msdn.com/b/ericsk/archive/2013/12/18/php-on-windows-azure-windows-azure-blob-storage.aspx
大型的雲端服務廠商, 不用多做介紹, 大家都知道了, 如 Amazon web service, Windows Azure, 等, 今天介紹這家是在海上的 DigitalOcean, 價格真的很便宜, 非常適合用來做 staging 或是 lab, 與開發環境.
記得從我的 ref 連結註冊, 你一開始可以多USD10, https://www.digitalocean.com/?refcode=c5fa03fa1aa6
特別的地方是他只有 VM, 以最低方案來看, 512MB RAM, 1Cores CPU, 20GB SSD, 1TB的資料傳輸, 每個月只需要5美元, 而以小時計是每小時只要 0.007美元, 真的超級划算的.
管理介面可以透過他的 web console 登入主機, 或用自己的 ssh 都可以, 和 aws 差異是沒有外部的防火牆或網管政策, 所以記得要自行用 iptables 或類似的內建防火牆進行保護.
若有線上雲端主機的需求, 尤其又是或測試或是開發應用的朋友們, 可以多加利用.
PS, 它的付款方式除了信用卡外, 還有 Paypal 更方便呢!
自己架的網站, 有時候沒有什麼監控, 導致中斷也不知道, 往往到下次自己在使用的時候, 或是檢視 GA報表的時候才發現, 的確很囧.
使用免費的工具來自己監控, 以利能第一時間取得資訊. 這個網站服務提供了免費的監控服務, 大家可以試看看. 早期使用的免費工具, 大多是限制監控點的數量, 只有一個, 十分不便, 當然, 服務也是為了收費, 所以有一些限制很正常, 不過這個 monitor.us 提供的更多, 以下是他的付費與免費的比較:
(以上內容引用自官方網站: http://www.monitor.us/en/about-monitor-us/monitis-premium-product )
主要差異在於監控的頻率與保存的時間, 而沒有監控數量的限制(上面的monitor location指的是測試發起的地點, 不是監控項的數量), 不過若是個人或一般小型商業應用, 應該是很足夠的.
除了 WEB(HTTP、HTTPS) 的監控外還有許多免費監控項目, 如下:
Uptime monitors: Ping、DNS、FTP、TCP、SSH、SIP、UDP、SMTP、POP3、IMAP、MySQL、SOAP
Server/Device monitors: CPU、Memory、Drive、Linux load、Process、Server events、SNMP、Ping、HTTP、HTTPS
其他付費的還有 Application monitors, Cloud monitors 等, 真的很豐富.
而管理介面的圖表也十分易讀好管理, 最棒的地方, 是他還有手機版本可供管理及查詢(還有push notification通知訊息)
Android 版: https://play.google.com/store/apps/details?id=com.monitorus.android.mobile
iOS版: https://itunes.apple.com/us/app/monitor.us-free-web-server/id508012934?mt=8
快來建立一個自己的監控的服務吧.
個人用雲端空間, 大家都很熟悉了.
像是 Dropbox, Google Drive, OneDrive, Box, Mega, Copy 等, 相信大家都不陌生, 不過有個挑戰者來了, Amazon CloudDrive.
先來看看各家方案:
Dropbox: https://www.dropbox.com/plans
免費 2GB/每月USD9.99 1000GB
Google Drive:
免費 15GB/每月USD1.99 100GB/每月USD9.99 1TB
OneDrive: https://onedrive.live.com/about/zh-tw/plans/
免費 15GB/每月NTD60 100GB/每月NTD219 1TB
Box: https://www.box.com/pricing/
免費 10GB/每月USD10 100GB
Mega: http://mega.and1.tw/zh_tw/
免費 50GB/每月NTD399 500GB/每月NTD799 2TB/每月NTD1199 4TB
Copy: https://www.copy.com/page/home;section:plans
免費 15GB/每月USD4.99 250GB/每月USD9.99 1TB
再來就是有趣的 Amazon CloudDrive: https://www.amazon.com/clouddrive/home
沒有免費/每年USD11.99 5GB+Photo無限/每年USD59.99 無限
真的是很破壞性的價格, 當然還有大陸的許多空間沒有列入, 不過以上面個人使用的狀況來看, Dropbox 和 Google Drive 、One Drive、Box都有方便的同步工具, 而目前 Amazon Cloud Drive 僅有上傳工具, 目前尚沒有好用的同步工具.
但就價格來看, 真的是很破壞性的價格, 但使用在工作上, 似乎又不是那麼便利.
若是後面它能有更棒的同步工具, 相信會有另一番競爭力.
Mysql 在字串欄位比對上, 有個奇妙的狀況. 當然, 在正常一般狀況下不太容易發生.
某欄位 f1 為 varchar 或 char , 而在 where 條件下, 使用了
where f1=’sometext’
這樣沒有問題.
但若是使用了
where f1=0
會發生什麼事呢? 結果是全部成立.
根據 f1=0 來看, mysql 會先將 f1 欄位轉為數字, 而將字串轉為數字, 在 mysql 中, 會是 0 的結果, 導致會全部成立. 檢查以下語法:
SELECT cast( 'test string' AS SIGNED )
結果會是 0 , 也就解開了這個問題.
另外可以參考一下 cast 的語法:
http://dev.mysql.com/doc/refman/5.6/en/cast-functions.html
其 case ( data as type ) 中的 type, 可以為以下幾種:
BINARY[(N)]
CHAR[(N)]
DATE
DATETIME
DECIMAL[(M[,D])]
SIGNED [INTEGER]
TIME
UNSIGNED [INTEGER]
供各位在不小心, 使用了等於零在判斷條件時, 發生問題的參考.
台灣水庫蓄水量在這裡: http://water.taiwanstat.com/
資料來源是從經濟部水利署來: http://www.wra.gov.tw/
以視覺化的方式來將資料呈現出來, 很棒的作法, 也讓大家能快速理解水庫蓄水總量, 存量資訊.
大家可以多多利用.
繼上次 facebook 取得大頭圖 (link)後, 這次來說明取得 Google Plus大頭圖的方式.
需要先取得一個 Google Plus API 的 key (目前共有4種, server、browser、android、ios), 依實際需求來使用, 若要方便測試, 可以建立 server api key, 並設限 ip 0.0.0.0/0 全開放, 或是 browser api key 並設限為不限網域全開放.
接下來我們將使用的 Google Plus Api 是這個: plus.people.get, 參考以下網址:
http://developers.google.com/apis-explorer/?hl=zh_TW#p/plus/v1/plus.people.get
由於我們要取得大頭圖, 所以 fields 是使用 image, 可以獲得 api 存取需要以下網址:
https://www.googleapis.com/plus/v1/people/{user_google_plus_id}?fields=image&key={YOUR_API_KEY}
接下來訪問這個 url:
https://www.googleapis.com/plus/v1/people/106189723444098348646?fields=image&key={YOUR_API_KEY}
就可以取得如下回應:
{ "image": { "url": "https://lh3.googleusercontent.com/-Y86IN-vEObo/AAAAAAAAAAI/AAAAAAADO1I/QzjOGHq5kNQ/photo.jpg?sz=50", "isDefault": false } }
這個大頭圖的 url 就會出現囉. 大家猜一下是哪位呢?
參考資料:
http://stackoverflow.com/questions/17962759/is-it-possible-to-create-an-avatar-profile-picture-link-from-a-google-id
https://developers.google.com/+/api/oauth?hl=zh-tw