八月 25, 2016
» 聊天機器人一份,不加咖啡



「聊天機器人一份,不加咖啡」是今年在 Coscup 2016 分享的講題,投影片在此
內容包含介紹聊天機器人與 Hubot,轉換Coffeescript到ES6,與移植經驗總結。
 
Webbybot 是我們將 Hubot 完全移植到 ES6 的成果。在準備這場演講時,有鑑於Server Side聊天機器人設定上還是稍嫌複雜,於是我參考 Hubot 架構,做了原始版本只有80行的網頁端聊天機器人。除了支援聊天機器人基本功能外,同時也支援擴充腳本(plugin)與擴充功能(addon)。由於參考了Hubot架構,於是命名時就取了Saihubot 這個既包含 Hubot,又有濃濃台味的名稱(SaiHu 即台語的「師傅」)。

這次活動官方有提供 LINE 版的聊天機器人。我在活動早上花幾小時基於 Saihubot 做了 Coscup 2016網頁版機器人,可以上去玩玩。

要做一個自己的網頁聊天機器人,只須在 github 上 fork 專案,然後就可以直接在 Github 上編輯,修改後的結果直接反應到 https://[your name].github.io/saihubot 網站上。修改極端容易,畢竟核心只有不到100行,對聊天機器人有點興趣的人可以照著上述說明試試,看看原始碼,當然若能送個 Issue 或 Pull Request,這場「扎根」議程達到的效果就最好了。
 

八月 9, 2016
» The newbies workflow on Mozilla Gecko project

As our recent development focus shifting from Firefox OS to Firefox, we need contribute to gecko repository directly instead of contribute to gaia repository. The most of works are still related with Javascript, the main change is the workflow and API difference.  In Gaia we works between Bugzilla and github; In gecko, we have Bugzilla and mozReview.

Once you have setup the environment, the workflow could be still based on git, and most thing are dealt automatically. Mozilla is a pretty open workplace so I can share my workflow with the world. Here are a reference about how I did for per patch/weekly/per setup/one time workflow.

Per patch workflow

When I work on a new bug, I'll checkout a new branch (on mac)

$ git checkout -b bugxxxxxxx inbound/branches/default/tip
or (on ubuntu)
$ git checkout -b bugxxxxxxx inbound/default
Usually the bug is focus on a component of gecko, such as `browser/components/customizableui`. To make .js/.jsm changes work, we don't need to rebuild gecko. But to make some C++ code or new test code works, we need to rebuild this part of source via

$ ./mach build browser/components/customizableui

Once we have some progress for the patch, we can test code via command:
$ ./mach test browser/components/customizableui/test
Once the patch is ready, commit it as normal git commit, with a structured syntax:
`Bug xxxx - description. ;r=?reviewer_bugzilla_alias`.

Then, use git mozreview command to push the commit onto bugzilla for review.
$ git mozreview push
Ooh, you also need to make sure you've followed the JS code style https://wiki.mozilla.org/DevTools/CodingStandards#Code_style and CSS code style https://wiki.mozilla.org/Firefox/CSS_Tips

You can use try chooser http://trychooser.pub.build.mozilla.org/
 to select test suites that runs automatically on the test server. Treeherder is Mozilla's test server hosted on AWS (Amazon Web Service). Push code there and everyone will have the same base to validate if your code works well on anyone's computer.

The reference try script (credit from :Gijs) for `browser/component` is

try: -b od -t none -p win32,win64,macosx64,linux,linux64,linux64-asan -u mochitest-bc,mochitest-e10s-bc,marionette,marionette-e10s

You can manipulate the script based on what you need to test.

Weekly workflow

Because build takes more time, I usually do the following command only twice a week if necessary.

We need update gecko repository regularly:

$ git remote update

Checkout a new bug and then rebuild the stack

$ ./mach build

The command will compile the whole gecko.

 Do at every Setup

You may check MDN as a start point, with Developer Guide https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide and especially the source code page
https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Source_Code

I will do the setup flow everytime I got a new laptop.

1. Update git

Use the PPA from the maintainers of git on Ubuntu:
$ sudo apt-add-repository ppa:git-core/ppa
$ sudo apt-get update
$ sudo apt-get install git 
 2. Install git-cinnarbar

gecko itself managed via mercurial, we need install git-cinnarbar to help us deal with mercurial codebase via git.
Check http://mozilla-version-control-tools.readthedocs.org/en/latest/mozreview/install-git.html#mozreview-install-git 

$ sudo apt-get install mercurial
$ git clone https://github.com/glandium/git-cinnabar.git
 Then set git-cinnabar into system PATH

$ gedit ~/.bashrc

export PATH=$PATH:absolute_path_to/git-cinnabar

$ . ~/.bashrc
Then follow Mozilla: A git workflow for Gecko development to checkout gecko via git.

Make sure you follow the firefox build guide https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Build_Instructions/Simple_Firefox_build to setup firefox build environment.

You can install style check related libraries via following command:

$ ./mach eslint --setup

You may want install mozreview which is improve the overall experience of review with Bugzilla http://mozilla-version-control-tools.readthedocs.org/en/latest/mozreview/install.html
$ ./mach mercurial-setup
Will clone version-control-tools into `~/.mozbuild/version-control-tools`. We need update system PATH
$ gedit ~/.bashrc
export PATH=$PATH:absolute_path_to/git-cinnabar:/path/to/.mozbuild/version-control-tools/git/commands 
$ . ~/.bashrc
$ git config --global bz.username someone@example.com
$ git config --global bz.apikey as3r123hj325hjld3
$ git config --global mozreview.nickname mynick
$ git mozreview configure
Then, run bootstrap script to install required build environment

$ ./mach bootstrap
 
Then, the most time saving advice: setup mozconfig for artifact builds if possible. 
When you only work for front-end related work (non c++), Artifact build will download compiled platform code to save you lots of build time.
Do One time
 
Become committer
https://www.mozilla.org/en-US/about/governance/policies/commit/
 
Create Bugzilla API key
https://bugzilla.mozilla.org/userprefs.cgi?tab=apikey
Manage ssh
https://login.mozilla.com/ssh_keys_index

七月 4, 2016
» 使用手機上傳 360 圖片到 Facebook

前幾天 Facebook 開放上傳 360 影片,經過幾番嘗試後,終於找出直接在手機上直接上傳 360 照片的方法。

剛嘗試的人建議使用 Google Street ViewCardboard Camera 試試效果,這兩個 App 可以在 Android 或 iOS 應用商店中找到。

透過這兩個 App 拍攝的 360影片,直接上傳到 Facebook 應該是沒問題的。


但現在有更方便的 360 影片拍攝工具如 Ricoh Theta S 或是 LG 360 CAM,這類設備搭載兩個鏡頭,拍攝時只要按一下拍攝鈕,就輕鬆完成全景照片。

使用全景相機拍攝 360 照片或影片

有的設備如 LG 360 CAM,目前 Facebook 還無法辨認(更新:現直接上傳 360 照片已經可以正確辨認),所以只能用一些繞過的方法。朋友傳來這篇教學文章。根據這篇文章的說明,我做了些嘗試與改進,並最終成功透過手機上傳360照片。

1. 首先準備一張 360 照片 (我用的是 LG 360 CAM)



2. 接著從應用商店取得可以編輯照片 Exif 資訊的應用。我選的是免費的 Photo Exif editor。
3. 從照片 (Gallery, Photo) App 預覽到想要修改的 360 照片,選擇分享(Share)到 Photo Exif editor。
 4. 照著修改 以下欄位的值:

Camera maker: Ricoh (首字母大寫)

Camera model: RICOH THETA S (全大寫)


5. 最後再透過相片軟體選擇分享到 Facebook 即可。如果成功,可以看到相片下角出現球狀 360 影片圖示。



我的觀察啦,360 相機使用上相當方便,按一下拍攝鈕啟動相機,再按一下就拍張照。長按就開始拍攝影片。

拍照時只要把相機往上平舉,就整個環境都拍到了(一個小技巧:拍攝時將相機舉在頭上就不會拍到自己),不需要什麼特別的攝影技巧。這對只是想分享當下體驗的我相當適合。這種特性也很適合團體拍照。這樣方便的新品,加上 Facebook 這樣容易分享相片的環境,相信很快 360 相機就會流行起來。
 
目前拍 360 相片時,附近的人其實並沒有意識到我在幹什麼,但其實附近的人也是全部入鏡的。使用 360 相機時要如何兼顧隱私的保護也會是一個議題。

四月 8, 2016
» Setup a skype chatbot on Respberry pi with 4GB SD Card

It's a small challenge and fun to setup a chatbot on a small device with restrained resource.

Here's the instruction to setup a chatbot on Respberry pi with 4GB SD Card.


1. Download respbian lite

We need respbian lite because normal Respbian took more than 4GB space. If you have 8GB or larger SD Card, normal Respbian works fine for you.

You can download them from https://www.raspberrypi.org/downloads/raspbian/

2. Flash image to sdcard

I did it in Mac with diskutil. You can check the install guide from https://www.raspberrypi.org/documentation/installation/installing-images/README.md for other platforms.

$ diskutil list
/dev/disk0 (internal, physical):
...
/dev/disk1 (internal, virtual):
...
/dev/disk2 (internal, virtual):
#:                       TYPE NAME                    SIZE       IDENTIFIER
0:     FDisk_partition_scheme                        *3.9 GB    disk2
1:             Windows_FAT_32 boot                    58.7 MB    disk2s1
2:                      Linux                         3.8 GB     disk2s2

$ diskutil unmountDisk disk2
$ sudo dd bs=1m if=2016-03-18-raspbian-jessie-lite.img of=/dev/rdisk2

3. Login to respbian

Respbian lite does not provide desktop environment, so we'll do everything with command line.

Insert SDCard, bootup and login into respbian with
name: pi
password: raspberry

Refer from http://elinux.org/RPi_Distributions#Raspbian


4. Install node and redis

Refer from https://nodejs.org/en/download/package-manager/

$ curl -sL https://deb.nodesource.com/setup_5.x > script
$ chmod 755 script
$ sudo -E ./script
$ sudo apt-get install -y nodejs build-essential redis-server
$ node -v
v5.10.1
5. Install webbybot

Webbybot is the rewrite of hubot from coffeescript to ES6, its will be more maintainable in the future.
In respbian lite, the git is not pre-installed, so we need install git-core from apt-get as well.
sudo apt-get install git-core
git clone https://github.com/gasolin/webby-template pibot
cd pibot
npm install
./bin/webby
webby> webby test
webby> pong

6. Deploy on messengers

Check Workable adapters section to install your bot onto telegram, facebook messenger, or skype
https://github.com/gasolin/webby-template#workable-adapters

Let's take skype for example. First you need sign up an skype account, then put the username/password on to .env file.

 
vi .env

HUBOT_SKYPE_USERNAME=name
HUBOT_SKYPE_PASSWORD=password
 
Then install hubot-skyweb adapter and switch the core to webbybot

npm install hubot-skyweb
vi node_module/hubot-skyweb/src/skyweb.coffee
replace require 'hubot' to 'webbybot'.
Then run
 
./bin/webby -a skyweb 

You are good to go! You can add new skills on your pibot by following https://github.com/gasolin/webbybot/#add-plugins
which is same as hubot, and create your own plugin to control the respberry pi https://github.com/gasolin/webbybot#write-your-own-plugin.

Have fun!

三月 14, 2016
» How we ported Hubot from Coffeescript to ES6


Hubo

We (Fred Lin & Ray Lin) have ported Github's popular chat robot framework 'Hubot' from Coffeescript to plain Javascript with ES6 features. Currently I name it webbybot to denote ES6 version of hubot, to better test the port result and avoid the naming confusion with the original hubot.

Now webbybot is fully functional and still support all coffeescript written plugins.
If you have an existing bot generated by hubot-generator, you can install webbybot via `npm install webbybot` command, follow with simple instruction and see your bot works smoothly with webbybot core.

(For experienced developer, the instruction guide you to replace script in generated '/bin' folder from 'hubot' to 'webby'. And change the adapter library import from 'hubot' to 'webbybot'.)


As time goes to 2016, there're less reason to use Coffeescript instead of standard ES6 Javascript. During the porting we do learned something that might helpful for your projects.

1. Use npm script directly instead of gulp or grunt

With npm we can define some scripts directly in the 'script' attribution of 'package.json' file. Webbybot use 'npm run build' command to compile ES6 to plain javascript via Babel. Do style checking via 'npm run lint' command.

2. Use babel directly instead of webpack

At the beginning we count on webpack's babel-loader to convert ES6 to plain javascript. Alas its a beginning of 'Try and Error' journey. Webpack is originally designed for front-end packaging and works very well on that purpose. But for backend program like webbybot that feature is not important for us. Webpack also bring 'require' keyword to the front-end, but its not suit for backend program that depends on dynamic import. As a framework, hubot heavily counts on NODE require to load plugins. Webpack treat all 'require' as its keyword and try hard in vain to find external modules from packed files.

We tried several ways to detour these side effects, and finally replaced the full webpack stack with one line npm build script. Now its easier to debug and no hacks needed in source code.

3. return or not return, its the question

We use the "Try Coffeescript" utility provide form Coffeescript official site, which you can paste Coffeescript the page will convert the source to Javascript instantly.
The converted code is... not all pretty for human read, and all converted functions will contain a return statement even its unnecessary. It needs check by hand.

4. test cases matter

Hubot itself contains good coverage of unit tests. So we are able to test one ported script file with one ported test file when we start the porting. The unit test files contain great number of redundant return sentences when convert from coffeescript.

5. class and super

Hubot use Class syntax from Coffeescript。Thanksfully ES6 support the Class syntax, which is a bit different from Coffeescript. You can check how to use Class and super on MDN.

6. Default + rest + spread

Hubot contain several syntax like 'reply(strings...)'. The syntax 'strings...' in Coffeescript is correspondent to "...strings" in ES6(The order of '...' is reversed).
'...strings' denotes an array and I feel its a bit hard to figure out when to expand it or not.

7. for..of instead of for..in

To use for..in loop in ES6, we need add 'hasOwnProperty' check to make sure inherited property are not looped. Or we can rewrite for..in loop in Coffeescript to forEach iteration. Though there are some cases that need 'break' or 'return' from a loop.

Now we use ES6 for..of loop in Webbybot to replace forEach and for..in loop. You need wrap object with Object.keys syntax to iterate with object. ex: `for (let item of Object.keys(TargetObj)) {...}`.

8. Object.assign instead of Extend

We can use Object.assign to extend a object without handmade extend function or lodash!

9. Do you know hubot also support write plugin with plain javascript?

Learning how chat bot works is the main reason we start porting hubot to ES6!
A simple plain javascript plugin could be as easy as: (src/simple.js)

module.exports = function(robot) {
  robot.respond(/(hello)/i, function(res) {
    res.send('hi');
  });
}
You can put it in generated plugin folder and it will just work.


I've created a ticket on hubot issue list to start a discussion if hubot would like to go with ES6 in its future version.

The webbybot source is at https://github.com/gasolin/webbybot

Do you have a project ported from coffeescript to ES6? Welcome to drop by your thoughts.

» 將聊天機器人框架 hubot 從 Coffescript 移植到 ES6

Hubo


(English Version available here

用兩周多的時間,路路續續把原本用 Coffeescript 撰寫的 Hubot 聊天機器人框架移植成使用到 ES6 特性的純 Javascript 版本。

現在這個移植版本已經可供使用。移植後依然可以使用 Hubot 原來以 Coffeescript 撰寫的各種擴充套件(Plugins) 。

https://github.com/gasolin/webbybot

(目前的版本完全移植 Hubot 的功能,已開 Issue 詢問 Hubot 是否有興趣 merge 回去,在此之前先放在自己的 webbybot repo 裡)

移植的動機之一是為了了解整個聊天機器人框架,為後續可能的修改打基礎。
其二則是嘗試平常不常用到的ES6新特性。

過去 Coffeescript 和 Typescript 等最終編譯成 Javascript 執行的語言,都走在 Javascript 之前,提供了許多語法上的新特性。但在 2015 年 Javascript 開始的新發佈規劃(一年一版)下,ES6(ES2015)已將 Coffescript 眾多特性都收編了。且現在透過 Babel 可以將 ES6 編譯成現有的 Javascript 直譯器能讀懂的語法。在這樣的趨勢下,過去開發者想為這些新特性多學一套語言的誘因就不再存在了。

移植過程中採用的作法與遇到了一些坑,在此一一列出來。

1. 不用 grunt gulp, 直接使用 npm script

在 package.json 裡可以直接在 "script" 屬性中定義一些要執行的腳本,例如 webbybot 透過 "npm run build" 來將 ES6 轉換成 Javascript 直譯器能讀懂的語法。用 “npm run lint" 來做 style check。

2. 不用 webpack, 直接使用babel

移植之初決定使用 webpack 的 babel loader 來轉換 ES6,但這是一連串從「錯誤中學習」的開始。 webpack 支援使用 require 命令載入各種檔案,而且webpack 在轉換的過程中會將檔案打包成一份。但後端程式其實不太需要打包,而且 Hubot 作為一個框架,執行後從外部讀取 Plugin 是非常重要的功能。 使用 webpack 時,它會將程式中出現的 require 都視為它的 require,而嘗試從打包好的檔案中找到我們需要的外部 plugin,結果是徒勞的。當我們換用 npm script 直接呼叫 babel-cli 來打包,原來使用 webpack 時出現的諸多問題也都一併解決了。

3. 該不該 return

在移植的過程中常用到的工具是 Coffeescript 官網的 "Try Coffeescript" 分頁。可以即時將 Coffeescript 結果轉換成 Javascript。 但是真的把程式碼貼上去會發現, Coffeescript 所轉出來的 Javascript 所有的函式都會回傳值。需要手工一個個確認。

4. test cases

Hubot 本身有很完整的單元測試。所以每移植一支程式碼時,只要一併移植對應的單元測試,就可以捉對拿來直接測試。單元測試移植時出現最多該不該 return 的問題。

5. class and super

Hubot 使用了很多 Coffeescript 的 Class 語法。Class 與 super 的用法在 MDN 上可以找到相關教學。

6. Default + Rest + Spread

Hubot 程式碼裡常常會出現諸如 reply(strings...) 的語法。Coffeescript 裡的"strings..."可以對應到ES6 的 "...strings"(...放置位置剛好相反)。
"...strings" 代表的是一個陣列。在程式中有時要展開有時不用,其實頗令人苦惱。

7. 使用 for..of 替換 for.. in 迴圈

碰到 for..in 迴圈有幾種解法,最不會出錯的是將 Array iteration 改寫成 forEach。但是用 forEach ˇ的話無法在執行中使用 break/return 跳出是其缺點。其二是在 for..in 迴圈裡加入 hasOwnProperty 確認不會跑到無關的 function。
在 Webbybot 的第二版中已使用 ES6支援的 for..of 迴圈 來取代 forEach 和 for..in 迴圈。由於 for..of 迴圈只支援 iteratable ,不支援一般 Object,所以碰到要對 Object 跑迴圈時可以在 Object 外包一層 Object.keys,例如 `for (let item of Object.keys(TargetObj)) {...}`。

8. 使用 Object.assign 替換 Extend

要擴展一個物件的功能不用再用 lodash 或是自己寫 extend 函式,直接用 Object.assign 吧。


以上是移植過程中碰上的問題。感謝同事 Ray Lin 一起幫忙完成這次的移植。

現在 Webbybot (Hubot ES6 port) 整套都可以用 Javascript 寫了,歡迎試用或上 Patch 喔。

https://github.com/gasolin/webbybot

二月 8, 2016
» 人生如棋?或其實人生更像俄羅斯方塊

前陣子在 Medium 上看到 Tor Bair 寫的 Your Life is Tetris, Stop playing it like Chess, 談到作者認為俄羅斯方塊比起棋局更接近人生。

棋局是種非贏即輸的零和遊戲,而俄羅斯方塊則是不斷重複,幾乎不可能獲得最終勝利的遊戲。

作者的論點如下:

1. 人生中你唯一的對手是你自己

真實的人生遊戲是內化的,而不是靠向外找尋對手或打敗大魔王來獲取積分。

2. 人生中,事情不會變得更難,只會變得更快

3. 人生中,你無法控制接下來會發生什麼

你只知道下一個拿到的方塊是什麼,你只能活在當下,試著組織起最好的結果。

4. 人生中,沒有人告訴你什麼時候你贏了

不是為了贏而遊戲,而是為了樂趣而遊戲。


"人生如俄羅斯方塊",實在是很有趣的人生觀阿!

一月 4, 2016
» 2015完食的書

20132014年都曬過書架,今年繼續獻曝。(今年能紀錄的共讀 115 本,23539頁),63本是電子書(54%),比例首次超過實體書。不過這也許是因為更多原本線上的小說也出了實體書,讓我也得以紀錄下來的關係?
 
來曬一下今年看過的書,順便從中推薦些好書(由近至遠)

 


今年的開始似乎是從 Remote Work (中國譯做 重來2) 開始,看看知名團隊如何遠端工作還蠻新鮮的。

團隊之美
讓我觸動最深的一句話是:「好工具的關鍵不是說不再需要人們,而是讓人們更快樂。」

矽谷之火
全本在 kindle 上看完的矽谷歷史書,

西部人認為自己是一往無前的牛仔,失敗對於他們來說,不過是一種更快速的獲取經驗的途徑罷了。

看那些媒體沒告訴我們的個人電腦史,看那些湮沒在時間中,對個人電腦發展留下貢獻的人們。相當精彩

之後看的 黑客列傳 也還可以,沒這本驚豔。



食戟之靈
無論是作者或繪者都超認真地構思與呈現符合每個選手風格的料理

萬曆十五年
禁得起時間考驗,已出版經年的書,讀來還是精彩

頂尖業務員都在用的3T筆記術

雖然標題聳動,但內容卻意外地紮實。
 
書中講到業務要做好的兩個要件:
思考:不斷思考「接下來該做什麼?怎麼做會比較好?」
行動:採取確切行動。


和小朋友一起讀童書其實很有趣。當一本書翻多遍時,你可以從中找到許多觀察與講述的方法。


 從0到1

「今天的任務是找到獨一無二的方法創造新事物,不只讓未來變得不一樣,而且要更好,所以我們要從0到1。最重要的第一步是自己獨立思考。唯有重新看待世界,像古人首次見到它那樣覺得新鮮古怪,我們才能重新創造,並將更好的未來留給後世。」

我們已經漸漸實現了過去所想像的未來。現在需要的,是從過去的經驗中,尋找出我們對下個未來的想像。

先讓英雄救貓咪

之前看電影類yy小說時反覆被提到的編劇聖經

一個人的會議時間
我還是頗愛看個人時間管理相關的書


價值主張年代
Business Canvas 作為經常被提及與使用的工具,這本書其實不太好讀

今年應該會找日本作者寫的「圖解獲利世代」 看看。

失控

1980年的大部頭舊書,把人與科技合在一起,當作一個有機生物體來觀察它的發展的想法值得思考。我們現在把手機,Siri或運用網路的能力視為人的一部分,還能看到個體間更大的差異。

河圖洛書前傳
提到中國上古文化裡其實是有數位基因的,不論真實性如何,就算當作小說看,這樣的立論也很有趣。

計時器讀書法
15min 一段專注力的週期 + 3min 最後的跳躍。
保持非整數時間,讓人有強迫繼續補完的動力,不強制休息時間,讓實行起來更不困難。
都是高明的心理技巧。

這本小書一看完,馬上將手機的倒數計時器設成18分鐘。



不賣東西,賣體驗
「這名女性真正想要的並不是卡地亞Tank Francaise腕錶這項「商品」,她要的是在聖誕夜,男朋友陪她到銀座卡地亞總店,在裝潢華麗的店裡,接受女店員恭敬的服務,買下女店員用戴著白手套的手,從盒子裡取出的Tank Francaise腕錶的那份'體驗'。」

光看這段就有顛覆三觀之效

為什麼聰明人都用方格筆記本?
看了後腦波很弱地馬上去買了方格筆記本來用。目前使用尚稱順暢。

有沒有XXX的八卦
書名不正經,但內容出乎意料的充實

SCRUM 
將敏捷開發法用在各行各業。

有人說過「所有的模型都是錯的,但有些比較好用(All models are wrong; but some are useful)」,這本有詳細地講解目前科技圈最愛說自己有在用的 SCRUM 開發方法。


小結:

21世紀,書也已經不是唯一獲取知識的方式。也許該綜合一下,若有方便的方法,也應該把看過的電影/按贊過的Youtube影片/SlideShare等也列一列。

一月 3, 2016
» 2014完食的書

2013年曬了一下書架,2014年過去了,終於今年沒讀破百本。(今年共讀 86 本,16052頁)也許是由於今年做了許多不甚成功的專案,佔用了不少時間,或是因為家中小朋友 1 + 1 的效應開始顯現。但其實也看了不少大部頭的書。值得注意的是看的86本中,電子版已佔了32本(38%)。





來曬一下今年看過的書,順便從中推薦些好書(由近至遠)


今年剛開始看了Google/Apple世紀大格鬥與「什麼都能賣!:貝佐斯如何締造亞馬遜傳奇」的kindle簡體版。瞭解各大巨頭間的糾葛與發跡史還蠻有意思的。

「超速習法」對於閱讀前的「待機」心理準備部分歸納的非常完備,後半實際閱讀時的方法相對表達地沒那麼清楚。

Kindle上看完的「哲學家們都干了些什麼?」。透過一邊介紹有代表性哲學家的故事,將哲學起始到近代的哲學思想都點水過了一遍。對於我這樣的初學者來說還是很有幫助。

 過年和元旦依舊是漫畫的領地,「銀之匙」實在是部很有趣的漫畫,身在台灣就能體驗日本的農校生活。

為了稍微瞭解 Android 底層開發以完成「Beyond Web and FirefoxOS」的撰寫,翻譯了「Android BSP與系統移植開發」一書。



在kindle上複習了一遍yy小說「冒牌大英雄」,另外也拜讀王伯達先生的新書「再見,世界工廠」,「生產才能創造踏實的經濟成長」等想法在年末看到時寒冰先生的「未來二十年,經濟大趨勢」中也有出現。

數位新時代

在過去十年裡,資訊的獲取方式發生了巨大的變化。可汗學院、維基百科、數以億計的部落格,多如牛毛的網站,只要你有興趣,就可以找到任何資訊,不論你在哪裡。學校的資訊媒介作用已經不再像過去那麼重要,培養孩子「發現資訊的願望」在現在更為重要。

再見世界工廠

這些年可以看到對岸的改變,應進一步認識與了解對岸與東南亞的週邊鄰國發展狀況




 30歲前,畫出你的生涯藍圖

我對圖解與量化自我類的書一直沒什麼抵抗力。這本算言之有物,但一年過去了,實踐上還是差了點 /_\。

給中學生的時間管理術

各種時間管理的入門概念,沒看過科維,GTD的人從這邊入門也不錯

從年初開始看到年中才看完「Javascript Pattern」,作者很仔細地推導各種 Javascript 模式,相當有意思。

「遊戲化時代」 這本書的作者之前有在 coursera 開MOOC課程,雖然我沒上完,但可以感覺到課程內容比書中提到的更多元。這次終於讀完整本。


郝明義先生的工作DNA三卷也拜讀完了,值得一觀。小米的「參與感」和360「我的互聯網方法論」書雖然打廣告意味濃厚,但比起台灣的捧CEO類型商業書來,多了些實在的想法。

「一個人的經濟」 前半段講到日本即將面對的現況,不久也會出現在台灣。提早察覺到的趨勢,可以讓我做些什麼哩?


小旅行,繪本,工作,時間管理,哲學,趨勢。我的閱讀依然雜食。


PS: 感覺Anobii已經幾乎不更新,許多書已經不是輸入ISBN就可以自動出現,所以今年的書單裡還是有些漏書。也許看倌可以建議我將書架搬去哪好?

十一月 13, 2015
» Setup Firefox OS (Gaia) on Ubuntu 15.10

I got my Dell XPS 13 (9343) for a while and decide to install Ubuntu 15.10 as duel boot.

By following the guide its pretty easy to get a Ubuntu environment.
To setup my daily develop environment, I take the foxbox setup script for 14.04 and everything works fine.

So for windows user who want develop FirefoxOS gaia with real device, I recommend you try foxbox first. If you have more commitment, install the Ubuntu. With duel boot you can keep windows and have a more developer friendly environment to develop connecting devices.

十月 15, 2015
» Quick Settings Enhancement Addon

As the Firefox OS Settings Peer, I still feel its not efficient to toggle everything in Settings, because it needs too many steps such as: 1. Open Settings app, 2. Find proper item, which may located in sub panels, 3. Do the action with that setting.


During hackthon in Taipei last month, Yifan and I made the Quick Settings Enhancement Addon, and now its available on marketplace (within the :debug mode).

How it looks like?



The addon add plenty of Settings switch(NFC, Internet Sharing, Lock Orientation, Battery Saving Mode, Geolocation, Enable USB Storage), Settings shortcut (Developer panel configs), Power menu shortcut (Silence Incomming Calls) and.....the Flashlight to quick settings menu!


We also found it will take a lot of estate of your utility tray, so FYR we'd propose a `at most 2 clicks` mockup to handle those quick settings.


The codebase is at https://github.com/gasolin/fxos-quick-settings
Welcome to contribute.

十月 2, 2015
» Node 版的 SimpleHTTPServer

2008年的時候寫了篇如何在python上簡單開個web server的文章,現在來個node版的:

$ npm install -g http-server
$ http-server -p 9000

參考自StackOverflow這篇文章。

八月 24, 2015
» FoxBox 1.0, 讓你在一個小時內不痛安裝 Firefox OS 開發環境的設定工具

Here she is!!

要開始開發 Firefox OS 的 Web 端(Gaia),並不像開發一般網站一樣那麼容易。在開始改網頁之前,通常要把相關的開發文件讀一遍/試一遍,才能順利把開發環境設定好。
而把環境設定好可能已經花了半天時間,這時原本想要改程式的精力也所剩不多了。

去年有感於此,花了些時間整合了一套快速設定 Firefox OS 開發環境的工具「FoxBox」,透過 Virtualbox 虛擬機與 vagrant 自動化工具來達成自動部署 Gaia 的開發環境。最近把 FoxBox 基礎作業系統版本升級了一下(使用 Ubuntu 14.04LTS),在 Macbook 或 Ubuntu 桌面電腦上,只需用一個小時左右的時間,就可以自動安裝好整套開發環境。

Vagrant + VM 的優點

使用Vagrant搭配虛擬機(VMWare或免費的Virtualbox)的好處多多,其一是簡化了開發環境的需求,由於主流的作業系統(Windows,Mac,Ubuntu/RedHat)都支援虛擬機,透過在虛擬機上使用單一的作業系統,可以大幅簡化安裝指令。
其二則是自動化安裝,透過 Vagrantfile 指定要執行的指令 (放在scripts資料夾下),最後跑出來的結果只有安裝成功一種。如果失敗了表示自動安裝的指令沒寫好,初級開發者不用在環境安裝時就強迫得學太多細節。
其三是開發環境隔離,命令都跑在VM中,在之後開發或升級的過程中出現任何問題,隨時都可以重新建立一個乾淨的開發環境。

使用 FoxBox 這套開發環境設定工具,當其他人碰到問題時,也可以更容易地重現問題。


透過 Vagrant 設定,FoxBox 提供實體機與虛擬機共享檔案夾,並支援USB實機偵錯。

雖然開發環境隔離,但是 FoxBox 預設的設定即提供實體機與虛擬機共享檔案夾。裝好開發環境後,你依然可以使用目前作業系統上自己習慣的編輯器來修改程式碼,然後在VM中執行命令。

FoxBox 預設也將 USB port 串接到 VM 中,所以在 VM 中也可以直接接收到實機的偵錯訊息 。

設定的流程


連上網路,在主機上執行以下命令

$ git clone https://github.com/gasolin/foxbox.git
$ cd foxbox
$ ./configure.sh

除了開始時需要指定網路介面卡,並輸入主機的密碼(用來和虛擬機共享檔案夾)外,其中大部分的流程都是自動化的。

當VM跑起來後,登入VM(帳號/密碼為 vagrant/vagrant)並執行以下命令:

$ gaia_init.sh
$ cd gaia
$ make

即可順利編譯好Firefox OS 的 Web 端(Gaia)程式碼囉!

六月 8, 2015
» JSDoc generator in Gaia



Last week I've post on dev-gaia to notice the change of JSDoc generator.

Now gaia's jsdoc generator takes standard jsdoc config format from each app's jsdoc.json file. And app owner could customize its look and feel if they prefer to do so.
http://usejsdoc.org/about-configuring-jsdoc.html

Here's the working jsdoc for Firefox OS settings app http://gasolin.github.io/gaia/settings/ .



The trick is done by gulp and shell commands, which can be apply on any other projects. Here's how I did it.


First of all is install required packages

$ npm install gulp gulp-shell jsdoc --save-dev

Then open `gulpfile.js` and add following scripts:

var gulp = require('gulp');
var shell = require('gulp-shell');

gulp.task('jsdoc', shell.task([
  './node_modules/jsdoc/jsdoc.js -c jsdoc.json'
]));

(It's an simplified version because gaia contains 20+ web apps in it, so I add some tree-walking code to create bunch of gulp tasks. But basically its the same)
The simplified version is now available for reuse in webapplate.


Bonus section:

Here's how I upload jsdoc (http://gasolin.github.io/gaia/settings/ , http://gasolin.github.io/gaia/system/) to github gh pages.

Add another section in gulpfile.js with following script

var gulp = require('gulp');
var ghPages = require('gulp-gh-pages');

...

gulp.task('github', ['jsdoc'], function() {
  return gulp.src('./docs/**/*')
    .pipe(ghPages());
});

Run `gulp github` command and the build tool will generate jsdoc and upload to github page automatically.


六月 1, 2015
» Javascript,征服世界是可能的嗎?



幾週前在 Modern Web 2015 分享了以「Javascript,征服世界是可能的嗎?」為主題的演講。

演講主題靈感來自於 The JavaScript World Domination 一文。

原本想用編年史的形式表現,一直發展到演講的前幾天,才演變成最終使用的形式。



Javascript征服世界是可能的嗎? 

公布講題後,一些人先跑來問我JS是不是真的可能征服世界。
我能理解大家想要知道最終的答案迫切。但其實大多數時候,聽別人的預測,還是不準確的比率更高。

就我而言,了解別人推論的過程,與他所引用的資料,會影響我對他預測結果的信賴度。哪些資訊是我所不知道的(秘密),哪些是我知道但沒有意識到與推斷目標關聯性的。從推敲的過程中,我可以學到一些新東西,也可以產生一些新想法。這樣的過程比偷看答案有趣地多。

這份投影片裡面分享了四個JS征服世界的秘密,你是否已經知道?我的觀察跟你的觀察一致嗎?有沒有什麼其他你觀察到的秘密想分享哩?


三月 11, 2015
» Dogfooding FxOS 2.2 one more month



I've finished another iteration of dogfooding with Firefox OS 2.2. This is the version by far I'm pretty enjoy to use in daily base, without a backup Android phone.

Since my main usage of smart phone is browsing news and web sites, the new Browser frame serves me well.

The edge swiping is still awesome. Swipe left to right or vice versa from the off screen is more efficient than task manager.

In task manager, a small `close` button in bottom left of each card, make a more intuitive way to clean a web app.

Some web app made the dogfood more easier.

  • FeedSpider: The news feed via feedly
  • Social
    • Facebook and Twitter: Browse their web site, then add them on Homescreen
  • Map
    • Google Map:  Browse the web site, then add it on Homescreen
  • Note taking
    • Google Keep:  Browse the web site, then add it on Homescreen

The last thing I want to have is the bookmark sync.

Since the dogfooding experience is so positive, I'll challenge with dogfooding nightly build in next month.

三月 1, 2015
» Future proved Javascript and CSS



This time, its different. The transpilers are build-time polyfills that fill the gap of current browser/server implementation and the newest JS/CSS specs.

Transpilers trans-compile Javascript and CSS to current workable version, so developers could be more productive with JS/CSS latest features and transpilers would translate them into current supported version of code.

From my opinion the most useful es6 feature is arrow functions (=>) which comes from coffeescript. This syntax sugar bind the this value automatically, so developer wont forgot the binding anymore.

The original code is

(function() {
  'use strict';
  document.addEventListener('DocumentLocalized', function() {             
     // App.init();
  }.bind(this));
}());

We can use arrow function to replace `function() {}.bind(this)` to `() => {}`

(function() {
  'use strict';
  document.addEventListener('DocumentLocalized', () => {             
     // App.init();
  });
}());
Currently the arrow functions only default enabled on Firefox. So developer could not use this directly on their project. With babel javascript transpiler the js could be translated to current workable version automatically.

(function() {
  'use strict';
  document.addEventListener('DocumentLocalized', function() {             
     // App.init();
  });
}());
The transpiler will know the content does not need 'this' reference and skip the binding. Note the Javascript transpiler still stick into vanilla javascript. It does not invent new syntax, but it make new specs could be used or experiment in current environment.

From CSS perspective,  CSS variables brings variables into CSS. Pre-define some color and use everywhere on project is possible.

The origin style is

a {
  color: #847AD1;
}

pre {
  padding: 10px;
}
It's frustrated when the stylesheets expand larger and we need to change the new color or size everywhere.

We can use CSS variables to predefine the changeable stuff into pseudo ':root' element.

:root {
  --maincolor: #847AD1;
  --size: 10px;
}

a {
  color: var(--maincolor);
}

pre {
  padding: var(--size);
}
Looks good. But the same situation occurred. Currently the CSS variables only support on Firefox. So developer could not use this directly on their project. With myth CSS transpiler the CSS could be translated to current workable version automatically.
a {
  color: #847AD1;
}

pre {
  padding: 10px;
}
Note the CSS transpiler still stick into CSS specs. It does not invent new syntaxes like LESS or SASS does. It just make new CSS specs could be used or experiment in current environment.

Besides the feature polyfill, running transpiler before deploy also help developer catch out the error since transpiler will traverse the source and parsing syntaxes. Transpiler will bark you when any error in your source.

You may wonder setup an environment with above JS/CSS transpiler seems take some time. webapplate 2.3.0 already integrated with babel  and myth grunt tasks to auto transpile your JS/CSS code to current workable version. webapplate jshint/githook also support es6 syntax validation (yes the .jshintrc is exactly borrowed from gaia project), so your project is future proved and keep maintainable.

二月 28, 2015
» 用 IFTTT 做自動生活紀錄 (LifeLog)

我會想要把看過的書籍、電影,喜歡的Youtube影片,貼過的文章等記錄下來,之後可以方便回顧。過去要這麼做,少不了得手工紀錄,但手動紀錄其實是相當沒效率的。

過去幾年裡,我使用 Google 日曆紀錄簡單的一行日記,使用Anobii 紀錄讀過的書與心得,使用豆瓣電影紀錄看過的影片,使用 Facebook/Google+、Blogger 等分享連結與寫文章。最近我的做法仍然沒有改變,但會利用 IFTTT 來自動將我更新的書、影片、分享過的連結等自動紀錄到我的 Google 日曆中。

IFTTT 是一個幫你連結各種不同網路服務的自動化工具,包括 Google Calendar、Facebook、Evernote、RSS 等各種服務。其運作方式是先指定一些需要的配方(Receipe)。



IFTTT會定時追蹤你使用的一些服務的狀況。當你的配方中包含的服務的內容改變時(如 Blogger 上有更新的文章),IFTTT 可以自動將結果添加到你的另一個服務中(如加入至日曆)。

以我自己為例,要將 Blogger 上的文章更新到我的日曆,只需先找出我的 Blogger RSS http://blog.gasolin.idv.tw/feeds/posts/default,然後建立「RSS -> Google日曆」的配方即可。Anobii 或豆瓣的做法也類似。


 
 另一類則是從社群網站將文章加到日曆,也是建立簡單的規則即可做到。



我的生活紀錄 (LifeLog)現在能自動記錄的資料有:
  • Facebook 貼文
  • Blogger 貼文
  • Anobii 書籍
  • 豆瓣書籍/音樂更新
  • Youtube 設為喜歡的影片
  • FourSquare 地點打卡(很少用)
 如果你有其他自動生活紀錄 (LifeLog)的想法,也歡迎與我分享。

二月 24, 2015
» Single line of style to bring (keypart of) f.lux on FirefoxOS

Claim: this exercise is for experiment, not for product.


According to wikipedia, f.lux adjusts a computer display's color temperature according to its location and time of day. I always use it on my Mac to make my eyes more comfortable at night.

So, the topic is about if we can bring that experience on Firefox OS.
Adjust display's color temperature generally is a system specific issue. But actually it can be categorized as an CSS trick if we like to make it on web (a gist to mimic the f.lux effect).

To quick experiment if it doable or not, the validation steps are:

1. open the WebIDE on Firefox Developer Edition
2. download and open emulator (I choose v2.2) on WebIDE.
3. To debug system app, choose `System` from top left selector in WebIDE.
4. once connected,  select the `html` tag and add style
`filter: brightness(0.8) sepia(0.9);` into the element.



The live view changed to f.lux like color temperature.



So it works!

To make it persistent on real device, edit `gaia/apps/system/style/system/system.css`, add above style into `html` tag. Run `make reset-gaia` then you have the style applied on device.

What's Next


The above experiment will change your device's color temperature permanently, which is not what f.lux do. To make it as option, you can add an option in settings > developer panel and add a observer in system to dynamically add such style into system html tag.

If you feel the strong desire to have such feature happen on Firefox OS device, fire a bug on bugzilla.

二月 22, 2015
» 2015 年的 4 個 Web 技術趨勢

要預測未來不容易,但根據已經發生的一些蛛絲馬跡,來推測看看一年半載內可能會發生什麼,還是勉力可以為之。

1. Javascript 語法的改進

ECMAScript6 (ES6) 規格已經底定,主流的瀏覽器也已紛紛支援 ES6 的各種特性。好用的諸如 arrow functionpromises 等特性,都已在 Gaia 專案中大量被使用。

要追求專案與舊瀏覽器的相容性,有 Babeltraceur 等轉譯器可供使用。中文英文教學文件也已不少,就安心地用吧。


2. DOM 的改進

去年最紅的前端函式庫當推Facebook提出的 react.js。react.js 提出使用 Virtual DOM 來管理更新與繪製畫面,在不修改現有瀏覽器實作的現況下,提升操作DOM的效能。

Web Component 則是提供了多種新的瀏覽器特性,Gaia 專案裡也已經使用 Web Component 來設計新一代共用的介面元件。Custom Element 特性讓每個開發者可以自行定義新的 HTML 標籤,Shadow DOM 特性則讓每個 HTML 標籤的實作獨立,不會輕易被其他網頁內容改變。

好消息是這些改進是可以共用的




3. HTTPS 大量被採用

(離線存取的改進)


Service Worker 是規劃了多年的重頭戲。Service Worker 提供更完備的離線存取功能。在第一次使用 Web App 時會快取內容,之後再次使用 Web App 時只需更新不同的部分。由於這功能在各瀏覽器中都還在實驗或Beta階段,最快可能是年底上線。因此開發者能大量投入使用的時間點應該是2016年。

無論是 Service worker 或是也剛底定的 HTTP 2.0 草案,都需要運行在加密過的 HTTPS 上。Google 更是為使用 HTTPS 連線的網站提升搜索排序。過去由於證書取得不易,限制了 HTTPS 的使用率。Mozilla 與 Cisco 等廠商今年將合作提供免費的CA證書。當然,也可以透過現在已經存在的 StartSSL服務 來取得免費證書。


4. 預編譯網站

現在比較大型的網站或 web app 都是透過 build script 預做一些 packaging,optimize,或 trans compile 等動作後才部署上線。除了可以壓縮網頁大小以減少載入時間,同時也起到部分保護原始碼的效果。由於 GruntGulp 等工具的流行,預編譯這方面的門檻降低不少。中、小型,甚至個人網站,也可以很容易地使用這些技術來建構網站或Web App。


最後賣瓜一下:webapplate 這個範本已經整合好 grunt based packaging,optimize,trans compile 等動作,新版本也加進了 Babel trans compiler,可以直接使用 ES6 語法開發 web app。要開新 web 專案時歡迎取用。

biggo.com.tw

A Django site.