熱血漢誌 - 技術新鮮人到技術經理人，必懂的事

電腦安裝軟體清單 MacOS M1 Download by appstore AnyDesk Remote Desktop Telegram Xcode - Line Office Divvy Xnip Required download Chrome CopyClip2 VSCode Edge Docker Postman iterm2 android studio SyncThing Caffine Database Robo3T TablePlus SequelPro Database server Postgres.app dbngin Cli Homebrew nvm git alias https://github.com/GitAlias/gitalias#install-with-typical-usage oh-my-zsh git plugin oh-my-zsh github plugin Meeting Slack Zoom mmhmm Doc Office 365 Option Dropbox Evenrnote oneDrive

重要更新 Hermes Support Hermes 是一個針對 React Native 於 JavaScript 最佳化編譯處理的專案，此次主要更新在於 iOS 環境上的優化，至於 android … (要改得太多，就改天吧！ Inline Requires 之前都只能用 import 的方式，如果只是某個區塊要使用，總是會覺得記憶體無法妥善回收，這方面的優化，對於記憶體使用相信會有一定程度上的改善。 React 17 版本更新支援 其他很重要的更新 摒棄 Android API levels 16-20. （本產品不支援舊有手機，謝謝） Xcode 12 / CocoaPods 1.10 ，這點很重要 cocoapods 還沒有更新的朋友，請加速！ Node 12 為最低環境！（還在採用 v10 的朋友們，哭哭 … Flipper 更新到 0.75.1 參考文件 當然是官方網站 https://reactnative.dev/blog/2021/03/12/version-0.64

React 新版本控制方案 React 版本大躍進，就在時間 2016/2/19 React 宣布一個重要消息，就是從 原本 v0.14.0 下一個版本為 React v15.0.0 。 這段升級實在是讓人嚇了一大跳，察看一下，今天又還沒到 4/1 愚人節，這肯定是對於 react 的陣營來說的確是投下一個震撼的消息。 而 react 也對 v15.0.0 這個重大版本宣布，寫了一篇文章仔細描述對於 react 社群未來的意義。 React 是前端模組開發首要選擇之一，相信目前學習 react ，或者在正式環境中使用 react 已經一個顯學，從官方資料中顯示，react 使用者已經有 79% 升級到 v0.14.0 版本的躍進 相信各位最大的疑問就是，v1.0.0 到底跑到哪裡去了？官方聲名中有明確的點出了為什麼跳過 v1.0.0 這個版本號， Part of React's growth and popularity is that it is stable and performant in production. People have long asked what React v1.0 will look. Technically some breaking changes are important to avoid stagnating, but we still achieve stability by making it easy to upgrade. If major version numbers indicate API stability and engender trust that it can be used in production, then we got there a long time ago. 將 v0 拿掉也意味著，『現在』 react 就已經是一個穩定的版本，可以適用於正式環境中，讓開發人員對於 react 的信任，接下來也同時依照 semver ，讓開發人員可以從版本號知道每個版本釋出的變動程度。 使用 react v15.0.0 的開發者，也意味著加入了 react 的整個生態圈中，不用再擔心是否會有重大的 API 改變，或者某些功能會任意的被...

facebook request not return email when using passport-facebook 自從 facebook api 改為 2.4 版本之後，項目就變的越來越多，變化越來越大。 對於 node.js 開發者來說，大部分開發者使用 login 或者帳號驗證機制大多會採用 passport.js 進行驗證。 因應到 facebook 2.4 以後的版本，特別要設定欄位的回傳，才會收到 email 的設定。 在一般使用下，如果沒有要取道額外授權，大部分都是直接使用 passport + facebook-passport 直接按照 demo 就可以設定完成。 但是如果像是要多要求一個 email 的話，而且不幸你得 facebook app 又是最近才開始建立的，勢必就只能使用 2.4 || 2.5 的版本。 就會發生取不到 email 的狀況，解法其實 facebook-passport 有提到怎麼進行。 說明連結 The Facebook profile is very rich, and may contain a lot of information. The strategy can be configured with a profileFields parameter which specifies a list of fields (named by Portable Contacts convention) your application needs. For example, to fetch only user's facebook ID, name, and picture, configure strategy like this. 意思指，如果你需要特殊權限，或者指定某些特別欄位的話，請必須要加入 profileFields ，設定需要的欄位（當沒有特別設定就會略過） 解法 在使用 passport 的時候，設定方法就需要設定類似如下 passport.use(new FacebookStrategy({ clientID: config.facebook.clientID, clientSecret: config....

近期內看到一個專案 io.js ，一開始的時候覺得很神奇，怎麼會突然出現一個內容跟 node.js 幾乎一樣的程式碼。之後開始在 node.js Taiwan 開始有了許多討論 。才發現事情的始末。 之後也才漸漸瞭解 io.js 的目的，至於發展會如何，就繼續觀察下去，總之相信這股衝擊對於社群以及開源生態是有效的，而且對於整體發展是有幫助的。（期待啦 ...) 在下就隨手把 Max 發出的非官方聲明翻譯成中文，目前看了資料這一份整理的比較有系統，也容易讓人理解 io.js 目標。

技術轉換需知，學習 Node.js 的前期準備 持續推廣 node.js 對於新手教學上，通常會遇到許多狀況，以及許多不同的迷思，總和出來其實可以看到一些常見的問題。 這篇文章也是藉由數次的活動發想實踐當中，延伸出來的導讀文章之一，也是每次在活動一開始的時候，就會跟大家介紹的這門技術的一個初探介紹部分。 學習之前，先學會忘記 就像是所有武功絕學一樣，要學一門武功，一個新的技術，首先你需要改變自己的既有思想，這實際上真的很難，但就對於自己來說，也很有多既有概念，框架其實是無法捨棄，但是既然決定學習一件新事物，那勢必就是要改變。 對於已經有學習過一些程式編輯，或者一些程式框架的開發者，建議一開始學習 node.js 的朋友，先忘記掉所有你學過的語言，以及開發方式，試著忘記既有框架的狀況下，去學習這門技術。 在沒有既定框架下，不去過分討論，比較任何語言上的差異，而是先從他的背後歷史意義，演進接著再瞭解近期的改變以及未來規劃等。 以 Node.js 來說，在 2009 年，給與的示範就是一個聊天室，也表現提高 high concurrency 的實做，在當時定爲爲處理高承載量的新語言新服務，透過 JavaScript 實踐出來的結果。 到了 2012, 2013 年開始， Node.js 朝向不同環境中，透過許多公司投入全職開發者，將 Node.js 發佈到不同平臺上，同時依靠社群的力量，開始有極具的成長，也帶來不同的聲量。 最近的趨勢是開始走向， Node.js 嘗試解決分散式系統架構，以及直接嵌入式系統中，所以意味着開始有許多不同的發展，也有發展出不同於 Web 的應用。 JavaScript 並不是 bala, bala, bala … 講了許多過去歷史，雖然說大家已經開始試著要去忘記以往框架這件事情，但是我相信一開始還是做不到，這真的很難，但是請務必嘗試著，至少試著親手輸入每次的程式碼以及每次的相關測試，哪怕只是 hello world，跟着一起從頭開始進行所有流程。 在開宗明義上，根大家說，Node.js 其實就是在寫 JavaScript ，拋棄以往對於所有瀏覽器上的謬誤，以及對於所謂 IE 或者其他瀏覽器上面可能發生的錯誤。現在開始所有的事情都發生在背後，全部的事情都是在伺服器裏面進行。 所以可以說是，Node...

semver node package.json, dependency module version operators 之前沒有注意到這個問題，現在 node modules 越來越多，原來在 npm 裡面早就有進行相關的版本管理。可以透過這個頁面看到詳細的描述資訊。 The semantic versioner for npm 特別要介紹的部份是， ^ 字元與版本關係 ^ 表示可以進行兼容模式，當第一個非 0 數字被符合之後，就會此此版本安裝。當可安裝版本為 > 0.1.5 ，此時是會直接使用 0.1.5 這個版本進行安裝。 如果一開始使用非 0 數字為版本，就會變成兼容模式，會去尋找符合第一個數字的版本，其他小數字本版號視為可以兼容。 目前 npm install node_modules --save 會採用 ^ 這個符號。 ^0.1.3 := >=0.1.3-0 <0.2.0-0 "Compatible with 0.1.3". 0.x.x versions are special: the first non-zero component indicates potentially breaking changes, meaning the caret operator matches any version with the same first non-zero 另外一種版本 ^1.2.3 := >=1.2.3-0 <2.0.0-0 "Compatible with 1.2.3". When using caret operators, anything from the specified version (including prerelease) will be supported up to, but not including, the next major version (or its prereleases). 1.5.1 will satisfy ^1.2.3, while 1.2.2 and 2.0.0-beta will not. ~ 字元與版本關係 版本需要數字符合，例如底下的例子...

uuid 與 guid 的差異 很多人都有使用過 MySQL 的 number auto increment, 可是實際使用之後就會發現，很快的數字會不夠使用，而且這個 id 是很容易被猜測出來連續性。 因此就開始進行了解，看到了 uuid 這個名詞，進而下去查詢發現 guid 的另外這個名詞，感覺上這兩個名詞似乎是有些什麼特殊關連。 這篇文章就小小記錄一下自己的查詢心得。

以前在寫前端的方式，會採取 html, css, js 分離的方式。這次活動邀請 Gias 來彰化師大與同學分享 Angular.js, 也比較了解 Angular 的概念，話說，把 HTML 當做一種 interface 的概念，其實還蠻不一樣的，就說法層面上會比較能夠說得過去，不過比對以前的寫法又覺得有點開倒車。 這邊是想要提出一件事情，這邊強調要快速開發，我們以一個 list link 為例子      <ul>           <li><a href="#">click</a></li>           <li><a href="#">click</a></li>           <li><a href="#">click</a></li>           <li><a href="#">click</a></li>      </ul> 如果加入 angular 的作法就會比較像底下的方式      <ul>           <li><a href="#" ng-click="click()">click</a></li>           <li><a href="#" ng-click="click()">click</a></li>           <li><a href="#" ng-click="click()"...

今天突然被問到這個問題，之前的設定方法其實都是透過起一個 server, 然後自己設定 listen ip, 另外一種方式就是直接指定成 0.0.0.0 ，這樣子也是可以指定到自己的本機。 然後稍微去網路上找幾個解決方法， 解決方案 ifconfig 如果最直覺的解決方案，當然就是使用 child process 直接進行解決，然後去 parse 最後回傳的結果，但是這樣子，好像有點……….蠢….. var util = require('util'); var exec = require('child_process').exec; function puts(error, stdout, stderr) { // parse….. util.puts(stdout); return parse result; } exec("ifconfig", puts); 使用 net, http 另外一種方式就是自己起一個 connection ，接著再去看一下自己從 request 所發出來的 socket. var net = require('net'); var socket = net.createConnection(80, 'www.google.com'); socket.on('connect', function() { console.log(socket.address().address)); socket.end(); }); 使用 dns 搭配 os 這個方法跟剛才的 net 方式有點像 ，如果是自己的話，應該會挑選這個方法來解決。 require('dns').lookup(require('os').hostname(), function (err, add, fam) { console.log('addr: '+add); }); 使用 os 在 os 模組裡面有提供許多好用的東西，當然裡面就直接有，netw...

coffeeScript comment style CoffeeScript 有幾種不同的註解寫法，以下作為介紹讓大家知道一下 know comment in Coffeescript 一行註解，在經過轉譯之後是不會留下任何記錄 #bala bala bala 轉 js 檔案之後 none 多行註解方式， ### bala bala bala ### 轉成 js /* bala bala bala */ 而實際上很多 documentation generater 都會有一個共同的開始，就是註解開頭必須要使用 /** 這樣的符號，因此如果透過 coffee 多行註解的方式轉譯還是會出現問題。這邊可以提供其中一種解決方式。 ###* * bala * bala ### 轉成 js 檔案， /** * bala * bala */ 看起來的確就像是我們要的方式，雖然有點蠢，不過也算是一個完整的開始，至少就讓我們先開始動工吧！ api 文件產生器 http://jashkenas.github.io/docco/ http://apidocjs.com/ http://yui.github.io/yuidoc/

iis node - build node.js runner on windows 很久之前就聽說過 node.js 可以執行 在 iis 裡面，可惜一直都沒有太多緣份執行 windows 環境，這幾天剛好把 windows 環境建置完成之後，第一個想法就是安裝看看 node.js 在 windows 環境裡面。 本篇文章將會帶領大家一步一步完成 iisnode 的建立。 基礎環境 windows .net framework Node.js installed 開始安裝 在開始之前還是要貼心提醒一下各位，記得安裝好 node.js ，在 windows 環境裡面已經具備有 node.js 的執行檔案，下載好 msi 安裝包之後，直接陸續下一步就可以完成了 現在微軟已經很方變得提供 WebMartix 這個平台給予輕量級開發者，到 WebMartix 的環境中，進行安裝檔案的下載包含 express 7.x, iisnode…相關套件。 WebMartix 下載頁面 開始安裝 WebMartix， 選項都 使用預設 即可，接下來會從所有詳細的安裝資料會陸續從網路下載下來，進行安裝。 接著最後會看到完成步驟，就表示 WebMartix 安裝完成。 使用 WebMartix 開始使用 WebMartix ，正常安裝完成後，開啟會看到如下的畫面 在這邊我們選擇新增一個專案，從範本庫裡面 接著選擇 node.js 專案，這邊我選擇 express 的專案 ， 輸入專案名稱之後，按下完成，畫面就會開始新增一個專案同時，會從網路上下載 express web 範本，複製到本地端。 以上步驟有正確完成，就會跳到專案畫面，有點類似程式編輯器的軟體，畫面如下， 接著按下左上角的 '執行' ，再選擇瀏覽器就可以看到開啟一個新的連結，也是大家最常看到的畫面。 WebMartix 我們就談到這邊，基本的環境就如此簡單可以架構起來。 後記 從 WebMartix 這個專案可以看到微軟對於 open source 開始有了許多不同方向的支援，讓開發者更為簡單的開發，同時讓初學者可以很快的加入他們的環境中。 當然 WebMartix 除了上述好上手的東西之外，其實還...

angular 關於官方教學自己做的一個簡短筆記，在官方基本教學流程中，已經給予大家大致的輪廓，到底 angular 怎麼去執行程式流程，進行 html render 以及如何將 html 變成 object，甚至到後面的 route, HttpRequest 取得資料方式 以下把 angular 官方網站提供的基本教學，做一個大致流程導覽，給自己一個簡單的紀錄。 angular 基本教學 http://docs.angularjs.org/tutorial step-0 這邊進行 angular 第一次接觸，教導如何 install angualr 以及，angular html template 如何進行運作。 Nothing here {{'yet' + '!'}} 網址 http://docs.angularjs.org/tutorial/step_00 ng-repeat step-2 加入 ng-model 了解， angular model 模型，如何使用 ng-model 與 html 進行互動 added app/js/controller.js <pre> function PhoneListCtrl($scope) { $scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S."}, {"name": "Motorola XOOM™ with Wi-Fi", "snippet": "The Next, Next Generation tablet."}, {"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet."} ]; } </pre> 網址 http...

通常 deploy 有許多種方式，最簡單的方式就直接採用 web hook ，特別是在 github 裡面有支援這樣的模式，你只要到 github project -> setting 就可以看到如下圖所示的方式 當然 github 預設提供了許多不同的 hook 方式給予大家做選擇，不過因為我只會最基本的 web hook ，就選用這個方式來進行吧。 設定 endpoint web hook 原理就是， 當開發者 push code web hook 啓動 會觸發某個 endpoint 在 web hook 裡面要設定的欄位就是一個很簡單，可以接收 POST 的 URL。 像這邊，我們可以設定 caesarchi.com/deploy 接著就是伺服器部分的設定了。（可以參考之前的文章 起一個 server and route ，或者參考 Node.js 台灣社群協作電子書 ）。 從 github 傳遞的訊息 透過 github webhook 他會透過 POST 的方式傳送資料，會帶過來一個名稱為 payload 的變數。 payload 傳送一串 JSON data 過來，因此可以透過 JSON.parse 還原回來原本漂亮的樣子。 裡面會帶來這次 push 上來的 commit, branch, files 等相關資訊，我們可以透過這些資訊來達到自己的目的。 待會將會提到這個部分。 另外如果自己目前沒有任何 server 但是想要測試 github webhook 丟過去的訊息為何！可以考慮使用 requestb.in ，觀察 webhook 後收到的資訊。 web hook 的啓動 首先，就是在伺服器端需要新增一個 POST Route ，並且可以執行程式伺服器的 shell 程式 。 在 POST 接收到之後，我們可以透過 Node.js child process 的方式啓動另外一個 shell 指令，進行部署動作。 這邊提供一個簡單的 code pattern. 從上面的程式我們可以看到到，透過 JSON parse 的方式，可以把 github payload 還原回 Object 。接下來都可以直接採取 JS ...

Brunch.io 初體驗 JavaScript 有 Grunt , CoffeeScript 有 Brunch 。如果你懂這句話，就知道 Brunch 是協助 static html, css, javascript 開發工具。 這邊就不比較兩者的差異，因為整個開發概念不大相同，一旦比較之後，又落入 JS vs CoffeeScript 安裝方式 npm install brunch 使用方式 產生新專案， brunch new [webapp] 如果想要使用自定的專案， brunch new [webapp] --skeleton [url] 檔案編譯 目的主要是將分散的檔案編譯成單一檔案，進行 files concat brunch build [--optimize] 檔案監控 當檔案變動的時候，就會自動進行 complier，如果加上 --server 參數將會建立起簡單型 server brunch watch [--server] 配合 Bower 另外可以配合上 Bower 進行 client side 程式進行版本控管，記得資料夾裡面要設定 bower.json .bowerrc Deploy 既然是 static file ，當然也可以使用在 github page ，當你已經把檔案更新完之後，最後進行 git checkout ph-pages brunch build 通常預設是編譯到 _public 資料夾底下，將底下的資料搬移出來，或者是移到某個你想要的 static folder 底下，再進行 git push origin ph-pages 接著到自己的 github pages 就可以看到 index.html 所應該顯示的頁面結果。 Skeletons 在 Skeleton 裡面已經有許多不同種類的基礎 Project 提供各位參考，裡面有許多好玩的地方。 https://github.com/brunch/brunch/wiki/Skeletons 當然如果你有建立自己的 Skeleton 歡迎自行修改 Project 進行專案的建立。 附註 brunch 預設 _ 底線開頭的檔案是不會進行編譯，假設以 app/style...

socket.io scaling out solution socket.io 一直以來都是在 node.js 許多 module 當中，受人注目的一個項目，自己也不例外，從 socket.io 6 進展到目前 socket.io 9 都一直持續關注他的發展。 長期以來這種 Comet 連線模式的環境，最讓人質疑的部份有幾個， server extend (scaling issue) message lost *. user connection 首先拿 server exetend 來說，最簡單的解法，同時也是 socket.io 支援的模式， 設定 socket.io redis config 使用 load balancer like 的機制 將 socket.io 服務視為一個 Application 因此就可以如下圖，所表示 http://blog.davidmisshula.com/images/4.png 使用者透過連線到 load balancer 之後，透過 load balaner 將資源分散到每個不同的 Application 機器，每個機器最終將會去向同一個 DB (SQL/ NoSql) 機器取得 session, user, message … 資訊回到應用程式當中。 讓每個使用者的資訊不致於斷線，在這邊 socket.io 預設的使用方式就是採用 redis。 這種連線方式其實有幾篇文章已經說明的相當清楚， http://blog.cloudfoundry.com/2013/01/24/scaling-real-time-apps-on-cloud-foundry-using-node-js-and-redis/ http://blog.davidmisshula.com/blog/2013/02/04/configure-haproxy-to-scale-multiple-nodes-with-stickiness-and-ssl/ 這邊的方式都是採用如同上述表示的規劃架構，可以達到 socket.io scaling 的機制。 當然聰明的各位也想到了，有需求就會有解決方案，因此也有廠商提供了類似的解決方案， https://www.firebase.com/ ht...

這次準備 WebConf 活動，受龍哥，PCT 的邀請講解 Node.js 相關議題，其實就技術來說與開發許多專案的前輩相比較，自己還是有許多地方需要精進，跟大家分享的方向也都是比較粗淺的部份，太多深入的議題可能就要請前輩來指導。 剛開始準備方向是希望與大家分享 Node.js 分散式架構上的應用，整體來說也比較像是自己在 MiCloud 環境中實際應用的架構，會使用到 Load Balancer，Middle server，DB Server ，還有加上 SmartOS SMF 服務，一開始的確是這麼想，也是要朝這方向準備。畢竟這樣的課題是自己日常生活所在接觸，準備起來也是稀鬆平常，還可以充當內部說明簡報，當然最後卻沒有這樣子做。 主因是相信來到 WebConf 的朋友大多沒有接觸過  Node.js，Node.js 某方面來說對各位也算是新的技術，如果對於一個沒有接觸過的朋友，相信還是 Node for beginner 會比較適合。 在思考準備方向的時候開始有了許多矛盾，也有許多不同的想法，當時心中更呈現了『一起來寫程式吧！』這個詭異的念頭，回到實際面就是，我只有 『30 分鐘』 ，超出這個時間，就表示… 『你已經死了』 轉變 許多念頭許多想法，但是三十分鐘只能讓我呈現一個重點。最後決定的主題就是『 說明 JavaSCript 本質 』，在這個課題上良葛格已經寫了一系列的好文章給予後進，當然我所能著墨的就在於 JavaScript 在後端程式語言如何應用，以及差異上怎麼分別，最少讓大家在這三十分鐘內能夠知道 『JavaScript 已經不一樣』，就跟當時第一屆 『JSDC 2012』 舉辦的心情一樣，只要讓參與者，感受到 JavaScript 已經不一樣了，能夠讓大家體會到這件事情，就足夠了。 開始著手改自己的大綱，以及投影片的製作開始，將幾個重要的事情點出來。  * 介紹平常所認知的 JS, 與實際 JS 差異  * 如何判讀自己在前端、後端的 JS 環境  * Node.js 如何替 JS 帶來新的契機  * 簡單介紹 Node.js 能夠做什麼 驚喜 這個 slide 放在 slideShare ，希...

Webconf 2013 兩天的活動，順利落幕，這次感謝龍哥、PCT 的邀請。 這次的分享以 { 重新認識 JavaScript } 為出發點，讓有興趣的朋友能夠初步的認識，JavaScript 這個語言除了對於瀏覽器以外，後端語言所帶來的衝擊。 歡迎大家多多指教，如有口誤歡迎指正，以下是投影片，和整個 slide 的準備稿。 如果對於 Node.js 有興趣的朋友，歡迎加入討論， Node.js Taiwan Node.js Taiwan 共筆書籍 Node.js Taiwan Facebook group JavaScript for backend from Caesar Chi JavaScript for backend - WebConf 2013 who is designer, raise ur hand. who is developer, raise ur hand. who is marketing. ASK 3 question to audience, raise ur hand and response with my question. all the ppl follow me. Do u write Javascript in both side(frontend and backend) know node.js? write some node.js or installed node.js before? Start the slide share Node.js we could not tell detail Node.js is JavaScript Node.js is JavaScript for backend. (found a back door image) So let's talk about JavaScript for backend. (3mins) who am I Node.js TW Node.js book Node.js Taiwan Party welcome join us. (2mins) Most of us known JavaScript is jQu...

EventEmitter 之前有介紹過 Event Emitter 程式運作基本架構 ，通常大家在瀏覽器中經常使用 Event 註冊方法，設置 callback 讓程式能夠採用 event-driven 的方式進行。 在 Node.js 裡面，很多時刻是面臨到自己要去設計程式流程，而不是只有等待某個程式建立好之後，我們去使用而已。 在程式的觸發上，今天來介紹一下到底程式開發上有什麼差異。 引用例子 這邊採用車子加油的例子來說好了。 完整程式範例 舊有架構 如果採用舊有的架構，首先我們要有一台車子，這台車子是沒有加油的狀態。 function Car() { _oil = 0 } module.exports = Car; 接著要開個開口(_addOilHandler)，讓車子可以加油，這是一台聰明車，所以可以自動把油加滿。 _addOilHandler = function () { if(_oil >= 100) { _oil = 100; } else { _oil += _oilInterval; // call self again. setTimeout(function() { _addOilHandler(_oilInterval); }, INTERVAL); } }; 看起來，一個會自動加油的車子就這樣子建構完成。 接著，程式要執行了，雖然這是一台會自動加油的車子，不過身為操作者的我們，還是要去檢查是否加油已經加滿，否則我們也不知道什麼時候可以開車。 以下就是檢查的方式。 var OldCar = require('./OldCar'); var bubu = new OldCar(); bubu.setOilInterval(10); bubu.start(); 看起來好像沒有什麼問題，可是卻發現，車子油加滿之後，並沒有進行任何通知，因此我們要增加進行持續檢查的機制。不斷的回頭看一下，什麼時候油滿了沒，持續詢問，當滿的時候才顯示訊息，因此增加程式如下， (function () { if (bubu.getCurrentOi...

Error Handling 跨網域問題 今天突然看到 阿嗚 丟出一個問題， 最近想要用 window.onerror 將部分環境的 JavaScript Error 回報給 Server，但 Static 與 Front-end 的網域不同，在 IE 以外的瀏覽器都因 Same Origin Policy 只能抓到語焉不詳的 "Script Error"... 有設定 CORS 的 Header 但也都無效，據說是瀏覽器都沒實作。有人有成功案例嗎？ 測試連結 http://josephj.com/lab/2012/window-onerror/demo2.html 剛開始我的問題是，看不懂希望的結果是什麼。 簡單來說，因為 static 檔案跟 dynamic page 是分別放至於不同 server. 如果需要擷取 JavaScript Error code line 的時候，會發生異常訊息， Script error. 可是實際上，我們希望出的是錯誤 code 行數與資訊，類似資訊如下 Uncaught ReferenceError: abc is not defined 測試方向 document.write 用抓取的（cross domain 失敗） iframe (cross domain 失敗） onerror 不管加入在 src file, 或者 inline script 都吐出一樣訊息 (失敗） 交換測試 CORS 設定(一樣無法顯示正常結果，失敗) 搜尋文獻 之後找了相關的文件， Better error handling with window.onerror 其中裡面值得參考的資訊， Security To prevent information leaking from one server to the other, it is important to be careful with scripts that have two different origins. If the script URL is has a different origin to the document then the three arguments returned ...