Nginx 搭配 Laravel PHP Framework 設定

September 12, 2013, 12:45 am

≫ Next: CSS Clear Fix 小技巧

≪ Previous: Postfix mailbox 設定

$

0

0

筆記在 Nginx 設定 Laravel 專案，現在的 PHP Framework 都將 query string 整個導向首頁 index.php，就拿 CodeIgniter 來說，在 Apache 只要設定

RewriteEngine on
RewriteBase /
RewriteCond $1 !^(index\.php|images|robots\.txt|$)
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

在 Nginx 內只要透過 try_files 即可

location / {
    try_files $uri $uri/ /index.php
}

正常來說 Laravel 直接用上面的設定即可，但是我發現在 $_GET 這全域變數會拿到空值，解法也很簡單，在 Nginx 將 query string 變數帶到 index.php 後面即可

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

Related View

• PHP MVC Framework 搭配 Nginx + PHP-FPM 設定檔 (0)
• 輕量級 A Clean & Classy PHP Framework Laravel 簡介安裝 (0)
• 2012 PHPConf RESTful API Design & Implementation with CodeIgniter PHP Framework (5)
• Nginx + phpMyAdmin 搭配 SSL 設定 (2)
• Install Nginx + spdy module on Ubuntu or Debian (0)
• 在 Fedora 或 Amazon Linux AMI 架設 Nginx + PHP FastCGI (1)
• 在 Ubuntu 10.10 (Maverick) 架設 Nginx + PHP FastCGI (3)
• Nginx 判斷檔案是否存在 (0)
• nginx 1.4.0 釋出並支援 SPDY (3)
• HAproxy 搭配 Nginx port redirect issue (0)

---

CSS Clear Fix 小技巧

September 15, 2013, 8:19 am

≫ Next: CodeIgniter REST Server with Backbone.js Issue

≪ Previous: Nginx 搭配 Laravel PHP Framework 設定

$

0

0

記的之前 evenwu 為了找尋外包 CSS 人才，出了一份考題，有提供上機考，真是佛心來的，還給用 Inspector 或上網。其中一題就是

第二題、如果一個X元素內的子元素通通 float: left 請問X元素本身會有什麼狀況？如果我要在X元素內下背景，卻沒有顯示，請問如何解決？

解決方式就是實作本身 clear-fix，或者是在元素後加上 clear: both 的標籤，大概就是底下的樣子

<div class="container">
    <div class="floated"></div>
    <div class="floated"></div>
    <div class="floated"></div>
    <p style="clear:both"></p>
</div>

如果是要在 container 實作 clear-fix，就必須透過 css before after。

.clear:before, .clear:after {
    content: "";
    display: table;
}
.clear:after {
    clear: both;
}

這樣只要在任何 element 加上 clear css 就可以了

Related View

• CSS 垂直置中解法 (4)
• 在 IE8 FireFox Chrome CSS 置中解決方法 (1)
• Html5 模板架構(Boilerplate) (0)
• Front End Engineer 前端設計師必備工具 Live.js (0)
• CSS 3 圓角 border-radius 介紹 (0)
• 利用 IE7 CSS 2.0 tbody 解決 IE6 hover 問題 (2)
• 利用 jQuery 動態改變網站 CSS (0)
• [CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript (8)
• 加速開發 CSS 工具: Sass (1)
• LiveReload 網頁程式設計師必備工具 (4)

CodeIgniter REST Server with Backbone.js Issue

September 19, 2013, 9:20 pm

≫ Next: RequireJS 搭配 CKEditor

≪ Previous: CSS Clear Fix 小技巧

$

0

0

如果有在用 CodeIgniter 來當作 REST Server 的朋友們，我相信都會找到 philsturgeon 所寫的 codeigniter-restserver，此套件幫你完成底層 API Response 動作，讓你可以輕易處理 REST URL。但是如果拿這套程式碼來搭配 Backbone.js 你會遇到拿不到 POST 或 PUT 變數問題，作者來一一描述。

使用 Backbone.js 來取代 jQuery AJAX 方式來跟 REST Server 溝通，當然 Backbone.js 底層還是透過 jQuery AJAX API 來傳遞，首先我們建立一個簡易的 Backbone model

// a simple backbone model
var User = Backbone.Model.extend({
    urlRoot: '/user',
    defaults:{
        'name':'appleboy',
        'age': 31
    }
});
var user1 = new User();
var user2 = new User();
var user3 = new User();

你可以建立多個使用者，或是搭配 Backbone Collection 來顯示，到這邊是沒有問題，接著要跟伺服器做 GET PUT POST DELETE 的動作，也就是透過底下 Backbone 操作

user1.fetch() // get user data
user1.save() // create or update user
user1.destroy() // delete user

這邊就會是問題所在，你會發現 backbone 丟給 REST request 的內容不會是像 jQuery AJAX 包在 parameter 內，而是在 Request Payload 內寫入 {‘name’:'appleboy’, ‘age’: 31}，所以我們在 REST Server 會一直存取不到任何資料

class User extends REST_Controller
{
    public function index_get()
    {
        echo $this->get(null);
    }

    public function index_post()
    {
        echo $this->post(null);
    }

    public function index_put()
    {
        echo $this->put(null);
    }

    public function index_delete($id)
    {
        echo $this->put(null);
    }
}

問題出在 REST_Controller.php 處理 POST 函數

/**
 * Parse POST
 */
protected function _parse_post()
{
    $this->_post_args = $_POST;

    $this->request->format and $this->request->body = file_get_contents('php://input');
}

只要將上面函數改成

/**
* Parse POST
*/
protected function _parse_post()
{
    $this->_post_args = $_POST;

    $this->request->format and $this->request->body = file_get_contents('php://input');

    if (!empty($this->request->body)) {
        $this->_post_args = array_merge($_POST, json_decode($this->request->body, true));
    }
}

這樣 POST 就沒有問題了，接著如果 PUT 或 DELETE 也遇到此問題，就按照上述改相關函式。晚點發 pull request 給作者，只是不知道作者會啥時處理。

Related View

• Backbone Routing pushState in IE (0)
• Javascript 前端工具 Backbone.js Framework 初學介紹 (5)
• Cross Site Request Forgery in JS Web Apps and CodeIgniter PHP Framework (0)
• Backbone.js rewrite into CoffeeScript? (0)
• Backbone.js Model and Collection Tregger Event (0)
• [CodeIgniter] 利用 jQuery 簡易驗證使用者帳號/Email (8)
• Backbone.js Event 事件介紹 (2)
• Backbone.js event bind 新功能 listenTo and stopListening (0)
• 深入探討 CodeIgniter Input Class 核心程式流程 (6)
• jQuery stopPropagation 和 stopImmediatePropagation 比較 (1)

RequireJS 搭配 CKEditor

September 24, 2013, 7:20 pm

≫ Next: 2013 PHPConf Introduction to Gearman in PHP

≪ Previous: CodeIgniter REST Server with Backbone.js Issue

$

0

0

網頁編輯器大家推薦的就 CKEditor 或 TinyMCE，兩套各有優缺點，CKEditor 雖然功能最完整，也是最肥了，雖然官網可以自己挑選 plugin 來簡化肥肥的 source code。如果是單純用在後台管理，我還是推薦 CKEditor，給前端使用者的話，就推薦 TinyMCE 了，畢竟前台還是要以輕量為主。

CKEditor 用法很簡單，官網有提供搭配 jQuery Adapter 的方法，只要 include 下列三個檔案即可。

<script src="jquery.js"></script>
<script src="ckeditor.js"></script>
<script src="adapters/jquery.js"></script>

接著在程式碼載入 CKEditor

$('textarea.editor').ckeditor();

或

$.when( $( '.editors' ).ckeditor().promise ).then( function() {
    // Now all editors have already been created.
} );

那該如何跟 RequireJS 整合，首先設定套件相依性，由於會用到 jQuery

require.config({
  paths: {
    jquery: '../vendor/jquery/jquery',
  },
  shim: {
    'libs/ckeditor/ckeditor': {
        exports: 'CKEDITOR'
    },
    'libs/ckeditor/adapters/jquery': {
        deps: ['jquery', 'libs/ckeditor/ckeditor']
    }
  },
  urlArgs: (new Date()).getTime()
});

接著要使用的時候透過底下載入即可

define([
    'jquery',
    'libs/ckeditor/ckeditor',
    'libs/ckeditor/adapters/jquery'
    ], function($) {
    $('textarea.editor').ckeditor();
});

到這邊沒有問題，接著搭配 r.js，將全部 Javascript 編譯整合成單個檔案，這時候你會發現編譯出來的檔案，無法載入 CKeditor，原因在於 CKeditor 會動態讀取 config.js 及相關設定檔，但是找不到路徑，所以必須在 index.html 內加入 CKEditor 全域路徑變數

window.CKEDITOR_BASEPATH = window.location.pathname + 'assets/js/libs/ckeditor/';

這樣編譯完成的檔案就可以順利載入 CKEditor。

Ref:
How to load ckeditor via requirejs

Related View

• Remove Google CDN reference for jQuery? (6)
• Coding on workspace of Chrome Developer tools (2)
• [編輯器] CKeditor 更換 background-color and font-size (1)
• JavaScript Reference Select and Option objects 用法介紹 (0)
• jQuery 偵測瀏覽器版本, 作業系統(OS detection) (1)
• jQuery Migrate 1.1.0 Released 注意事項 (0)
• 如何使用 Apache Module mod_mime (0)
• Javascript 前端工具 Backbone.js Framework 初學介紹 (5)
• 2011 OSDC Day 1 筆記 (3)
• [jQuery]判斷 checkbox 是否選取，實現全選跟全部取消 (4)

2013 PHPConf Introduction to Gearman in PHP

October 4, 2013, 11:21 pm

≫ Next: HAProxy 搭配 CodeIgniter 取使用者真實 IP

≪ Previous: RequireJS 搭配 CKEditor

$

0

0

今天 PHPConf 簡報檔，介紹 Gearman in PHP 應用，歡迎自取，有問題可以留言

Related View

• ICOS 2010 Introduction to CodeIgniter PHP MVC Framework (4)
• How to install Gearman on Ubuntu or Debian with MySQL 安裝測試篇 (1)
• 如何善用 CodeIgniter Library 及擴充核心 extend core class (0)
• CodeIgniter 尋找新東家 (2)
• 2012 PHPConf RESTful API Design & Implementation with CodeIgniter PHP Framework (5)
• [CodeIgniter] 簡單擷取 html 原始碼(PHP Simple HTML DOM Parser) (1)
• 快速修正專案 PHP Coding Standards (2)
• [新聞] CodeIgniter 發佈 2.0.0 版 Release (2)
• PHP 多國語系製作 i18n library 筆記 (二) (0)
• PHP CodeIgniter Google URL Shortener API Library (0)

HAProxy 搭配 CodeIgniter 取使用者真實 IP

October 8, 2013, 7:57 pm

≫ Next: Drone.io 搭配 Ruby 環境測試

≪ Previous: 2013 PHPConf Introduction to Gearman in PHP

$

0

0

前端 Load Balance 首選就是 HAProxy，後端架設 Nginx 搭配 CodeIgniter，紀錄使用者 IP 時，Nginx 總是只有抓到內部 IP 192.168.x.x，而無法抓到真實 Public IP，要抓到 Public IP 必須修改 HAProxy + Nginx 設定檔，HAProxy 只要在 Backend 地方加入 forward 選項，這樣 HAProxy 會送 X-Forwarded-For header 給後端 Nginx。

option forwardfor

接著設定 Nginx 部份，必須編譯 ngx_http_realip_module 模組，在 nginx.conf 加入

set_real_ip_from 127.0.0.1;
real_ip_header X-Forwarded-For;

這樣就可以拿到真實 IP 了，最後在 CodeIgniter 找到 config.php 設定檔

/*
|--------------------------------------------------------------------------
| Reverse Proxy IPs
|--------------------------------------------------------------------------
|
| If your server is behind a reverse proxy, you must whitelist the proxy IP
| addresses from which CodeIgniter should trust the HTTP_X_FORWARDED_FOR
| header in order to properly identify the visitor's IP address.
| Comma-delimited, e.g. '10.0.1.200,10.0.1.201'
|
*/
$config['proxy_ips'] = '192.168.1.100,192.168.1.101,192.168.1.102';

將 proxy_ips 設定好即可

Related View

• HAproxy 搭配 Nginx port redirect issue (0)
• Galera Cluster for MySQL Multi-master Replication (1)
• [FreeBSD & Linux]網站分流：簡易架設 HAProxy 伺服器 (1)
• [FreeBSD]high performance caching reverse proxy: Varnish (安裝架設篇) (9)
• PHP MVC Framework 搭配 Nginx + PHP-FPM 設定檔 (0)
• Nginx 判斷檔案是否存在 (0)
• [轉貼] RoR：Ruby on Rails的部署方案選擇 (0)
• CodeIgniter REST Server with Backbone.js Issue (0)
• Jenkins + Nginx User Auth (0)
• [CodeIgniter] 利用 jQuery 簡易驗證使用者帳號/Email (8)

Drone.io 搭配 Ruby 環境測試

October 16, 2013, 7:54 pm

≫ Next: Gitlab CE + Gitlab CI 打造版本控制及自動測試流程

≪ Previous: HAProxy 搭配 CodeIgniter 取使用者真實 IP

$

0

0

相信現在 Git 已經是大家共通的版本控制工具，每當專案有新的 commit，我們可以透過 Travis 來幫忙做測試，但是 Travis 真的只有支援測試而已，如果測試成功想要進一步 Deploy 到任何機器或者是繼續做任何動作，這些都不支援的，那國外有些 Service 可以整合 Github 或 Bitbucket Project 幫忙做到自動測試及 Deploy，比較常見的就是 Codeship，這服務非常強大，整合了 Heroku，App Engine，Nodejitsu .. 等服務，Deploy 也支援 Fabric, Puppet, Shell script 等等，這家的收費是看每個月做了多少次編譯測試動作，最便宜的方案每個月 $9 美金，只能編譯 50 次。

這時候就要找看看有沒有窮人編譯 + Deploy 的服務，看到網路上也有人推薦 Drone.io 服務，雖然沒有像 Codeship 支援這麼強大，但是最基本的功能還是有啦，最主要免費專案是 Unlimited Builds，看到這個就超爽了，主要收費來源就是看你的專案是不是 Private，如果都是開放原始碼，就可以持續使用免費服務，此網站一樣支援 Github 或 Bitbucket 專案導入，另外也支援 SSH Deploy，Heroku，AppEngine 等。

Drone.io Ruby 編譯環境是透過 rbenv 來管理，如果安裝了任何 Ruby 工具，像是 Compass 等，要使用 Compass command 就必須加上底下指令

$ gem install compass
$ rbenv rehash

其實這還蠻不方便的，因為同樣的測試環境，在 Travis 是可以編譯成功的，由於現在專案內會用到大量工具，像是 CoffeeScript，Compass，Handlebars 等，所以這些工具產生的 js, css, *.handlebars 檔案，都不應該放到專案裡面，而是在開發專案的時候，自動幫忙產生，可以透過 GruntJS 工具來整合。整合方式可以參考 2013 Javascript Conference: 你不可不知的前端開發工具

可以參考編譯的過程，如果編譯過程有點多，會造成 Browser 有點小當，所以建議還是關掉，等跑完，不管成功或失敗，都是寄信通知，如果成功就會繼續跑 Deploy 流程。

Related View

• 2013 Javascript Conference: 你不可不知的前端開發工具 (5)
• 高雄 KSDG 分享: 打造團隊共同開發環境 (0)
• Bitbucket 開始支援 Git Repository (4)
• 轉移 Github 上的 Private Repository 到 BitBucket … (0)
• 在 git Commit 之前檢查 PHP 是否有錯誤 (0)
• 新人 Git 版本控制教學 (12)
• 在 CentOS 上面安裝 Ruby 環境 (0)
• Git Submodule 介紹與使用 (2)
• Git denying non-fast forward 問題 (2)
• Github 支援 SVN Client (0)

Gitlab CE + Gitlab CI 打造版本控制及自動測試流程

November 1, 2013, 2:00 am

≫ Next: Jenkins + Nginx User Auth

≪ Previous: Drone.io 搭配 Ruby 環境測試

$

0

0

Git 版本控制不管在嵌入式或 Web 領域都是很受歡迎的工具，尤其是不會遇到像 svn 搞爛 source tree，然後又要 Google 一堆解法。一般公司入門大概就是買 Github 服務，一個月才五美金，可以提供五個 Private Project，當然你也可以不付錢，而去使用 Bitbucket，好處就是無限的 Private Project，唯一的限制就是開發者數量，只能在五個以內，設定超過五個，就不給 push 或 pull 了，完成版本控制後，接著就是專案的自動測試，在 github 上面，推的就是 travis-ci，這也是全部 open source 專案的喜好，你會發現大部分的專案都會放上 .travis.yml，來告訴 travis 需要的測試步驟，測試步驟完成後，就要將 source code deploy 到 Amazone 或其他雲端服務，到這個服務基本上都要收費了，所以上一篇有介紹 Drone.io 服務，可以自動測試加上 Deploy 到遠端機器，不過缺點就是不支援 Private Project，要的話就是要收費。

所以想要版本控制 -> 自動化測試 -> 發佈程式，這整個流程，其中任何一個流程都有可能收費，加上公司開發的程式，一定不可能是 Public，所以被收費肯定很正常，為了要找到免費的方案，所以自己架設等於是最快的，這邊就推薦 GitLab，這介面跟 Github 還蠻接近的，功能也很完整，大家可以試試看，自動化測試部份，就直接用 GitLab CI，比較不方變得地方就是，自動化測試完成後，不會寄信通知。官方有提到歡迎任何人送 PR Feature。GitLab + CI 架設完成，大概就可以捨棄 Gitlab + travis 或 Drone.io。這是窮人作法，如果有預算的話，還是買線上服務，真的有很棒的 Deploy 及檢測程式碼的服務。

Related View

• Bitbucket 開始支援 Git Repository (4)
• 轉移 Github 上的 Private Repository 到 BitBucket … (0)
• Jenkins + Nginx User Auth (0)
• 新人 Git 版本控制教學 (12)
• Drone.io 搭配 Ruby 環境測試 (1)
• Github 支援 SVN Client (0)
• Git denying non-fast forward 問題 (2)
• [Git] 版本控制: 如何使用標籤(Tag) (8)
• Git Submodule 介紹與使用 (2)
• 在 git Commit 之前檢查 PHP 是否有錯誤 (0)

---

Jenkins + Nginx User Auth

November 12, 2013, 6:57 pm

≫ Next: 將 Backbone Framework 升級到 1.1.0 注意事項

≪ Previous: Gitlab CE + Gitlab CI 打造版本控制及自動測試流程

$

0

0

Jenkins CI 是一套非常好的 Job 執行 Tool，可以幫忙跑專案測試，測試完成後繼續 Deploy 到相對應的伺服器，也可以自動寄信給開發者或者是指定的內部人員。在 Ubuntu 或 Debian 安裝方式非常簡單，按照下述操作就可以簡易架設完成

$ aptitude -y install openjdk-7-jre openjdk-7-jdk
$ wget -q -O - http://pkg.jenkins-ci.org/debian/jenkins-ci.org.key | sudo apt-key add -
$ sh -c 'echo deb http://pkg.jenkins-ci.org/debian binary/ > /etc/apt/sources.list.d/jenkins.list'
$ aptitude -y update
$ aptitude -y install jenkins

安裝完成預設是 8080 port 如果要改成其他 port，或許你有裝 Gitlab 你會發現 8080 已經被佔用了，請修改 /etc/default/jenkins，將 HTTP_PORT=8080 改成你想要的 port 即可。這時候請用 netstat -tanp | grep 8088 指令觀看服務是否有跑起來

tcp6  0  0 0.0.0.0:8088  :::*     LISTEN      31761/java

服務有正確跑起來，並且 Listen 在 0.0.0.0，如果你直接用瀏覽器打開 http://your_ip:8088，就可以看到 Jenkins 首頁，完全無任何認證，任何人都可以使用此網站，當然可以啟動 Jenkins 內建的使用者認證，設定後會發現一般使者還是可以看到 detail Job，比如說誰 commit 了 code … 等等，所以這邊介紹如何搭配 Nginx 的 User Auth 機制。

首先必須先把 IP 設定成只有 Listen 127.0.0.1，避免外面的人直接打 IP:PORT 連到網站，一樣設定 /etc/default/jenkins

JENKINS_ARGS="--httpListenAddress=127.0.0.1 --webroot=/var/cache/jenkins/war --httpPort=$HTTP_PORT --ajp13Port=$AJP_PORT"

完成後請重新啟動 Jenkins，接著搭配 Nginx 用 Proxy 方式來導向 Jenkins 服務

upstream app_server {
    server 127.0.0.1:8088 fail_timeout=0;
}

server {
    listen 80;
    server_name xxxx.com;

    location / {
        proxy_redirect     off;

        proxy_set_header   Authorization $http_authorization;
        proxy_pass_header  Authorization;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwared-User  $http_authorization;
        proxy_max_temp_file_size 0;
        if (!-f $request_filename) {
            proxy_pass http://app_server;
            break;
        }
    }
}

設定後請重新啟動 Nginx，這樣就可以直接使用 80 port 來瀏覽 Jenkins，最後搭配 Nginx Auth Module，只要在 Location 加入兩行:

auth_basic "Restricted";
auth_basic_user_file /etc/nginx/.htpasswd;

產生帳號密碼可以透過底下指令:

$ htpasswd -c /etc/nginx/.htpasswd username

一樣重新啟動 Nginx 後，再度瀏覽網頁，就會跳出 popup 視窗，請你輸入密碼，這樣就可以防止任何人看到資料了。

Related View

• Gitlab CE + Gitlab CI 打造版本控制及自動測試流程 (2)
• 在 Ubuntu 10.10 (Maverick) 架設 Nginx + PHP FastCGI (3)
• PHP MVC Framework 搭配 Nginx + PHP-FPM 設定檔 (0)
• Install Nginx + spdy module on Ubuntu or Debian (0)
• Nginx + phpMyAdmin 搭配 SSL 設定 (2)
• 在 Fedora 或 Amazon Linux AMI 架設 Nginx + PHP FastCGI (1)
• nginx 1.4.0 釋出並支援 SPDY (3)
• Nginx 搭配 Laravel PHP Framework 設定 (0)
• HAproxy 搭配 Nginx port redirect issue (0)
• Nginx 判斷檔案是否存在 (0)

將 Backbone Framework 升級到 1.1.0 注意事項

November 13, 2013, 10:26 pm

≫ Next: 西聯匯款 Google Ansense 取款步驟

≪ Previous: Jenkins + Nginx User Auth

$

0

0

Backbone.js 經過了半年終於在 10 月 Release 了 1.1.0 版本，這次升級最重要的一點就是，Backbone 本來在 View 有支援 options，讓你可以透過初始化過程，將自定額外的 key 及 value 帶入，並且可以隨時透過 this.options.key 的方式取得資料。直接給例子來解說好了

this.example = new Backbone.View.extend({
  template_name: "user_edit",
  el: "#main"
});

上面是宣告 Backbone.view 的寫法，程式設計師可以傳入 object 設定，並且可以在程式任意地方，使用 this.example.options.template_name 方式來得到 user_edit 值，如果是使用 Backbone 1.1.0 之前的版本都沒問題，要升級到 1.1.0，又想要此功能，請務必在 view 的宣告前就必須加一段程式碼(後面解說)。為什麼作者會拿掉呢？因為有開發者發 issue 說為什麼 View 有這功能，那 Model 為什麼沒有呢？，這會讓未來加入開發的程式設計師感到困擾，所以作者就決定拿掉這塊

_configure: function(options) {
  if (this.options) options = _.extend({}, _.result(this, 'options'), options);
  _.extend(this, _.pick(options, viewOptions));
  this.options = options;
},

當然，也有熱心的開發者提供相容性解法

var View = Backbone.View
Backbone.View = View.extend({
  constructor: function (options) {
    this.options = options;
    View.apply(this, arguments);
  }
});

其他的修正就沒什麼地方需要注意的了，這也難怪 Backbone 一些 Plugin 尚未升級到 1.1.0 相容性的關係 XD

Related View

• Backbone.js rewrite into CoffeeScript? (0)
• jQuery stopPropagation 和 stopImmediatePropagation 比較 (1)
• 台灣第一屆 JavaScript Conference Developer 會議 (2)
• Javascript 前端工具 Backbone.js Framework 初學介紹 (5)
• Backbone Routing pushState in IE (0)
• CodeIgniter REST Server with Backbone.js Issue (0)
• Backbone.js event bind 新功能 listenTo and stopListening (1)
• Backbone.js Model and Collection Tregger Event (0)
• Backbone.js Event 事件介紹 (2)
• Coding on workspace of Chrome Developer tools (2)

西聯匯款 Google Ansense 取款步驟

November 14, 2013, 8:45 pm

≫ Next: jquery-serialize-object 不支援 IE7,8 瀏覽器?

≪ Previous: 將 Backbone Framework 升級到 1.1.0 注意事項

$

0

0

如果有在用 Google Adsense 服務朋友們，相信在台灣的取款方式都是透過西聯匯款，以前支援西聯匯款服務的銀行還蠻多的，但是這次取款發現只剩下兩間銀行大眾銀行及京城銀行，所以大家不要再跑去其他銀行了，取款之前請先到西聯匯款查詢家裡附近有哪些銀行可取款，出發前，你只要準備好底下資料即可。

* 收件人 first name 及 last name (您的英文名字)
* 匯款人 first name 及 last name (Google Inc)
* 匯款人城市及國家 US-United States 美國
* 匯款處理編號 (MTCN) Money Transfer Control Number (請由後台觀看)
* 款項金額
* 身份證

以上是櫃台小姐會請你提供，另外也會詢問你這筆費用的作用是？就回答廣告費即可，最後會依照當天的匯率轉換成美金給你。步驟相當簡單，給需要的朋友們參考看看。

Related View

• Google App Engine 收費機制 Frontend Instance Hours (1)
• 測試 Web Responsive Design Tool (0)
• Google Chrome 支援超過 40,000 Extensions! with Greasemonkey (1)
• How to install Google Web Toolkit with Eclipse (2)
• Google Chrome 推出 4.0 穩定版 & Mozilla 推出 FireFox 3.6 (0)
• [教學]網頁簡體繁體轉換程式(Google AJAX Language API) (0)
• [AJAX] google map 的應用～ (1)
• PHP CodeIgniter Google URL Shortener API Library (0)
• [Gmail] 最近發布的功能：進階搜尋，預覽收件夾，郵件內容語言轉換 (0)
• [FireFox] 安裝 google toolbar 使用 chrome Start page (0)

jquery-serialize-object 不支援 IE7,8 瀏覽器?

November 19, 2013, 10:54 pm

≫ Next: Youtube IFrame API Unable to post message Issue

≪ Previous: 西聯匯款 Google Ansense 取款步驟

$

0

0

最近專案需求用到 jQuery Serialize Object plugin，它能夠自動將 Form 表單內的值，全部轉成 object 或 json 字串，減少開發者每次都要寫抓取 Form 表單內全部欄位的值。此套件安裝及使用方法都很容易，安裝可以透過 Bower 方式，或者是下載 source code 直接 include 即可，在 IE 7 或 8 為什麼沒辦法使用呢，原因是作者使用了 Array.prototype.forEach，此語法需要 JavaScript 1.6 版本，很抱歉，在 IE8 並不支援 forEach 寫法，所以 Mozilla Javascript 開發者文件內有提供 Compatibility 方法：

if (!Array.prototype.forEach) {
    Array.prototype.forEach = function (fn, scope) {
        'use strict';
        var i, len;
        for (i = 0, len = this.length; i < len; ++i) {
            if (i in this) {
                fn.call(scope, this[i], i, this);
            }
        }
    };
}

但是既然這是 jQuery Plugin，就可以透過 jQuery 內建的 each 函式來解決，最後發了 Pull request 給作者，就看作者收不收了 XD

Related View

• [小技巧] JavaScript Cross Browser Best Practices (0)
• IE 6 瀏覽器用戶全球分佈 (1)
• 利用 jQuery 動態改變網站 CSS (0)
• [jQuery] 解決 IE6 PNG 透明背景 (Supersleight jQuery Plugin for Transparent PNGs in IE6) (2)
• 使用不同 IE 版本測試網站 (1)
• jQuery 1.7 透過 on 來綁定事件 (0)
• jQuery stopPropagation 和 stopImmediatePropagation 比較 (1)
• RequireJS 搭配 CKEditor (0)
• [jQuery]判斷 checkbox 是否選取，實現全選跟全部取消 (4)
• [jQuery] AJAX 學習筆記 (一) 如何使用 JSON 驗證使用者表單 (3)

Youtube IFrame API Unable to post message Issue

November 29, 2013, 12:43 am

≫ Next: 玩命關頭主角 Paul Walker 享年 40 歲

≪ Previous: jquery-serialize-object 不支援 IE7,8 瀏覽器?

$

0

0

YouTube IFrame Player API 提供了簡單的介面及方法，讓網站可以快速整合 Youtube 影片，但是不得不說 Google 針對 Youtube API 時常改版，所以就會常常碰道友時候可以動，有時後不可以動。Youtube 在 2011 公告開始支援 https protocol，所以現在很多網站存取 Youtube API 時，都會使用底下寫法

<script>
      var tag = document.createElement('script');
      tag.src = "//www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>

也就是你的網站只支援 http:// 時，就會去讀取 http://www.youtube.com/iframe_api，但是透過 YT.Player 物件來產生多個 Youtube 影音時，就會出現底下錯誤訊息，導致 Javascript API 無法控制 Youtube 影片

Unable to post message to http://www.youtube.com Recipient has origin: https://www.youtube.com/

這問題在 Stackoverflow 被提出來多次，我自己針對 Youtube API 產生下面的解法，只要按照底下方式操作，就不會產生任何錯誤訊息了

1. load iframe api https://www.youtube.com/player_api
2. load iframe src path: https://www.youtube.com/embed/0GN2kpBoFs4?rel=0

如果有使用 YT.Player 動態產生 Youtube 元件，請務必檢查 src 的 protocol

setTimeout(function(){
    var url = $('#iframe_youtube').prop('src');
    if (url.match('^http://') {
        $('#iframe_youtube').prop('src', url.replace(/^http:\/\//i, 'https://'));
    }
}, 500);

如果確定都是透過 https:// 來跟 Youtube 溝通，那就不會產生 postMessage 無法收到的問題，這解法我也有更新在 Google 論壇上，另外原發問者也有將我提供的解法，轉到 Stackoverflow 解答區，大致上是這樣。

Related View

• Google Chrome 支援超過 40,000 Extensions! with Greasemonkey (1)
  
• [Wordpress] post 文章不能使用 javascript 語法 (1)
  
• [教學]網頁簡體繁體轉換程式(Google AJAX Language API) (0)
  
• 西聯匯款 Google Adsense 取款步驟 (0)
  
• Google Chrome 推出 4.0 穩定版 & Mozilla 推出 FireFox 3.6 (0)
  
• 新版 CodeIgniter Nexmo Message API Library Release (2)
  
• 測試 Web Responsive Design Tool (0)
  
• Google App Engine 收費機制 Frontend Instance Hours (1)
  
• [jQuery] AJAX 學習筆記 (一) 如何使用 JSON 驗證使用者表單 (3)
  
• How to install Google Web Toolkit with Eclipse (2)
  

玩命關頭主角 Paul Walker 享年 40 歲

November 30, 2013, 11:34 pm

≫ Next: Javscript 18 歲生日歷史演進

≪ Previous: Youtube IFrame API Unable to post message Issue

$

0

0

今天最震驚的消息就是玩命關頭主角 Paul Walker 發生車禍意外享年 40 歲，在 Twitter 得知此消息，Wiki 上面也已經更新死亡訊息了。

It's with a heavy heart that we must confirm Paul Walker passed away today in a tragic car accident…MORE: http://t.co/9hDuJMH99M – #TeamPW

— Paul Walker (@RealPaulWalker) December 1, 2013

玩命關頭一直是我追逐的動作片，如今主角已經先走一步，希望能有 Paul Walker 的紀錄片出來 … 底下是車禍現場影片

Related View

• Nginx 搭配 Laravel PHP Framework 設定 (0)
  
• Youtube IFrame API Unable to post message Issue (0)
  
• Backbone.js rewrite into CoffeeScript? (0)
  
• 這2天罰勤,我都做了什麼? (0)
  
• [生活日記] 期中考兩科成績～爽 (0)
  
• 高鐵火車站旅行 (0)
  
• 美國職棒大連盟 MLB 080407 TB vs NYY 王建民第二勝 (0)
  
• 每年的過年，總是特別冷清 (1)
  
• [關子嶺] 洗心館 泥漿溫泉 (0)
  
• 高雄回南投 國光之旅 (0)
  

Javscript 18 歲生日歷史演進

December 7, 2013, 3:41 am

≫ Next: Jenkins + Apache User Auth

≪ Previous: 玩命關頭主角 Paul Walker 享年 40 歲

$

0

0

在 resin.io 看到這篇 Happy 18th Birthday JavaScript! A look at an unlikely past and bright future. 裡面有些 Javascript 發展史，蠻有趣的，分享給大家看看。18 年前由 Netscape 和 Sun 共同 Release Javscript，在當年18天後，Ruby 也同時發佈了，底下來看看 Javscript 歷史演進。

JavaScript 發展史

1995: 由 Netscape 和 Sun 共同發佈 Javscript，並且命名為 “Mocha” 和 “LiveScript”，當時參與開發 Javascript 的其中一位負責人 Brendan Eich，現在為 Mozilla CEO。

1996: Microsoft Javscript 版本出現，並且命名為 JScript，同時發佈 Internet Explorer 3.0。這年也是 CSS 釋出第1版。

1997： ECMA 第1版釋出。

1998： Netscape 將 Netscape browser open source release 出來，並且成立 Mozilla Project。過了幾個月， AOL 買下 Netscape。

1999: IE5 提出介紹 XMLHttpRequest。

2001: IE6 正式 Release，截至目前為止，IE6 最大用戶還是在中國大陸 XD。

2002: 大家常用的 JSON 在這時候 Release，同時間 Mozilla 發佈 Firefox。

2003: Apple 也不甘示弱發佈 Safari Beta Release。

2004: Google 發佈 Gmail released 產品，Gmail 用了大量 AJAX 技術，也造就現今的 Web Application。Google 挑4/1發佈，讓大家以為是惡作劇一場 XD。

2005: Apple open source Webkit，此專案是從 KHTML fork 出來的。同時間 Jesse James Garrett 發佈一篇 AJAX。

2006: John Resig 發佈第1版 JQuery，現今的網站超過 90% 都會使用 jQuery，它被視為 “better cross-browser DOM API”。此年 Microsoft 同時發佈 IE 7。

2007: Douglas Crockford 講了一場 keynote 議題名稱為 JavaScript: The good parts 將來成為 O’Reilly 2008 年一本書。同年 Leonard Richardson and Sam Ruby 出了 RESTful Web Services 書。

2008: Google 推出自家瀏覽器 Chrome 和 V8 Engine，帶給瀏覽器不同的衝擊。

2009: 誰說 JavaScript 只能寫在 Client 端，Ryan Dahl 釋出 node.js，帶來用 js 寫 sever side 風潮，同年 PhoneGap 帶來 HTML5 和 JavaScript 整合到 Android 及 iOS。

2010: 一堆 JavaScript Library 同時釋出 NPM, BackboneJS, RequireJS。

2012: Single-page app frameworks 出現: AngularJS 1.0, Ember 1.0.pre。

2013： Firefox OS 用 JavaScript 撰寫 UI Layer，並且正式 Release，Mozilla 同時發佈 asm.js。

JavaScript 效能

Jan T. Sott 用 Kraken benchmark 發佈一篇 performance 報告，測試環境從 Firefox 3.5 to Chrome 23 同環境下測試

可以參考原始連結

JavaScript 生態

我們來看看眾多語言的變化

可以發現 Node.js 正在往上衝阿，相信到 2015 年可以追上 Rubygems 及 Maven Central. 除了 55000+ 的 NPM package 及 6000+ package in broser 帶給使用者更好的體驗

另外 Github 也統計用其他語言寫的工具給 JavaScript 用

最後看看 Github repositories 的生態

資料來源 Twitter，JavaScript 往上衝阿，難怪全世界都在缺 Frond End Engineer。

總結

現在用 JavaScript 寫 Client-Side 已經不稀奇了，現在有很多 Project 開始設計如何透過 JavaScript 去控制硬體，可以看到 File API and Device API 或者是 Chrome Apps, Mozilla WebAPI, and Tizen Web APIs 等專案，這些專案共通點就是希望開發者可以透過 JavaScript 來控制硬體裝置。另外也可以透過 node-webkit 來溝通。

想了解 EmbeddedJS 可以關注現有的專案或研討會 Nodebots, Nodecopter, Tessel.io, Espruino, Device.js，或者是 application 像是 heimcontrol.js and Google Coder for Raspberry Pi，很難想像 18 年後的 JavaScript 會變成什麼樣子 XD。

Related View

• 使用不同 IE 版本測試網站 (1)
  
• [小技巧] JavaScript Cross Browser Best Practices (0)
  
• jquery-serialize-object 不支援 IE7,8 瀏覽器? (0)
  
• Coding on workspace of Chrome Developer tools (2)
  
• 台灣第一屆 JavaScript Conference Developer 會議 (2)
  
• [jQuery] 解決 IE6 PNG 透明背景 (Supersleight jQuery Plugin for Transparent PNGs in IE6) (2)
  
• [FireFox] 安裝 google toolbar 使用 chrome Start page (0)
  
• Backbone Routing pushState in IE (0)
  
• [jQuery] AJAX 學習筆記 (一) 如何使用 JSON 驗證使用者表單 (3)
  
• Google Chrome 支援超過 40,000 Extensions! with Greasemonkey (1)
  

---

Jenkins + Apache User Auth

December 8, 2013, 4:45 am

≫ Next: CodeIgniter 初始化 Library 流程

≪ Previous: Javscript 18 歲生日歷史演進

$

0

0

上個月寫過一篇如何設定 Nginx + Jenkins 文章，可以參考: Jenkins + Nginx User Auth，這次筆記 Jenkins + Apache 設定方式

安裝 Jenkins

在 Ubuntu 環境，可以直接參考 Installing Jenkins on Ubuntu

$ wget -q -O - http://pkg.jenkins-ci.org/debian/jenkins-ci.org.key | sudo apt-key add -
$ sudo sh -c 'echo deb http://pkg.jenkins-ci.org/debian binary/ > /etc/apt/sources.list.d/jenkins.list'
$ sudo apt-get update
$ sudo apt-get install jenkins

設定 Apache

如果您是需要用一個特定 domain 也就是 jenkein.example.com，沒有 sub folder，你可以透過底下設定

啟用 Apache proxy 模組

$ a2enmod proxy
$ a2enmod proxy_http

Apache virtual host 部份加入底下設定

ProxyRequests Off
<Proxy *>
    Order deny,allow
    Allow from all
</Proxy>
ProxyPreserveHost On
ProxyPass / http://127.0.0.1:8080

設定到這邊，重新啟動 Apache 即可，如果你是使用 sub folder 的方式，有就是透過 www.example.com/jenkins 方式瀏覽，請換成底下設定

ProxyRequests Off
<Proxy *>
    Order deny,allow
    Allow from all
</Proxy>
ProxyPreserveHost On
ProxyPass /jenkins http://127.0.0.1:8080/jenkins

但是你會發現 css, js, image 都讀取錯誤。這時候請修改 /etc/default/jenkins 將 JENKINS_ARGS 加入 –prefix 設定

JENKINS_ARGS=”–prefix=$PREFIX –httpListenAddress=127.0.0.1 –webroot=/var/cache/jenkins/war –httpPort=$HTTP_PORT –ajp13Port=$AJP_PORT”

重新啟動 Jenkins 及 Apache 即可。最後透過 htpasswd 將 jenkins web 目錄鎖起來

<Location /jenkins/>
    AuthType basic
    AuthName "jenkins"
    AuthUserFile "/etc/apache2/conf/.htpasswd"
    Require valid-user
</Location>

Related View

• Jenkins + Nginx User Auth (1)
  
• 在 Ubuntu 10.10 (Maverick) 架設 Nginx + PHP FastCGI (3)
  
• [筆記] 解決 apache mod_fcgid: HTTP request length 136000 (so far) exceeds MaxRequestLen (131072) (2)
  
• Ubuntu (Debian) 架設 apache mpm worker mod_fcgid 筆記 (0)
  
• PHP MVC Framework 搭配 Nginx + PHP-FPM 設定檔 (0)
  
• [FreeBSD]安裝 apache2 (worker) + PHP5.2.6 + mod_fastcgi + php5-fcgi (3)
  
• Install Nginx + spdy module on Ubuntu or Debian (0)
  
• Nginx + phpMyAdmin 搭配 SSL 設定 (2)
  
• [FreeBSD]high performance caching reverse proxy: Varnish (安裝架設篇) (9)
  
• nginx 1.4.0 釋出並支援 SPDY (3)
  

CodeIgniter 初始化 Library 流程

December 20, 2013, 7:52 am

≫ Next: The streaming build system Gulp

≪ Previous: Jenkins + Apache User Auth

$

0

0

好久沒寫 CodeIgniter 相關文章，這次看到在論壇有人發問 application/libraries 優先權，想說把整個 CodeIgniter 如何讀取 Library 的流程整個寫下來，其實也不會很難，但是就是要照著 CI 定義的規則來命名檔名以及 Class。假設要讀取 Email Library，我們可以透過底下方式讀取

$this->load->library('email');

CI 會先將第一個字母大寫 Email 字串，接著小寫 email 字串開始進行搜尋檔案動作，搜尋的優先順序會先從你是否有擴充核心 Library，也就是 config.php 內定義 subclass_prefix，那 CI 預設的 Prefix 就是 MY_，底下列出 CI 判斷檔案是否存在的列表

1. application/libraries/MY_Email.php
2. application/libraries/Email.php
3. system/libraries/Email.php
4. application/libraries/MY_email.php
5. application/libraries/email.php
6. system/libraries/email.php

假設 1. application/libraries/MY_Email.php 存在時，系統會認定您有擴充 Library，所以會將 application/libraries/Email.php 同時讀取進來，也就是 include 兩個檔案

include_once('application/libraries/Email.php');
include_once('application/libraries/MY_Email.php');

這時候你會發現在 application/libraries/MY_Email.php 裡面的宣告會是

class MY_Email extends CI_Email {

}

所以很自然的可以擴充 Email Library。假如 1. application/libraries/MY_Email.php 不存在，系統很自然接著讀取 2. application/libraries/Email.php 或 3. system/libraries/Email.php。所以讀取檔案的結論就是 MY_ 命名開頭為優先。最後來看看如何 initialize Class。此部份會跟檔案命名有很大的關係，如果以 MY_ 為檔名開頭，那 Class 就要宣告為

class MY_Email {

}

以擴充 Email 例子來說會變成底下程式碼載入

class CI_Email {
    ....
}

class MY_Email extends CI_Email {
    ....
}

如果是非 MY_ 開頭的 Library，例如自訂 ses.php 的話，裡面的 Class 可以取名為

class CI_Ses {
    ....
}


class MY_Ses {
    ....
}


class Ses {
    ....
}

這三種方式都可以，讀取順序為由上到下，但是一般我們都是以最後一個為主。所以假設你覆蓋系統內建的 Email library，你可以建立 application/libraries/Email.php，並且檔案內容宣告為底下即可

class Email {
    ....
}

最後可以參考線上文件

Related View

• 如何善用 CodeIgniter Library 及擴充核心 extend core class (0)
  
• CodeIgniter 2.0.X MVC 架構介紹 (1)
  
• Upgrading to CodeIgniter 2.0 (升級 CI 到 2.0 版本) (0)
  
• CodeIgniter TextMagic API Library Release (簡訊功能) (5)
  
• CodeIgniter 2.0 發展狀況(現在更棒了) 不再支援 PHP4 (0)
  
• [CodeIgniter] 多國語言網站製作，重複 load 相同 language? (1)
  
• 深入探討 CodeIgniter Input Class 核心程式流程 (8)
  
• [CodeIgniter] 簡單擷取 html 原始碼(PHP Simple HTML DOM Parser) (1)
  
• [PHP] 好用 Debug PHP 工具 FirePHP for FireFox on CodeIgniter (4)
  
• CodeIgniter Error Handler 處理 (0)
  

The streaming build system Gulp

December 29, 2013, 12:25 am

≫ Next: 增加 phpMyAdmin 登入時間

≪ Previous: CodeIgniter 初始化 Library 流程

$

0

0

看到 Yeoman 作者之一 Addy Osmani 開始 review Gulp build system，由於 Yeoman framework 跟 GruntJS 是很緊密結合的，但是 GruntJS 套件愈來愈多，漸漸的執行 GruntJS 後，開始吃了系統 CPU 及記憶體，這對於開發環境而言，會是一大負擔阿，大家不知道有無發現，跑 Nodejs GruntJS 時，每當存檔的時候，CPU 就開始哀嚎了，我自己是有這方面的體會，加上團隊內並不是每位同仁的電腦都是很 powerful，原本是好意讓團隊開發更遵守 coding style 及統一開發環境，但是 Grunt 的肥大，讓整個 Client 環境 Loading 飆高。所以 Yeoman 看到了 Gulp。也有考慮如何將 Gulp 整合到 Yeoman 專案。

Gulp 簡介

大家可以把 Gulp 跟 Grunt 用途想成一樣，只是處理 Task 的原理不相同。Grunt 是透過 Task 的概念下去實作，JS 程式存檔後，Grunt 會依序處理使用者定義的 task，例如執行 jslint task 接著 uglify task，最後將檔案搬到您想的目錄。而 Gulp 則是平行處理，假設有5個 js 檔案，Gulp 則是透過 pipeline 方式處理檔案，所以 Gulp 會加速處理結果。

Grunt 原理:

Grunt jslint task -> Grunt uglify task -> Grunt copy task
  ---處理5個檔案--- ->  ---處理5個檔案---   -> ---處理5個檔案---

Gulp 原理

Grunt jslint task -> Grunt uglify task -> Grunt copy task
  ---處理檔案(1)--- ->  ---處理檔案(1)---  -> ---處理檔案(1)---
  ---處理檔案(2)--- ->  ---處理檔案(2)---  -> ---處理檔案(2)---
  ---處理檔案(3)--- ->  ---處理檔案(3)---  -> ---處理檔案(3)---
  ---處理檔案(4)--- ->  ---處理檔案(4)---  -> ---處理檔案(4)---
  ---處理檔案(5)--- ->  ---處理檔案(5)---  -> ---處理檔案(5)---

Gulp 用法

我們假設寫 Coffeescript 程式，通常寫完會經過 coffeelint 檢查 coffee script 的 Coding style 語法，最後才透過 coffee command 轉換成 javascript 檔案。

在 Grunt 套件，我們會這樣寫

coffeelint:
    options:
        'force': true
        'no_trailing_whitespace':
            'level': 'error'
        'max_line_length':
            'level': 'ignore'
        'indentation':
            'value': 4
            'level': 'error'
    dev: ['<strong>/*.coffee', '!</strong>/node_modules/<strong>', '!</strong>/vendor/<strong>']
watch:
    coffee:
        files: ['</strong>/*.coffee', '!<strong>/node_modules/</strong>', '!<strong>/vendor/</strong>'],
        tasks: ['coffeelint']

如果是用 Gulp 寫法會非常簡單

gulp.task('coffee', function() {
    gulp.src('app/assets/coffeescript/**/*.coffee')
        .pipe(coffeelint({"indentation": {
            "name": "indentation",
            "value": 4,
            "level": "error"
        }}))
        .pipe(coffeelint.reporter())
        .pipe(coffee({bare: true}))
        .pipe(gulp.dest('app/assets/js/'))
        .pipe(refresh(server));
});

有沒有變得很容易閱讀？設定方式也變得很容易，執行速度更不用說了，不會吃太多記憶體及 CPU 了，但是我覺得要取代 Grunt 實在很困難，Grunt 能處理大部分的事情，包含 Deploy 及驗證等等，我覺得 Gulp 就專門用在 RD 開發環境的建置，RD 平時會用到哪些套件？Coffscript，Compass or sass，livereload，watch event，大致上這些就已經很足夠了。

• Coffscript
• Compass by appleboy
• sass
• livereload

由於沒找到 Compass Gulp plugin，只看到 sass plugin，所以我寫了簡易的 Gulp plugin，有用 compass 務必安裝

$ npm install gulp-compass --save-dev

使用方式可以參考 Readme。

Related View

• 2013 Javascript Conference: 你不可不知的前端開發工具 (5)
  
• Drone.io 搭配 Ruby 環境測試 (1)
  
• 高雄 KSDG 分享: 打造團隊共同開發環境 (0)
  
• Coding on workspace of Chrome Developer tools (3)
  
• Front End Engineer 前端設計師必備工具 Live.js (0)
  
• 在 CentOS 上面安裝 Ruby 環境 (0)
  
• Sass language 和 Compass 教學投影片 (0)
  
• CSS layout 好幫手 Compass scss version of normalize.css (0)
  
• LiveReload 網頁程式設計師必備工具 (4)
  
• 在 Windows 底下安裝 Compass CSS Authoring Framework (1)
  

增加 phpMyAdmin 登入時間

December 30, 2013, 11:19 pm

≫ Next: 前端工程師必看: 十大 CSS 技巧

≪ Previous: The streaming build system Gulp

$

0

0

phpMyAdmin 是一套管理 MySQL 資料庫的 UI 介面工具，預設登入時間為 1440 秒，這時間是定義在 libraries/config.default.php 內，phpMyAdmin 也是透過 gc-maxlifetime 來決定 Session 存在與否，所以如果要增加登入時間，比如說設定一年 (3600 * 24 * 365) 好了，請按照底下設定

PHP 設定檔

如果是裝 php-fpm 請修改 /etc/php5/fpm/php.ini 路徑

; After this number of seconds, stored data will be seen as 'garbage' and
; cleaned up by the garbage collection process.
; http://php.net/session.gc-maxlifetime
session.gc_maxlifetime = 315360000

重新啟動 php-fpm

$ /etc/init.d/php5-fpm restart

phpMyAdmin 設定檔

修改 config.inc.php 如果找不到此檔案，請複製 config.sample.inc.php 為 config.inc.php，接著增加底下設定即可

$cfg['LoginCookieValidity'] = 3600 * 24 * 365;

最後注意的是 gc_maxlifetime 設定值一定要超過 LoginCookieValidity 值，這樣才有作用

Related View

• Nginx + phpMyAdmin 搭配 SSL 設定 (2)
  
• [SQL] MySQL ROW_NUMBER Simulation (0)
  
• [轉載]MySQL 的 “SET NAMES xxx” 字元編碼問題分析 (2)
  
• [PHP]解決網站被 SQL injection 攻擊 (2)
  
• 基本優化 tuning apache 跟 tuning mysql 跟 php 效能 (5)
  
• PHP 將長期宣導程式設計師將 ext/mysql 改用 pdo_mysql 和 mysqli (0)
  
• PHP+MySQL 環境下 SQL Injection 攻防戰 (4)
  
• MySQL 用 MySQLDump 備份 InnoDB 注意事項 (1)
  
• [網站] 好站連結 (二) (3)
  
• [講義]屏科大 PHP & MySQL 基礎教學投影片 (16)
  

前端工程師必看: 十大 CSS 技巧

January 2, 2014, 11:05 pm

≫ Next: 在 Chrome 瀏覽器使用 Terminal 終端機

≪ Previous: 增加 phpMyAdmin 登入時間

$

0

0

2014 年第一篇文章來寫前端工程師必須要瞭解的 [CSS] 技巧，此篇其實來自於 KidsIL Blog 內的一篇 10 Great CSS Tips for every Web Developer，裡面作者紀錄了十大 CSS 技巧，看完這十大後，發現有些技巧曾經出現在 Even Wu 給網頁設計師的建議一文，這些技巧對於目前台灣前端工程師有很大的幫助，這些都算是蠻基本的，如果尚未瞭解或還沒開始使用的開發者，也可以建議團隊開始使用。底下內容來自於原網站，在加上筆者的一些補充。

用 firebug 或 console 來除錯

在 Firefox 還沒有推出 Developer Tools 時，大家一定是用 Firebug 來除錯，2006 年 Firebug 第一版 release 出來，讓 web 開發者可以更快速的瞭解網站除錯，也可以透過 Firebug 來瞭解網站的 performance。但是現今，Firefox 推出了自家 Developer Tools，而 Chrome 也是有很多好用的 Tool tips 及強大的 Workspace，對 Workspace 不熟悉的，可以參考之前我寫的一篇: Coding on workspace of Chrome Developer tools。

Float or Inline-Block css

先來看看範例1，中間有三個 column，分別用 float: left 方式來排列

<div class="wrapper">
    <div class="column">test</div>
    <div class="column">test</div>
    <div class="column">test</div>
</div>

CSS 寫法:

.wrapper {
    width: 400px;
    min-height: 50px;
    background-color: red;
}

.column {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-left: 20px;
}

會發現背景紅色 .wrapper 區塊被砍了一半，原因就是沒使用 clear: both，正確解法請看範例2，如果不是用此解法，也可以將 float 取代成 display: inline-block，解法請看範例3。上述兩種解法是最常見的，終極解法可以透過 pseudo-class :after 來解決此問題，晚點會提到此解法

用 CSS animation 取代 Javascript

原文作者寫了一篇 CSS3 Transitions to replace JavaScript animations 文章，就是要告訴前端工程師盡可能將原本使用的 jQuery animation 取代成 CSS 作法，原因在於 CSS animation 的效能遠大於 JavaScript Native Language 效能，請參考 http://www.cssanimate.com/ 網站。

Form 表單請使用 Label input

上面的例子，只要點選 Name 或 Email 會發現瀏覽器游標自然會移動到 text input 欄位上，設定方式很簡單，只要將 label 的 for attribute 設定為 input id 即可

<label for="username">Name:</label><input type="text" id="username" />
<label for="email">Email:</label><input type="text" id="email" />

Performance: Spiriting everything

每個網站一定會有很多小 icon 圖，不管是直接使用在 html 或者是寫在 CSS 內，在網路傳輸的時候，如果 10 張 icon 就會建立 10 條 connection，然而 css_spite 就是解決了此問題，將所有的小圖集結成一張大圖，透過 css 設定來減少網路連線數，網路上很多工具來達成此目的，像是 CSS Sprite Generator，如果熟悉 Compass 工具，可以直接使用 Spriting with Compass

.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save   { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }

.my-icons-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
.my-icons-new    { background-position: 0 -64px; }
.my-icons-save   { background-position: 0 -96px; }

不要直接修改 image width and height attribute

這點其實蠻重要的，現在網站架構的瓶頸，說實在的 80% 以上都是在讀取圖檔，有時候 UI 設計師切出一張大圖，前端工程師拿去使用，結果圖檔很大，工程師就直接透過 css width height 修改圖片大小，這樣看起來是沒問題，但是網站就開始很慢，使用者開始不爽，網站自然就不會有人繼續用。正確方式就是將 image resize 成各種版本，可以直接參考這篇 Tools for image optimization

• Generate multi-resolution images: grunt-responsive-images
• Clowncar technique: grunt-clowncar

使用 max width and height 來調整 image 比例

這招其實還蠻好用的，我們先來看看例子

我們看到這張圖本來的比例大小為寬 228 高 320，但是經過底下 CSS 語法

img {
    width: 228px;
    height: 228px;
}

圖片就變成上述的例子，但是如果我們把 CSS 改成底下呢

img {
    max-width: 228px;
    max-height: 228px;
}

出來的結果就是

善用 :before and :after

在前面有提到 float: left 後要加上一個 element clear: both 現在我們可以透過 :after 來解決這問題

.wrapper:after {
    content: ' ';
    clear:both;
    display:block;
}

減少 CSS 程式碼

這部份就是減少不必要的程式碼

.class {
    margin-top:5px;
    margin-right:10px;
    margin-bottom:15px;
    margin-left:20px;
}

可以寫成

.class {
    margin:5px 10px 15px 20px;
}

CSS color 部份 #RRGGBB 可以寫成 #RGB

SASS or Compass

團隊內尚未使用 SASS 或 Compass 嗎？個人建議儘快導入這兩套工具，還不熟悉這兩套工具，建議將底下投影片看完

• 淺談 SASS ＆ Maintainable CSS
• Sass + Compass 101 Workshop
• Recreating Subtle Design Details Using Sass

Related View

• Sass language 和 Compass 教學投影片 (0)
  
• 在 Windows 底下安裝 Compass CSS Authoring Framework (1)
  
• 加速開發 CSS 工具: Sass (1)
  
• The streaming build system Gulp (0)
  
• CSS layout 好幫手 Compass scss version of normalize.css (0)
  
• 在 CentOS 上面安裝 Ruby 環境 (0)
  
• CSS 垂直置中解法 (4)
  
• Front End Engineer 前端設計師必備工具 Live.js (0)
  
• [CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript (8)
  
• 測試 Web Responsive Design Tool (0)