(click on the image to see demo video, source won’t be available for that it’s a client project, IP reserved)
As most of you know, undo/redo had long been part of the basic user experience all users would expect for pretty much every apps out there, let alone in a full-fledged RIA these days (hey “rich” ain’t there in RIA for nothing !), but this is not the case for flex/flash apps,
I’ve been wanting this for quite sometime now, to be precise, ever since flex first come out a couple of years ago I’ve been thinking why there’s no undo/redo capability for all the textfield-based component (TextInput, TextArea and RichTextEditor, that is).
and fortunately enough recently a client asked for this feature added to the app I’m working on, so I got a chance to finally have it implemented.
*Basic features include
-built against flash.text.TextField, so all text components in flex framework supported.
-has built-in UndoManager but user could supply custom UndoManager too, as long as it implements IUndoManager. (who doesn’t ?)
-unlimited level of undo and redo
-undo by single character (TextMate any one ? 
or a stream of words (a.k.a normal mode)
-correctly handle delete and backspace keys for mac
-support built-in RichTextEditor, hence all text format modifications could be handled too
-handles right-click context menu (”Cut” and “Paste”) in AIR.
-easy to use, var tm:TextManager = new TextManager( tf ); one line of code and it could undo/redo everything.
-support double-byte languages like Chinese, Korean and Japanese (this is not really a feature for that flash player support unicode natively
*Some of the problems I ran into include
1. there’s no easy way to handle cut and paste short cut keys within browser, cmd-X and cmd-V will be “eaten” by containing browser, under Stand Alone player case, the player shell will eat the event, I know this could be dealt with old-school javascript tricks but I would rather refrain from going that direction because then developers will have to remember adding that piece of junk js to the browser and handle ExternalInterface.
After playing with various keyboard events finally I find a way to handle cut and paste with a combination of key events, all native flash player event hence no js, no interface, no nothing, just drop the swf in there and magic happens.
2. right-click menu
Seems to me there’s NO WAY to handle “Cut” and “Paste” menu command in browser version, and worst yet, there’s no way to disable the menu (in flash player 10 there’s ContextMenu.clipboardMenu = false, but, it’s not applicable to textField, ouch !). I could just have my finger crossed and hope user won’t be using that right click menu.
Good news is it could be handled correctly in AIR, and better yet, the project I’m working on, is an AIR app 
3. I tried to have it implemented in a strict MVC way, but the traditional textfield in flash player 9 didn’t provide some of the low-level functionalities I need, so a bunch of quick hacks were threw in, but good thing is the new text engine in flash player 10 looks real promising, let alone the Text Layout Framework(TLF), I’m looking forward to work on that sooner than later.
*What’s next ?
Some people asked is it possible to turn this into a full-blown text editor, sure you can, but there’s already Buzzword and Google Docs providing such services, and like a 1000+ editors on the desktop ( TextMate, TextWrangler, Smultron, EmEditor, NotePad++, to name a few), so I don’t really see the value in creating such thing, but I could be wrong, if so, please kindly let me know !
| by admin
＊緣起
最近因為工作需要，又再度開始接觸 Amazon EC2/S3(早在2006初這個服務剛推出不久時曾用過一次，那時是 RoR 加一堆 merb，不過後來隨著專案結束也就漸漸忘了這玩意)，結果這次隨便查了些資料卻發現 cloud 這個字似乎已無所不在泛濫成災，也讓我一時興起想瞭解一下到底現在大家口中所謂的 cloud 是在指什麼。
會這樣好奇主要的原因是在許多地方都看到有人自稱在提供 cloud service, 但這些服務間彼此的性質、形態與做法差異性卻很大，例如 ec2 與 gae 兩者就不太一樣，gae 與 salesforce 又很不同，搞到最後，似乎處處是雲端，人人在漫步…
根據 wikipedia 的定義，cloud 最寬鬆的定義是這樣的(擷錄):
It is a style of computing in which resources are provided “as a service” over the Internet to users who need not have knowledge of, expertise in, or control over the technology infrastructure (”in the cloud”) that supports them
如果你對這樣的定義沒問題，那非常好，不用再浪費時間看下去，去喝杯咖啡吧。
(紐約25街上最棒的咖啡館，三明治也值得一試)
很可惜這樣的定義在我聽來似乎寬鬆的有點誇張了，因為這樣說來，我在家裏擺幾支 iphone 跑些服務並開放 api 給人用，其實也算是 cloud 囉(還是高雅的 apple cloud哩)？XD
就因為這該死的好奇心，我花了幾天時間調查並整理了些相關資料，現在總算比較有個頭緒了。
請注意這只是我個人的心得整理，文中對於名詞的定義與詮釋，尤其是 cloud，只是我個人的想法，如果有錯歡迎各方大德賜教。
＊from hosting to VPS, is it really cloud ?
基本上如果要細究到底 cloud 是什麼，可能可以先吵上個三天三夜還沒定論，因為根據眾多前輩的說法，cloud 這個字本來就是個 buzz word, 想用的人就隨喜取用了，其實根本沒啥定義好談的啊~
因此，我打算先跳過試圖去定義這個字的破題法，從實際的 deployment 方式來看這件事。
以往一般人要 hosting，大多是去租虛擬主機，有錢一點就丟機器到機房去(co-location)，這是最常見也最傳統的手法，這個手法最大的缺點在於 - 如果臨時有大流量需求，例如辦個 campaign，很難迅速的擴充服務能量，不論是要搞到大量的機器，或無窮盡的頻寬，都是個問題。
因此，這幾年來比較流行的玩法是所謂的 VPS/VDS (Virtual Private Server)，透過類似 XEN 這樣的軟體，將一台實體 server 虛擬化(virtualization) 成多台虛擬機器然後出租，這樣一來當臨時有大流量需求時，可以很容易的加買幾台虛擬機器就撐過去了。
前面開頭談到的 EC2 就是這樣一個服務，另外這一兩年頗受好評的 Slicehost也是，在 EC2 的例子裏，每一個虛擬出來的機器叫做一個 instance，因此要應付大流量 campaign 時，可以狂開 instances 撐過去，這比狂買實體機器便宜多了。
由於 VPS 真的超方便而且很好用，因此迅速受到大家歡迎，久而久之，VPS 這樣的服務似乎也就跟 cloud 畫上了等號，但這個等號裏，有個地方卻值得進一步討論。
簡單來說，今天一個人在 ec2 買了 100 個 instances，它們並不會自動聯合起來工作，而是要靠人工去規畫，例如最常見的是在前面放個 reverse proxy 然後把 request 平均導向到這 100 台機器上(round robin load balancing)，並且，更重要的，app 本身在撰寫時就要考慮到將來能支援跑在多個分散的機器上，例如 session 要怎麼維持？global memory 如何分享？database 是否也要散聚在不同機器上？如果分散要怎麼維持資料同步？等等這一大堆相關的細節要處理，一個沒弄好，呃，就成了 twitter 第二..XD 
從這個角度看來，VPS (不論是 ec2 or slicehost)提供的其實是 virtualization 與 load balancing 服務，至於在這個基礎服務之上，user 要怎麼玩就是各顯神通。但 load balancing 與 cloud 似乎並不盡然相同呀！
＊那世界上還有其它種類的 cloud 嗎？
有，例如 google app engine (簡稱 GAE) 提供的服務。
簡單來說 gae 是由三個東西組成的，分別是 MapReduce, BigTable, GFS(google file system)，其中最重要的特色就是 MapReduce。
MapReduce 可說是一個演算法，也可說是一個 framework (看你讀的文獻來源)，但它基本上是由 map 與 reduce 兩者組合，運作方式也很簡單：
map: master node 將工作切割成許多小塊丟給 worker (child) nodes 去執行，worker node 可能會再切割工作成各多的小塊給其下的 worker node 去執行，因此這是一個樹狀的結構。當 worker nodes 完成計算後會將結果傳回給 master node。
reduce: master node 拿到 worker node 傳回的結果後，將它組合起來，就完成工作了。
對 MapReduce 有興趣又閒的發慌的朋友可以去看看 google 發表的一篇論文 與簡報(保証會睡的很香甜 :P)。
類似 GAE 這樣的服務，它們最大的特色就是會將工作切割成很多小塊，然後經由多台電腦聯合起來一起運算，也因為要切割，因此通常會伴隨者一個 distributed file system (在 gae 的例子裏，叫做 GFS)，通常也會有一個分散式的資料庫，例如 gae 裏叫 bigtable。
當然前面講的都是針對底層架構的設計，但對最前端的開發者來說它代表什麼意義呢？很簡單，開發者可以完全不用管它有100台或10000台電腦在運作，只要照著 gae 提供的 sdk (呼叫它的 API，操作 bigTable，或用台灣之光 ericsk 大開發的 gaeo
)開發程式 ，將來佈署到 gae 上後就會自動去調用一堆電腦(而且很有可能是分散在世界各地 data center 裏)來發功，從這個角度來說，開發者要擔心或處理的細節是比較少的，也因此理論上 time to market 也是比較短的。
＊如果不想用 gae 有其它選擇嗎？
有，Hadoop 是 Aapche Foundation 裏一個 java-based 的主要計畫，基本上可視為開源版的 gae(很多關鍵技術是依據 google 開放的學術論文來實作的，例如 MapReduce, distributed file system 等)， 目前最力挺的開發者是 yahoo，用於該公司的 search engine 上，而 hadoop 的創始者目前也在 yahoo 上班(今年紅利會不會很傷？:P)，這裏有一篇 iThome 的中文報導值得一看。
Hadoop 主要由下列三者組成(其它詳細說明請看官網)
Hadoop Core: 主要就是 implement MapReduce
HDFS(Hadoop Distributed File System)：參考 GFS 而來的分散式檔案系統
HBase: 基於 HDFS 的分散式資料庫(功能等同於 google bigtable)
＊所以 hadoop/gae 與 ec2 是互斥的嗎？
不見得，要看比較的面向為何？但實際上它們是可能合作的，其中最著名的例子是紐約時報在 ec2 上用 hadoop 轉了4TB 的 PDF (這篇文章超級精彩不看可惜)。
故事大略是這樣：
NYT 有一狗票 1851-1922 年間掃描的一千一百萬份文章要從 TIFF 圖檔格式轉換為 PDF，由於數量實在太龐大，轉換起來不但耗時甚久，也需要極大數量的機器，就算有錢如 NYT 也不想當凱子爺投資這麼多啊~(而且因為轉換時間太久，也不太可能跑去 Best Buy 刷它個幾千台 pc 回來，然後速速轉完就退回去 XD)
最後 NYT 的工程師將所有檔案傳到 s3 放著，然後到 ec2 開了 100 個 instances，再裝個 hadoop 利用這100台電腦跑分散運算，結果是只花了 24hrs 跟大約3000美金就搞定(由於處理速度實在太快，他們實際上還跑了兩次吶…)
這個例子也正好帶出下一個主題。
＊那 ec2 到底是不是 cloud ？
這要看你怎麼定義 cloud 這個字，以我而言，我傾向認為 MapReduce 與 distributed file system 是 cloud computing 的主要特色，因此在這個定義之上，EC2 並不符合首要條件。
但如果我們把問題轉成：ec2 可以成為 cloud 嗎？
那答案就是肯定的，從上面 NYT 的例子可以看出，EC2 提供100個 instances 只是基礎架構，之後再上面跑 hadoop 才是真正發功之所在。
由此我們也可以得到另一個結論：硬體本身有無 virtualization 並不重要(你可以買100台真的電腦連起來，也可以用 ec2 開100個 instance)，重要的是在其上協同運算的方式( MapReduce 是這裏的關鍵)
更簡單的二分法則是這樣：
*Amazon 只是把硬體虛擬化，然後賣 raw-level computing power
*GAE/Hadoop 則是提供分散式協同運算, packaged computing solution
因此，或許我們可以把 ec2 視為 cloud 的前奏曲，擁有它之後，要不要做成 cloud (例如裝上 hadoop) 則是個人選擇。
＊所以，何時該選 ec2 或 cloud 呢？
這是更重要也更實際的問題，而答案也很單純，主要就是考慮下列因素
1、你要解決的問題是否能符合 MapReduce 的矩陣分割方式？
或是更白話一點的講，你要做的事能不能被切割成小小的一塊塊來個別擊破？例如 log file 的分析就很適合，但 friend of friend database 就不見得適合。
如果你的問題可切割成許多小塊，那就可以考慮下一點。
2、vendor lock-in 是否是個問題？
這個主要是針對 gae 而來的，現在如果用了 gae，基本上它的 lock-in 特質非常強烈，例如一定要用 python 與 bigtable，整個資料庫欄位的規畫方式跟傳統 RDB 完全不同，操作語法也不一樣，將來幾乎無法迅速移轉到其它 hosting 上(雖然有人寫了 GAE to EC2 conversion kit, 但有沒有膽用是另回事)，喔，更別提市場上 python 的人才有多貧乏這件事，會 RoR 的人搞不好還多一點。
當然這裏可能的另一個選擇就是效法 NYT，用 EC2 + Hadoop 搞客製化分散式運算，而且用的是 java ，人才四處可得相對門檻就低一點(結果最後是死在 MapReduce 搞不定 ? :P)
＊那 SaaS 是 cloud 嗎？
這也是個好問題。
現在很多 Software as Service 的服務商，例如 Salesforce 也都宣稱自已有提供 cloud computing 服務，這又是怎麼回事？
我認為比較合理的看法是將 cloud 分成三個層次來看：
第一層是硬體層(100台真的電腦，或100個 ec2 instances)
第二層是 framework (hadoop, gae, ms azure)
第三層才是 service (accounting, pdf generation…)
在這樣的架構下，SaaS 是屬於第三層的 service 這個 scope。
也就是服務商先搞定第一、二層後，在其上建構自已的 domain service，例如 salesforce 的主力服務是 CRM，因此它透過 cloud 提供一系列的 CRM API 給開發者使用。舉個誇張的例子(注意，這例子是假想的)，搞不好 salesforce 也是租 ec2 然後搞了個 hadoop，接著在上面用 java 寫了一堆 api 給人 call。這時它就是三層皆備，可稱 cloud 而無愧了 XD
另外類似的例子則是像 gmail, google reader 等，這些都是 software services based on GAE (先搞定一、二層，然後建構第三層的 domain service)
＊附錄
原本我曾認為 ec2 的 virtualization 可以做到將許多台實體電腦虛擬化成一大台 server，這樣工程師就只需要針對一台『超級電腦』來寫程式即可，如果是這樣，那 ec2 其實也符合分散式運算的標準，但我查來查去只不斷看到類似下面的解釋：
EC2 is more designed for applications that scale well across many hosts, rather than larger applications that require huge resources. IMHO, the xlarge instance is quite fast. Maybe you can identify a bottleneck in the application and address that? Is it really CPU bound?
Scalability: Amazon supports easily adding or removing servers, not adding more power/memory/disk to an existing server (instance). This works well when your application is architected to scale across multiple servers to support increased load.
因此目前先初步認定 ec2 並沒有提供這方面的能力，當然如果有錯，歡迎指正。
＊後記
在研究期間叨擾了無數前輩，感謝他們犧牲週未時間情義相挺回答各種無趣的問題，在此致上最高謝意 
另外關於 ec2 vs. slicehost 的成本或用哪家比較划算這檔事，我也小小想了一下，從實際數據看來，如果只是小型的網站或是 newly startups，從省錢的角度來看，應該要選 slicehost，因為它的初始成本最低，例如花個 $20 美元就可以有頗大的空間與流量可上線 run 了。
但 ec2/s3 的好處則是安全性、穩定性與擴充性，而它最大的缺點則是成本相對較高，一個 instance 開著不用一個月就要 $72元，如果生意好流量大那要交的費用就更多。
目前台灣地區用 ec2 的的網站似乎並不多(pixnet ? 但把資料存在 s3 的站就多一點)，可能主要是連線反應時間不夠快所以接受度不高吧，但我們服務的客戶本來就多在北美，所以沒差 XD
| by admin
再過兩天是美國總統就職大典，雖然跟我沒什麼關係，但有機會看到幾大主流媒體怎麼處理這則新聞，以及順便觀察它們如何在網路平台上玩這個 event，也是樂事一件。
下面是紐約時報今天推出的「就職大典互動地圖」，透過動畫加文字/圖片的方式，簡潔的說明了就職典禮的進行流程與相關地理資訊，只要花個三分鐘，就能讓人快速瞭解大概是怎麼回事，尤其它的呈現手法可說是非常好的 information graphic design 範例，非常值得一看。
同時另外有個 Your Hopes for Obama 的互動設計，主要是前陣子讓人錄下對新總統的期望，內容本身沒什麼新意(經濟不好你認為民眾還會說些什麼？:P)，但呈現的方式一樣讓人眼睛一亮，尤其可注意它的資訊架構設計。下面是幾張擷圖。
(每個人都可以錄大約20秒的語音說出心中的想法，然後按主題分類)
除此之外，NYT 還有一個挺不賴的單元叫 weeks in picture，簡單來說就是圖片版的『本週大事』，但當然，圖片比文字更有說服力，尤其當鏡頭語言的張力十足時，同樣一則新聞，傳達給人的感受就完不一樣了啊~
也由於總統就職大典在任何國家都算是件大事，因此所有媒體幾乎都會弄個專題區或直播之類的服務，這可是千載難逢研究媒體/網路/傳播的好機會，有興趣的人一月二十日當天可以多灌兩杯咖啡跟它拼了，同步監看下列媒體。
(其實光看這份媒體清單本身就很有意思了，裏面有電視、報紙，也有純網路媒體，還有甚至不是媒體的平台，像 hulu, twitter，這是一個有趣的時代不是嗎？)
CBS
CNN with Facebook
MSNBC
C-SPAN
ABC
FOX with HULU
PBS
Washington Post
USA Today
Current TV with Twitter
Joost
族繁不及備載
所以，到底本文的重點是什麼呢？很簡單，有兩個。
1、資訊設計的終極目地是讀者的『使用與滿足』，良好的資訊設計與呈現方式比運用炫麗的神奇技術來的更重要，上面提到的幾個互動設計，其實也都只用了非常簡單的技術(不過就是 flash 嘛 XD)
2、對於手上本來就擁有大量現成內容的媒體來說(不論是電視、報紙、雜誌或書籍)，應該針對自身的內容屬性做聰明的規畫，來 re-target/purpose 這些內容到網路上，以加值後的面貌呈現出來，紐約時報絕對是一個很值得借鏡的典範(就算新聞產製水平沒法達到人家的十分之一，至少呈現手法可以學個幾分像吧？:P)
| by admin
今晚看蘋果日報網站時，很驚喜的發現 main navigation bar 上多了一個新項目，叫做『今日蘋果』，點進去一看原來是將本日的頭版畫面貼了上去，如下：
更棒的是，那個頁面下方接著就是按版面把新聞條列出來，這樣讀起來就更像是真實報紙的感覺，整個使用者經驗大優啊~
在此之前，如果要透過網站看完整份報紙，就得透過主選單一個個點進去，經常會錯過某些有趣的報導，而且即時新聞跟今日的印刷版也不容易分辨出來，現在這樣重新整理過後就一目瞭然。
有趣的是另一份我常看的報紙，New York Times 也有同樣的設計，如下：
畫面右方的小圖點了後會放大，能更清楚的看到今日的版面，這樣就更像手中拿著一份 NYT 一樣，更讚的是不會有油墨，而且也沒害死樹(但可能有排CO2 ?)；當然頁面左邊同樣是按版面列出當日的新聞，清清楚楚，方便閱讀。
這些改變雖然都是小事(技術上也沒啥門檻)，但小小的改變卻能帶來極高的便利與效益，讓讀者接收資訊的經驗更良好，實在是大功一件，想出這個點子(或，呃，懂得要去借鏡 NYT) 的人，應該被好好嘉獎一番，接下來就請他/她去開發個 iphone 版吧 XD
ps. 如果硬要雞蛋裏挑骨頭，新版面中我覺得還有問題的地方是主導覽系統中的『即時』與『搶鮮報』，我到現在還是搞不懂它們的區別(尤其在『即時』中又有一個 『蘋果搶先報』…)，或許乾脆二合為一然後照時間排序就好？
ps2. 關於 NYT，還有許多有趣的故事值得談吶，這等有空時再來慢慢寫…
| by admin
