Skip to main content

· 2 min read

Imgur

I just migrated my blog from Blogger to Github (via Hexo)! Because I'd like to use Markdown to write things efficiently (format, syntax highlight...), and think if I can finally integrate blog as part of my homepage (which soon or later will be hosted on github).

Migrate from blogger

To migrate from blogger, I use these instructions:

npm install -g hexo-cli
mkdir blog && cd blog
npm install --save hexo-migrator-rss
hexo migrate rss https://www.blogger.com/feeds/xxxxxxx/posts/default?max-results=600

xxxxxxx is your blog id which can be found from url bar of blogger's admin panel.

To test render result locally, run

hexo s --debug

To generate static file then update to github, run

hexo generate --deploy --debug

If you have amount of articles like me (about 500 articles), make sure you have allocate enough memory if you run the command in VM.

The template comes from hexo-theme-next with great document.

Make sure you've follow "Setting up a custom subdomain" , and install hexo-generator-cname to generate CNAME file for your static web site.

npm install --save hexo-generator-cname

Add cname property in _config.yml:

cname: blog.gasolin.idv.tw

You can check _config.yml and themes/ for my site configurations.

The theme customization is done via npm scripts. You can check package.json::scripts for detail.

deploy automatically via travis CI

Read

for step by step instructions. Or you can check My version of .travis.yml with hexo-theme-next gitsubmodule

SEO enhancements

Read 如何向 google 提交 sitemap (in chinese) to send sitemap.xml to google for better indexing.

Update theme

Use command

git submodule foreach git pull origin master

to update your theme. Read Update Git submodule to latest commit on origin for more detail.

· 2 min read

「聊天機器人一份,不加咖啡」是今年在 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,這場「扎根」議程達到的效果就最好了。

· 5 min read

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

Once you have setup the environment, the workflow could also be based on git(or hg), and most things are dealt automatically. Mozilla is a pretty open workplace so that I can share my workflow with the world. Here is a reference to how I did for per patch/weekly/per setup/one-time workflow.

Do it One time

To become a mozilla committer, read https://www.mozilla.org/en-US/about/governance/policies/commit/

Create Bugzilla API keyhttps://bugzilla.mozilla.org/userprefs.cgi?tab=apikey and ssh key https://login.mozilla.com/ssh_keys_index

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 every time 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-cinnabar

Gecko itself managed via mercurial, we need install git-cinnabar 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

And do git cinnabar download to get the faster helper.

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 the following command:

$ ./mach eslint --setup

You may want install mozreview which improves 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 [email protected]
$ git config --global bz.apikey [your bugzilla key]
$ git config --global mozreview.nickname gasolin
$ 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.

Weekly workflow

Previously build takes more time, I usually do the following command only twice a week if necessary. But now we can use artifact build, which is pretty fast and can be done many times a day.

We need update Gecko repository regularly:

$ git remote update

Then merge recent updates into current repo with

$ git rebase central/default

Checkout a new bug and then rebuild the stack,

$ ./mach build

The command will compile the whole gecko.

Per patch workflow

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

$ git checkout -b bugxxxxxxx central/branches/default/tip

or (on Ubuntu)

$ git checkout -b bugxxxxxxx mozilla/central

Usually, the bug is focused 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 the command:

$ ./mach test browser/components/customizableui/test

You 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. Do the eslint test before commit to make sure the patch does not contain some obvious syntax error.

$ ./mach eslint browser/components/customizableui/test

Once the patch is ready, commit it as normal git commit, with a structured syntax: Bug xxxxxxx - description. ;r=?reviewer_bugzilla_alias.

Then, use git mozreview command to push the commit onto Bugzilla for review.

$ git mozreview push

You can use try chooser http://trychooser.pub.build.mozilla.org/ to select test suites that run 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.

If you like to file a bug

  • Assign priorities when filing new bugs that you're going to work on in the component.

Reference

· 4 min read

前幾天 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)

  1. 接著從應用商店取得可以編輯照片 Exif 資訊的應用。我選的是免費的 Photo Exif editor。
  2. 從照片 (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 相機時要如何兼顧隱私的保護也會是一個議題。

· 2 min read

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.

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/

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):
... 2: Linux 3.8 GB disk2s2

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

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

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

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**

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!