Javascript

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

最近專案需求用到 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); } } }; }[/code] 但是既然這是 jQuery Plugin，就可以透過 jQuery 內建的 each 函式來解決，最後發了 Pull request 給作者，就看作者收不收了 XD

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"
});

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

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

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

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

Cross Site Request Forgery 簡稱 CSRF 是網路上最常見的攻擊方式，由於前端的盛行，現在開發網站偏向前後端拆開，前端使用大量的 Javascript 及 CSS3 效果，後端則是使用 PHP, Ruby, Python… 等，前端如何拿到資料庫資料呢，必需透 過 AJAX 方式來存取，常見的後端 API 會設計成 RESTful (GET/PUT/POST/DELETE)，後端為了擋住 CSRF 攻擊，所以限定了特殊 Content-Type Header，前端需要帶 application/json 給後端才可以拿到資料，這只能透過 Ajax requests 才可以做到。

今天非常開心看到 Twitter 團隊發佈 Bootstrap 3 RC1 版本，Twitter 這次是大動作的改版，連官網都換掉了，如果你還在使用 2.3.2，Twitter 也提供之前的網站版本，讓使用者可以繼續使用，當然希望各開發者可以盡快轉換到 3 RC1，此版本超過 1600 commits 修正。Twitter 也另外開了 Github Organization，如果要找範例的話，可以到 bootstrap-examples 來看看。另外大家最關心的是效能，底下影片介紹 Bootstrap 3 vs Bootstrap 2.3.2 版本差異。

相信網頁設計師並不陌生 Chrome DevTools，善用 DevTools 可以減少很多 Debug 時間，今天來介紹如何在 Chrome 瀏覽器上直接編輯程式，並且存檔，重新整理網頁後便可看到結果。聽到這裡大家一定會很好奇，不就開系統編輯器 (sublime, pspad, vim …) 工具，直接修改 => 存檔 => 重新整理嘛？但是這並不稀奇阿，重點是 Chrome 瀏覽器可以直接支援 線上編輯檔案，而不是透過系統工具做編輯。這就是 Chrome 強大的地方，今天就來介紹 Chrome workspace。

JSDC 擔任講師，演講主題為『你不可不知的前端開發工具』，這場議程只有30分鐘可以講，時間實在是不太夠，要消化這麼多工具其實對於聽眾有點困難，真是對不起聽眾了，不過沒關係，高雄 KSDG 五月份邀請我講『打造團隊共同開發環境』，其實就是將 GruntJS 精華整個講一遍，大概有一個多小時，底下是官方影音，如果朋友們沒北上參加，也可以透過 JSDC Youtube 來欣賞。 JSDC 35分鐘議程