Skip to main content

我如何做個人自動化紀錄-2017版

· 6 min read

為什麼要做個人自動化紀錄？​

有人會問，Facebook/Twitter 不就可以記錄大小事了嗎？如果會這麼回答，那就實在太天真了😏。FB 上也許包含了自己覺得值得分享的事，但生活中還有諸多事情值得記錄，而不適合與大眾分享。 擁有自己的一份完整數位化生活記錄，是我今年的個人目標之一。要達成這個目標，需要藉助一些自動化紀錄工具，好讓整個過程變得自然而不困難。

照片自動化備份 📷​

  • 360CAM 所拍的相片一律備份到手機
  • Dropbox, 自動從手機上傳照片
  • Google 相簿，自動從手機上傳照片
  • NAS (Synnalogy), 從 Dropbox 同步照片。由於 Dropbox 空間有限，會不定期將 Dropbox 上的照片手動整理備份到 NAS 上.

照片備份規則​

我的照片並不算多，但若有出遊的月份通常照片會暴增。所以我的基本備份規則是依年份，並以雙月份命名資料夾，若是當月有重大活動則直接在檔名中標注。 例如 2016 年的照片資料夾裡會有2016_1011，或是2016_06倫敦這樣的命名。

在整理照片的時候，每當遇到特別喜歡的，我會另存到 Dropbox 中的一個依年份歸檔的資料夾，例如 2017 年的精彩照片我會另存到 dropbox/spot/2017資料夾中，這樣隨時可以找出來欣賞。

運動自動化紀錄 :walking:​

  • 記步，睡眠紀錄：小米手環 2
  • 體重：小米體重計

今年將每天預定的步數由 3000 步提高到4000步，略高於平常的活動數字， 每天要達成這個目標的話，需要特意地多走幾步路。

update (9/1): 後來不再帶小米手環 2，覺得記錄睡眠與步數意義不大。同時為了降低多走路所需要的意志力，把每日步數改成更容易達成的 300 步，只要開始走，通常都會超過需要的步數。

生活事件自動化紀錄​

延續用 IFTTT 做自動生活紀錄這篇的思路，我把看過的書籍、電影，喜歡的 Youtube 影片，貼過的文章，每日完成的事項都記錄到 Google Calendar 中，以方便之後回顧。

自動閱讀 / 觀看紀錄 📚​

對於書籍與電影，我使用 RSS + IFTTT + Google Calendar 來自動紀錄。 當我在 Anobii 或豆瓣上修改狀態，Anobii 或豆瓣的 RSS 也跟著改變，這時 IFTTT 會將 RSS 中的新事項紀錄到 Google Calendar 上。 對於 Youtube 上 like 的影片，Facebook 或 Twitter 上新貼的文章，也會透過 IFTTT 紀錄到 Google Calendar 上。

透過 RSS 轉 IFTTT 紀錄

直接透過 IFTTT 紀錄

自動紀錄每日完成的事項 📓​

這部份是自動紀錄的核心。使用 Todoist + IFTTT + Google Calendar 即可達成。 我在 Google Calendar 上使用一個單獨的日曆 (成功日記) 來紀錄每日完成的事項。

If task completed in Todoist, Then log into Google Calendar

從 Email 新增待辦事項 ✉️​

為了更方便地蒐集待辦事項，我參考這份影片 https://youtu.be/V7Dk7pzjJmM?t=11m30s 來將 Todoist#Inbox 設定為 Email 聯絡人，這樣處理 Email 的過程中也能快速地新增待辦事項。

紀錄看過或待看的網頁 🌐​

因為我唯一的收件夾是 Todoist，所以若看到值得閱讀 (紀錄) 的網頁，桌面上我使用自己開發的瀏覽器 Web Extension，搭配 IFTTT 去紀錄網頁到 Todoist，或加個短評分享到 Facebook 或 Twitter。 在手機上就直接使用 Todoist 和 Facebook 等 App 達到一樣的效果。

If new task then create new Todoist item, If share then share to Facebook and Twitter.

文章更新時自動提醒 ⏰​

除了偶而瀏覽 Facebook 或 Twitter 上充滿同溫層的快餐短文，我也使用 Feedly 訂閱一些自己挑選過的網站。 然而有些網站並未提供 RSS 訂閱，手機上我會使用Web Alert來取得網頁更新提醒。 搭配 Todoist 稍候閱讀列表，我可以不在看到文章連結當下急著消費，而是在有空閒的時候才閱讀這些文章。

半自動工作紀錄 💼​

透過翻看 Todoist 或 Google Calendar，我可以輕易地將過去一週達成的事項整理出來，再送 PR 到 Github 上。 也可以說這塊目前只能算半自動化地列出過去事項列表，可以再繼續改進。

自動化網站部署 🌐​

目前已使用 Github 來放我的個人網站與部落格，透過與 Travis CI 整合，我所修改的任何內容，在幾分鐘之內都會自動部署到網站上。

如何做可參考 Hello Hexo (個人網站自動化部署) 和 Automatically deploy new commit to github pages via Travis CI

Auto website deploy flow

一些可以直接運作在瀏覽器的專案 (如 BlocklyDuino 和 Saihubot)，我會直接將 gh-pages 設為預設分支，所有改動直接 push 到這分支中。 這樣一有改動即可在網頁上看到更新成果。

個人工具箱2017二月

· 3 min read

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

2011 [^1] 年時紀錄了一次當時的個人工具箱，去年開始再次紀錄 [^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​

2016年，我開源了哪些專案(My open source projects in 2016)

· 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​

May​

  • New Firefox Sites Permission

June​

  • Firefox Password doorhanger

July​

  • Firefox Devtools Inspector

Aug​

Sep​

  • Firefox Devtools Network Monitor

Oct​

  • blog personal tech blog

Nov​

Dec​

Automatically deploy new commit to github pages via Travis CI

· 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.

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

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

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

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

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.

Debugging Firefox Devtools in 2016

· 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.

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.

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​