壞蛋的部落格

在上周一時 , 我跟天瓏網站訂購了這本 Hello ! HTML5 , 本周四才收到 , 拖了挺久的 , 因為我訂購時尚未出版 , 出版日到時竟然又延遲出版 , 於是才搞這麼久。

這本書在天瓏或博客來網站都有在賣 , 若去看網站介紹的人去買 , 以為可以學到 HTML5 所有功能的人就錯了 , 這本書不是規格書 , 更不是一個基礎教學書 , 因為裡面並沒有將每個指令做成指令查詢書般的分類好 , 而這本書也不是從頭到尾教人如何作出一張完整的網頁。

不過 , 我很慶幸 , 我買對書了 , 因為我要找的書 , 是一本介紹 HTML5 與 XHTML 或 HTML4 的差別說明 , 以及 HTML5 的 Web Standard 書 。 是的 ! 就是這本了 , 這本書完全是給具備 XHTML 基礎的人看的書 , 看完之後 , 對於為何有些人強調 SEO 的作法 , 但總是摸不著頭緒的人會更清楚如何用 HTML 讓文件更俱備語義結構。

在台灣我想還是很多網頁設計師或美工在設計網頁時仍以排版概念去設計網頁好讓排版正常 , 事實上我從知道有 Web Standard 這種風潮開始的時候 , 也改變了寫 HTML 的流程 , 有些人很會用 M$ Word , 將一份 Word 文件寫出來後 , 可以利用大綱模式看出文件的所有章節內容 , 只要章節訂的很明確 , 也可以用 MS$ Word 內提供的目錄功能為文件自動產生目錄。

在有 Web Standard 名詞出現的時候 , 我在設計的思考方向也盡量朝向和寫 Word 一樣的邏輯 , 讓每個章節與區塊是有層級的 , 在這本書中也有提及如何用 HTML5 讓文件更俱備結構化的作法 , 也詳細了說明 HTML5 新的標籤語義 , 該用在甚麼場合都交代的很清楚 , 這對 SEO 非常重要 , 因為 Google 也已經會對 HTML5 作結構分析 , 如果設計的網頁也是結構良好 , 會對網站排名有所助益。

本書前大半說明了 HTML5 產生的來龍去脈 , 和 HTML4 及 XHTML 不同點 , 也說明了新標籤的語意及該用在甚麼場合 , 後半段則說明了 與 HTML 5 搭配的 API , 如 Canvas , Web Storage , Drag & Drop , Web Socket 等等 , 我非常建議推薦給大家看 , 但如果是新手 , 則不推薦 , 因這本書是資深的網頁程式設計師集其過去設計經驗與遇到的問題寫成的一本應該算是心得書吧。

好了 , 廢話不說 , 下圖是一個實驗性的 Web Loading Balance 簡單配置架構 , 我將以此架構來做 Haproxy 通透代理

閱讀全文…

RHEL 6.0 出了好一陣子了 , CentOS 才剛出 5.6 … 進度很慢 , 其實 CentOS 5.6 並沒有多大的改變 , 反而最近用了 SL Linux 6.0 , 我發覺真是個好物 , 怎說 ?

SL Linux 其實也是 RHEL 的 clone , 另外有一套是 Oracle 出的就是叫 Oracle Linux , 當然我對 Oracle 不是很感興趣 , 所以就沒去玩 , SL Linux  和 CentOS 一樣也是 Free Download , 原本公司為了作 haproxy + TProxy , 遷就於 Kernel 版本要至少 2.6.28 則先採用了 Ubuntu Server 10 , 但是穩定性不佳 , 這裡所指的穩定性是指 CPU Loading 很低 , 但 haproxy 吞吐量很不穩 , 忽快忽慢的 , 一時也無法由 log 中查出原因

直到我換成 SL Linux 6.0 (RHEL 6.0 clone) 之後 , 速度跟飛的一樣 , 我都沒有自行編譯 haproxy , 而採用 epel 內建的 , 然後試著跑 haproxy + TProxy 超級順的 , 由於慣用 CentOS 久了 , 使用起 SL Linux , 完全沒有上手的問題 , 且我測試過在 Proxmox VE 下開一個 SL Linux 的 KVM 出來 , 沒發現過有 KVM 的錯誤訊息 , 而 ubuntu 或 centos 5.5 則偶爾會出現

蠻好的 , 希望大家也試試看 , 互相交流一下使用心得

CentOS 5.6 終於出來啦 ! 目前看義守大學上的 ftp 尚未 mirror 好 , 但依照以下 mail list 網址的說明還是可以下載到

http://lists.centos.org/pipermail/centos-announce/2011-April/017282.html

這次改版有很多不一樣的 , 和我們這行最有關的就是 PHP 的部分多出了個 php53 的套件 , 以往要自己安裝 PHP 5.3 要使用非官方版本 , 現在則有官方版本 , 可喜可賀了

相關的 Release Note 請參考

http://wiki.centos.org/Manuals/ReleaseNotes/CentOS5.6

IE9 正式版即將在 3/14 正式推出 , 支援 HTML5 是新版最大的突破 , 目前有支援 HTML5 的瀏覽器有 Chrome , Safari 4, FireFox 4 

我的感覺是 , HTML5 已經非純 Web Art 或程式基礎不夠深的 Front Engineer 所能掌控的東西 , HTML5 帶來的不只新增加的標籤 , 也伴隨著一堆新的 API , 就如同 XHTML 伴隨著 DOM API 一樣 , 不要被 HTML5 中的 HTML 字眼所誤導了 , 真的 HTML5 是一個架構很大的新標準 , 杯中的水該倒掉了 , 要用新手的心態去看待 HTML5

想看看 HTML5 的一些範例 , 去 http://www.html5rocks.com/ 看看吧 , 用 chrome 就可以看了 , 這個網站不只有範例 , 還將 HTML5 的功能做了個分類並且有 code 可以看 http://playground.html5rocks.com/ , 如果有細看 , 絕對想不到 , 連 SQL 語法都有了 , 我開玩笑的叫我們一個資深的視覺設計師說 , 你可能要去巨將學一下資料庫概念才看的懂 ….. 這是真的 , 現在 HTML5 可以開一個資料庫在 Client 端 , 而且可以下 SQL 語法 , 而且還有 WebGL(IE9 目前不支援) , 看來想把網站 3D 化要去學甚麼叫向量矩陣了

相關的技術還有 WebWoker(類似多執行緒,IE9 目前也 不支援 ~) , WebSocket(可以進行Client/Server雙向通訊) , WebStorage 等等 , 很多新的概念是我們要去碰的 , 現在 iphone , android , ipad 等等因為其內建瀏覽器有支援 HTML5 , 所以都已經有一堆 HTML5 網站出現 , PC 端受限於瀏覽器仍被微軟 OS 市占率影響而尚未普及 , 但我相信 IE9 的出現 , 及 Win8 也流出消息將內建 IE9 , HTML5 在 PC 端開始普及應該時間就會落在明年

而早在之前 , Google 很賤的推出了一個叫 Google Chrome Frame 的東西 , 安裝這個東西 , 可以讓 IE6~IE8 支援 HTML5 , 其實這套軟體就是安裝了 Google 的瀏覽器引擎 , 讓 IE6~IE8 在網頁 Render 階段是以 Chrome 的引擎去生成 HTML5 網頁 , 當然啦 , 一般人不太可能去安裝 Google Chrome Frame

不過最近我又重新去看了一下 , Google Chrome Frame 網站 , 他有一頁 http://www.chromium.org/developers/how-tos/chrome-frame-getting-started , 這一頁是教網頁設計師 , 塞入一些 code , 就可以讓 IE6~IE8 的瀏覽器瀏覽 HTML5 網站時 , 會提醒使用者安裝 Chrome Frame , 並且整個步驟都是在網頁中完成 , 有點類似 ADOBE Flash plugin 那樣的做法 , 這的確很賤 …. 如果觀念比較前衛的人可以試試看該做法

IE9 RC 版日前早已開放下載 , 預料正式版和 RC 版不會差很大 , 而目前所知 , Web3D , WebSQL , WebWorker 沒有支援 , 網路上也很多比較表 , IE9 應該是目前對 HTML5 支援度最差的瀏覽器 , 但即便如此 , 也不會影響到 HTML5 開始流行 , 回想過去 IE3 和 Netscape3 大戰 , IE 明明很爛 , 支援度很差 , 但因為普及率關係 , 所以一窩瘋的人仍然把 IE 當作網頁設計相容的第一優先 , 也就是說 , 未來的網頁設計師仍然會考量到各種瀏覽器的支援程度 , 設計出各種瀏覽器可以看的網站 , 所以和現在的模式沒甚麼不一樣 , 唯一不同的就是 , 這次帶來的改變會比以前大 , 技術躍進比 HTML4 ~ XHTML 還要大 , 幹這行的真辛苦 ~~

需求是這樣 , 以下 HTML CODE 要以 input 欄位內的值重新排序為一個新的 table

<form id="form1" name="form1" method="post" action="">
  <table width="200" border="1">
  <tbody>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_99" value="99" /></td>
      <td>99</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_6" value="6" /></td>
      <td>6</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_9" value="9" /></td>
      <td>9</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_10" value="10" /></td>
      <td>10</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_4" value="4" /></td>
      <td>4</td>
    </tr>
    <tr>
      <td>
        <input name="textfield[]" type="text" id="textfield_1" value="1" /></td>
      <td>1</td>
    </tr>
    </tbody>
  </table>
</form>

這個問題從今早搞到晚上 , 看過了很多 jquery 範例 , 還有朋友建議用甚麼 jquery 的一個 plugin tablesorter …, 甚至自己想寫個泡沫排序法 >< … 搞老半天都不得我意

後來才發現 , 原來 javascript 本身就有個很好的 sort 可以用 , sort 可以用自定 function 的方式來寫 , 搭配簡單 jquery 就可以重新排序了

範例如下

<script>
 
$(function() {
	var mylist = $("table tbody tr").clone(true).get();
	mylist.sort(function(a,b){
		var compA = parseInt($(a).find('input[type="text"]').val());
		var compB = parseInt($(b).find('input[type="text"]').val());
		return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
	});
 
	$("table tbody tr").remove();
	$("table tbody").append($(mylist));
});
 
</script>

這原理也很簡單 , 先用 jquery 去 clone 所有 tr 節點為 mylist  , 然後 mylist. 為 DOM Elements , 並且可用 javascript 原生的排序含數 , 裡面的寫法就是自定函數 , 用 jqeury 去抓出 input 的值為 compA/compB 並且比對 compA/compB 的大小返回給 sort 就好了 …. 超簡單的

網址 :

http://www.patternsforphp.org/doku.php?id=lazy_initialization

這不同於以往看到的 lazy loading 每次都要呼叫 __set 或 __get 來判斷是否有初始化的作法 , 這種做法只會呼叫一次 __set 或 __get , 我按照上述的作法寫了一段 code 來測試效能 , 在我的 I5 CPU 處理器上測得的效能差異有 5 倍之多

以下是範例程式 閱讀全文…

最近看見 MariaDb 出了 5.2.3 的版本

這個版本已經是 Stable 版了 , 相容 MySQL 5.1 , 大概說一下這一版的特色

• MariaDb 一開始就以 XTraDb 取代InnoDb Engine , 相容於 InnoDb , 但效能更好 , 在 phpMyAdmin 中建立一個 InnoDB 就等於是 XtraDb 了
• 以 Aria Table 取代 MyISAM 為預設 Table (原本的 MyISAM 也可以用) , 若原始資料仍是 MyISAM , 但在很多情況下 MySQL 會開啟 tmp table , 這時候會用 Aria , 效能會比原本的 MySQL 更佳
• 內建 SphinxSE , 所以就不用自己去 patch mysql 就可以搭配 Sphinx 讓 MySQL 具備強大的中文全文搜尋功能了
• 可以無痛升級 , 目錄完全相容mysql , 各種工具也完全和 mysql 一樣

網站上提供了各種版本 , 包括 CentOS , Win32 , 我的 CentOS Linux 在升級時是下載 CentOS 版的 RPM

先將舊版的 MySql 停掉 , 備份整個 MySQL Data 目錄 , 然後用 yum 去移除 mysql-server 等相關套件

接著 , 用 rpm 安裝之後大概就沒問題了 , 這中間 , 會有一些套件衝突 , 例如 php-mysql , 當遇到衝突時 , 用 yum 去移除 , 然後再用 rpm 安裝 mariadb 的 rpm , 最後再用 yum 去安裝之前發生衝突的套件 , 過程中沒發現甚麼問題

現在這個網站也運做了約一星期 , 狀況良好