Skip to main content

· 3 min read

Imgur

承上一篇,我工作用的桌機通常灌的是 Ubuntu(Linux)系統。筆電則是在 Windows 10 上灌 Ubuntu VM 解決。

但上個月我的桌機從 16.04LTS 升級到 16.04.1 時,竟然升級失敗無法開機,這讓我很火。 於是利用這個機會,我嘗試安裝了 MintElementary OS1。 Mint 和 Elementary OS 都是 Ubuntu 的衍生版本,所以在套件和命令行使用上與 Ubuntu 一致,在重新設定開發環境時比較不會遇到困難。

兩者嘗試後,最終是 Elementary OS 的高顏值與類似 Mac OS 的使用經驗,讓我決定繼續用下去。 當時安裝的版本是基於 Ubuntu 14.04LTS 的 Elementary OS 0.3 版 (Freya)。至目前使用上相當滿意,終於可以擺脫不甚順手的 Unity 桌面了。

就在前幾周,基於 Ubuntu 16.04LTS 的 Elementary OS 0.4 版 (Loki)終於釋出了。 但是新版本竟然不支援直接從舊版升級,於是我依然錯過在第一時間試用新版本的機會。

今天心血來潮再次搜尋了一下 vagrant 上是否有提供 Elementary OS 的 Box,很幸運找到了

步驟:

  1. 在 Windows 10 上按視窗鍵,搜尋 cmd 並開啟
  2. 在命令行工具中輸入以下 2 行命令,以啟動一個 Elementary OS VM
vagrant init TimWSpence/elementaryos
vagrant up

第一次啟動後要開啟 VirtualBox 並選擇「顯示」,之後就不需再用到 vagrant 命令了。 vagrant box 所使用的登入的密碼是 "vagrant"。

啟動後我照著11 things to do after install Elementary OS Loki 文章的建議,安裝了一些工具。 同時因為我的 Dell XPS 13 (9495) 筆電解析度較高,預設的解析度之下每個字都超級小,我透過 gsettings 命令多設定了 text scaling:

gsettings get org.gnome.desktop.interface scaling-factor
gsettings set org.gnome.desktop.interface scaling-factor 2

在做了這個修改之後,才得到對眼睛比較友善的使用界面。(如題圖)

· 2 min read

幾周前透過 Ubuntu 升級筆電的 Firmware 後,Ubuntu 竟然就再也無法正確抓到無線網卡了!

我想說那就趁這機會重灌 OS 吧!然而在嘗試灌各種 Linux 套件(Elementary OS Loki (Beta), Ubuntu 16.04, Ubuntu 14.04)都抓不到網卡驅動程式後,只好乖乖灌回 Windows 10。

由於在筆電上依然需要一個 Linux 工作環境,我就之前的經驗繼續使用 vagrant 來建立工作環境 VM。安裝好VirtualBoxVagrant後,只需要 2 行命令即可安裝完成,而且之後隨時可以砍掉重新開一個全新的 VM。

步驟:

  1. 在 Windows 10 上按視窗鍵,搜尋 cmd 並開啟
  2. 在命令行工具中輸入以下 2 行命令,以啟動一個 Ubuntu VM
vagrant init boxcutter/ubuntu1604-desktop
vagrant up

第一次啟動後要開啟 VirtualBox 並選擇「顯示」,之後就不需再用到 vagrant 命令了。 vagrant box 所使用的登入的密碼是 "vagrant"。

由於 Vagrant 使用最小化地配置 VM 可使用的 CPU 和記憶體,對於桌面開發環境來說有些不夠用。我會到 VirtualBox 中修改「配置」,去適量增加可用的記憶體數值。 目前這方式在 Windows 上運作地相當順利。

· 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