Amo Wu's Blog

今天想要跟大家聊聊 Web Components 這個新玩具，說是新玩具，其實這個概念已經發展有段時間了，尤其筆者本身是玩 Flash 技術出身的，發現 Web Components 跟 Flex Component 差不多，所以就來分享一些心得。 Web Components 是什麼? 簡單來講就是你可以客制化 HTML <tag>。 <my-component></my-component> 由 W3C 提出： The component model for the Web. When used in combination, Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today. 使用 Web Components 有什麼好處? 鉴于许多Web框架通过暴露JavaScript API来构建用户界面，而构建用户界面实际上就是生成一堆div和spans标记，Web 组件是原生浏览器的解决方案因此不依赖于一个完整的框架。因此，与现在的一般依赖某个Javscript框架的HTML组件相比，Web组件希望能减少碎片。 最近新起許多 MDV (Model-driven-view) 這類 template 和 data binding 開發方式的框架 (backbone, angular, ember..)， 那 Web Components 跟這些框架有什麼不同呢? 基本上就是希望藉由規格標準化，讓 Web application 的開發方式與架構更清晰。 Web Components 的瀏覽器支援情況? 尽管Web组件是一项有趣的新技术，但在浏览器们都支持它们（并且大部分用户都开始使用这些浏览器们）之前，其中的大部分功能还派不上用场。解决这个问题的一种方法是使用polyfills。 很遺憾，目前的瀏覽器普遍都還不支...

這個月把網站從 Amazon EC2 搬回自己的 server, 目前整個環境是 Linux(Ubuntu) + Apache + Ruby on Rails 在跑, 筆記一下從無到有的配置方法: Install VirtualBox 虛擬主機, 另一個較有名的是 VMWare , 這裡是選用 VirtualBox 4.2.12 作 host. 安裝之後設定一下配置, 大部份都用預設的就可以, 比較不一樣的地方有, 記憶體 1024 MB, 網路使用 橋接界面卡 的方式, 這樣可以在虛擬 OS 內連線取得固定 IP, 這對使用自有網址來架設網站是很重要的. Install Ubuntu 下載 Ubuntu 最新版本, 這裡使用 13.04, 然後將映像擋掛載在 VirtualBox 後啟動, 照指示一步一步安裝. 安裝完成後, 記得先把系統更新裝一裝, 之後執行: $ sudo apt-get update $ sudo apt-get upgrade Install SSH 安裝完 ubuntu 後, 為了之後能遠端操作 server, 所以接著安裝 SSH: $ sudo apt-get install openssh-server $ ssh-keygen -t rsa $ scp .ssh/id_rsa.pub SERVER_HOST_NAME:~/.ssh/ $ cat .ssh/id_rsa.pub >> .ssh/authorized_keys 註: 第 2-4 步是為了之後登入 server 可以不用打密碼. 註: 第 3 步的 SERVER_HOST_NAME 記得換成自己的網址或 IP. Install vim 接著是安裝 vim, 為了之後能在 terminal 上直接編輯文字檔案 or code: $ sudo apt-get remove vim-tiny $ sudo apt-get install vim Install Git 版本控制, 因為之後部署網站都是直接從 GitHub 拉下來, 所以需要安裝 Git: $ sudo apt-get install -y git-core 如果需要使用到 GitHub SSH 的話請參考這篇: Gener...

如何寫一個 Ardiono Library ? 假設要寫一個摩斯密碼(telegraph)的 library. 先在 Arduino 目錄底下(預設是 /Users/XXX/Documents/Arduino )建立一個 libraries 資料夾. 建立一個資料夾取名為 Telegraph . 建立 Telegraph.h : #ifndef Telegraph_h #define Telegraph_h class Telegraph { public: Telegraph(); void send_message(const char* message); // 要公開給別人使用的 method. private: ... }; #endif 建立 Telegraph.cpp (舊版使用 WProgram.g , 新版使用 Arduino.h ): #if defined(ARDUINO) && ARDUINO >= 100 #include "Arduino.h" #else #include "WProgram.h" #endif #include "Telegraph.h" Telegraph::Telegraph() { ... } void Telegraph::send_message(const char* message) { ... } 到這邊基本上已經寫好一個 library 了, 接下來開啟一個新的 Ardiono 專案來使用: #include <Telegraph.h> Telegraph telegraph(); void setup() {} void loop() { telegraph.send_message("Hello world"); } 更多詳細的範例原始碼可以參考這個 GitHub repository .

說來慚愧, 去年才知道有 Arduino 這麼好玩的東西, 連國外小朋友都知道它有多火紅! (不過最近好像是某樹莓派比較牛) 好歹以前也是電子相關科系的, 想說入門應該不難, 回老家把塵封已久的高職工具包翻出來, 今年要試作一隻簡單的機器人!! 既然決心已定, 就開始做一些行前準備, 買了幾本書跟一些工具來練習: Arduino快速上手指南 Prototyping Lab「邊做邊學」Arduino的運用實例 Make 由馥林文化代理出版, 國際中文版的雜誌, 一季一期, 訂閱一年約一千台幣, 裡面的內容很豐富, 強力推薦! 入門工具包 雖然自己有一些零件, 但是要能完成書上的作品還是有缺, 所以買了一個簡單的工具組合, 基本上拍賣網站都能找到, 價格大約都在一千元台幣上下. 猜數字遊戲 這是我的第一個實作, 也是 Arduino快速上手指南 的第一章, 主要的玩法是先用第一顆按鈕按出你要猜的數字, LED 會以二進位的方式顯示, 決定後再按下另外一顆按鈕, Arduino 會隨機產生一組數字, 如果玩家猜中的話, LED 燈就會閃爍. 這個小電路做完後基本上可以了解: 如何在電腦上寫程式, 並上傳到 Arduino 運作. 基本的電路零件知識, ex: LED, push button.. 如何利用 Serial 來 debug. 如何利用 Serial 來傳送和接收資料. 如何使用網路上別人寫好的 Library. 碰到的問題 一開始電腦一直抓不到板子, 後來發現我的USB線是充電專用的 囧.. 推薦工具 Fritzing - 畫電路圖的工具. Source code 跟之後的專案都會放在 GitHub 上, 歡迎有興趣的人一起交流 :-)

一般 Flash 程式開發時, 取資源的方式有兩種: .swf .swc .swf 擋屬於 Runtime 時從外部載進來取用的方式, 通常會使用 Loader 來作處理. .swc 擋則是 Compiler 時就會一起包進來, 要取用內部元件通常就直接 new 出來就可以: var component:CLASS_NAME = new CLASS_NAME(); 如果想要動態取得元件的話會碰到一些問題, 一般來講會用 getDefinitionByName(CLASS_NAME:String) 這個 method: 不過編譯完執行後會碰到錯誤, 解決方式如下: Project > Properties Flex Compiler > 加入下面參數 -include-libraries=YOUR_ABSOLUTE_SWC_PATH.swc

這次不談程式的東西, 來聊一些 2012 年的數位生活心得, 這幾年許多應用快速雲端化加上智慧型裝置普及率提高, 幾乎大部份的工作都可以離開 PC 來完成了, 剛好在去年我達成了 Apple 家族四天王(iPhone iPad AppleTV Macbook)制霸! 所以在這邊整理分享 2012 年用了哪些服務. 因為我手上的裝置都是蘋果, 所以下面介紹的服務會以 iOS 系列為主, Android 的朋友抱歉囉.. 我在找想用的服務時會盡量挑以下幾點符合的: 多螢一雲 有提供各平台的 app, 網頁, 或桌面應用軟體. 社群化 擁有自己的社交互動圈, 或整合 twitter, facebook 等服務. 手機為主 PC為輔 優先挑選手機 app 好用的服務. 另外, 根據服務性質的不同, 也會看是適合哪個平台來選擇, 例如: iPhone 人在外面, ex: 工作, 通勤等.., 通常生產力相關的工具會比較適合在這時候使用. iPad 在家裡, 但不是電腦前, ex: 沙發, 床上.., 通常使用閱讀, 影片, 繪畫軟體較適合. Apple TV 在客廳, 不過軟體不多, 通常都拿來看影劇和聽音樂居多. PC 電腦或筆電, 通常都是拿來做較複雜的事情, ex: 整理, 規劃, 編輯.. OK, 在了解完我挑選應用服務的方式後, 下面列出的就是我要分享的清單: 知識管理 Google Reader Reeder Zite Pocket Evernote Delicious Blogger 生產力管理 Gmail Google Calendar Reminders Notes Dropbox 人脈管理 Google Contacts Facebook (Twitter, Google+, LinkedIn) LINE 財務管理 随手记 休閒娛樂 iTunes Match Last.fm TuneIn Radio SoundHound YouTube Podcast iTunes U Google Map Foursquare Foodspotting Picasa Instagram ...