[小技巧] JavaScript Cross Browser Best Practices
Posted on April 12, 2013
| 2 minutes
| 240 words
| appleboy
先前寫了一篇
modern.IE 的使用方式及介紹，今天在 Facebook 上看到 Eric Shangkuan 說已經有了中文介面，如果你的瀏覽器是中文版，應該就可以直接看到中文介面了，裡面有篇文章非常重要，寫 Web 的工程師都必須注意，那就是 Cross Browser Best Practices，這篇文章教您如何撰寫相容於舊版 IE 瀏覽器的一些小技巧，這些技巧也不只用在 IE 上，更是教您在實做 CSS，JavaScript 的注意事項。我們來看看 Javascript 的小技巧。
[Read More]MySQL 用 MySQLDump 備份 InnoDB 注意事項
Posted on April 5, 2013
| 1 minutes
| 144 words
| appleboy
大家在備份 MySQL 資料庫時一定是使 mysqldump 指令，不管是 MyISAM 或 InnoDB 都一樣， 在處理 InnoDB 格式備份時使用 mysqldump -single-transaction，但是你會發現在大多的備份狀況都是 OK 的，只是有時候會發現有的資料表只有備份到 structure 而無備份到 Data？ 在 MySQL Performance Blog 看到這篇講解 Best kept MySQLDump Secret，此問題出在 how MySQL’s Transactions work with DDL，ALTER TABLE 會建立一個 temporary table，並且將該資料表資料複製過去，接著刪除原有資料表，最後將 temporary table 命名為原來資料表。 底下是原作者提到的原因
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.
[Read More]Galera Cluster for MySQL Multi-master Replication
Posted on March 31, 2013
| 3 minutes
| 626 words
| appleboy
最近公司買了幾台機架伺服器來處理 HTTP 跟 DB Load balancer，要做到 DB 的分散式架構，首先需要同步多台機器資料，也就是寫入或更動任意一台單筆資料，另外平行的機器也會同時進行更新。同步的好處可以用來做備援及分散處理連線，而要做到此功能，可子參考網路上評價不錯的
Galera Cluster for MySQL 方案。本篇會介紹在 Ubuntu 或 CentOS 6.x final 版本如何安裝 Galera 伺服器套件及設定。要架設 Galera Cluster Server，有兩種套件選擇，一個是 Percona XtraDB Cluster 另一個是 MariaDB Galera Cluster，這次作者會介紹後者的安裝。
Galera Cluster 介紹 為什麼要選擇 Galera Cluster Server，它有什麼優點及功能呢？MySQL/Galera 是一套可以同步多台 MySQL/InnoDB 機器的叢集系統，底下可以列出功能。
- 同步複製資料
- 可讀取和寫入叢集系統內任一節點
- 自動偵測節點錯誤，如果有節點當機，則叢集系統自動移除該節點
- 可任意擴充節點
- 採用 row level 方式來平行複製資料 從上面功能看來，我們可以平行任意擴充節點，動態增加伺服器到叢集系統，要做到上面功能，就是利用
Galera library 來做到同步資料處理，同步的詳細細節，可以參考 Galera library 連結。這邊就不再多描述了。
[Read More]統一開發者編輯器 Coding Style
Posted on March 28, 2013
| 1 minutes
| 112 words
| appleboy
在多人開發專案時候，一定會遇到大家使用的編輯器大不相同 TextMate, Vim, Sublime Text 2, Geany, Notepad++…等，該如何統一程式碼的一致性呢？這邊要講得不是各種語言的 Coding Style，而是編輯器的設定，例如大家一定會遇到有的開發者使用 Tab 另外一群人使用 Space，在同一專案裡面就會發現有的 tab 有的 space，這樣看起來非常的亂，該如何統一大家的預設 indent style，就是要使用 EditorConfig 啦。使用方式很簡單，可以在專案目錄內加入 .editorconfig 內容設定如下
; EditorConfig is awesome: http://EditorConfig.org
root = true ; top-most EditorConfig file
; Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
; 4 space indentation
[*.py]
indent_style = space
indent_size = 4
; Tab indentation (no size specified)
[*.js]
indent_style = tab
; Indentation override for all JS under lib directory
[lib/**.
[Read More]Javascript command line tool GruntJS 介紹
Posted on March 26, 2013
| 2 minutes
| 401 words
| appleboy
Update: 補上一張執行後的截圖 2013.03.27
GruntJS 是一套 JavaScript Task Runner，為什麼官網會這樣寫呢？網站上線之前，是不是需要經過測試，壓縮，及品質控管，這些 Task 該如何實現，在 GruntJS 還沒出現之前，大家可以透過 Linux command 的方式來達成，但是對於前端工程師而言，多學習 command line 真的是要他們的命，所以 GruntJS 解決了此問題，將所有的 Task 用 Javascript 方式設定就可以自動佈署或測試。GruntJS 的 Plugin 也非常多且完整，像是大家常用的 CoffeeScript、Handlebars、Jade、JsHint、Less、Sass、Compass、Stylus…等都有支援。更多好用的 Plugin 可以在官網搜尋頁面上找到。
安裝方式 Grunt 可以透過
Node.js 的管理工具 npm 方式來安裝，Windows 只要到 Node.js 官網下載安裝包，直接按下一步即可安裝完畢，Linux 可以透過 NVM 方式來管理 Node.js 版本，可以參考作者之前寫的 Node Version Manager 版本管理 NVM。需要注意的是 Grunt 0.4.x 需要 Node.js >= 0.8.0 版本才可以。
[Read More]Linode VPS 升級網路及硬體設備
Posted on March 21, 2013
| 1 minutes
| 152 words
| appleboy
Linode 是我最喜歡的國外 VPS 廠商，重點是速度跟穩定度都還不錯，不過今年不知道是不是被 DigitalOcean 刺激到？所以這個月將網路設備全面升級，不僅降低 latency 和 redundancy，出口端網路設備全部換成 Cisco Nexus 7000 series 等級，此系列提供了足夠的 Mac Address 及處理大量 Request，另外 access layer switches 則換成 Cisco Nexus 5000 series switches 跟 Nexus 2000 series Fabric Extenders，這些都不是重點，重點是每台 VPS 現在**對外流量都變成原先的十倍**，當然對內流量是無限制的，底下是 Linode 最新網路架構圖
[Read More]Git denying non-fast forward 問題
Posted on March 14, 2013
| 1 minutes
| 134 words
| appleboy
最近幫別公司處理 denying non-fast forward 的 git server 問題，沒事就別動檔案權限，不管是不是修改內容，只要用 chmod 指令，Git 還是會判別檔案變動。處理 git push 直接給我噴
$ git push --force origin master
Total 0 (delta 0), reused 0 (delta 0) error: denying non-fast forward refs/heads/master (you should pull first) To git@git.example.com:myrepo.git ! [remote rejected] master -> master (non-fast forward) error: failed to push some refs to 'git@git.example.com:myrepo.git' 會遇到這問題的原因是使用者將不該 commit 的程式碼都 push 到伺服器上面，例如資料庫帳號密碼，個人帳蜜等等，這真的是不應該，解決方式也沒有很難，只要用 git reset --hard 到您需要的 commit hash 值，並且 git push --force 方式蓋掉 Server 上面的程式碼，但是如果遇到 git push –force origin 或 git push –force origin master 都無作用，那就請加上底下設定
[Read More]Remove Google CDN reference for jQuery?
Posted on March 7, 2013
| 1 minutes
| 69 words
| appleboy
在
html5-boilerplate 看到有人發 Remove Google CDN reference for jQuery 的 pull request，發現國外鄉民其實蠻有趣的，也很會表達自己的想法，根據 Steve Webster 在 2011/11/21 寫了一篇 Caching and the Google AJAX Libraries 裡面的結論是: 使用 Google CDN Library 對於第一次訪問網站並沒有很大的幫助，其實這句話非常有疑問，如果網站不想 host 一些 static file 又想要用 CDN 的話，Google 絕對是最好的選擇，底下就有人反駁 Google CDN 還是比自己 host 檔案快很多，所以此 pull request 好像沒有啥意義。
[Read More]Backbone.js rewrite into CoffeeScript?
Posted on March 1, 2013
| 1 minutes
| 37 words
| appleboy
看到
@gsamokovarov 提出將 Backbone.js 改寫成 CoffeeScript 架構的 Pull request，結果官方團隊其中一位開發作者回應了一張圖，代表他的心情 XD，各位有興趣可以點上面連結看看，後來有其他人回應說，為什麼官方不用 CoffeeScript 來寫了，發此 Pull Request 的作者也有說，他只是將架構改成 CoffeeScript 讓大家參考看看而已，沒有真的希望可以納入整個 Backbone.js 專案，如果有其他開發者需要的話，一樣可以 fork 此專案，說明文件也用 docco 產生好了，可以參考此連結，官方作者也提到，大部份的第3方 Library 還是不會使用 CoffeeScript 來當作基底開發，畢竟並非所有人都知道 CoffeeScript，如果官方想這麼開發的話，早就再 2010 年丟釋出 Backbone.js 的時候就直接採用了，不會拖到現在還沒出來，當然最後官方也希望將此 pull request 寫到 wiki 裡面給大家參考，等待原作者補開發動機及細節。
壓縮 Javascript 和 CSS 檔案 script command
Posted on February 21, 2013
| 1 minutes
| 111 words
| appleboy
網站上站前要做的事情非常多，其中一項為大家所知就是壓縮
CSS 跟 JavaScript 檔案，減少 Http request 流量，網路上已經有非常多的 Compressor tool，像是 Google Closure Compiler 或 YUI Compressor，都是用來壓縮 JS 或 CSS 檔案，這次寫了 script 來壓縮整個網站目錄裡的 js 或 css 檔案，不過 script 所使用的 Compressor command 是 Node Base 的 tool，分別是 UglifyJS 及 sqwish 這兩套，當然使用 command 之前，請務必先安裝好 Node.js 最新版本啦，不過沒安裝也沒關係，底下有懶人安裝 script command。這些 tool 對於 Embedded System 在 build firmware 相當有用，可以減少不少 code size 阿。 可以直接看專案說明，就可以不必看底下步驟了
[Read More]
