<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"><title>大高雄Linux使用者協會</title><link href="http://kalug.linux.org.tw/planet" rel="alternate"></link><link href="http://kalug.linux.org.tw/planet//feed/rss/" rel="self"></link><id>http://kalug.linux.org.tw/planet</id><updated>2013-05-21T03:29:55Z</updated><entry><title>小惡魔AppleBOY: Flickr 改版及收費方式改變</title><link href="http://blog.wu-boy.com/2013/05/flickr-pro-limits-and-free-accounts/" rel="alternate"></link><updated>2013-05-21T03:29:55Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/05/flickr-pro-limits-and-free-accounts/</id><summary type="html">&lt;div&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" alt="" /&gt;&lt;img src="http://farm9.staticflickr.com/8267/8760804361_8fb7888250.jpg" alt="" /&gt;&lt;/div&gt;
&lt;p&gt;在&lt;a href="http://www.cool3c.com/" target="_blank"&gt;癮科技&lt;/a&gt;看到 &lt;a href="http://www.cool3c.com/article/67746" target="_blank"&gt;Flickr大改版，收費方式也有異動&lt;/a&gt;，&lt;a href="http://www.flickr.com" target="_blank"&gt;Flickr&lt;/a&gt; 整個介面大改版，這個就算了，連收費方式也大改，本來 Pro 的用戶，以後不再有 &lt;strong&gt;&lt;span&gt;Unlimited storage&lt;/span&gt;&lt;/strong&gt; 的優惠了，等到 pro 帳戶到期，系統會將帳戶轉為 Free 機制，雖然容量有到 1TB 的空間，其實也用不太完，但是整個感覺非常不好。&lt;/p&gt;
&lt;p&gt;Flickr 目前只有三種帳戶機制，Free, Ad Free, Doublr，三個差異沒有很多，Free 的帳戶幾乎同等於之前的 pro 帳戶，只是有容量限制上限 1TB，再來就是有廣告，接著 Ad Free 一年49美金，差別就是沒有廣告，最後 Doublr 只是容量變成 2TB，也沒有廣告，但是價錢 &amp;#8230;.. 每年 499.9 美金 .. 這價位，真的還蠻高的，我想之後也不打算續約了。更多 FQA 可以參考 &lt;a href="http://www.flickr.com/help/limits/" target="_blank"&gt;Free Accounts, Upgrading and Gifts&lt;/a&gt;&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain" id="wp_rp_first"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2006/11/ubuntu-%e5%ae%89%e8%a3%9d-java-tool-for-flickr-upload-tool/" class="wp_rp_title"&gt;[Ubuntu] 安裝 java-tool for Flickr upload tool&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/linode-nextgen-ram-upgrade/" class="wp_rp_title"&gt;Linode 最後優惠 升級記憶體&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/03/linode-nextgen-the-network-and-hardware/" class="wp_rp_title"&gt;Linode VPS 升級網路及硬體設備&lt;/a&gt; (5)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/09/linode-vps-inbound-%e6%b5%81%e9%87%8f%e5%b0%87%e4%b8%8d%e5%86%8d%e6%94%b6%e8%b2%bb/" class="wp_rp_title"&gt;Linode VPS Inbound 流量將不再收費&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/12/code-refactoring-programer/" class="wp_rp_title"&gt;網頁重構工程師&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/12/linode-storage-increased-by-20/" class="wp_rp_title"&gt;虛擬主機商 Linode 增加 20% 儲存空間&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/08/%e6%95%99%e5%ad%b8%e7%b6%b2%e9%a0%81%e7%b0%a1%e9%ab%94%e7%b9%81%e9%ab%94%e8%bd%89%e6%8f%9b%e7%a8%8b%e5%bc%8fgoogle-ajax-language-api/" class="wp_rp_title"&gt;[教學]網頁簡體繁體轉換程式(Google AJAX Language API)&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/02/google-gmail-multiple-inboxes-%e6%94%af%e6%8f%b4%e5%a4%9a%e9%87%8d%e8%b3%87%e6%96%99%e5%a4%be/" class="wp_rp_title"&gt;[google] Gmail Multiple Inboxes 支援多重資料夾&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/02/wordpressupdate-25-271/" class="wp_rp_title"&gt;[wordpress]update 2.6 -&gt; 2.71&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/11/codeigniter-nexmo-message-api-library-release/" class="wp_rp_title"&gt;新版 CodeIgniter Nexmo Message API Library Release&lt;/a&gt; (2)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="flickr"></category><category term="www"></category></entry><entry><title>小惡魔AppleBOY: 2013 Javascript Conference: 你不可不知的前端開發工具</title><link href="http://blog.wu-boy.com/2013/05/2013-javascript-conference-front-tool-grunt-js/" rel="alternate"></link><updated>2013-05-19T05:56:03Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/05/2013-javascript-conference-front-tool-grunt-js/</id><summary type="html">&lt;div&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" alt="JSDC 2013" /&gt;&lt;img src="http://farm6.staticflickr.com/5454/7238452668_82262e37dc_o.png" alt="JSDC 2013" /&gt;&lt;/div&gt;
&lt;p&gt;台灣第 2 屆 JavaScript 研討會在 5/18, 5/19 登場，今年報到率到 95% 了，我也給了一場 Talk，關於前端工具介紹，包含 &lt;a href="http://coffeescript.org/" target="_blank"&gt;CoffeeScript&lt;/a&gt;, &lt;a href="http://compass-style.org/" target="_blank"&gt;Compass&lt;/a&gt;, &lt;a href="http://livereload.com/" target="_blank"&gt;Livereload&lt;/a&gt;, &lt;a href="http://bower.io/" target="_blank"&gt;Bower&lt;/a&gt; Package Manager .. 等，最後介紹主軸 &lt;a href="http://gruntjs.com/" target="_blank"&gt;Grunt.js&lt;/a&gt; 來整合這些工具。&lt;br /&gt;
&lt;span id="more-4205"&gt;&lt;/span&gt;&lt;!--more--&gt;&lt;br /&gt;
 &lt;/p&gt;
&lt;p&gt;最後附上 &lt;a href="https://github.com/appleboy/html5-template-engine" target="_blank"&gt;Github 專案&lt;/a&gt;，歡迎大家 fork。&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/03/javascript-command-line-tool-gruntjs/" class="wp_rp_title"&gt;Javascript command line tool GruntJS 介紹&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/11/node-version-management/" class="wp_rp_title"&gt;Node.js Version Management 多版本管理&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/01/bower-is-a-package-manager-for-the-web/" class="wp_rp_title"&gt;Bower 管理網站套件的好工具&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/03/backbone-js-rewrite-into-coffeescript/" class="wp_rp_title"&gt;Backbone.js rewrite into CoffeeScript?&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/03/remove-google-cdn-reference-for-jquery/" class="wp_rp_title"&gt;Remove Google CDN reference for jQuery?&lt;/a&gt; (5)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/02/git-hooks-parse-php-error-before-commit/" class="wp_rp_title"&gt;在 git Commit 之前檢查 PHP 是否有錯誤&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/11/the-future-of-stylesheets-sass-compass/" class="wp_rp_title"&gt;Sass language 和 Compass 教學投影片&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/10/install-compass-css-authoring-framework-on-windows/" class="wp_rp_title"&gt;在 Windows 底下安裝 Compass CSS Authoring Framework&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/10/install-ruby-rubygems-compass-on-centos/" class="wp_rp_title"&gt;在 CentOS 上面安裝 Ruby 環境&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/09/compass-scss-version-of-normalize-css/" class="wp_rp_title"&gt;CSS layout 好幫手 Compass scss version of normalize.css&lt;/a&gt; (0)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="bower"></category><category term="coffeescript"></category><category term="compass"></category><category term="grunt"></category><category term="gruntjs"></category><category term="javascript"></category><category term="nodejs"></category></entry><entry><title>小惡魔AppleBOY: IE 6 瀏覽器用戶全球分佈</title><link href="http://blog.wu-boy.com/2013/05/internet-explorer-6-countdown/" rel="alternate"></link><updated>2013-05-15T06:21:51Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/05/internet-explorer-6-countdown/</id><summary type="html">&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/8739672579/" title="IE_world by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="640" height="357" alt="IE_world" /&gt;&lt;img src="http://farm8.staticflickr.com/7291/8739672579_3eff76916f_z.jpg" width="640" height="357" alt="IE_world" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;此資料來自 &lt;a href="http://www.ie6countdown.com/" target="_blank"&gt;The Internet Explorer 6 Countdown&lt;/a&gt;，大家注意上面圖示，沒想到台灣高居第二名，佔了 3.5% 僅次於大陸的 24%，大陸不感到意外，但是台灣的比例還真是高，難怪一堆程式開發者，抱怨連連 XD，這是統計到 2013 年 04 月，在這邊紀錄一下，等到明年這個時候再來看看此統計圖。&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/javascript-cross-browser-best-practices/" class="wp_rp_title"&gt;[小技巧] JavaScript Cross Browser Best Practices &lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/02/testing-for-internet-explorer-with-web-page/" class="wp_rp_title"&gt;使用不同 IE 版本測試網站&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/05/backbone-routing-pushstate-in-ie/" class="wp_rp_title"&gt;Backbone Routing pushState in IE&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/05/jquery-%e8%a7%a3%e6%b1%ba-ie6-png-%e9%80%8f%e6%98%8e%e8%83%8c%e6%99%af-supersleight-jquery-plugin-for-transparent-pngs-in-ie6/" class="wp_rp_title"&gt;[jQuery] 解決 IE6 PNG 透明背景 (Supersleight jQuery Plugin for Transparent PNGs in IE6)&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/05/web-responsive-design-test-tool/" class="wp_rp_title"&gt;測試 Web Responsive Design Tool&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/05/2013-javascript-conference-front-tool-grunt-js/" class="wp_rp_title"&gt;2013 Javascript Conference: 你不可不知的前端開發工具&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/11/codeigniter-2-0-%e7%99%bc%e5%b1%95%e7%8b%80%e6%b3%81%e7%8f%be%e5%9c%a8%e6%9b%b4%e6%a3%92%e4%ba%86-%e4%b8%8d%e5%86%8d%e6%94%af%e6%8f%b4-php4/" class="wp_rp_title"&gt;CodeIgniter 2.0 發展狀況(現在更棒了) 不再支援 PHP4 &lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/install-nginx-spdy-module-on-ubuntu-or-debian/" class="wp_rp_title"&gt;Install Nginx + spdy module on Ubuntu or Debian&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/05/flickr-pro-limits-and-free-accounts/" class="wp_rp_title"&gt;Flickr 改版及收費方式改變&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/03/phpfog-get-29-account-credit-by-just-deploying-a-new-app/" class="wp_rp_title"&gt;phpfog 免費提供升級 Silver 一個月&lt;/a&gt; (0)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="browser"></category><category term="ie"></category></entry><entry><title>小惡魔AppleBOY: Backbone Routing pushState in IE</title><link href="http://blog.wu-boy.com/2013/05/backbone-routing-pushstate-in-ie/" rel="alternate"></link><updated>2013-05-09T05:26:58Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/05/backbone-routing-pushstate-in-ie/</id><summary type="html">&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/7059615321/" title="backbone by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="451" height="80" alt="backbone" /&gt;&lt;img src="http://farm6.staticflickr.com/5338/7059615321_097833dea8.jpg" width="451" height="80" alt="backbone" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;Backbone.js 幫忙處理掉所有瀏覽器 &lt;a href="http://diveintohtml5.info/history.html" target="_blank"&gt;Html5 History pushState&lt;/a&gt; 功能，除了 IE 9 以下(含 IE 9)不支援 &lt;strong&gt;history.pushState()&lt;/strong&gt; 跟 &lt;strong&gt;history.replaceState()&lt;/strong&gt;，其他 Browser 幾乎都支援了，在 &lt;a href="http://backbonejs.org" target="_blank"&gt;Backbone.js&lt;/a&gt; 如何處理 URL 變化呢？以往透過 handle URL hash 來決定網頁要處理哪些資料，這也是 Backbone 預設的處理方式，範例如下&lt;/p&gt;
&lt;p&gt;URL:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;http://xxx/#!/user/list&lt;br /&gt;

http://xxx/#!/user/add&lt;/p&gt;&lt;/blockquote&gt;

&lt;p&gt;&lt;span id="more-4190"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;Backbone.&lt;span&gt;Router&lt;/span&gt;.&lt;span&gt;extend&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; routes&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;quot;!/user/:action&amp;quot;&lt;/span&gt;&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;quot;user&amp;quot;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; initialize&lt;span&gt;:&lt;/span&gt; &lt;span&gt;function&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; user&lt;span&gt;:&lt;/span&gt; &lt;span&gt;function&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;action&lt;span&gt;,&lt;/span&gt; id&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
Backbone.&lt;span&gt;history&lt;/span&gt;.&lt;span&gt;start&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;上面方法是通解，在各種瀏覽器包含 IE 都適用，那如果是使用 history.pushState 請改成底下:&lt;/p&gt;
&lt;p&gt;URL:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;http://xxx/user/list&lt;br /&gt;

http://xxx/user/add&lt;/p&gt;&lt;/blockquote&gt;

&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;Backbone.&lt;span&gt;Router&lt;/span&gt;.&lt;span&gt;extend&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; routes&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;quot;/user/:action&amp;quot;&lt;/span&gt;&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;quot;user&amp;quot;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; initialize&lt;span&gt;:&lt;/span&gt; &lt;span&gt;function&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; user&lt;span&gt;:&lt;/span&gt; &lt;span&gt;function&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;action&lt;span&gt;,&lt;/span&gt; id&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
Backbone.&lt;span&gt;history&lt;/span&gt;.&lt;span&gt;start&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#123;&lt;/span&gt;pushState&lt;span&gt;:&lt;/span&gt; &lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; root&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'/'&lt;/span&gt;&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;此作法在支援 html pushState 時候是可以按照您定義的 url 運作，但是在 IE 9 版本，網址就會被改成&lt;/p&gt;
&lt;p&gt;URL:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;http://xxx/#/user/list&lt;br /&gt;

http://xxx/#/user/add&lt;/p&gt;&lt;/blockquote&gt;

&lt;p&gt;一樣會被加上 hash 值，該如何解決此問題呢，請把 Backbone.history.start 改成&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;Backbone.&lt;span&gt;history&lt;/span&gt;.&lt;span&gt;start&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#123;&lt;/span&gt;pushState&lt;span&gt;:&lt;/span&gt; &lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; hashChange&lt;span&gt;:&lt;/span&gt; &lt;span&gt;false&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; root&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'/'&lt;/span&gt;&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;設定 &lt;strong&gt;hashChange&lt;/strong&gt; property 為 false，讓 IE 9 不要使用 # 來取代網址，這樣就沒問題了。&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/04/backbonejs-framework-tutorial-example-1/" class="wp_rp_title"&gt;Javascript 前端工具 Backbone.js Framework 初學介紹&lt;/a&gt; (5)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/03/backbone-js-rewrite-into-coffeescript/" class="wp_rp_title"&gt;Backbone.js rewrite into CoffeeScript?&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/javascript-cross-browser-best-practices/" class="wp_rp_title"&gt;[小技巧] JavaScript Cross Browser Best Practices &lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/04/introduction-to-backbone-js-event/" class="wp_rp_title"&gt;Backbone.js Event 事件介紹&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/02/backbone-js-event-bind-listento-and-stoplistening/" class="wp_rp_title"&gt;Backbone.js event bind 新功能 listenTo and stopListening&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/11/backbone-js-model-and-collection-tregger-event/" class="wp_rp_title"&gt;Backbone.js Model and Collection Tregger Event&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/05/the-first-javascript-developer-conference-in-taiwan/" class="wp_rp_title"&gt;台灣第一屆 JavaScript Conference Developer 會議&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/03/jquery-different-form-stoppropagation-with-stopimmediatepropagation/" class="wp_rp_title"&gt;jQuery stopPropagation 和 stopImmediatePropagation 比較&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/05/internet-explorer-6-countdown/" class="wp_rp_title"&gt;IE 6 瀏覽器用戶全球分佈&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/02/testing-for-internet-explorer-with-web-page/" class="wp_rp_title"&gt;使用不同 IE 版本測試網站&lt;/a&gt; (1)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="backbone.js"></category><category term="ie"></category><category term="javascript"></category><category term="pushstate"></category></entry><entry><title>小惡魔AppleBOY: 測試 Web Responsive Design Tool</title><link href="http://blog.wu-boy.com/2013/05/web-responsive-design-test-tool/" rel="alternate"></link><updated>2013-05-03T03:21:45Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/05/web-responsive-design-test-tool/</id><summary type="html">&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/8703913582/" title="responsive-website-design-tips by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="500" height="294" alt="responsive-website-design-tips" /&gt;&lt;img src="http://farm9.staticflickr.com/8395/8703913582_1e15c97803.jpg" width="500" height="294" alt="responsive-website-design-tips" /&gt;&lt;/a&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;Web CSS Programer 在撰寫 Responsive CSS Style 時，手邊一定會有一堆 Device，來測試當畫面小於 480 px 或大於 768 px 時，呈現的版面是否有亂掉，公司也花費許多成本來測試，現在不需要這樣了，我們可以透過線上 Tool 或者是 Plugin 來測試 Responsive Web Page，首先來介紹 &lt;a href="http://lab.maltewassermann.com/viewport-resizer/" target="_blank"&gt;Viewport resizer&lt;/a&gt;，此工具用法很簡單，進入官網後，將官網 Javascript 連結加入到我的最愛或 bookmarks，之後打開您的測試網站，再點選該 bookmark，你會發現網站上面多了一條 tool bar，可以自訂或調整 view size，預設也給了平板手機等多種畫面調整，讓您測試 &lt;a href="https://developer.mozilla.org/en-US/docs/CSS/Media_queries" target="_blank"&gt;Media Queries&lt;/a&gt; 是否有錯誤。&lt;br /&gt;
&lt;span id="more-4182"&gt;&lt;/span&gt;&lt;br /&gt;
另外一套 Tool 比較強大，那就是 &lt;a href="https://chrome.google.com/webstore/category/extensions?hl=zh-TW" target="_blank"&gt;Google Extension&lt;/a&gt;: &lt;a href="http://outof.me/responsive-inspector-beta-released/" target="_blank"&gt;Responsive Inspector (beta) released!&lt;/a&gt;，不過就是限制在 Google Chrome 瀏覽器才可以安裝，此擴充工具，還可以直接對應到 CSS Media Queries 位置，以及將自訂大小畫面存成圖檔並且上傳到 Server。底下是介紹影片&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/02/google-chrome-%e6%94%af%e6%8f%b4%e8%b6%85%e9%81%8e-40000-extensions-with-greasemonkey/" class="wp_rp_title"&gt;Google Chrome 支援超過 40,000 Extensions! with Greasemonkey&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/11/front-end-engineer-love-livejs/" class="wp_rp_title"&gt;Front End Engineer 前端設計師必備工具 Live.js&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/01/how-to-install-google-web-toolkit-with-eclipse/" class="wp_rp_title"&gt;How to install Google Web Toolkit  with Eclipse&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/01/google-chrome-%e6%8e%a8%e5%87%ba-4-0-%e7%a9%a9%e5%ae%9a%e7%89%88-mozilla-%e6%8e%a8%e5%87%ba-firefox-3-6/" class="wp_rp_title"&gt;Google Chrome 推出 4.0 穩定版 &amp;#038; Mozilla 推出 FireFox 3.6&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/03/google-app-engine-frontend-instance-hours/" class="wp_rp_title"&gt;Google App Engine 收費機制 Frontend Instance Hours&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/05/%e5%8a%a0%e9%80%9f%e9%96%8b%e7%99%bc-css-%e5%b7%a5%e5%85%b7-sass/" class="wp_rp_title"&gt;加速開發 CSS 工具: Sass&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/04/css-ie-6-7-8-firefox-hack-%e6%94%af%e6%8f%b4%e9%80%8f%e6%98%8e%e8%83%8c%e6%99%af%e5%9c%96-background-or-img-javascript/" class="wp_rp_title"&gt;[CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript&lt;/a&gt; (8)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/03/2011-osdc-day-1-%e7%ad%86%e8%a8%98/" class="wp_rp_title"&gt;2011 OSDC Day 1 筆記&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/04/how-to-install-livereload-on-windows/" class="wp_rp_title"&gt;Windwos 下安裝 Web Developer tool LiveReload &lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/03/%e5%9c%a8-ie8-firefox-chrome-css-%e7%bd%ae%e4%b8%ad%e8%a7%a3%e6%b1%ba%e6%96%b9%e6%b3%95/" class="wp_rp_title"&gt;在 IE8 FireFox Chrome CSS 置中解決方法&lt;/a&gt; (1)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="browser"></category><category term="chrome"></category><category term="css"></category><category term="google"></category><category term="google extension"></category><category term="responsive design"></category><category term="www"></category></entry><entry><title>小惡魔AppleBOY: Install Nginx + spdy module on Ubuntu or Debian</title><link href="http://blog.wu-boy.com/2013/04/install-nginx-spdy-module-on-ubuntu-or-debian/" rel="alternate"></link><updated>2013-04-30T15:42:30Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/04/install-nginx-spdy-module-on-ubuntu-or-debian/</id><summary type="html">&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/8684224387/" title="nginx-logo by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="320" height="120" alt="nginx-logo" /&gt;&lt;img src="http://farm9.staticflickr.com/8401/8684224387_19de454ebf.jpg" width="320" height="120" alt="nginx-logo" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;上一篇提到 &lt;a href="http://blog.wu-boy.com/2013/04/nginx-1-4-0-support-spdy-module/" target="_blank"&gt;nginx 1.4.0 釋出並支援 SPDY&lt;/a&gt;，教學環境是 CentOS，這次在 Ubuntu 環境編譯遇到 &lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;/usr/bin/ld: cannot find -lperl&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;找不到 perl library，解法可以透過 aptitude 安裝 libperl5.14，安裝好後，到 /usr/lib 底下找到 libperl.so.5.14.2，由於檔案命名關係，請用 ln 將檔案 link 成 libperl.so&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;$ &lt;/span&gt;&lt;span&gt;ln&lt;/span&gt; &lt;span&gt;-s&lt;/span&gt; libperl.so.5.14.2 libperl.so&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;接著可以正確編譯了，底下安裝相關套件&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;$ &lt;/span&gt;&lt;span&gt;aptitude&lt;/span&gt; &lt;span&gt;-y&lt;/span&gt; &lt;span&gt;install&lt;/span&gt; libpcre3-dev libgd-dev libgd2-xpm-dev libgeoip-dev&lt;/div&gt;&lt;/div&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/05/php-fastcgi-with-nginx-on-ubuntu-10-10-maverick/" class="wp_rp_title"&gt;在 Ubuntu 10.10 (Maverick) 架設 Nginx + PHP FastCGI&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/10/php-mvc-framework-nginx-php-fpm/" class="wp_rp_title"&gt;PHP MVC Framework 搭配 Nginx + PHP-FPM 設定檔&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/nginx-1-4-0-support-spdy-module/" class="wp_rp_title"&gt;nginx 1.4.0 釋出並支援 SPDY&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/05/install-nginx-php-fastcgi-on-amazon-linux/" class="wp_rp_title"&gt;在 Fedora 或 Amazon Linux AMI 架設 Nginx + PHP FastCGI &lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/11/nginx-check-if-file-exists/" class="wp_rp_title"&gt;Nginx 判斷檔案是否存在&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/03/ubuntu-debian-%e6%9e%b6%e8%a8%ad-apache-mpm-worker-mod_fcgid-%e7%ad%86%e8%a8%98/" class="wp_rp_title"&gt;Ubuntu (Debian) 架設 apache mpm worker mod_fcgid 筆記 &lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/01/how-to-change-run-levels-and-init-d-scripts-in-ubuntu-debian/" class="wp_rp_title"&gt;How to change run levels and init.d scripts in Ubuntu &amp;#038; Debian&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/02/debian-gnulinux-50-%e7%99%bc%e5%b8%83-zhcon-%e8%a7%a3%e6%b1%ba%e7%b5%82%e7%ab%af%e6%a9%9f%e4%ba%82%e7%a2%bc/" class="wp_rp_title"&gt;[Debian] GNU/Linux 5.0 發布 zhcon 解決終端機亂碼 &lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/08/how-to-disabled-gui-on-ubuntu-12-04-lts/" class="wp_rp_title"&gt;Ubuntu 停止使用 GUI 介面 12.04 LTS&lt;/a&gt; (5)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/06/how-to-install-xdebub-extension-on-ubuntu/" class="wp_rp_title"&gt;PHP 程式設計師必備 Xdebug extension 安裝 on Ubuntu&lt;/a&gt; (0)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="nginx"></category><category term="ubuntu"></category></entry><entry><title>雨蒼的筆記本 : 從高鐵延誤看被輕視的專業</title><link href="http://billy3321.blogspot.com/2013/04/blog-post.html" rel="alternate"></link><updated>2013-04-29T13:58:20Z</updated><author><name>林雨蒼</name><email>noreply@blogger.com</email></author><id>http://billy3321.blogspot.com/2013/04/blog-post.html</id><summary type="html">今天看到蘋果日報以大篇幅報導《幾分鐘可解決的故障 高鐵竟停擺4小時》（註1）這則新聞，讓筆者深深感受到台灣人如何作賤專業。



撰寫過軟體或是維護過資訊系統的人應該很清楚，一個系統出了問題，第一件事情絕對不是，也不該是重開機。有問題出現，代表一定是有程式在特定的系統環境下出錯了。要找出問題，除了從程式碼來尋找以外，還要從系統環境來找。這兩個要素湊起來才能找到問題。但重開機就直接把系統環境還原，因此引發問題產生的原因消滅了，就很難再次找到原因了。重開機看起來是短時間解決了問題，但是問題並沒有真正被解決。一旦滿足了問題發生的條件，這個問題還是會再度出現。所以，通常面對這種狀況，通常會立刻停止運作，在系統中尋找問題。若一時三刻找不到問題，也會立刻傾印（dump）當前系統，確定所有除錯相關數據都有紀錄後，先重開機或重置讓系統恢復運作，減少對線上服務的衝擊，</summary><category term="社會觀察"></category><category term="評論"></category></entry><entry><title>雨蒼的筆記本 : 華人文化傳統的惡性循環</title><link href="http://billy3321.blogspot.com/2013/03/chineseCulture.html" rel="alternate"></link><updated>2013-04-29T13:58:14Z</updated><author><name>林雨蒼</name><email>noreply@blogger.com</email></author><id>http://billy3321.blogspot.com/2013/03/chineseCulture.html</id><summary type="html">“Common sense is the collection of prejudices acquired by age eighteen.”

-- Albert Einstein

「常識就是人到十八歲為止所累積的各種偏見。」




筆者來到中國（中華人民共和國，本文簡稱中國。）工作，距今也約兩三年左右。初來到中國的時候，心中想到的是在台灣時印象中的中國人：大聲喧譁，不守規矩，沒有公德心，短視近利。在中國和中國朋友相處過一陣子以後，筆者也常在中國人（中華人民共和國國民，本文簡稱中國人。）的口中聽到他們印象中的台灣人（中華民國國民，本文稱為台灣人。）。他們口中的台灣人，有禮貌，比較不會吵架，守規矩；但同時也貪小便宜。筆者常常思考，台灣人和中國人究竟差在哪裡？許多中國朋友認為文化大革命把中國（指文化上的中國。）的傳統給革除掉了。保有文化傳統的台灣人因而更為守規矩，更有公德心。</summary><category term="社會觀察"></category><category term="評論"></category></entry><entry><title>小惡魔AppleBOY: nginx 1.4.0 釋出並支援 SPDY</title><link href="http://blog.wu-boy.com/2013/04/nginx-1-4-0-support-spdy-module/" rel="alternate"></link><updated>2013-04-28T08:15:48Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/04/nginx-1-4-0-support-spdy-module/</id><summary type="html">&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/8684224387/" title="nginx-logo by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="320" height="120" alt="nginx-logo" /&gt;&lt;img src="http://farm9.staticflickr.com/8401/8684224387_19de454ebf.jpg" width="320" height="120" alt="nginx-logo" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;很高興看到 &lt;a href="http://nginx.org/" target="_blank"&gt;Nginx&lt;/a&gt; Release 1.4.0 版本，此新版本開始支援 &lt;a href="http://nginx.org/en/docs/http/ngx_http_spdy_module.html" target="_blank"&gt;SPDY module&lt;/a&gt;，對於 SPDY 還不熟悉了解的，可以參考今年 &lt;a href="http://www.webconf.tw" target="_blank"&gt;2013 WebConf&lt;/a&gt; 講師 ihower 介紹的 &lt;a href="http://www.slideshare.net/ihower/a-brief-introduction-to-spdy-http20" target="_blank"&gt;A brief introduction to SPDY &amp;#8211; 邁向 HTTP/2.0&lt;/a&gt;，要提升整個 Web Performance，可以將 SPDY 導入，對於使用 Apache 使用者，請參考 &lt;a href="http://code.google.com/p/mod-spdy/" target="_blank"&gt;mod_spdy&lt;/a&gt;，如果是 Nginx 用戶，在 1.3.x 版本，可以直接用官方 &lt;a href="http://nginx.org/patches/spdy/patch.spdy.txt"&gt;patch&lt;/a&gt;，升級到 1.4.x 就不需要 patch 了，但 OS 是 &lt;a href="http://www.ubuntu.com/" target="_blank"&gt;Ubuntu&lt;/a&gt; 或 &lt;a href="http://www.centos.org/" target="_blank"&gt;CentOS&lt;/a&gt; 系列是需要自行編譯，這次會筆記在 CentOS 下將 spdy 編譯進系統。&lt;/p&gt;
&lt;h3&gt;安裝方式&lt;/h3&gt;
&lt;p&gt;先看 Ngix 是否有支援 spdy，直接下 nginx -V 觀看&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;
nginx version: nginx/1.1.19&lt;br /&gt;
TLS SNI support enabled&lt;br /&gt;
configure arguments: &amp;#8211;prefix=/etc/nginx &amp;#8211;conf-path=/etc/nginx/nginx.conf &amp;#8211;erth=/var/lib/nginx/body &amp;#8211;http-fastcgi-temp-path=/var/lib/nginx/fastcgi &amp;#8211;http-lb/nginx/proxy &amp;#8211;http-scgi-temp-path=/var/lib/nginx/scgi &amp;#8211;http-uwsgi-temp-path==/var/run/nginx.pid &amp;#8211;with-debug &amp;#8211;with-http_addition_module &amp;#8211;with-http_dav_moith-http_image_filter_module &amp;#8211;with-http_realip_module &amp;#8211;with-http_stub_status__xslt_module &amp;#8211;with-ipv6 &amp;#8211;with-sha1=/usr/include/openssl &amp;#8211;with-md5=/usr/includ/buildd/nginx-1.1.19/debian/modules/nginx-auth-pam &amp;#8211;add-module=/build/buildd/d/nginx-1.1.19/debian/modules/nginx-upstream-fair &amp;#8211;add-module=/build/buildd/ng&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;span id="more-4157"&gt;&lt;/span&gt;&lt;br /&gt;
看到上述結果，沒有發現 &lt;span&gt;&lt;strong&gt;http_spdy_module&lt;/strong&gt;&lt;/span&gt; 模組，代表並無編譯進去，底下安裝過程，是基於 CentOS 6.4 Release 環境。安裝前請先下載 &lt;a href="http://nginx.org/download/nginx-1.4.0.tar.gz" target="_blank"&gt;Nginx 1.4.0&lt;/a&gt; 及 &lt;a href="http://www.openssl.org/source/openssl-1.0.1e.tar.gz" target="_blank"&gt;openssl 1.0.1e&lt;/a&gt; 版本。&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;# generate makefile&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;cd&lt;/span&gt; &lt;span&gt;/&lt;/span&gt;tmp&lt;span&gt;/&lt;/span&gt;nginx-1.4.0 &lt;span&gt;&amp;amp;&amp;amp;&lt;/span&gt; .&lt;span&gt;/&lt;/span&gt;configure \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;--prefix&lt;/span&gt;=&lt;span&gt;/&lt;/span&gt;usr&lt;span&gt;/&lt;/span&gt;share&lt;span&gt;/&lt;/span&gt;nginx \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;--sbin-path&lt;/span&gt;=&lt;span&gt;/&lt;/span&gt;usr&lt;span&gt;/&lt;/span&gt;sbin&lt;span&gt;/&lt;/span&gt;nginx \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;--conf-path&lt;/span&gt;=&lt;span&gt;/&lt;/span&gt;etc&lt;span&gt;/&lt;/span&gt;nginx&lt;span&gt;/&lt;/span&gt;nginx.conf \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;--error-log-path&lt;/span&gt;=&lt;span&gt;/&lt;/span&gt;var&lt;span&gt;/&lt;/span&gt;log&lt;span&gt;/&lt;/span&gt;nginx&lt;span&gt;/&lt;/span&gt;error.log \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;--http-log-path&lt;/span&gt;=&lt;span&gt;/&lt;/span&gt;var&lt;span&gt;/&lt;/span&gt;log&lt;span&gt;/&lt;/span&gt;nginx&lt;span&gt;/&lt;/span&gt;access.log \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;--pid-path&lt;/span&gt;=&lt;span&gt;/&lt;/span&gt;var&lt;span&gt;/&lt;/span&gt;run&lt;span&gt;/&lt;/span&gt;nginx.pid \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;--user&lt;/span&gt;=nginx \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;--group&lt;/span&gt;=nginx \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_realip_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_addition_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_xslt_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_image_filter_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_geoip_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_sub_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_dav_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_flv_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_mp4_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_gzip_static_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_random_index_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_secure_link_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_degradation_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_stub_status_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_perl_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;--with-mail&lt;/span&gt; \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-mail_ssl_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_ssl_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; --with-http_spdy_module \&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;--with-openssl&lt;/span&gt;=&lt;span&gt;/&lt;/span&gt;tmp&lt;span&gt;/&lt;/span&gt;openssl-1.0.1e&lt;br /&gt;
&lt;span&gt;cd&lt;/span&gt; &lt;span&gt;/&lt;/span&gt;tmp&lt;span&gt;/&lt;/span&gt;nginx-1.4.0 &lt;span&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span&gt;make&lt;/span&gt; &lt;span&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span&gt;make&lt;/span&gt; &lt;span&gt;install&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;比較需要注意的事，假如系統已經安裝好 nginx 版本，預設執行程式會在 /usr/sbin/nginx，所以編譯時，請務必指定此路徑蓋掉原有的執行檔，這樣系統還是可以透過 init.d 啟動或關閉 nginx。&lt;/p&gt;
&lt;h3&gt;啟動 spdy 模組&lt;/h3&gt;
&lt;p&gt;為了將 https 及 spdy 同時 listen 443 port，OpenSSL 務必支援 &lt;a href="https://technotes.googlecode.com/git/nextprotoneg.html" target="_blank"&gt;Next Protocol Negotiation&lt;/a&gt;，所以版本要 1.0.1 以上。在 nginx.conf 設定如下&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;server &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; listen &lt;span&gt;443&lt;/span&gt; ssl spdy;&lt;br /&gt;
&lt;br /&gt;
&amp;nbsp; &amp;nbsp; ssl_certificate server.crt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; ssl_certificate_key server.key;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; ...&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;h3&gt;偵測伺服器是否支援 spdy&lt;/h3&gt;
&lt;p&gt;經過安裝完成 Nginx with spdy module，要確定伺服器有無支援，可以透過 Firefox addon 或 Chrome extension，底下是 SPDY indicator 下載連結&lt;/p&gt;
&lt;p&gt;* &lt;a href="https://addons.mozilla.org/zh-tw/firefox/addon/spdy-indicator/" target="_blank"&gt;Firefox SPDY indicator&lt;/a&gt;&lt;br /&gt;
* C&lt;a href="https://chrome.google.com/webstore/detail/spdy-indicator/mpbpobfflnpcgagjijhmgnchggcjblin" target="_blank"&gt;hrome SPDY indicator&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;要如何測試呢？打開 Chrome 瀏覽器，輸入 Google 網址，你會發現網址列多一個&lt;span&gt;綠色勾勾&lt;/span&gt;，那就代表伺服器有支援 SPDY Module。&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/05/php-fastcgi-with-nginx-on-ubuntu-10-10-maverick/" class="wp_rp_title"&gt;在 Ubuntu 10.10 (Maverick) 架設 Nginx + PHP FastCGI&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/05/install-nginx-php-fastcgi-on-amazon-linux/" class="wp_rp_title"&gt;在 Fedora 或 Amazon Linux AMI 架設 Nginx + PHP FastCGI &lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/install-nginx-spdy-module-on-ubuntu-or-debian/" class="wp_rp_title"&gt;Install Nginx + spdy module on Ubuntu or Debian&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/10/php-mvc-framework-nginx-php-fpm/" class="wp_rp_title"&gt;PHP MVC Framework 搭配 Nginx + PHP-FPM 設定檔&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/11/nginx-check-if-file-exists/" class="wp_rp_title"&gt;Nginx 判斷檔案是否存在&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/07/%e8%bd%89%e8%b2%bc-ror%ef%bc%9aruby-on-rails%e7%9a%84%e9%83%a8%e7%bd%b2%e6%96%b9%e6%a1%88%e9%81%b8%e6%93%87/" class="wp_rp_title"&gt;[轉貼] RoR：Ruby on Rails的部署方案選擇&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/09/freebsd%e5%ae%89%e8%a3%9d-apache2-worker-php526-mod_fastcgi-php5-fcgi/" class="wp_rp_title"&gt;[FreeBSD]安裝 apache2 (worker) + PHP5.2.6 + mod_fastcgi + php5-fcgi&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/03/freebsdhigh-performance-caching-reverse-proxy-varnish-and-how-to-install-it/" class="wp_rp_title"&gt;[FreeBSD]high performance caching reverse proxy: Varnish (安裝架設篇)&lt;/a&gt; (9)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/07/linux-centos-51-%e5%ae%89%e8%a3%9d-lighttpd-php5-fastcgi-eaccelerator/" class="wp_rp_title"&gt;[Linux] CentOS 5.1 安裝 Lighttpd + PHP5 + FastCgi + eaccelerator&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/linode-nextgen-ram-upgrade/" class="wp_rp_title"&gt;Linode 最後優惠 升級記憶體&lt;/a&gt; (3)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="linux"></category><category term="network"></category><category term="nginx"></category><category term="spdy"></category><category term="www"></category></entry><entry><title>小惡魔AppleBOY: Fabric 管理多台 Linux 機器的 command tool</title><link href="http://blog.wu-boy.com/2013/04/fabric-ssh-for-deploy-or-systems-administration/" rel="alternate"></link><updated>2013-04-25T16:35:37Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/04/fabric-ssh-for-deploy-or-systems-administration/</id><summary type="html">&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/8679381967/" title="python-logo-master-v3-TM by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="320" height="108" alt="python-logo-master-v3-TM" /&gt;&lt;img src="http://farm9.staticflickr.com/8123/8679381967_75cee4e0e9_n.jpg" width="320" height="108" alt="python-logo-master-v3-TM" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;相信 Administrator 管理過兩台以上的 Linux Server 都一定會找 tool 讓多台機器同時執行指令，這也應用在 Deploy 任何 application 到多台機器或者是同時更新系統套件…等，網路上有蠻多套 command line tool 像是 &lt;a href="https://github.com/capistrano/capistrano" target="_blank"&gt;capistrano&lt;/a&gt;、&lt;a href="http://docs.fabfile.org" target="_blank"&gt;Fabric&lt;/a&gt;、&lt;a href="http://code.google.com/p/parallel-ssh/" target="_blank"&gt;pssh&lt;/a&gt;、&lt;a href="http://packages.debian.org/search?keywords=dsh" target="_blank"&gt;dsh&lt;/a&gt;…等都，本篇會以 &lt;a href="http://www.python.org/" target="_blank"&gt;Python&lt;/a&gt; 所推的 Fabric 來做介紹。另外 Ruby 所寫的 capistrano tool 也是不錯的選擇，這兩套其實大同小異，可以將 Deploy 的邏輯寫成單一 file 再透過 task 定義來決定執行的工作。當然你也可以透過此 tool 來管理 local 端動作，但是這有點多此一舉，因為基本的 Shell 就可以完成了，如果熟悉 Python 則選 fabric，如果喜歡寫 &lt;a href="http://www.ruby-lang.org/en/" target="_blank"&gt;Ruby&lt;/a&gt; 則可以試試看 capistrano。&lt;/p&gt;
&lt;h3&gt;安裝方式(Installation)&lt;/h3&gt;
&lt;p&gt;如果是 &lt;a href="http://www.centos.org/" target="_blank"&gt;CentOS&lt;/a&gt; 系列可以透過 yum 套件管理，&lt;a href="http://www.ubuntu.com/" target="_blank"&gt;Ubuntu&lt;/a&gt; 或 &lt;a href="http://www.debian.org/" target="_blank"&gt;Debian&lt;/a&gt; 則是透過 aptitude 方式安裝。&lt;/p&gt;
&lt;p&gt;Yum&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;# install python pip tool and fabric command&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;yum&lt;/span&gt; &lt;span&gt;-y&lt;/span&gt; &lt;span&gt;install&lt;/span&gt; python-pip&lt;br /&gt;
pip-python &lt;span&gt;install&lt;/span&gt; fabric&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;APT&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;# install python easy_install&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;aptitude&lt;/span&gt; &lt;span&gt;-y&lt;/span&gt; &lt;span&gt;install&lt;/span&gt; python-pip&lt;br /&gt;
&lt;span&gt;# install fabric command&lt;/span&gt;&lt;br /&gt;
pip &lt;span&gt;install&lt;/span&gt; fabric&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;安裝 capistrano 可以透過 Ruby gem。&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;$ &lt;/span&gt;gem &lt;span&gt;install&lt;/span&gt; capistrano&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;&lt;span id="more-4137"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;基本介紹&lt;/h3&gt;
&lt;p&gt;Fabric 可以透過 command line 或者是讀取 &lt;span&gt;&lt;strong&gt;fabfile.py&lt;/strong&gt;&lt;/span&gt; 檔案方式來執行，fabfile.py 務必放在執行 fab command 的目錄底下，也就是的命令列所在位置 。假設目前在 /home/appleboy 目錄下，就必須將 fabfile.py 存放在 /home/appleboy。&lt;/p&gt;
&lt;p&gt;簡易設定 /home/appleboy/fabfile.py，內容&lt;/p&gt;
&lt;div class="codecolorer-container python default"&gt;&lt;div class="python codecolorer"&gt;&lt;span&gt;def&lt;/span&gt; hello&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;print&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;Hello world!&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;該目錄底下執行&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;$ fab hello&lt;br /&gt;
Hello world&lt;span&gt;!&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
Done.&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;如果不透過 fabfile.py 檔案的話，你直接打 fab 會得到 Couldn&amp;#8217;t find any fabfiles!，看到這訊息沒關係，一樣可以用指令方式來達成上面的結果。學習 fabric 前，有一個很必要的條件，就是必需熟悉 Linux command 及 Shell script 用法，個人推薦&lt;a href="http://linux.vbird.org/" target="_blank"&gt;鳥哥的網站&lt;/a&gt;，把基礎文件都看過後，就沒有任何 Linux 系統可以難倒你。如何用 fab command 直接得到上述的結果呢？&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;$ &lt;/span&gt;fab &lt;span&gt;-p&lt;/span&gt; xxxx &lt;span&gt;-H&lt;/span&gt; localhost &lt;span&gt;--&lt;/span&gt; &lt;span&gt;'echo &amp;quot;Hello world!&amp;quot;;'&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;上述指令會產生下面結果&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;&amp;#91;&lt;/span&gt;localhost&lt;span&gt;&amp;#93;&lt;/span&gt; Executing task &lt;span&gt;'&amp;lt;remainder&amp;gt;'&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#91;&lt;/span&gt;localhost&lt;span&gt;&amp;#93;&lt;/span&gt; run: &lt;span&gt;echo&lt;/span&gt; &lt;span&gt;&amp;quot;Hello world!&amp;quot;&lt;/span&gt;;&lt;br /&gt;
&lt;span&gt;&amp;#91;&lt;/span&gt;localhost&lt;span&gt;&amp;#93;&lt;/span&gt; out: Hello world&lt;span&gt;!&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#91;&lt;/span&gt;localhost&lt;span&gt;&amp;#93;&lt;/span&gt; out: &lt;br /&gt;
Done.&lt;br /&gt;
Disconnecting from localhost... done.&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;執行 fab 就像是透過 ssh 登入機器，需要帳號及密碼，執行當下就必須提供使用者帳號及密碼，如果沒給參數，預設就是執行該 command 的使用者，-p 則是給密碼，這樣就不會詢問密碼了，-H 是指定要對哪個 host 執行該命令，也許同時 3 台機器，-H 請改寫成 -H web1,web2,web3。要換其他使用者直接加上 -u 參數&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;$ &lt;/span&gt;fab &lt;span&gt;-u&lt;/span&gt; deploy &lt;span&gt;-p&lt;/span&gt; xxxx &lt;span&gt;-H&lt;/span&gt; localhost &lt;span&gt;--&lt;/span&gt; &lt;span&gt;'echo &amp;quot;Hello world!&amp;quot;;'&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;接下來聊聊該如何寫 fabfile.py，fab 有分 local 端或 Host 端執行，如果只用在 local 端就跟寫 Shell script 沒啥不同，fabric 提供了 local function 執行 local command。對於專案而言，你可以建立 fabfile.py 設定檔，裡面寫入&lt;/p&gt;
&lt;div class="codecolorer-container python default"&gt;&lt;div class="python codecolorer"&gt;&lt;span&gt;from&lt;/span&gt; fabric.&lt;span&gt;api&lt;/span&gt; &lt;span&gt;import&lt;/span&gt; local&lt;br /&gt;
&lt;br /&gt;
&lt;span&gt;def&lt;/span&gt; prepare_deploy&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; local&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;git add -p &amp;amp;&amp;amp; git commit&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; local&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;git push&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;執行 fab prepare_deploy 會將專案已修改的 commit 到 server，當然你也可以拆開來執行&lt;/p&gt;
&lt;div class="codecolorer-container python default"&gt;&lt;div class="python codecolorer"&gt;&lt;span&gt;from&lt;/span&gt; fabric.&lt;span&gt;api&lt;/span&gt; &lt;span&gt;import&lt;/span&gt; local&lt;br /&gt;
&lt;br /&gt;
&lt;span&gt;def&lt;/span&gt; clone&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; local&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;git clone git@github.com:appleboy/minify-tool.git&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span&gt;def&lt;/span&gt; commit&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; local&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;git add -p &amp;amp;&amp;amp; git commit&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span&gt;def&lt;/span&gt; push&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; local&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;git push&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span&gt;def&lt;/span&gt; prepare_deploy&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; commit&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; push&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;大家可以依照專案需求來定義工作項目，好讓團隊所有的成員都可以使用。&lt;/p&gt;
&lt;h3&gt;錯誤處理&lt;/h3&gt;
&lt;p&gt;看到上面例子，可以知道透過 fab clone 來初始化專案，執行後，發現多了 minify-tool 目錄，但是再執行同樣指令一次呢？會發現出現底下錯誤訊息&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;&amp;#91;&lt;/span&gt;localhost&lt;span&gt;&amp;#93;&lt;/span&gt; local: &lt;span&gt;git clone&lt;/span&gt; &lt;span&gt;git&lt;/span&gt;&lt;span&gt;@&lt;/span&gt;github.com:appleboy&lt;span&gt;/&lt;/span&gt;minify-tool.git&lt;br /&gt;
fatal: destination path &lt;span&gt;'minify-tool'&lt;/span&gt; already exists and is not an empty directory.&lt;br /&gt;
&lt;br /&gt;
Fatal error: &lt;span&gt;local&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; encountered an error &lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;return&lt;/span&gt; code &lt;span&gt;128&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;while&lt;/span&gt; executing &lt;span&gt;'git clone git@github.com:appleboy/minify-tool.git'&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
Aborting.&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;程式就停止了，但是如果底下有必須執行的工作，該怎麼辦，必須要 import with_statement 模組，將程式碼改成底下&lt;/p&gt;
&lt;div class="codecolorer-container python default"&gt;&lt;div class="python codecolorer"&gt;&lt;span&gt;from&lt;/span&gt; &lt;span&gt;__future__&lt;/span&gt; &lt;span&gt;import&lt;/span&gt; with_statement&lt;br /&gt;
&lt;span&gt;from&lt;/span&gt; fabric.&lt;span&gt;api&lt;/span&gt; &lt;span&gt;import&lt;/span&gt; local&lt;span&gt;,&lt;/span&gt; settings&lt;span&gt;,&lt;/span&gt; abort&lt;br /&gt;
&lt;span&gt;from&lt;/span&gt; fabric.&lt;span&gt;contrib&lt;/span&gt;.&lt;span&gt;console&lt;/span&gt; &lt;span&gt;import&lt;/span&gt; confirm&lt;br /&gt;
&lt;br /&gt;
&lt;span&gt;def&lt;/span&gt; clone&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;with&lt;/span&gt; settings&lt;span&gt;&amp;#40;&lt;/span&gt;warn_only&lt;span&gt;=&lt;/span&gt;&lt;span&gt;True&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; result &lt;span&gt;=&lt;/span&gt; local&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;git clone git@github.com:appleboy/minify-tool.git&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;if&lt;/span&gt; result.&lt;span&gt;failed&lt;/span&gt; &lt;span&gt;and&lt;/span&gt; &lt;span&gt;not&lt;/span&gt; confirm&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;Tests failed. Continue anyway?&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; abort&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;Aborting at user request.&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;會發現畫面還是會出現錯誤訊息，最後跳出 confirm 視窗鍵入 Y，結果會得到 Done!，鍵入 N 則得到 Aborting 訊息。&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;&amp;#91;&lt;/span&gt;localhost&lt;span&gt;&amp;#93;&lt;/span&gt; local: &lt;span&gt;git clone&lt;/span&gt; &lt;span&gt;git&lt;/span&gt;&lt;span&gt;@&lt;/span&gt;github.com:appleboy&lt;span&gt;/&lt;/span&gt;minify-tool.git&lt;br /&gt;
fatal: destination path &lt;span&gt;'minify-tool'&lt;/span&gt; already exists and is not an empty directory.&lt;br /&gt;
&lt;br /&gt;
Warning: &lt;span&gt;local&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; encountered an error &lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;return&lt;/span&gt; code &lt;span&gt;128&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;while&lt;/span&gt; executing &lt;span&gt;'git clone git@github.com:appleboy/minify-tool.git'&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
Tests failed. Continue anyway? &lt;span&gt;&amp;#91;&lt;/span&gt;Y&lt;span&gt;/&lt;/span&gt;n&lt;span&gt;&amp;#93;&lt;/span&gt; y&lt;br /&gt;
&lt;br /&gt;
Done.&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;接著來定義 deploy 工作內容&lt;/p&gt;
&lt;div class="codecolorer-container python default"&gt;&lt;div class="python codecolorer"&gt;&lt;span&gt;def&lt;/span&gt; deploy&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; code_dir &lt;span&gt;=&lt;/span&gt; &lt;span&gt;'minify-tool'&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;with&lt;/span&gt; &lt;span&gt;cd&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;code_dir&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; run&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;git pull&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;上面多了二個函式，就是 cd 和 run，cd 很直覺，就跟 Linux command 一樣，run 跟 local 不同的地方就是 run 是用來管理遠端機器。&lt;/p&gt;
&lt;h3&gt;定義 Host&lt;/h3&gt;
&lt;p&gt;最前面有提到可以用 -H 方式定義，那也可以直些寫在 fabfile.py 設定檔&lt;/p&gt;
&lt;div class="codecolorer-container python default"&gt;&lt;div class="python codecolorer"&gt;env.&lt;span&gt;hosts&lt;/span&gt; &lt;span&gt;=&lt;/span&gt; &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;'127.0.0.1'&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;br /&gt;
env.&lt;span&gt;hosts&lt;/span&gt; &lt;span&gt;=&lt;/span&gt; &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;'localhost'&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;br /&gt;
env.&lt;span&gt;hosts&lt;/span&gt; &lt;span&gt;=&lt;/span&gt; &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;'web1'&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;上面寫法都正確，host name 可以直接在 /etc/hosts 檔案內定義，將程式碼改為底下&lt;/p&gt;
&lt;div class="codecolorer-container python default"&gt;&lt;div class="python codecolorer"&gt;env.&lt;span&gt;hosts&lt;/span&gt; &lt;span&gt;=&lt;/span&gt; &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;'my_server'&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span&gt;def&lt;/span&gt; deploy&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; code_dir &lt;span&gt;=&lt;/span&gt; &lt;span&gt;'minify-tool'&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;with&lt;/span&gt; settings&lt;span&gt;&amp;#40;&lt;/span&gt;warn_only&lt;span&gt;=&lt;/span&gt;&lt;span&gt;True&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;if&lt;/span&gt; run&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;test -d %s&amp;quot;&lt;/span&gt; % code_dir&lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;failed&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; run&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;git clone git@github.com:appleboy/minify-tool.git %s&amp;quot;&lt;/span&gt; % code_dir&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;with&lt;/span&gt; &lt;span&gt;cd&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;code_dir&lt;span&gt;&amp;#41;&lt;/span&gt;:&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; run&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;git pull&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;如果沒有定義 env.hosts，你也可以執行&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;$ &lt;/span&gt;fab &lt;span&gt;-H&lt;/span&gt; web1 deploy&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;這次先介紹到這裡，或許之後有機會來介紹進階用法，當然可以先參考看看 &lt;a href="http://docs.fabfile.org" target="_blank"&gt;fabric document&lt;/a&gt;。&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/03/2011-osdc-day-1-%e7%ad%86%e8%a8%98/" class="wp_rp_title"&gt;2011 OSDC Day 1 筆記&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/10/install-ruby-rubygems-compass-on-centos/" class="wp_rp_title"&gt;在 CentOS 上面安裝 Ruby 環境&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/05/python-ossf%e8%87%aa%e7%94%b1%e8%bb%9f%e9%ab%94%e9%91%84%e9%80%a0%e5%a0%b4-python-network-programming-%e9%80%b2%e9%9a%8e/" class="wp_rp_title"&gt;[Python] OSSF::自由軟體鑄造場 Python network programming -進階&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/04/%e9%ab%98%e9%9b%84-python-%e5%85%a5%e9%96%80-python-tutorial/" class="wp_rp_title"&gt;[高雄] Python 入門 &amp;#8211; Python tutorial&lt;/a&gt; (5)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/04/django-web-framework-django-%e5%88%9d%e9%9a%8e%e5%ad%b8%e7%bf%92%e5%bf%83%e5%be%97/" class="wp_rp_title"&gt;[Django] Web Framework- Django -初階學習心得&lt;/a&gt; (5)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/03/google-app-engine-sdk%ef%bc%9apython-%e5%9f%ba%e6%9c%ac%e6%95%99%e5%ad%b8%e5%ae%89%e8%a3%9d/" class="wp_rp_title"&gt; Google App Engine SDK：python 基本教學安裝&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/06/%e7%b6%b2%e7%ab%99-%e5%a5%bd%e7%ab%99%e9%80%a3%e7%b5%90-%e4%b8%89/" class="wp_rp_title"&gt;[網站] 好站連結 (三)&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/10/how-to-install-livereload/" class="wp_rp_title"&gt;LiveReload 網頁程式設計師必備工具&lt;/a&gt; (4)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/05/%e7%b6%b2%e7%ab%99-%e5%a5%bd%e7%ab%99%e9%80%a3%e7%b5%90%e4%b8%80/" class="wp_rp_title"&gt;[網站] 好站連結(一)&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2006/10/linux-%e4%bd%bf%e7%94%a8-yum-%e6%9b%b4%e6%96%b0-redhat-enterprise-server-4/" class="wp_rp_title"&gt;[Linux] 使用 yum 更新 redhat enterprise server 4&lt;/a&gt; (0)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="capistrano"></category><category term="fabric"></category><category term="linux"></category><category term="python"></category><category term="ruby"></category></entry><entry><title>小惡魔AppleBOY: Linode 最後優惠 升級記憶體</title><link href="http://blog.wu-boy.com/2013/04/linode-nextgen-ram-upgrade/" rel="alternate"></link><updated>2013-04-13T03:20:55Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/04/linode-nextgen-ram-upgrade/</id><summary type="html">&lt;div&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" alt="Linode VPS" /&gt;&lt;img src="http://www.linode.com/images/linode_logo_gray.png" alt="Linode VPS" /&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href="http://www.linode.com/" target="_blank"&gt;Linode&lt;/a&gt; 最後的&lt;a href="http://blog.linode.com/2013/04/09/linode-nextgen-ram-upgrade/" target="_blank"&gt;優惠出來&lt;/a&gt;了，之前寫了一篇 &lt;a href="http://blog.wu-boy.com/2013/03/linode-nextgen-the-network-and-hardware/" target="_blank"&gt;Linode VPS 升級網路及硬體設備&lt;/a&gt;，回顧 Linode 今年的優惠大清倉，第一次專注在網路效能及流量頻寬升級，第二次則著重在硬體升級，也就是升級 CPU，那這次要升級什麼呢，難不成 Linode 有聽到上一篇最後我講到的心聲，就是記憶體升級啦，Linode 大手筆將全部 Plan 的記憶體都 double，底下這張圖就是升級過後的價目表。&lt;/p&gt;
&lt;p&gt;&lt;a href="http://www.flickr.com/photos/appleboy/8644720634/" title="Linode - Xen VPS Hosting 2013-04-13 11-04-36 by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="500" height="198" alt="Linode - Xen VPS Hosting 2013-04-13 11-04-36" /&gt;&lt;img src="http://farm9.staticflickr.com/8523/8644720634_2aa50ba238.jpg" width="500" height="198" alt="Linode - Xen VPS Hosting 2013-04-13 11-04-36" /&gt;&lt;/a&gt;&lt;br /&gt;
&lt;span id="more-4127"&gt;&lt;/span&gt;&lt;br /&gt;
最便宜的方案就有 1G 了 Ram，每個月 2TB 流量，8 CPU，一個月才 20美金，真的是蠻便宜的，現在問我 AWS 跟 Linode 選哪個，我會大力推薦 Lindoe 了，不過升級此 Ram，每個方案會多 0.05 美金，所以最低消費從每個月 19.95 USD 會變成 20 USD，不過還是很值得啦。現在可以馬上登入 Linode 後台按下升級按鈕，系統會自動升級，並且重新開機。&lt;/p&gt;
&lt;p&gt;目前可以升級的區域如下&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;
Fremont, CA: TBD&lt;br /&gt;
Dallas, TX: Upgrades are available&lt;br /&gt;
Atlanta, GA: Upgrades are available&lt;br /&gt;
Newark, NJ: Upgrades are available&lt;br /&gt;
London, UK: Upgrades are available&lt;br /&gt;
Tokyo, JP: Upgrades are available&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;日本那邊已經升級完成，&lt;del datetime="2013-04-13T03:20:07+00:00"&gt;但是我的 Linode 似乎沒看到升級按鈕，寫個 Ticket 詢問看看。&lt;/del&gt;Enjoy it。&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/03/linode-nextgen-the-network-and-hardware/" class="wp_rp_title"&gt;Linode VPS 升級網路及硬體設備&lt;/a&gt; (5)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/12/linode-storage-increased-by-20/" class="wp_rp_title"&gt;虛擬主機商 Linode 增加 20% 儲存空間&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/09/linode-vps-inbound-%e6%b5%81%e9%87%8f%e5%b0%87%e4%b8%8d%e5%86%8d%e6%94%b6%e8%b2%bb/" class="wp_rp_title"&gt;Linode VPS Inbound 流量將不再收費&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/05/vps-%e8%99%9b%e6%93%ac%e4%b8%bb%e6%a9%9f-linode-720-%e4%bd%bf%e7%94%a8%e5%bf%83%e5%be%97-%e4%b8%80/" class="wp_rp_title"&gt;[VPS] 虛擬主機 Linode 720 使用心得 (一)&lt;/a&gt; (9)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/12/%e8%99%9b%e6%93%ac%e4%b8%bb%e6%a9%9f-vps-linode-%e8%b4%88%e9%80%81-100000-%e7%be%8e%e5%85%83%e7%b5%a6%e6%96%b0%e8%a8%bb%e5%86%8a%e6%9c%83%e5%93%a1/" class="wp_rp_title"&gt;[虛擬主機] VPS Linode 贈送 $100,000 美元給新註冊會員&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/12/%e5%9c%8b%e5%a4%96-vps-%e8%99%9b%e6%93%ac%e4%b8%bb%e6%a9%9f%e6%95%88%e8%83%bd%e6%af%94%e8%bc%83/" class="wp_rp_title"&gt;國外 VPS 虛擬主機效能比較&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/nginx-1-4-0-support-spdy-module/" class="wp_rp_title"&gt;nginx 1.4.0 釋出並支援 SPDY&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/03/freebsdhigh-performance-caching-reverse-proxy-varnish-and-how-to-install-it/" class="wp_rp_title"&gt;[FreeBSD]high performance caching reverse proxy: Varnish (安裝架設篇)&lt;/a&gt; (9)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/09/jquery-ajax-%e5%ad%b8%e7%bf%92%e7%ad%86%e8%a8%98-%e4%b8%80-%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8-json-%e9%a9%97%e8%ad%89%e4%bd%bf%e7%94%a8%e8%80%85%e8%a1%a8%e5%96%ae/" class="wp_rp_title"&gt;[jQuery] AJAX 學習筆記 (一) 如何使用 JSON 驗證使用者表單&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2007/03/www-%e7%b6%b2%e7%ab%99%e5%88%86%e6%b5%81%e5%95%8f%e9%a1%8c%ef%bc%8c%e5%9c%a8ptt%e4%b8%8a%e9%9d%a2%e7%9c%8b%e5%88%b0%e4%b8%80%e7%af%87%e6%96%87%e7%ab%a0/" class="wp_rp_title"&gt;[www] 網站分流問題&lt;/a&gt; (5)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="linode"></category><category term="linux"></category><category term="network"></category><category term="vps"></category><category term="www"></category></entry><entry><title>小惡魔AppleBOY: [小技巧] JavaScript Cross Browser Best Practices</title><link href="http://blog.wu-boy.com/2013/04/javascript-cross-browser-best-practices/" rel="alternate"></link><updated>2013-04-12T02:50:55Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/04/javascript-cross-browser-best-practices/</id><summary type="html">&lt;div&gt;&lt;a title="ie-logo-small by appleboy46, on Flickr" href="http://www.flickr.com/photos/appleboy/8443574444/"&gt;&lt;img alt="ie-logo-small" class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="240" height="240" /&gt;&lt;img alt="ie-logo-small" src="http://farm9.staticflickr.com/8216/8443574444_c01f821c31_m.jpg" width="240" height="240" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;先前寫了一篇 &lt;a href="http://blog.wu-boy.com/2013/02/testing-for-internet-explorer-with-web-page/" target="_blank"&gt;modern.IE 的使用方式及介紹&lt;/a&gt;，今天在 &lt;a href="http://Facebook.com" target="_blank"&gt;Facebook&lt;/a&gt; 上看到 &lt;a href="https://twitter.com/ericsk" target="_blank"&gt;Eric Shangkuan&lt;/a&gt; 說已經有了&lt;a href="http://www.modern.ie/zh-tw" target="_blank"&gt;中文介面&lt;/a&gt;，如果你的瀏覽器是中文版，應該就可以直接看到中文介面了，裡面有篇文章非常重要，寫 Web 的工程師都必須注意，那就是 &lt;a href="http://www.modern.ie/zh-tw/cross-browser-best-practices" target="_blank"&gt;Cross Browser Best Practices&lt;/a&gt;，這篇文章教您如何撰寫相容於舊版 IE 瀏覽器的一些小技巧，這些技巧也不只用在 IE 上，更是教您在實做 CSS，JavaScript 的注意事項。我們來看看 Javascript 的小技巧。&lt;br /&gt;
&lt;span id="more-4100"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;不要再使用 navigator.userAgent&lt;/h3&gt;
&lt;p&gt;為了知道使用者 Browser 資訊，之前有寫篇 &lt;a href="http://blog.wu-boy.com/2010/10/jquery-%E5%81%B5%E6%B8%AC%E7%80%8F%E8%A6%BD%E5%99%A8%E7%89%88%E6%9C%AC-%E4%BD%9C%E6%A5%AD%E7%B3%BB%E7%B5%B1os-detection/" target="_blank"&gt;jQuery 偵測瀏覽器版本, 作業系統(OS detection)&lt;/a&gt;，內容使用 navigator.userAgent 來取得使用者瀏覽器及裝置資訊，開發者為了 IE 各版本的相容，所以透過此方式來知道 IE 各版本，進而在 JS 做處理，但是有時候並不是這麼準確，因為目前市面上裝置實在是太多種了，手機，平板，電視一堆等等，為了支援各種裝置，請不要再用 navigator.userAgent 來判斷了，現在取而代之的就是用 &lt;a href="http://modernizr.com/" target="_blank"&gt;Modernizr&lt;/a&gt;，用來偵測您的 Browser 有無任何您所想要的功能，像是 Html5 的 &lt;a href="http://www.w3schools.com/html/html5_canvas.asp" target="_blank"&gt;Canvas&lt;/a&gt;，利用 &lt;a href="http://modernizr.com/" target="_blank"&gt;Modernizr&lt;/a&gt; 來判斷是否支援，這時候各種裝置就不會因為 JS 沒有判斷到而產生錯誤 ，尤其是在電視介面或 Android 平板，踩到很多雷阿。詳細資訊可以參考此&lt;a href="http://msdn.microsoft.com/en-us/magazine/hh475813.aspx" target="_blank"&gt;連結&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;簡單來說 Canvas 在 IE9 才有支援，所以針對 IE 部份，我們使用 navigator.userAgent 來判斷&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;script type&lt;span&gt;=&lt;/span&gt;&lt;span&gt;&amp;quot;text/javascript&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;function&lt;/span&gt; getInternetExplorerVersion&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;// Returns the version of Internet Explorer or a -1 for other browsers.&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;var&lt;/span&gt; rv &lt;span&gt;=&lt;/span&gt; &lt;span&gt;-&lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;if&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;navigator.&lt;span&gt;appName&lt;/span&gt; &lt;span&gt;==&lt;/span&gt; &lt;span&gt;'Microsoft Internet Explorer'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;var&lt;/span&gt; ua &lt;span&gt;=&lt;/span&gt; navigator.&lt;span&gt;userAgent&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; varre &amp;nbsp; &amp;nbsp;&lt;span&gt;=&lt;/span&gt; newRegExp&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;MSIE ([0-9]{1,}[&lt;span&gt;\.&lt;/span&gt;0-9]{0,})&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;if&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;re.&lt;span&gt;exec&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;ua&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;!=&lt;/span&gt; &lt;span&gt;null&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; rv &lt;span&gt;=&lt;/span&gt; parseFloat&lt;span&gt;&amp;#40;&lt;/span&gt; RegExp.$1 &lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;return&lt;/span&gt; rv&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;function&lt;/span&gt; &lt;span&gt;onLoad&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;var&lt;/span&gt; version &lt;span&gt;=&lt;/span&gt; GetInternetExplorerVersion&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;if&lt;/span&gt; &lt;span&gt;&amp;#40;&lt;/span&gt;version &lt;span&gt;&amp;lt;&lt;/span&gt; &lt;span&gt;9&lt;/span&gt; &lt;span&gt;&amp;amp;&amp;amp;&lt;/span&gt; version &lt;span&gt;&amp;gt;&lt;/span&gt; &lt;span&gt;-&lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;// Code to run in Internet Explorer 9 or earlier.&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;lt;/&lt;/span&gt;script&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;但是如果遇到 Safari, Chrome, Android, IPad, IPhone 版本呢，也很好解決，就是一直些判斷式，那為什麼不換個角度去想，直接判斷有無 Cnavas 功能即可，透過 &lt;a href="http://modernizr.com/" target="_blank"&gt;Modernizr&lt;/a&gt; 套件可以簡單做到。另外 jQuery 在 1.9 版也直接捨棄了 &lt;a href="http://api.jquery.com/jQuery.browser/" target="_blank"&gt;jQuery.browser&lt;/a&gt; API 功能，取而代之的也是推薦 &lt;a href="http://modernizr.com/" target="_blank"&gt;Modernizr&lt;/a&gt;。&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;&lt;span&gt;if&lt;/span&gt; &lt;span&gt;&amp;#40;&lt;/span&gt;Modernizr.&lt;span&gt;canvas&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; console.&lt;span&gt;info&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'Your browser support canvas'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;h3&gt;在 document ready 內不要執行大量 script&lt;/h3&gt;
&lt;p&gt;現在大部分的網站缺少不了的就是 jQuery，jQuery 提供了 $(document).ready() 在 html load 完成後可以快速執行 JavaScript，在大多的狀況下都可以正確執行的，但是如果在 $(document).ready() 寫入大量及複雜的 Script，只會讓瀏覽器呆滯而不能使用，所以盡可能減少執行的程式碼，等到使用者真正要執行功能的時候在進行呼叫即可。通常像是 tooltip 或 dialog 可以延遲等到要出現的時候在初始化即可。&lt;/p&gt;
&lt;p&gt;簡單舉個例子，在 form 表單大家常用的 jQuery Plugin datepicker，通常初始化會透過底下方式來寫:&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;$&lt;span&gt;&amp;#40;&lt;/span&gt;document&lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;ready&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt; &lt;span&gt;function&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; $&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;input.date&amp;quot;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;datepicker&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; minDate&lt;span&gt;:&lt;/span&gt; moment&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;subtract&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt; &lt;span&gt;&amp;quot;months&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;1&lt;/span&gt; &lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;toDate&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; maxDate&lt;span&gt;:&lt;/span&gt; moment&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;add&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt; &lt;span&gt;&amp;quot;months&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;1&lt;/span&gt; &lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;toDate&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; dateFormat&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;quot;d M, y&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; constrainInput&lt;span&gt;:&lt;/span&gt; &lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; beforeShowDay&lt;span&gt;:&lt;/span&gt; $.&lt;span&gt;datepicker&lt;/span&gt;.&lt;span&gt;noWeekends&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;用這缺點就是當 html 完成載入後，jQuery 會開始找 input 並且符合 class 為 date 的 元件，這會 delay 使用者正常使用網頁，比較好的解決方式就是 bind 在 input 的 focus 事件上。&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;$&lt;span&gt;&amp;#40;&lt;/span&gt;document&lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;on&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt; &lt;span&gt;&amp;quot;focus&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;&amp;quot;input.date:not(.hasDatepicker)&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;function&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; $&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;this&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;datepicker&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; minDate&lt;span&gt;:&lt;/span&gt; moment&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;subtract&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt; &lt;span&gt;&amp;quot;months&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;1&lt;/span&gt; &lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;toDate&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; maxDate&lt;span&gt;:&lt;/span&gt; moment&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;add&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt; &lt;span&gt;&amp;quot;months&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;1&lt;/span&gt; &lt;span&gt;&amp;#41;&lt;/span&gt;.&lt;span&gt;toDate&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; dateFormat&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;quot;d M, y&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; constrainInput&lt;span&gt;:&lt;/span&gt; &lt;span&gt;true&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; beforeShowDay&lt;span&gt;:&lt;/span&gt; $.&lt;span&gt;datepicker&lt;/span&gt;.&lt;span&gt;noWeekends&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;此寫法有另外的優點就是當如果有建立新的 input.date 元件，可以動態初始化元件。初始過的元件，我們就動態增加 hasDatepicker class 來判斷是否已經初始化。&lt;/p&gt;
&lt;h3&gt;網頁開始先優先執行 AJAX&lt;/h3&gt;
&lt;p&gt;由於執行 AJAX 需要一段時間，所以請在 html load 之前就開始執行，並不需要等到 $(document).ready() 後才執行，另外在 AJAX 完成執行後的 Complete function 加入 $(document).ready() 函式確保 html 已載入完成。&lt;/p&gt;
&lt;h3&gt;延遲載入 social button(Facebook Like, Google +1, Twitter)&lt;/h3&gt;
&lt;p&gt;現在大多網站都有一大堆分享機制（social networks），像是 Facebook Like、Twitter 等等，但是這些 JS 的載入，都大大影響到網頁的載入時間，其實最主要的解決方式就是務必思考哪些頁面才需要這些 button，能減少載入外部 JS 就是提昇網頁載入速度，在以前載入外部 JS 的作法就是底下&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;script&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;d&lt;span&gt;,&lt;/span&gt; s&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;var&lt;/span&gt; js&lt;span&gt;,&lt;/span&gt; fjs &lt;span&gt;=&lt;/span&gt; d.&lt;span&gt;getElementsByTagName&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;s&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; load &lt;span&gt;=&lt;/span&gt; &lt;span&gt;function&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;url&lt;span&gt;,&lt;/span&gt; id&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;if&lt;/span&gt; &lt;span&gt;&amp;#40;&lt;/span&gt;d.&lt;span&gt;getElementById&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;id&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; js &lt;span&gt;=&lt;/span&gt; d.&lt;span&gt;createElement&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;s&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; js.&lt;span&gt;src&lt;/span&gt; &lt;span&gt;=&lt;/span&gt; url&lt;span&gt;;&lt;/span&gt; js.&lt;span&gt;id&lt;/span&gt; &lt;span&gt;=&lt;/span&gt; id&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; fjs.&lt;span&gt;parentNode&lt;/span&gt;.&lt;span&gt;insertBefore&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;js&lt;span&gt;,&lt;/span&gt; fjs&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; load&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'//connect.facebook.net/en_US/all.js#appId=272697932759946&amp;amp;xfbml=1'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;'fbjssdk'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; load&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'http://apis.google.com/js/plusone.js'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;'gplus1js'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; load&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'//platform.twitter.com/widgets.js'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;'tweetjs'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;document&lt;span&gt;,&lt;/span&gt; &lt;span&gt;'script'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;lt;/&lt;/span&gt;script&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;現在請改寫成底下&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;&lt;span&gt;&amp;lt;&lt;/span&gt;script&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;function&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;w&lt;span&gt;,&lt;/span&gt; d&lt;span&gt;,&lt;/span&gt; s&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;function&lt;/span&gt; go&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;var&lt;/span&gt; js&lt;span&gt;,&lt;/span&gt; fjs &lt;span&gt;=&lt;/span&gt; d.&lt;span&gt;getElementsByTagName&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;s&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; load &lt;span&gt;=&lt;/span&gt; &lt;span&gt;function&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;url&lt;span&gt;,&lt;/span&gt; id&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;if&lt;/span&gt; &lt;span&gt;&amp;#40;&lt;/span&gt;d.&lt;span&gt;getElementById&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;id&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;span&gt;return&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; js &lt;span&gt;=&lt;/span&gt; d.&lt;span&gt;createElement&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;s&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; js.&lt;span&gt;src&lt;/span&gt; &lt;span&gt;=&lt;/span&gt; url&lt;span&gt;;&lt;/span&gt; js.&lt;span&gt;id&lt;/span&gt; &lt;span&gt;=&lt;/span&gt; id&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; fjs.&lt;span&gt;parentNode&lt;/span&gt;.&lt;span&gt;insertBefore&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;js&lt;span&gt;,&lt;/span&gt; fjs&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; load&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'//connect.facebook.net/en_US/all.js#appId=272697932759946&amp;amp;xfbml=1'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;'fbjssdk'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; load&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'http://apis.google.com/js/plusone.js'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;'gplus1js'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; load&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'//platform.twitter.com/widgets.js'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;'tweetjs'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;if&lt;/span&gt; &lt;span&gt;&amp;#40;&lt;/span&gt;w.&lt;span&gt;addEventListener&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt; w.&lt;span&gt;addEventListener&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;load&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; go&lt;span&gt;,&lt;/span&gt; &lt;span&gt;false&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;else&lt;/span&gt; &lt;span&gt;if&lt;/span&gt; &lt;span&gt;&amp;#40;&lt;/span&gt;w.&lt;span&gt;attachEvent&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt; w.&lt;span&gt;attachEvent&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;quot;onload&amp;quot;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;go&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;window&lt;span&gt;,&lt;/span&gt; document&lt;span&gt;,&lt;/span&gt; &lt;span&gt;'script'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;lt;/&lt;/span&gt;script&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;由於各瀏覽器相容問題，所以判斷是否支援 addEventListener 或 attachEvent，在 onload 後才開始執行。更多詳細內容可以參考 &lt;a href="http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough" target="_blank"&gt;requesting these scripts&lt;/a&gt;&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/02/testing-for-internet-explorer-with-web-page/" class="wp_rp_title"&gt;使用不同 IE 版本測試網站&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/05/jquery-%e8%a7%a3%e6%b1%ba-ie6-png-%e9%80%8f%e6%98%8e%e8%83%8c%e6%99%af-supersleight-jquery-plugin-for-transparent-pngs-in-ie6/" class="wp_rp_title"&gt;[jQuery] 解決 IE6 PNG 透明背景 (Supersleight jQuery Plugin for Transparent PNGs in IE6)&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/05/internet-explorer-6-countdown/" class="wp_rp_title"&gt;IE 6 瀏覽器用戶全球分佈&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/10/%e5%88%a9%e7%94%a8-jquery-%e5%8b%95%e6%85%8b%e6%94%b9%e8%ae%8a%e7%b6%b2%e7%ab%99-css/" class="wp_rp_title"&gt;利用 jQuery 動態改變網站 CSS&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/10/jquery-%e5%81%b5%e6%b8%ac%e7%80%8f%e8%a6%bd%e5%99%a8%e7%89%88%e6%9c%ac-%e4%bd%9c%e6%a5%ad%e7%b3%bb%e7%b5%b1os-detection/" class="wp_rp_title"&gt;jQuery 偵測瀏覽器版本, 作業系統(OS detection)&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/04/use-on-api-to-attach-event-handlers-on-jquery/" class="wp_rp_title"&gt;jQuery 1.7 透過 on 來綁定事件&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/03/jquery-different-form-stoppropagation-with-stopimmediatepropagation/" class="wp_rp_title"&gt;jQuery stopPropagation 和 stopImmediatePropagation 比較&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/04/backbonejs-framework-tutorial-example-1/" class="wp_rp_title"&gt;Javascript 前端工具 Backbone.js Framework 初學介紹&lt;/a&gt; (5)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/04/%e4%bd%a0%e4%b8%8d%e5%8f%af%e4%b8%8d%e7%9f%a5%e7%9a%84-json-%e5%9f%ba%e6%9c%ac%e4%bb%8b%e7%b4%b9/" class="wp_rp_title"&gt;你不可不知的 JSON 基本介紹&lt;/a&gt; (8)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/09/jquery-ajax-%e5%ad%b8%e7%bf%92%e7%ad%86%e8%a8%98-%e4%b8%80-%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8-json-%e9%a9%97%e8%ad%89%e4%bd%bf%e7%94%a8%e8%80%85%e8%a1%a8%e5%96%ae/" class="wp_rp_title"&gt;[jQuery] AJAX 學習筆記 (一) 如何使用 JSON 驗證使用者表單&lt;/a&gt; (3)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="ajax"></category><category term="browser"></category><category term="chrome"></category><category term="firefox"></category><category term="ie"></category><category term="javascript"></category><category term="javascrpt"></category><category term="jquery"></category><category term="modern.ie"></category></entry><entry><title>小惡魔AppleBOY: MySQL 用 MySQLDump 備份 InnoDB 注意事項</title><link href="http://blog.wu-boy.com/2013/04/best-mysqldump-innodb-data/" rel="alternate"></link><updated>2013-04-05T02:20:22Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/04/best-mysqldump-innodb-data/</id><summary type="html">&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/8171305355/" title="mysql_logo by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="300" alt="mysql_logo" /&gt;&lt;img src="http://farm9.staticflickr.com/8488/8171305355_7fb578fdc9.jpg" width="300" alt="mysql_logo" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;大家在備份 &lt;a href="http://www.mysql.com/" target="_blank"&gt;MySQL&lt;/a&gt; 資料庫時一定是使 mysqldump 指令，不管是 MyISAM 或 &lt;a href="http://dev.mysql.com/doc/refman/5.5/en/innodb-storage-engine.html" target="_blank"&gt;InnoDB&lt;/a&gt; 都一樣， 在處理 InnoDB 格式備份時使用 &lt;strong&gt;&lt;span&gt;mysqldump -single-transaction&lt;/span&gt;&lt;/strong&gt;，但是你會發現在大多的備份狀況都是 OK 的，只是有時候會發現有的資料表只有備份到 structure 而無備份到 Data？&lt;/p&gt;
&lt;p&gt;在 &lt;a href="http://www.mysqlperformanceblog.com" target="_blank"&gt;MySQL Performance Blog&lt;/a&gt; 看到這篇講解 &lt;a href="http://www.mysqlperformanceblog.com/2012/03/23/best-kept-mysqldump-secret/" target="_blank"&gt;Best kept MySQLDump Secret&lt;/a&gt;，此問題出在 how MySQL’s Transactions work with DDL，ALTER TABLE 會建立一個 temporary table，並且將該資料表資料複製過去，接著刪除原有資料表，最後將 temporary table 命名為原來資料表。&lt;/p&gt;
&lt;p&gt;底下是原作者提到的原因&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;How does data visibility works in this case ? DDLs are not transactional and as such the running transaction will not see the contents of old table once it is dropped, transaction also will see the new table which was created after transaction was started, including table created by ALTER TABLE statement. Transactions however apply to DATA which is stored in this table and so data which was inserted after start of transaction (by ALTER TABLE statement) will not be visible. In the end we will get new structure in the dump but no data.&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;最好的解法就是改用 &lt;strong&gt;&lt;span&gt;mysqldump -lock-all-tables&lt;/span&gt;&lt;/strong&gt;，但是備份的時候，資料庫是無法寫入，僅能讀取，也或者可以透過 &lt;a href="http://blog.wu-boy.com/2013/01/percona-xtrabackup-innodb/" target="_blank"&gt;Percona Xtrabackup&lt;/a&gt; 工具來備份 InnoDB。&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/01/percona-xtrabackup-innodb/" class="wp_rp_title"&gt;Percona XtraBackup InnoDB 備份工具&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/11/innodb-as-the-default-mysql-storage-engine/" class="wp_rp_title"&gt;MySQL 預設儲存引擎: InnoDB 介紹&lt;/a&gt; (9)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/03/galera-cluster-for-mysql-multi-master-replication/" class="wp_rp_title"&gt;Galera Cluster for MySQL Multi-master Replication&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/12/mysql-issam-tables-convert-to-innodb/" class="wp_rp_title"&gt;MySQL InnoDB Engine 轉換成 InnoDB&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/06/mysql-%e5%88%a9%e7%94%a8-perl-%e5%96%ae%e8%a1%8c%e5%8d%b0%e5%87%ba-mycnf/" class="wp_rp_title"&gt;[MySQL] 利用 perl 單行印出 my.cnf&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/11/mysql-%e5%bf%85%e8%a6%81%e4%bf%ae%e6%ad%a3%e4%b8%80%e4%ba%9b%e9%a0%90%e8%a8%ad%e5%80%bc-performance-tunning/" class="wp_rp_title"&gt;[MySQL] 必要修正一些預設值 (performance tunning)&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/03/mydumper-%e5%8f%96%e4%bb%a3-mysqldump-%e6%95%88%e8%83%bd/" class="wp_rp_title"&gt;mydumper 取代 mysqldump 效能&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/07/php-%e5%b0%87%e9%95%b7%e6%9c%9f%e5%ae%a3%e5%b0%8e%e7%a8%8b%e5%bc%8f%e8%a8%ad%e8%a8%88%e5%b8%ab%e5%b0%87-extmysql-%e6%94%b9%e7%94%a8-pdo_mysql-%e5%92%8c-mysqli/" class="wp_rp_title"&gt;PHP 將長期宣導程式設計師將 ext/mysql 改用 pdo_mysql 和 mysqli&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/06/%e5%9f%ba%e6%9c%ac%e5%84%aa%e5%8c%96-tuning-apache-%e8%b7%9f-tuning-mysql-%e6%95%88%e8%83%bd/" class="wp_rp_title"&gt;基本優化 tuning apache 跟 tuning mysql 跟 php 效能 &lt;/a&gt; (5)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/05/%e7%b6%b2%e7%ab%99-%e5%a5%bd%e7%ab%99%e9%80%a3%e7%b5%90-%e4%ba%8c/" class="wp_rp_title"&gt;[網站] 好站連結 (二)&lt;/a&gt; (3)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="innodb"></category><category term="myisam"></category><category term="mysql"></category><category term="percona"></category><category term="xtrabackup"></category></entry><entry><title>小惡魔AppleBOY: Galera Cluster for MySQL Multi-master Replication</title><link href="http://blog.wu-boy.com/2013/03/galera-cluster-for-mysql-multi-master-replication/" rel="alternate"></link><updated>2013-03-31T04:48:55Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/03/galera-cluster-for-mysql-multi-master-replication/</id><summary type="html">&lt;div&gt;&lt;a title="galera_mysql_replication by appleboy46, on Flickr" href="http://www.flickr.com/photos/appleboy/8603447002/"&gt;&lt;img alt="galera_mysql_replication" class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="500" height="247" /&gt;&lt;img alt="galera_mysql_replication" src="http://farm9.staticflickr.com/8383/8603447002_050ecd1b53.jpg" width="500" height="247" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;最近公司買了幾台機架伺服器來處理 HTTP 跟 DB Load balancer，要做到 DB 的分散式架構，首先需要同步多台機器資料，也就是寫入或更動任意一台單筆資料，另外平行的機器也會同時進行更新。同步的好處可以用來做備援及分散處理連線，而要做到此功能，可子參考網路上評價不錯的 &lt;a href="http://www.codership.com/content/using-galera-cluster" target="_blank"&gt;Galera Cluster for MySQL&lt;/a&gt; 方案。本篇會介紹在 &lt;a href="http://www.ubuntu.com/" target="_blank"&gt;Ubuntu&lt;/a&gt; 或 &lt;a href="http://www.centos.org/" target="_blank"&gt;CentOS&lt;/a&gt; 6.x final 版本如何安裝 Galera 伺服器套件及設定。要架設 Galera Cluster Server，有兩種套件選擇，一個是 &lt;a href="http://www.percona.com/software/percona-xtradb-cluster" target="_blank"&gt;Percona XtraDB Cluster&lt;/a&gt; 另一個是 &lt;a href="https://downloads.mariadb.org/mariadb-galera/" target="_blank"&gt;MariaDB Galera Cluster&lt;/a&gt;，這次作者會介紹後者的安裝。&lt;/p&gt;
&lt;h3&gt;Galera Cluster 介紹&lt;/h3&gt;
&lt;p&gt;為什麼要選擇 Galera Cluster Server，它有什麼優點及功能呢？MySQL/Galera 是一套可以同步多台 MySQL/InnoDB 機器的叢集系統，底下可以列出功能。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;同步複製資料&lt;/li&gt;
&lt;li&gt;可讀取和寫入叢集系統內任一節點&lt;/li&gt;
&lt;li&gt;自動偵測節點錯誤，如果有節點當機，則叢集系統自動移除該節點&lt;/li&gt;
&lt;li&gt;可任意擴充節點&lt;/li&gt;
&lt;li&gt;採用 row level 方式來平行複製資料&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;從上面功能看來，我們可以平行任意擴充節點，動態增加伺服器到叢集系統，要做到上面功能，就是利用 &lt;a href="http://www.codership.com/products/galera_replication" target="_blank"&gt;Galera library&lt;/a&gt; 來做到同步資料處理，同步的詳細細節，可以參考 Galera library 連結。這邊就不再多描述了。&lt;br /&gt;
&lt;span id="more-4020"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;安裝 Galera Cluster Server&lt;/h3&gt;
&lt;p&gt;本篇介紹的 MySQL Server 是使用 &lt;a href="https://mariadb.org/" target="_blank"&gt;MariaDB&lt;/a&gt; 套件，而不是安裝原始的 MySQL。CentOS 和 Ubuntu 安裝方式雷同，前者是用 yum 後者則是 aptitude，在安裝前請先下載對應的 &lt;a href="https://downloads.mariadb.org/mariadb/repositories/" target="_blank"&gt;repository 設定檔&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;CentOS&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;$ &lt;span&gt;yum&lt;/span&gt; &lt;span&gt;-y&lt;/span&gt; update &lt;span&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span&gt;yum&lt;/span&gt; &lt;span&gt;-y&lt;/span&gt; upgrade&lt;br /&gt;
$ &lt;span&gt;yum&lt;/span&gt; &lt;span&gt;-y&lt;/span&gt; &lt;span&gt;install&lt;/span&gt; MariaDB-Galera-server MariaDB-client galera&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Ubuntu&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;$ &lt;span&gt;aptitude&lt;/span&gt; &lt;span&gt;-y&lt;/span&gt; update&lt;br /&gt;
$ &lt;span&gt;aptitude&lt;/span&gt; &lt;span&gt;-y&lt;/span&gt; &lt;span&gt;install&lt;/span&gt; mariadb-galera-server-&lt;span&gt;5.5&lt;/span&gt; galera&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;啟動 MySQL&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;$ &lt;/span&gt;&lt;span&gt;/&lt;/span&gt;etc&lt;span&gt;/&lt;/span&gt;init.d&lt;span&gt;/&lt;/span&gt;mysql start&lt;/div&gt;&lt;/div&gt;
&lt;h3&gt;設定 Galera Cluster Server&lt;/h3&gt;
&lt;p&gt;先講一下環境，目前總共兩台 Galera Server，IP 分別是:&lt;/p&gt;
&lt;p&gt;Node_1: 192.168.1.100&lt;br /&gt;
Node_2: 192.168.1.101&lt;/p&gt;
&lt;p&gt;建立 Node_1, Node_2 MySQL User，用來認證使用，先進入 MySQL Console.&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;$ mysql &lt;span&gt;-u&lt;/span&gt; root &lt;span&gt;-p&lt;/span&gt; &lt;br /&gt;
Welcome to the MariaDB monitor. &amp;nbsp;Commands end with ; or \g.&lt;br /&gt;
Your MariaDB connection &lt;span&gt;id&lt;/span&gt; is &lt;span&gt;154&lt;/span&gt;&lt;br /&gt;
Server version: 10.0.1-MariaDB-mariadb1~precise-log mariadb.org binary distribution&lt;br /&gt;
&lt;br /&gt;
Copyright &lt;span&gt;&amp;#40;&lt;/span&gt;c&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;2000&lt;/span&gt;, &lt;span&gt;2012&lt;/span&gt;, Oracle, Monty Program Ab and others.&lt;br /&gt;
&lt;br /&gt;
Type &lt;span&gt;'help;'&lt;/span&gt; or &lt;span&gt;'\h'&lt;/span&gt; &lt;span&gt;for&lt;/span&gt; help. Type &lt;span&gt;'\c'&lt;/span&gt; to &lt;span&gt;clear&lt;/span&gt; the current input statement.&lt;br /&gt;
&lt;br /&gt;
MariaDB &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;none&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;建立 cluster 使用者，密碼為 1234，針對 % 跟 localhost 同時建立。&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;MariaDB &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;none&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt; GRANT USAGE ON &lt;span&gt;*&lt;/span&gt;.&lt;span&gt;*&lt;/span&gt; to cluster&lt;span&gt;@&lt;/span&gt;&lt;span&gt;'%'&lt;/span&gt; IDENTIFIED BY &lt;span&gt;'1234'&lt;/span&gt;;&lt;br /&gt;
MariaDB &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;none&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt; GRANT ALL PRIVILEGES on &lt;span&gt;*&lt;/span&gt;.&lt;span&gt;*&lt;/span&gt; to cluster&lt;span&gt;@&lt;/span&gt;&lt;span&gt;'%'&lt;/span&gt;;&lt;br /&gt;
MariaDB &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;none&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt; GRANT USAGE ON &lt;span&gt;*&lt;/span&gt;.&lt;span&gt;*&lt;/span&gt; to cluster&lt;span&gt;@&lt;/span&gt;&lt;span&gt;'localhost'&lt;/span&gt; IDENTIFIED BY &lt;span&gt;'1234'&lt;/span&gt;;&lt;br /&gt;
MariaDB &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;none&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt; GRANT ALL PRIVILEGES on &lt;span&gt;*&lt;/span&gt;.&lt;span&gt;*&lt;/span&gt; to cluster&lt;span&gt;@&lt;/span&gt;&lt;span&gt;'localhost'&lt;/span&gt;;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;在 192.168.1.100 建立 Galera 設定檔 &lt;strong&gt;&lt;span&gt;/etc/mysq/conf.d/wsrep.cnf&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;&amp;#91;&lt;/span&gt;MYSQLD&lt;span&gt;&amp;#93;&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;br /&gt;
&lt;span&gt;wsrep_provider&lt;/span&gt;=&lt;span&gt;/&lt;/span&gt;usr&lt;span&gt;/&lt;/span&gt;lib64&lt;span&gt;/&lt;/span&gt;galera&lt;span&gt;/&lt;/span&gt;libgalera_smm.so &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;br /&gt;
&lt;span&gt;wsrep_cluster_address&lt;/span&gt;=&lt;span&gt;&amp;quot;gcomm://&amp;quot;&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;br /&gt;
&lt;span&gt;wsrep_sst_auth&lt;/span&gt;=cluster:&lt;span&gt;1234&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;重新啟動 mysqld 會看到多 listen 4567 port&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;tcp &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;0&lt;/span&gt; 0.0.0.0:&lt;span&gt;3306&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;0.0.0.0:&lt;span&gt;*&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; LISTEN &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;1118&lt;/span&gt;&lt;span&gt;/&lt;/span&gt;mysqld&lt;br /&gt;
tcp &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;0&lt;/span&gt; 0.0.0.0:&lt;span&gt;4567&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;0.0.0.0:&lt;span&gt;*&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; LISTEN &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;1118&lt;/span&gt;&lt;span&gt;/&lt;/span&gt;mysqld&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;在 192.168.1.101 建立 Galera 設定檔 &lt;strong&gt;&lt;span&gt;/etc/mysq/conf.d/wsrep.cnf&lt;/span&gt;&lt;/strong&gt; 並且將 cluster address 設定為 192.168.1.100&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;&amp;#91;&lt;/span&gt;MYSQLD&lt;span&gt;&amp;#93;&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;br /&gt;
&lt;span&gt;wsrep_provider&lt;/span&gt;=&lt;span&gt;/&lt;/span&gt;usr&lt;span&gt;/&lt;/span&gt;lib64&lt;span&gt;/&lt;/span&gt;galera&lt;span&gt;/&lt;/span&gt;libgalera_smm.so &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;br /&gt;
&lt;span&gt;wsrep_cluster_address&lt;/span&gt;=&lt;span&gt;&amp;quot;gcomm://192.168.1.100:4567&amp;quot;&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;br /&gt;
&lt;span&gt;wsrep_sst_auth&lt;/span&gt;=cluster:&lt;span&gt;1234&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;設定完成後，重新啟動 mysql&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;$ &lt;/span&gt;&lt;span&gt;/&lt;/span&gt;etc&lt;span&gt;/&lt;/span&gt;init.d&lt;span&gt;/&lt;/span&gt;mysql restart&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;要怎麼驗證設定成功呢？可以透過 mysql console 來確認&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;$ &lt;/span&gt;mysql &lt;span&gt;-e&lt;/span&gt; &lt;span&gt;&amp;quot;SHOW STATUS LIKE 'wsrep%';&amp;quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;可以看到結果如下&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;+----------------------------+--------------------------------------------------------------+&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_local_state_uuid &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; b4e876e0-8c1e-11e2-0800-8da732edfe2a &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_protocol_version &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;4&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_last_committed &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;516&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_replicated &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_replicated_bytes &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_received &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;3&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_received_bytes &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;282&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_local_commits &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_local_cert_failures &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_local_bf_aborts &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_local_replays &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_local_send_queue &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_local_send_queue_avg &lt;span&gt;|&lt;/span&gt; &lt;span&gt;0.000000&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_local_recv_queue &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_local_recv_queue_avg &lt;span&gt;|&lt;/span&gt; &lt;span&gt;0.000000&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_flow_control_paused &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;0.000000&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_flow_control_sent &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_flow_control_recv &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_cert_deps_distance &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;0.000000&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_apply_oooe &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;0.000000&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_apply_oool &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;0.000000&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_apply_window &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;0.000000&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_commit_oooe &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;0.000000&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_commit_oool &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;0.000000&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_commit_window &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;0.000000&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_local_state &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;4&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_local_state_comment &amp;nbsp;&lt;span&gt;|&lt;/span&gt; Synced &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_cert_index_size &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_causal_reads &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_incoming_addresses &amp;nbsp; &lt;span&gt;|&lt;/span&gt; xxx.xxx.xxx.xxx:&lt;span&gt;3306&lt;/span&gt;,xxx.xxx.xx.xxx:&lt;span&gt;3306&lt;/span&gt;,xxx.xxx.xxx.xx:&lt;span&gt;3306&lt;/span&gt; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_cluster_conf_id &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;45&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_cluster_size &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &lt;span&gt;3&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_cluster_state_uuid &amp;nbsp; &lt;span&gt;|&lt;/span&gt; b4e876e0-8c1e-11e2-0800-8da732edfe2a &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_cluster_status &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; Primary &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_connected &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; ON &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_local_index &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; &lt;span&gt;0&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_provider_name &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; Galera &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_provider_vendor &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; Codership Oy &lt;span&gt;&amp;lt;&lt;/span&gt;info&lt;span&gt;@&lt;/span&gt;codership.com&lt;span&gt;&amp;gt;&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_provider_version &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; 23.2.4&lt;span&gt;&amp;#40;&lt;/span&gt;r147&lt;span&gt;&amp;#41;&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_ready &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;span&gt;|&lt;/span&gt; ON &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
+----------------------------+--------------------------------------------------------------+&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;看到上述結果，有一個非常重要的數值，那就是 &lt;strong&gt;&lt;span&gt;wsrep_ready&lt;/span&gt;&lt;/strong&gt;，正確值是 ON，另外看看 &lt;strong&gt;&lt;span&gt;wsrep_cluster_size&lt;/span&gt;&lt;/strong&gt; 是否跟您設置 Node 的數量相同，這兩個如果都正確，那就表示設定成功了，由於上面 192.168.1.100 是主 Cluster Server，現在我們必須互相設定雙方 Address 也就是設定如下&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;node 01: gcomm:&lt;span&gt;//&lt;/span&gt;192.168.1.101&lt;br /&gt;
node 02: gcomm:&lt;span&gt;//&lt;/span&gt;192.168.1.100&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;設定如上述的好處就是，當 Node 01 關機時，資料還是在 Node 2 繼續運作，等到 Node 01 恢復上線後，資料又會從 Node 02 同步複製過來。&lt;/p&gt;
&lt;h3&gt;增加新 Node&lt;/h3&gt;
&lt;p&gt;我們可以任意新增多台 Node 到 Cluster 叢集系統裡，設置過程非常簡易&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;1&lt;/span&gt;. 安裝 MariaDB Server&lt;br /&gt;
&lt;span&gt;2&lt;/span&gt;. 安裝 Galera Library&lt;br /&gt;
&lt;span&gt;3&lt;/span&gt;. 設定 &lt;span&gt;wsrep_cluster_address&lt;/span&gt;=&lt;span&gt;&amp;quot;gcomm://192.168.1.100:4567&amp;quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;設定完成，就可以看到資料庫已經同步複製資料到新 Node 上面。如果遇到任何一台 Node 突然關機，不用緊張，系統會保持目前的資料，等到機器上線時，又會從 &lt;strong&gt;&lt;span&gt;gcomm://another_node_ipaddress&lt;/span&gt;&lt;/strong&gt; 同步後續的資料。&lt;/p&gt;
&lt;h3&gt;動態設定 gcomm://&lt;/h3&gt;
&lt;p&gt;如果新增一台新的 Node，我們就必須改動其它 Node 的 gcomm:// 設定，並且重新啟動 mysqld 服務，這樣會有些微時間影響，我們可以透過直接修改 GLOBAL wsrep_cluster_address 的值&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;$ mysql &lt;span&gt;-e&lt;/span&gt; &lt;span&gt;&amp;quot;SHOW VARIABLES LIKE 'wsrep_cluster_address';&amp;quot;&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;br /&gt;
+-----------------------+-------------------------------------------------+ &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; Variable_name &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; Value &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;br /&gt;
+-----------------------+-------------------------------------------------+ &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_cluster_address &lt;span&gt;|&lt;/span&gt; gcomm:&lt;span&gt;//&lt;/span&gt;xxx.xxx.xxx.xx:&lt;span&gt;4567&lt;/span&gt;,xxx.xxx.xx.xxx:&lt;span&gt;4567&lt;/span&gt; &lt;span&gt;|&lt;/span&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;br /&gt;
+-----------------------+-------------------------------------------------+ &lt;br /&gt;
&lt;br /&gt;
mysql&lt;span&gt;&amp;gt;&lt;/span&gt; SET GLOBAL &lt;span&gt;wsrep_cluster_address&lt;/span&gt;=&lt;span&gt;'gcomm://192.168.1.100:4567'&lt;/span&gt;;&lt;br /&gt;
Query OK, &lt;span&gt;0&lt;/span&gt; ROWS affected &lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;3.51&lt;/span&gt; sec&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
mysql&lt;span&gt;&amp;gt;&lt;/span&gt; SHOW VARIABLES LIKE &lt;span&gt;'wsrep_cluster_address'&lt;/span&gt;;&lt;br /&gt;
+-----------------------+---------------------------+&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; Variable_name &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt; VALUE &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
+-----------------------+---------------------------+&lt;br /&gt;
&lt;span&gt;|&lt;/span&gt; wsrep_cluster_address &lt;span&gt;|&lt;/span&gt; gcomm:&lt;span&gt;//&lt;/span&gt;192.168.1.100:&lt;span&gt;4567&lt;/span&gt;&lt;span&gt;|&lt;/span&gt;&lt;br /&gt;
+-----------------------+---------------------------+&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;最後需要注意的地方是，由於我們每一台機器都互相設定，如果要關閉全部 Node 機器,請務必將第一台重新設定  &lt;strong&gt;&lt;span&gt;gcomm://&lt;/span&gt;&lt;/strong&gt; 為空值，讓後續重新啟動的機器可以先連上此機器進行同步，&lt;/p&gt;
&lt;p&gt;這次把 MySQL Replication 安裝設定完成，也就是完成架構圖的最下面部份&lt;/p&gt;
&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/8603231970/" title="Server-load-balancers by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="463" height="500" alt="Server-load-balancers" /&gt;&lt;img src="http://farm9.staticflickr.com/8402/8603231970_693a6e0de5.jpg" width="463" height="500" alt="Server-load-balancers" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;之後會介紹如何透過 &lt;a href="http://haproxy.1wt.eu/" target="_blank"&gt;HAproxy&lt;/a&gt; 來處理 MySQL Load Balancer。&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/best-mysqldump-innodb-data/" class="wp_rp_title"&gt;MySQL 用 MySQLDump 備份 InnoDB 注意事項&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/01/percona-xtrabackup-innodb/" class="wp_rp_title"&gt;Percona XtraBackup InnoDB 備份工具&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/11/innodb-as-the-default-mysql-storage-engine/" class="wp_rp_title"&gt;MySQL 預設儲存引擎: InnoDB 介紹&lt;/a&gt; (9)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/12/mysql-issam-tables-convert-to-innodb/" class="wp_rp_title"&gt;MySQL InnoDB Engine 轉換成 InnoDB&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/07/%e8%bd%89%e8%b2%bc-ror%ef%bc%9aruby-on-rails%e7%9a%84%e9%83%a8%e7%bd%b2%e6%96%b9%e6%a1%88%e9%81%b8%e6%93%87/" class="wp_rp_title"&gt;[轉貼] RoR：Ruby on Rails的部署方案選擇&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/12/mysql-%e5%af%a6%e5%81%9a-mysql-master-master-replication-%e5%90%8c%e6%ad%a5/" class="wp_rp_title"&gt;[MySQL] 實做 MySQL Master-Master Replication 同步&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/11/ubuntu-java-java-jdbc-and-mysql/" class="wp_rp_title"&gt;[Ubuntu &amp;#038; java] java JDBC and MySQL&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/03/2011-osdc-day-1-%e7%ad%86%e8%a8%98/" class="wp_rp_title"&gt;2011 OSDC Day 1 筆記&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/05/%e7%b6%b2%e7%ab%99-%e5%a5%bd%e7%ab%99%e9%80%a3%e7%b5%90-%e4%ba%8c/" class="wp_rp_title"&gt;[網站] 好站連結 (二)&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/03/freebsdhigh-performance-caching-reverse-proxy-varnish-and-how-to-install-it/" class="wp_rp_title"&gt;[FreeBSD]high performance caching reverse proxy: Varnish (安裝架設篇)&lt;/a&gt; (9)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="debian"></category><category term="galera"></category><category term="haproxy"></category><category term="innodb"></category><category term="linux"></category><category term="mariadb"></category><category term="myisam"></category><category term="mysql"></category><category term="percona"></category><category term="ubuntu"></category></entry><entry><title>小惡魔AppleBOY: 統一開發者編輯器 Coding Style</title><link href="http://blog.wu-boy.com/2013/03/coding-style-tool-editorconfig/" rel="alternate"></link><updated>2013-03-28T06:50:07Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/03/coding-style-tool-editorconfig/</id><summary type="html">&lt;p&gt;在多人開發專案時候，一定會遇到大家使用的編輯器大不相同 &lt;a href="http://macromates.com/" target="_blank"&gt;TextMate&lt;/a&gt;, &lt;a href="http://www.vim.org/" target="_blank"&gt;Vim&lt;/a&gt;, &lt;a href="http://www.sublimetext.com/" target="_blank"&gt;Sublime Text 2&lt;/a&gt;, &lt;a href="http://www.geany.org/" target="_blank"&gt;Geany&lt;/a&gt;, &lt;a href="http://notepad-plus-plus.org/" target="_blank"&gt;Notepad++&lt;/a&gt;…等，該如何統一程式碼的一致性呢？這邊要講得不是各種語言的 Coding Style，而是編輯器的設定，例如大家一定會遇到有的開發者使用 Tab 另外一群人使用 Space，在同一專案裡面就會發現有的 tab 有的 space，這樣看起來非常的亂，該如何統一大家的預設 indent style，就是要使用 &lt;a href="http://editorconfig.org/" target="_blank"&gt;EditorConfig&lt;/a&gt; 啦。使用方式很簡單，可以在專案目錄內加入 .editorconfig 內容設定如下&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;; EditorConfig is awesome: http:&lt;span&gt;//&lt;/span&gt;EditorConfig.org&lt;br /&gt;
&lt;br /&gt;
root = &lt;span&gt;true&lt;/span&gt; ; top-most EditorConfig &lt;span&gt;file&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
; Unix-style newlines with a newline ending every &lt;span&gt;file&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;*&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;br /&gt;
end_of_line = lf&lt;br /&gt;
insert_final_newline = &lt;span&gt;true&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
; &lt;span&gt;4&lt;/span&gt; space indentation&lt;br /&gt;
&lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;*&lt;/span&gt;.py&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;br /&gt;
indent_style = space&lt;br /&gt;
indent_size = &lt;span&gt;4&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
; Tab indentation &lt;span&gt;&amp;#40;&lt;/span&gt;no &lt;span&gt;size&lt;/span&gt; specified&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;*&lt;/span&gt;.js&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;br /&gt;
indent_style = tab&lt;br /&gt;
&lt;br /&gt;
; Indentation override &lt;span&gt;for&lt;/span&gt; all JS under lib directory&lt;br /&gt;
&lt;span&gt;&amp;#91;&lt;/span&gt;lib&lt;span&gt;/**&lt;/span&gt;.js&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;br /&gt;
indent_style = space&lt;br /&gt;
indent_size = &lt;span&gt;2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;設定方式真的很簡單，如果是 Makefile 可以加入底下&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;&amp;#91;&lt;/span&gt;Makefile&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;br /&gt;
indent_style = tab&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;設定完成，最後只要裝上編輯器的 Plugin 即可，可以&lt;a href="http://editorconfig.org/#download" target="_blank"&gt;參考這裡&lt;/a&gt;，目前支援編輯器如下&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/editorconfig/editorconfig-codeblocks#readme"&gt;Code::Blocks&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/editorconfig/editorconfig-emacs#readme"&gt;Emacs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/editorconfig/editorconfig-geany#readme"&gt;Geany&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/editorconfig/editorconfig-gedit#readme"&gt;Gedit&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/editorconfig/editorconfig-jedit#readme"&gt;jEdit&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/editorconfig/editorconfig-notepad-plus-plus#readme"&gt;Notepad++&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/sindresorhus/editorconfig-sublime#readme"&gt;Sublime Text 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/Mr0grog/editorconfig-textmate#readme"&gt;TextMate&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/editorconfig/editorconfig-vim#readme"&gt;Vim&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/editorconfig/editorconfig-visualstudio#readme"&gt;Visual Studio&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;如果開發者沒有使用上面的編輯器，那可能需要請他更換了，或者是設定該編輯器設定了。&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/07/how-to-write-maintainable-php-source-code/" class="wp_rp_title"&gt;寫出好維護的 PHP 程式碼&lt;/a&gt; (13)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/08/vim-%e5%b0%87-tab-%e8%bd%89%e6%8f%9b%e6%88%90-space/" class="wp_rp_title"&gt;[Vim] 將 Tab 轉換成 Space&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/10/php-%e5%a5%bd%e7%94%a8%e7%9a%84%e7%95%99%e8%a8%80%e6%9d%bf-%e9%a9%97%e8%ad%89%e7%a2%bc-%e5%8a%9f%e8%83%bd/" class="wp_rp_title"&gt;[PHP] 好用的留言板 驗證碼 功能&lt;/a&gt; (14)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/08/php-coding-standards-fixer/" class="wp_rp_title"&gt;快速修正專案 PHP Coding Standards&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/05/web-responsive-design-test-tool/" class="wp_rp_title"&gt;測試 Web Responsive Design Tool&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/02/www-firefox-and-ie-%e7%9a%84-greasemonkey/" class="wp_rp_title"&gt;[WWW] firefox and IE 的 greasemonkey&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/12/ajax-jquery-plugin-cascade-%e5%a4%9a%e9%87%8d%e4%b8%8b%e6%8b%89%e9%81%b8%e5%96%ae%e6%87%89%e7%94%a8-by-json/" class="wp_rp_title"&gt;[AJAX] jQuery plugin cascade 多重下拉選單應用 by json&lt;/a&gt; (6)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/06/jquery-%e9%a9%97%e8%ad%89%e8%a1%a8%e5%96%ae%e5%af%a6%e4%bd%9c%e7%ad%86%e8%a8%98-api13selectors/" class="wp_rp_title"&gt;[jQuery] 驗證表單實作筆記 API/1.3/Selectors&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/12/code-refactoring-programer/" class="wp_rp_title"&gt;網頁重構工程師&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2006/09/fc4-%e9%99%90%e5%88%b6connection-%e9%80%a3%e7%b7%9a%e6%95%b8%e7%9b%ae%e3%80%8c%e6%9e%b6%e8%a8%adwar3%e4%bc%ba%e6%9c%8d%e5%99%a8%e3%80%8d/" class="wp_rp_title"&gt;[FC4] 限制connection 連線數目「架設war3伺服器」&lt;/a&gt; (0)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="code style"></category><category term="editorconfig"></category><category term="www"></category></entry><entry><title>小惡魔AppleBOY: Javascript command line tool GruntJS 介紹</title><link href="http://blog.wu-boy.com/2013/03/javascript-command-line-tool-gruntjs/" rel="alternate"></link><updated>2013-03-26T07:35:21Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/03/javascript-command-line-tool-gruntjs/</id><summary type="html">&lt;p&gt;&lt;strong&gt;Update: 補上一張執行後的截圖 2013.03.27&lt;/strong&gt;&lt;/p&gt;
&lt;div&gt;&lt;a title="gruntlogo by appleboy46, on Flickr" href="http://www.flickr.com/photos/appleboy/8591850168/"&gt;&lt;img alt="gruntlogo" class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="320" height="320" /&gt;&lt;img alt="gruntlogo" src="http://farm9.staticflickr.com/8244/8591850168_ca0e125ffa_n.jpg" width="320" height="320" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href="http://gruntjs.com/" target="_blank"&gt;GruntJS&lt;/a&gt; 是一套 JavaScript Task Runner，為什麼官網會這樣寫呢？網站上線之前，是不是需要經過測試，壓縮，及品質控管，這些 Task 該如何實現，在 GruntJS 還沒出現之前，大家可以透過 Linux command 的方式來達成，但是對於前端工程師而言，多學習 command line 真的是要他們的命，所以 GruntJS 解決了此問題，將所有的 Task 用 Javascript 方式設定就可以自動佈署或測試。GruntJS 的 Plugin 也非常多且完整，像是大家常用的 &lt;a href="http://coffeescript.org/" target="_blank"&gt;CoffeeScript&lt;/a&gt;、&lt;a href="http://handlebarsjs.com/" target="_blank"&gt;Handlebars&lt;/a&gt;、&lt;a href="http://jade-lang.com/" target="_blank"&gt;Jade&lt;/a&gt;、&lt;a href="http://www.jshint.com/" target="_blank"&gt;JsHint&lt;/a&gt;、&lt;a href="http://lesscss.org/" target="_blank"&gt;Less&lt;/a&gt;、&lt;a href="http://sass-lang.com/" target="_blank"&gt;Sass&lt;/a&gt;、&lt;a href="http://compass-style.org/" target="_blank"&gt;Compass&lt;/a&gt;、&lt;a href="http://learnboost.github.com/stylus/" target="_blank"&gt;Stylus&lt;/a&gt;…等都有支援。更多好用的 Plugin 可以在&lt;a href="http://gruntjs.com/plugins" target="_blank"&gt;官網搜尋頁面&lt;/a&gt;上找到。&lt;/p&gt;
&lt;h3&gt;安裝方式&lt;/h3&gt;
&lt;p&gt;Grunt 可以透過 &lt;a href="http://nodejs.org/" target="_blank"&gt;Node.js&lt;/a&gt; 的管理工具 &lt;a href="https://npmjs.org/" target="_blank"&gt;npm&lt;/a&gt; 方式來安裝，Windows 只要到 Node.js 官網下載安裝包，直接按下一步即可安裝完畢，Linux 可以透過 NVM 方式來管理 Node.js 版本，可以參考作者之前寫的 &lt;a href="http://blog.wu-boy.com/2013/01/node-version-manager/" target="_blank"&gt;Node Version Manager 版本管理 NVM&lt;/a&gt;。需要注意的是 Grunt 0.4.x 需要 Node.js &lt;span&gt;&lt;strong&gt;&amp;gt;= 0.8.0&lt;/strong&gt;&lt;/span&gt; 版本才可以。&lt;br /&gt;
&lt;span id="more-3964"&gt;&lt;/span&gt;&lt;br /&gt;
如果之前已經安裝 Grunt 請先移除安裝&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;$ &lt;/span&gt;npm uninstall &lt;span&gt;-g&lt;/span&gt; grunt&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Linux 請切換到 root 使用者來安裝&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;$ &lt;/span&gt;npm &lt;span&gt;install&lt;/span&gt; &lt;span&gt;-g&lt;/span&gt; grunt-cli&lt;/div&gt;&lt;/div&gt;
&lt;h3&gt;準備新專案&lt;/h3&gt;
&lt;p&gt;在使用 Grunt 指令前，請在專案目錄內新增 &lt;strong&gt;&lt;span&gt;package.json&lt;/span&gt;&lt;/strong&gt; 及 &lt;strong&gt;&lt;span&gt;Gruntfile.js&lt;/span&gt;&lt;/strong&gt; 檔案&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;span&gt;package.json&lt;/span&gt;&lt;/strong&gt;: 此檔案紀錄專案 metadata 以便將來做成 npm module，另外也會記載專案內所用到 Grunt plugins 版本資訊，像是 &lt;a href="https://npmjs.org/doc/json.html#devDependencies" target="_blank"&gt;devDependencies&lt;/a&gt; 設定。&lt;br /&gt;
&lt;strong&gt;&lt;span&gt;Gruntfile.js&lt;/span&gt;&lt;/strong&gt;: 此檔案可以用 Coffscript.coffee 撰寫，用來紀錄工作內容及相關 Plugins 載入.&lt;/p&gt;
&lt;p&gt;PS. 如果是用 Grunt 0.3.x 版本，請命名為 &lt;strong&gt;&lt;span&gt;grunt.js&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;h3&gt;package.json&lt;/h3&gt;
&lt;p&gt;此檔案記載專案相關資訊，也包含了 GruntJS 所需要用到的 Plugins，範例如下(官網提供)&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;quot;name&amp;quot;&lt;/span&gt;: &lt;span&gt;&amp;quot;my-project-name&amp;quot;&lt;/span&gt;,&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;quot;version&amp;quot;&lt;/span&gt;: &lt;span&gt;&amp;quot;0.1.0&amp;quot;&lt;/span&gt;,&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;quot;devDependencies&amp;quot;&lt;/span&gt;: &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;quot;grunt&amp;quot;&lt;/span&gt;: &lt;span&gt;&amp;quot;~0.4.1&amp;quot;&lt;/span&gt;,&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;quot;grunt-contrib-jshint&amp;quot;&lt;/span&gt;: &lt;span&gt;&amp;quot;~0.1.1&amp;quot;&lt;/span&gt;,&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;quot;grunt-contrib-nodeunit&amp;quot;&lt;/span&gt;: &lt;span&gt;&amp;quot;~0.1.2&amp;quot;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;建立此檔案後，在專案目錄內，執行 &lt;span&gt;&lt;strong&gt;npm install&lt;/strong&gt;&lt;/span&gt;，會發現專案內多了 &lt;strong&gt;&lt;span&gt;node_modules&lt;/span&gt;&lt;/strong&gt; 目錄。可以將此目錄名稱加入到 &lt;span&gt;&lt;strong&gt;.gitignore&lt;/strong&gt;&lt;/span&gt;，免的不小心 commit 到伺服器。如果不想手動更改 devDependencies 資訊，其實可以透過 &lt;span&gt;&lt;strong&gt;npm install grunt &amp;#8211;save-dev&lt;/strong&gt;&lt;/span&gt; 方式加入到 devDependencies 裡。&lt;/p&gt;
&lt;h3&gt;Gruntfile.js&lt;/h3&gt;
&lt;p&gt;可以透過 Gruntfile.coffee 或 Gruntfile.js 來產生檔案，此命名適用於 0.4.x 版本，如果是 0.3.x 版本請命名為 grunt.js。此檔案會包含底下部份&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;*&lt;/span&gt; wrapper 寫法&lt;br /&gt;
&lt;span&gt;*&lt;/span&gt; 專案及任務設定&lt;br /&gt;
&lt;span&gt;*&lt;/span&gt; 載入 Grunt Plugins 和任務內容&lt;br /&gt;
&lt;span&gt;*&lt;/span&gt; 定義特定任務&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;拿官網的例子來介紹:&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;module.&lt;span&gt;exports&lt;/span&gt; &lt;span&gt;=&lt;/span&gt; &lt;span&gt;function&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;grunt&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&amp;nbsp; &lt;span&gt;// Project configuration.&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; grunt.&lt;span&gt;initConfig&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; pkg&lt;span&gt;:&lt;/span&gt; grunt.&lt;span&gt;file&lt;/span&gt;.&lt;span&gt;readJSON&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'package.json'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; uglify&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; options&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; banner&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'/*! &amp;lt;%= pkg.name %&amp;gt; &amp;lt;%= grunt.template.today(&amp;quot;yyyy-mm-dd&amp;quot;) %&amp;gt; */&lt;span&gt;\n&lt;/span&gt;'&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; build&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; src&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'src/&amp;lt;%= pkg.name %&amp;gt;.js'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; dest&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'build/&amp;lt;%= pkg.name %&amp;gt;.min.js'&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&amp;nbsp; &lt;span&gt;// Load the plugin that provides the &amp;quot;uglify&amp;quot; task.&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; grunt.&lt;span&gt;loadNpmTasks&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'grunt-contrib-uglify'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&amp;nbsp; &lt;span&gt;// Default task(s).&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; grunt.&lt;span&gt;registerTask&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'default'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;'uglify'&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;在 package.json 裡面設定安裝 &lt;a href="https://github.com/gruntjs/grunt-contrib-uglify" target="_blank"&gt;grunt-contrib-uglify&lt;/a&gt; 套件，uglify 任務就是將 Javascript 檔案壓縮，當我們執行 grunt 指令時，Grunt 會執行預設的任務 uglify。上面有提到四點 Grunt 檔案會包含的項目，其中第一點是 wrapper 寫法，也就是上面例子內的&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;module.&lt;span&gt;exports&lt;/span&gt; &lt;span&gt;=&lt;/span&gt; &lt;span&gt;function&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;grunt&lt;span&gt;&amp;#41;&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;// Do grunt-related things in here&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;接著注意專案的設定，也就是底下內容&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;&lt;span&gt;// Project configuration.&lt;/span&gt;&lt;br /&gt;
grunt.&lt;span&gt;initConfig&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; pkg&lt;span&gt;:&lt;/span&gt; grunt.&lt;span&gt;file&lt;/span&gt;.&lt;span&gt;readJSON&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'package.json'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; uglify&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; options&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; banner&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'/*! &amp;lt;%= pkg.name %&amp;gt; &amp;lt;%= grunt.template.today(&amp;quot;yyyy-mm-dd&amp;quot;) %&amp;gt; */&lt;span&gt;\n&lt;/span&gt;'&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; build&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; src&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'src/&amp;lt;%= pkg.name %&amp;gt;.js'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; dest&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'build/&amp;lt;%= pkg.name %&amp;gt;.min.js'&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;所有的工作項目設定都會寫在 g&lt;a href="http://gruntjs.com/grunt#grunt.initconfig" target="_blank"&gt;runt.initConfig&lt;/a&gt; 裡面，看到第一行 &lt;span&gt;&lt;strong&gt;grunt.file.readJSON(&amp;quot;package.json&amp;quot;)&lt;/strong&gt;&lt;/span&gt;，將 package.json 內容讀到 pkg 變數，接著參數設定就可以使 &lt;strong&gt;&lt;span&gt;&lt;% %&gt;&lt;/span&gt;&lt;/strong&gt; 方式讀取。uglify 工作項目內的 options 設定可以直接參考 &lt;a href="https://github.com/gruntjs/grunt-contrib-uglify" target="_blank"&gt;grunt-contrib-uglify&lt;/a&gt;，我們可以定義多個 target 來區分多個工作內容，範例如下&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;&lt;span&gt;// Project configuration.&lt;/span&gt;&lt;br /&gt;
grunt.&lt;span&gt;initConfig&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; pkg&lt;span&gt;:&lt;/span&gt; grunt.&lt;span&gt;file&lt;/span&gt;.&lt;span&gt;readJSON&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'package.json'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; uglify&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; options&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; banner&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'/*! &amp;lt;%= pkg.name %&amp;gt; &amp;lt;%= grunt.template.today(&amp;quot;yyyy-mm-dd&amp;quot;) %&amp;gt; */&lt;span&gt;\n&lt;/span&gt;'&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; build&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; src&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'src/&amp;lt;%= pkg.name %&amp;gt;.js'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; dest&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'build/&amp;lt;%= pkg.name %&amp;gt;.min.js'&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; my_target_1&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; options&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; sourceMap&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'path/to/source-map.js'&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; files&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;'dest/output.min.js'&lt;/span&gt;&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;'src/input.js'&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; my_target_2&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; options&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; sourceMap&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'path/to/source-map.js'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; sourceMapRoot&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'http://example.com/path/to/src/'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; sourceMapIn&lt;span&gt;:&lt;/span&gt; &lt;span&gt;'example/coffeescript-sourcemap.js'&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;,&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; files&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;'dest/output.min.js'&lt;/span&gt;&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;'src/input.js'&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&amp;nbsp; &lt;span&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&lt;span&gt;&amp;#125;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;完成基本 Grunt Plugin 設定，接著將此 Plugin 載入&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;&lt;span&gt;// Load the plugin that provides the &amp;quot;uglify&amp;quot; task.&lt;/span&gt;&lt;br /&gt;
grunt.&lt;span&gt;loadNpmTasks&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'grunt-contrib-uglify'&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;最後定義預設的任務&lt;/p&gt;
&lt;div class="codecolorer-container javascript default"&gt;&lt;div class="javascript codecolorer"&gt;&lt;span&gt;// Default task(s).&lt;/span&gt;&lt;br /&gt;
grunt.&lt;span&gt;registerTask&lt;/span&gt;&lt;span&gt;&amp;#40;&lt;/span&gt;&lt;span&gt;'default'&lt;/span&gt;&lt;span&gt;,&lt;/span&gt; &lt;span&gt;&amp;#91;&lt;/span&gt;&lt;span&gt;'uglify'&lt;/span&gt;&lt;span&gt;&amp;#93;&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;&lt;span&gt;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Grunt 設定檔就完成了，可以來進行測試，我們可以直接下 &lt;strong&gt;&lt;span&gt;grunt&lt;/span&gt;&lt;/strong&gt; 指令，系統會自動跑預設任務，也就是 uglify，也或者如果有多個任務時，你只想執行 uglify 任務，請將指令改成 &lt;strong&gt;&lt;span&gt;grunt uglify&lt;/span&gt;&lt;/strong&gt;，如果是想要執行 uglify 任務內的 my_target_2 項目呢？請直接下 &lt;strong&gt;&lt;span&gt;grunt uglify:my_target_2&lt;/span&gt;&lt;/strong&gt;。&lt;/p&gt;
&lt;p&gt;基本介紹到這裡，大家對於 Grunt.js 應該都有基本的瞭解。最後補張執行後的圖&lt;/p&gt;
&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/8594641220/" title="GruntJS by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="486" height="500" alt="GruntJS" /&gt;&lt;img src="http://farm9.staticflickr.com/8525/8594641220_7f993b2ac0.jpg" width="486" height="500" alt="GruntJS" /&gt;&lt;/a&gt;&lt;/div&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/02/compress-css-javascript-script-command/" class="wp_rp_title"&gt;壓縮 Javascript 和 CSS 檔案 script command&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/11/node-version-management/" class="wp_rp_title"&gt;Node.js Version Management 多版本管理&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/01/node-version-manager/" class="wp_rp_title"&gt;Node Version Manager 版本管理 NVM&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/08/%e7%84%a1%e7%97%9b%e5%ae%89%e8%a3%9d-nodejs-%e5%92%8c-node-framework-express/" class="wp_rp_title"&gt;無痛安裝 NodeJS 和 Node Framework Express&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/01/bower-is-a-package-manager-for-the-web/" class="wp_rp_title"&gt;Bower 管理網站套件的好工具&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/11/front-end-engineer-love-livejs/" class="wp_rp_title"&gt;Front End Engineer 前端設計師必備工具 Live.js&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/javascript-cross-browser-best-practices/" class="wp_rp_title"&gt;[小技巧] JavaScript Cross Browser Best Practices &lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/08/javascript-reference-select-and-option-objects-%e7%94%a8%e6%b3%95%e4%bb%8b%e7%b4%b9/" class="wp_rp_title"&gt;JavaScript Reference Select and Option objects 用法介紹&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/10/jquery-%e5%81%b5%e6%b8%ac%e7%80%8f%e8%a6%bd%e5%99%a8%e7%89%88%e6%9c%ac-%e4%bd%9c%e6%a5%ad%e7%b3%bb%e7%b5%b1os-detection/" class="wp_rp_title"&gt;jQuery 偵測瀏覽器版本, 作業系統(OS detection)&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/03/2011-osdc-day-1-%e7%ad%86%e8%a8%98/" class="wp_rp_title"&gt;2011 OSDC Day 1 筆記&lt;/a&gt; (3)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="grunt"></category><category term="gruntjs"></category><category term="javascript"></category><category term="nodejs"></category><category term="npm"></category></entry><entry><title>小惡魔AppleBOY: Linode VPS 升級網路及硬體設備</title><link href="http://blog.wu-boy.com/2013/03/linode-nextgen-the-network-and-hardware/" rel="alternate"></link><updated>2013-03-21T11:00:32Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/03/linode-nextgen-the-network-and-hardware/</id><summary type="html">&lt;div&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" alt="Linode VPS" /&gt;&lt;img src="http://www.linode.com/images/linode_logo_gray.png" alt="Linode VPS" /&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href="http://feeds2.feedburner.com/appleboy/linode.com" target="_blank"&gt;Linode&lt;/a&gt; 是我最喜歡的國外 VPS 廠商，重點是速度跟穩定度都還不錯，不過今年不知道是不是被 &lt;a href="https://www.digitalocean.com/" target="_blank"&gt;DigitalOcean&lt;/a&gt; 刺激到？所以這個月將網路設備全面升級，不僅降低 latency 和 redundancy，出口端網路設備全部換成 Cisco Nexus 7000 series 等級，此系列提供了足夠的 Mac Address 及處理大量 Request，另外 access layer switches 則換成 Cisco Nexus 5000 series switches 跟 Nexus 2000 series Fabric Extenders，這些都不是重點，重點是每台 VPS 現在&lt;strong&gt;&lt;span&gt;對外流量都變成原先的十倍&lt;/span&gt;&lt;/strong&gt;，當然&lt;a href="http://blog.wu-boy.com/2011/09/linode-vps-inbound-%E6%B5%81%E9%87%8F%E5%B0%87%E4%B8%8D%E5%86%8D%E6%94%B6%E8%B2%BB/" target="_blank"&gt;對內流量是無限制的&lt;/a&gt;，底下是 Linode 最新網路架構圖&lt;br /&gt;
&lt;span id="more-3902"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/8576418983/" title="Linode-NextGen-Network by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="500" height="453" alt="Linode-NextGen-Network" /&gt;&lt;img src="http://farm9.staticflickr.com/8233/8576418983_111fb34488.jpg" width="500" height="453" alt="Linode-NextGen-Network" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;對外流量都增加十倍如下表，真是太超過了。&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;    Linode 512 upgraded from 200GB to 2000GB (2TB)&lt;br /&gt;
    Linode 1G upgraded from 400GB to 4000GB (4TB)&lt;br /&gt;
    Linode 2G upgraded from 800GB to 8000GB (8TB)&lt;br /&gt;
    Linode 4G upgraded from 1600GB to 16000GB (16TB)&lt;br /&gt;
    Linode 8G upgraded from 2000GB to 20000GB (20TB)&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;這樣就算了，接著升級 VPS 硬體，&lt;strong&gt;&lt;span&gt;每個 Linode 全升級成 8 Core CPU Instances&lt;/span&gt;&lt;/strong&gt;，這簡直是太瘋狂了，已經讓作者忍不住來玩看看了，官方直接提供了重新編譯系統核心的速度，使用機器為 Linode 1024 with 8 cores，編譯完成時間大概為 100 秒，這速度&amp;#8230;&amp;#8230;&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;apt-get update &amp;#038;&amp;#038; apt-get -y install build-essential&lt;br /&gt;
wget https://www.kernel.org/pub/linux/kernel/v3.x/linux-3.8.tar.xz&lt;br /&gt;
tar xf linux-3.8.tar.xz&lt;br /&gt;
cd linux-3.8/&lt;br /&gt;
make distclean &amp;#038;&amp;#038; make defconfig &amp;#038;&amp;#038; time make -j8&lt;/p&gt;
&lt;p&gt;real    1m41.861s&lt;br /&gt;
user    10m37.423s&lt;br /&gt;
sys     1m41.298s&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;最後文章提到，那硬碟呢？人家 &lt;a href="https://www.digitalocean.com/" target="_blank"&gt;DigitalOcean&lt;/a&gt; 全面採用 SSD，那 Linode 呢？沒關係，官方說這是未來的計畫，要全面換成 SSD 需要一大筆資金阿，所以讓大家期待一下吧。不過 CPU 已經這麼快了，那 Ram 呢？大家其實希望增加的是 Ram 吧 XD&lt;/p&gt;
&lt;p&gt;最後補一張圖來證明真的是 8 Core CPU:&lt;/p&gt;
&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/8576336061/" title="linode by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="381" height="219" alt="linode" /&gt;&lt;img src="http://farm9.staticflickr.com/8228/8576336061_90e3a86a17.jpg" width="381" height="219" alt="linode" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;Ref 兩篇官方說明：&lt;/p&gt;
&lt;p&gt;&lt;a href="http://blog.linode.com/2013/03/18/linode-nextgen-the-hardware/" target="_blank"&gt;Linode NextGen: The Hardware&lt;/a&gt;&lt;br /&gt;
&lt;a href="http://blog.linode.com/2013/03/07/linode-nextgen-the-network/" target="_blank"&gt;Linode Nextgen: The Network&lt;/a&gt;&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/linode-nextgen-ram-upgrade/" class="wp_rp_title"&gt;Linode 最後優惠 升級記憶體&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/12/linode-storage-increased-by-20/" class="wp_rp_title"&gt;虛擬主機商 Linode 增加 20% 儲存空間&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/09/linode-vps-inbound-%e6%b5%81%e9%87%8f%e5%b0%87%e4%b8%8d%e5%86%8d%e6%94%b6%e8%b2%bb/" class="wp_rp_title"&gt;Linode VPS Inbound 流量將不再收費&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/12/%e5%9c%8b%e5%a4%96-vps-%e8%99%9b%e6%93%ac%e4%b8%bb%e6%a9%9f%e6%95%88%e8%83%bd%e6%af%94%e8%bc%83/" class="wp_rp_title"&gt;國外 VPS 虛擬主機效能比較&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/05/vps-%e8%99%9b%e6%93%ac%e4%b8%bb%e6%a9%9f-linode-720-%e4%bd%bf%e7%94%a8%e5%bf%83%e5%be%97-%e4%b8%80/" class="wp_rp_title"&gt;[VPS] 虛擬主機 Linode 720 使用心得 (一)&lt;/a&gt; (9)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/12/%e8%99%9b%e6%93%ac%e4%b8%bb%e6%a9%9f-vps-linode-%e8%b4%88%e9%80%81-100000-%e7%be%8e%e5%85%83%e7%b5%a6%e6%96%b0%e8%a8%bb%e5%86%8a%e6%9c%83%e5%93%a1/" class="wp_rp_title"&gt;[虛擬主機] VPS Linode 贈送 $100,000 美元給新註冊會員&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/03/google-app-engine-sdk%ef%bc%9apython-%e5%9f%ba%e6%9c%ac%e6%95%99%e5%ad%b8%e5%ae%89%e8%a3%9d/" class="wp_rp_title"&gt; Google App Engine SDK：python 基本教學安裝&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/nginx-1-4-0-support-spdy-module/" class="wp_rp_title"&gt;nginx 1.4.0 釋出並支援 SPDY&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2009/03/%e4%bd%bf%e7%94%a8-css-%e6%8e%92%e7%89%88%e8%a3%bd%e4%bd%9c%e7%b6%b2%e7%ab%99/" class="wp_rp_title"&gt;使用 CSS 排版製作網站&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/03/phpfog-get-29-account-credit-by-just-deploying-a-new-app/" class="wp_rp_title"&gt;phpfog 免費提供升級 Silver 一個月&lt;/a&gt; (0)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="linode"></category><category term="network"></category><category term="vps"></category><category term="www"></category></entry><entry><title>小惡魔AppleBOY: Git denying non-fast forward 問題</title><link href="http://blog.wu-boy.com/2013/03/git-denying-non-fast-forward/" rel="alternate"></link><updated>2013-03-14T08:21:01Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/03/git-denying-non-fast-forward/</id><summary type="html">&lt;p&gt;最近幫別公司處理 denying non-fast forward 的 git server 問題，沒事就別動檔案權限，不管是不是修改內容，只要用 chmod 指令，&lt;a href="http://git-scm.com/" target="_blank"&gt;Git&lt;/a&gt; 還是會判別檔案變動。處理 git push 直接給我噴&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;$ &lt;span&gt;git push&lt;/span&gt; &lt;span&gt;--force&lt;/span&gt; origin master&lt;br /&gt;
Total &lt;span&gt;0&lt;/span&gt; &lt;span&gt;&amp;#40;&lt;/span&gt;delta &lt;span&gt;0&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt;, reused &lt;span&gt;0&lt;/span&gt; &lt;span&gt;&amp;#40;&lt;/span&gt;delta &lt;span&gt;0&lt;/span&gt;&lt;span&gt;&amp;#41;&lt;/span&gt; &amp;nbsp;&lt;br /&gt;
error: denying non-fast forward refs&lt;span&gt;/&lt;/span&gt;heads&lt;span&gt;/&lt;/span&gt;master &lt;span&gt;&amp;#40;&lt;/span&gt;you should pull first&lt;span&gt;&amp;#41;&lt;/span&gt; &amp;nbsp;&lt;br /&gt;
To &lt;span&gt;git&lt;/span&gt;&lt;span&gt;@&lt;/span&gt;git.example.com:myrepo.git &amp;nbsp;&lt;br /&gt;
&lt;span&gt;!&lt;/span&gt; &lt;span&gt;&amp;#91;&lt;/span&gt;remote rejected&lt;span&gt;&amp;#93;&lt;/span&gt; master -&lt;span&gt;&amp;gt;&lt;/span&gt; master &lt;span&gt;&amp;#40;&lt;/span&gt;non-fast forward&lt;span&gt;&amp;#41;&lt;/span&gt; &amp;nbsp;&lt;br /&gt;
error: failed to push some refs to &lt;span&gt;'git@git.example.com:myrepo.git'&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;會遇到這問題的原因是使用者將不該 commit 的程式碼都 push 到伺服器上面，例如資料庫帳號密碼，個人帳蜜等等，這真的是不應該，解決方式也沒有很難，只要用 git reset &amp;#8211;hard 到您需要的 commit hash 值，並且 git push &amp;#8211;force 方式蓋掉 Server 上面的程式碼，但是如果遇到 &lt;span&gt;git push &amp;#8211;force origin&lt;/span&gt; 或 &lt;span&gt;git push &amp;#8211;force origin master&lt;/span&gt; 都無作用，那就請加上底下設定&lt;/p&gt;
&lt;div class="codecolorer-container bash default"&gt;&lt;div class="bash codecolorer"&gt;&lt;span&gt;$ &lt;/span&gt;&lt;span&gt;git config&lt;/span&gt; &lt;span&gt;--system&lt;/span&gt; receive.denyNonFastForwards &lt;span&gt;false&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;在 Github 上面怎麼用 force 都可以直接覆蓋，私人自己架設的，請加入此設定，但是這設定基本上蠻危險的，如果用 git reset &amp;#8211;hard xxxx，xxx 為很久以前的版本，並且 force 到 Server 上面，那就等於沒救了 XD,所以用 &amp;#8211;force push 到 server 上面時，請小心阿，基本上可以搭配 &lt;a href="http://blog.wu-boy.com/2011/08/git-cherry-pick-%E8%99%95%E7%90%86%E5%B0%88%E6%A1%88-pull-request/"&gt;git cherry-pick&lt;/a&gt; 來撿還需要的 commit 內容。&lt;/p&gt;
&lt;p&gt;Ref:&lt;br /&gt;
&lt;a href="http://blog.wu-boy.com/2011/08/git-cherry-pick-%E8%99%95%E7%90%86%E5%B0%88%E6%A1%88-pull-request/" target="_blank"&gt;git cherry-pick 處理專案 pull request&lt;/a&gt;&lt;br /&gt;
&lt;a href="http://stackoverflow.com/questions/1377845/git-reset-hard-and-a-remote-repository" target="_blank"&gt;Git reset &amp;#8211;hard and a remote repository&lt;/a&gt;&lt;br /&gt;
&lt;a href="http://git-scm.com/book/ch7-1.html" target="_blank"&gt;7.1 Customizing Git &amp;#8211; Git Configuration&lt;/a&gt;&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/10/github-improved-subversion-client-support/" class="wp_rp_title"&gt;Github 支援 SVN Client&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/10/bitbucket-support-git-repository-now/" class="wp_rp_title"&gt;Bitbucket 開始支援 Git Repository&lt;/a&gt; (4)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/11/git-%e7%89%88%e6%9c%ac%e6%8e%a7%e5%88%b6-%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8%e6%a8%99%e7%b1%a4tag/" class="wp_rp_title"&gt;[Git] 版本控制: 如何使用標籤(Tag)&lt;/a&gt; (6)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/10/transfer-github-private-repository-to-bitbucket/" class="wp_rp_title"&gt;轉移 Github 上的 Private Repository 到 BitBucket &amp;#8230;&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/09/introduction-to-git-submodule/" class="wp_rp_title"&gt;Git Submodule 介紹與使用&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/02/how-to-use-git-version-control-for-new-beginner/" class="wp_rp_title"&gt;新人 Git 版本控制教學&lt;/a&gt; (12)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/09/svn-mv-vs-git-mv/" class="wp_rp_title"&gt;版本控制 svn move 移動或更名&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/02/git-hooks-parse-php-error-before-commit/" class="wp_rp_title"&gt;在 git Commit 之前檢查 PHP 是否有錯誤&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/08/codeigniter-%e8%bd%89%e7%a7%bb%e7%89%88%e6%9c%ac%e6%8e%a7%e5%88%b6%e5%88%b0-github-%e9%a0%86%e4%be%bf-release-2-0-3/" class="wp_rp_title"&gt;CodeIgniter 轉移版本控制到 Github 順便 Release 2.0.3&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/05/%e7%89%88%e6%9c%ac%e6%8e%a7%e5%88%b6-version-control-git-clean-%e4%bd%bf%e7%94%a8%e6%99%82%e6%a9%9f/" class="wp_rp_title"&gt;版本控制 version control git clean 使用時機&lt;/a&gt; (2)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="git"></category><category term="github"></category><category term="版本控制"></category></entry><entry><title>小惡魔AppleBOY: Remove Google CDN reference for jQuery?</title><link href="http://blog.wu-boy.com/2013/03/remove-google-cdn-reference-for-jquery/" rel="alternate"></link><updated>2013-03-07T04:03:35Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/03/remove-google-cdn-reference-for-jquery/</id><summary type="html">&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/8442641115/" title="OQAAAI1PPrJY0nBALB7mkvju3mkQXqLmzMhxEjeb4gp8aujEUQcLfLyy-Sn4gZdkAas6-k8eYbQlGDE-GCjKfF5gIrUA15jOjFfLRv77VBd5t-WfZURdP9V3PdmT by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="500" height="123" alt="jquery logo" /&gt;&lt;img src="https://farm9.staticflickr.com/8378/8442641115_8564013cea.jpg" width="500" height="123" alt="jquery logo" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;在 &lt;a href="http://html5boilerplate.com/" target="_blank"&gt;html5-boilerplate&lt;/a&gt; 看到有人發 &lt;a href="https://github.com/h5bp/html5-boilerplate/pull/1327" target="_blank"&gt;Remove Google CDN reference for jQuery&lt;/a&gt; 的 pull request，發現國外鄉民其實蠻有趣的，也很會表達自己的想法，根據 &lt;a href="http://statichtml.com/about.html" target="_blank"&gt;Steve Webster&lt;/a&gt; 在 2011/11/21 寫了一篇 &lt;a href="http://statichtml.com/2011/google-ajax-libraries-caching.html" target="_blank"&gt;Caching and the Google AJAX Libraries&lt;/a&gt; 裡面的結論是: 使用 &lt;a href="https://developers.google.com/speed/libraries/devguide?hl=zh-TW" target="_blank"&gt;Google CDN Library&lt;/a&gt; 對於第一次訪問網站並沒有很大的幫助，其實這句話非常有疑問，如果網站不想 host 一些 static file 又想要用 CDN 的話，Google 絕對是最好的選擇，&lt;a href="https://github.com/h5bp/html5-boilerplate/pull/1327#issuecomment-14537298" target="_blank"&gt;底下就有人反駁&lt;/a&gt; Google CDN 還是比自己 host 檔案快很多，所以此 pull request 好像沒有啥意義。&lt;br /&gt;
&lt;span id="more-3875"&gt;&lt;/span&gt;&lt;br /&gt;
最好的解法，還是把全部的 script 檔案統一包成一個檔案，減少 http request (&lt;a href="http://developer.yahoo.com/performance/rules.html#num_http" target="_blank"&gt;bundling jQuery up with the rest of your site&amp;#8217;s JavaScript&lt;/a&gt;)，那官方期望的解決方式就是用 &lt;a href="https://github.com/twitter/bower" target="_blank"&gt;Bower&lt;/a&gt; + &lt;a href="https://github.com/amdjs/amdjs-api/wiki/AMD" target="_blank"&gt;AMD&lt;/a&gt; + &lt;a href="http://requirejs.org/docs/optimization.html" target="_blank"&gt;r.js&lt;/a&gt;，對於一個上線網站，假如沒有做到這些事情，我想也不用考慮到 Google CDN 的速度了。&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/05/how-to-use-apache-module-mod_mime/" class="wp_rp_title"&gt;如何使用 Apache Module mod_mime&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/02/jquery-migrate-1-1-0-released-note/" class="wp_rp_title"&gt;jQuery Migrate 1.1.0 Released 注意事項&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/01/bower-is-a-package-manager-for-the-web/" class="wp_rp_title"&gt;Bower 管理網站套件的好工具&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/04/jquery-ajaxfileupload-multiple-file-upload-plugin/" class="wp_rp_title"&gt;[jQuery] AjaxFileUpload : Multiple File Upload plugin&lt;/a&gt; (9)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/08/codeigniter-%e5%88%a9%e7%94%a8-jquery-%e7%b0%a1%e6%98%93%e9%a9%97%e8%ad%89%e4%bd%bf%e7%94%a8%e8%80%85%e5%b8%b3%e8%99%9femail/" class="wp_rp_title"&gt;[CodeIgniter] 利用 jQuery 簡易驗證使用者帳號/Email&lt;/a&gt; (8)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/09/jquery-ajax-%e5%ad%b8%e7%bf%92%e7%ad%86%e8%a8%98-%e4%b8%80-%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8-json-%e9%a9%97%e8%ad%89%e4%bd%bf%e7%94%a8%e8%80%85%e8%a1%a8%e5%96%ae/" class="wp_rp_title"&gt;[jQuery] AJAX 學習筆記 (一) 如何使用 JSON 驗證使用者表單&lt;/a&gt; (3)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/08/html5-%e6%a8%a1%e6%9d%bf%e6%9e%b6%e6%a7%8bboilerplate/" class="wp_rp_title"&gt;Html5 模板架構(Boilerplate)&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2010/10/jquery-%e5%81%b5%e6%b8%ac%e7%80%8f%e8%a6%bd%e5%99%a8%e7%89%88%e6%9c%ac-%e4%bd%9c%e6%a5%ad%e7%b3%bb%e7%b5%b1os-detection/" class="wp_rp_title"&gt;jQuery 偵測瀏覽器版本, 作業系統(OS detection)&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/04/backbonejs-framework-tutorial-example-1/" class="wp_rp_title"&gt;Javascript 前端工具 Backbone.js Framework 初學介紹&lt;/a&gt; (4)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2008/12/ajax-jquery-plugin-cascade-%e5%a4%9a%e9%87%8d%e4%b8%8b%e6%8b%89%e9%81%b8%e5%96%ae%e6%87%89%e7%94%a8-by-json/" class="wp_rp_title"&gt;[AJAX] jQuery plugin cascade 多重下拉選單應用 by json&lt;/a&gt; (6)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="amd"></category><category term="bower"></category><category term="javascript"></category><category term="jquery"></category><category term="requirejs"></category></entry><entry><title>小惡魔AppleBOY: Backbone.js rewrite into CoffeeScript?</title><link href="http://blog.wu-boy.com/2013/03/backbone-js-rewrite-into-coffeescript/" rel="alternate"></link><updated>2013-03-01T13:56:59Z</updated><author><name>appleboy</name><email>nospam@nospam.com</email></author><id>http://blog.wu-boy.com/2013/03/backbone-js-rewrite-into-coffeescript/</id><summary type="html">&lt;div&gt;&lt;a href="http://www.flickr.com/photos/appleboy/7059615321/" title="backbone by appleboy46, on Flickr"&gt;&lt;img class="lazy " src="http://blog.wu-boy.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif" width="451" height="80" alt="backbone" /&gt;&lt;img src="http://farm6.staticflickr.com/5338/7059615321_097833dea8.jpg" width="451" height="80" alt="backbone" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;p&gt;看到 &lt;a href="https://github.com/gsamokovarov" target="_blank"&gt;@gsamokovarov&lt;/a&gt; 提出將 &lt;a href="http://backbonejs.org/" target="_blank"&gt;Backbone.js&lt;/a&gt; 改寫成 &lt;a href="http://coffeescript.org/" target="_blank"&gt;CoffeeScript&lt;/a&gt; 架構的 &lt;a href="https://github.com/documentcloud/backbone/pull/2317" target="_blank"&gt;Pull request&lt;/a&gt;，結果官方團隊其中一位開發作者回應了一張圖，代表他的心情 XD，各位有興趣可以點上面連結看看，後來有其他人回應說，為什麼官方不用 CoffeeScript 來寫了，發此 Pull Request 的作者也有說，他只是將架構改成 CoffeeScript 讓大家參考看看而已，沒有真的希望可以納入整個 Backbone.js 專案，如果有其他開發者需要的話，一樣可以 fork 此&lt;a href="https://github.com/gsamokovarov/backbone.coffee" target="_blank"&gt;專案&lt;/a&gt;，說明文件也用 &lt;a href="http://jashkenas.github.com/docco/" target="_blank"&gt;docco&lt;/a&gt; 產生好了，可以參考此&lt;a href="http://gsamokovarov.github.com/backbone.coffee/" target="_blank"&gt;連結&lt;/a&gt;，官方作者也提到，大部份的第3方 Library 還是不會使用 CoffeeScript 來當作基底開發，畢竟並非所有人都知道 CoffeeScript，如果官方想這麼開發的話，早就再 2010 年丟釋出 Backbone.js 的時候就直接採用了，不會拖到現在還沒出來，當然最後官方也希望將此 pull request 寫到 wiki 裡面給大家參考，等待原作者補開發動機及細節。&lt;/p&gt;

&lt;div class="wp_rp_wrap  wp_rp_plain"&gt;&lt;div class="wp_rp_content"&gt;&lt;h3 class="related_post_title"&gt;Related View&lt;/h3&gt;&lt;ul class="related_post wp_rp"&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/03/jquery-different-form-stoppropagation-with-stopimmediatepropagation/" class="wp_rp_title"&gt;jQuery stopPropagation 和 stopImmediatePropagation 比較&lt;/a&gt; (1)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/05/the-first-javascript-developer-conference-in-taiwan/" class="wp_rp_title"&gt;台灣第一屆 JavaScript Conference Developer 會議&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/04/backbonejs-framework-tutorial-example-1/" class="wp_rp_title"&gt;Javascript 前端工具 Backbone.js Framework 初學介紹&lt;/a&gt; (4)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/02/backbone-js-event-bind-listento-and-stoplistening/" class="wp_rp_title"&gt;Backbone.js event bind 新功能 listenTo and stopListening&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/04/introduction-to-backbone-js-event/" class="wp_rp_title"&gt;Backbone.js Event 事件介紹&lt;/a&gt; (2)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/11/backbone-js-model-and-collection-tregger-event/" class="wp_rp_title"&gt;Backbone.js Model and Collection Tregger Event&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/02/git-hooks-parse-php-error-before-commit/" class="wp_rp_title"&gt;在 git Commit 之前檢查 PHP 是否有錯誤&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2011/11/node-version-management/" class="wp_rp_title"&gt;Node.js Version Management 多版本管理&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2012/04/use-on-api-to-attach-event-handlers-on-jquery/" class="wp_rp_title"&gt;jQuery 1.7 透過 on 來綁定事件&lt;/a&gt; (0)&lt;/li&gt;&lt;li&gt;&lt;a href="http://blog.wu-boy.com/2013/04/javascript-cross-browser-best-practices/" class="wp_rp_title"&gt;[小技巧] JavaScript Cross Browser Best Practices &lt;/a&gt; (0)&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;</summary><category term="backbone.js"></category><category term="coffeescript"></category><category term="javascript"></category><category term="javascrpt"></category></entry></feed>