[Movie] 成大學生製片ー「痂」

[youtube http://www.youtube.com/watch?v=dcM-58tTNyg&w=480&h=390]

我一直都是一個熱愛看電影的人，不過也就僅止於此而已。我從來沒有想過我會對於「演戲」有著如此高的興趣，原來一切都要等自己投入時間去體驗才會有所體悟呢。

「痂」這部片，其實只是我大四一門通識「人際關係與溝通」的最後一個期末作業而已，原本說實在的，其實是一盤散沙，每個人包括我在內都非常的忙碌，平常根本就沒有辦法播出時間來拍戲、討論，甚至連劇本都是整個小組在下課後約在麥當勞討論出來的。從這就可以看出整個小組的態度就是普通大學生對於一個作業的態度，能閃則閃，能拖則拖。

不過到了接近交作業的期限，大家才驚覺到這件事情的重要性，而我又不想要只是交一個很鳥的影片上去，所以我就私下去找了三五個好友以外卡的身份來幫助我們完成這部片。我想也許是因為我是資訊兼航太系的原因，整組五個人中有四個人都是就讀於我待過的系所，再加上我自己是大四，所以他們看到我對於這部片開始有了一些想法及作為也不敢有所反抗吧（XD）

所以就這樣，我們以探討服務業店員的內心世界出發，希望能夠藉由主角過去所發生的事情來和他服務心態上的轉變做一個對應，在片中穿插倒敘的手法來回溯至事情發生的起點，並利用演技的部分來帶出主角心態上的轉折。而這也就是我們這部影片想要傳達給觀眾的訊息。

如果沒有導演煊怪的幫忙，那這部戲一定是殘缺無比。最厲害的莫過於他能夠在有限的資源（兩個類單眼 + 一個腳架）中以技巧性的拍攝手法來彌補我們所不足的部分，這真的需要對分境及攝影有一定的熟悉度才能做到的。

而另一個就是良棋的火柴天堂，如果沒有他自彈自唱這首秦齊的代表作的話，那這部片一定也會因此失色許多，他獨特的嗓音在經過影片後製之後，為我們在劇情中帶入了高潮，讓觀眾能夠真的深入到主角的內心世界和我們一起體驗他的想法、思惟，甚至是能夠感受到他最真實的情緒。

最後真的要感謝所有參與製作這部短片的所有人員，如果沒有你們，就沒有這部精采的短片，也讓我尋找到我人生第二個可能發展的空間，謝謝你們，也希望所有的觀眾會喜歡這部短片。

最後，我想用片尾的獨白來為整篇劃下一個句點：

縱有七情六慾，
從事服務業的人們仍需無時無刻地壓低姿態來服務顧客，
但是，在這個世界上，許多人都是以自我為出發點，
忽略了店員也是人的事實，甚至無視他們心境上的轉折。
如果，人與人之間都能互相退讓一步的話，
那一切，就會變得海闊天空了吧？

[WTH] Spaghetti codes

Image Credit : Startup , Spaghetti

I have been worked in a startup team called InsureMe for few weeks. My responsibility is to handle the front-end part well. Due to some reasons, I became from a programmer to a manager. Well, to be honest, I am still a programmer indeed because there is only one programmer – me in the front-end team.

It’s my first time to handle the whole front-end including Javascript / HTML / CSS. Because I have never met a senior F2E before, all skills about front-end are accumulated by searching articles, asking Google or Stack Overflow , reading books written by the professionals … etc.

I am glad that I had once worked as a F2E in the previous company and learned some designing from the codes left by a famous F2E who I have never seen before. At that time, I had spent almost all my working days to extract the codes and try to understand the wonderland. By the way, that’s my first time to handle one jQuery plugin with thousands of codes in one script. Though I had figured out almost 90 % of his codes, I still can’t truly understand his thoughts about designing.

Now , when I am working on the javascript files, though I can make the script full-functional , I can’t make it very flexible. That’s why I take my codes as Spaghetti codes filled with some bugs which taste sucks.

I always believe that practice makes perfect. Well, I must believe. Writing spaghetti codes is the necessary way to be excellent.

Keep going , cheeeeeeeeeeeers.

[Research] HTML5’s Client-Side Storage Mechanism

Image Credit

之前一直在研究 Chrome Extension，而其中頻繁地使用了 HTML 的 Client-Side Storage Mechanism，所以就花了一些時間去 survey 了一下資料並整理如下：

一開始我想要先了解一下為什麼有了 Cookie 的存在，卻又還要在 HTML specification 中提出新的機制來儲存資料？而根據 Wiki 的資料顯示，Cookie 雖然只是一個純文字的文件檔，但其實在 Browser 與 Server 做溝通時，都會被附加在 HTTP Header 的 Cookie 欄位，這就是為什麼 Cookie 的資料在前後端都可以被存儲的原因。

就在我了解了其存在的意義後，我就想要了解為什麼都已經存在著 Cookie 這樣的存取機制，卻還要在 HTML5 的 Specification 中提出新的存取機制？這是一個好問題，在看了 Stack Overflow 的討論文之後得到了答案。

有的時候，我們並不需要與 Server 做太多的互動，只是需要一個前端可以互相使用的存取機制就好，哪怕只是傳遞一些簡單的識別代號。因為有了這樣子的需求，那 Cookie 在某種程度上來說就太大材小用了，甚至可以說是過於痴肥。所以在做了這樣的理解之後，就可以合理的推測前端「輕量級的存取機制」之必要性。（時間點就沒有考究了）

那在 HTML5 的 Specification 中到底提到了什麼樣子的新型存取機制？原本可以歸類為下面三類：

Session Storage
Local Storage
Database Storage

之所以會說「原本」是因為 Database Storage 不知道因為什麼緣故就停止維護了（參閱下圖），所以我們就在此不做深入討論，只討論 Session 和 Local Storage。

如果要快速地了解兩者的差異，就是自己動手玩看看。

接下來還是要說明一下：Session 的中文是叫「會期」，就是一段會議、對話的期間，而在 HTML5 下，如果我們採用 Session Storage ，則我們資料的生命週期（Persistence）及生存範圍（Scope）都只能在一個 tab / window 下。說實在的，一時真的想不到該機制能應用在什麼樣的情況下，但 W3C 有提到一個有趣的情況，就是當一個使用者在進行拍賣的交易的時，雙開了兩個同樣帳號的 tab 來做購買的動作（接下來是我個人的情境補完），如果我們是利用 cookie 來紀錄欲購買商品的編號，那其實就很有可能因為兩個 tab 存取相同的 cookie 檔（沒有 lock）而造成交易上的異常。所以在這種時候 Session Storage 就相當適用。

而另外一個 Local Storage 和 Session Storage 的差異就在於 Persistence 和 Scope ，它是一個可以長時間儲存的機制，即使是在關閉 tab / window 之後，先前所儲存的資料依然保留著，而範圍就是所有的 tab / window 都能夠存取使用，除此之外，還能夠允許同個 domain 間的資料互相存取，因此在資料的傳遞上面佔有很大的優勢。以我自己為例，我在 Google Chrome Extension 的開發時，就大量應用到 Local Storage 來幫助我的外掛記錄使用者的偏好設定，以便於在各個子腳本中做資訊的傳遞。

以上就是這次 Client-Side Storage Mechanism 的研究，歡迎留言指教 :]

[Watch] What happened after publishing Facebook Blocker extension ?

Check : FBBK 的主介紹頁

這篇文章主要是要為我當初發佈 Facebook Blocker 做一個記錄，而其中我也觀察到了一些有趣的現象與數據，請大家待我娓娓道來。

一開始我們先看一下流量的部分，如果扣除掉前幾天的上線測試，可以發現在發佈後約 20 天其流量就有顯著的成長，而單日最高的造訪人次則發生在 4/4 號為 313 人。有趣的地方是在於「直接流量」佔了 96.67 % （＝3524 人次的造訪）、「推薦連結的流量」只佔了 2.23 %（＝71 人次的造訪）而那「搜尋引擎的流量」只有 0.80 %。所以除非你的 extension 是殺手等級的，要不然其實「推薦」及「搜尋引擎」所帶來的流量其實相當微小，像我還有 2 % 的流量是因為學姐在 Facebook 上轉貼所致的。

而絕對不重覆訪客的則是 719 人，平均一天有 24 個人使用 / 得知這個 extension。這其實是有原因的，因為外掛的同質性很高，在 Chrome extensions 上可以發現與 Facebook / Blocker 之類有關的外掛非常多，所以像我們這些後輩其實發展的空間就很有限。不過我覺得我的外掛在一個月之內從無到有還能有這樣的市場主要是因為具有差異性，雖然沒有主流 blocker 這麼的 powerful，但是就是因為小巧且能做到他們做不到的事情（Regex + keyword matching + block groups / your own / friends’ walls），所以才會一直有所成長。

那因為這個本身就是 Chrome extension，所以 95.18 %（＝3459 人次）是 Chrome 用戶、 0.55 %（＝10 人次）則是 Rockmelt 用戶，其他的就不知道是怎麼連進來的了=_=，更難以置信的就是 IE 還有 3.88 %（＝141 人次）。所以這邊可以發現，來看這個 Chrome 外掛介紹的使用者第二多的就是 IE 用戶，所以 IE 的用戶真的是「很多」，非常的多，多到你無法想像，所以做 Web 的雖然討厭 IE series … 但是使用者是無知的，為了這廣大的市場，也只能下海去了。

接下來有個很值得探討的就是使用者的分佈，我想主要的原因是因為我是台灣人，而且該外掛的資訊曾在 Facebook 傳遞了一下子，再加上外掛介紹有配上中文，所以用戶第一多是從台灣（＝664 人次）來的應該是可以接受，但是有趣的地方不是在這邊，是在除了台灣以外的使用者，因為有關 Facebook Blocker 的介紹真的是少之又少，能夠得知這個外掛的方法就只能透過 Chrome Extensions 的平台，儘管如此，2 ~ 8 名的國家分別是泰國（＝551 人次）、丹麥（＝380 人次）、波蘭（＝296 人次）、美國（＝279 人次）、德國（＝200 人次）、義大利（＝146 人次）及埃及（＝108 人次），其實這裡我只有做一個小小的動作，那就是國際化，整個外掛的主要語言設定是用「英文」，而外掛介紹也是先用「英文」再用「中文」。所以就算是英文不好的開發者，在介紹自己產品的時候就算逼不得已 Google Translator 也是要給他用下去，即使文法或是單字意思不太對。因為這對於以英文為母語或是第二外語的使用者來說，他們會覺得非常親切甚至是試用你的產品。英文真的是你傳播資訊最好的媒介，如果當初我沒有做這個決定，那現在這個外掛大概也就只能停留在小小的台灣了。

所以，

不要忽略你的蠢主意，因為你不知道你的一個小小的想法，會因此為你帶來多大影響。
Release Early、 Release Often，比起已經搶佔市場的先行者來說，你能做的只有提早釋出你的想法並與以實作，然後持續與使用者互動並以他們的意見及建議來更新版本，讓他們認為參與其中並對這個專案有所貢獻，以建立第一批的擁護者。
i18n（Internationalization、國際化），這邊的國際化其實是指想法上的國際化，因為如果一個專案只是單純的中翻英或是引入多國語系只能說是國際化的一個手段而已，我想表達的是在你在構思產品或專案時候，要想的寬廣一點，不要只是限制在自己所居住的區域或是先預設了使用者的立場，這樣子不僅會縮減你可能的市場也跟不上這個世界的腳步，導致最後的失敗。以我的 Facebook Blocker 為例，我的目標就是 Facebook 上面的使用者，但是使用者使用的語言很不一致，所以除了以英文為主軸來介紹這個 Extension 之外，整個外掛不會讓使用者因為先天上語言的差異而無法使用，這是因為一開始整個 Extension 就設計的非常簡單，用簡單的色塊及小圖示來提示使用者整個操作的流程，如此而已。
Web，它是一個很棒的戰場，就算是個人也能夠站在 Web 上與全世界競爭，也是一個很適合曝光自己的平台，所以無論如何，Please be involved。

以上就是我把從這次製作 Extension 所得到的一些數據及觀察到的現象做一個總結，希望能對有心要寫 Extension 的人會有一些幫助。

[News] How Fast Is Your Site? Measure It With Google’s Page Speed Online

原文 From TechCrunch , Image Credit

在 2011/03/31 的時候 Google 發佈了一個新的玩具叫做「Page Speed Online」，它提供了一個快速又簡單的方法來測量連結你的個人網站時的速度。原本這個功能是要透過 Google Chrome 的擴充功能才能夠測試的，不過現在 Google Labs 發佈了一個全新的方式，讓你在任何地方都可以分析你的網站並接受最即時的回饋資訊供你參考，讓你知道要如何調校網站並使其變得更快。

雖然在網路上有各式各樣的工具，不過它們都只有測量伺服器回應速度（Server Response Time），而且測量結果也和真實情況有所落差，都不夠正確。例如說速度極快的伺服器可能在極短的時間內就能夠回傳 HTML ，不過您的網站訪客可能還是要花許多時間在等待圖片的下載或是 Javascript 的執行。相較之下，Page Speed Online 使用了以 webkit 核心為基礎的輸出呈現器（Renderer）來測量所有網站上的元件的效能。

Page Speed Online 非常容易使用，只要在它的頁面下輸入你的網址就可以得到即時的建議回饋，告訴你要改進網站上的哪些部分來提昇效能。而 Page Speed Online 會給你的網站一個分數（滿分是 100 分），而分數的高低則取決自其建議出現的優先順序。除此之外，Page Speed Online 還可以從行動裝置的角度來測量效能，提供不同的效能提昇建議，這是因為行動裝置的 CPU 多比桌機的 CPU 無力，所以在評分上著重的部分就會有所不同。

效能是一個非常重要的關鍵，因為我們都知道，每個人都會把挫折感和等待網頁載入的時間聯想在一起，所以網站的擁有者特別需要關注效能的問題。近年來「盈收和網站連線速度之間的關聯性」一直不斷的被人們提出、強調。改進網站效能是一個提昇網站瀏覽量（Pageviews）、網站轉換率（Conversions）還有銷售率（Sales）最簡單的方法。以下提供幾個實例以供參考：

Yahoo 發現 400 (ms) 的改善能夠提昇 9% 的 pageviews
Firefox 減少了 2.2 (s) 的平均頁面載入時間就提昇了 15.4 % 的 download conversions
Shopzilla 減少了 5 (s) 的載入時間就提昇了 25 % 的 pageviews 還有 7 ~ 12 % 的盈收

Google 一直都致力於讓整個網路變得更快速，這不只是因為它是最快速的搜尋引擎，還因為它在它的排名演算法中引入了網站速度來當做評比的其中一個因素，以鼓勵其它網站也變得更快。而創投家 Fred Wilson 也在一文中提到「網站的連線速度」是創業者必需考慮的首要目標。

【評】
剛看到這個玩具的時候感覺還蠻新鮮的，因為以前的檢測工具都只有做到效能的評比，提供了一堆搭配專有名詞的數據給你，而你卻不知道要從何下手去做改進，有種幫忙只幫一半的感覺，比完全沒幫忙還糟。但是 Page Speed Online 就不一樣了，（下圖是我檢測 http://eragonj.hax4.in 的結果），從圖中可看出拖累效能的各種因素，以重要程度由大到小排序，如此一來我就可以知道就我網誌來說，我最需要解決的就是圖片的問題。

而 Page Speed 也很貼心的為我找出產生問題的頁面並提供改善的方法，甚至是為我計算出可以節省的頻寬，真的是非常的方便。

這個小工具其實對於 startup 來說非常的重要，因為就像 Fred Wilson 所說，「網站的連線速度」是創業者必需考慮的首要目標，如果初期就因為 loading 的問題讓 visitors 留下不好的印象，那網站做的再棒、再豐富也是惘然。如果大家有興趣也可以自己測試一下自己的網站，看你能拿到幾分吧 ;]

[JS] Facebook Blocker

Check : FBBK 的主介紹頁

應該有很多人像我一樣已經厭倦了 Facebook 上面一堆無聊的心理測驗或是騙人氣的按讚論壇，所以身為 Chrome 的愛好者及 Javascript 的初心者，我就為 Chrome 寫了一個小小的擴充功能，名為「Facebook Blocker」。

Facebook Blocker 可以讓你設定自己的「樣式」，然後它會自動在你下次進入 Facebook 的時候讀取樣式並分析當下的頁面，凡是符合該「樣式」的訊息就會自動被隱藏起來，讓你以後再也不用看到那些惱人的廣告。

其實如果你上 Chrome Extensions 看的話，已經有很多名為「Facebook Blocker」的 Extension 了，但是經過一陣搜尋之後，發現那些 Extension 大多和我想要做的事情都不太一樣，不是太過痴肥要不然就是功能不同，讓我久久不能自己。

所以經過幾天的研究之後，已經寫好了 Facebook Blocker 的雛型了，而且基本的 Hot Key 也在剛剛 1.0.2 版的時候新增上去了。心中還有很多有趣的功能還沒實作，雖然 UI 也有點難看，不過至少在使用上沒有太大的問題，總要留些東西放在後面更新，才不會有人說我在打混（好的不學都在學這個 …）

如果有什麼想要增加的功能或是意見都可以留言給我（在這或是在 Extension 的頁面都可以），我會一一回覆的。

Enjoy blocking 😉

δ Facebook Blocker 在 Chrome Extension 上的載點與步設定步驟的教學圖

[ACM] List of solved problems

Image Credit

最後一個學期，有幸上到 Electron 電子哥第一次也是最後一次開的「程式競技」，總算是有一個目標來推動自己去寫這些題目（雖然在成功高中的時候就和電研社的朋友們寫了一些了，好懷念呀），所以想要做個統一整理，把所有解過的問題都放到 Github Repo 上面並附加註解，做個記錄。

這篇會一直持續更新，如果有興趣的人可以觀注這篇文章。

Uva

ZeroJudgeー大專院校版

PKU online Judge

[Memo] Life should be simple with Simple Theory

[youtube http://www.youtube.com/watch?v=Jd-4yjUS4Oo&w=640&h=390]

In these few days, I always want to do something but can’t do anything. At first, this kind of situation confuses me a lot indeed, because I can’t realize that this kind of situation will happen at me one day. Then, I got tired of everything … That’s right “EVERYTHING”.

I don’t know how to do ( save me from this kind of shit ) or to say specifically – what to do. I struggle to do anything but failed .. Until few days ago, I came back to my university and kept hanging out with friends. We went out to find some encouraging books like “Delivering Happiness: A Path to Profits, Passion, and Purpose” written by 謝家華 – CEO of Zappos … etc.

After reading, enjoying delicious food and hanging out with friends, I got a simple conclusion called Simple Theory. In nowadays, people live too hard to experience amazing things around in our daily life. We only take care of high-tech, functional smart phones, and blah blah. Because you are involved inside, you can’t even look clear what you are doing right away !

Take my old brother for example, few weeks ago, he just bought an HTC from his friend with nice discount, and he also paid for unlimited internet access monthly with extra 900 NTD. After observing him for few weeks, I notice that he has spent more than 4 – 6 hours on his mobile, even when he is lying on the bed but got to work early in the next morning !!

I keep thinking, why our life is becoming so complex? why there are so many people died just because they only work, work and work !? why there are so many problems raised just because we keep using So-called “social” Network Service ( That’s my definition about SNS ) !?

[youtube http://www.youtube.com/watch?v=8UouP8cRYZ8&w=640&h=390]

Life should be simple, isn’t it ? smart phone is for convenience instead of playing nonsense apps isn’t it ? SNS is for people who want to communicate with friends far away from you instead of posting nonsense and playing unproductive “FarmVille” isn’t it !? They were really nice and useful originally but got misused nowadays and made them and our lives so complex.

To be honest, I have no rights to say that I am the only person not involved in the above situations, because I am still using my laptop to post this article and share you some informations from SNS. Even though, I have reduced my time spending on SNS and stayed away from IM for few days, and I think I can keep the rules and make my life better.

Remember, life is really short and simple, do something meaningful and focus on the other things that you have never experienced and enjoy.

Simple Happiness, Simple Enjoyment and Simple Life, that’s my own Simple Theory.

[Others] One night in Taipei

Image Credit

好快，一下子整個寒假就這樣過去了，大學也終於來到最後一學期了，這是近期最後一個 One night in Taipei 了。在公司的半年，說長不長說短不短，一下子半年也就這樣過去了。

還記得在 2010 / 07 月的時候，我懷著滿腔的熱血想去找個科技公司實習，剛好當時 E2e 的公司有一個人的職缺，而 Ijs 也很熱心的把我介紹給他，就因為這麼天時（剛好有職缺）地利（家住台北縣）人和（他們兩個剛好認識），所以給了我這個機會，讓我擔任這個職位。

其實講白點，在剛開始的一兩個禮拜，我是完全陌生的，因為當時我根本就不熟 Javascript / jQuery，只是一個東碰西碰技術的 kid 而已，所以每天都一直瘋狂 Google 找資料、看文件，然後又因為要維護前輩留下來的程式，所以整個就是緊張到不行，很怕自己無法勝任這份工作，然後玩壞了 Ijs 的信用。

不過半年過了，從剛開始的一問三不知到現在能夠很有耐心地 survey 資料，不只是技術或是程式方面，甚至在整個心境上也有很大的提昇，同事之間也傳授了一些設計程式架構的概念，也從中學習到 co-work 的重要性。這些都是在學校課本上不會出現的東西，都是需要實際深入體會才會得到的碩果，而我也很慶幸自己能比同儕多了這份實習的經驗，因為沒有這些經驗，課本對我來說就都只是一堆散落的知識和一堆毫無意義的文字罷了。

這一夜，我用半年來感受，它也是我在台北的最後一夜，也許這對於強者我朋友來說是多麼的微不足道，不過就在這即將下台南的前夕，我覺得我有必要用文字把它紀錄下來，提醒未來的我，同時也勉勵大家把握當下去追逐、體驗挑戰，活出自我的價值。

最後，我要感謝所有在這趟旅程當中遇到的人，謝謝你們：Ijs , E2e , Jay , Roger , Brian , Ryan , Nio , D3x , D2g , Alex , Yoyo , Reed , 孫哥 , 白先生 , H3n , Wilson , 可喜。

[JS] plurkable – lightweight jQuery plugin for your own Plurk widget

Demo、載點與解說

好吧，我真的是過年太無聊才在那邊用 Javascript 寫一個輕量級的 plugin 讓你可以客制化自己的 widget，其實使用方式在 github 及 demo page 上面都寫的很詳細了，這邊就不多談（或是參考下面的 js code）。
https://gist.github.com/814690.js?file=gistfile1.js

現在開始愈來愈覺得 javascript 非常的 powerful，只要有 browser 就可以跟著老師帶你上天堂，也不用做什麼煩雜的設定，再加上自身對 JSON 格式的 support 及 browser 間內建的 functions 就可以很輕易的完成自己的需求，然後現在這幾年又出現了改變世界的 jQuery，更是把入門的門檻拉低了許多（至少解決了很多問題，雖然也產生了一些問題 xD），不過愈是如此，Javascript 就愈讓人覺得深不可測 …

而且現在又有許多好用的工具像是 PhoneGap 可以幫助我們來實作 mobile applications，而之後也會有許多的 desktop applications 可以用 Javascript 來實作，整個就是拉近了平台間的距離了呀。

ㄜ … 這篇應該是要介紹 plurkable ，但是我好像一直離題呀 … 管他的 xD ~ 祝大家新年快樂啦（????）