Skip to main content

· 3 min read

After migrated my blog from blogger to github, at the end of 2016, I've migrated my blog and home page to host on github as well.

Both sites are fully stored in github and deployed automatically via Travis CI.

Before auto deploy​

Before apply auto deploy method, the usual workflow to hosting web page on github are 2 steps:

First, user commit changes to local git master branch.

graph LR user(User) master[Local:master] user -- commits* --> master

Then, user run the build process to generate contents for deploy.

graph LR user(User) dist[dist/] user -- build --> dist

Then, use git commands to push generated contents to github gh-pages branch

graph LR user(User) ghpages[Github:gh-pages] user -- deploy --> ghpages

At this time, our source code is still stored in local machine, we have to push the changes to github as well for safety.

graph LR user(User) master[Github:master] user -- push --> master

Of course the manual works can be improved. After apply auto deploy method, all I have to do is commit to github and let the web services do the rest.

After auto deploy​

Here's what my current workflow looks like

graph LR master[Github:master] travis[Travis CI] ghpages[Github:gh-pages] User -- commit --> master master -. auto build .-> travis travis -. auto deploy .-> ghpages

The dot line process are automatically done for you.

Github page auto deploy to rescue​

After auto deploy, I am able to run test, do lint check, and build source with a few changes on .travis.yml(The travis configuration file), the only thing I need to care about is the content. The bonus is github now become my online web page editor. Web page is auto updated after each commit.

All these automation only needs one time setup, which is a pretty good deal to save foreseeable deploy time. For security concern, my current workflow add the github token into Travis environment variables(to let Travis able to commit gh-pages), and make the actual git push quiet to prevent showing the token on Travis.

To not reinvent wheels myself, I distilled the auto deploy scripts and instructions into ghpage-auto-deploy project. you can use it to deploy your next web page as well.

Fork the ghpage-auto-deploy project to get start, feel free to add new issues to send suggestions or pull request to me if you want to imporove it.

· 3 min read

Not like previous article about general workflow on Mozilla Gecko project, This article is like a cookbook that I encountered during debugging Firefox devtools (mostly around inspector and network monitor).

Remote debugging​

According to MDN, first of all you need to go through Developer > Toggle Tools > Toolbox Options > Advance settings to check 2 options:

  • Enable browser chrome and add-on debugging toolboxes
  • Enable remote debugging

Then use Shift+Option+Command+i on Mac or Ctrl+Shift+i on linux to open the remote debugger.

Disable autohide in popup​

Once I'm developing toolbar web extensions or any popup windows, I feel very appreciate this feature.

https://developer.mozilla.org/zh-TW/Add-ons/WebExtensions/Debugging#Disable_autohide

Boost build time via set mozconfig artifact​

Add these settings in mozconfig file

# Enable debug version of the pre-build binary artifact
export MOZ_DEBUG="1"

# Automatically download and use compiled C++ components:
ac_add_options --enable-artifact-builds

# Write build artifacts to:
mk_add_options MOZ_OBJDIR=./objdir-frontend-debug-artifact

If you just develop frontend UI(JS, CSS, XUL, HTML), the artifact build prebuild the C++ and the static part of the code so you can download and link it automatically during mach build, it saves you tremendous build time and helps you move quicker.

You can use the command

./mach build faster

to further boost the build time.

Enable React and other JS debugging message​

Add these settings in mozconfig file

ac_add_options --enable-debug-js-modules

It will turn on React and other JS debugging message. Note that will influence performance while running.

Open devtools and chrome debugger with website​

You may not know its possible to open a website with opened devtool with the command:

./mach run --devtools --jsdebugger www.yahoo.com.tw

Test on Try server​

Mozilla Try Server let you run tests on all supported platforms. You can pick which test set and which platform to run by providing command arguments. Here's what I used for test devtools related bugs on Windows, Mac, and Linux.

try: -b do -p linux64,macosx64,win64 -u mochitest-dt,mochitest-e10s-devtools-chrome -t none --artifact

Add --artifact argument will both save total running time and computing resources.

Tracing Code​

Via global search in editor​

Many modern editor ex sublime, visual studio code provide great support of global search. Ctrl + Shift + f is your good friend.

Via DXR or searchfox​

DXR and searchfox is a code search and navigation tool for large projects like Mozilla-center. It supports full-text and regex searches as well as structural queries.

http://dxr.mozilla.org/

ES6 nits​

Do not use forEach with yield​

forEach is a good way to loop array, but is not compatible with the generator(because the need of implement iterator interface), so if you use yield inside of forEach loop, it will not behave as you expect. The better choice is use for..of loop or map instead.

Try to be functional​

The powerful => arrow syntax sugar is not just for replacing bind(this), it gives the developer a clear way to write more compact code.

For example 

promise.then(function(a , b) {
  return a + b;
});

can be written as 

promise.then((a, b) => a + b);

Misc​

· 3 min read

先記錄下來手邊使用的工具，才有機會從繁雜中歸納出簡單的使用規則。

20111年時紀錄了一次當時的個人工具箱，今年再次紀錄，

主要裝備​

  • Desktop PC, Elementary OS, Intel i7 3770 3.40GHz x8, 16GB RAM, GeForce GT 630, 23" LCD
  • Dell XPS 13 (4943), Windows 10, i7 2.4GHz x2, 8GB RAM, 13" LCD
  • One Plus 3, Android, 6GB RAM, 5.5" AMOLED

Windows & Linux​

網站工具​

設計​

開發​

  • 編輯器：Visual Studio Code
  • 版本控制：git, git-cinnabar
  • 套件管理：apt, nvm, Chocolatey(windows)
  • Ubuntu bash on windows

常用插件​

Browser

娛樂​

  • vlc
  • steam, origin

Android 手機​

  • 主要瀏覽器：Firefox for Android
  • 桌面：Arrow Launcher
  • 信箱：Inbox
  • 地圖：Google 地圖
  • 內建相機，內建時鐘
  • 相簿：Dropbox, Google 相簿
  • 社交：Facebook, LINE, Twitter, WeChat
  • 待辦事項：Todoist, GTasks,
  • 密碼：LastPass
  • 線上學習：Udemy, Pluralsight, Duolingo
  • 線上影片：Youtube, Eleven Sports
  • 影片播放：MX Player, DS video
  • 閱讀：Palabre (feedly), Readmoo
  • 音樂：豆瓣 FM
  • 公事：Expensify, Duo Mobile
  • 遊戲：Pokemon Go
  • 心智圖：SimpleMind, XMind
  • 健康：小米運動

不常用

  • 旅遊：Google 翻譯，TripAdvisor
  • IFTTT
  • Anobii，Readmoo 記錄看書狀況

Reference​

1 個人工具箱 2011

· 2 min read

You may think its pretty hard to setup everything on windows. But after I found chocolatey the process is deadly simple. Chocolatey is the package manager for windows. Like homebrew for Mac, you can use Chocolatey to install all react-native dependencies and let chocolatey setup system PATH for you automatically.

Sounds good? let's install react-native on windows.

The very first step is install chocolatey via [following its instuction]https://chocolatey.org/install).

Then install git, node, android-sdk

C:\> choco install git nvm android-sdk

And you can download the latest node version via command

nvm install 8.4.0

Note that Java Development Kit (JDK) is also installed when you install android-sdk, neat! As I mentioned earlier, the SYSTEM PATH are automatically set so you can run android command on cmd or the alternative to open up the SDK manager after install is complete!

Once you can open android SDK manager, check Getting Started section in React Native doc to find out which android SDK versions to download.

You can also check Chocolatey's package list to install a editor. Since its windows, I'll give Visual Studio Code a try:

c:\> choco install visualstudiocode

Now you are on the fast track to install react-native, its all node related instructions now.

c:\> npm install -g create-react-native-app
c:\> create-react-native-app sample
c:\> cd sample
c:\sample> npm start

Happy coding!

Reference:​

· 2 min read
From Dubai Airport (The image is dragable to change view 可以拖曳照片來改變視角喔)

之前寫過一篇使用手機上傳 360 圖片到 Facebook，但其實要分享 360 照片1的話，我們也可以用aframe自己弄個網頁來分享。

將照片放在自己空間的缺點是所有工作得自己來。我用yeoman寫了個的 360 照片網頁產生器generator-360-photo，可以用來產生如上的 360 照片網頁 (照片與照片網頁都放在 github page，透過 iframe 嵌入)，簡化了自己弄網頁來分享 360 照片的難度。

generator-360-photo在產生展示 360 照片網頁的同時，也對照片做優化。由於嵌入到 600x400 空間的圖檔解析度不需要太大，原本圖檔大小 5.6MB，解析度 5660x2830，優化為解析度 2048x1024 的圖檔後，大小只剩下 481KB。下載時間只需要原來的 1/11。

使用前需要使用 npm 安裝 yeoman 和 generator-360-photo

npm install -g yo
npm install -g generator-360-photo

generator-360-photo 用到sharp來最佳化照片，如果在 Ubuntu linux 或 windows bash 環境下，需要使用

apt install build-essential

命令安裝必要的編譯工具。

安裝後切換到放照片的資料夾，就可以使用

yo 360-photo

命令來建立 360 照片網頁啦。

如果使用上有遇到什麼問題或建議，可以前往專案網頁回報。

  1. 環景圖↩