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.

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.

去年 12 月去了 San Francisco，順道去參觀了 Mountain View 的 Mozilla 總部（感謝 Marketing 的 Mary Colvig 的招待！）。我自己在當天例會給了 5 min 的小 talk 介紹了 MozTW，反過來則邀請了四位 Mozilla 的員工讓我訪問，影片在 YouTube 上。

如果有時間的話，請到 Universal Subtitles 幫忙上字幕！感謝！

週末應 Mozilla Japan 之邀，飛去東京參加 Firefox Developers Conference 2010，以下摘要聽到新知和感想。

Browsing Without Borders – Jay Sullivan

Mozilla 作為一個非營利組織，其核心目標為：維護網路的自由、開放、與創新。藉由 Firefox，Mozilla 成功達成了階段性的目標。接下來呢？

Sullivan 介紹了目前 Internet 的發展的四個面向：Mobile、Cloud、Apps、Social。這四個面向均有其創新，但也有許多現有的商業模式會影響網路的自由、開放、與創新。

• 在行動網路上，Mozilla 會開發手機版本的 Firefox，確保單一廠商不會像 2001 年那樣壟斷網路。Mozilla 會堅持網路中立性、尤其是反對現在在行動網路電信商已經實施的不中立資費方式
• 在雲端應用上，Mozilla 會持續投資原來稱為 Weave 的瀏覽器同步技術，讓瀏覽器能輕易的在任何地方帶來個人化體驗；也利用 Weave 處理個人資料的模式來實做真正能保障個人隱私的雲端技術。
• 在網路應用程式的層面，Mozilla 已經發表了 Open Web App 提議，用去中心式的架構散佈軟體，以及確保創新。
• 在社群網絡的部份，Mozilla 會繼續開發讓使用者能夠方便分享資訊的產品，同時要強調使用者能夠保有對資料的最終控制權。

有句很重要的話就是，「Without product, we are just talking」。Mozilla 會繼續發展產品與技術（例如，讓 Firefox 的執行速度追上其他瀏覽器），用產品來彰顯其核心價值。

最後的 QA，有人問了 Firefox 為何沒有 iPhone 版的老問題。我問了 Mozilla 有沒有 Firefox OS 的構想。Sullivan 說內部有討論過，但是有些細節的問題：例如市場目前還是對 Andorid 比對 Chrome OS 有興趣、這麼大的計畫在 Mozilla 的資源分配、還有使用者的觀點等等。我想這未來應該有機會 follow up。

John Resig feat. Shibuya.js

John Resig 受 Javascript 開發同好組織 Shibuya.js 之邀再度訪問日本。這個 session 以 lightening talk 的方式進行，John 佔三個，其他時間由 Shibuya.js 發表，由 Resig 給 comment。

列出幾個我記得的：

• John Resig 的三個 talk 分別是介紹 ECMAScript 5、Processing.js 1.0、和 jQuery Mobile。
• @gyuque 用 AudioDataAPI 在 JavaScript 上實做了調變器（JS Modulator；調變就是數據機 MODEM 這個字的前兩個字母的縮寫），把數據資料轉換成聲音。在會場上播那個聲音（跟以前撥接的聲音一樣）的時候大家都笑了；最後他把聲音信號接進小時候玩的用錄音帶紀錄資訊的電腦，然後就把資料傳進去了！在投影片上看起來是 BASIC 的程式。不過現在還沒有 Device API 因此無法達成雙向通訊，所以這部份就待續。
• @ku 寫了一個 iPhone 程式，把 WebView 接上了自己刻的 HTTP Server；該 Server 即為 Mobile Safari 的 JS Console（不過還不能抓到 Exception）。
• 8-p.info 的 Kato-san，幫 Chrome 寫了 MozRepl，稱為 ChromeRepl。
• @yksk 解釋他在 pixiv 的工作，用 LABjs 增加 Javascript 在網站上的載入效率；Pixiv 因為歷史共頁同時用了很多 lib，還需要下載很多 JSON。
• @t_wada 介紹了一些 coding 的 best practice，尤其是 testing 上的。
• @mesc 講了一些人們對 Node.js 的誤解
• @_fp 是 NetFront 的工程人員，他介紹了 NetFront 的 Javascript 引擎。用 C 開發，目前在 x86 上的效率可以趕上 Firefox 2 （OS: 這樣就比 IE6 還快了…）
• Yukoba 介紹了他的作品Orto-App －－ 自己寫 Complier 處理 Java MIDP 程式，轉成用 JavaScript/canvas 或 ActionScript/Flash 執行。

感覺這些東西都好厲害呀… 都要有除了「寫 JavaScript」以外的知識才做的出來。要再努力一點才行。

其他議程

下午的沒有很認真聽跟做筆記 。有一些介紹性的演講，講 JetPack SDK 的寫作，展示一些 API （可以換 personas 的圖片、在 Paranoma 上顯示數字等等）。最後 Lightening Talk 之前有個論壇型式的議程，討論 HTML5 的影響。

Lightening Talk 我上去介紹了 Mozilla Taiwan。

懇親會

其實就是 Party 啦！有酒、Buffet 啥的。同時舉辦 Lightening Talk （Part II）和抽獎。Lightening Talk 時有一位熱血 developer 展示了把 accerometer API 接上了 AudioDataAPI，結果電腦就變成拿起來搖音波就會改變的東西

在 Mozilla 總部負責 Release Engineering 的 John O’Duinn 和 Mitcho 表演了同步口譯 Lightening Talk！講題是 RE 蓋了多大的機房（Mac Mini 機房，因為 Mac Mini 是唯一能在同一種硬體上執行所有支援的 OS 的機器）只是為了要加快每個 commit 被完整跑完測試的時間（測試越快就越能繼續 commit 下個修改，開發速度就越快）。其中手機機房更是驚人 －－ 基本上是個四面都是金屬，屏蔽外界訊號的房間，裡面用木架布鞋櫃放一台一台的手機（要屏蔽的原因是因為訊號的變化會導致手機把運算轉向到其他服務，讓軟體效能測試無法正確進行）。

抽獎的時候送了一些 T-shirt、外套、大獎是小隻 FoxKeh。更後面的獎是三個 Firefox 滑鼠墊，瀧田（代表理事，Mozilla Japan 的頭）說要請 John Resig 簽名的時候大家都 high 起來了。最後抽獎方式是和 Resig 剪刀石頭布XD

活動的其他

回來 Bob 才說，他們辦活動都會準備同步口譯，日翻英、英翻日。像我在台上的時候下面大部分的人就都戴耳機這樣。另外，參加人數大約近 300 人，年紀最小的也有對技術有興趣的中學生。感覺東京的 Web Developer 很多呀 …… 不過他們有點太害羞了，在懇親會的時候有段時間竟然是我和 John Resig 和兩個口譯在聊天，哈哈。John Resig 滿有趣的，最後在休息室準備離開之前，還戴了 Foxmosa 耳朵抱著 Foxkeh 拍了這張很萌(?)的照片：

當面也討論了有沒有機會請他來台灣的事宜。他希望亞洲這邊能喬好，讓他能夠飛一趟就能巡迴演講到所有地方。這就要各地 Mozilla 社群、或是 jQuery 社群的幫忙了（台灣有人願意喊聲接辦活動嗎？）

東京其他

除了活動，我還去了新宿、歌舞伎町、明治神宮和台場的未來科學博物館。星期五的新宿都是一群一群找居酒屋、剛下班的上班族。明治神宮星期天有很多帶小朋友去過七五三節的家長，小朋友都穿的很正式的樣子。台場的未來科學博物館有一些特別的東西，其中一個是用黑白彈珠演示網路的封包傳遞。不過我時間沒量好，在台場超匆忙的，只逛了博物館就離開了。

東京是個只要知道地鐵跟 JR 怎麼坐就可以到處去的地方，但是有一次遇到被售票機吃錢，不說英文的站務員就不幫我忙了（後來不知為何錢又回來了倒是）。松山到羽田真的很方便，來回都可以坐捷運／電車到機場。不過羽田機場因為國際航廈新開幕，很多本地人去逛街，回台北的晚上整個就是滿的，我 check-in 之後趕緊逃到關外去。

1. 讀檔案
2. 組合 multipart/form-data
3. 上傳檔案

而要實做縮圖則是加上了步驟 1.5：

1. 把檔案轉換成 data: URL
2. 用 <img> 載入
3. 把圖貼進 <canvas>
4. 把 <canvas> 的資料讀出來

然後就可以送到步驟 2 了。但是我試了半天，發現還是只能讓 Firefox 用；因為 Firefox 3 以上可以接受且上傳 binary string 組出來的 multipart/form-data；如果是 Firefox 4 (> 20100917; beta7pre) 的話，還可以用 canvas.mozGetAsFile 直接產生在硬碟裡不存在的 File 物件，送進 FormData。

Webkit 因為上述兩種做法都不存在所以行不通。直接把 binary string 送去 xhr.send() 在 Chrome 6 會錯誤，在 Chrome 7 會把字串當成 UTF-8 轉碼再傳，整個破壞掉。Google 之後發現了 BlobBuilder 和 xhr.send(blob) 這些標準 binary data 處理方式，但是試了之後還是沒有把 binary string 正確轉換成 Blob 的方法；字串一樣會被當成 UTF-8；指定 byte code 轉換成 blob 所需的 ArrayBuffer 物件瀏覽器還沒實做。

最後自暴自棄了試了一些 hack 的方法：因為 Blob 可以切割，故只要想辦法把某個長度為 255 bytes 的 ascii.bin 轉成 Blob，就可以拿來拼湊任何資料。XMLHttpRequest level 2 有定義 responseBlob，不過試了才發現瀏覽器沒實做。FileReader 和 File 物件的 hack 變成要要求使用者下載某個檔案再選。UTF-8 無法用到所有的 byte 位置，所以不能拿來湊有所有 byte 碼位的 blob。

所以啦，感想就是如果瀏覽器要實做 HTML5 要把所有功能都實做完呀，不然要做的事情拼不出來。

關於 Blob 無法表現任意資料的問題，這邊有一篇抱怨。

Update: 後來發現 ArrayBuffer 在 Chrome 9 (dev) 和 Firefox 有實做，所以還是把功能加上去了。就看 Chrome 9 什麼時候變正式版？

Scroll down for English.

這是我今天在高雄 MozTW 連續聚的講題：Google Apps 帳號 OpenID 化，或是說，用 Google Apps 把網域升級成 OpenID 帳號提供者。

同時提供英文版投影片。

This is my talk in MozTW gathering at Kaohsiung today: Google Apps Account as OpenID, or, OpenID-ize your domain with Google Apps.

Slides are also available in zh-TW.

1. To enrich the add-on ecosystem

Before Apple’s iTunes Apps Store for iPhone, and iPod or iPad later, Mozilla Add-ons was one of the largest collections of web software. The add-ons does from simply help people to access content to development tools. However, after 5 years of introduction of Firefox and it’s extension framework, people find it hard to formulate a business model with it – Mozilla try to cope the problem with donation system incorporated within the add-on site, however, with the proven model from the competitors, developers had shift their focus to these new platforms. Echofon, once called TwitterFox, would not be able to deliver a paid “pro” version successfully if it had not reach other platforms.

By developing an Firefox OS, Mozilla could make proof to developers in the ecosystem that Firefox is more than a browser, and their hard work is more than browser add-ons. I am not saying turning Firefox into an OS would immediately make add-ons development profitable – however, it might not never be if there is no OS.

2. To provide an alternative browser OS

When I talked about Firefox OS, people often compare my imaginary OS with Chrome OS. It’s comparable, yet, the Google’s approach might not be the best way. For instance, Google intend to copy Apple’s business model, creating an centralized Chrome Web Store, defeat the purpose that web should be a platform without a controlling vendor.

Should Mozilla had working on a Firefox OS, it not only provide an alternative to Chrome OS, but it also give users valuable choices on browser OS front. Alternative is not about playing the RMS card – that every software should have a libre alternative – instead, the existence of the strong enough alternative is the key to drive innovation.

(Don’t believe me? Think about IE6.)

3. To deliver better user experience in Firefox

The recent development of Firefox 4 bring exciting UI changes that align with many modern browsers, like Application Tabs or TabCandy, later known as Panorama, which enables user new innovate ways to organize information and works.

These powerful features, nevertheless, doesn’t work within an application as tiny as a browser sometimes. Before Panorama, I usually group my works in different browser windows, so I could switch between them on Windows taskbar. After trying Panorama, along with Application Tab, I don’t think it works as well as Exposé in Mac OS X, or even what I did. For example, app tabs are always visible no matter what Panorama work space you selected, yet in Panorama view app tabs actually belongs to a group – this results confusion. What’s worse, click in any app tab in another work group immediately brings you to that group, with no fast way to switching back.

Another example would be the UI change decision about bringing tabs on top of the toolbar. I agreed with the decision to bring tabs to top; but when I pressed F11 to make my Firefox window go full screen, I found the close window button (the X) was not on the top-right corner of the screen (which, according to Fitt’s law, is a hot spot for cursor aiming, and, according to the logic of Windows OS, should be always the place to close a maximized window).

These examples might be just tiny issues that come with a beta version of Firefox; I believe most of them will be fixed by talent people at Mozilla before the final version releases. Nonetheless, these are the evidence that how messy it would be to ask an browser within an operating system to manage it’s own tasks – We should definitely work on these user experience innovation, however a Firefox browser will always be a constraint for these interaction innovations – A Firefox OS will not. By developing a Firefox OS with these innovations, Mozilla will certainly have a better chance to polish them before they were brought to the browser.

Ever since Windows 95, binding between tasks in browser window and tasks in client applications has always been a key issue. Windows 7 introduced jump list; IE9 users will be able to pin websites on their Windows task bar. A Firefox OS will help Mozilla developers come up with even better interaction, instead of endlessly implement what Windows, or other OS APIs enables applications (browsers) to do.

4. To defend the Open Web

Mozilla is a foundation with limited resource. Everything it does has to be somehow connect to its mission. A Firefox OS project will undeniably connect to the cause. Here is one of the reasons why: Today, users prefer mobile apps than [mobile] web.

I twitted the link sometimes ago. The sad inconvenient truth is, if people access information mainly from apps but not the through the browser, the browser itself will be irrelevant. Eventually, the web itself will be irrelevant, along with the promises of the Open Web that Mozilla holds true. Yet, this is exactly what is happening right now on the mobile front.

(Stilling thinking about bring a full Firefox to iOS is important? IMO it brings more buzz than piratical use.)

Firefox OS has the potential to become not just browser OS for web platform but also a truly open platform. Think about a slightly exaggerated future, where desktops, OSes, and applications on it seize to exist. People would access information on the Internet without going through the Web (and HTTP) but using devices and site-specific applications using socket connections. In that future, there are better be a vendor that continue express interests of openness through technologies and end-user products, and let that vendor be Mozilla, even though the Web as we know it seize to exist. Firefox OS could be that end-user product, just like Firefox 1.0 did to the web almost 6 years ago. Firefox OS could ultimately transform itself beyond browser, or browser OS, but first Mozilla need to make a browser OS.

Thus, to Mozilla HQ: It’s about time to launch a Firefox OS Project.

內文主要是在闡述一個重要的 Idea：「Responsive Web Design」。隨著 Web 從 PC 螢幕移動到各式各樣的裝置，為每個裝置設計不同的網站版本（iPad 版、iPhone 版、手機版）是個 viable 但是不 scalable 的解決方法。作者認為，網站開發時如同「Responsive Architecture」的概念一樣，讓環境去適應使用者的存在 －－ 像是自動調節室內溫度、將窗戶霧化以保護隱私等。網站設計不應該是平面出版的電子化，存在於固定的版面、文字大小、圖文配置；設計應該要自然的適應不同的裝置，自動調整版面的 flow，甚至是互動 UI 的大小等等。

實作的細節，作者花了後半的篇幅在介紹 CSS media query。Media Query 是以前 CSS 2 的 media type 延伸，不同的是它不只是一組預先設定好的媒體（螢幕、紙本、點字、語音…），它可以讓開發者自行設定 CSS 規則適用的裝置類型、寬度等等。文章內提供了具體的範例，展示了使用 Media Query，作者可以指定當裝置的螢幕寬度小於多少、或是介於多少時，網頁可以隨之切換欄數、圖片寬度、圖文配置等等。

我自己把文章印了出來（地球對不起 > <），認真讀了一遍，滿有收穫的。雖然 CSS media query 是早就知道的東西，但是不了解前面的設計哲學與意義就不會有動機去玩它（現在就超有動機的哈）。作者的文筆讓人耳目一新，闡述概念的方式相當的生動，可以拿來練英文（真的）。

有個研伸的問題，作者也有簡略提到。CSS media query 解決了排版適應裝置畫面的問題，但如果開發者希望在不同裝置呈現不同的內容，甚至不同的互動時，多版本網站還是解法。如果只是幾行字，或許可以用 display 屬性開關切換掉，但總不會 Facebook 套了另一份 CSS 就變成 Facebook for touch devices 吧 。

Blizzard 主要的論點是 Apple 竟然大聲說他們喜歡創新的網路，那出來的產品跟作法就要言行一致 －－ 尤其是 HTML5 這一系列的創新本身的目標之一就是互通性 －－ 不能到處廣告說 Safari 支援 HTML5 然後故意把其他也支援的瀏覽器從示範網頁排除掉；這種顯然是沒有信用、不誠懇的傳遞知識的做為。

Mozilla 的 Sayre 做了一個很酸的 HTML5 demo，哈哈哈 (當然不代表 Mozilla 的立場)。

1. To create a SWFUpload-like button that opens file selection dialog instead of HTML form file input.
2. To send the file as a ordinary file upload form – no need to change php backend to handle raw post
3. Send the file by jQuery.ajax, firing global callbacks

I came up with these methods to solve them:

SWFUpload-like button

From the JavaScript almighty ppk we know that file input from control is almost impossible to style. The solution outlined on that page only tell us how to replace the control with images using opacity: 0 trick. In order to fit the clickable area into my 65×65-px button, I have to enlarge the control and confine it into a <div> with overflow: hidden.

The actual hard part is how to enlarge the control. It turns out in Firefox it ignores CSS specified height and width; the only thing left for you to set is font-size propriety.

Another CSS properity it ignores is the cursor. Firefox puts the “browse” button at the very right, so you might what to make sure the arrow cursor, instead of text-input cursor, shows.

Simulate form upload

On Mozilla Hacks demo, the file is sent as raw HTTP POST/PUT data. To process such input, one must craft the server-side script all over, without any upload-handling library that I’ve known of. So we go back to client-side solution: the question now effectively becomes how to implement RFC 1867 format to your (raw) post data. I’ll simply post my code snippet below – turn out to be quite self-explanatory. ^*

var bd = 'gfx-xhrupload-'
	+ parseInt(Math.random()*(2 << 16));
var data = '--' + bd + '\n'
	+ 'content-disposition: form-data; name="Filedata";'
	+ ' filename="' + files[0].name + '"\n'
	+ 'Content-Type: ' + files[0].type + '\n\n'
	+ ev.target.result + '\n\n'
	+ '--' + bd + '--';

Where ev.target.result is the binary string represent the file, access using FileReader object, and files is the FileList object.

Send the file via jQuery.ajax

Update: Just found an easy way to do this right instead below: overwrite xhr.send with xhr.sendAsBinary since it’s seems all right to send text data in binary mode.^*

if (window.XMLHttpRequest && XMLHttpRequest.prototype.sendAsBinary) {
	XMLHttpRequest.prototype.send = function (data) {
		return this.sendAsBinary(data);
	};
}

You might think this is the easiest part, but in reality the normal $.ajax won’t work even if you set the correct Content-Type, which, according to RFC 1867, is 'multipart/form-data, boundary=' + bd.

What went wrong? The problem is jQuery hard-coded xhr.send(data) in it’s function, and it does not send binary data. I resolved the problem by actually copying jQuery code, “patch” it, and overwrite the original $.ajax function. I added a “binary” option for the purpose; the function would switch to xhr.sendAsBinary(data) if the option is set to true.

Bonus: File drag and drop

What SWFUpload doesn’t do is to make the control accepts files by droping them on it. With Firefox 3.6 you could to that, but you cannot hook the drop event on the <input> itself. Frankly speaking, the button would be to small to aim, so for the sake of better UX, a larger overlay, like the one in Mozilla Hacks demo, should be made. Do remember that hiding the overlay as soon as dragleave fires will stop drop event from firing though – took me a day to figure that out.

Also, keep in mind your transparent button will accept file dropping if the user had installed dragdropupload add-on.

Conclusion

With all these research, looks like it’s actually possible to write a SWFUpload.js without Flash. The library would support anything SWFUpload does, except cursor choices on the button. For my project, I didn’t craft a new XHRUpload() object to replace SWFUpload() because I don’t need that much of functionality, yet it’s something can be done.

It struck me that HTML 5 is practically involves around what Google want to do things w/o Flash. StreetView? We got WebGL. GMail attach. upload? Got File API.

HTML 5. Exciting new world.

For complete code on the implementation, stay tuned and check code here once it went live. For the site, we have not deliver English version yet, but feel free to play around with buttons and symbols – you should be able to understand it without reading any Chinese.

Note: According to the MIME spec, the filename should be encoded according to RFC 1522 (“quoted-printable”) if it contains characters other than US-ASCII. Personally I replace these characters with underlines instead – name = name.replace(/[^\x20-\x7E]/g, '_');.