//speakerdeck.com/assets/embed.js
Few days ago, I shared a slide with teammates called Pipes. For me, I used it to communicate with Plurk and chose the JSONP response to conquer cross domain problems in JavaScript.
科技 x 健身 x 影像創作 x 自我實現 | 僕にもできる 💪
//speakerdeck.com/assets/embed.js
Few days ago, I shared a slide with teammates called Pipes. For me, I used it to communicate with Plurk and chose the JSONP response to conquer cross domain problems in JavaScript.

最近因為 Server 有點問題所以造成 Blog 的 Routing 出了點問題,也是因為這樣才會使得 feedburner 抓不到資料。
儘管如此,最終還是修好了。
而我,也有幸在台灣某大資安 T 公司工作,為這個世界付出一些貢獻。
加油 😛
Check : FBBK 的主介紹頁
也許有點老梗,但是最近因為情緒低落,想要參考學徒模式的作法,回到自己的舒適圈,試著找回一些原本稱之為熱情的東西。
其實也是這麼的剛好,因為 Chrome 在版本號 >= 18 後會逐漸遺棄 Manifest V1 的部份實作,提供了更多方便好用的 API 在 Manifest V2(例如說 Content-Script 在 Manifest V1 時,存取 LocalStorage 的限制需要透過 background page 的幫助),其實我覺得是種陰謀啦,畢竟 Extensions 就和 Apps 多如牛毛,所以透過這種手段還可以順便幹掉那些沒在更新的 Extensions … XD
以下是從 Google 那邊擷取的時程說明:
除此之外,還差一些讓我捲起袖子實作的動機 … 想著想著,我就想到我在使用 Facebook 長久以來的困擾,那就是這個:
沒錯,就是那個該死的「Seen」,這個 Feature 真的是我最痛恨的一點,有的時候就是想假裝沒有看到某個人的留言,但是 Facebook 卻會在特定的情況下 Trigger 「讓別人知道你已經看過留言的事件」,這種行為我真的沒辦法接受 … 隱私這種東西在這個設計之下幾乎是蕩然無存呀!
所以我就參考了一些文章還有 Chrome Extension Request 的機制,為 FBBK 加上全新的 Unseen Feature,可以參考選項設定的擷圖:
經過幾位好友的友情測試之後,Unseen 運作的非常良好,終於可以(和別人站在不同的起跑點了) 在聊天的時候暫時找回那一點點曾經屬於自己的隱私了 xD。
以上就是這一次 FBBK 的更新,歡迎大家提供 feedback !
立馬安裝 Facebook Blocker – FBBK Chrome Extension
—
Updated on 2012/08/11,目前審核通過!
P.S. 其實這一篇是 2012/08/07 的時候就寫好了… 但是因為 Chrome Extension 在做版本更新的時候出了一點問題,所以這個版本的更新要等待工人智慧審核通過之後才會發佈,囧。
原本是想要等更新通過再發這一篇文章的啦,但是因為不知道要等多久(可靠消息指出會到兩三天),所以就先放出這個消息來啦!過幾天會把 FBBK 的更新消息統一到一個 Page ,這樣相關的資訊就可以在那邊一目了然啦!
Thanks All ~ FBBK Still Rocks on !
這一個月以來,自從計畫被打亂之後,我覺得我開始迷惘,開始找不到生活的重心,就這樣一天過著一天,和行屍走肉一樣。
到底什麼才是我要的?又到底什麼才是我的人生?
原來,回到最初,役男和學生身份只是一種保護傘,但是當卸下的時候,卻也因此讓我無所適從。
改變,從現在開始,我不想再過這種毫無意義的人生,
待在家裡,坐在電腦桌前,
日以繼夜。
該是向過去的自己說聲再見,勇敢的再次找回那消逝許久的赤子之心了。
最近在開發一個分享書籍資訊的服務,因為想要試著單靠 JavaScript 去征服這個世界,所以我就選定了以下的開發環境及工具:
因為書藉的資訊在這個服務中沒有太大的關聯性,同時我也懶得搞一個複雜的資料庫出來,所以在大量的 Survey 後,我發現 MongoDB 很適合當這個服務的資料庫後端 。
所謂事出必有因,我特別列出幾個它吸引我的原因如下:
而在開發服務的時候,為了找到好用的 Node Modules 來操作 MongoDB,我就到處在 npm 尋找可行的 MongoDB modules,但是幾本上都不方便使用,光是原生的 MongoDB-native 也因為要寫一堆 callback function 而被我打槍…
就在萬念具灰的時候,我發現了一個名為「Mongolian」的 Module。
不用一段 Source Code 很難明確的點出 MongoDB-native 和 Mongolian 的落差,所以先來看一段 VCR(註解在程式碼裡):
https://gist.github.com/2957876.js
如果你還看不出 MongoDB-native 的 callback 大軍的話,那再看另一段從官方範例中完整取出的 VCR:
https://gist.github.com/2957935.js
這真的是太噁心了,我實在是沒有辦法使用這一串 callback 海來操作資料庫,所以我最後選用了還在這個還在開發階段中的 Mongolian,不單單只是因為操作簡單,還因為它完整的提供了和 MongoDB shell 一樣的操作流程,這對開發者來說真的是好事呀,這就是所謂的一魚兩吃!
Mongolian DeadBeef is an awesome Mongo DB node.js driver that attempts to closely approximate the mongodb shell.
而使用方式就不詳述了,因為這個去看 Document 還有 Example 甚至是多玩幾次 MongoDB shell 就會了,就請自己多方嘗試吧。
我還要特別記錄一下這個叫做 ObjectId 的東西,如果你仔細去印出存在於 Collection 中的 Document 的話,你會發現每一組 Document 都會有一個 _id 的欄位存放著 ObjectId,原先我單單以為這只不過是一個類似 unique id 的機制,可以讓你明確的區分出各個 Document ,結果我錯了,因為他還有更深層的含意在背後。
BSON ObjectId 是一個大小為 12 bytes 的資料型態,從下表可以看出他每個資料區段所代表的意義。經過我的研究後發現,後三個資料區段主要是在提供 ObjectId 的獨特性以避免 Collision 的情況發生,所以其實並沒有太大的實質意義,真正特別的是 time 那個資料區段。
TimeStamp. This is a unix style timestamp. It is a signed int representing the number of seconds before or after January 1st 1970 (UTC).
WTF,他們聰明到把 Timestamp 藏在一個原本只是為了 Uniqueness (唯一性) 而存在的欄位,不僅因為 Timestamp 本身就具有唯一性,還具有實質上的意義呀!如果我們的 Document 存的是使用者的個人資訊,那你的 ObjectId 本身就代表著這個使用者創立帳號的時間,你就不需要再另外設計一個多餘的欄位來做這件事情,你只要這樣做就可以得到這個資訊:
o.getTimestamp() // ISODate("2012-06-20T03:40:58Z")
是不是很驚人?對我來說,真正驚人的是它背後的設計理念,這就像是 reCaptcha 為 Captcha 附予附加意義一樣,讓原本的惱人的 Captcha 驗証行為變成利用眾人的智慧去辨識無法辨別的古書,改變了原本被視為理所當然的事物,同時也附予其更深層的意義。
這才是所謂的「創新」,在你附予那些被視為理所當然的事物更深層意義之後。
以上就是這次的記錄,下次我們再來更深入了解 MongoDB 吧!
前幾天有個朋友在社團提出了一個有趣的問題:
成大現在成績查詢那邊都沒有GPA的自動計算。要不要來簡單做一個,然後賣回給成大~~~
因為那個時候剛好自己也無聊沒什麼事,又想說很久沒有寫 Chrome Extension 了,就把以前做 FBBK 的東西翻了出來做了些調整,改採 PageAction 的方式去寫這個 Extension,主要的功能就是可以自動幫你把百分制的成績自動計算成 GPA。
NCKU-GPA calculator on Chrome Web Store: Here
不過,原本想說只是快速 Hack 一個 alpha 版本拿來自己用爽就好了,結果誰知道卻遇上了一些問題,多是我以前沒有遇過的有趣問題,所以特別想要在這邊記錄一下。
BTW, Checkout the repository first :]
git checkout git://github.com/EragonJ/NCKU-GPA-calculator.git
我從來沒有想過我在這個世界還會遇到 big5 編碼的網頁,Well,成功大學的成績查詢網頁就是用 big5 編碼的,除此之外,透過 Inspector 的觀察之後,發現它的頁面是透過 POST 的方式,判斷 Client 回傳的 submit1 值來決定是要 Render 哪一個上/下學期的成績資訊。
但是,問題就在這邊,如果觀察它的 submit1 值,從 Inspector 上會看到unable to decode value。舉兩個實際的例子,如果是「0096上」,則它編碼後的結果是「0096%A4W」,如果是「0096下」,則它編碼後的結果會是「0096%A4U」。
問題來了,如果透過 $.ajax 來傳「0096上」這個值回去的話,會發現它編碼後的結果不會是「0096%A4W」,結果我去查了一下 $.ajax的原始碼後,發現它會呼叫 javascript 內的 encodeURIComponent 來做編碼的動作,所以不管如何,單純把值丟入 $.ajax 是一定不會得到期望的結果!
所以…需要在 $.ajax 的 options 做一些調整,那就是設定 processData 這個屬性,這樣不管我們傳什麼值給他,他都不會幫我們再其它額外的動作(例如 encodeURIComponent ),直接把值傳過去。因此,既然我們可以透過這個設定做到我們想要的效果,就要先把「上」、「下」這兩個字做 Replace 的動作,再傳入設定過的 $.ajax 直接把值傳過去,就可以解決這個問題了。
Well,比較值得記錄的就是這個部分。
有點累了,有沒有收假前一晚還在熬夜寫 Blog 的八卦…改天再回來修文字還有補充資訊,先睡了。
當兵也當了快七個月了,截至目前為止,距離退伍也只剩下 109 天的日子了。還記得在當兵之前,我曾暗自在心中許下一個小小的願望:
希望退伍後,我的個性可以還是和當兵前的我一樣,不要有太大的改變。
更確切一點來說,就是保有那一顆赤子之心,對事事懷抱著夢想與樂觀的態度,堅定的朝著偉大的航道前進,尋找那傳說中的「One Piece」。
但,卻沒發現,自己早在潛移默化之中被環境中那無形的氛圍影響了許多,也不再是當初的「我」了。
原來,在一個讓人沮喪的環境下,真的會讓你連做夢的能力都沒有了,爭名、奪利、明爭、暗鬥,簡直就是人性醜陋一面的最佳寫照。其中最讓人無力的,莫過於自己無權改變現況,反被那所謂「國家賦予的階級制度」牽絆,被迫隨波逐流於這場黑暗之中。
何時才有機會,找回那最初逝去的,
赤子之心呢?

因為受人之托,所以這幾天就利用空閒的時間在研究 Blogger 的 Layout Data Tags,而這次主要的問題就是要如何把 Disqus 嵌入在 Blogger theme 裡面,不過因為整個過程發生了一些問題,因此特別做一個記錄。
*我 Blogger 上的主題是:Carmen
一開始當然是先去 Disqus 設定好 Blogger 的相關資訊,然後根據官方的教學,我可以利用它們設計好的一個按鈕來掛載 Disqus(圖如下)

這邊的設計我覺得非常有趣,因為 Blogger 允計開發者以小組件(Widget)的方式快速分享、掛載,而 Disqus 掛載的東西就是一段會直接插入範本(Template)的標記(雖然標記又分 Layouts Widget Tags 及 Layouts Data Tags 兩種,不過彼此都會互相使用到,前者主要是可以和 Widget 做互動、邏輯判斷、以及操縱迴圈,而後者則是可以取得各式各樣你可能會用到的「資料」,例如 Comments / Posts … 等)。

OK,接下來就是一連串的惡夢。
當我安裝好 Disqus Widget 後,我發現 Disqus Comment System 並沒有啟用,還是原本的樣子,所以我就開始很困惑,而透過 Chrome 的 Developer Tool 也沒有發現任何從 Disqus 載入的資源,整個就是相當無奈呀 …
而在經過不斷的碰壁之後,發現 Disqus 有寫一份 Help 可供參考,而文件的內容是一串假設,Disqus 會以這些假設為前提來載入 Comment System,如果有假設不符的話,那就可能是造成它無法正確載入的原因。
看著看著,我發現最後一點和我的情況好像有點衝突,它是這樣寫的:
There is a div with id comments. This is the div that the gadget will use include the Disqus comment embed. Blogger uses this div for its own native comment display. The gadget clears Blogger’s native comments and replaces it with Disqus’s comments …
中文版大意:
有一個 div 的 id 為 ‘comments’,而當 Disqus 掛載 widget 的時候,這個 div 會被用來載入 Disqus 的留言系統。而原本 Blogger 的留言系統也是採用這個 div ,所以當你掛載 Disqus widget 之後,我們會清掉 Blogger 原生的留言系統並取代成 Disqus 的留言系統。
Jesus,就在我爬過了整個 Carmen.xml 之後,我發現問題就真的發生在這個 div 身上,因為 Carmen 在它的 xml 裡面寫了這麼一段 code :
https://gist.github.com/1564894.js?file=gistfile1.html
問題就是出在這個 Template 做了一個很奇怪的設計,它的 #comments DOM 出現的時機竟然是在該篇文章的 Comment 不為零的時候!!所以如果這一篇文章沒有人留言,就不會有 #comments 的出現,又因為沒有 #comments,所以 Disqus 無法載入它們的 Comment System!
What the fuck ???
所以只好直接 Hack Carmen.xml,去 「Blogger >> 設定 >> 文章和留言 >> 留言 >> 留言位置 >> 隱藏」把原生的 Comment System 關掉,然後再另外插入一段 div:
<div class='comments' id='comments'>
如此一來,它可以延續 .class 的樣式,而且又能夠讓 disqus 載入 Comment System,接下來就是要調整如何秀出 Comment Count 。
很簡單,就短短的一行:
<a class='comment-link' expr:href='data:post.url + "#disqus_thread"'/>
但是這一行我搞了好久。
一開始當然也是先參考 Disqus 官方的 Example,之後可以發現 Disqus 會去爬行 Anchor tags,然後找出以「#disqus_thread」結尾的 Anchor 做替換,換成你在 Disqus 設定的 Comment Counts(可以在 Disqus 設定欲呈現的樣式及文字)。
這樣很 OK,離成功不遠了,但,麻煩的是在 Layouts Data Tags …
因為我們知道 Disqus 是利用當下的 URL 當做 Identifier 來判斷要載入相對應的留言串,但是我們要怎麼把當下 Post 的 URL 當做 href 的值塞進 Anchor Tag ?
這邊就要參考 Blogger 的 Layouts Widget Tags 及 Layouts Data Tags 說明。
正如先前我寫的那一段 Code,我們可以利用「expr:href」的方式在 href 中塞值,別小看這個「expr:__HTML_ATTRIBUTE__」,因為官方沒有任何文件有解釋這個語法,我一開始就是因為不知道如何把 Post URL 與 #disqus_thread 這兩個字串串接起來而 Error 很久。
而這個「expr:」全名應該是 Expression,你可以在裡面寫入相關的表達式,以剛剛的 Code 為例,我就可以在經由 expr: 表達的 Attribute 中操縱 Layouts Data Tags,透過 data:post.url 取得該 Post 的 URL,然後再利用「+」串接 #disqus_thread 這個字串以得到最終結果。
不過這邊有一個要注意的,就是如果你要在 expr: 中表示字串的話,要用 " 把它包住(因為已經被 expr: 的「’」 包住一層了,裡面就要跳脫「’」),不然的話會造成 parser 混淆,產生一堆 Error 呀!
以上就是這次為了 Disqus 所玩的 Hacking,如果要說心得的話,就是 Blogger 真的很屌,一個 Template xml 就可以搞定整個主題的樣式,然後搭配 Layouts Widget Tags 及 Layouts Data Tags 就能完成你所有想要做到的事情,雖然所有的東西都要塞到一個 xml 裡面會讓人看的有點難過(真的很髒),不過它也把原本在 WordPress 很不容易做到的事情簡化了許多,讓我覺得 Blogger 真的很用心在做這個事業。
加油!期待 Blogger 有更多令人驚艷的東西 :]

在誠品閒逛的那一個下午,我被封面上老奶奶真誠的微笑吸引而拿起了這本書,等到我再次把它放回去的時候,已經是兩個小時後的事情了。
還記得書上的簡介是這樣子寫的:
為什麼只有一坪,卻年收入三億日幣營業額?
為什麼只賣兩種產品,卻四十年客人每天大排長龍?
其實方法只有一個!一生只做好一個專業!什麼樣的夢幻產品,放在赤道上也不會變質?
什麼樣的店家,讓客人自動自發自組粉絲團,還自訂排隊規則?
什麼樣的味道,讓人念念不忘,至死之前都想再嚐一口?從來沒有145公分的女性在煉製的鍋子場,她是第一位,也是唯一的一位。
年輕時候立志成為一個攝影師,跑新聞拍照,根本不想繼承家業。
但命運在她身上做了決定性的改變,經歷戰後、泡沫經濟,她接下一坪的夢想。每天只熬煮三鍋紅豆,只堅持出品150條夢幻羊羹;
她發現紅豆泥要變成一張紙厚度,達到紫色光芒的最高境界,就像攝影暗房最後出現的顯影,為了等待令人驚奇神聖的一刻,她研究再研究,反覆練習又練習,流汗流淚像在跑百米賽。她更發現要把產品完成,得到客人的心,不是只專注在製作流程上,她還要出去吹吹風,散散步,騎腳踏車,她要感受大自然,她要張開全身五感,才能創造獨一無二的夢幻逸品。
父親對她說,對待客戶和產品都不能低俗,更不能背叛顧客的口味。
祖母對她說,現在慢一點也沒關係,只要記得前進就好。一輩子做好一件事,什麼事都可以!1坪的奇蹟,不是因為創造了傲人營業額,不是因為每天有人大排長龍。
1坪的奇蹟,是她記得祖母的話,決不半途而廢,讓自己有遺憾。
1坪的奇蹟,她提煉無限感謝的心,成就充滿影響力的一生。
其中最令我感到好奇的,就是「一生只做好一個專業」這句話,什麼是指一生只做好一個專業?難道是完完全全把精神和時間都投注在一個領域上面,心無旁鶩的為之付出並放棄其他潛在的興趣嗎?
而當我看完這本書後,先前的疑問也得到了驗証,對作者篤子來說,她想傳達的,就是日本人那種「務實且追求極致的精神」。
這本書有別於平常那些勵志的書籍或是一些創業者成功的故事,它既不強調那些華而不實的數字,也不會只提出一些大家都知道的勵志文句,取而代之的,是她自己的故事,那不斷追求極致之味的過程。
因為這本書有很多有趣的人生故事,我覺得要自己去閱讀才會有所體悟,所以在這,我想要特別點出三個書中影響我很大的看法:

作者有提到一個故事,就是曾經在某一天,有一位特教老師來到了店門口,詢問她有沒有可能可以提供一些機會給這些特教生,讓她們能夠自力自強靠著自己的能力生活、工作。而在一來一往的聊天之中,作者篤子深深的被這位老師的熱情所感動,所以就提供了一個工作機會給特教生ー安美。
也因為這件事情,作者發現其實特教生雖然有一些天生上的障礙,但是他們的工作表現並不會輸給一般人,他們只是需要更多的照顧,以及最重要的一個關鍵,那就是「讚美」。也因為她的執著,她堅持不向政府領取相關的特教補助(日本政府會為那些提供工作機會給特教生的工作環境有所減免及補助),反而還比照一般人的薪資來支薪給這些特教生。她總是認為,如果她領了那個補助,那她對特教生的看法就會因此有所改變,甚至可能有「我已經為他們做了很多了,最後怎樣就不關我的事情了」之類的想法。
也是因為她這樣子的堅持,讓我思考著,如果有一天我也成為了一家企業的領導人,我會不會這樣做?會不會有那樣的胸襟去提供這些機會給這些在社會上更需要幫助的人們?我不知道,但是這個疑問卻也因此在我的心中埋下了種子,也許有朝一日當我有那個能力為這個社會做出奉獻的時候,它會因此悄悄的萌芽吧。

在整本書快要結束的時候,作者篤子提到了她從七十歲開始騎腳踏車上班(約幾十分鐘的腳踏車程),為什麼呢?因為她說當她在用心製作羊羹的時候,需要投注許多精神和體力,而唯有健康的身體及保持對這個大自然的感受,才有辦法做出那真正夢幻級的羊羹,那紅豆綻放出紫色光芒的瞬間。
其實不也是這樣嗎?當我們全心全力為自己深愛的領域付出的時候,是不是也忘了身邊週遭的改變?遺忘了那大自然的美好?所以如果真的可以,當程式的 Bug 解不出來,當工作遇到許多困境的時候,請你大膽的放下它們,走出那狹小的辦公室,打開自己沉悶已久的心胸,用心去感受那大自然的美好。也許就是這樣的一個轉念,一切問題就因此迎刃而解了吧。

這個我自己有很深沉的體會,所以我想從自己的角度來闡述想法。因為自己很喜歡程式這種具有無限可能性的東西,所以總是會想要「做點什麼」,而也是就是因為這樣子的想法,所以很常就去「做了些什麼」。不過當我以一個局外人來審視整個過程,就會發現我只是「為了做而做」,相對的,也因為自己的能力不成氣候,所以做出了一堆不知所云的東西。
有的時候,我覺得我很容易模糊了焦點,重量不重質,也很容易因為外在的誘惑而迷思。相反的,作者篤子就為了好好把羊羹的事業做好,就毅然的把她最喜歡的興趣「攝影」塵封起來,專心做好一個專業。
不過也許是因為我對這個世界的種種事物還充滿著許多好奇,所以還試著在各式各樣的機會當中開發出自己潛在的興趣吧?我真心的期待那花開的一天。
最後,真心的推薦這本書,希望你也能從中得到許多,那些作者篤子試著以她的人生經歷所傳達給我們的理念。
這幾天剛好放假,所以想要來設定一個年度目標,這樣子才有動力試著去完成,因此特別列了一個清單:
因為當兵的時候真的沒有時間可以動到腦袋,大多數的時候我們這些小兵都是在做一些勞力密集的工作,也是因為如此,讓我自己有了「當兵 50 本書」的想法,結果這個想法意外的得到許多人的支持,我在軍中甚至還組了一個小小的讀書會,平時休息的時候就會和幾個三五好友一起相約在餐廳看書。
以下是我的書單及閱讀狀況,會不定期更新:
恐懼炸彈:完 + 心得
富爸爸與窮爸爸(*):完
最貧窮的哈佛女孩:完 + 心得
勇往直前:我如何拯救星巴克:完 + 心得
商週的賈伯斯特刊:完
真情書:完
賈伯斯傳:
駭客迷宮:完 + 心得
牧羊少年的奇幻之旅(*):
我的天才夢(*):
桂花巷(*):
鄉民都來了:無組織的組織力量:
一口氣讀懂經濟指標:
教育應該不一樣:完
Peopleware–人月神話(*):
Youtube 你的熱情和直覺:完
1坪的奇蹟:完
雖然大部分的目標都很難以用文字說明我的想法,也有可能是因為它們大多是一個籠統的概念,但是只有記錄下來並執行它,才會因此使自己前進。
希望在 2012 年尾世界沒有爆炸之際,我可以完成大部分的目標,加油!