幾週前在 Modern Web 2015 分享了以「Javascript，征服世界是可能的嗎？」為主題的演講。

演講主題靈感來自於 The JavaScript World Domination 一文。

原本想用編年史的形式表現，一直發展到演講的前幾天，才演變成最終使用的形式。

公布講題後，一些人先跑來問我 JS 是不是真的可能征服世界。
我能理解大家想要知道最終的答案迫切。但其實大多數時候，聽別人的預測，還是不準確的比率更高。

就我而言，了解別人推論的過程，與他所引用的資料，會影響我對他預測結果的信賴度。哪些資訊是我所不知道的（秘密），哪些是我知道但沒有意識到與推斷目標關聯性的。從推敲的過程中，我可以學到一些新東西，也可以產生一些新想法。這樣的過程比偷看答案有趣地多。

這份投影片裡面分享了四個 JS 征服世界的秘密，你是否已經知道？我的觀察跟你的觀察一致嗎？有沒有什麼其他你觀察到的秘密想分享哩？

I've finished another iteration of dogfooding with Firefox OS 2.2. This is the version by far I'm pretty enjoy to use in daily base, without a backup Android phone.

Since my main usage of smart phone is browsing news and web sites, the new Browser frame serves me well.

The edge swiping is still awesome. Swipe left to right or vice versa from the off screen is more efficient than task manager.

In task manager, a small close button in bottom left of each card, make a more intuitive way to clean a web app.

Some web app made the dogfood more easier.

• FeedSpider: The news feed via feedly

• Social

• Facebook and Twitter: Browse their web site, then add them on Homescreen* Map

• Google Map:  Browse the web site, then add it on Homescreen* Note taking The last thing I want to have is the bookmark sync.

Since the dogfooding experience is so positive, I'll challenge with dogfooding nightly build in next month.

This time, its different. The transpilers are build-time polyfills that fill the gap of current browser/server implementation and the newest JS/CSS specs.

Transpilers trans-compile Javascript and CSS to current workable version, so developers could be more productive with JS/CSS latest features and transpilers would translate them into current supported version of code.

From my opinion the most useful es6 feature is arrow functions (=>) which comes from coffeescript. This syntax sugar bind the this value automatically, so developer wont forgot the binding anymore.

The original code is

(function() {
  ‘use strict’;
  document.addEventListener(‘DocumentLocalized’, function() {
     // App.init();
  }.bind(this));
}());

We can use arrow function to replace function() {}.bind(this) to () => {}

(function() {
  ‘use strict’;
  document.addEventListener(‘DocumentLocalized’, () => {
     // App.init();
  });
}());

Currently the arrow functions only default enabled on Firefox. So developer could not use this directly on their project. With babel javascript transpiler the js could be translated to current workable version automatically.

(function() {
  ‘use strict’;
  document.addEventListener(‘DocumentLocalized’, function() {
     // App.init();
  });
}());

The transpiler will know the content does not need 'this' reference and skip the binding. Note the Javascript transpiler still stick into vanilla javascript. It does not invent new syntax, but it make new specs could be used or experiment in current environment.

From CSS perspective, CSS variables brings variables into CSS. Pre-define some color and use everywhere on project is possible.

The origin style is

a {
  color: #847AD1;
}

pre {
  padding: 10px;
}

It's frustrated when the stylesheets expand larger and we need to change the new color or size everywhere.

We can use CSS variables to predefine the changeable stuff into pseudo ':root' element.

:root {
  –maincolor: #847AD1;
  –size: 10px;
}

a {
  color: var(–maincolor);
}

pre {
  padding: var(–size);
}

Looks good. But the same situation occurred. Currently the CSS variables only support on Firefox. So developer could not use this directly on their project. With myth CSS transpiler the CSS could be translated to current workable version automatically.

a {
  color: #847AD1;
}

pre {
  padding: 10px;
}

Note the CSS transpiler still stick into CSS specs. It does not invent new syntaxes like LESS or SASS does. It just make new CSS specs could be used or experiment in current environment.

Besides the feature polyfill, running transpiler before deploy also help developer catch out the error since transpiler will traverse the source and parsing syntaxes. Transpiler will bark you when any error in your source.

You may wonder setup an environment with above JS/CSS transpiler seems take some time. webapplate 2.3.0 already integrated with babel  and myth grunt tasks to auto transpile your JS/CSS code to current workable version. webapplate jshint/githook also support es6 syntax validation (yes the .jshintrc is exactly borrowed from gaia project), so your project is future proved and keep maintainable.

我會想要把看過的書籍、電影，喜歡的 Youtube 影片，貼過的文章等記錄下來，之後可以方便回顧。過去要這麼做，少不了得手工紀錄，但手動紀錄其實是相當沒效率的。

過去幾年裡，我使用 Google 日曆紀錄簡單的一行日記，使用 Anobii 紀錄讀過的書與心得，使用豆瓣電影紀錄看過的影片，使用 Facebook/Google+、Blogger 等分享連結與寫文章。最近我的做法仍然沒有改變，但會利用 IFTTT 來自動將我更新的書、影片、分享過的連結等自動紀錄到我的 Google 日曆中。

IFTTT 是一個幫你連結各種不同網路服務的自動化工具，包括 Google Calendar、Facebook、Evernote、RSS 等各種服務。其運作方式是先指定一些需要的配方（Receipe）。

IFTTT 會定時追蹤你使用的一些服務的狀況。當你的配方中包含的服務的內容改變時（如 Blogger 上有更新的文章），IFTTT 可以自動將結果添加到你的另一個服務中（如加入至日曆）。

以我自己為例，要將 Blogger 上的文章更新到我的日曆，只需先找出我的 Blogger RSS http://blog.gasolin.idv.tw/feeds/posts/default，然後建立「RSS -> Google 日曆」的配方即可。Anobii 或豆瓣的做法也類似。

   另一類則是從社群網站將文章加到日曆，也是建立簡單的規則即可做到。

我的生活紀錄 (LifeLog) 現在能自動記錄的資料有：

• Facebook 貼文
• Blogger 貼文
• Anobii 書籍
• 豆瓣書籍 / 音樂更新
• Youtube 設為喜歡的影片

Update at 2016/12/19

• Twitter 貼文
• Todoist 完成的事項

如果你有其他自動生活紀錄 (LifeLog) 的想法，也歡迎與我分享。

Claim: this exercise is for experiment, not for product.

According to wikipedia, f.lux adjusts a computer display's color temperature according to its location and time of day. I always use it on my Mac to make my eyes more comfortable at night.

So, the topic is about if we can bring that experience on Firefox OS. Adjust display's color temperature generally is a system specific issue. But actually it can be categorized as an CSS trick if we like to make it on web (a gist to mimic the f.lux effect).

To quick experiment if it doable or not, the validation steps are:

1. open the WebIDE on Firefox Developer Edition 2. download and open emulator (I choose v2.2) on WebIDE. 3. To debug system app, choose System from top left selector in WebIDE. 4. once connected,  select the html tag and add style **filter: brightness(0.8) sepia(0.9);** into the element.

The live view changed to f.lux like color temperature.

So it works!

To make it persistent on real device, edit [gaia/apps/system/style/system/system.css](https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/system/system.css#L5), add above style into html tag. Run make reset-gaia then you have the style applied on device.

What's Next​

The above experiment will change your device's color temperature permanently, which is not what f.lux do. To make it as option, you can add an option in settings > developer panel and add a observer in system to dynamically add such style into system html tag.

If you feel the strong desire to have such feature happen on Firefox OS device, fire a bug on bugzilla.