Skip to main content

· 3 min read

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

20111年時紀錄了一次當時的個人工具箱，去年開始再次紀錄2。 今年給自己定的一大目標是個人自動化，就從年初開始紀錄自己工具箱的改變吧🤹，持續更新。

主要裝備​

  • 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
  • Synology NAS: 電影，影集，照片，資料備份

Windows & Linux​

網站工具​

使用多年的 Anobii 已經漸漸缺乏維護，嘗試使用Readmoo 分享書替代。

設計​

開發​

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

常用插件​

Browser

  • tab center VSCode
  • Document This
  • EditorConfig for VS Code
  • ESLint
  • Git Blame
  • WakaTime JS
  • Babel
  • ESlint

娛樂​

  • vlc
  • steam, origin

Android 手機​

  • 瀏覽器：Firefox for Android
  • 網頁更新通知：Web Alert
  • 閱讀：Palabre (feedly), Readmoo
  • 稍候閱讀：Pocket
  • 信箱：Inbox
  • 地圖：Google 地圖
  • 內建相機，內建時鐘
  • 相簿：Dropbox, Google 相簿
  • 社交：Facebook, LINE, Twitter, WeChat
  • 待辦事項：Todoist, GTasks,
  • 密碼：LastPass
  • 線上影片：Youtube, Eleven Sports
  • 音樂：豆瓣 FM
  • 健康：小米運動，Pokemon Go

工具

  • 公事：Expensify, Duo Mobile
  • 旅遊：Google 翻譯，TripAdvisor
  • 心智圖：SimpleMind, XMind
  • 影片播放：MX Player, DS video
  • 記錄看書狀況：Readmoo 分享書
  • 線上學習：Udemy, Pluralsight, Duolingo
  • IFTTT

Reference​

· 2 min read

今年隨著 Firefox OS 退場，工作內容有了不小的改變。年初時嘗試了一些不同的方向，也修了一些 Firefox 界面 bug，後半年則主要專注於開發者工具改進這塊。 以下是我今年主要參與或建立的開源專案。

Jan​

  • Webby send command to your internet assistant through the web

It's playable online

Feb​

Mar​

Apr​

https://gasolin.github.io/aframe-href-component/

May​

  • New Firefox Sites Permission

June​

  • Firefox Password doorhanger

July​

  • Firefox Devtools Inspector

Aug​

Sep​

  • Firefox Devtools Network Monitor

Oct​

  • blog personal tech blog

http://blog.gasolin.idv.tw/

Nov​

Dec​

· 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