「布丁布丁吃什麼？」在GitHub上開放原始碼囉！ / My Blog is now open source on GitHub!
「布丁布丁吃什麼？」這個Blog最大的特徵就在於網站上有著許多奇奇怪怪的小功能。從側邊欄上的「最近留言」、「最新文章」、「留言板」，到文章本身的「自動摘要法」、「圖片延遲載入」等各種小工具，都是Blogger沒有提供、我參考別人的寫法或自己撰寫而成的功能。
現在這些程式碼統一保存在GitHub上進行版本控制。對於改造Blogger有興趣的朋友、JavaScript或CSS有興趣的朋友，歡迎參考我的程式碼，彼此多多切磋交流吧。
Welcome to Pulipuli.blogspot.tw. My blog has many features which are not provided by Blogger, for examples, like “recent response list”, “recent post list”, “post auto digest”, etc.. Today, I released the code of these features on GitHub. You can use them freely. Enjoy it!
存放空間的遷移歷程 / History of Code Hosting
說真的，「布丁布丁吃什麼？」很早之前就是Open Source了。除了Blogger內建功能之外，大部分功能都是以JavaScript與CSS的程式碼來實作。這些程式碼本身都是必須讓你下載之後才能執行，換句話說，這些功能本身就是「開放」的程式碼了。
那麼這些程式碼是存在哪裡呢？這邊我就在簡單的回顧中記錄一下「布丁布丁吃什麼？」的這段歷史吧。
Google Page Creator
我印象中「布丁布丁吃？」時期一開始的時候，我是將程式碼擺放在Google Page Creator中。Page Creator是Google早期供人架站的空間。雖然它只有提供100MB的大小，在流量上也有諸多限制，但是擺放我這種小流量Blog使用的JavaScript與CSS程式碼已經很夠用了。
不過老實說它不太好用，沒有目錄功能（因為Page Creator是用來建立網頁、而不是網站），上傳介面也很難操作。幾年之後，Page Creator被關閉，成為歷史名詞。而原本在Page Creator上的程式碼則是被轉換到Google協作平台上繼續運作。
Google Sites協作平台
由於Google Page Creator被關閉，我的程式碼就順勢移到了Google協作平台上，叫做「布丁布丁吃？」wiki。協作平台搭上了當時流行的wiki風格，讓人容易在網頁上建立資料，也允許更複雜的網站架構。
協作平台是個穩定的架站空間，我一樣把它用來存放JavaScript與CSS程式碼。受惠於協作平台的功能，我可以將程式碼分門別類，每次上傳檔案也會記錄不同的版本。在「布丁布丁吃什麼？」介紹的功能中，有些是獨立出來讓讀者安裝使用的程式碼，這些程式碼就會放在協作平台中，跟「布丁布丁吃什麼？」專用程式碼分開保存。
可惜的是，協作平台的上傳功能依然很難用。點開網頁、選擇檔案、上傳的這幾個步驟雖然看起來很簡單，但是時常修改程式碼的話，這些步驟依然是相當地煩人啊！
Dropbox
「布丁布丁吃什麼？」的程式碼中，給讀者使用的程式碼是放在協作平台，而現在你所看到「布丁布丁吃什麼？」專用的JavaScript與CSS程式碼其實是架設在Dropbox的公開資料夾Public底下。
知名雲端硬碟Dropbox早在很久之前就提供了架站空間的功能，你可以把網頁程式碼放在公開資料夾上供他人瀏覽，也可以用DropPages之類的第三方應用輕易地架起專業網站。
雖然我的網頁內容寫在Blogger上，不過JavaScript與CSS卻也可以放在Dropbox中。我這次搭配Directory Junction整合了Aptana Studio 2 IDE與本機端XAMPP伺服器的運作環境。我不僅能在本機端開發與測試「布丁布丁吃什麼？」，也能夠用簡單地幾個步驟就能夠將JavaScript與CSS進行壓縮、上傳到Dropbox公開資料夾。
如果你對Dropbox有興趣的話，歡迎使用我的推薦連結來註冊Dropbox，順便幫我增加一點空間吧！
GitHub
Dropbox提供了我的程式碼穩定的運作環境，而GitHub則是提供了查看我的程式碼的社交平台。
之前我開始研究起GitHub，這是因為最近看到幾篇新聞都在討論GitHub。GitHub是許多開放原始碼專案存放的保存庫，近年來也逐漸成為公司招聘程式設計師的管道。因為公司能在GitHub上看到每個人實際上寫的程式碼，而不是像LinkedIn只能看到幾行經歷。
雖然說光看程式碼也不見得夠看到實際上運作的平台，就像是「布丁布丁吃什麼？」的GitHub也是要搭配Blogger才能運作，不過光是為這個社群貢獻程式碼的精神，我覺得就具有令人值得去做的意義。
我想藉由「布丁布丁吃什麼？」的程式撰寫來練習GitHub與Git的用法，這也是「布丁布丁吃什麼？」作為讓我實驗程式碼的用途之一啊。
近期「布丁布丁吃什麼？」的調整 / Recent Changes in Pulipuli.blogspot.tw
除了用GitHub與Dropbox改進「布丁布丁吃什麼？」的功能調整流程之外，最近也做了幾個小地方的修改。
英文標題與摘要 / Writing Title and Abstract in English
作為博士生，英文寫作是必須要去面對的課題。我希望能夠在日常生活中就常常使用英文來寫作，所以現在就從寫Blog開始。我寫的英文應該會有很多錯誤，歡迎大家用留言回覆來幫我糾正一下喔！
至於為什麼只有標題跟摘要是英文，這是因為光是寫標題跟摘要就花了好多時間，等更能上手之後再來考慮全英文的Blog吧。不過我寫這Blog一部分就是為了給華人地區的讀者看，所以仍然會以中文版本為主喔！
QR Code
有人發現到了嗎？這是今天才剛出來的新功能喔！「布丁布丁吃什麼？」每篇全文文章最後都加上了QR Code的名片，讓讀者方便知道這篇文章的來源。
對我來說，因為我很常查閱「布丁布丁吃什麼？」的文章，有時候在電腦上看一看想要轉移到手機上的時候，在手機輸入網址總是太過麻煩。現在我只要在手機上用QR Code Scanner之類的App掃描一下QR Code，就能在手機上直接開啟文章內容喔！
在列印的時候，也會出現這個名片的樣子。就算將「布丁布丁吃什麼？」印成紙本，也能夠透過QR Code方便地回到網頁上喔。
這個功能是以jquery.qrcode.js為基礎，我自己建立了它的分支並進行改造，在加上適用於Blogger環境的包裝器(wrapper)來實作。如果有人也想要安裝QR Code到你的Blogger的話，請回覆在下面，我有時間會再另外寫一篇QR Code的安裝教學。
結語 / Conclusion
藉著調整Blog的契機，這篇介紹了「布丁布丁吃什麼？」的JavaScript與CSS原始碼存放空間選擇的歷程，目前是用以下規則來擺放程式碼：
- 「布丁布丁吃什麼？」專用程式碼存放在Dropbox、公開在GitHub。
- 供讀者使用的部分功能存放在Google協作平台。
然後聊了一下最近「布丁布丁吃什麼？」的變動，也順便宣傳自己加入的QR Code功能。
最後我想閒聊一下QR Code。我認為QR Code不僅僅只是讓人在廣告上開啟網頁而已，它可以是連結實體與數位（從印出紙本開啟Blog）、數位到數位（從螢幕掃描到手機），也可以藉由加入特殊參數讓它用於開啟指定的應用程式。而這個簡單的轉換，卻能夠連結不同時空的人與物。
想像一下，公車的乘客不需要在座椅上塗鴉了。他們可以掃描這台公車專屬的QR Code，然後在這台公車專屬的線上討論版聊天；圖書館的讀者不僅僅是在書上從別人的筆記來認識與這本書內容相關的事情，他能掃描QR Code來到這本書專屬網站上來取得相關資訊，更能在討論版上認識同樣閱讀這本書的愛書者。
QR Code只是簡單的技術，重點在於要如何應用。這也是我們作為研究者應該去思考的問題。共勉之。
