內文主要是在闡述一個重要的 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 的立場)。

Yes, you must have heard the phrase “iPhone is the new IE6″; back then I think Apple was doing a great job bringing the web as-we-know-it (kind of) to the mobile, and the cost to develop a separate iPhone website is justify because it’s mobile – a distinct device. Yet, for iPad it’s a completely different story:

• No matter how Apple marketed it, the device is an 1024×768 tablet, with enough screen size to fit regular web.
• Even if I want to build a specific website for iPhone/iPad, their devices doesn’t use open standard like CSS @media-query to identify themselves their device does do that, but not yet adopt by most developers. In fact, the way noteworthy companies doing the identification (e.g. Google’s GMail) is by detecting UA string. I couldn’t stop imaging the string iPhone or iPad would one day present in every mobile browser, just like the string Mozilla did. The <meta viewpoint> spec was also poorly designed – Apple should be more careful if they intend to establish a new de-facto standard.
• For all the things above, I could just make excuses for them, like I did with iPhone Safari: it’s one of it’s kind, and Apple is focusing on delivering the best user experience they could give (like we all do) – but not for this: the flashy shrine of iPad-ready websites. Apple is purposely asking web content providers to build websites for it’s garden – and guess what, the garden is walled due to constraint above.

Web is the first platform without a vendor. Nobody want to market a term they cannot trademark; every vendor of the market-leading browsers – from NCSA Mosaic, Microsoft Internet Explorer, to Apple iPad/iPhone Safari now, want to make World Wide Web their own from simply replace the terminology*, break the content standard, to moving open content to their closed garden.

Let’s defend that, first by giving your iPhone/iPad ready website an independent universal-accessible address, then demand browser vendors provide feasible standard to address their device capacities. No more UA string hacking please.

* Little-known early history of WWW; Back then, NCSA promotes their Mosaic browser without even mentioning the term “WWW”. This gesture prompted Sir Tim Berners-Lee to fund W3C to ensure the openness of the Web. More stories can be found on his book “Weaving the Web.”

Disclaimer: I am a Mozilla Taiwan Community contributor, however the followings are my own point of view; not the view of entire community.

中文版貼在 Mozilla Links。

So, now we got bug 476766 calling Mozilla to remove CNNIC CA certs from it’s codebase, and people posted over on how to remove it manually. Personally I agreed with the objective argument in the bug, that officially CNNIC is considered innocent until proven guilty. To make my point, here is a PhotoShop MS Paint mock up for you. Please stop the nonsense in bug 476766 unless you see this:

But if you do, please immediately click [Detail...] and export the fake SSL cert. Every responsible browser vendor, include Mozilla, will remove the CNNIC Root upon this goes public, and the fake certificate would be the biggest scandal of the year to China, on the Internet.

What you should do before that

If you feel unsafe on the standard practice of browser vendors, you could disable the CA certs in your computer. Mozilla is correct on not-removing the CA certs, but for user who want to remove them themselves, I don’t think Mozilla has provided an easy tool for that. Clicking Tools – Options – Advanced – Security – Certificate Manager is just too painful. So here is an add-on I wrote which does that for you: CA Untrustworthy. Do remember that removing CNNIC CA certs will break legit CNNIC-signed websites.

For the less paranoid, Rex provided us an add-on “Cert Alert” that alerts user whenever they encountered an CNNIC-signed website. Install it, after that, when you see the alert, you could use your judgment to consider the trustworthiness of the website – you might actually find the fake SSL cert that way.

中文： 寫了一個測試動畫順暢度的網頁，用了三種不同的處理方法：一種讓 JavaScript 去改 CSS 的 top 和 left、另一種是改 background-position、最後就是用 HTML 5 的 <canvas> 來繪圖。結論是 background-position 最順，另外 Webkit 感覺比 Gecko 厲害一點。

I wrote a little test to find out which way of doing animation is the most smooth one. The three animation being tested are:

1. Changing CSS top and left property.
2. Chainging CSS background-position property.
3. Copy the image into a <canvas>

background-position seems to be wining on both Webkit and Gecko; Gecko preformed poorly on top/left property changing when full page zoom is in effect. Also Webkit preforms better than Gecko in all three animations.

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, '_');.