Being asked to introduce the Boot to Gecko project to various audiences, I think it’s appropriate for me to write some FAQ here on common misconception of the project, and the Web in general.

Misconception #1: Boot to Gecko is yet another mobile platform for apps.

To run you apps on Boot to Gecko (and any other devices with a browser), you would just have to deliver your apps on the plain old-school Web on Internet.

Boot to Gecko is aim to (re)boot to the web. That is, to bring the Open Web to a level that it could compete with proprietary mobile platforms. To application developers, the Web is yet another platform to develop (you would need to port your apps from Obj-C/Java to HTML5), but the good news is your app would now becomes the cross-platform web app, not B2G Apps, PhoneGap Apps, nor Metro-style Windows 8 Apps, and it’s always available to everyone on every platform, one web address away. It would also make your app free from platform vendor control, since no one owns the Web.

Misconception #2: Phone need to be always on-line to use Boot to Gecko and web apps.

Even though every apps on B2G phone is from a web address, even the home screen itself, offline capability can be easily achieved with HTML5 Offline AppCache technology. It’s something that can be done today, available to many browsers available on both desktop and mobile. The only thing you should take care of is how network dependent your app really is. Even on iOS, Twitter app or Facebook app is useless without network connection. You should define a clear boundary between program assets and online information in your HTML5 app. After all, it’s not just an website anymore.

Misconception #3: Web app is crappier than “native apps” in turns of UX.

This is a notion I strongly disagree. The only reason mobile browsers on devices perform worse than the native app is because the venders of the device did not invest enough effort on it. There is a conflict of interest here. Limiting the capability of APIs accessible, besides permission management issue, is the same thing. At Mozilla, we can show that with proper engineering, mobile browser, or web runtime, can run smoothly as silk on devices and deliver the so-called “native” experiences. Other venders investing the web is also doing the same thing. For devices running B2G or Chrome OS, the native app is web apps, there is no point to make it slow, intentionally or unintentionally.

Misconception #4: Web apps running on B2G is dependent on B2G or Mozilla Web APIs.

Yes and no. If you need specific access like SMS message database or phone dialing, initially B2G would be the only platform that make these features available to you. However, we design these Web APIs with standardization in mind, and work closely with standardizing bodies to made these APIs ready for other venders to implement. Evidently, our Web APIs does not live under PhoneGap.*, Windows.*, nor Ti.*; they are design to be at where it should be, like navigator.* (Sure, as experimental features, they came with moz prefix right now, and usual feature detection is advised).

If you choose other packaged web app solution, then, your web app is depend on it. Forever. Mozilla would like you to develop and distribute apps directly to the Web, and you should.

Misconception #5: Apps on Web are free of charge, developers will never make money out of it.

Yeah, like no one had ever become billionaire because of applications or services they put on the web.

There are tons of way to provide services on the web in exchange for money, surely there are ways to make money with web apps, other than bagging for US$0.99 from users. Sure, closed platform with single distribution “app store” seems effective in terms of delivering revenue to developers (besides having 30% of your money being taken along the away), but Mozilla believes choices matters, and an open platform deliver choices to both users and developers.

Mozilla is also exploring effective distribution and monetize channel for the Open Web, in our Open Web App Project and the Mozilla Marketplace website. The goal of offering choices and freedom is deeply embedded in the feature design, both in browser App API and in storefront, and with user authentication and authorization (which is the scope of the Mozilla Persona project, previously known as BrowserID).

Conclusion

Just like Mozilla did with Firefox years ago, we intend to deliver great product that could influence the market, and let the market influence other venders. No one owns the Web, and no one should. Mozilla is here not to make money or become monopoly, but to bring the goodness to the Web that could drive innovation and opportunities centuries to come.

The CTO of Opera Software, Håkon Wium Lie, once said the Web will last for at least 500 years, and made impact to the society just like Gutenberg’s printing press. I totally agree with him, even though none of us will be around and told me I was wrong, as he puts it. Let’s make it great.

Disclaimer: This post express the opinion of my own and does not necessarily represents the point of view of Mozilla nor Mozilla Corp.

I managed to squeeze this into 140 chars:

Paying taxes and obey the law does not mean consent to the current administration, but silent and not acting [your] citizen right is. PLEASE VOTE.

This Has Been a Public Service Announcement.

Mozilla Corporation 新工作

11 月底的時候換了工作。新工作在 Mozilla 的台北新辦公室，加入的研發團隊做 B2G 專案相關的研發。一開始，MozTW 的我們接到 Mozilla 私下告知關於在台北設點的計畫。起初雙方的交流僅止於公司和社群未來在行銷面上的合作方式，並沒有特別聊到什麼工作機會；事後才知道 B2G 除了 System Engineer 之外還有 Front-end Engineer 的職務，才投了履歷，做了面試。這算是一個角色的轉換，畢竟社群和工作是不一樣，而且在某個層次是不相容的；也就是基於這樣的心情，11 月的 MozCamp Asia，我以社群志工的身分最後一次參加 Mozilla 活動，對抓火狐網站的數據和心得做一個報告。

對於 Mozilla，感覺一直都是千絲萬縷的。就如之前的文章提到的，一切一切都是個往回看的過程：那個跑去 MozTW 的大學生一定沒有想到，Mozilla 後來對他職涯的意義……從因為參加志工活動開始，認識了厲害的同輩，還有認同理念的朋友，到現在實質進入了 Mozilla 本身變成員工，開發下一代的 Mozilla 其中一項自己也曾想過的產品。在 MoCo-TW 的同伴都很優秀，但開始工作之後也深切體認到自己因為盜版非資工出身導致的基本知識不足；寫程式時每每總是想著，如果我知道更多資料結構和演算法的知識就好了。當然我不是那種跑去面試會跟面試官說「願意在公司努力學習」的人（這樣是找不到工作的），只是實際工作時能這樣覺得，然後開始讀書，應該算是成長吧。

喔，我好像忘記提到為了找工作，我把 Portfolio、個人網站、Blog、CV 全部都改版了？在新工作的第一個星期就被 iThome 邀請了訪問，順勢就拿了 Adopt Mozilla 娃娃拍了照，哈。

Relationship

2011 年的另一個美麗的意外就是新的感情。女友是高中同學，在畢業前夕一起籌備畢業典禮的朋友之一。不是同班同學，所以當時也不是真的很熟，這幾年就保持著線上媒體（Facebook、Plurk、BBS）的聯繫，偶而她的樂團有演出的時候才會見到面這樣。一直都是欣賞著對方，後來因為某個奇怪的原因見面（此處保留），就這樣開始了一切。

在知道對方心意那刻除了很訝異，也覺得自己很幸運。能得到這種純粹的喜歡，要讓自己更好，值得得到才行。

一直在 Facebook 上面閃大家就不好意思了

Convergence

當一切都匯集，要更努力拉住才行。大家新年快樂。

Note: If you are reading this on the site, you will see the banner censored.

The US Congress is currently discussing a bill that will give the power of government to shut down websites, prosecute social network users (i.e. you and me) for making minor non-commercial copyright violation (e.g. singing a pop song on Facebook), etc. This is the end of free speech on Internet as we know it, and is an attempt to build national firewall and censorship system much like the one in China.

Please join us for the fight to preserve freedom on Internet. More information can be found at americancensorship.org.

$('.bouncy').addClass('bounceInDown');

但這個作法有個問題，在他的範例頁面上也是，就是在動畫結束之後沒有辦法再跑一次（因為要先拿掉 Class 再加才會有 transition）。所以最基本的，應該要在動畫跑完（預設是 1 秒鐘）之後把 class 偷偷拿掉。我還有其他的需求像是 *Out 的 transition 跑完之後就把元素藏起來、callback、如果不支援的瀏覽器就跑 jQuery 動畫這樣，最後就變成這樣一個小小的 helper plug-in 了。

jQuery.fn.animateCSS = function (className, callback) {
	var that = this;
	if (!Modernizr.csstransforms || !Modernizr.csstransitions) {
		// for old browsers we use jQuery animation
		// only fadeIn and fadeOut for now
		if (/In/.test(className)) this.fadeIn(1000);
		if (/Out/.test(className)) this.fadeOut(1000);
	}
	if (/In/.test(className)) this.show();
	setTimeout(
		function () {
			that.removeClass(className);
			if (/Out/.test(className)) that.hide();
			if (typeof callback === 'function') callback.apply(that, that);
		},
		950
	);
	return this.addClass('animated ' + className);
}

有需要請隨意複製貼上到自己的專案去囉。

on() 統合了 bind()、live()、delegate() 等方法，用這個方法可以取代前述方法的功能。不過這就好玩了：如果 on() 可以取代 bind() 和 live()，原本的程式碼應該要分別怎麼改寫？

看了半天文件才得到下面的結論：

// 舊
$('#myid').bind(event, fn);
// 新 (改名字就好)
$('#myid').on(event, fn);

// 舊
$('#not_in_dom_yet').live(event, fn)
// 新
$(document).on(event, '#not_in_dom_yet', fn);

另外也是寫下來之後才發現之前 live() 語法的問題：

1. live() 的原理是把事件綁在上層的元素，事件 bubble 上去之後再去檢查從下面上來的事件是不是符合之前設定的 selector。這個原理在 on()（或是 delegate()）才會被暴露出來（有發現那個 document 嗎？）。如果只寫 live() 的話等於是不求甚解的用法，最明顯的問題是無法掌握事件觸發的順序，常常在 bind() 裡面有用的 ev.stopPropagation() 改成 live() 就沒用了。
2. live() 把事件掛在 document，雖然比每個元素都 bind() 有效率，但是還是要過濾很多傳上來的無關事件。用 delegate() 或是 on() 才能指定要把事件 bind 在哪裡。
3. live() 的語法不合邏輯。一個用 $('#not_in_dom_yet') 選元素的 jQuery 物件，裡面明明就沒有 DOM 元素，那照理說後面接上的方法都不應該做任何事情。結果 live() 反而是這樣運作的。

所以，就如 jQuery blog 所說的，這的確是一個瘦身計畫：只提供一個簡單的 API 來處理所有事情可以簡化程式碼的設計，也可以幫大家腦袋裡存的文件瘦身。那篇文章，還有 1.7 新功能的介紹，建議大家有空可以看看。

I have not much to say like everyone else on the web and mess media. I don’t want to go on skin-depth things like how he transformed the computer industry and the world – I didn’t even agree most of the tactics he used (like, all closed-source, closed and single distributor model for the iOS platform, etc.).

I want to share something personal with you here, instead.

I did a lot of things that didn’t make sense to my parents, nor to myself at the time. Ever since mid-school, I spent countless hours making websites. I was the computer guru to my high school classmates because the guestbook/chatroom service I built was practically the online social network to them. When I went to college, I chose to take physics as major instead of computer science because I thought there were more wonders in the mechanics of the physical world instead of inside a computer. That turned out to be true, and the wonders unfortunately succumbed me; my grades in physics classes were never higher than the one and only computer science class I took. I didn’t know what to do at the time; I didn’t want to, and couldn’t go for the regular career a physics-major in Taiwan would usually do, that is go to graduate school, and to TSMC/UMC or other semiconductor companies straight from school, the flagship industry of Taiwan – The promise land with dicent salary and social recognition.

Nevertheless, I got my B.Sc. anyway. I stall a bit by deliberately not to meet the graduation requirement (which is, ironically, English requirement) and stayed for a fifth year. I joined MozTW and took care of Firefox localization, started to get to know people in the technology circle, many of whom are big names I admired. I gave lectures at meet-ups and events, wrote web application for Firefox promotion. I co-organized events, designed event websites. I built a paper toss game in the IE9 hackathon event and was awarded an XBox 360 + Kinect. Eventually, I am recognized by people as a qualified front-end developer.

(Full text of Steve Jobs’ 2005 Stanford Commencement Address)

I don’t actually remember when I see the speech for the first time. At first it didn’t make an impression. It was not until some day, I realized “connecting the dots by looking backwards” is exactly what I did, and do right now: Without these “personal homepage” I wrote before college, I wouldn’t know how server-client architecture works. Without my college projects in the physics department, I wouldn’t have any idea how to organize a full-scale rich-content website, nor the chance to improve my communication skill. Without MozTW I wouldn’t be known by my talented peers. Even physics has a part when I looked backwards – The paper toss game I wrote at the IE9 event is actually based on physics simulation skill I learned in school. I hated that class, but without the knowledge the game wouldn’t have such animation effect.

Indeed, Steve was right all along. “You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. … This approach has never let me down, and it has made all the difference in my life.”, he said. By looking backwards, I found everything I did somehow makes who I am today, and they surely made all the difference.

This is what Mr. Jobs meant to me. Nothing technological nor innovative, purely personal. So long, Steve, you lived a good life. This post is my tribute to you, and you will certainly be missed.

為何要選擇自由軟體授權你的 JavaScript 等前端程式碼所構成的 client-side web app？

答案對我來說很簡單：

1. client-side web app 活在瀏覽器上，Javascript 等所有程式碼都是明碼下載下去執行，不會被編譯。
2. 當然你可以用 compressor 做 obfuscation，但 compressor 再厲害也只能做 dead code removal 和重新命名變數。Beautifier 可以很容易的復原除了變數名稱以外的所有東西。程式的邏輯本身是不會被保護的。
3. 如果程式是用 GWT 等工具撰寫，前端程式碼也會面臨一樣的問題。
4. 就算人家看不到，天底下哪有什麼不能用 black box testing 重建的程式？假以時日總會有人山寨出來。
5. 因為技術上做屏蔽不可行，所以在授權上去標示著作權所有抄襲必究只是防君子不防小人。
6. 而防君子這件事情一點好處也沒有 … 妨礙了自己的技術被認可的機會，也阻礙整體的技術發展。

所以基於商業方法要做什麼技術考量的話，我的建議是：

• 程式的主體、架構、流程還是可以放在 client-side。現在有很多很棒的 library/framework 可以幫忙這件事情，像是 jQuery、Modernizr、backbone.js。尤其別忘了善用 History API。
• 如果有什麼獨家演算法需要保護的話，請用 server-side script 實作，放在 server 上用 API 的方式提供。但代價是伺服器的 CPU 與流量。
• client-side 的 API wrapper，甚至是完整的 client 程式本身，都可以用自由軟體授權（像是 MIT License）放出去。理由如前述。
• 如果你的 server 端服務真的如此獨家又有價值的話，把 JavaScript 包成 API SDK 放出去，反過來增加他的價值。公司甚至可以用 API 用量賺開發者的錢！Google 有許多 API 就是用這種方式提供的，免費提供，超過流量收取費用。

* 其實不算安全問題而是商業方法問題。只是大家都覺得 code 被看光叫做不安全。

TechDays 這個大會比較適合企業 IT 決策人員，多半的議程都在介紹各種解決方案，技術議程算是其次。HTML5 與 Web 技術終於成為 Microsoft 的主要解決方案之一；尤其是星期三的 Build Windows 2011 Keynote 看到 Windows 8 這平台示意圖：

還有 Metro-style App 在 Visual Studio 2011 Preview 竟然跟 PhoneGap 一樣，是標準的 HTML Web App，用 window.Windows.{Storage|...} 來存取 Windows Runtime API，真是令人感慨萬千呀 …（裝老）

總之，Web 最終的程式平台，Web Tech 是真正的跨越所有平台的程式開發模式。你要加入我們嗎？

Burghardt expressed his appreciation for Ma’s pledge of no surprises in the U.S.-Taiwan bilateral relationship as well as his emphasis on substance over show. He recounted three examples Ma had given him to demonstrate this commitment:

• Taiwan would not ask for a certain kind of transit just to show that the U.S. would grant it;
• Taiwan would not ask for certain weapons systems just to show the U.S. would sell them;
• and Taiwan would not insist on certain names just for domestic political considerations.

(原文)

後面的意思是，台灣目前的執政政府私下向美國承諾：

• 台灣政府不會為了證明和美國的關係而要求特定形式的(台灣總統出訪在美國國內的)轉機方式；
• 台灣政府不會為了證明和美國的關係而向美國要求特定武器的軍購；
• 且台灣政府不會因為國內政治的考量而向美國要求特定的稱呼。

這看起來很糟呀。畢竟看了這麼多年的中台美關係新聞，人人大概都知道，從李登輝總統開始，美國要賣什麼武器給台灣、台灣總統去中南美洲經過美國要怎麼被接待，都是美國行政當局向台灣公開表現姿態的方式。比較遜的總統像陳水扁，就會搞到下不了飛機直接被送到中美洲去；比較厲害的總統像李登輝就可以做到回學校演講，幾乎是「順便」入境美國訪問。第三項稱呼，要說杞人憂天也罷，但是美國政府自從國會制訂台灣關係法，定義台美關係之後，就沒有在對台灣的地位上有任何的正式調整了，如果政府放棄和美國行政當局堅持名稱的話，下次歐巴馬訪問中國的聯合公報會不會出現「Chinese Taipei」？

簡單說，這個密文的意義是，台灣政府把在國際還有空間可以因為美國表達存在感的工具都偷偷封殺掉了。我是不願意像某些網路上的言論去歸咎動機是什麼啦（所謂的「賣台」？）；可能只是比較遜的總統、或是在現在的國際形勢（密文以外我們還看不到的那一大部分）我們的外交部已經沒有籌碼可以放了。

唉。

這篇文章是給 Mobile App 比賽的介紹。

COSCUP 2011 網站帶有 Responsive Design 概念的 Media query CSS，在手機上網站會套用手機使用的 CSS 版面：

整個畫面的 CSS 重排；右方的贊助單位 Logo 隱藏，改成隨機顯示贊助單位於標題下方。贊助單位頁面有所有的贊助單位。

議程表格使用 CSS 將 <table> 原有的樣式拿掉。「目前議程」的按鈕可以在大會期間快速跳到目前正在進行的議程：

原本網站展開的議程詳細資訊的顯示方式如下圖：

在 iOS 上，網站可以被加到 Home Screen：

從 Home Screen 啟動會進入全螢幕模式：

結語

COSCUP 2011 網站的設計目標是在同樣的網址，同樣的靜態 HTML 上面在桌面與手機均提供最好的體驗。在手機上，希望能夠用類 Web App 的形式展示手機使用者即時需要的內容。沒有在前端技術上很複雜的去做議程篩選、離線瀏覽等等，不過那些都是 Web App 的潛能。使用 Web App 的形式也能實現真正的跨平台——只要有瀏覽器的手機皆能執行操作。

希望大家會喜歡。

最後，感謝 COSCUP 2011 網站組團隊的協助，尤其是魏藥在後端內容管理上的開發。

很早以前就想講了，但講了大概又會被戰。相較於英文維基百科，中文維基百科在社會和歷史條目充滿了 systemic bias。但是那些主觀論述又不是編輯者有意加進去的，而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識，而不是原本百科全書應該有的可驗證的事實。因為是暗示又是共識，所以有自覺的百科編輯者反而是少數；中文維基只好長成現在這個樣子了。

總之我昨天還是在噗浪上提了，還被協會的人看到 XD。想想作為一位 Web Developer，我還是用寫 code 的方式來貢獻維基百科好了，別花時間跟別人吵架好。

所以，來源請求.js到底是幹嘛的呢？這是一個可以安裝到 Wikipedia 帳號的 User Script，安裝之後，每次在文章裡面選一段文字，旁邊就會出現 [citation needed] 按鈕，按下去確認之後就會自動編輯文章，加上「[來源請求]」的標記。

安裝方法是，登入之後到 Special:MyPage/common.js 頁面，編輯插入下列程式碼：

importScriptURI(
    'https://raw.github.com/timdream/citationNeeded.js/master/citationNeeded.min.js?'
    + Math.floor((new Date()).getTime()/1000/60/60/24).toString(16)
);

安裝之後，下次在維基百科上看到有什麼需要引用來源的資料，只要選起來，按游標旁邊的按鈕，「來源請求」標記就會自動被加上去。

至於維基百科何時能夠解決這個問題呢？我想等到「抗日戰爭」這個條目的名稱被改掉那天之後才有可能吧。噗浪上大家的 comment 值得一讀。

(via xkcd)

還有，這個 script 只花我 1 小時查資料跟寫功能，但是又花 1 小時完善 UI，2 小時寫文件（含這篇）。是有沒有這麼閒 orz

今天是 World IPv6 Day，也就是各大網站正式將網址加上 IPv6 AAAA 紀錄解析的日子。最近弄的 COSCUP 2011 網站沒有上 quad-A 紀錄，而是用 script 對首頁加上了一點動態偵測的圖示。

• 如果用 IPv4 連 coscup.org 但其實電腦有 IPv6 連線的話，會出現徽章，提示說可以改用 IPv6（使用 ipv6-test.com 的 API測試）
• 如果用 IPv6 連 ipv6.coscup.org 會出現徽章與您正在使用 IPv6 連線的說明。

就這樣。不知道我在我們退休前有沒有「IPv4 shutdown day」…

整個對談非常精采，超過長度因此完整的要到網站上才看的到。Barton 和 Stewart 的討論環繞在原本他上節目的目的，釐清：美國是否是基於基督教信念創立的？如果是，為何憲法禁止國會樹立國教？

Barton 在對談中解釋，他個人研究的唯一目的是「藉由收集過去的歷史文獻，尋找美國早期被遺忘的歷史」，而「藉由文獻去樹立基督教在美國的地位」並不是他的初衷，也是不實的指控。他說，他編撰的教科書涵蓋了美國被忘記的許多不同面相的歷史：被遺忘的美國開國重要人物，女性、非洲裔。他對他基督教的研究被特別挑出來批評感到不平。

至於前面提到的，美國創立時，開國元勳在憲法上對政府與宗教關係的想像，他認為美國創立時的確是基於基督教的信念，開國 13 洲有許多州憲法敘明了基督教的地位。但是他們同時也相信容納不同信仰與宗教自由是更重要的，因此在憲法上禁止聯邦政府樹立國教。Barton 認為，因為憲法認為宗教是州政府的事物，故現代的解釋將此憲法條款擴及到任何人與所有層級的政府是不公正的：例如，認為政府不該贊助宗教性活動，或是禁止個人、官員在公眾場合禱告，或是以神之名發誓（「… so help me God.」）。

這個時候 Stewart 就問他了，既然憲法的限制僅適用於聯邦政府，那如果有一天有個州的人口組成主要是穆斯林，然後他們選出了州政府決定要實施伊斯蘭律法（Sharia Law），那怎麼辦？他說這樣沒有關係，反而是外面的人對他們說不能這樣做，才是問題。Stewart 就說，他認為這才是美國的本質：有外面的人在聯邦的層級說不能這樣做，因為這對社會和自由產生了內外隔閡。

政教分離在台灣

我一直認為政教分離在台灣，跟很多議題一樣，是個有趣但是沒人討論的事情。

某種程度台灣社會是同意政教分離的：宗教影響道德觀，群體道德觀影響選出來的民意代表和官員，但是民意代表和官員從不會拿特定宗教的論述當做反對或贊成某個議題的論點。除了某次有市議員和教會開記者會反對台北市政府給同志嘉年華的預算，但那樣的論點也不是反方的主要理由（比較像是立場剛好所以合作一下）。宗教屬性在美國對政治人物有時是加分（像 Huckabee 之於福音教派），但在台灣可能對來說是票房毒藥，例如謝長廷與宋七力案（宋七力案的詐欺和宗教自由定義間的轉折與界線也值得探討）。

不過，另一方面社會並沒有有意識的排除宗教在政府活動的影響力。政治上，早在百年以前，宗教團體明著暗著是重要的政治利益團體。日常生活中，證嚴上人的靜思語成為許多公立國小的品格教育教材，但是卻無人反對。更進一步說，許多國家資助的機構與文化觀點具有強烈的宗教成分，例如地方政府風景管理所維運的孔廟、每年由總統親自主持的祭孔大典、將中國文化基本教材作為品格教育的方向等等（雖然我國憲法增修條文早以明定「國家肯定多元文化」）。

從這些「事蹟」來看，要說我國的國教是「儒道教」也不是說不過去。不過反過來就會有人要吵到底「儒家（Confucianism）」是不是稱為「儒道教」的宗教了。

宗教衝突在台灣也不是沒有（還記得逼菲傭吃豬肉的新聞嗎？）。這些議題就和其他個人與社會的關係一樣，是值得討論和思考的。不知這是否屬於政治哲學的範疇？

自我澄清：我是不可知論者，不偏屬任何宗教。文中所指名之宗教與團體皆為舉例，沒有針對的意思。只是很好笑的，維基百科把「子不語怪力亂神」作為孔子是不可知論者的例子，但是孔子在儒道教卻是個神 …

這個真的要推薦一下，F.lux 螢幕調光程式。它的原理是根據日出日落時間，把螢幕的色溫調到符合室內光的溫度，以免晚上看著過亮的螢幕影響退黑激素分泌，打亂生理時鐘。

用了一個星期的效果是真的睡得比較好，而且不會因為晚上繼續用電腦變得越來越晚睡。對靠看電腦過生活的人來說很好用，不然這樣下去其實也是職業傷害。如果是白天的時候安裝，螢幕是不會變色的，會一直到太陽下山的時候才會注意到，而且用久之後會完全忘掉它，反而是把它關掉的時候會被螢幕刺到。

作為 Web Developer 的胡思亂想是，說不定可以把時間 vs 色溫這個概念放進 Responsive / Adaptive web design 的概念裡？這樣的話要讀一點色彩學的書了。

中文：HTML5 文字雲現在是開源專案，歡迎到 Github 索取程式碼。自從公開之後新增的功能有隨機旋轉文字、彩色文字、支援 IE9 與 iPhone/iPad（很慢，不建議使用）。

HTML5 Word Clouds is a HTML5 technical demo that generate a Java-based Wordle-like word cloud.

Under the hood, functions are devided into a library and two jQuery plug-ins:

• jQuery.getContent that fetch text remotely or locally using FileReader API
• WordFreq that run the text against Porter Stemming Algorithm (English) or N-gram analysis (Chinese) in Web Workers
• Finally, jQuery.wordCloud draws beautiful word cloud on <canvas>

For Mobile Safari and IE9 that doesn’t support Web Workers, I wrote Simulated Worker that put the worker script into an iframe scope (instead worker scope).

You are welcome to play around, grab the source code and run the testcases to see their capabilities.

Here is the solution I took, something might be useful to you: Simulated Web Workers – a library that creates a pseudo-web worker (that runs at fore-ground), while expose the same interfaces. Well, almost.

By almost, I mean the following:

• Instead of calling postMessage() to send the result, in IE you must call workerPostMessage() – because IE doesn’t allow me to overwrite the aforementioned function.
• Since anything runs at fore-ground right now, they are subjected to runaway Javascript timer imposed by browsers – the while(true) example given by Wikipedia won’t work. The setTimeout() trick however would make it work again (in a not-so-efficient way) – please check the library tests.

You could say Simulated Web Workers is like exCanvas for canvas, but of course the interfaces of web workers are not that many. Anyway, have fun with your next web workers project.

猜猜看這是哪個 blog 的最常出現的詞彙？

文字雲是最近在嘗試的 HTML5 瀏覽器 Demo，目標是使用前端技術來完成 Java 撰寫的 Wordle，順便可以拿來測試瀏覽器效能，以及分析一些文字來源。

目前程式可以接受硬碟裡的檔案或是 RSS Feed 的文字（從 Google Feed API 拉資料），經過詞頻分析，以出現的數量來決定文字大小，排進 HTML5 canvas，像這是這個 blog 的分析結果：

最前面貼的第一張圖則是來自地圖會說話，其他像是 New York Times 的文字雲可以看出最近的新聞 buzz word 是什麼。

文章詞頻分析

中文用的是很標準的 N-gram（我做到 N=6），把字組切出來算頻率。英文的話則引用了資料庫常用的 Porter Stemming Algorithm 來歸一化字的變形（複數型、正在進行式等等）。想起來中文的分析還真的是知難行易，完全不做任何過濾效果就會很好（後來有濾掉一些不是詞的字組就是），而且唯一的 stop word 只有「的」。

測試的時候懷疑瀏覽器執行這些文字操作的效能，所以就把這段程式碼放進 Web Workers。放完發現效能沒有提昇多少，真正卡住的東西是畫 canvas … 不過還是保持這樣，因為使用者有可能會放大量文字進來（但只差 Web Workers 就可以執行的 IE9 就抱歉了）

使用前端額外的好處是使用者可以載入自己的檔案來分析，而且檔案不需要傳到主機上。測試的時候曾經跟別人要了在學校寫的報告，圖像很好玩。大部分的部落格最大的詞都是「可以」，不知道是不是口語中文的現象。

文字雲圖像

圖則是仰賴 canvas 的填入文字（fillText）功能。有一個二維 Array 來儲存哪裡還有空間的資訊，每次填入文字之後再用 getPixelData 偵測文字筆劃的位置，更新 Array。在 Chrome 上面，文字大小會受設定裡面的最小字型大小的影響，所以最後會有很多不太小的小字。另外就是 Firefox 的 getPixelData 效能有問題，只有別人的 1/6 甚至更慢，為了避免瀏覽器卡死只好放了偵測所花時間，超過就跳出警告訊息的程式碼。Firefox 另外還有一個 canvas 有更新但是卻不顯示結果的 bug，不是很 reproducible 而且好像每台電腦行為都不一樣，只好先放著（canvas 的效能和問題都跟硬體加速有關）。

使用者介面

這東西為何會被我放在硬碟裡快一個月就是因為 UI 搞不定 orz … 做了兩個版本，每次 show 給別人看的時候都很容易操作錯誤；現在這個是 2.5 版，流程變成仰賴網址的 Hash 和 onhashchange 事件。對於寫出有用但是 UI 失敗的程式，我也感到很無奈 orz

接下來？

歡迎大家玩玩看。字頻分析和文字雲兩個功能都包成 library 了，拿去做其他應用應該很方便。不過我希望先保留程式碼兩個星期，之後再公開；目前網站上的是 minified script。

有空的話會想要支援更多自然語言（日文、韓文等），還有拿字頻做其他 visual（或是 audio？Bob 給了一個的點子，我才注意到其實字頻分布跟 FFT 轉換後的聲音頻譜還滿像的？）

最後，喜歡的話賞我一個讚吧 XD 寫不少東西但是不太知道反應，也不知道要去哪裡推。

Skip to IE9toss demo, source code and explanation.

星期六去了 IE9 黑客松，算是一場輕鬆的寫程式、認識其他 Web Developer 的比賽。滿錯愕的，因為以為是個 50/60 人以上，類似 Yahoo! Open Hack Day 一樣的大型活動，結果簽到簿只有少少 20 人，超緊張的，本來想說如果人多，做不出來可以打混… XD。到的時候有點晚，感謝 josephj 收留讓他坐他旁邊的位子。食物果然如活動介紹上面寫的一樣相當誇張，早上麥當勞，中午吃了海壽司，下午有星巴克，最後外面的零食跟雞排就 pass 了。

回到活動本身。上官大大出的比賽題目是寫出 2D 迷宮遊戲，或是 Paper Toss 遊戲。我選了 Paper Toss，因為感覺動態遊戲效果比較好，而且迷宮遊戲要求的滑鼠、鍵盤控制我比較不會。後來把握時間把 spec (XD)要求的功能都寫進去了，也盡量用了想到用的到的 IE9 新的 HTML5 技術。也因為不會做 Art，剛好為了搞笑，所以我就做了個把 IE9 Logo 丟進 HTML5 標誌的遊戲：

Demo、Source

用到的技術可以在 Github 上面的 README 看到。寫一些感想：

• 大部分的同好都是選迷宮，原因是因為不知怎麼處理丟東西的物理。其實 free fall 不需要真的解方程式來套或是像強者如 whsienc 把 box2D 拿來用，只要跑 loop，假設 loop 每次執行的時間為單位時間（要不用這個假設，實際量瀏覽器跑 setInterval/setTimeout的時間也可以，jQuery animation 就是這樣），每次執行位移的變化量就是速度乘單位時間、速度的變化量就是加速度（重力）乘單位時間。而且自由落體是各方向獨立的，X/Y 可以分開計算。
• 風阻力用高中物理的近似，造成的加速度和速度成正比，所以每個 loop 再把加速度減掉設定的係數乘上目前的速度。不過這就沒有各方向獨立了，但我在程式還是把他當成方向獨立，因為這是黑客送不是物理模擬 XD。寫這些計算程式大概花了 1/3 的時間。
• 知道可以這樣寫是因為大一物理系計概 … 這個運動不難，解出來其實是二元偏微分方程組，把方程式丟進程式也可以把動畫套出來（以我現在的工數能力可能解不出來就是orz）。但也是因為計概才會知道運動模擬應該要這樣寫，因為真實世界有方程式解的運動相當有限。說來也滿好笑的，雖然很喜歡寫程式，但當時其實很討厭那門課。
• 在跑的動的情況下，東西上 canvas 滿方便的。而且預設的底是透明的，所以可以浮在任何背景的前面，裡面的東西只要 clearRect 就可以清掉。
• Webkit 的 drawImage 對 SVG 的原生大小判斷是有錯誤的（所以上面的 screenshot 裡 HTML5 logo 才會比例錯誤），同樣的程式碼在 IE9 是對的，所以就保持那樣
• Firefox 因為不明原因會 JavaScript Error，無法執行遊戲，我還沒 trace （大概也不會管了。Pull Request anyone？）
• 撞到了 jQuery 這個 Issue：jQuery.camelCase() & jQuery.css() incompatible with IE prefixed properties。後來寫的 Wordaround 是 josephj 教我的。
• 寫完 -ms-text-shadow: 發現沒效之後問了 ericsk 才發現 IE9 沒有XD text-shadow 本來就沒有 vender prefix，IE 也沒有支援就是。

再來，講一下主角，IE9，其實活動前後我的看法沒有什麼變化：

• IE9 還是可以套進原本的開發流程：用 Webkit Nightly + 文字編輯器，全部寫好上 feature detection 之後再到其他瀏覽器調 style 和小的 JS 錯誤。但好處是相較於其他 IE，因為它更接近標準而且終於有堪用的開發者工具，所以調起來又更輕鬆了一點，終於不是為了支援 IE 程式碼要增加 50% 這樣。我猜是參考了很多 Webkit 的行為。
• 但是呢，HTML5 DocType 沒有正確的在 ddsakura 的電腦上觸發 IE9 模式，於是就壞掉了。不知道是之前有設定 overwrite 掉還是真的有問題。
• 另外，雖然效能終於趕上了其他瀏覽器（明天正式推出，正式版一字排開 Fx 就要被比下去了），但是還是少了一些功能，所以功能偵測和 fallback 還是不能少（至少我上兩個星期寫的兩個程式都不能用，我想要 Web Workers 和 FormData Interface 啊啊啊）
• 還有一個不幸的事實是，因為 WinXP 不能裝 IE9，故 IE6 很有可能再活個一兩年…

我一直都認為一群人組成的團體是沒有靈魂的；一家公司為股東追求利益天經地義，所做決定無關善惡道德。某家公司做了和我們相信的理念相同或是相反的事情，都只是剛好而已。如果 MS 往符合理念的方向移動，該給的肯定還是要給啦。上官大大主辦的開發者的活動真的不錯，大家有空真的可以把握機會投投看。我也是在那天才真的認識了 josephj，經由他和 hlb 聊天開釋才真的搞懂最近那些 JS Loader 和 AMD Spec 在幹嘛。啊，還有在同一間學校 ID 看很久但是都不認識的 grassboy。

嗯，以上絕對不是因為拿了 peer vote 第三名抱了 XBox 360 + Kinect 回家才這樣說的 XD 你看我沒有都講好話嘛。