Merry Christmas!

__,_,_,___)          _______
    (--| | |             (--/    ),_)        ,_) 
       | | |  _ ,_,_        |     |_ ,_ ' , _|_,_,_, _  ,
     __| | | (/_| | (_|     |     | ||  |/_)_| | | |(_|/_)___,
    (      |___,   ,__|     \____)  |__,           |__,

           *             ,
                       _/^\_
                      <     >
     *                 /.-.\         *
              *        `/&\`                   *
                      ,@.*;@,
                     /_o.I %_\    *
        *           (`'--:o(_@;
                   /`;--.,__ `')             *
                  ;@`o % O,*`'`&\ 
            *    (`'--)_@ ;o %'()\      *
                 /`;--._`''--._O'@;
                /&*,()~o`;-.,_ `""`)
     *          /`,@ ;+& () o*`;-';\
               (`""--.,_0 +% @' &()\
               /-.,_    ``''--....-'`)  *
          *    /@%;o`:;'--,.__   __.'\
              ;*,&(); @ % &^;~`"`o;@();         *
              /(); o^~; & ().o@*&`;&%O\
        jgs   `"="==""==,,,.,="=="==="`
           __.----.(\-''#####---...___...-----._
         '`         \)_`"""""`
                 .--' ')
               o(  )_-\
                 `"""` `

[source]

因為要去Red MR歷險，所以就一個AA祝福...

Blogger的Mobile Template

Mobile Template顧名思義就是給手機用的輕量化版面: 沒有內文圖片、只給文章撮要、沒有大多數的widget，但支援AdSense mobile。

設定: 超簡單，就不過在Setting -> Email & Mobile，那個漂亮的QR Code旁邊選Mobile版要用的版面(Web或Mobile)，下方有preview button觀看效果。

*因為是Beta版，需Dashboard版本為"Blogger in Draft"

實測: 當然是這個blog :) 。
結果mobile版面在iphone和ipad的行為合乎預期: iPhone出mobile版，iPad出web版。

小結: Mobile Template目前只有一個+沒有customize，不過除非自己有另外做mobile css+頁面輕量化(小量widget + 自動自覺read more)，否則不會比Blogger的mobile template優勝。

FF4 beta 7

Firefox 4 Beta

Beta 7終於出來，有新的JägerMonkey，硬體加速、WebGL和一大堆東西....來下載吧!

p.s. UI的改動可以參考這篇

HTML5/Browser戰報: Adobe HTML5 Tool、Silverlight、w3c html5 test、mobile戰場開打

本文其實是三篇合一篇...

香港都市傳說-李氏力場 (Li-field)

會炒起這話題，一切源於南海二十年來最強颱風(原)－鮎魚(MEGI)

．[說文解字]．
這個鮎為韓文漢字*，中文為鯰魚－catfish是也。
而鮎魚是韓國提供的名字[wikipedia]...可能因為這樣才會直用不譯 (好些些日本漢字颱風名香港是不作翻譯，直接拿去用...)
因為不是中文，所以無關簡繁；因為不是中文，明報那些還在用HKSCS的網站又亂碼了－反而天文台好好的
*1/11註: 後來看了壹周刊的文章才找到完整考證，其實是韓國人保留了古中文的寫法，詳細見後記
．[說文解字。完]．

不過因為天時地利，這個最強颱風最後只能弱弱的登陸福建，而其詭異的行走路線，網民將其歸咎於本港都市傳說*之一－李氏力場
*如果說香港的都市傳說應該少不了丁蟹效應/秋官效應，有興趣自行Google~

Browser戰報: Chrome大躍進及IE二三事

Chrome
Chrome 7 released，Chromium的版號升為9，正宗的「超IE趕Opera無視Firefox和Safari」

p.s. chrome 7的硬體加速沒開，有心試的人可以照這篇教學做。
其他可用options:
-enable-accelerated-compositing -enable-gpu-rendering -enable-video-layering -enable-webgl -enable-accelerated-2d-canvas -enable-fastback -enable-aero-peek-tabs

*1 XP可能有問題
*2 其他OS把 "-enable" 改成 "--enable" 再append到chrome的path就成

Firefox
Firefox 3.6.11 & 3.5.14 released，有相當數量的安全性更新
*今天(2010/10/25)的arewefastyet.com出現了FF4 nightly在sunspider小勝chrome和safari的景象 [有圖有真相]
(thx @bcse)

Opera
Opera 11 alpha released，有add-on可以玩了

Safari
...這次沒他的份

IE
本篇主角，話有點多。
1. IE 9對CSS3的支援令人絕望是有原因－“The problem with Microsoft is they just have no taste. They have absolutely no taste.” [Why Microsoft Always Fails with IE]
說白點M$那群人就是超級無敵的設計絕緣體－UI、UX、Designer是超越理解範圍之事，也是最好不要去想到的事
「網頁上的特效什麼的用程式去做就好了嘛，Designer不需要做這些」(設計對白)
所以Designer會用的反而Developer不會用的CSS總是被忽視的 (也解釋了為什麼WP 7的Style是那種美感為0的工程師也會造出不太難看的App的格調了)
我想，M$的Engineer除了是設計絕緣體也是一群熱血笨蛋...
2. WP 7的IE版本是.....是 IE 7! IE 7! IE 7! (無限迴音)  [Acid 2鐵證]
3. IE 9的魚缸Test是跑canvas+大量JS動畫，正常情形整個下來是燒CPU－誰會想到用GPU去加速這部分啊?! 當然各家browser全敗是也。

Blog Action Day 2010: 水 - Infographics大合集

本年主題: 水 & 2010年世界水日

所以本篇就整理了一些和水有關的Infographics: 從宏觀的水資源統計資料到水知識以至是瓶裝水(Bottled)、水痕跡 (Water Footprint)都有~

HTML 5 Framework/Boilplate, Round 2

這是上集的延續...以下兩pack做的事和之前的兩個大同小異，所以不外加說明了...

HTML5 Starter Pack

Blank HTML5 Website Framework

這種懶人包只會一直出，每多一個browser就會更新 (遠目IE 9)，HTML5要像HTML4般廣泛支援、輕鬆使用路還很遠...

================
OFF Topic: Yet another HTML4 CSS Reset
.toucan-css-reset
HTML4/XHTML的CSS一向都是用Eric Meyer's CSS Reset或者是YUI: CSS Reset，這是另一個選擇

樂施赤腳日 Blogger 聚會

在剛過去的星期一我參加了一個小型的Blogger聚會－樂施赤腳日 Blogger 聚會。地點是北角的樂施會教育中心內的Studio~

W3C: 不建議使用在網站上使用HTML5

標題說的是這篇:
W3C: Hold off on deploying HTML5 in websites
超精華版:
「W3C的不建議用HTML 5的主因是"interoperability"(互通性－可理解為跨平台*兼容性)」
*這類指在各種不同環境下的瀏覽器

3行回應:

1. 太過看重十年的科技就永遠只能用十年前的科技 (對，那個叫"I*6"的瀏覽器，我是說你)
2. 沒競爭沒進步，要不是Mozilla和Webkit加入HTML5 & CSS3，IE 9哪會有這麼大的進步? 
3. Open貴在自由，DRM甚至是User ("interoperability")不是阻礙前進的理由

因為這篇實在太過令人想吐糟，Slashdot固然是滿滿的吐糟，不過網上也有正經和諷刺之極的回應:

1. Hold off on deploying HTML5 in websites? - 比較長篇的正經回應
2. CSS 2.1 “not ready for use” says journalist  - 完全是惡搞 XD
   感想: 你永遠不可能滿足所有人，總有不知道升級為何物的User－"interoperability"不是你只用CSS 1.0、Table和frame的理由，在IE也要追Web Standard的今天請不要拿IE來威嚇Web Developer或要他們以IE作指標，就算表面沒說一個真正的Web Developer會打從心底看不起你: Web Standards才是future proof的東西，只看現在或過去終有一天會無法前進、也會被世界遺棄而被迫退下。
   而那天其實不遠。

[Special Thanks: @othree and @patrickliu]

Unlimited IE works

[Special Thanks: @galileo44 題字]

在IE全球市佔率跌破50%、FF 3.6市佔率超過IE 6的時刻，Web Ninja Mr.Doob 用HTML5重新打造了這個致敬作...

classic IE6 effect (HTML 5)

Create Your Crash Report Art, Your browser is not hanged. :)

Event三大裝備

1. 電源線/流動電池 (儘管可能找不到可以插的插座/電池沒充電)
2. LAN線 (儘管可能找不到可以用的LAN頭/手上沒有可以接LAN線的裝備)
3. Pocket Wifi (儘管可能會場沒訊號)

以上三者皆無時........專心台上發生的事吧，別只是上推 XD

[HTML5] HTML5 framework

HTML5近年已成話題，Apple WWDC和Google IO都有session特別提及HTML5足以見證其重要性。然而因為某些不受Developer歡迎的browser及browser間的差異所以HTML 5未能被廣泛應用...

終於有人忍無可忍，推出了類似CSS framework的東西－HTML5 Framework
這些Framework的共通點是:提供cross-browser support的HTML5 範本和必要的fix，讓你copy一下就可以寫出IE6也看的懂的HTML5~

HTML5 Reset
統client side的framework package，用法和blueprint CSS相若－除了要copy的東西多了很多...

HTML5 Boilerplate
終極HTML5支援，client至server設定(Apache)一應俱全

以上兩者優點是支援遠至IE 6，缺點是檔案太多...

不過就算browser真的support HTML5，一定程度的Reset也是必要，另文再談。

[CSS3 Minefield] Transition

[本文的Demo請用webkit系的browser如chrome和safari最新版觀看]
前言
1. 偏見不是一天造成的
2. Safari和Chrome在CSS的部分幾乎一致，分野直至Mobile才出現
3. Vendor prefix = 小心被炸
碎碎念完畢，開始。

正文
CSS3 Transition是一種「不自己寫過沒感覺」和「很易被雷到」的東西

在說Implementation前說一下這是什麼東西。

[地上最短電波歌] 尖尖尖

[嚴重警告: 內有強烈電波，會造成非自願的腦內loop，敬希垂注]
[嚴重警告2: 這歌的恐怖在，哪怕只是字面上看見腦中已經開始play...]
[因為實在是太誇張了，這次的video我就用link了]

電波歌者，簡單來說就是本身意味不明*但莫名奇妙的聽了後會上癮，不管有沒有在聽腦中都會突然播放、不小心會哼出來、做夢會夢到的歌

*「電波」一字之由來(日字)，英文為gibberish－不過電波歌的英文是Earworms喔

不過以上都不是重點，重點是「一開始腦中播放會一直loop」

日系Twitter小玩具

最近看到幾個好玩的就寫一下...

DotWar
Twitter頭像大亂鬥。玩法是守護石攻防，士兵、戰力則是來自頭像
－順帶一提，透明的兵力是0 (所以 @kelvw 這位推友大概是最好欺負的了 XD)


IS Parade
可輸入twitter ID或hashtag，之後就會看到該ID的followers及有提過那hashtag的推友們在遊行~


shindanmaker
簡言之就是成份分析產生器的twitter ID版，輸入的部分就只是一個提示輸入ID的input box，生成的部分有點難用但大家都創意無限瘋狂惡搞...

p.s.關於成份分析的產生器，原型作者CQD君另有專文提及

UTweet
Uniqlo的Twitter toy之一，和IS Parade原理相同，不過顯示的是Tweet而非推友－那個印章式表達十分威的說...

Color Tweet
Uniqlo的Twitter toy之一，和UTweet幾乎一樣，不過這次玩mosaic...

至於歐美的實在太多，請自行google Twitter Toy了 :P

[置頂][MeetUp] 22/5 Ideabrush (水墨cg) Meetup

UST的水墨cg軟件 - 墨戲 MoXi 的作者，Nelson Chu 在 City U會有場MeetUp
以下引自Ideabrush的Blog:

時間：22/5, 6-8pm
地點：City U, Room G5-214

內容：比較隨意，我可講講以前做MoXi 的經歷, 現在在微軟工作的感想，和將來的打算。

－墨戲人生: 分享會


對Cg和香港搞科研的朋友歡迎參加，可以的話請用 #ideabrush #meetup 這組hashtag 傳播訊息

Update: 會來的朋友可以Add Facebook Event: Nelson Chu 分享會

Special Thank: @bencrox

This is problematic #2 - Be focus.

I don't think I can make the next ep. of this series in that fast, but the genius bloggers always give me a chance
我沒想過這麼快會有下集，不過總有一些才華洋溢的天才Blogger給我
吐糟的
機會...

Our guest this time...(本集來賓)

A short blog post?

It is still acceptable if it is REALLY that short. Click the link below to see the truth...
如果真的有這麼短還可以啦，轉看全文看真相...

假文、Lorem Ipsum、MoreText.js

前言: 這是因為MoreText.js帶起的假文熱潮而產生的考古文...
假文(Dummy Text/Lorem Ipsum)，一種排版上為了填充文字區域而存在的(普遍)無意義文字。源起是拉丁語系(英語為主)常用的"Lorem Ipsum ..."，所以又稱為Lorem Ipsum。
選用無意義的文字/文章是為了使觀看者專注排版效果而不受字義左右，所以文字愈是看不懂的愈好；但因為如果和真實世界文章差別太遠會有潛在的字型組合問題，所以又不能用隨機字母組合－是以元祖的Lorem Ipsum為基於拉丁文章 de Finibus Bonorum et Malorum ([英] On the Ends of Goods and Evils / [About] The Purposes of Good and Evil, Cicero,45 BC) 所修改的半拉丁文版 [Wikipedia]。
*不過今天常用的Lorem Ipsum實為PageMaker作為Template的燙印紙修改版(Letraset sheet Ver)
相對於拉丁語系，方塊字的中文並無傳統假文，一段而言都是隨便作點什麼+不斷重覆來填充內容，直至有richyli的假文產生器出現才有點變化。不過因為相關技術 (NLP + 各式語言資料庫 + Scripting Language的強大文字處理技術) 成熟所以有MoreText.js這一類逼真假文產生器面世，同時傳統的Lorem Ipsum也有了不少強化版－

This is problematic #1 - Sponsors are important, but...

...let's me finish the main content first:

我知道你缺錢，可是你連完整文章也不給看是怎樣...

The money-begging layout is more disgusiting in compare to this clean, neat, but also sponsor highlighed layout:

那種缺錢layout和上面這種大方得體sponsor又顯眼的layout一比簡直是叫人想翻桌...

Diagnostic (診斷時間)

~_~ (Red Squre = Ads, compare yourself)

Much better.

Lesson:
1. Don't use ads break your reader's plot.
2. Once plot is broken, reader either go to rss or leave the site forever.
3. The web 1.0-newspaper-styled ad [fig.1] is reader's tragedy.

教訓:
1. 別用廣告阻斷閱讀流程。
2. 這種Layout絕對趕客: 一旦讀者看的不爽不是去看RSS就是走人。
3. 那種承自web 1.0的報紙廣告風格[fig.1]簡直是讀者的災難...

fig.1

英文報紙常見版面之一，所以不作英文說明。
p.s.想當然爾是存在著更難看的變種...(例如將廣告塞在大L的位置)

Legendary Surströmming

Surströmming，在萌菌物語 (もやしもん)出現過的超臭食品，瑞典國菜兼土產－鯡魚罐頭

這是瑞典漁夫為了減少鹽的用量而發明的天然鹽醃食品。

漁夫們在初夏捕鯡魚，將生魚放一層鹽一層魚的封好(效果是好像在濃鹽水醃浸)，再放於大桶內置於太陽下進行任由其自然發酵，然後裝罐等待出售。這種罐頭的特別之處在於裝罐時不作額外殺菌，讓鹽壓厭氧菌(Haloanaerobium bacteria)形成優勢菌種在罐頭內繼續發酵，所以最後食用的部份是已經被細菌消化完的產物。

因為那種有奇怪名字的菌發酵時會產生大量二氧化碳(及一堆奇怪的味道)，可食用時整個罐頭會凸起，以及令罐頭內十分臭。
又因為是密封發酵，罐內氣壓會越來越高，所以放太久會爆炸 [萌菌9的起源解說]

Netbeans 6.8 Ajax 開發實務 (簡易版)

引言

在用Aptana寫了一會php和js後，受不了Eclipse系的無能後只好轉用NetBeans...
結果用起來除了CSS selector的Auto-complete不太足外其他功能用起來不錯－尤其是js DOM/variable scoping (Partial)和php的auto-complete。充足的doc和function highlight、code folding等等
而且NetBeans還有Versoning (SCM)、Issue Tracker (Kenai，不過太複雜了，用SpringNote的TODO Template做會快一點點...)，用起來比Aptana好太多了...

極速Google Buzz體驗

難得地得到Buzz+幾個也在試的人，那就來個極速體驗文好了...

1. 介面是murmur + facebook wall
2. 功能上有Wave和Facebook的影子:可以塞link塞map塞圖片至Buzz
3. 當然功能上也有Twitter和Plurk的影子
   不過論Follower管理，Buzz比Twitter和Plurk更好 (因為是Facebook式 XD)
   *UI也有一點Plurk的影子...不過murmur本來就有Plurk感，so...
4. 至於對手理所當然有Twitter－Twitter的Tweet可以Sync to Buzz，不過目前為止沒有人成功
5. Connected Site可以Sync Flickr、Blogger、GReader至Buzz
6. 一如GMail有keyboard shortcut
7. 另一個Twitter/plurk沒有的功能: @reply auto-complete 人名 (明抄Facebook)...不過目前的auto-complete是找contract而非找threads上的user，所以對於contact太多的人這個沒有
   引申問題 1:要用@reply是因為沒有reply鍵/link可以不用打人名就回覆
   引申問題 2:如果不在contract list上是不可以auto-complete的
   
8. 只要Join過一個buzz，之後reply會狂進inbox (GMail還好，用其他Client則...)

Buzz要改的地方不少...

CES 2010 e-reader + tablet懶人包

先祝各位新年快樂～
因為現在每天有相當的閱讀時間(乘車時間)，配上山積的都是Tech書(=動不動1.5"+)，於是有了買e-reader的念頭...
剛好現在是CES就看看有些什麼有什麼e-reader是合用的。因為是Tech書，Screen Size 6"+，PDF支援要好，而且要有highlight及筆記功能。另外最好有字典...
[*下面的貨幣單位是USD]