Fred's blog

每個月舉辦的台灣黑客松（Hackathon Taiwan），第四屆活動順利落幕！感謝大家的支持！無論你碰上什麼樣的隊友，有沒有完成作品，下次都歡迎再來！ 曾幾何時，許多人對黑客松活動已經感到麻痺，似乎就是一群躲在暗處的宅宅工程師聚集起來自我感覺良好的場合，不然就是許多新創團隊前來展示產品的地方。往往沒有機緣巧合參與的人，總是深怕自己能力不足而無法參與，也有人覺得來這裡看別人發表產品，相當無趣。人們逐漸忘了黑客松的原本出發點，也忘了捲起袖子動手的熱情，更忘了與人交流並相互扶持學習的愉悅。 事實上，一個在大家心目中理想的黑客松，不外乎就是有得玩、有得學、有得做、有得交流，最後，能上台展示自我並取得成就感。這樣的氛圍，不同於補習班，也不同於一般制式學校，因為沒有成績壓力、沒有世俗壓力、更沒有人干預你，這更像是一個大學校園，參與者就在這樣的環境中自由發展，盡情做自己覺得有趣的事。 也許是教育體制的問題，也許是歷史文化所致，我們從小就沒有太多自由發展的機會，這讓不少人很晚才找到了自己的興趣。而進入社會後，缺少發自內心驅動的職場生活，讓更多人被生活所困，只能被世界及國內潮流被動的推著往前。我們有多久，沒有因學習新事物而開心？我們有多久，沒有因為與同伴們完成共同目標而感到興奮？那些再簡單不過的樂事，變成是種奢望。 這也是為什麼，我們發起了這樣的黑客松活動，試圖喚起人們的童趣以及熱情，讓人們在這找回自我學習的熱誠，以及團隊合作的心情，更重要的是，能夠學習如何貢獻並展現自己。在我們的活動中，無論結果的作品如何，這些種種對一個好的人才來說，都是不可或缺的要素。因為我們認為，台灣的人才素質普遍不錯，只是尚未有好的方法展示出來，並引出其真正價值而已。 共同持續參與，並逐漸改變這個社會氛圍，在這我們看見了人才們發光，也看見這片土地的希望。如果你問我說台灣黑客松每屆的活動能留下什麼？我會說，別的黑客松我不知道，但我知道我們的活動，讓人們帶回去的是提升後的自己與改變產業、社會的動力。 也許你沒發現，但經歷過這一切後，你已經不一樣了。 後記 不同於普通的活動，籌劃黑客松更為累人，除了要照顧的是兩天一夜的會眾，還要規劃各類課程與營造氛圍，更不能為了財務壓力下與中心思想背道而馳，複雜程度完全不可同日而語。 可愛的是，我們的參與者都是發自內心的願意主動參與，...

io.js 不做任何設定下，預設支援了一些 ECMAScript 6 的語法，其中包括一系列的 Collection 支援，這讓 JavaScript 在資料操作上多了一些方便之處。本文將討論到的 Set 物件，就是其中一個 Collection 類別。 簡單來說，Set 是一個類似 Array 的物件型態，可以用於處理有序的資料，而且內建迭代器（Iterator：在某些應用上同樣功能也會稱之游標 Cursor），讓開發者可以很容易對資料進行一筆筆的處理。 基本操作 基本的 Set 物件使用很簡單，如下所示： // 建立一個新的 Set var items = new Set(); // 依序加入資料 items.add('Fred'); items.add('Stacy'); items.add('Wesley'); items.add('Rance'); items.add('Kevin'); items.add('Alex'); // 依序印出 Set 物件內的所有資料 for (var item of items) {     console.log(item); } 比較特別的是，如果要依序印出 Set 物件內的所有資料，需要使用『of』這個關鍵字。原因是 Set 物件本身是一個 Generator 實作所致，如果我們想要一次把 Generator 內的工作跑完，需要運用 for-loop 加上 of 關鍵字來達成。 註：關於 Generator 與 of 關鍵字，日後有空再撰文說明其細節。總之，只要記得必須使用 of 關鍵字才能一一讀取 Set 物件內的資料，就像 Array 的 for-loop 加上 in 關鍵字。 刪除資料 刪除特定資料可以使用 remove() 方法來達成，如下所示： items.remove('Wesley'); 若是要清空資料，可以使用 clear() 方法： items.clear(); 檢查資料是否存在 我們可以直接利用 has() 方法檢查特定資料是否存在： items.has('Rance'); 迭代器（Iterator）的使用 Set 的迭代器是圍繞著 Generato...

io.js 最大的特色，就是採用了最新的 V8 ，而且直接支援了 ECMAScript 6 的語法和特性，其中一項就是文字範本（Template Literals）的支援。這代表我們可以很容易在字串中代入其他的變數內容，就像一般的 Shell Script 一般，不必再像從前的方式，使用串接字串的方式達成。 如果想要使用這樣的文字範本（Template Literals），可以直接使用 ${} 來代入其他變數，然後以『`』字元將字串包起來，然後就可以將指定的變數內容代入到字串中： var name = 'Fred'; var stringTemplate = `Hi, I am ${name}!`; console.log(stringTemplate); 接著，如果你使用 io.js 來執行，就可以得到下列結果： Hi, I am Fred!

人才培育與還原、體現並轉化人才原始價值是我們的目標，這也是目前台灣產業界應該要努力的方向，所以我們希望組織 Hackathon 活動來達成這樣人才拓撲的願景。 我們認為，黑客松的精神與文化需要被好好培養，也需要藉由持續且長久經營才會有意義，其體現的結果不只是聚在一起這樣簡單，而是動嘴、動手還要動腦的交流。因此，在大夥努力之下，Hackathon Taiwan 今年的黑客松計畫已確定，從這個月底開始，將每個月最少舉辦一次黑客松活動，年底前達成千人黑客松！（握拳） 希望藉由黑客文化中親自動手的精神，將不同領域的人才收集起來，並長期持續提供創作氛圍，使參與者相互間產生巨大的化學反應，使創新的可能性有脈絡可循。也期待能將許多具有潛力但不得其門而入的人們，引導進入到這樣熱血的世界，累積更多經驗值。 這樣的目標並不容易達成，自去年幾次的黑客松活動開始，從慘兮兮的幾個人，一直到現在的百人活動，各方面缺失逐漸補強完備，這途中經歷過許多困難，夥伴們也自掏了不少腰包，好不容易才得以存活並開始快速成長。感謝一些企業們的長期關注與投資，以及貴人大力相助，使我們陸續找到可以支撐整個計畫的資源、場地與合作機會，相信今年會是起飛的一年！ 今年才剛開始，我們仍有很多事要做，也需要更多的資源與贊助，以及工作人員，畢竟，每個月都要籌劃一場數百人、至上千人齊聚一堂『微創業』的黑客松活動，實屬不易。所以，如果您願意支持並協助我們，請務必與我們聯絡！ 我們也歡迎學生或各種單位與我們合作舉辦活動，相互連結，共享成果。如果你想在學校推廣黑客松，也歡迎加入我們的團隊，或與我們一同籌劃。 期許，我們從這個土地上出發，立足在這個現今世界的核心位置上，能使信念綿延拓撲到全亞洲，甚至是全世界，讓此地變成人才們的朝聖之地。:-) 更多資訊，歡迎參考 Hackathon Taiwan 的官方網站： http://hackathon.tw/

Koa 採用了 Generator 來控制非同步流程，所以在採用 Koa 的程式碼上，我們會看到很多 yield 關鍵字的出現。某程度來說，Generator 讓程式碼變得乾淨許多，也平坦許多，比較少出現太複雜的 Callback 高山。這對 JavaScript 來說是件不錯的事，只是，對很多開發者來說，需要點時間熟悉其概念。 總而言之，所有 yield 的關鍵字，一定只會出現在 Generator 當中，而一個 Generator 長得會是一個以『*』符號開頭的函數模樣： function *() {     // 工作流程 } 所以若是你仔細觀察，就會發現 Koa 的路由處理，採用的不是 callback 來處理客戶端要求，而是 Generator： router.get('/test', function *() {     // 處理客戶端要求的工作 }); 其實不久前，舊文『 如何於 KOA 實作長輪詢（LONG-POLLING）機制 』已提及怎麼來掌控 Koa 的流程，雖然只是簡單提及，但已經大略展示其使用方法。簡單來說，你可以當作這個 Generator 結束後，與客戶端的連線就會結束，所以我們如果要處理非同步的工作，也必須避免和阻止這個 Generator 執行完。 使用 yield 控制 Generator 的流程 為了阻止 Generator 一下就跑完，我們會使用 yield 方法來暫停 Generator 的執行，並等待一個需要花時間的非同步工作完成。如果你對舊文的內容有印象就會知道，想要使用 yield 在 Koa 中去呼叫一個非同步機制，就需要設計一個特別的函數，其函數有一個 callback，當這個 callback 被呼叫時，代表工作完成。 如下面範例就是想要執行一個非同步函數 setTimeout()，並等待其執行完成。在這範例中，我們加上了 console.log() 印出 START 和 END 字串，便於觀察其行為： router.get('/test', function *() {     console.log('START');     // 暫停 Generator 並等待工作完成     y...

io.js 的到來以及即將釋出的 Node.js v0.12，意味著我們不能再忽視 ECMAScript 6 的存在，更代表著 Koa Web Framework 開始要正式進入到市場了（如果你對 Koa 有興趣，可以參考『 舊文 』的簡報內容，有說明完整的開發方法，也有說明 Generator 的使用方法）。Koa 大量運用到 ECMAScript 6 新的 Generator 支援，簡化了非同步的機制，更減少了 Callback 的使用場景。 平心而論，Generator 的機制對許多 JavaScript 開發者確是一個不小的門檻，與舊有的習慣格格不入，需要一點時間學習及熟悉。如果你還不熟悉其機制的細節，不如先學習一些習慣的使用，這是一個比較快能上手的方式。所以，我們可以試著來實作 Long-polling（長輪詢）機制，理解如何運用 Generator 在 Koa 中進行非同步的實作。 若開發 Web 應用涉及了即時的需求，不免碰到 Long-polling（長輪詢）的機制， Long-polling（長輪詢）簡單來說，就是讓伺服器可以即時通知客戶端有資料要進行傳送，常被用在聊天室、即時通知訊息等應用，如 Facebook 的訊息通知機制，就是採用這樣的方式。 Long-polling（長輪詢）的運行原理，就是讓客戶端向伺服器要求新的資料，但取得資料後雙方都不中止連線，等到伺服器有資料要通知客戶端時才將連線中斷，而客戶端就知道有新資料要接收，重新建立一次連線以取得新資料，然後又再次保持連線不中斷，等待下次通知。 暸解了原理，我們就可以開始實作伺服器的部分。首先，假設我們現在有一個事件發送器，每次有資料更新，就會觸發一次事件。如下範例，是每秒鐘更新一次資料： // 建立一個事件發送器 var dispatcher = new events.EventEmitter(); var num = 0; setInterval(function() {     // 將 num 加一，更新資料     num++;     // 通知所有客戶端資料有更新     dispatcher.emit('update'); }, 1000); 如果是 Express，若要實...

如果你有關注這兩個月 Node.js 的發展，就會發現一些大變動，尤其在最近半路殺出了一個名為 io.js 的 Application Framework，其來勢洶洶朝著 Node.js 而來。於是，很多人看糊塗了，開始搞不清楚兩者的關係，甚至以為他是一個全新的技術。事實上，一切緣由皆由 Node.js 而起，這是起圈內的八卦事件，當然，我們也可以將其看作是社群對把持開放原始碼專案的商業團體，進行的抗議行動。 io.js 的官方網站： https://iojs.org 由於 Node.js 的發展日益興旺，掌握著 Node.js 的發展進度就代表掌握著利益，所以 Joyent 開始掌控著 Node.js 的開發進度。縱使 Node.js 有著開放原始碼社群，也有著許多貢獻者，但新版本的釋出一直受到 Joyent 的掌控，最讓社群不滿的是 v0.10 版之後，已經快兩年沒有發佈新的穩定版本。這意味著，無論社群絞盡腦汁去協助開發 Node.js，成果永遠無法面市，也意味著大家所期待的 ECMAScript 6，遲遲無法在 Node.js 上被支援。 終於，社群等不下去了，在 2014 年底發起新的計劃 io.js ，試圖 fork 原本的 Node.js 專案，目標是如果 Joyent 遲遲不發佈 v0.12 版的 Node.js，就打算自己動手。這個 io.js 的新專案，緊鑼密鼓的展開，吸引了許多開發者的關注及加入，不到兩個月的時間，在 2015 年 1 月中推出了 io.js v1.0.0 的版本，並且打算加緊步調，讓開發與發布週期更為密集。 其實，我們可以將 io.js 的 v1.0 版視為 Node.js v0.12 版，它們本質上是一樣的東西，所以 io.js 也可以支援 NPM，有著一樣的使用方式、API 和架構設計，更相容於 Node.js v0.11 及未來的 v0.12。這代表，原本以 Node.js 所開發的應用程式，理論上都可以正常以 io.js 執行。 至於未來 io.js 是否會將 Node.js 取代呢？我們拭目以待。

寫書寫到通訊協定一章，就想起今年來台灣 JSDC 的 Mathias，在台上展示以 Node.js 開發的 Bittorrent 影片下載工具『peerflix』，該工具可以結合 vlc、mplayer 這類的播放器進行 BT 種子的影片播放，相當有趣。此外，他亦展示了使用 VirtualBox 直接開 BT 上的 Ubuntu 安裝ISO 檔的實作。 很多人都說很神、很有趣，但看完後不見得會去了解實作細節。有些人更覺得這是他們無法碰觸的領域，只是當一個神在展示他的神力而已。這樣的情況，讓我感到難過，因為很多這樣的技術細節並不難，除了 bittorrent 本身的演算法本身的實作，或是開發其 Binding 是有困難度之外，其餘的東西根本上都是相當簡單的概念。 我想，這樣並不困難的東西，如果不去解析或了解它，實在是可惜了 JavaScript 至今的發展。 事實上， bittorrent client 的 binding 早有人開發出來並寫成模組。我們只需要使用種子檔案或是 magnet link，就可以透過 binding 去取得檔案資料，甚至是特定段落的資料，就像我們實作 HTTP 續傳那樣簡單，只需指定資料的開始處而已，全都有現成的 API 可使用。 若要播放這些影片內容，只需要建立一個 HTTP Server，再將從 bittorrent 下載完成的影片資料檔，運用 Stream 的技巧導向 HTTP 輸出即可。實作到此，我們就可以透過支援 HTML5 Video 的瀏覽器或是其他支援串流的多媒體播放器，以 HTTP URL 打開影片觀看。 至於 VirtualBox 怎麼去開啟 bittorrent 上的 ISO 檔，然後讀到哪載到哪的技術，其實也不是非常難，運用 Linux/BSD(Mac OS) 上的 FUSE（Filesystem in Userspace）的技術即可達成。雖然這是熟悉系統開發才會知道的技術，但概念與開發上其實並不難，尤其是也有人寫了 Node.js binding，我們可以完全使用 JavaScript 輕易實作。 簡單來說，使用 FUSE，可以讓我們不必觸碰到作業系統核心的驅動程式技術，就可以開發一個自己的檔案系統。然後，我們可以把自己實作的檔案系統掛載到一個本機目錄上。這代表...

很開心，這次十二月的『 Hackathon Taiwan 』相當多人參與，百人的報到數讓所有工作人員都感到興奮。最重要的，多虧了活動夥伴的遊戲設計，這次讓很多隻身而來的人，化解尷尬、相互認識並熱絡起來，最後順利組成隊伍，這算是種格外特別的創舉，過去很少有黑客松能做到這樣的地步。 有趣的是，這次活動找來了重量級的神秘講師 Jeremy Lu （對，就是那位最近紅極一時的 React.js 講者）開課，讓聽眾大飽耳福，絕對不枉來這一趟。有很多人也衝著 Qt 的課程而來，學習 QML 這樣先進的 UI 技術，這次的 QML 遊戲開發課程，相信讓很多人也開心地學會很多技術。 小弟在第二天的結尾，也給了篇一小時的分享『Koa 正在等一個人』，其內容在探討並帶領上手 Koa 這個下一代的網站框架、ECMAScript 6 Generator，以及 Node.js 和 io.js 的最新動態。（事實上是把最近將要出的書，擷取片段內容出來分享） 後記 對於我而言，活動內容再豐富，都比不上找到了好隊友可以一起創作。這次活動，得到了一個硬體工程師加入我們的團隊，所以可以開始進行硬體設計及控制等工作，而且大家相約了下次一起再來。下次，我們將會開始進行各種智慧家電的控制，以及 IoT 的相關應用。看來，我們只差一個設計師的加入了！如果你有興趣，快來加入我們！:-D 下次黑客松活動預計將於 2015 年 1/31、2/1（六、日）兩天，無論你是軟體開發者、硬體開發者、設計師還是學生，都歡迎來參加！而且，一樣會有神秘講師！

在國內，很多人或許對 Qt 很陌生，但這一直是筆者近年來想要推廣的技術，尤其是 QML 這個自 Qt Project 衍生出來的新 UI 技術，更讓人著迷。具有原生效能和擁有炫麗效果的 QML ，確實是一個打造產品的好東西，如大家近來所聽到的 Tesla 汽車、Jolla 手機等，其 UI 就是使用 QML 所開發。當然，之前舊文章中所展示的 UI 和介面，以及能跑在 Android 手機上的 OwaNEXT，也有不少是結合 QML 技術所開發。 推廣過程中總有人質疑，覺得 QML 不是一個設計師能學會的東西。事實上，它的語法相當簡單且模組化，所以也聽聞一些國外的設計公司，其設計師都直接用 QML 做出 UI ，再交給工程師去接上功能。這也是為什麼 HanGee 國民機在開發手機和各種裝置的 UI 時，要選用 QML 為底層的原因了。 因此，筆者自己的公司最近也在籌備許多課程和分享，也與許多朋友成立了一些社群（你可以在 Facebook 加入我們的 Qt @ Taiwan 社群），並設計開發一些相關的工具，以協助更多人能更快速進入到 QML 的世界。不過，因為 UI 與設計師更密切相關，近期應該會針對不懂技術的設計師，推出許多相關的 UI 開發課程。（如果你對這樣的技術有興趣，歡迎與我們聯絡） 其實，這次的黑客松活動與 HanGee 社群合作開設 QML 課程就是一個嘗試，也想收集一些 Qt/QML 初入門者狀況和資料。其中發現一個最大的問題是，無論是技術還非技術人員（如設計師），在安裝 Qt 時就會碰到各種狀況，而且 Qt 開發環境因為功能繁複且龐大，安裝一整套下來要花上不少時間，在學習上也就是一個阻礙。這對技術人員來說，可能不是什麼大問題，但這對設計師來說，就是一個極大的挫折。 因此，我們、講師和 HanGee 社群合作，開發了一個新的工具『OwaViewer』。原本這個工具只是被設計來開發 HanGee 手機介面，但現在可以用來讀取和執行一般的 QML 檔案。這意味著，你再也不需要安裝 Qt 和學習一堆知識，就可以使用 QML 開發使用者介面了，也可以很容易提供一個成果給客戶直接操作，這對許多設計師來說應該是個好消息。 OwaViewer 是個 Open Source Proje...

雖然自己從小喜愛設計，殘害過不少紙筆和滑鼠，但也因為懶惰和時間有限，長大後開始比較少開始動手自己做一些設計。所以，除了突然有一些想法和點子之外，多數時候都會把『設計』這件事推給『設計師』來做，講好聽點叫術業有專攻，講不好聽點就是有想法卻不行動的懶惰派。 如許多人所知，我這幾年一直都在做 JavaScript OS 的開發，嘗試把 JavaScript 應用在各種大大小小的硬體和裝置之中，使嵌入式應用的開發工作更有效率和彈性。又由於這一年來物聯網（IoT）的風潮大爆發，也因此有更多人使用 JavaScript 為基礎的開發，或是形形色色的跨界需求，讓我需要更多時間和金錢去投入這些發展。 不過人總是視覺化的動物，任各種應用發展再多，眼睛看得到的 UI 仍不能缺少。開發的過程中，難免會有一些『有螢幕』的應用。這也是為什麼這幾個月 HanGee 國民機一直在做『OwaNEXT』這樣的 UI 設計工具，而我最近也時常去思考一些 UI 的設計。 如下面展示影片，就是最近這幾周所嘗試開發出來的一個 UI 選單介面概念原型，雖然說是概念原型，但實際上是可以使用的程式，不是一個純展示動畫（畢竟我仍然是一個程式開發者 :-D）。這個 UI 因為是設計給大尺寸螢幕所用，所以是用『Everywhere』為出發點，讓人可以在任何一個地方憑空叫出選單，效果和使用方法都是以一個手掌可掌控為目標： 話說，我一直都不是個走純 Web 路線的開發者，過去有好幾年完不碰 Web 開發，只因為當時 JavaScript 和瀏覽器的效能和效果讓我很不滿意，然後也發現因為太依賴瀏覽器，讓自己的視野窄了許多。也許是因為這樣，這些年許多從前端所發起的各種 UI 設計討論，我沒有接觸太多，也沒有被同化成一份子。 所以，大家在前端很熟悉的 UI 切版、排版等等平常再不過的工作，對我來說反而都是可以再思考和需要再質疑的東西，也仍然保留著強烈的好奇心和探索的意圖。所以最近一直在思考設計 UI 時，一直在想『跳脫出 2D 排版的思維』這個議題。 不知道是因為工具的關係，還是設計方法的關係，現今的 UI 設計，總跳脫不出平面排版的框框，這個東西擺左邊一點、擺高一點、放大一點等等修改，一直是現今許多 UI 設計的討論重點。很少聽到在討論，這個速度要慢一點、緩一點、從哪開始、又從哪定位。 ...

不用覺得奇怪，Hankathon 沒有拼錯，這是取自 HanGee + Hackathon 的命名。是這次為了 9/20 - 9/21 兩天的 HanGee Hackathon 活動，設計的一個騷包倒數計時器，也是我在邊辦活動邊做的成果之一，用來提醒眾參加者們，時間正在毫不留情的流逝！ Source Code:  https://github.com/HanGee/Hankathon 如果你的黑客松、活動需要用到這個倒數計時器，歡迎取用！也歡迎修改成你想要的功能！只是，如果可以的話，麻煩留下蕃薯的小圖，協助讓 HanGee 亮點像吧！:-) 後記 這次的黑客松活動，就在經歷過兩天美好的夜景、日出景色，最後經歷颱風大雨的情境下落幕。雖然中間出了一些烏龍，仍有一些朋友們沒有被好好照顧到，但都在歡樂的氣氛下和滿滿的產出中結束。下我們肯定會再次舉辦，讓更多無論有沒有資身技術背景的朋友，都能夠共同參與並學到東西和經驗回家。:-D 此外，如果有社群或企業想要一同舉行下次的 Hackathon，歡迎連絡我們！