Clement in a Nutshell

Default zoom level in Safari

整年沒更新，一來懶，二來沒甚麼寫，要寫都傾向書於 Facebook、Twitter 等微博，簡單快趣。當然有一直留意 Web Development 的近期發展，對於近期火紅的 HTML5 、CSS3 @font-face 或胎死腹中的 XHTML 2.0 都想說一點，但感覺實在太 remote，我還是比較著眼於解決當前問題。

說完廢話一大堆，就要說說切身的當前的問題。話說吾妻給我不停慫恿下終購入 MacBook Pro，Switch 的過程也很順利，唯獨 MBP 熒幕太靚，resolution 太高，變相字體縮小很多，看得很不舒服，又其 Safari 看網頁例必要按幾次 Command + 才可 zoom 至適合大小，實在太費時失事也。

Firefox 有幾個 Add-on 可以設定 default zoom level，可惜 Safari 沒有類似的 plugin，但其實 Safari 有一個常被遺忘的 feature，可以輕鬆搞定這問題：就是 Userstyle。

方法非常簡單，先建立一個 CSS 檔，例如叫 userstyle.css，內容只有一句：

body{zoom:1.25}

1.25 是根據 1280:1024 這個比例計出來¹ ，可以隨喜好更改，再到 Safari 的 Preferences > Advanced，在 style sheet 一欄選剛建立的檔…

Boom! 就是這麼簡單！所有網頁即時放大至熒幕闊度，我等開始老眼昏花的人不需要再受細字之苦！瀏覽器佔盡畫面闊度亦配合一般 Switcher 的期望，一舉兩得也。

1280 是 MBP 的 screen width，1024 則是現在大多網頁的闊度

Google Chrome - 改變未來的瀏覽器？

今天最多人談論的科技話題，想必是 Google Chrome，Google 發佈自家瀏覽器，想必是籍著優化她一系列網上服務的優勢去搶攻瀏覽器市場吧，就有如自前 Apple 發佈 Windows Safari 及 Mobile Safari 的道理一樣。

太多人談 Chrome 的技術，我也不說了，自行看其他 blog 或她的漫畫解說已有個明白，我只想反駁一點，她對 Web Development 可能有的負面影響。

有人說 Chrome 會對 Web Development 帶來災難，全因支援 Webkit 的網站實在太少，萬一 Chrome 搶灘成功，很多網站也要重寫。這說法不無道理，可惜十分之鴕鳥心態。不要說 Webkit，在香港，我想還有不少 IE6 Only 的網站，可能 IE8 正式推出時也不能正確使用，更莫說其他平台。我認為一個 Developer，眼光應看闊一點，不要局限一切於自我封閉的技術¹²。世界很大，瀏覽器不只 IE；作業器統不只 Windows；Programming Language 不只 Java；Database 不只 Oracle。何況現在四大瀏覽器陣營 (IE, FF, Webkit, Opera) 也朝著網頁標準走，著眼製作遵循網頁標準的網站，不就是一個很好的治本方法？

世界不同，百花齊放本就是互聯網的本質，封閉自己活在自己眼中世界，只會裏足不前，技術落後之餘，得不到尊重是理所當然的。

延伸閱讀

看著 Chrome 的解說漫畫，對 Google 的 Developer 又欣賞又羡慕，既可堅持自己的理念，又可各自表達不同意見，在香港，有幾個 Developer 得到應有的尊重？
我最愛漫畫中一句 “I don’t care if there’s one fewer cool feature. I just want this product to be ROCK SOLID.” 有幾多 Developer 會抱住如此先做好本份的心態？一個好的 product，應先從基本著手，耍花巧是本末倒置。

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 或以上¹ 及 Greasemonkey。安裝 Greasemonkey 後到 GC!J project home page 按 Installation 下的連結就，再 reload atnext.com 就可看到效果。

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

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

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

盡職

近日很多資訊保安事故不斷被揭出，最令人驚嘆的莫過於入境處及警隊的內部資料竟然可以輕易外洩。我今早亦無意發現本地某大銀行的一個網上服務，其中一個用作測試的網站竟然中門大開，任人瀏覽，系統的設定，源碼以及一些登入戶口及密碼可以隨意下載，簡直豈有此理。

我已電郵那間銀行，要求她們盡快跟進，並調查有否洩露客戶資料。不過由此例子可見，被揭出的保安事故極可能只是冰山一角，相信有很多只是沒人發現沒報導出來而已。

資訊外洩事故，一定是人為疏忽。然而資訊科技業界都會犯的錯誤，要那些沒太多電腦知識的用家去避免確實有點困難 ¹。但最令我氣結的是商經局局長馬時亨說成這是用家不理資訊保安政策的後果，期圖把責任推給用家。

資訊保安政策當然要有，但只有它並不足夠。在資訊保安範疇，盡職 (Due Diligence) 才是重點²。所謂盡職，就是要把已訂立的政策，有紀律地透過負責任行為去執行訂立的管理常規。盡職是所有人的責任，負責資訊保安者尤甚，他應嚴謹對待每個處理資訊的步驟，亦要確保其管輆範圍內的程序有否違規，才可避免當中有任何狀況。現在很多的情況是，硬件不夠，軟件又陽春。用家保安意識薄弱之餘，指引不足，保安執行力不夠，幾環弱點加起來，不出事才怪。

各個機構現在最需要做的，是檢討一下機構裡的資訊保安，在政策，教育，執行上花多些功夫，全面檢討有否潛在危機，包括防止一切資訊帶離工作間。不要單純靠用家自律，這顯然是不會有效的。

這說法其實有點說不過，資訊保安不止是業界從業員的責任，其實是整個機構的責任
這是 CISSP (一個資訊保安認證考試) 第一課所說的。

網站裸跑 08

CSS Naked Day 今年已經第三屆，前兩年都忘了，幸好今年改遲一點，令我夠時間加上 wordpress plugin ，到時會準時脫衫，裸跑一番。

不知道何為網站裸跑運動的話可看看Jacky的簡介：

此運動的目的，在於推廣網頁標準，使用 Semantic Markup 和正確的結構，就算沒有 CSS，你的網站的結構內容仍然整齊不亂有意義。這也表示了，內容和表達，能夠清晰地分開。

延伸閱讀：
08 脫皮日
 預告：明天不穿衣

無障礙之都

昨晚看到勞福局的電視宣傳短片，宣揚無障礙之都，點子鮮明，清楚指出無障礙設計的重要。其實只要多留意一點，一些細微的改善已可達到無障礙設計，就如宣傳片中末的一級樓梯，只要稍為改動，已經是無障礙。

道路設計如是，網頁設計亦然。

關於網頁無障礙，其實香港政府一站通已設立了一個分頁，宣揚無障礙瀏覽的重要，並提供一些制作無障礙網站的貼士，應是香港第一個網站有如此的社會責任，這麼看重無障礙設計吧。雖然一站通曾被批評為一個抄襲 Y! 的分類網站，但在無障礙設計確實花了不少心思。希望其他香港網頁設計師或者網站管理人員，在搞 Web 2.0 Startup 賺錢之餘，亦會負點社會責任，顧及一些傷健人士瀏覽網頁的需要。

Handheld CSS 之死

隨著 handheld device 能力的提升，mobile browser 的操作及晝面顯示越來越接近 desktop PC，幾乎可以說 handheld CSS 已死。

眾所周知，一直以來支援 handheld CSS 的 browser 可謂廖廖可數，各款手機與 PDA 都有自己不同的 rendering engine 去呈現網頁。要把網頁設計能於這些 handheld device 顯示正確一直傷了不少網頁設計者的腦筋。而原本用來解決問題的 handheld CSS 卻發揮不到應有的功用，原因就是我以前提過的雞與蛋問題。結果，大部份網站還是要個別設立流動版，不但重覆製作，失卻網頁標準 one page, serve all 的精神；大多流動版更是原版的 trim down version，形成流動版的資訊往往殘缺不齊，是為三不像。

輾轉過去，handheld CSS 的使用率仍是舊模樣，但 mobile browser 的發展卻很神速。 Mobile Safari 正藉 iPhone 及 iPod Touch 大舉攻入 mobile browsing / mobile web apps 的市場，激起網頁設計的巨浪，不少當紅網站，如 facebook、google 更對 iPhone 作出優化，情況就像替 handheld CSS 拔喉，離 handheld CSS 壽終正寢之時相信不遠。

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

隆重登場，專講網頁標準的 screencast！

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

相關連結：

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

Apostrophe: 還我生存空間

左圖上句的 apostrophe 走樣，相信不少中文 Windows + IE6 的用家都見過¹，覺得很醜對吧。然而亦有不少網頁編寫人員，當遇見這個情況時，十之八九是把那個 apostrophe (’) 更改為 single quote (')²，快快解決問題外，心中還暗忖那死人 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:lang

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

蘋果裡的香港字

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

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

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

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

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

PHP Gif2HK (Big5 encoding)
生果圖像字表 (UTF-8 encoding)

其實，生果肯改用 UTF-8，不就更好？

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

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