[學習現場] ECMAScript 6 Tutorial

今天在看一篇 http://ccoenraets.github.io/es6-tutorial 的教學，覺得很有趣，但也採了一些雷...不過也蠻推薦想要學習 ES6 的人可以看這篇，真的是蠻簡單的 intro. 值得一看。


遇到問題
(1) 6. Setting Up Webpack 章節
這個章節主要是希望引導介紹 module 的概念，ES6 支援 module，但是 ES5 本身就沒有 module 這個 feature，但是當你編譯 ES6 的 module 到 ES5 的時候，編譯還是要靠第三方的 lib 讓 ES5 也能實作該 module，而這類的第三方工具，很有名的像是 webpack, Browerify，當然文章有提到 babel 兩種都有 support，但是文章以 webpack 為主。

所以，需要加入 babel-loader 以及 webpack 這兩個 package:

npm install babel-loader webpack --save-dev

但是加入 npm webpack 到專案的時候出現這個 log:  The package webpack does not satisfy its siblings' peerDependencies requirements!

就我猜可能是 babel-loader 需要的 webpack 版本可能相依性的關係... (單純猜測...)。

npm install babel-loader webpack@1.x --save-dev 就行。

參考:
https://github.com/webpack/webpack-dev-server/issues/6

誤刪 npmrc 解決方法之一

今天腦殘，把 npmrc 的內容全砍光，因為我發現有個 private registry 還是連到前公司，但是 server 是掛掉的狀態，所以就...，因為每次 npm i  都有 error log，一定得把那個 private registry 移出我的 rpmrc，一個快速，dd指令立刻存檔，就掰了...

so，搶救 npmrc 的內容，主要是有個 //registry.npmjs.org/:_authToken=XX 這個 token 要補回來。(我都不知道幾百年沒登入 npm 了，就算到登入後到 https://www.npmjs.com/settings/tokens 頁面，也是看不到 token)

其實 token 只要下 npm login，重新利用 cli 登入 npm 就行，他會自己幫你把 npmrc 的  token 補回來。

npm login 需要補登帳號, 密碼, 以及 email，所以要記得你當初註冊 npm 的資訊，忘記的話就要找回密碼了。

Meteor 安裝 jQuery validation

用 meteor 指令安裝 jQuery Validation(套件網址)

指令:
meteor add themeteorchef:jquery-validation


用法:
一樣參考套件網址，主要有兩種做法，一個是把驗證的設定寫在 input 的 attribute 裡面，像是 <input type="text" name="name" class="required"> ，但是一樣要用 js 去呼叫 validation 執行($("XXXX").validate())。

另一做法是把驗證的規則寫在 validate 的 options 裡面。像是:

基本上做法一,二都會在 onRender 的地方呼叫。
記得也要把 submit 那顆按鈕的預設行為取消 (submit preventDefault 那一段)，不然也許邊驗證時也早就 redirect 到 action 出去的頁面了 XD。

樣式改寫 for Bootstrap:
因為 jQuery Validation 在驗證到錯誤或是未填的 input 時，會在 input 附近塞入 error message，但是預設的樣式並不符合 bootstrap 的樣式，像是:

為了讓錯誤的樣式符合 bootstrap 的樣子，要改寫一下 jQuery Validation 的 setDefault 的一些 method，像是 highlight, unhightlight...，但是因為整個網站下，有很多頁面只要有用到 jquery validation 的地方都必須要改寫驗證，為了節省一直複製貼上這一段到每一個頁面/template 的 onRender 去，所以我把這段改寫放到 Meteor.startup 的 function 去(我在根目錄下新增一個 startup.js 來擺這段 code):

改寫後，暫時符合預期:

其實在網路上有找到兩個解法，這個是我用起來比較順的，只是寫出來分享一下而已，也不知道好不好~自己斟酌摟 :P。

參考:
http://jsfiddle.net/m2o6c2vj/3/
http://stackoverflow.com/questions/18754020/bootstrap-3-with-jquery-validation-plugin

讓 Meteor 在換頁時頁面定位到最上方

最近在用 meteor 搭配 iron-router 做一個 web 後台的雛形出來，但因為 meteor 的設計還蠻特別的，所以有些行為跟一般做換頁的網頁效果不太一樣，主要是比較像是 Single Page Application，你在換頁的時候感受不到瀏覽器有在重新 loading 的感覺，所以換頁時，你的 viewport 可能會停留在上一頁的看到的地方，為了不讓 user 感到困擾(<- 視頁面情況..)，在 github issue 上面找到一個解法，要在 iron-router 的 filter 加上一個方法，這個方法用來讓頁面捲到最上方，然後把這個方法掛在 Router 的 onAfterAction。


(＊ 我的 meteor 版本是 Meteor 1.2.1)

那一串 github issue 有很多討論，但是我是用這個方法。
有成功拉，好險好險 :)

[chai]The ChromeDriver could not be found on the current PATH

在使用 chai 的 webdriver 時出現了一點問題，其 demo code 如下，基本上同官方網站:

// test/index.js
var sw = require('selenium-webdriver');
var chai = require('chai');
var chaiWebdriver = require('chai-webdriver');

// Start with a webdriver instance:
var driver = new sw.Builder()
  .withCapabilities(sw.Capabilities.chrome())
  .build();

// And then...
chai.use(chaiWebdriver(driver));

// And you're good to go!
driver.get('http://github.com');
chai
  .expect('#site-container h1.heading')
  .dom.to.not.contain.text("I'm a kitty!");

然而在執行的時候出現這個問題:

node test/index.js
XXXX/node_modules/selenium-webdriver/chrome.js:54
        'http://chromedriver.storage.googleapis.com/index.html and ensure ' +
                                                                            ^
Error: The ChromeDriver could not be found on the current PATH. Please download the latest version of the ChromeDriver from http://chromedriver.storage.googleapis.com/index.html and ensure it can be found on your PATH.
    at Error (native)

而且其實我的 chromeDriver 已經是最新版了...

後來在 stackoverflow 找到了這個解法，還蠻有用的:
http://stackoverflow.com/questions/27733731/passing-requirechromedriver-path-directly-to-selenium-webdriver

修改結果如下:

var sw = require('selenium-webdriver');
var chai = require('chai');
var chaiWebdriver = require('chai-webdriver');

// Start with a webdriver instance:
var chrome = require('selenium-webdriver/chrome');
var path = require('chromedriver').path;

var service = new chrome.ServiceBuilder(path).build();
chrome.setDefaultService(service);

var driver = new sw.Builder()
    .withCapabilities(sw.Capabilities.chrome())
    .build();

// And then...
chai.use(chaiWebdriver(driver));

// And you're good to go!
driver.get('http://github.com');
chai
  .expect('#site-container h1.heading')
  .dom.to.not.contain.text("I'm a kitty!");

FYI.

Node.js createWriteStream 出現 spawn ENOENT error

剛好在處理圖片上傳, 圖片 resize 的功能，結果 resize 一直出錯，根本沒寫到 rezise 的 path 檔。

結果只是 GM 沒裝...

sudo apt-get install imagemagick

這樣就好了 T_T。