Backbone Routing pushState in IE

backbone
Backbone.js 幫忙處理掉所有瀏覽器

Html5 History pushState 功能,除了 IE 9 以下(含 IE 9)不支援 history.pushState()history.replaceState(),其他 Browser 幾乎都支援了,在 Backbone.js 如何處理 URL 變化呢?以往透過 handle URL hash 來決定網頁要處理哪些資料,這也是 Backbone 預設的處理方式,範例如下 URL:

http://xxx/#!/user/list http://xxx/#!/user/add

[Read More]

測試 Web Responsive Design Tool

responsive-website-design-tips

Web CSS Programer 在撰寫 Responsive CSS Style 時,手邊一定會有一堆 Device,來測試當畫面小於 480 px 或大於 768 px 時,呈現的版面是否有亂掉,公司也花費許多成本來測試,現在不需要這樣了,我們可以透過線上 Tool 或者是 Plugin 來測試 Responsive Web Page,首先來介紹

Viewport resizer,此工具用法很簡單,進入官網後,將官網 Javascript 連結加入到我的最愛或 bookmarks,之後打開您的測試網站,再點選該 bookmark,你會發現網站上面多了一條 tool bar,可以自訂或調整 view size,預設也給了平板手機等多種畫面調整,讓您測試 Media Queries 是否有錯誤。

[Read More]

Install Nginx + spdy module on Ubuntu or Debian

nginx-logo
上一篇提到

nginx 1.4.0 釋出並支援 SPDY,教學環境是 CentOS,這次在 Ubuntu 環境編譯遇到

/usr/bin/ld: cannot find -lperl 找不到 perl library,解法可以透過 aptitude 安裝 libperl5.14,安裝好後,到 /usr/lib 底下找到 libperl.so.5.14.2,由於檔案命名關係,請用 ln 將檔案 link 成 libperl.so

$ ln -s libperl.so.5.14.2 libperl.so
接著可以正確編譯了,底下安裝相關套件
$ aptitude -y install libpcre3-dev libgd-dev libgd2-xpm-dev libgeoip-dev

nginx 1.4.0 釋出並支援 SPDY

Update: 由於 OpenSSL CVE-2014-0160 Heartbleed Security,請將 openssl 升級到 1.0.1g 版本

nginx-logo

很高興看到 Nginx Release 1.4.0 版本,此新版本開始支援 SPDY module,對於 SPDY 還不熟悉了解的,可以參考今年 2013 WebConf 講師 ihower 介紹的 A brief introduction to SPDY - 邁向 HTTP/2.0,要提升整個 Web Performance,可以將 SPDY 導入,對於使用 Apache 使用者,請參考 mod_spdy,如果是 Nginx 用戶,在 1.3.x 版本,可以直接用官方 patch,升級到 1.4.x 就不需要 patch 了,但 OS 是 UbuntuCentOS 系列是需要自行編譯,這次會筆記在 CentOS 下將 spdy 編譯進系統。

安裝方式

先看 Ngix 是否有支援 spdy,直接下 nginx -V 觀看

nginx version: nginx/1.1.19 TLS SNI support enabled configure arguments: –prefix=/etc/nginx –conf-path=/etc/nginx/nginx.conf –erth=/var/lib/nginx/body –http-fastcgi-temp-path=/var/lib/nginx/fastcgi –http-lb/nginx/proxy –http-scgi-temp-path=/var/lib/nginx/scgi –http-uwsgi-temp-path==/var/run/nginx.pid –with-debug –with-http_addition_module –with-http_dav_moith-http_image_filter_module –with-http_realip_module –with-http_stub_status__xslt_module –with-ipv6 –with-sha1=/usr/include/openssl –with-md5=/usr/includ/buildd/nginx-1.1.19/debian/modules/nginx-auth-pam –add-module=/build/buildd/d/nginx-1.1.19/debian/modules/nginx-upstream-fair –add-module=/build/buildd/ng

[Read More]

Fabric 管理多台 Linux 機器的 command tool

python-logo-master-v3-TM
相信 Administrator 管理過兩台以上的 Linux Server 都一定會找 tool 讓多台機器同時執行指令,這也應用在 Deploy 任何 application 到多台機器或者是同時更新系統套件…等,網路上有蠻多套 command line tool 像是

capistranoFabricpsshdsh…等都,本篇會以 Python 所推的 Fabric 來做介紹。另外 Ruby 所寫的 capistrano tool 也是不錯的選擇,這兩套其實大同小異,可以將 Deploy 的邏輯寫成單一 file 再透過 task 定義來決定執行的工作。當然你也可以透過此 tool 來管理 local 端動作,但是這有點多此一舉,因為基本的 Shell 就可以完成了,如果熟悉 Python 則選 fabric,如果喜歡寫 Ruby 則可以試試看 capistrano。

安裝方式(Installation) 如果是

CentOS 系列可以透過 yum 套件管理,UbuntuDebian 則是透過 aptitude 方式安裝。 Yum

# install python pip tool and fabric command
yum -y install python-pip
pip-python install fabric
APT
# install python easy_install
aptitude -y install python-pip
# install fabric command
pip install fabric
安裝 capistrano 可以透過 Ruby gem。
$ gem install capistrano
[Read More]

Linode 最後優惠 升級記憶體

Linode VPS

Linode 最後的優惠出來了,之前寫了一篇 Linode VPS 升級網路及硬體設備,回顧 Linode 今年的優惠大清倉,第一次專注在網路效能及流量頻寬升級,第二次則著重在硬體升級,也就是升級 CPU,那這次要升級什麼呢,難不成 Linode 有聽到上一篇最後我講到的心聲,就是記憶體升級啦,Linode 大手筆將全部 Plan 的記憶體都 double,底下這張圖就是升級過後的價目表。 Linode - Xen VPS Hosting 2013-04-13 11-04-36

[Read More]

[小技巧] JavaScript Cross Browser Best Practices

ie-logo-small
先前寫了一篇

modern.IE 的使用方式及介紹,今天在 Facebook 上看到 Eric Shangkuan 說已經有了中文介面,如果你的瀏覽器是中文版,應該就可以直接看到中文介面了,裡面有篇文章非常重要,寫 Web 的工程師都必須注意,那就是 Cross Browser Best Practices,這篇文章教您如何撰寫相容於舊版 IE 瀏覽器的一些小技巧,這些技巧也不只用在 IE 上,更是教您在實做 CSS,JavaScript 的注意事項。我們來看看 Javascript 的小技巧。

[Read More]

MySQL 用 MySQLDump 備份 InnoDB 注意事項

大家在備份 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

galera_mysql_replication
最近公司買了幾台機架伺服器來處理 HTTP 跟 DB Load balancer,要做到 DB 的分散式架構,首先需要同步多台機器資料,也就是寫入或更動任意一台單筆資料,另外平行的機器也會同時進行更新。同步的好處可以用來做備援及分散處理連線,而要做到此功能,可子參考網路上評價不錯的

Galera Cluster for MySQL 方案。本篇會介紹在 UbuntuCentOS 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

在多人開發專案時候,一定會遇到大家使用的編輯器大不相同 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]