Aug 22 2008

GC!J 更新

原來 GC!J 已有一年歷史,最近和電鋸商議後轉到 google code,方便管理,亦歡迎任何人提意見或參與維護。

趁今日打風有空,我更新了 GC!J 到 0.3b,把那些字碼存放到另一個 JS 檔再用 XHR 擷取,有新字碼時就不需要重新安裝整個 User Script,容易管理得多。

不知 GC!J 為何啥的我就再說一下吧:
GC!J 是一個 Greasemonkey user script,它主要把壹傳媒 那些圖像香港字轉為實在的文字,並把中文字間的空格移除,方便用家轉貼新聞。若想保留中文字間空格,可按 Firefox 的 Tools -> Greasemonkey -> User Script Commands -> Toogle Chinese Spaces。

安裝
GC!J 0.3b 需要 Firefox 3.0 或以上1Greasemonkey。安裝 Greasemonkey 後到 GC!J project home page 按 Installation 下的連結就,再 reload atnext.com 就可看到效果。

Know Issues
蘋果動新聞的圖片說明因為會不停轉換,文字會再被轉回圖像。2

若有意見歡迎留言,發現 bug 的話亦請留言相告,謝謝。CT

  1. 因為用到 native 的 getElementsByClassName []
  2. 這個走馬燈式的圖片轉換方法真的好 Web 1.0,既不 accessible 亦不 user friendly,其實整個動新聞網真的 “動” 過籠,版面亦怪怪的。 []

Aug 4 2007

網頁製作小貼士 (一) 選擇正確 Document Type Declaration

隆重登場,專講網頁標準的 screencast!

這是我加入 WaSP ILG (ILG 網頁正翻新,暫時沒啥看) 後首個個人項目,目的希望透過一些網頁製作上的小貼士,令更多人了解網頁標準。
第一集先講 Doctype,立即去片!

相關連結:

歡迎就節目提出意見,若有網頁製作上的問題,亦歡迎留言發問。CT


Jul 26 2007

Apostrophe: 還我生存空間

IE6 apostrophe
左圖上句的 apostrophe 走樣,相信不少中文 Windows + IE6 的用家都見過1,覺得很醜對吧。然而亦有不少網頁編寫人員,當遇見這個情況時,十之八九是把那個 apostrophe (’) 更改為 single quote (')2,快快解決問題外,心中還暗忖那死人 MS Word 的 smart quote function,好把我鍵入的 single quote 轉為 apostrophe,待我 copy and paste 到網頁後,他媽的 IE6 卻把它當全型字顯示,微軟你玩我咩!

不過我想說明,這個問題,算不上是微軟的錯,不是 IE6 的 bug,也不是 Word 「玩嘢」。事實是它們之間有點不協調;簡單點說,就是 IE6 不知道你這個 apostrophe (’) 是中文還是英文,所以會根據 Locale 設定,把它當成中文標點符號,以全型方式顯示出來。

其實只要花一點小功夫,我們就可以指定整個網頁,或某一個 element 所使用的語言。HTML 中可使用 lang 屬性 (XHTML 則用 xml:lang),以表示 element 中的內容是以甚麼語言撰寫,只要標示正確,瀏覽器就懂得怎樣處理。就如上圖下面的句子,在加上 lang 屬性後,IE6 就懂得把 apostrophe 以英文的字型顯示出來 (可真接用 IE6 觀看這個示範)。 

看,多簡單吧?不過很多人都忽略了。這個實例,又可以引伸為 Semantic Markup 的一個好處。

延伸閱讀:
多語環境中的網頁親和力
Best Practice 5: Choosing between lang and xml:langCT

  1. 其實不一定是中文 Windows,實際影響的是 Windows 的 Locale setting []
  2. 用 single quote 當 apostrophe,在仍是 ASCII 主導的時代,這做法無可厚非,但現在 Unicode 盛行,何不用回較正確的 apostrophe?本文標題是哇眾一點,只希望大家對這個 issue 有個 full picture,不要再斬腳趾避沙蟲。 []

Jul 24 2007

蘋果裡的香港字

Chainsaw 寫 Userscript,我也做過,不過用的是 PHP。

幾年以來,我一直在用一個自己編寫的 PHP script,把生果日報的網上版「淨化」後給我在 Palm 上看。當時曾考慮像 Kornhill 一樣公開使用,不過知道生果報曾出信警告提供這類服務的網民1,所以只好「收收埋埋」獨自「享受」自己努力的成果。

其實當時已有人做了相同的東西,並且開放源碼2,不過那個 script 有一點我認為不夠貼心的,就是保留了生果報的圖像香港字,那些圖像字在 Palm 上看實在太醜樣,而且浪費 bandwidth。於是決定自己寫個 function,好替我取得內容時把那些醜樣的圖像字一一換掉為實實在在的香港字 (Big5-HKSCS)。

編寫初期還以為那些十六進制的圖像字檔名是對應那個字的內碼,只要找到檔名,再 generate 那個香港字就行3,但後來發覺那些十六進制檔名並非內碼,哪怎樣才知道它們的配對呢?思前想後還是用個蠢方法,暴力地把所有生果報的圖像字列出來,逐個逐個把其所示的香港字編成一個表,放入一個 associative array,再跑一句 preg_replace 就搞掂了。

以下是這個 function 的完成品,我還另存一個純文字檔,只列出圖像和文字的配對,大家有用請自便。

其實,生果肯改用 UTF-8,不就更好?

Update: 強烈建議使用新版 GC!J,睇生果報順眼好多。CT

  1. 那時 Web 2.0 還未興起,大部份網站都視網站上資訊為賣錢的主要途徑,尤其本身有推出收費 PDA 頻道的生果報,會主動打擊這類 PHP。 []
  2. 源碼現在一直還流傳着,雖說曾被打壓過,但總有人繼續做的,只是較為低調而已。 []
  3. 這應是三數行 code 就辦到的事,而且一勞永逸。 []

Apr 25 2007

Online form security: Further

上篇。其實我想了解大家如何做 web application 的保護,順道引證一下自己的看法。

互聯網危機處處,雖然一個 application 放上網目的可能只是 form to email 般的簡單,但一些立壞心腸的人可會視之為攻擊目標,spammer 會視為免費 spam engine,惡作劇的 cracker 可能會利用它炸電郵信箱,若果這個 application 有 vulnerability 的話,更有可能被 hacker 入侵伺服器。

所謂攻擊,可是成千上萬。可以是機械化的 (spam bot),可以是人為的 (XSS);可以是 common 的 (DDoS),亦可以是 dedicated。當中最棘手的當然是針對性的攻擊,要防止的而且確要花很多資源,但一般常見的攻擊,要預防其實不難,諸如 input filtering 或 HTTP referer checking 都是其一,雖不是很驚為天人,但應付普通攻擊應該足夠有餘。

我常喜歡用家居保安做網上保安的例子:你也不會把家中門大開任人自出自入吧。雖然一個 web application 原意可能是方便,但方便自己時亦同時方便賊人,賊人永遠是取易捨難。簡單的加把鎖,已可防止一些無謂的損失。CT