網絡暴民 Jacky’s Blog

在看一些 link back 網站時，總是要花點時間才看到自己的連結，甚至要看 source code，所以寫了這個 高亮連結腳本 ，效果如下：

右邊的 box 會列出連結，按下可直接跳到該連結位置。

初安裝這個 script 後，會請用家填上想察看的連結 (可輸入多個，以逗號分隔)，如果日後想改變這個設定，請到 about:config 找 ‘highlightLinks.sites_to_watch’ 這條 key 來修改就可以了。

要注意的是因為此 script 會掃描所有連結，所以可能會拖慢載速度！ (應該可以用 Firefox 本身的 xpath lookup 之類來改善速度，遲些再研究)

《開機》 一書的英文原名是《Everything bad is good for you》，談的是流行文化，如電玩、電視、互聯網等等，並非如想像中壞。我們最常聽到的，是孩子沉迷電玩不讀書，不懂與人溝通。電視電影充滿了暴力色情，荼毒青少年心靈。就連寫 Blog 也會令人語文能力下降，只寫火星文。作者認為這些指控，都有點看錯焦點了，他舉了一個選擇題的例子：

…我將辯稱，電玩為認知能力帶來的挑戰，如果和另一種教育類型相比較會有效，這種教育類型一定會讓你回想起過去上課的日子：

---

賽門在做一個機率的實驗。他隨機從一組編號為一到一百的標籤中選取了一個標籤，然後把那個標籤放回去。他再試著從這些標籤中抽出他最喜歡的號碼，二十一。他抽了九十九次，都沒有抽到這個號碼。

他第一百次抽的時候，抽到這個符合號嗎的機率是多少？

A. 百分之一
B. 百分之九十九
C. 百分之百
D. 二分之一

---

如果以我們這位英文老師所採用的標準來評斷這段文字 — 從「麻州高中聯合數學測驗」中節錄出來的 — 就會是一篇徹底失敗的文章：這位賽門老兄是誰？我們對他一無所知；他只是個微不足道的角色，一件道具！文中沒有華麗的辭藻，什麼都沒有，只有光禿禿的事實，描述一項毫無意義的活動。為什麼有人會想要把一百個標籤編號，然後試著以隨機的方式抽取一個自己最喜歡的呢？賽門的動機到底是什麼？

對於流行文化的指控，就像這個例子般根本是捉錯用神。我們應該用更適合的角度，去看現在的流行文化到底對我們有甚麼影響。作者的發現是：流行文化使我們越來越聰明了。

越來越聰明？

本書主要討論兩個範疇：電玩與電視。作者分析我們玩電玩，實際上是在探索一個新環境，了解這個環境的運作，再逐步了解問題。作者稱這種技巧為「探詢」 (Probing) 與「套疊」 (Telescoping) 。所以玩遊戲並非只是手眼協調練反應而已，而是訓練出一種能對任何環境進行探詢套疊、解決問題的能力，而玩家就是在這個過程中得到滿足感，遊戲內容是甚麼反而關係不大 (所以通常來說遊戲故事都很老套，不是救公主就是救世界…)。

至於電視，作者主要針對西方的電視片集作討論。這些片集在多年以來，複雜度轉趨複雜：同時進行的故事線很多、人物關係複雜、畫面提示減少、交互參考到處都是。雖然如此複雜，但我們卻越看越有味道，也越來越習慣、也享受鑽研這些複雜劇情。科技在這個轉變有關鍵作用：以前人們看片集通常就只有電視播映時的一個機會，所以製作人必需用最淺白的方式說故事。現在人們可以從很多渠道重看片集，網上空間如討論區和維基等等也使人們可以更深入地研究劇情故事，片集的主要收入由「第一播」轉移到「重播」，因此片集製作人可將更多複雜的劇情加入，處處伏線，讓片集更耐看，也使觀眾更聰明。

作者也有提到其他的流行文化，包括近年發展急速的電腦和互聯網。其一對我們的影響是：由各種不同的程式、到網頁上不同的介面，我們都有了基本的理解能力，並能快速掌握。正如遊戲一樣，我們一裝軟件並不會立即去看操作手冊，而是立即試用，通過觀察與實驗來了解操作。想想到現在，我們面對各式各樣的表單、導覽、按扭、連結、文字輸入、狀態列等等，都有一定程度的認識，就算新的介面，如 Office 推出的 Ribbon UI，也能順藤模瓜地了解並操作。

人腦本愛探索

有人害怕流行文化使我們越來越懶，不去思考，只懂飯來張口，照單全收。上談到這些高度複雜的流行文化，絕對需要花大家的腦力，但卻是近年來最賺錢的文化產業。作者認為人腦其實愛探索、追尋，而非只是懶洋洋的不思不考，所以這些越來越複雜的東西才會有利可圖。

書中也花了好些篇幅談論 IQ 測試，其實並不能反映「天生」的聰明，而是會受到環境影響。人類平均的 IQ 值好像沒有上升，是因為每年也有調整分數的關係，但實際上我們比以前的 IQ 高了。而這當中原因是甚麼？作者認為與流行文化不無關係，不過這方面也只是推論，沒有直接證據。

雖然說流行文化有這些好處，但也不要忘記一些傳統的東西，例如書本。作者認為書本的功能本身是無可取替的，我們在字裏行間，通過思考來建構一個世界，這種體驗是獨一無二的。而且書本也比較適合用於表達一些有規模、系統、結構的意念，可以很深入。這也是為甚麼作者要以書本的形式去表達他這些觀點。

但我們因為要玩電玩，而少了時間讀書啊？作者說其實不僅讀書，新娛樂的興起，我們也少了時間聽收音機、音樂、看電視。可惜這並不是一本時間管理的書，所以對於這種狀況，作者也沒有提供任何指引，大家就要靠自己取得平衡了。

後感

正如其他的評論一樣，因為本書主要的例子都是來自西方，所以很難說我們的流行文化又是否有這種複雜化的趨勢，但因為全球化的關係，我們總也接觸不少，尤其是遊戲和互聯網。身在此類流行文化之中，我總是對書中觀點感到十分認同。傳統的評論框架視流行文化如洪水猛獸，卻忽視了其益處，一味批評下卻只會離我們的下一代越來越遠。

當然，正因為這本書主力是「平反」，所以觀點也比較一面倒地說好，不過我覺得這沒有問題，並不是各大五十大板才是好的評論。

從書中可看得出作者對於情況的樂觀，是基於他相信人類本質並不會在科技下變得僵化，而是用活躍和好奇的心探索新可能。我也衷心希望是這樣。

香港版的 Creative Commons 正式推出，大家可以上去弄新的 HTML code 了:

1. 首先到 http://hk.creativecommons.org ，然後點「授權」

2. 然後選擇條款，可加入附加資料，然後到下一步

3. 再選擇圖樣，就可以複製 HTML 碼了

很簡單吧~

最近看到兩篇文章： The Problem with CSS 和 Everything You Know about CSS is wrong ，都是 sitepoint 為新書作宣傳的文章，談的是 CSS 排版的問題。

CSS 排版難學又難精，因為其當初並沒有為排版而設的規則，因此即使要做幾個簡單的 Column，也必需走很遠的路：理解一大堆 CSS 的 Box Model、Positioning、Document Flow 等的運作原理，用很多怪招如 faux column、negative margin 等等去嘗試實作。終於做到效果，卻發覺某某在內容會破壞整個排版，脆弱得很。各大瀏覽器對 CSS 的支持程度不一，要花大量心力處理這些差異。也因為這樣，而催生了 一大堆 CSS Framework ，主要就是想解決排版的問題。

其實對於要弄 grid-like 的排版，有更簡單的古方：HTML table，問題是這個做法並不符合網頁標準網頁標準的精神¹，即讓 HTML 標籤能符合語義 (Semantics)，而有關外表描述讓 CSS 解決。所以 Table 只應用顯示表列式的資料，用 Table 來排版語義上不對。因此，推行網頁標準，間接要提供 Table 排版以外的方案，但 CSS 排版頗高的學習曲線，某程度上也阻礙了網頁標準的推行。

那麼還有沒有更好的方法，可以順得哥情又不失嫂意？上述文章提到 CSS2 裏的 display: table 類的屬性，即可以用 CSS 指示任何元素表現得像 table 一般，瀏覽器會在實際繪畫時，自動補上 table 元素。這樣的話，用簡單幾句語法就可以實行 Column 排版了。

有人會覺得：實際就是用 table 來排版嘛！這麼多年來叫人不要用 table 排版，現在又叫人用，豈非本末倒置？我想在這裏必需認清的是：用甚麼來做網頁排版才算「正確」？在 CSS3 裏的確有 排版模組 ，但仍然是在起草階段。而在真正可用這些排版屬性前，我們用盡現有 CSS 可行的方法去試去做，所以才有那麼多排版怪招，display:table 只是其中一種方法罷了，難道用 float、negative margin 等才是「正確」？最重要的是有沒有違反網頁標準的精神。使用 display:table，HTML 可以保留語義，CSS 只作外表描述，大概沒有問題吧？

當然，table 也並非完美，例如在第二篇文章中的相集例子裏的 HTML 碼：

這裏代碼其實跟一個 HTML table 差不多，只不過全都變成了 div。其中 <div class="row"> 究竟是一種只屬外表的架構，還是符合語義的？但如想使用 display:table，這個元素是必需的。 (雖然文章解釋過瀏覽器會自動產生其他 table 元素，但 Safari 上似乎有一些限制)。

雖然可用 display:table，但現時為止卻不是所有瀏覽器都支持，至少仍時是市場上佔大多數的 IE6/7 還未支持。將推出的 IE8 將會更全面支持 CSS2 並 通過 ACID2 ，也會支持 display:table，所以文章作者覺得時機大概成熟，可以試用了？不過要等到大多數用戶都轉成 IE8，大概又要好幾年時間吧？而且還要看 Windows 7 的銷售如何呢？

¹ 「網頁標準」在這裏的意思傾向於 Wikipedia 所說：In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods

Sometimes you would like to have a nice table to navigate data with the header fixed on top while scrolling. There are many Javascript dataGrid component out there to do this but sometimes you just don’t need all those features. So I have wrote a jQuery plugin to create a fixed table header on a normal HTML table. It’s called Stupid Fixed Header .

I called it ‘stupid’ because it does so many things to achieve this little effect:

1. create extra divs to wrap table up
2. cloning current table header
3. put the cloned table header on top of the current table
4. synchronize width of each cell
5. synchronize scroll position when scrolling

This idea is not original. I have read it elsewhere but cannot find the source again. So I do it in jQuery way.

The good things:

• supports horizontal scroll
• work across browsers (tested on IE6/7, Firefox3.1, Opera9.5, Chrome0.2, Safari 3.1.2).

The bad things:

• in order to calculate correct cell width in different browsers, I have made certain assumptions in the default implementation: table’s border-collapse is collapse, cell have borders, etc. Therefore, you may need to make change for the width calculation. This is made possible by supplying adjustWidth to the plugin option. (However, dealing with width in table can be really troublesome. Even current implementation is not pixel perfect.)
• Firefox has a bug of missing border when placing table inside a overflow div. Some specific CSS rules has been added to the sample page to workaround this.
• It’s not pixel perfect.
• It may not perform well.
• The header cells will not get resized when the table cells width changes. This can be done by re-calculate the cells width and add custom event to the table for triggering. I’ll leave it to someone who has interest in doing so…

To support IE6, I have worked around the z-index bug by hiding <select> component. The reason for not using iframe hack is that it will get flashy when scroll.

Feel free to check the demo and doc .