npm ERR! Error: CERT_UNTRUSTED

在進行npm安裝的時候，發現錯誤訊息：

npm ERR! Error: CERT_UNTRUSTED

經過Google後，在此得到解答：https://groups.google.com/forum/#!msg/nodejs/aonVboqx8wM/QbwEZFEUDxcJ

只需輸入指令：npm config set ca ""

詳細內容請參考：

1. https://github.com/npm/npm/issues/1580#issuecomment-2486457
2. https://github.com/npm/npm/issues/4249

Node版本不同產生的問題

這幾天和David，Simon一起研究websocket的應用，
在我寫好websocket的server時，分享給David進行測試安裝，
不過在他的機器運行時，出現以下的錯誤訊息：

TypeError: Arguments to path.join must be strings at path.js:360:15 at Array.filter (native) at exports.join (path.js:358:36) at exports.send (/root/Ethan/WebSocket-Example-for-Device-By-Server-Side/node_modules/express/node_modules/connect/lib/middleware/static.js:129:20) at ServerResponse.res.sendfile (/root/Ethan/WebSocket-Example-for-Device-By-Server-Side/node_modules/express/lib/response.js:186:3) at /root/Ethan/WebSocket-Example-for-Device-By-Server-Side/server.js:23:9 at callbacks (/root/Ethan/WebSocket-Example-for-Device-By-Server-Side/node_modules/express/lib/router/index.js:272:11) at param (/root/Ethan/WebSocket-Example-for-Device-By-Server-Side/node_modules/express/lib/router/index.js:246:11) at param (/root/Ethan/WebSocket-Example-for-Device-By-Server-Side/node_modules/express/lib/router/index.js:243:11) at pass (/root/Ethan/WebSocket-Example-for-Device-By-Server-Side/node_modules/express/lib/router/index.js:253:5)

但是在我的測試機確是運作正常的，所以開始請教Google大神，
找到了這篇解答：stackOverflow
才知道原來是node版本的關係，在res.sendfile時，

在Node JS v0.10.0以上的，需要使用 res.sendfile('file.ext', {root: __dirname})

這種方式才不會出錯，我的測試機Node版本為v0.8，所以可以用

res.sendfile(__dirname + 'file.ext') 這種寫法。

先寫筆記下來，若有不正確地方請各位大大指教，感謝！

好用工具備份文章

先備份起來，之後可以使用

• Markdown

更新中…

Google Chrome Extension Study

在2012年參加Yahoo! OpenHack的時候，就有看到許多大神們，使用Chrome Extension實作出讓人驚豔的作品，實在太厲害了 m( _  _ )m
( p.s. 我們的作品叫“Guess What？” ，感謝一下當時的夥伴 +Caesar Chi +Simon Su ，我才有機會參加這種大型的Hackathon)
不知道何時才可以看到各位大神們的車尾燈(遠目~)

目標

---

這次主要的需求是希望能夠在Extension外掛裡，勾選各處室的E-mail後可自動填入Google mail郵件的寄件者欄位或是副本欄位中，若在Google document中，則在分享給使用者的欄位自動填入Mail list。 Mail資料的來源則是從AD server撈出來經過RESTful server處理過後，才會吐到extension呈現出樹狀結構組織讓使用者進行勾選的動作。

實作過程

---

相關程式碼在我的Github上：Chrome-Extension-Tree-Case

在此說明我的製作流程，可搭配Github上的程式碼相互對照，就不貼上程式內容。
製作流程為，先設定好manifest裡必需的內容(官方文件)，因需求中需要二個功能：

• 新開tab讓使用者做登入的動作
• 在點選GDOC和Gmail頁面時，可以讓資料自動輸入至欄位中

因此在permissions設定新增了tab和google會使用到的網域，content_scripts設定新增了matches:['<all_urls>']與和網頁溝通的contentScript.js。

新增了這二個設定後，我就可以在popup.html裡得知目前的使用者是否有登入，若沒有登入則新開登入頁面的tab，讓使用者登入。

登入後透過dynatree這個套件，將從後端得到的JSON資料自動展開成樹狀組織呈現在popup.html頁面上，並且將勾選的email資料，傳送到contentScript.js與當前網頁產生互動的行為。這個流程中，還穿插了chrome.extension.onMessage.addListener和chrome.tabs.sendMessage這二個API的使用。

在popup.js裡，只要當組織樹被click選取的時候，即觸發sendMessage，將勾選的資料推播至content_scripts，contentScript.js裡面新增一個監聽的Event，接收傳送過來的資料，並偵測使用者在DOM上的動作，只要引發click事件，且是TEXTAREA輸入欄位的話，即將Email資料填入欄位中。

其中要克服的話，Google mail或是document可以輸入的欄位很多，我怎麼知道是哪一個呢？！沒錯，我是不知道，但我知道它的寄件者欄位和副本，還有密件副本的欄位一定是TEXTAREA，所以我使用document.addEventListener的方法來得知目前使用者click的tag是什麼，若是TEXTAREA則自動填入mail。詳細程式可參考：popup.js

這是目前和同事們討論出來可以解決的方案，各位看倌若有更好的方式可以正確得知的話，歡迎提出來一起討論！

另一個重點項目是Google document的分享功能，它是用iframe的方式呈現，因此我用廻圈的方式，取出當前的iframe的名稱share-client-content-iframe，並且透過contentWindow.addEventListener的方法正確監聽到使用者在iframe裡的動作，進而將值填入正確欄位中。詳細程式可參考：contentScript.js

遇到的問題

---

• 與傳輸資料的Server-side溝通的話，需到manifest.json將網域加入permissions的設定中，manifest.json可設定信認的網域。
• 一開始遇到比較大的問題是Cross-Origin XMLHttpRequest的問題，可參考其他大大提供的解決方案。

使用的套件

---

Dynatree

相關API使用

不可選擇unselectable: true
Hide checkboxhideCheckbox: true
預設勾選取select: true
子項目預設展開expand: true
選擇預設停留位置activate: true
圖示為FolderisFolder: true
Mouse over提示tooltip : "content"



參考文件

---

• http://pydoing.blogspot.tw/2011/12/javascript-element-iframe.html
• http://expressjs.com/api.html#res.json
• http://wwwendt.de/tech/dynatree/doc/samples.html
• http://open.chrome.360.cn/extension_dev/extension.html#method-getBackgroundPage
• http://open.chrome.360.cn/html/dev_browserAction.html#method-setTitle
• http://www.slideshare.net/lis186/20100915-google-chrome-extension
• http://tonytonyjan.net/2012/05/25/get-start-with-chrome-extension/
• http://ithelp.ithome.com.tw/question/10133537
• http://stackoverflow.com/questions/10710674/html5-localstorage-clear-all-data
• http://technotab.com/10-best-free-ebooks-every-developer-should-have/
• http://stackoverflow.com/questions/15601302/chrome-ext-how-can-i-pass-parameter-value-from-popup-js-background-js-to-conten
• http://korprulu.blogspot.tw/2012/12/chrome-extension.html

JavaScript新增DOM Element

今天想利用Chrome Extension在Gmail輸入mail的欄位旁邊加上一個Button，可以讓使用者做些好玩的事。

可以利用下面程式碼達成這目標：

document.addEventListener('click', function(e){
  var xx = e.pageX, // 取得滑鼠X位置
      yy = e.pageY; // 取得滑鼠Y位置
  var node = document.createElement("div");
      node.style.position = "absolute";
      node.style.top = yy + "px";
      node.style.left = xx + "px";
      node.style.width = "50px";
      node.style.height = "50px";
      node.style.backgroundColor = "red";
  document.body.appendChild(node);
})

但是…

在實作方面還有z-index的問題需要解決，有時候會讓插入的button顯示在下一層？

還有如何讓button消失？什麼時候消失？這部份的問題也要考慮。

如果要刪除剛剛新增的DOM Element的話，可以利用下方程式：

var nodes =  document.getElementsByTagName('div'); //傳回DIV element的array   
//remove last div
if(nodes && nodes.length > 0){
    document.body.removeChild(nodes[nodes.length-1]); //刪除最後面的DIV
}

404！美麗的錯誤

網站出現錯誤機會總是難免的，如何讓自己在失誤時，又可讓使用者不這麼生氣，反而會心一笑，我想這是前端必需學習的功課。

以下收集了許多有關前輩們對於發生404錯誤的處理畫面，每一個作品都是值得學習的對象。

加油，繼續努力~

晚點再來整理一下 :D

參考來源

---

http://ldope.com/news/design/404-not-found-error_web-page/

http://blog.eztable.com.tw/2012/05/17/set-up-an-interesting-404-not-found-page_1/

http://404notfound.fr/

Nginx取得url的parameter

對於Nginx沒有很了解，但即然有這方面的需求，就來問一下G神吧。

尋找了一下，得到的結論是：

• 可以取得url的parameter
• 可以取得header
• 可以重設header？(待確認)

如果版友有更詳細的解說歡迎回覆，感謝！

參考來源

---

http://e-mats.org/2011/07/nginx-and-rewriting-based-on-get-parameter-url-parametersarguments/