將 GoDaddy 網域移轉至 Google Domain

Google 推出了新的服務 Google Domain ,讓需要購買網域的人多了一項新選擇,雖然訂價不會是最便宜的,但是有額外免費提供 WHOIS Privacy 資料隱藏、簡易轉址、Email 轉寄等功能,且 Google 的資料中心遍佈世界各地,服務的穩定性與速度自然是不須質疑。雖然目前仍為測試版,但實際上該有的功能都已可以正常使用。本篇將以 GoDaddy 為例,說明如何將網域轉入 Google Domain。

Read more “將 GoDaddy 網域移轉至 Google Domain”

[PHP] 提升 json_encode() 資料可讀性

PHP 可藉由 json_encode()json_decode() 來編碼與解碼 JSON 格式的資料,在一般情況下不需要特別給予任何參數,但如果將 JSON 格式資料直接儲存的話,預設是儲存一行文,在不靠任何工具的前提下僅以肉眼辨識會顯得有點吃力。

$data = [
    '5b8e2e456106f8.12710761' => [
        'id' => '5b8e2e456106f8.12710761',
        'description' => '',
        'options' => [],
        'size' => 1243916,
        'create_at' => '2018-09-04 15:04:02'
    ]
];
echo json_encode($data);

 

輸出如下:

{"5b8e2e456106f8.12710761":{"id":"5b8e2e456106f8.12710761","description":"","options":[],"size":1243916,"create_at":"2018-09-04 15:04:02"}}

 

如果想要提升 JSON 格式資料的可讀性,只需要將 json_encode() 的第二個參數設為 JSON_PRETTY_PRINT 即可。

echo json_encode($data, JSON_PRETTY_PRINT);

 

輸出:

{
    "5b8e2e456106f8.12710761": {
        "id": "5b8e2e456106f8.12710761",
        "description": "",
        "options": [],
        "size": 1243916,
        "create_at": "2018-09-04 15:04:02"
    }
}

 

PHP 5.6.6 以上可選擇的參數共有 11 個,詳細說明可見 PHP 官網 

 

 

 
 

[Ubuntu] 安裝 Apache HTTP Server 2.4 + PHP 7.1 + PHP-FPM

操作環境:
OS: Ubuntu Server 16.04.3 LTS amd64
Apache Version: 2.4.27
PHP Version: 7.1.8

 

Step 1. 更新 APT Source,取得最新版套件資訊

# 安裝software-properties-common (已安裝者可跳過此步驟)
sudo apt-get install -y software-properties-common

# 加入 Apache PPA
sudo add-apt-repository -y ppa:ondrej/apache2

# 加入 PHP PPA
sudo add-apt-repository -y ppa:ondrej/php

# 更新套件清單
sudo apt-get update

Read more “[Ubuntu] 安裝 Apache HTTP Server 2.4 + PHP 7.1 + PHP-FPM”

[Bootstrap] Modal 自動設定最大高度

Bootstrap 有個 modal 懸浮窗

如果裡面內容過多,bootstrap 並不會把內容限縮在 modal-body 裡

為了美觀,所以需要 CSS 的 max-height 屬性套用至 modal-body 上

如此一來內容過長造成溢出時,modal-body 會顯示捲動欄

同時 modal-header 與 modal-footer 的內容亦會固定在視窗上

網站上可能會用到多個 modal ,一個一個設定的話要自己去抓數字,很麻煩

所幸 bootstrap modal 有 shown.bs.modal 這個 event 可以使用

所以寫了一段全部 modal 都適用的 code

$('.modal').on('shown.bs.modal', function(){
    var margin_vertical = parseInt( $(this).find('.modal-dialog').css('margin-top') ) + parseInt( $(this).find('.modal-dialog').css('margin-bottom') ) || 0;
    var height_header   = parseInt( $(this).find('.modal-header').css('height') ) || 0;
    var height_footer   = parseInt( $(this).find('.modal-footer').css('height') ) || 0;
    var height_body     = ( window.innerHeight - height_header - height_footer - margin_vertical - 10 ) + 'px';
    $(this).find('.modal-body').css('max-height', height_body).css('overflow', 'auto');
});

 

關於多扣 10px 的部分,因為有其他誤差值,造成 body 的捲動欄會出現

個人猜想可能是因為其他部分 box-model 的關係導致 (border-width 等 blahblah)

不過我也抓不到就是了QQ,所以就偷懶多扣 10px 混過去 XD

至於為什麼會用 shown.bs.modal 這個event,而不是 show.bs.modal

是因為 modal 顯示前的的 css height 是 0

show.bs.modal 觸發的時機是顯示前,而 shown.bs.modal 則是顯示後

因此要等modal顯示時,偵測到的css height才是正確的

而這裡又有一個小小的缺點

就是當你使用 fade-in & fade-out 效果時

在動畫結束前,body 的捲動欄會出現

直到動畫結束後觸發了 shown.bs.modal event

才會顯示成正常的樣子

小弟才疏學淺,這個問題還不知道要怎麼解決

或許加快 css animation speed 做為障眼法混過去勉強可行

不過因為這種情況只會在該 modal 第一次顯示時才會出現

之後只要 browser inner height 沒有變,都不會出現

所以就將就一下囉~

順帶一提,如果你想要能限制最大高度,又能固定佔滿版,只要將第六行的「max-height」改成「height」即可。如下所示

$(this).find('.modal-body').css('height', height_body).css('overflow', 'auto');

 

Update:
2017-05-10: 利用 || 0 預防取回高度值為 nan 的情況下出錯。

[jQuery] 重設HTML select box

舊式做法是將selectedIndex設為0
自jQuery 1.6開始支援使用.prop()這支API來操作selectedIndex
HTML

<select id="name">
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

 

jQuery

$('#name').prop('selectedIndex', 0);